/* =========================================================
   רותי מויאל – עריכת וידאו | ruty.co.il
   גיליון סגנון ראשי – HTML/CSS/JS טהור, Mobile-First, RTL
   ---------------------------------------------------------
   תוכן:
   01. משתנים (Design Tokens)
   02. איפוס ובסיס
   03. טיפוגרפיה וכלי עזר
   04. כפתורים וקישורים
   05. פתיח קלאפר
   06. כותרת עליונה וניווט
   07. Hero + טיימליין
   08. רצועת פילם
   09. שני עולמות
   10. אודות
   11. שירותים
   12. תהליך
   13. תיק עבודות (CSS Art)
   14. המלצות
   15. שאלות נפוצות
   16. צור קשר וטופס
   17. פוטר
   18. כפתורים צפים, נגישות, עוגיות, דיאלוגים
   19. אנימציות חשיפה
   20. מצבי נגישות (ניגודיות, תנועה, קישורים)
   ========================================================= */

/* ---------- 01. משתנים ---------- */
:root {
  /* פלטה: נואר קולנועי + קרם ומוזהב מהלוגו + פסטלים ורכים + ניאון לעולם העסקי */
  --bg: #0b0a10;
  --bg-2: #120f1a;
  --surface: #171422;
  --surface-2: #1f1b2c;
  --line: rgba(246, 235, 221, 0.12);
  --line-strong: rgba(246, 235, 221, 0.25);

  --cream: #f6ebdd;
  --cream-2: #e9dcc9;
  --muted: #b9ae9f;

  --gold: #e8c071;
  --gold-2: #c9973f;
  --gold-deep: #8a6420;

  --pink: #f5b6c8;
  --peach: #fbd9b0;
  --mint: #b6ead8;
  --lav: #c9b8f2;
  --sky: #b9ddf2;

  --neon-pink: #ff3d8f;
  --neon-cyan: #33e6ff;

  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 10px 40px rgba(232, 192, 113, 0.25);

  --radius: 18px;
  --radius-sm: 10px;

  --font-display: 'Karantina', 'Heebo', sans-serif;
  --font-body: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --header-h: 72px;
  --font-scale: 1;

  color-scheme: dark;
}

/* ---------- 02. איפוס ובסיס ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* clip (עם hidden כגיבוי) חוסם גם גלילה אופקית תכנותית – מונע "בריחה" של הדף הצידה */
  overflow-x: hidden; overflow-x: clip;
  font-size: calc(100% * var(--font-scale));
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden; overflow-x: clip;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--gold); }
::selection { background: var(--gold); color: var(--bg); }

/* פוקוס ברור לכל אלמנט אינטראקטיבי (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

.section { padding-block: clamp(72px, 10vw, 128px); position: relative; }

/* ---------- 03. טיפוגרפיה וכלי עזר ---------- */
.skip-link {
  position: absolute; top: -100px; inset-inline-start: 16px;
  background: var(--gold); color: var(--bg);
  padding: 10px 18px; border-radius: 0 0 10px 10px;
  font-weight: 700; z-index: 1000; text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.85rem; letter-spacing: 0.08em; font-weight: 500;
  color: var(--gold); text-transform: uppercase;
  margin-bottom: 14px;
}
.rec-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255, 77, 77, .6);
  animation: rec 1.6s infinite;
}
@keyframes rec {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, .6); }
  70% { box-shadow: 0 0 0 10px rgba(255, 77, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}

.section__head { max-width: 720px; margin-bottom: clamp(36px, 6vw, 64px); }
.section__head--row {
  max-width: none; display: flex; flex-wrap: wrap; gap: 24px;
  align-items: flex-end; justify-content: space-between;
}
.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--cream);
}
.section__lead {
  margin-top: 18px; font-size: 1.08rem; color: var(--cream-2); max-width: 60ch;
}
.gold-text {
  background: linear-gradient(100deg, var(--gold) 0%, #f7dea3 45%, var(--gold-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: normal;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; text-decoration: none; color: inherit;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
  transition: gap .25s var(--ease-out), opacity .2s;
}
.link-arrow::after { content: '←'; transition: transform .25s var(--ease-out); }
.link-arrow:hover { gap: 14px; }
.link-arrow:hover::after { transform: translateX(-4px); }

.link-btn {
  background: none; border: 0; padding: 0; color: var(--gold);
  text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: #fff; }

/* ---------- 04. כפתורים ---------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 2px solid transparent; position: relative; overflow: hidden;
  transition: transform .3s var(--ease-spring), box-shadow .3s, background .3s, color .3s, border-color .3s;
  isolation: isolate;
}
.btn--sm { padding: 10px 18px; font-size: 0.92rem; }
.btn--block { width: 100%; }
.btn--gold {
  background: linear-gradient(120deg, #f2d28a, var(--gold) 50%, var(--gold-2));
  color: #1a1408; box-shadow: var(--shadow-gold);
}
.btn--gold::before {
  /* ברק שעובר על הכפתור ב-hover */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(120%);
  transition: transform .7s var(--ease-out);
}
.btn--gold:hover::before, .btn--gold:focus-visible::before { transform: translateX(-120%); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(232, 192, 113, .38); }
.btn--ghost {
  border-color: var(--line-strong); color: var(--cream);
  background: rgba(255,255,255,.02);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

/* ---------- 05. פתיח קלאפר ---------- */
.intro {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  display: grid; place-items: center;
  animation: introOut .6s var(--ease-out) 1.9s forwards;
}
.intro.is-done { display: none; }
.intro__clap { position: relative; width: min(70vw, 300px); }
.intro__board {
  background: #15131c; border: 2px solid var(--gold);
  border-radius: 0 0 14px 14px; padding: 34px 20px 24px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.intro__text {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 2.4rem; line-height: 1; color: var(--gold); letter-spacing: .04em;
}
.intro__sub { display: block; font-size: .78rem; letter-spacing: .3em; color: var(--muted); margin-top: 8px; }
/* הפס העליון מחובר בציר בצד שמאל (כמו בלוגו): נפתח כלפי מעלה ואז נוחת – "קלאפ" */
.intro__stick {
  height: 34px; border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(-55deg, var(--cream) 0 22px, #111 22px 44px);
  border: 2px solid var(--gold); border-bottom: 0;
  transform-origin: left bottom;
  transform: rotate(0deg);
  animation: clap 1.1s var(--ease-out) .35s forwards;
}
@keyframes clap {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(-26deg); }   /* נפתח – הקצה הימני עולה */
  70%  { transform: rotate(-26deg); }   /* רגע של המתנה */
  100% { transform: rotate(0deg); }     /* נוחת – קלאפ */
}
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

/* ---------- 06. כותרת עליונה ---------- */
.header {
  position: fixed; top: 0; inset-inline: 0; z-index: 900;
  height: var(--header-h);
  transition: background .4s, box-shadow .4s, backdrop-filter .4s;
}
.header.is-scrolled {
  background: rgba(11, 10, 16, .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand__mark img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: .02em; }
.brand__tag { font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }

.nav__list { display: flex; gap: 4px; }
.nav__link {
  display: block; padding: 8px 12px; border-radius: 8px;
  color: var(--cream-2); text-decoration: none; font-weight: 500; font-size: .95rem;
  position: relative; transition: color .2s;
}
.nav__link::after {
  content: ''; position: absolute; inset-inline: 12px; bottom: 4px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease-out);
}
.nav__link:hover, .nav__link.is-active { color: #fff; }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 10px; }
.header__cta span { display: none; }

.nav-toggle {
  width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.03); display: grid; place-items: center; gap: 0; padding: 0;
}
.nav-toggle__bar {
  width: 22px; height: 2px; background: var(--cream); border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .2s; margin: 2.5px 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* מובייל: התפריט הופך לפאנל צד */
@media (max-width: 960px) {
  .nav {
    position: fixed; top: var(--header-h); inset-inline: 0; bottom: 0;
    background: rgba(11, 10, 16, .96); backdrop-filter: blur(16px);
    padding: 28px 24px; transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .3s, transform .3s var(--ease-out), visibility .3s;
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav__list { flex-direction: column; gap: 6px; }
  .nav__link { font-family: var(--font-display); font-size: 2.2rem; padding: 10px 14px; }
  .nav__link::after { bottom: 8px; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 961px) {
  .nav-toggle { display: none; }
  .header__cta span { display: inline; }
}

/* ---------- 07. Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(40px, 8vw, 96px));
  padding-bottom: clamp(48px, 6vw, 80px);
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(232, 192, 113, .16), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(201, 184, 242, .12), transparent 60%),
    var(--bg);
}
/* זרקור שעוקב אחרי העכבר (רק במכשירים עם עכבר) */
.hero__spot {
  position: absolute; width: 640px; height: 640px; border-radius: 50%; top: 0; left: 0;
  background: radial-gradient(circle, rgba(232,192,113,.14), transparent 60%);
  pointer-events: none; will-change: transform;
  --x: 70%; --y: 30%;
  transform: translate(-50%, -50%) translate(var(--x), var(--y));
  transition: transform .8s var(--ease-out);
}
/* גרעיניות פילם עדינה */
.hero__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero__grid { position: relative; display: grid; gap: 40px; align-items: center; }

.hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.4rem, 11vw, 7.2rem); line-height: .95; letter-spacing: .01em;
  margin-bottom: 22px;
}
.hero__title em { font-style: normal; }
/* מילים מתחלפות: כולן באותו תא גריד כדי שהרוחב יישאר יציב */
.rotator {
  display: inline-grid; vertical-align: bottom; color: var(--pink);
  text-decoration: underline; text-decoration-color: rgba(245,182,200,.35);
  text-decoration-thickness: .06em; text-underline-offset: .08em;
}
.rotator__word {
  grid-area: 1 / 1; opacity: 0; transform: translateY(.5em) rotateX(-40deg);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
  white-space: nowrap;
}
.rotator__word.is-active { opacity: 1; transform: none; }
.rotator__word.is-leaving { opacity: 0; transform: translateY(-.5em) rotateX(40deg); }

.hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--cream-2); max-width: 56ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: .9rem; color: var(--muted); }
.hero__badges li { display: flex; align-items: center; gap: 8px; }
.hero__badges li::before { content: '✓'; color: var(--gold); font-weight: 700; }

/* כרטיס הלוגו – קרם, מוטה קלות, עם "מסקינטייפ" */
.hero__visual { position: relative; justify-self: center; width: min(100%, 440px); }
.logo-card {
  position: relative; background: #fbf6ee; border-radius: 22px; padding: 6%;
  transform: rotate(-4deg);
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255,255,255,.06), 0 0 80px rgba(232,192,113,.12);
  animation: floatCard 7s ease-in-out infinite;
  transition: transform .5s var(--ease-out);
}
.logo-card:hover { transform: rotate(-1deg) scale(1.02); }
.logo-card img { width: 100%; height: auto; }
.logo-card__tape {
  position: absolute; width: 110px; height: 30px; opacity: .85;
  background: rgba(201, 184, 242, .7); backdrop-filter: blur(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.logo-card__tape--a { top: -12px; right: 30px; transform: rotate(-8deg); }
.logo-card__tape--b { bottom: -10px; left: 40px; transform: rotate(6deg); background: rgba(182, 234, 216, .8); }
@keyframes floatCard {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 56px; }
  .hero__visual { width: min(100%, 480px); justify-self: end; }
}

/* טיימליין עריכה */
.timeline {
  width: min(100% - 32px, 1200px); margin: clamp(48px, 7vw, 88px) auto 0;
  background: rgba(23, 20, 34, .75); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; position: relative;
  font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', monospace;
  box-shadow: var(--shadow-soft);
  direction: ltr; /* טיימליין קורא משמאל לימין כמו בתוכנות עריכה */
}
.timeline__ruler {
  display: flex; justify-content: space-between; padding: 8px 12px 6px 60px;
  font-size: .7rem; color: var(--muted); border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--line) calc(20% - 1px) 20%);
}
.timeline__tracks { position: relative; padding: 10px 12px 12px 0; }
.timeline__track { position: relative; height: 34px; margin: 6px 0 6px 60px; background: rgba(255,255,255,.03); border-radius: 6px; }
.timeline__label {
  position: absolute; left: -52px; top: 50%; transform: translateY(-50%);
  width: 40px; text-align: center; font-size: .7rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 0;
}
.clip {
  position: absolute; top: 3px; bottom: 3px; left: var(--s); width: var(--w);
  border-radius: 6px; padding: 0 10px; font-size: .7rem; line-height: 28px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #14101c; font-weight: 700;
  border-inline-start: 3px solid rgba(0,0,0,.25); direction: rtl;
}
.clip--gold { background: var(--gold); }
.clip--pink { background: var(--pink); }
.clip--lav { background: var(--lav); }
.clip--mint { background: var(--mint); }
.clip--sky { background: var(--sky); }
.clip--peach { background: var(--peach); }
.clip--audio { background: #22303a; border: 1px solid rgba(51,230,255,.4); }
.wave {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--neon-cyan) 0 2px, transparent 2px 5px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  opacity: .8;
  clip-path: polygon(0 40%, 5% 20%, 10% 55%, 15% 25%, 20% 60%, 25% 30%, 30% 50%, 35% 15%, 40% 65%, 45% 35%, 50% 55%, 55% 20%, 60% 60%, 65% 30%, 70% 50%, 75% 25%, 80% 65%, 85% 35%, 90% 55%, 95% 30%, 100% 45%, 100% 55%, 95% 70%, 90% 45%, 85% 65%, 80% 35%, 75% 75%, 70% 50%, 65% 70%, 60% 40%, 55% 80%, 50% 45%, 45% 65%, 40% 35%, 35% 85%, 30% 50%, 25% 70%, 20% 40%, 15% 75%, 10% 45%, 5% 80%, 0 60%);
}
/* ראש ההשמעה: מונפש ב-transform בלבד (ללא layout) – הפסאודו-אלמנטים ברוחב ההורה ונעים 100% מרוחבם */
.playhead { position: absolute; top: 0; bottom: 0; left: 60px; right: 14px; pointer-events: none; }
.playhead::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  border-left: 2px solid #ff4d4d; filter: drop-shadow(0 0 6px #ff4d4d);
  animation: playhead 14s linear infinite; will-change: transform;
}
.playhead::before {
  content: ''; position: absolute; top: -2px; left: -6px; width: 100%; height: 10px;
  background: #ff4d4d; clip-path: polygon(0 0, 14px 0, 7px 100%);
  animation: playhead 14s linear infinite; will-change: transform;
}
@keyframes playhead { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* ---------- 08. רצועת פילם ---------- */
.filmstrip {
  background: #07060b; padding: 8px 0; overflow: hidden;
  border-block: 1px solid var(--line);
}
.filmstrip__holes {
  height: 14px;
  background: repeating-linear-gradient(90deg, transparent 0 14px, var(--cream-2) 14px 30px, transparent 30px 44px);
  -webkit-mask: linear-gradient(#000, #000);
  opacity: .85;
}
.filmstrip__track { display: flex; width: max-content; padding: 12px 0; animation: marquee 32s linear infinite; }
.filmstrip__items { display: flex; }
.filmstrip__items span {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem);
  padding: 0 28px; color: var(--cream); white-space: nowrap; letter-spacing: .02em;
}
.filmstrip__items span:nth-child(3n+1) { color: var(--pink); }
.filmstrip__items span:nth-child(3n+2) { color: var(--gold); }
.filmstrip__items span:nth-child(3n+3) { color: var(--mint); }
.filmstrip__items span::after { content: '•'; margin-inline-start: 56px; color: var(--muted); font-size: .8em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }
.filmstrip:hover .filmstrip__track { animation-play-state: paused; }

/* ---------- 09. שני עולמות ---------- */
.worlds__grid { display: grid; gap: 24px; }
.world {
  border-radius: var(--radius); overflow: hidden; position: relative;
  display: grid; grid-template-rows: auto 1fr;
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.world:hover { transform: translateY(-6px); }
.world__art { padding: 28px 28px 0; }
.world__svg { width: 100%; height: auto; }
.world__body { padding: 26px 28px 34px; position: relative; }
.world__num { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; opacity: .18; position: absolute; top: 10px; inset-inline-end: 22px; }
.world__title { font-family: var(--font-display); font-weight: 700; font-size: 2.3rem; line-height: 1; margin-bottom: 14px; }
.world__body p { margin-bottom: 18px; }
.world__list { display: grid; gap: 8px; margin-bottom: 22px; }
.world__list li { display: flex; gap: 10px; align-items: baseline; font-weight: 500; }
.world__list li::before { content: '—'; opacity: .6; }

/* פרטי: קרם רך, פסטלים */
.world--private { background: linear-gradient(160deg, #fbf3ea, #f7e6e9 60%, #efe6fa); color: #2a2231; box-shadow: var(--shadow-soft); }
.world--private .world__title { color: #2a2231; }
.world--private .world__list li::before { color: #d16d8a; }
.world--private .link-arrow { color: #8a4a63; }
.world--private:hover { box-shadow: 0 30px 70px rgba(245, 182, 200, .25); }

/* עסקי: כהה, ניאון, מסגרת גרדיאנט */
.world--business { background: var(--surface); color: var(--cream); border: 1px solid var(--line); }
.world--business::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--neon-pink), transparent 40%, transparent 60%, var(--neon-cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .7; transition: opacity .4s;
}
.world--business:hover::before { opacity: 1; }
.world--business:hover { box-shadow: 0 30px 70px rgba(51, 230, 255, .12); }
.world--business .world__list li::before { color: var(--neon-cyan); }
.world--business .link-arrow { color: var(--neon-cyan); }

@media (min-width: 820px) {
  .worlds__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  /* א-סימטריה קלה: הכרטיס השני מוזז מעט למטה */
  .world--business { margin-top: 48px; }
}

/* ---------- 10. אודות ---------- */
.about { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.about__grid { display: grid; gap: 48px; align-items: center; }
.about__visual { position: relative; justify-self: center; width: min(100%, 380px); }

/* "פורטרט" – עינית מצלמה עם בוקה זהוב; החליפו ב-<img> כשיש תמונה */
.portrait { position: relative; }
.portrait__frame {
  position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(160px 160px at 30% 30%, rgba(232,192,113,.55), transparent 70%),
    radial-gradient(120px 120px at 75% 20%, rgba(245,182,200,.45), transparent 70%),
    radial-gradient(200px 200px at 70% 80%, rgba(201,184,242,.35), transparent 70%),
    radial-gradient(90px 90px at 20% 85%, rgba(182,234,216,.35), transparent 70%),
    linear-gradient(160deg, #221c30, #0e0c15);
  box-shadow: var(--shadow-soft);
  transform: rotate(2deg); transition: transform .5s var(--ease-out);
}
.portrait:hover .portrait__frame { transform: rotate(0deg); }
.portrait__img {
  position: absolute; inset: 10% 8%; width: 84%; height: 80%; object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.5));
  animation: floatCard 8s ease-in-out infinite;
}
.portrait__glow {
  position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(232,192,113,.12), transparent 30%);
  animation: spin 14s linear infinite; pointer-events: none; will-change: transform;
}
@keyframes spin { to { transform: rotate(360deg); } }
.portrait__badge {
  position: absolute; top: 16px; inset-inline-start: 16px; font-size: .75rem; letter-spacing: .2em;
  color: #ff6b6b; font-family: ui-monospace, monospace;
}
.portrait__corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--cream); opacity: .8; }
.portrait__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.portrait__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.portrait__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.portrait__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.portrait__caption { text-align: center; margin-top: 14px; color: var(--muted); font-size: .9rem; letter-spacing: .05em; }
.about__sticker {
  position: absolute; top: -16px; inset-inline-end: -12px; background: var(--pink); color: #3a1f2a;
  font-weight: 800; padding: 10px 16px; border-radius: 999px; transform: rotate(8deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
}

.about__text { display: grid; gap: 16px; color: var(--cream-2); font-size: 1.05rem; }
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 30px; }
.values li {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: grid; gap: 4px; background: rgba(255,255,255,.02);
  transition: border-color .3s, transform .3s var(--ease-out);
}
.values li:hover { border-color: var(--gold); transform: translateY(-3px); }
.values strong { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--gold); }
.values span { font-size: .9rem; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 34px 0 0; }
.stat dt { font-size: .82rem; color: var(--muted); order: 2; }
.stat dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1; color: var(--cream); }
.stat { display: flex; flex-direction: column; gap: 6px; border-inline-start: 2px solid var(--gold); padding-inline-start: 14px; }

@media (min-width: 900px) {
  .about__grid { grid-template-columns: .8fr 1.2fr; gap: 72px; }
  .about__visual { justify-self: start; }
}

/* ---------- 11. שירותים ---------- */
.services__group + .services__group { margin-top: clamp(56px, 8vw, 96px); }
.services__group-title {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; margin-bottom: 26px;
}
.services__group-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem;
}
.services__group-icon--soft { background: var(--pink); color: #3a1f2a; }
.services__group-icon--neon { background: linear-gradient(135deg, var(--neon-pink), var(--neon-cyan)); color: #0b0a10; }

.cards { display: grid; gap: 18px; }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px 22px; display: grid; gap: 12px; align-content: start;
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
  overflow: hidden;
}
.card::after {
  /* הילה עדינה בפינה */
  content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%;
  top: -80px; inset-inline-end: -80px; background: var(--gold); opacity: 0; filter: blur(60px);
  transition: opacity .5s; pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow-soft); }
.card:hover::after { opacity: .18; }
.card__icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(232,192,113,.12); color: var(--gold); display: grid; place-items: center; }
.card__icon svg { width: 24px; height: 24px; }
.card__title { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; font-weight: 700; }
.card p { color: var(--cream-2); font-size: .98rem; }
.card__tag { font-size: .8rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 6px; }
.card--neon .card__icon { background: rgba(51,230,255,.1); color: var(--neon-cyan); }
.card--neon::after { background: var(--neon-pink); }
.card--neon:hover { border-color: var(--neon-cyan); }

@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* ---------- 12. תהליך ---------- */
.process { background: var(--bg-2); }
.steps { display: grid; gap: 22px; counter-reset: step; position: relative; }
.step {
  position: relative; padding: 24px 22px 24px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .3s, transform .4s var(--ease-out);
}
.step:hover { border-color: var(--gold); transform: translateY(-4px); }
.step__num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); color: #1a1408; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  margin-bottom: 14px; box-shadow: 0 0 0 6px var(--bg-2), 0 0 0 7px var(--line-strong);
}
.step__title { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; margin-bottom: 8px; }
.step p { color: var(--cream-2); font-size: .96rem; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .steps::before {
    /* פס מחבר כמו טראק בתוכנת עריכה */
    content: ''; position: absolute; top: 46px; inset-inline: 40px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 18px); opacity: .4;
  }
  .step:nth-child(even) { margin-top: 36px; }
}

/* ---------- 13. תיק עבודות ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter {
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--cream-2); font-weight: 500; transition: all .25s;
}
.filter:hover { border-color: var(--gold); color: var(--gold); }
.filter.is-active { background: var(--gold); color: #1a1408; border-color: var(--gold); }

.work-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.work { border-radius: var(--radius); overflow: hidden; transition: opacity .4s, transform .4s var(--ease-out); }
.work.is-hidden { display: none; }
.work__btn {
  position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: var(--surface);
  text-align: start; display: block; overflow: hidden; border-radius: inherit; color: inherit;
}
.work__btn:focus-visible { outline-offset: -4px; }
.art {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  display: grid; place-content: center; text-align: center; gap: 4px;
  transition: transform .8s var(--ease-out);
}
.work--tall .art { aspect-ratio: 9 / 14; }
.work--wide .art { aspect-ratio: 16 / 9; }
.work__btn:hover .art { transform: scale(1.04); }
.art__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.art__title {
  position: relative; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4rem); line-height: .95; color: #fff;
  text-shadow: 0 6px 30px rgba(0,0,0,.3);
}
.art__sub { position: relative; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.art__title--neon {
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(255,61,143,.5));
}
.art__title--serif { letter-spacing: .12em; font-weight: 400; color: var(--gold); }
.art__title--soft { color: #fff; opacity: .9; }

/* חתונה: פסטל ורוד-אפרסק עם טבעות */
.art--wedding { background: linear-gradient(135deg, #f5b6c8, #fbd9b0 55%, #c9b8f2); }
/* רילס: שחור + ניאון + אקולייזר */
.art--reels { background: radial-gradient(circle at 50% 110%, rgba(255,61,143,.35), transparent 60%), #0b0a10; }
.art__bars { position: absolute; bottom: 0; inset-inline: 0; height: 45%; display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding-bottom: 10%; }
.art__bars i { width: 12px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--neon-cyan), var(--neon-pink)); height: 30%; animation: bars 1.4s ease-in-out infinite; }
.art__bars i:nth-child(2) { height: 60%; animation-delay: -.2s; }
.art__bars i:nth-child(3) { height: 90%; animation-delay: -.4s; }
.art__bars i:nth-child(4) { height: 50%; animation-delay: -.6s; }
.art__bars i:nth-child(5) { height: 70%; animation-delay: -.8s; }
@keyframes bars { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
/* בר מצווה: לבנדר-תכלת עם קונפטי */
.art--barmitzva { background: linear-gradient(160deg, #c9b8f2, #b9ddf2); }
.confetti {
  position: absolute; left: 0; right: 0; top: -200px; bottom: 0;
  background-image:
    radial-gradient(circle, #ff3d8f 3px, transparent 4px), radial-gradient(circle, #e8c071 3px, transparent 4px),
    radial-gradient(circle, #fff 2px, transparent 3px), radial-gradient(circle, #33e6ff 2px, transparent 3px);
  background-size: 100px 100px, 50px 50px, 100px 100px, 50px 50px;
  background-position: 10px 20px, 40px 30px, 55px 65px, 5px 5px; opacity: .8;
  animation: drift 12s linear infinite; will-change: transform;
}
@keyframes drift { to { transform: translateY(200px); } }
/* אדריכלים: כהה עם גריד עדין וזהב */
.art--arch {
  background:
    linear-gradient(rgba(232,192,113,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(232,192,113,.12) 1px, transparent 1px),
    linear-gradient(160deg, #1a1626, #0b0a10);
  background-size: 28px 28px, 28px 28px, 100%;
}
.art--arch::before { content: ''; position: absolute; inset: 14% 22%; border: 1px solid rgba(232,192,113,.6); }
/* אוכל: אש */
.art--food { background: linear-gradient(180deg, #0b0a10 30%, #2a0d16); }
.art__flame {
  position: absolute; bottom: -10%; left: 50%; width: 60%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 80%, #ffb347, #ff3d8f 40%, transparent 70%);
  filter: blur(18px); animation: flame 2.2s ease-in-out infinite alternate; will-change: transform, opacity;
}
@keyframes flame { from { transform: translateX(-50%) scale(1); opacity: .8; } to { transform: translateX(-50%) scale(1.15) translateY(-6%); opacity: 1; } }
/* יום הולדת: קרם-אפרסק עם פריימים של תמונות */
.art--birthday { background: linear-gradient(150deg, #fbd9b0, #f6ebdd 50%, #f5b6c8); }
.art--birthday .art__title { color: #3a2a1e; text-shadow: none; }
.art--birthday .art__sub { color: #5b4636; }
.art__frames { position: absolute; inset: 0; }
.art__frames i { position: absolute; width: 34%; aspect-ratio: 4/5; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.15); border: 8px solid #fff; border-bottom-width: 26px; }
.art__frames i::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #c9b8f2, #b6ead8); }
.art__frames i:nth-child(1) { top: 12%; left: 8%; transform: rotate(-8deg); }
.art__frames i:nth-child(2) { top: 20%; right: 10%; transform: rotate(6deg); }
.art__frames i:nth-child(2)::before { background: linear-gradient(135deg, #f5b6c8, #fbd9b0); }
.art__frames i:nth-child(3) { bottom: 8%; left: 34%; transform: rotate(3deg); }
.art__frames i:nth-child(3)::before { background: linear-gradient(135deg, #b9ddf2, #c9b8f2); }
/* זיכרון: ירקרק-כהה ונר */
.art--memory { background: linear-gradient(180deg, #14201d, #0b0a10); place-content: start center; padding-top: 14%; }
.art__candle {
  position: absolute; bottom: 8%; left: 50%; width: 10px; height: 22%; transform: translateX(-50%);
  background: linear-gradient(#f6ebdd, #e9dcc9); border-radius: 4px;
}
.art__candle::before {
  content: ''; position: absolute; top: -18px; left: 50%; width: 10px; height: 18px; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 100%, #fff, #ffcf6b 50%, transparent 75%); border-radius: 50% 50% 40% 40%;
  animation: flicker 1.1s ease-in-out infinite alternate;
}
.art__candle::after {
  content: ''; position: absolute; top: -120px; left: 50%; width: 220px; height: 220px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,207,107,.35), transparent 60%); filter: blur(6px);
}
@keyframes flicker { from { transform: translateX(-50%) scaleY(1); } to { transform: translateX(-52%) scaleY(1.2); } }
/* ברית: תכלת-מנטה עם כוכבים וירח */
.art--brit { background: linear-gradient(160deg, #b9ddf2, #b6ead8); }
.art--brit .art__title { color: #1f2f3a; text-shadow: none; }
.art--brit .art__sub { color: #3b4f5c; }
.art__stars {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, #fff 2px, transparent 3px), radial-gradient(circle, #fff 1.5px, transparent 2.5px);
  background-size: 80px 80px, 50px 50px; background-position: 10px 10px, 35px 25px; opacity: .9;
}
.art__moon {
  position: absolute; top: 12%; inset-inline-end: 12%; width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 68% 38%, transparent 54%, #fff 56%); filter: drop-shadow(0 0 18px rgba(255,255,255,.7));
}
/* אופנה: פסים אלכסוניים בתנועה */
.art--fashion { background: #0b0a10; }
.art__stripes {
  position: absolute; inset: -60%; transform: rotate(-20deg); will-change: transform;
  background: repeating-linear-gradient(90deg, var(--neon-pink) 0 44px, var(--peach) 44px 88px, var(--neon-cyan) 88px 132px, var(--lav) 132px 176px);
  animation: slide 6s linear infinite;
}
.art__stripes i { display: none; }
@keyframes slide { to { transform: rotate(-20deg) translateX(176px); } }
.art--fashion .art__title { color: #0b0a10; background: none; -webkit-text-fill-color: initial; filter: none; }
.art--fashion .art__sub { color: #0b0a10; }

.work__meta {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 14px 16px; font-size: .92rem;
}
.work__cat { font-size: .72rem; padding: 4px 10px; border-radius: 999px; background: rgba(245,182,200,.15); color: var(--pink); font-weight: 700; }
.work__cat--neon { background: rgba(51,230,255,.12); color: var(--neon-cyan); }
.work__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work__dur { font-family: ui-monospace, monospace; color: var(--muted); font-size: .8rem; }
.play {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.92); transform: translate(-50%, -80%) scale(.6); opacity: 0;
  transition: transform .4s var(--ease-spring), opacity .3s; box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.play::before { content: ''; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #1a1408; }
.work__btn:hover .play, .work__btn:focus-visible .play { opacity: 1; transform: translate(-50%, -80%) scale(1); }
.portfolio__note { margin-top: 28px; text-align: center; color: var(--muted); }

@media (min-width: 640px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .work-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 18px; }
  .work { grid-column: span 2; grid-row: span 2; }
  .work--wide { grid-column: span 4; grid-row: span 2; }
  .work--tall { grid-column: span 2; grid-row: span 3; }
  .work__btn { display: grid; grid-template-rows: 1fr auto; }
  .art, .work--tall .art, .work--wide .art { aspect-ratio: auto; height: 100%; min-height: 0; }
}

/* ---------- 14. המלצות ---------- */
.testimonials { background: var(--bg-2); overflow: hidden; }
.testimonials::before {
  content: '”'; position: absolute; top: -40px; inset-inline-start: -10px; font-family: var(--font-display);
  font-size: 30rem; line-height: 1; color: var(--gold); opacity: .05; pointer-events: none;
}
.slider { max-width: 860px; margin-inline: auto; }
.slider__track { display: grid; }
.quote {
  grid-area: 1 / 1; opacity: 0; transform: translateX(-30px); visibility: hidden;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility .5s;
}
.quote.is-active { opacity: 1; transform: none; visibility: visible; }
.quote blockquote {
  margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 44px); position: relative;
}
.quote blockquote::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 4px; height: 100%;
  background: linear-gradient(var(--gold), var(--pink)); border-radius: 4px 0 0 4px;
}
.quote p { font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.6; font-weight: 300; }
.quote footer { margin-top: 20px; display: flex; flex-direction: column; gap: 2px; }
.quote cite { font-style: normal; font-weight: 700; color: var(--gold); }
.quote footer span { font-size: .88rem; color: var(--muted); }
.slider__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.slider__btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent;
  display: grid; place-items: center; transition: all .25s;
}
.slider__btn:hover { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.slider__dots { display: flex; gap: 8px; }
.slider__dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--line-strong); padding: 0; transition: all .3s; }
.slider__dot[aria-selected="true"] { background: var(--gold); width: 28px; border-radius: 6px; }

/* ---------- 15. שאלות נפוצות ---------- */
.faq__grid { display: grid; gap: 40px; }
.accordion { display: grid; gap: 10px; }
.acc { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; transition: border-color .3s; }
.acc[open] { border-color: var(--gold); }
.acc summary {
  cursor: pointer; padding: 18px 20px; font-weight: 700; font-size: 1.05rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: '+'; font-family: var(--font-body); font-weight: 300; font-size: 1.7rem; line-height: 1; color: var(--gold);
  transition: transform .3s var(--ease-out); flex-shrink: 0;
}
.acc[open] summary::after { transform: rotate(45deg); }
.acc summary:focus-visible { outline-offset: -3px; }
.acc__body { padding: 0 20px 20px; color: var(--cream-2); animation: fadeDown .4s var(--ease-out); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: .8fr 1.2fr; align-items: start; }
  .faq .section__head { position: sticky; top: calc(var(--header-h) + 24px); margin-bottom: 0; }
}

/* ---------- 16. צור קשר ---------- */
.contact {
  background:
    radial-gradient(700px 400px at 90% 100%, rgba(232,192,113,.12), transparent 60%),
    radial-gradient(600px 400px at 0% 0%, rgba(245,182,200,.1), transparent 60%),
    var(--bg);
}
.contact__grid { display: grid; gap: 44px; }
.contact__list { display: grid; gap: 12px; margin-top: 28px; }
.contact__item {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02); text-decoration: none; color: var(--cream);
  transition: border-color .3s, transform .3s var(--ease-out);
}
.contact__item:hover { border-color: var(--gold); transform: translateX(-4px); }
.contact__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(232,192,113,.12); color: var(--gold); flex-shrink: 0; }
.contact__item > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.contact__item strong { font-size: .85rem; color: var(--muted); font-weight: 500; }
.contact__item span span { font-weight: 700; direction: ltr; text-align: start; }

.form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 4vw, 36px); display: grid; gap: 18px; box-shadow: var(--shadow-soft);
}
.form__row { display: grid; gap: 18px; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 500; font-size: .95rem; }
.field label span[aria-hidden] { color: var(--pink); }
.field__hint { color: var(--muted); font-weight: 400; font-size: .85rem; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 12px 14px; color: var(--cream); transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(14px + 5px) 50%, 14px 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-start: 34px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(232,192,113,.2);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #ff6b6b; }
.field__error { color: #ff9b9b; font-size: .85rem; min-height: 1.2em; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 10px 12px; }
.field--check input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--gold); }
.field--check .field__error { grid-column: 2; }
.form__note { font-size: .82rem; color: var(--muted); }
.form__success {
  background: rgba(182,234,216,.12); border: 1px solid var(--mint); color: var(--mint);
  padding: 16px 18px; border-radius: 12px; animation: fadeDown .5s var(--ease-out);
}
.form__success a { color: #fff; }
.form__error {
  background: rgba(255,107,107,.1); border: 1px solid #ff8a8a; color: #ffb3b3;
  padding: 16px 18px; border-radius: 12px; animation: fadeDown .5s var(--ease-out);
}
.form__error a { color: #fff; }
.form button[type="submit"][disabled] { opacity: .7; cursor: progress; }
/* Honeypot – מוסתר ויזואלית בלי להזיז אותו מחוץ למסך (ב-RTL, left שלילי מרחיב את אזור הגלילה האופקי!) */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; } }

/* ---------- 17. פוטר ---------- */
.footer { background: #07060b; border-top: 1px solid var(--line); padding-top: 56px; }
.footer__grid { display: grid; gap: 36px; padding-bottom: 40px; }
.footer__logo { width: 180px; background: #fbf6ee; border-radius: 16px; padding: 10px; margin-bottom: 16px; transform: rotate(-2deg); }
.footer__brand p { color: var(--muted); max-width: 32ch; }
.footer h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); margin-bottom: 12px; }
.footer__nav ul { display: grid; gap: 8px; }
.footer__nav a, .footer__nav .link-btn, .footer__contact a { color: var(--cream-2); text-decoration: none; transition: color .2s; font-size: .95rem; }
.footer__nav a:hover, .footer__nav .link-btn:hover, .footer__contact a:hover { color: var(--gold); }
.footer__contact { display: grid; gap: 8px; justify-items: start; }
.social { display: flex; gap: 10px; margin-top: 10px; }
.social a { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: all .25s; }
.social a:hover { background: var(--gold); color: #1a1408; border-color: var(--gold); transform: translateY(-3px); }
.footer__bottom {
  border-top: 1px solid var(--line); padding: 20px 0; display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between; font-size: .85rem; color: var(--muted);
}
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- 18. כפתורים צפים ---------- */
.fab {
  position: fixed; z-index: 800; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.4); border: 0; transition: transform .3s var(--ease-spring), opacity .3s;
}
.fab:hover { transform: translateY(-4px) scale(1.05); }
.fab--wa { right: 20px; bottom: 20px; background: #25d366; color: #fff; }
.fab--top { right: 20px; bottom: 88px; background: var(--surface); color: var(--gold); border: 1px solid var(--line-strong); }
.fab--top[hidden] { display: none; }

/* תפריט נגישות */
.a11y { position: fixed; left: 20px; bottom: 20px; z-index: 850; }
.a11y__toggle {
  width: 56px; height: 56px; border-radius: 50%; border: 0; background: #1d4ed8; color: #fff;
  display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.4); transition: transform .3s var(--ease-spring);
}
.a11y__toggle:hover { transform: scale(1.06); }
.a11y__panel {
  position: absolute; bottom: 68px; left: 0; width: 240px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 14px; display: grid; gap: 6px; box-shadow: var(--shadow-soft);
  animation: fadeDown .3s var(--ease-out);
}
.a11y__panel[hidden] { display: none; }
.a11y__title { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 4px; }
.a11y__opt {
  display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.02); text-align: start; transition: all .2s;
}
.a11y__opt:hover { border-color: var(--gold); }
.a11y__opt[aria-pressed="true"] { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.a11y__opt--reset { justify-content: center; color: var(--muted); }
.a11y__statement { font-size: .85rem; margin-top: 6px; }

/* באנר עוגיות */
.cookie {
  position: fixed; inset-inline: 16px; bottom: 16px; z-index: 950; display: flex; justify-content: center;
  animation: cookieUp .6s var(--ease-out);
}
.cookie[hidden] { display: none; }
.cookie__inner {
  width: min(100%, 780px); background: rgba(23,20,34,.96); border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px); border-radius: 16px; padding: 18px 20px; display: grid; gap: 14px;
  grid-template-columns: auto 1fr; align-items: center; box-shadow: var(--shadow-soft);
}
.cookie__icon { font-size: 1.8rem; }
.cookie p { font-size: .92rem; color: var(--cream-2); }
.cookie__actions { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@media (min-width: 720px) {
  .cookie__inner { grid-template-columns: auto 1fr auto; }
  .cookie__actions { grid-column: auto; }
}
@keyframes cookieUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* דיאלוגים (משפטי + לייטבוקס) */
dialog { border: 0; padding: 0; background: transparent; color: var(--cream); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(5, 4, 8, .78); backdrop-filter: blur(6px); }
dialog[open] { animation: dialogIn .35s var(--ease-out); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.dialog { width: min(100% - 32px, 760px); margin: auto; }
.dialog__inner {
  position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 44px); max-height: 85vh; overflow-y: auto; line-height: 1.75;
}
.dialog__inner h2 { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--gold); margin-bottom: 16px; }
.dialog__inner h3 { font-size: 1.1rem; margin: 22px 0 6px; color: var(--cream); }
.dialog__inner p, .dialog__inner li { color: var(--cream-2); font-size: .98rem; }
.dialog__inner ul { list-style: disc; padding-inline-start: 22px; display: grid; gap: 6px; }
.dialog__date { margin-top: 24px; font-size: .85rem; color: var(--muted); }
.dialog__close {
  position: absolute; top: 14px; inset-inline-start: 14px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--cream); display: grid; place-items: center;
  transition: all .2s; z-index: 2;
}
.dialog__close:hover { background: var(--gold); color: #1a1408; }

.lightbox { width: min(100% - 32px, 980px); margin: auto; }
.lightbox__inner { position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; display: grid; max-height: 90vh; }
.lightbox__media { background: #000; }
.lightbox__media .art { aspect-ratio: 16 / 9; }
.lightbox__media iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.lightbox__body { padding: 24px; display: grid; gap: 10px; justify-items: start; overflow-y: auto; }
.lightbox__meta { font-size: .8rem; color: var(--gold); letter-spacing: .1em; font-family: ui-monospace, monospace; }
.lightbox__title { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
.lightbox__desc { color: var(--cream-2); }
@media (min-width: 900px) {
  .lightbox__inner { grid-template-columns: 1.4fr 1fr; }
  .lightbox__media .art { aspect-ratio: auto; height: 100%; min-height: 420px; }
}

/* ---------- 19. אנימציות חשיפה בגלילה ---------- */
.has-js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.has-js .reveal.is-visible { opacity: 1; transform: none; }
/* השהיה מדורגת לכרטיסים ברשת */
.has-js .cards .reveal:nth-child(2), .has-js .steps .reveal:nth-child(2), .has-js .work-grid .reveal:nth-child(2) { transition-delay: .08s; }
.has-js .cards .reveal:nth-child(3), .has-js .steps .reveal:nth-child(3), .has-js .work-grid .reveal:nth-child(3) { transition-delay: .16s; }
.has-js .cards .reveal:nth-child(4), .has-js .steps .reveal:nth-child(4), .has-js .work-grid .reveal:nth-child(4) { transition-delay: .24s; }
.has-js .cards .reveal:nth-child(5), .has-js .steps .reveal:nth-child(5) { transition-delay: .32s; }
.has-js .cards .reveal:nth-child(6) { transition-delay: .4s; }

/* ---------- 20. מצבי נגישות ---------- */
/* כיבוד העדפת מערכת להפחתת תנועה */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .intro { display: none; }
  .has-js .reveal { opacity: 1; transform: none; }
}
/* עצירת אנימציות מתפריט הנגישות */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation: none !important; transition: none !important;
}
html.a11y-motion .reveal { opacity: 1 !important; transform: none !important; }
html.a11y-motion .intro { display: none; }

/* הדגשת קישורים */
html.a11y-links a, html.a11y-links .link-btn { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ניגודיות גבוהה */
html.a11y-contrast {
  --bg: #000; --bg-2: #000; --surface: #0a0a0a; --surface-2: #111;
  --cream: #fff; --cream-2: #fff; --muted: #e6e6e6;
  --gold: #ffd75e; --gold-2: #ffd75e; --pink: #ffb3c9; --mint: #b8ffe6; --lav: #d9c8ff; --sky: #c4e6ff;
  --neon-pink: #ff6fae; --neon-cyan: #7ff0ff;
  --line: rgba(255,255,255,.4); --line-strong: rgba(255,255,255,.6);
}
html.a11y-contrast .gold-text, html.a11y-contrast .art__title--neon { background: none; -webkit-text-fill-color: var(--gold); color: var(--gold); }
html.a11y-contrast .hero__grain, html.a11y-contrast .hero__spot { display: none; }
html.a11y-contrast .world--private { background: #fff; color: #000; }
html.a11y-contrast .world--private .world__title, html.a11y-contrast .world--private .link-arrow { color: #000; }
html.a11y-contrast .btn--gold { background: var(--gold); color: #000; }
html.a11y-contrast .card, html.a11y-contrast .step, html.a11y-contrast .form, html.a11y-contrast .acc { border-color: #fff; }

/* הדפסה */
@media print {
  .header, .fab, .a11y, .cookie, .intro, .timeline, .filmstrip, .hero__spot, .hero__grain { display: none !important; }
  body { background: #fff; color: #000; }
  .has-js .reveal { opacity: 1; transform: none; }
}