/* ============================================================
   DANIEL YOSEF ABDU · PORTFOLIO · v2
   שפה: נייבי עמוק, זהב כקו וכהדגשה, כחול המותג לפעולה.
   הגרדיאנט כחול-סגול חי רק בלוגו עצמו.
   כותרות: Fb Reissfeder (פונט המותג). ממשק: Rubik. טקסט: Heebo.
   ============================================================ */

@font-face {
  font-family: 'FbReissfeder';
  src: url('../assets/fonts/FbReissfeder-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --navy-950: #04061a;
  --navy-900: #070c26;
  --navy-800: #0b1340;
  --navy-700: #10205f;
  --navy:        #022775;
  --purple-deep: #381883;
  --purple:      #8c30fe;
  --blue:        #2a66e0;
  --sky:         #6aabfb;
  --sky-light:   #c9defb;
  --gold:        #ffde59;
  --gold-deep:   #f2b53b;
  --white:       #ffffff;
  --text:        #eef2ff;
  --muted:       #a7b1d4;
  --line:        rgba(201, 222, 251, 0.14);
  --gold-line:   rgba(255, 222, 89, 0.45);

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

  --container: min(1240px, 92vw);
  --radius: 18px;
  --radius-sm: 12px;
  --section-pad: clamp(84px, 11vw, 160px);
  --nav-h: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow-card: 0 30px 60px -28px rgba(2, 5, 20, .95);
  --shadow-lift: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--gold-line);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--navy-950); color: var(--text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.7;
  direction: rtl; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; margin: 0; }
h3, h4 { font-family: var(--font-ui); line-height: 1.2; margin: 0; }
p { margin: 0; }
::selection { background: rgba(255,222,89,.85); color: #1a1240; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.container { width: var(--container); margin-inline: auto; }
.accent { color: var(--gold); }
.grad-text { color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   שכבות גלובליות: preloader, wipe, progress, cursor, grain
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 3000; background: var(--navy-950);
  display: grid; place-items: center; color: var(--gold);
}
.loader__mark { width: 74px; height: 78px; background: var(--gold); -webkit-mask: url('../assets/brand/symbol-white.png') center / contain no-repeat; mask: url('../assets/brand/symbol-white.png') center / contain no-repeat; }
.loader__line { position: absolute; bottom: 0; inset-inline: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: right; }
.loader.is-done { display: none; }

.wipe { position: fixed; inset: 0; z-index: 2900; background: var(--navy-950); transform: scaleY(0); transform-origin: top; pointer-events: none; }
.wipe.is-in { transform: scaleY(1); }

.progress { position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 2800; background: var(--gold); transform: scaleX(0); transform-origin: right; pointer-events: none; }

.cursor { position: fixed; top: 0; left: 0; z-index: 2700; pointer-events: none; mix-blend-mode: normal; }
.cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--gold); transition: transform .3s var(--ease), opacity .3s; }
.cursor__ring { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid rgba(255,222,89,.7); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s, border-color .3s; display: grid; place-items: center; }
.cursor__label { font: 600 11px/1 var(--font-ui); color: #1a1240; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s var(--ease); white-space: nowrap; }
.cursor.is-link .cursor__ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: var(--gold); }
.cursor.is-view .cursor__ring { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: var(--gold); border-color: var(--gold); }
.cursor.is-view .cursor__label { opacity: 1; transform: none; }
.cursor.is-view .cursor__dot { opacity: 0; }
.cursor.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* אור אמביינטי: הצבע של העבודה שמסתכלים עליה נשפך אל מחוץ למסגרת */
.ambient {
  position: fixed; inset: 0; z-index: 2550; pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 8%, var(--amb, transparent) 0%, transparent 68%),
    radial-gradient(75% 55% at 50% 104%, var(--amb, transparent) 0%, transparent 62%);
  opacity: 0; transition: opacity 1.1s var(--ease);
  mix-blend-mode: screen;
}
.ambient.is-lit { opacity: .26; }
@media (max-width: 900px) { .ambient.is-lit { opacity: .18; } }

.grain {
  position: fixed; inset: -50%; z-index: 2600; pointer-events: none; width: 200%; height: 200%;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0,0) } 20% { transform: translate(-3%,2%) } 40% { transform: translate(2%,-4%) } 60% { transform: translate(-4%,-1%) } 80% { transform: translate(3%,3%) } 100% { transform: translate(0,0) } }

/* ============================================================
   כפתורים ותוויות
   ============================================================ */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.8em; border-radius: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 1rem; line-height: 1;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s, color .3s, border-color .3s;
  will-change: transform; white-space: nowrap; border: 1px solid transparent;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn--gold { background: var(--gold); color: #1a1240; border-color: var(--gold); }
.btn--gold:hover { background: #fff0a6; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn--brand { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--brand:hover { background: #3a76f5; transform: translateY(-2px); }
.btn--sm { padding: .7em 1.2em; font-size: .9rem; }

.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .7em; border-radius: 6px; font-size: .8rem; font-weight: 500; font-family: var(--font-ui);
  color: var(--sky-light); border: 1px solid var(--line);
}
.chip--gold { color: var(--gold); border-color: var(--gold-line); }

/* ============================================================
   ניווט
   ============================================================ */
.nav { position: fixed; top: 0; inset-inline: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background .5s, box-shadow .5s, height .4s; }
.nav__inner { width: var(--container); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav.is-scrolled { height: 64px; background: rgba(4,6,26,.92); box-shadow: 0 1px 0 var(--line); }
.nav__logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-weight: 600; font-size: 1.02rem; }
.nav__logo img { height: 38px; width: auto; transition: transform .5s var(--ease); }
.nav__logo:hover img { transform: rotate(-6deg) scale(1.06); }
.nav__logo span { color: var(--sky-light); }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a { position: relative; padding: .55em .85em; font-family: var(--font-ui); font-weight: 500; font-size: .95rem; color: var(--sky-light); transition: color .3s; }
.nav__links a::after { content: ''; position: absolute; inset-inline: .85em; bottom: .25em; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav__links a:hover, .nav__links a.is-active { color: #fff; }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__burger { display: none; position: relative; width: 46px; height: 46px; border-radius: 8px; border: 1px solid var(--line); }
.nav__burger span { position: absolute; left: 13px; top: 22px; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .35s var(--ease), opacity .3s; }
.nav__burger span:nth-child(1) { transform: translateY(-6px); }
.nav__burger span:nth-child(3) { transform: translateY(6px); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: calc(var(--nav-h) + 10px) 20px 30px; overflow-y: auto; background: var(--navy-950); opacity: 0; pointer-events: none; transition: opacity .4s; }
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu ul { display: grid; gap: 0; text-align: center; }
.mobile-menu a { display: block; padding: .2em 1em; font-family: var(--font-display); font-size: clamp(1.7rem, 6.4vw, 2.4rem); line-height: 1.35; color: #fff; transform: translateY(20px); opacity: 0; transition: transform .6s var(--ease), opacity .6s; }
.mobile-menu.is-open a { transform: none; opacity: 1; }
.mobile-menu a:hover { color: var(--gold); }
@media (max-width: 900px) { .nav__links, .nav__cta .btn { display: none; } .nav__burger { display: block; } }

/* ============================================================
   סקשנים, כותרות, קצוות קרועים, דקורציה
   ============================================================ */
.section { position: relative; padding-block: var(--section-pad); isolation: isolate; }
.section--tight { padding-block: clamp(56px, 7vw, 100px); }
main > .section, main > .page-hero { position: relative; z-index: 1; }
.section__head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }
.section__head--center { margin-inline: auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-weight: 500; font-size: .92rem; color: var(--gold); margin-bottom: 16px; }
.eyebrow::before { content: ''; width: 16px; height: 17px; background: var(--gold); -webkit-mask: url('../assets/brand/symbol-white.png') center / contain no-repeat; mask: url('../assets/brand/symbol-white.png') center / contain no-repeat; }
h2.title { font-size: clamp(2.3rem, 5.4vw, 4rem); }
.lede { margin-top: 16px; font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 60ch; }
.section__head--center .lede { margin-inline: auto; }

.edge { position: absolute; inset-inline: 0; top: 0; height: clamp(26px, 3.6vw, 52px); z-index: 4; pointer-events: none; }
.edge svg { width: 100%; height: 100%; display: block; }

.bg-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bg-media video, .bg-media img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.bg-media::after { content: ''; position: absolute; inset: 0; background: var(--bg-overlay, linear-gradient(180deg, rgba(4,6,26,.78), rgba(4,6,26,.9))); }
.bg-pattern { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06; background: url('../assets/brand/pattern-crown.webp') center / 560px repeat; mix-blend-mode: screen; }

/* אלמנטים דקורטיביים צפים (פרלקסה ב-JS) */
.deco { position: absolute; z-index: -1; pointer-events: none; will-change: transform; }
.deco--mark { width: clamp(120px, 18vw, 260px); aspect-ratio: 865 / 919; background: var(--navy-700); -webkit-mask: url('../assets/brand/symbol-white.png') center / contain no-repeat; mask: url('../assets/brand/symbol-white.png') center / contain no-repeat; opacity: .55; }
.deco--ring { width: clamp(160px, 22vw, 340px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--gold-line); }
.deco--ring::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(255,222,89,.25); }
.deco--blob { width: clamp(220px, 30vw, 520px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(140,48,254,.35), rgba(42,102,224,.18) 45%, transparent 70%); filter: blur(30px); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: sticky; top: 0; z-index: 0; min-height: min(100svh, 1100px); display: grid; align-items: center; padding-block: calc(var(--nav-h) + 40px) 90px; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg video, .hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.015); }
.hero__overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(4,6,26,.9) 0%, rgba(4,6,26,.62) 48%, rgba(4,6,26,.25) 100%), linear-gradient(180deg, rgba(4,6,26,.35), rgba(4,6,26,0) 30%, rgba(4,6,26,.85) 100%); }
.hero__inner { width: var(--container); margin-inline: auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.hero__text { position: relative; }
.hero__logowrap { display: block; width: fit-content; margin-bottom: 26px; animation: float 7s ease-in-out infinite; }
.hero__logo { width: clamp(150px, 15vw, 210px); height: auto; filter: drop-shadow(0 18px 40px rgba(4,6,26,.8)); will-change: transform; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-10px) rotate(-1.2deg) } }
.hero__name { font-family: var(--font-ui); font-weight: 500; font-size: clamp(.95rem, 1.4vw, 1.1rem); color: var(--gold); letter-spacing: .02em; margin-bottom: 14px; }
.hero__title { font-size: clamp(2.6rem, 5.6vw, 4.9rem); line-height: 1.04; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__sub { margin-top: 24px; max-width: 560px; font-size: clamp(1.02rem, 1.5vw, 1.22rem); color: var(--sky-light); }
.hero__sub strong { color: #fff; font-weight: 600; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero__social { display: flex; gap: 18px; margin-top: 30px; font-family: var(--font-ui); font-size: .88rem; color: var(--muted); }
.hero__social a { display: inline-flex; align-items: center; gap: 6px; color: var(--sky-light); transition: color .3s; }
.hero__social a:hover { color: var(--gold); }
.hero__social svg { width: 16px; height: 16px; }

/* סרט הרילס: שני טורים שנעים בכיוונים מנוגדים */
.strip { position: relative; height: min(78vh, 760px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; overflow: hidden; transform: rotate(-4deg) scale(1.06); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.strip__col { display: flex; flex-direction: column; gap: 14px; animation: driftUp var(--dur, 46s) linear infinite; will-change: transform; }
.strip__col--rev { animation-direction: reverse; }
.strip:hover .strip__col { animation-play-state: paused; }
@keyframes driftUp { from { transform: translateY(0) } to { transform: translateY(-50%) } }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-sm); overflow: hidden; background: var(--navy-800); flex: none; box-shadow: var(--shadow-card); }
.reel video, .reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(4,6,26,.85)); }
.reel__label { position: absolute; z-index: 2; inset-inline: 12px; bottom: 12px; font-family: var(--font-ui); font-weight: 600; font-size: .85rem; display: flex; justify-content: space-between; align-items: baseline; }
.reel__label small { font-weight: 400; color: var(--gold); font-size: .72rem; }
.reel__sound { position: absolute; z-index: 3; top: 10px; inset-inline-start: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(4,6,26,.6); display: grid; place-items: center; opacity: 0; transition: opacity .3s; }
.reel:hover .reel__sound { opacity: 1; }
.reel__sound svg { width: 15px; height: 15px; }
.hero__scroll { position: absolute; bottom: 26px; inset-inline-start: 50%; transform: translateX(50%); width: 1px; height: 54px; background: linear-gradient(180deg, transparent, var(--gold)); animation: scrollcue 2.2s ease-in-out infinite; }
@keyframes scrollcue { 0% { transform: translateX(50%) scaleY(0); transform-origin: top } 50% { transform: translateX(50%) scaleY(1); transform-origin: top } 51% { transform-origin: bottom } 100% { transform: translateX(50%) scaleY(0); transform-origin: bottom } }

@media (max-width: 900px) {
  .hero { position: relative; padding-bottom: 40px; }
  .hero__inner { grid-template-columns: 1fr; }
  .strip { height: auto; display: flex; gap: 12px; transform: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; mask-image: none; -webkit-mask-image: none; margin-top: 30px; }
  .strip::-webkit-scrollbar { display: none; }
  .strip__col { flex-direction: row; animation: none; }
  .strip__col--dup { display: none; }
  .reel { width: 46vw; max-width: 230px; scroll-snap-align: center; }
  .hero__scroll { display: none; }
}

/* הסקשן שגולש מעל ההירו */
.works { border-radius: 28px 28px 0 0; box-shadow: 0 -30px 80px rgba(0,0,0,.6); }
@media (max-width: 900px) { .works { border-radius: 0; box-shadow: none; } }

/* ============================================================
   עבודות (בנטו)
   ============================================================ */
.works { background: var(--navy-900); }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(150px, 19vw, 250px); gap: clamp(10px, 1.3vw, 18px); grid-auto-flow: dense; }
.card { grid-column: span 4; grid-row: span 1; }
.card--wide { grid-column: span 8; grid-row: span 2; }
.card--tall { grid-column: span 4; grid-row: span 2; }
@media (max-width: 1000px) { .card { grid-column: span 6; } .card--wide { grid-column: span 12; } .card--tall { grid-column: span 6; } }
@media (max-width: 560px) { .bento { grid-auto-rows: clamp(150px, 42vw, 220px); } .card, .card--wide, .card--tall { grid-column: span 12; grid-row: span 1; } .card--wide { grid-row: span 2; } }

.card {
  position: relative; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  background: var(--navy-800); isolation: isolate; transform-style: preserve-3d;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.card img, .card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), opacity .5s; }
.card video { opacity: 0; pointer-events: none; }
.card.is-live video { opacity: 1; }
.card.is-broken video { display: none; }
.card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,6,26,0) 45%, rgba(4,6,26,.92)); opacity: .75; transition: opacity .5s; }
.card::before { content: ''; position: absolute; z-index: 3; top: 0; inset-inline-end: 0; width: 22px; height: 22px; background: var(--gold); clip-path: polygon(0 0, 100% 100%, 0 100%); opacity: 0; transition: opacity .4s; }
.card:hover::before { opacity: 1; }
.card__body { position: absolute; z-index: 2; inset-inline: 18px; bottom: 16px; transform: translateY(8px); transition: transform .6s var(--ease); }
.card__cat { display: inline-block; font-family: var(--font-ui); font-size: .72rem; font-weight: 500; color: var(--gold); margin-bottom: 6px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.card__title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.25rem); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.card__sub { font-size: .82rem; color: var(--sky-light); opacity: .8; }
.card--wide .card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.card__play { position: absolute; z-index: 2; top: 14px; inset-inline-start: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(4,6,26,.6); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); }
.card__play svg { width: 15px; height: 15px; margin-inline-start: 2px; }
.card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow, var(--gold)) 45%, transparent), 0 26px 60px -22px color-mix(in srgb, var(--glow, var(--gold)) 55%, transparent); }
.card:hover img, .card:hover video { transform: scale(1.07); }
.card:hover::after { opacity: 1; }
.card::before { background: var(--glow, var(--gold)); }
.card:hover .card__body { transform: translateY(0); }
.card:hover .card__cat { opacity: 1; transform: none; }
.works__more { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 56px); }

/* ============================================================
   סרטונים
   ============================================================ */
.videos { background: var(--navy-950); }
.videos__grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(10px, 1.3vw, 18px); }
.videos__side { display: grid; gap: clamp(10px, 1.3vw, 18px); }
.videos__rest { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.3vw, 18px); margin-top: clamp(10px, 1.3vw, 18px); }
@media (max-width: 900px) { .videos__grid { grid-template-columns: 1fr; } .videos__side { grid-template-columns: 1fr 1fr; } .videos__rest { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .videos__side, .videos__rest { grid-template-columns: 1fr; } }
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--navy-800); isolation: isolate; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.yt--featured { aspect-ratio: auto; min-height: 100%; }
.yt__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.yt:hover .yt__img { transform: scale(1.05); }
.yt::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,6,26,.05) 40%, rgba(4,6,26,.85)); }
.yt__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; transition: transform .5s var(--ease); }
.yt__play svg { width: 26px; height: 26px; margin-inline-start: 3px; fill: #1a1240; }
.yt:not(.yt--featured) .yt__play { width: 52px; height: 52px; }
.yt:not(.yt--featured) .yt__play svg { width: 20px; height: 20px; }
.yt__title { position: absolute; inset-inline: 18px; bottom: 16px; font-family: var(--font-ui); font-weight: 600; font-size: 1rem; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.yt--featured .yt__title { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 2rem); inset-inline: 26px; bottom: 22px; }
.yt__tag { position: absolute; top: 14px; inset-inline-start: 14px; background: rgba(4,6,26,.6); }
.yt:hover .yt__play { transform: translate(-50%, -50%) scale(1.1); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.yt.is-playing::before, .yt.is-playing .yt__play, .yt.is-playing .yt__title { display: none; }
.videos__all { display: flex; justify-content: center; gap: 14px; margin-top: 36px; }

/* ============================================================
   אודות
   ============================================================ */
.about { background: var(--navy-900); overflow: hidden; }
.about__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } }
.about__visual { position: relative; display: grid; place-items: center; min-height: 460px; will-change: clip-path; }
.about__blob { position: absolute; width: min(78%, 460px); aspect-ratio: 1; border-radius: 42% 58% 55% 45% / 45% 40% 60% 55%; background: linear-gradient(140deg, var(--blue), var(--purple-deep)); animation: blob 12s ease-in-out infinite; }
@keyframes blob { 0%,100% { border-radius: 42% 58% 55% 45% / 45% 40% 60% 55%; transform: rotate(0) } 50% { border-radius: 58% 42% 45% 55% / 55% 60% 40% 45%; transform: rotate(8deg) } }
.about__ring { position: absolute; width: min(92%, 540px); aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--gold-line); will-change: transform; }
@keyframes spin { to { transform: rotate(360deg) } }
.about__photo { position: relative; z-index: 2; width: min(80%, 420px); filter: drop-shadow(0 30px 50px rgba(4,6,26,.8)); }
.about__chip { position: absolute; z-index: 3; padding: .5em .9em; border-radius: 6px; font-family: var(--font-ui); font-weight: 500; font-size: .85rem; background: var(--navy-950); border: 1px solid var(--gold-line); will-change: transform; }
.about__chip--1 { top: 12%; inset-inline-end: 6%; animation-delay: -1s; }
.about__chip--2 { bottom: 22%; inset-inline-start: 2%; animation-delay: -3s; }
.about__chip--3 { top: 46%; inset-inline-end: -2%; animation-delay: -5s; color: var(--gold); }
.about__text p + p { margin-top: 16px; }
.about__text p { color: var(--muted); font-size: 1.05rem; }
.about__text p strong { color: #fff; font-weight: 600; }
.about__quote { margin: 30px 0 0; padding-inline-start: 18px; border-inline-start: 2px solid var(--gold); font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.3; color: #fff; }
.about__line { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 26px; font-family: var(--font-ui); font-size: .95rem; color: var(--sky-light); }
.about__line span::after { content: '·'; color: var(--gold); margin-inline: 12px; }
.about__line span:last-child::after { content: ''; margin: 0; }
.about__cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   לקוחות (מרקיז)
   ============================================================ */
.clients { background: var(--navy-900); overflow: hidden; }
.marquee { position: relative; overflow: hidden; padding-block: 14px; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee__track { display: flex; gap: clamp(40px, 6vw, 90px); width: max-content; animation: marquee var(--dur, 40s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(50%) } }
.marquee__item { display: flex; align-items: center; justify-content: center; height: 64px; flex: none; opacity: .7; filter: grayscale(1) brightness(1.4); transition: filter .4s, translate .4s var(--ease); will-change: opacity, scale; }
.marquee__item img { height: 100%; width: auto; max-width: 220px; object-fit: contain; }
.marquee__item:hover { filter: none; translate: 0 -4px; }
.marquee--big .marquee__item { height: 84px; }
.clients__label { text-align: center; font-family: var(--font-ui); font-size: .85rem; color: var(--muted); margin: 26px 0 8px; }

/* ============================================================
   כלים וחנות
   ============================================================ */
.tools { background: var(--navy-950); }
.tools__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(10px, 1.3vw, 18px); }
@media (max-width: 900px) { .tools__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tools__grid { grid-template-columns: 1fr; } }
.tool { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-sm); overflow: hidden; background: var(--navy-900); border: 1px solid var(--line); transition: transform .6s var(--ease), border-color .4s; transform-style: preserve-3d; }
.tool:hover { transform: translateY(-4px); border-color: var(--gold-line); }
.tool__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-800); }
.tool__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tool:hover .tool__img img { transform: scale(1.06); }
.tool__body { padding: 20px 22px 22px; display: grid; gap: 8px; align-content: start; flex: 1; }
.tool__body h3 { font-size: 1.15rem; font-weight: 600; }
.tool__body p { color: var(--muted); font-size: .95rem; }
.tool__meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; }
.tool__price { font-family: var(--font-ui); font-weight: 600; color: var(--gold); }
.tool__price s { color: var(--muted); font-weight: 400; margin-inline-start: 8px; font-size: .9em; }
/* כרטיס יחיד ורחב לתוסף */
.tools__grid--solo { grid-template-columns: 1fr; }
.tool--solo { flex-direction: row; align-items: stretch; background: var(--navy-900); }
.tool--solo .tool__img { flex: 1 1 52%; aspect-ratio: auto; min-height: 300px; }
.tool--solo .tool__body { flex: 1 1 48%; padding: clamp(24px, 3.4vw, 44px); align-content: center; gap: 12px; }
.tool--solo .tool__body h3 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); }
.tool--solo .tool__body p { font-size: 1.03rem; max-width: 46ch; }
.tool--solo .tool__meta { padding-top: 18px; justify-content: flex-start; gap: 14px; }
@media (max-width: 760px) { .tool--solo { flex-direction: column; } .tool--solo .tool__img { min-height: 0; aspect-ratio: 16 / 9; } }

/* ============================================================
   מהרשתות: רילס אמיתיים מהפיד
   ============================================================ */
.social { background: var(--navy-900); overflow: hidden; }
.social__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.social__head .section__head { margin-bottom: 0; }
.social__stats { display: flex; gap: 26px; font-family: var(--font-ui); }
.social__stat b { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: var(--gold); line-height: 1; }
.social__stat span { font-size: .85rem; color: var(--muted); }
.social__rail { display: flex; gap: clamp(10px, 1.2vw, 16px); overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc((100vw - var(--container)) / -2); padding-inline: calc((100vw - var(--container)) / 2); }
.social__rail::-webkit-scrollbar { display: none; }
.post { position: relative; flex: 0 0 clamp(180px, 15.5vw, 232px); aspect-ratio: 9 / 16; border-radius: var(--radius-sm); overflow: hidden; background: var(--navy-800); scroll-snap-align: start; transition: transform .5s var(--ease); }
.post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.post::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,6,26,.35) 0%, transparent 30%, transparent 55%, rgba(4,6,26,.92)); }
.post__net { position: absolute; z-index: 2; top: 10px; inset-inline-start: 10px; width: 30px; height: 30px; border-radius: 8px; background: rgba(4,6,26,.6); display: grid; place-items: center; }
.post__net svg { width: 16px; height: 16px; }
.post__pin { position: absolute; z-index: 2; top: 12px; inset-inline-end: 12px; font-family: var(--font-ui); font-size: .68rem; font-weight: 600; color: var(--gold); }
.post__title { position: absolute; z-index: 2; inset-inline: 12px; bottom: 12px; font-family: var(--font-ui); font-weight: 600; font-size: .88rem; line-height: 1.3; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.post:hover { translate: 0 -6px; }
.post:hover img { transform: scale(1.06); }
.social__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
@media (max-width: 900px) { .post { flex: 0 0 47vw; max-width: 210px; } .social__head { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   יצירת קשר
   ============================================================ */
.contact { background: var(--navy-900); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }
.contact__title { font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: 1.05; }
.contact__lines { margin-top: 30px; display: grid; gap: 14px; }
.contact__line { display: flex; align-items: center; gap: 14px; font-family: var(--font-ui); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 500; color: #fff; transition: color .3s; direction: ltr; justify-content: flex-end; }
.contact__line:hover { color: var(--gold); }
.contact__line svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.soc { display: inline-flex; align-items: center; gap: 10px; padding: .65em 1.05em; border-radius: 8px; border: 1px solid var(--line); font-family: var(--font-ui); font-weight: 500; font-size: .95rem; transition: transform .4s var(--ease), border-color .3s, color .3s; }
.soc svg { width: 20px; height: 20px; }
.soc:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--gold); }
.form { display: grid; gap: 14px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius); background: var(--navy-950); border: 1px solid var(--line); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--font-ui); font-size: .85rem; color: var(--sky-light); font-weight: 500; }
.field input, .field textarea, .field select { width: 100%; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line); color: #fff; font: inherit; font-size: 1rem; background: var(--navy-900); transition: border-color .3s; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--gold); }
.field textarea { min-height: 140px; resize: vertical; }
.form__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.form__note { font-size: .82rem; color: var(--muted); }
.form__ok { display: none; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--gold-line); color: var(--gold); font-weight: 600; }
.form.is-sent .form__ok { display: block; }

/* ============================================================
   פוטר
   ============================================================ */
.footer { position: relative; background: var(--navy-950); padding: 60px 0 34px; overflow: hidden; z-index: 1; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__brand img { height: 46px; width: auto; opacity: .9; }
.footer__brand b { font-family: var(--font-ui); }
.footer__brand small { display: block; color: var(--muted); font-size: .8rem; font-family: var(--font-ui); }
.footer__links { display: flex; gap: 6px 18px; flex-wrap: wrap; font-family: var(--font-ui); font-size: .9rem; color: var(--sky-light); }
.footer__links a:hover { color: var(--gold); }
.footer__copy { width: 100%; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.footer__sig { height: 42px; width: auto; opacity: .55; filter: invert(1); }
.to-top { position: fixed; z-index: 90; bottom: 26px; inset-inline-start: 26px; width: 46px; height: 46px; border-radius: 50%; background: var(--navy-900); border: 1px solid var(--line); display: grid; place-items: center; opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s var(--ease), border-color .3s; }
.to-top.is-shown { opacity: 1; transform: none; }
.to-top:hover { border-color: var(--gold); color: var(--gold); }
.to-top svg { width: 18px; height: 18px; }

/* ============================================================
   לייטבוקס
   ============================================================ */
.lightbox { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; padding: 20px; background: rgba(4,6,26,.94); opacity: 0; pointer-events: none; transition: opacity .35s; }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__box { width: min(1180px, 96vw); max-height: 92vh; display: grid; grid-template-columns: 1.6fr 1fr; border-radius: var(--radius); overflow: hidden; background: var(--navy-900); border: 1px solid var(--line); transform: translateY(20px) scale(.98); transition: transform .5s var(--ease); }
.lightbox.is-open .lightbox__box { transform: none; }
@media (max-width: 900px) { .lightbox__box { grid-template-columns: 1fr; overflow-y: auto; } }
.lightbox__box { position: relative; }
.lightbox__box::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 4; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glow, var(--sky)) 50%, transparent), 0 0 90px -10px color-mix(in srgb, var(--glow, var(--sky)) 60%, transparent); transition: box-shadow .8s var(--ease); }
.lightbox__media { position: relative; background: #000; display: grid; place-items: center; min-height: 260px; }
.lightbox__media img, .lightbox__media video, .lightbox__media iframe { width: 100%; height: 100%; max-height: 92vh; object-fit: contain; border: 0; }
.lightbox__media iframe { aspect-ratio: 16 / 9; height: auto; }
@media (max-width: 900px) { .lightbox__media img, .lightbox__media video { max-height: 56vh; } }
.lightbox__info { padding: clamp(22px, 3vw, 36px); display: grid; align-content: start; gap: 12px; overflow-y: auto; }
.lightbox__cat { font-family: var(--font-ui); color: var(--gold); font-size: .82rem; font-weight: 500; }
.lightbox__title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.lightbox__sub { color: var(--sky-light); font-size: .95rem; margin-top: -6px; font-family: var(--font-ui); }
.lightbox__desc { color: var(--muted); font-size: 1rem; }
.lightbox__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lightbox__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(7,12,38,.8); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: border-color .3s, color .3s; z-index: 5; }
.lightbox__nav:hover { border-color: var(--gold); color: var(--gold); }
.lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__nav--prev { inset-inline-start: 14px; }
.lightbox__nav--next { inset-inline-end: 14px; }
.lightbox__close { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 6; width: 44px; height: 44px; border-radius: 50%; background: rgba(7,12,38,.8); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: background .3s, transform .4s var(--ease); }
.lightbox__close:hover { background: #c0392b; transform: rotate(90deg); }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__counter { position: absolute; bottom: 12px; inset-inline-end: 16px; direction: ltr; font-family: var(--font-ui); font-size: .8rem; color: var(--sky-light); background: rgba(7,12,38,.7); padding: 4px 10px; border-radius: 6px; z-index: 5; }

/* ============================================================
   עמוד העבודות
   ============================================================ */
.page-hero { position: relative; padding: calc(var(--nav-h) + 70px) 0 50px; text-align: center; overflow: hidden; }
.page-hero h1 { font-size: clamp(2.8rem, 7.5vw, 5.4rem); }
.filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.filter { padding: .6em 1.1em; border-radius: 8px; border: 1px solid var(--line); font-family: var(--font-ui); font-weight: 500; font-size: .92rem; color: var(--sky-light); transition: border-color .3s, color .3s, background .3s, transform .4s var(--ease); }
.filter:hover { transform: translateY(-2px); border-color: var(--gold-line); }
.filter.is-active { background: var(--gold); color: #1a1240; border-color: var(--gold); }
.filter b { font-weight: 400; opacity: .7; margin-inline-start: 6px; font-size: .85em; }
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.3vw, 18px); }
.works-grid .card { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 10; }
.works-grid .card.is-hidden { display: none; }
@media (max-width: 900px) { .works-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .works-grid { grid-template-columns: 1fr; } }

/* ============================================================
   מובייל: סרגל תחתון, רילס במרקיז, תיקוני מגע
   ============================================================ */
html, body { overflow-x: clip; }
a, button { -webkit-tap-highlight-color: transparent; }
.mobile-bar {
  display: none; position: fixed; bottom: 0; inset-inline: 0; z-index: 95;
  grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(4,6,26,.96); border-top: 1px solid var(--line);
}
.mobile-bar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 2px; font-family: var(--font-ui); font-weight: 500; font-size: .66rem; color: var(--sky-light); border-radius: 8px; }
.mobile-bar a.is-active { color: var(--gold); }
.mobile-bar svg { width: 22px; height: 22px; }
.mobile-bar__wa { color: #4ade80; }
.mobile-bar__wa svg { width: 24px; height: 24px; }
@media (max-width: 900px) {
  .grain { display: none; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .to-top { display: none; }
  .mobile-bar { display: grid; }
  .nav { padding-top: env(safe-area-inset-top, 0px); }
  .hero { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 24px; }
  .hero__logo { width: 116px; }
  .hero__logowrap { margin-bottom: 16px; }
  .hero__sub { font-size: 1rem; margin-top: 18px; }
  .hero__ctas { margin-top: 26px; }
  .hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
  .hero__social { margin-top: 22px; gap: 14px; }
  .strip { margin-top: 30px; height: auto; display: block; overflow: hidden; transform: none; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .strip__col { flex-direction: row; width: max-content; gap: 10px; animation: driftX var(--dur, 48s) linear infinite; }
  .strip__col--rev { display: none; }
  .strip__col--dup { display: block; }
  .reel { width: 42vw; max-width: 190px; }
  .yt--featured { aspect-ratio: 16 / 9; min-height: 0; }
  .yt--featured .yt__title { font-size: 1.2rem; }
  .filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -4vw; padding: 4px 4vw; scrollbar-width: none; scroll-snap-type: x proximity; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; scroll-snap-align: start; }
  .mobile-menu__foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
  .mobile-menu__foot .hero__social { color: var(--sky-light); font-size: .95rem; }
  .lightbox { padding: 10px; }
  .lightbox__box { max-height: calc(100vh - 20px - 66px); }
  .section { padding-block: clamp(64px, 14vw, 100px); }
}
@keyframes driftX { from { transform: translateX(0) } to { transform: translateX(50%) } }
@media (min-width: 901px) { .mobile-menu__foot { display: none; } }

/* ============================================================
   אנימציות הופעה (GSAP)
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="blur"] { transform: none; filter: blur(12px); }
.no-js [data-reveal], .reveal-done [data-reveal] { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .grain, .cursor, .loader, .wipe { display: none; }
  .hero { position: relative; }
}

/* ============================================================
   v3 · מסע הגלילה: עומק ברקעים, סקשנים חדשים, מיקרו-אינטראקציות
   ============================================================ */
/* דילוג לתוכן (נגישות) */
.skip { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 4000; padding: .6em 1em; border-radius: 8px; background: var(--gold); color: #1a1240; font-family: var(--font-ui); font-weight: 600; transform: translateY(-200%); transition: transform .3s; }
.skip:focus { transform: none; }

/* שכבות עומק לרקע של כל סקשן: תמונה מטושטשת מראש שזזה בפרלקסה + שכבת אור נושמת */
.bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.bg__img { position: absolute; left: 0; right: 0; top: -22%; width: 100%; height: 144%; object-fit: cover; opacity: .62; will-change: transform; }
.bg__light { position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: min(84vmax, 1200px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c, var(--sky)) 20%, transparent) 0%, color-mix(in srgb, var(--c, var(--sky)) 6%, transparent) 38%, transparent 64%);
  animation: breathe 12s ease-in-out infinite; }
.bg .bg__light { z-index: 1; }
@keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .95; } 50% { transform: translate(-50%, -50%) scale(1.14); opacity: .6; } }

/* הצהרה: מילים שנצבעות בגלילה */
.manifesto { background: var(--navy-950); min-height: 74vh; display: flex; align-items: center; }
.manifesto__text { font-family: var(--font-display); font-size: clamp(1.85rem, 4.3vw, 3.7rem); line-height: 1.25; max-width: 1040px; color: #fff; }
.manifesto__text .fw { display: inline-block; opacity: .14; will-change: opacity; }
.manifesto__soft { color: var(--sky-light); }
.no-js .manifesto__text .fw, .reveal-done .manifesto__text .fw { opacity: 1; }


/* עבודות: הפרספקטיבה של הכרטיסים מגיעה מה-tilt עצמו (transformPerspective).
   אסור preserve-3d על המכל: בכרום, כרטיס עם rotateY בתוך מכל preserve-3d לא נלחץ
   (elementFromPoint מחזיר את המכל), וזה היה ה"צריך דאבל קליק" של דניאל. */
.works .container { perspective: 1400px; }
.bento { transform-style: flat; }

/* סרטונים: תג צפיות */
.yt__views { position: absolute; z-index: 2; top: 14px; inset-inline-end: 14px; font-family: var(--font-ui); font-size: .74rem; font-weight: 600; color: #fff; background: rgba(4,6,26,.62); padding: .35em .6em; border-radius: 6px; }
.yt--featured .yt__img { will-change: transform; }

/* מהרשתות: המסילה נעה עם הגלילה בדסקטופ, ובגל */
.post__views { position: absolute; z-index: 2; top: 12px; inset-inline-end: 12px; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; color: #fff; background: rgba(4,6,26,.62); padding: .3em .55em; border-radius: 6px; direction: ltr; }
.post__tag { position: absolute; z-index: 2; bottom: 44px; inset-inline-start: 12px; font-family: var(--font-ui); font-size: .68rem; font-weight: 500; color: var(--gold); }
@media (min-width: 901px) {
  .social__rail { overflow: visible; scroll-snap-type: none; padding-block: 6px 44px; will-change: transform; }
  .post:nth-child(even) { margin-top: 38px; }
}

/* אודות */
.about__link { color: #fff; border-bottom: 1px solid var(--gold-line); transition: color .3s, border-color .3s; }
.about__link:hover { color: var(--gold); border-color: var(--gold); }

/* לקוחות: המרקיז מונע ב-GSAP ומגיב למהירות הגלילה */
.marquee__track.is-gsap { animation: none; will-change: transform; }

/* כלים: כניסה בסיבוב מרחבי */
.tools__grid--solo { perspective: 1400px; }
.tool--solo { will-change: transform; transform-style: preserve-3d; }

/* צור קשר: אותיות שמתחברות */
.contact__title .ch { display: inline-block; will-change: transform; }

/* אבק אור (קנבס) */
.dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75; }

/* פוטר שנחשף מתחת לעמוד */
main { position: relative; z-index: 1; background: var(--navy-950); }   /* אטום: הפוטר הדביק שמאחור לא מבצבץ דרך ההירו */
.footer--reveal { position: sticky; bottom: 0; z-index: 0; }
@media (max-width: 900px) { .footer--reveal { padding-bottom: 80px; } }

/* ניווט פרקים בצד */
.dots { position: fixed; z-index: 90; inset-inline-end: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.dots a { position: relative; width: 22px; height: 22px; display: grid; place-items: center; }
.dots a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(201,222,251,.35); transition: transform .4s var(--ease), background .3s; }
.dots a:hover::before { background: var(--sky-light); }
.dots a.is-active::before { background: var(--gold); transform: scale(1.6); }
.dots a span { position: absolute; inset-inline-end: 28px; top: 50%; transform: translateY(-50%) translateX(-6px); white-space: nowrap; font: 500 .78rem/1 var(--font-ui); color: var(--sky-light); background: rgba(4,6,26,.92); border: 1px solid var(--line); padding: .5em .75em; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.dots a:hover span, .dots a:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1100px) { .dots { display: none; } }

/* מיקרו-אינטראקציות בכפתורים */
.btn { overflow: hidden; }
.btn:active { transform: translateY(0) scale(.98); }
.btn--gold::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); pointer-events: none; }
.btn--gold:hover::after { transform: translateX(120%); }

/* טיפוגרפיה: קריאות */
.lede { line-height: 1.75; }
.section__head .title + .lede { margin-top: 18px; }

/* מובייל: לצמצם שכבות */
@media (max-width: 900px) {
  .bg__img { opacity: .5; }
  .bg__light { width: 120vmax; animation-duration: 16s; }
  .manifesto { min-height: 0; padding-block: clamp(70px, 16vw, 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .bg__light, .hero__logowrap { animation: none; }
  .manifesto__text .fw { opacity: 1; }
  .dust { display: none; }
}

/* וינייטה לרקעי העומק: קריאות בקצוות, והצהרה כהה יותר */
.bg::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,6,26,1) 0%, rgba(4,6,26,.45) 12%, rgba(4,6,26,.12) 30%, rgba(4,6,26,.12) 68%, rgba(4,6,26,.75) 100%); }
.manifesto .bg__img { opacity: .36; }
.manifesto .bg::after { background: linear-gradient(180deg, rgba(4,6,26,1) 0%, rgba(4,6,26,.55) 16%, rgba(4,6,26,.35) 45%, rgba(4,6,26,.85) 100%); }



/* ============================================================
   v3.2 · יכולות = תהליך מתמשך: קו זהב שמתקדם בין תחנות, טקסט גדול,
   דוגמה גדולה שממורכזת למסך, דיסולב עם תנועת מצלמה, רקע חי.
   ============================================================ */
.skills { background: var(--navy-950); }
.skills .bg__img { opacity: .8; }
.skills__aurora { position: absolute; inset: -20%; z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(40% 36% at 22% 28%, rgba(140,48,254,.22), transparent 70%),
    radial-gradient(46% 40% at 78% 72%, rgba(42,102,224,.26), transparent 70%),
    radial-gradient(28% 28% at 60% 18%, rgba(255,222,89,.09), transparent 70%);
  animation: aurora 28s ease-in-out infinite alternate; }
@keyframes aurora { from { transform: rotate(-4deg) translate(-2%, -1%) scale(1); } to { transform: rotate(4deg) translate(2%, 2%) scale(1.08); } }



/* שכבות הרקע דועכות בקצוות: בלי קצה חד של עיגול אור או תמונה בגבול הסקשן */
.bg { -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); }

/* ההצהרה מטילה צל על ההירו המתכווץ מתחתיה, כמו שהעבודות עשו קודם: הקצה של ההירו לא נראה */
.manifesto { box-shadow: 0 -40px 90px rgba(4,6,26,.9); }

/* ההירו לעולם לא מקבל filter או transform: הווידאו נשאר חד */
.hero { filter: none !important; }

/* ============================================================
   v3.3 · מובייל וטאבלט: טיפוגרפיה, מגע, ריווח
   ============================================================ */
@media (max-width: 900px) {
  .card__cat { opacity: 1; transform: none; }
  .card__body { transform: none; }
  .card::after { opacity: 1; }
  .marquee--big .marquee__item { height: 56px; }
  .marquee__item { height: 44px; opacity: .85; }
  .marquee__item img { max-width: 150px; }
  .tool--solo { flex-direction: column; }
  .tool--solo .tool__img { min-height: 0; aspect-ratio: 16 / 9; }
  .post { flex: 0 0 44vw; max-width: 220px; }
  .about__visual { min-height: 0; }
  .about__chip { font-size: .78rem; }
  .about__chip--3 { inset-inline-end: 2%; }
  .lightbox__info { padding: 18px 18px 26px; }
  .lightbox__title { font-size: 1.5rem; }
  .lightbox__nav { width: 42px; height: 42px; top: auto; bottom: 14px; transform: none; }
  .lightbox__nav--prev { inset-inline-start: 14px; }
  .lightbox__nav--next { inset-inline-end: 64px; }
  .lightbox__counter { bottom: 22px; inset-inline-end: 118px; }
  .form { padding: 18px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .videos__all, .social__cta, .works__more { justify-content: stretch; }
  .social__cta .btn, .videos__all .btn { flex: 1 1 auto; justify-content: center; }
  .hero__ctas .btn { min-height: 48px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .post { flex: 0 0 30vw; }
  .about__grid { gap: 26px; }
  .hero__title { font-size: 3rem; }
  .bento { grid-auto-rows: clamp(150px, 24vw, 230px); }
}
@media (max-width: 400px) {
  body { font-size: 16px; }
  .hero__title { font-size: 2.15rem; }
  .hero__sub { font-size: .95rem; }
  .manifesto__text { font-size: 1.5rem; line-height: 1.35; }
  h2.title { font-size: 2rem; }
  .lede { font-size: .98rem; }
  .skill h3 { font-size: 1.4rem; }
  .contact__title { font-size: 2.4rem; }
  .social__stat b { font-size: 1.4rem; }
  .reel { width: 46vw; }
}
@media (max-width: 340px) {
  .hero__title { font-size: 1.95rem; }
  .nav__logo span { display: none; }
  .mobile-bar a { font-size: .6rem; }
}
@media (hover: none) { .card.is-focus img { transform: scale(1.05); } .card.is-focus { box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow, var(--gold)) 45%, transparent), 0 22px 50px -20px color-mix(in srgb, var(--glow, var(--gold)) 55%, transparent); } .post.is-focus { transform: translateY(-6px); } }

/* ============================================================
   v4 · עמודי העולמות (world.html) + עדכוני ארכיטקטורה בדף הבית
   ============================================================ */
.wp { background: var(--navy-950); }
.wp-nav__links { display: flex; gap: 4px; }
.wp-nav__links a { padding: .55em .9em; font-family: var(--font-ui); font-weight: 500; font-size: .95rem; color: var(--sky-light); border-radius: 8px; transition: color .3s, background .3s; }
.wp-nav__links a:hover { color: #fff; background: rgba(201,222,251,.08); }
@media (max-width: 900px) { .wp-nav__links { display: none; } }
@media (max-width: 600px) { .nav__logo span { display: none; } }

/* הירו של עולם */
.wp-hero { position: relative; min-height: min(100svh, 1000px); display: flex; align-items: flex-end; padding: calc(var(--nav-h) + 40px) 0 clamp(50px, 8vh, 100px); overflow: hidden; isolation: isolate; }
.wp-hero__media { position: absolute; inset: -10% 0; z-index: -2; will-change: transform; }
.wp-hero__media img, .wp-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.wp-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,6,26,.55) 0%, rgba(4,6,26,.15) 35%, rgba(4,6,26,.55) 65%, var(--navy-950) 100%), linear-gradient(90deg, rgba(4,6,26,.55), transparent 55%); }
.wp-hero__body { position: relative; max-width: 860px; }
.wp-hero__num { font-family: var(--font-ui); font-weight: 600; font-size: .9rem; color: var(--gold); letter-spacing: .04em; }
.wp-hero__num span { color: var(--muted); font-weight: 400; }
.wp-hero__kicker { margin-top: 14px; font-family: var(--font-ui); font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--sky-light); }
.wp-hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 8vw, 6.6rem); line-height: 1; margin-top: 8px; text-shadow: 0 10px 40px rgba(0,0,0,.5); }
.wp-hero__tagline { margin-top: 20px; max-width: 640px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; color: #e6ecff; }
.wp-meta { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 26px; font-family: var(--font-ui); font-size: .92rem; color: var(--sky-light); }
.wp-meta__item b { display: block; font-size: .72rem; font-weight: 500; color: var(--gold); letter-spacing: .04em; margin-bottom: 2px; }
.wp-hero__scroll { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; font-family: var(--font-ui); font-weight: 600; font-size: .9rem; color: var(--gold); }
.wp-hero__scroll i { width: 1px; height: 40px; background: linear-gradient(180deg, transparent, var(--gold)); animation: scrollcue 2.2s ease-in-out infinite; transform-origin: top; }

/* סיפור */
.wp-story { background: var(--navy-950); }
.wp-story__grid { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.wp-story__side { position: sticky; top: calc(var(--nav-h) + 30px); }
.wp-story__title { font-size: clamp(2rem, 4vw, 3.2rem); }
.wp-story__text p { color: #d6ddf4; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.85; max-width: 68ch; }
.wp-story__text p + p { margin-top: 22px; }
.wp-story__text .wp-lead { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.6; color: #fff; font-family: var(--font-display); font-weight: 700; }
@media (max-width: 900px) { .wp-story__grid { grid-template-columns: 1fr; gap: 20px; } .wp-story__side { position: static; } }

/* פרקים */
.wp-chapter { background: var(--navy-900); }
.wp-chapter:nth-of-type(even) { background: var(--navy-950); }
.wp-chapter__head { max-width: 760px; margin-bottom: clamp(26px, 4vw, 48px); }
.wp-chapter--quote { background: var(--navy-950); padding-block: clamp(70px, 10vw, 140px); }
.wp-quote { position: relative; margin: 0 auto; max-width: 900px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.35; color: #fff; }
.wp-quote::before { content: '“'; display: block; font-size: 5rem; line-height: .6; color: var(--glow, var(--gold)); opacity: .7; margin-bottom: 10px; }
.wp-quote cite { display: block; margin-top: 22px; font-family: var(--font-ui); font-style: normal; font-weight: 500; font-size: .95rem; color: var(--gold); }

.wp-gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(150px, 20vw, 300px); gap: clamp(10px, 1.3vw, 18px); grid-auto-flow: dense; }
.wp-fig { position: relative; margin: 0; grid-column: span 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--navy-800); cursor: pointer; isolation: isolate; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.wp-fig.is-wide { grid-column: span 6; grid-row: span 2; }
.wp-fig.is-portrait { grid-column: span 2; grid-row: span 2; }
.wp-fig img, .wp-fig video { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; transition: transform 1s var(--ease); }
.wp-fig--loop video { inset: 0; height: 100%; }
.wp-fig figcaption { position: absolute; z-index: 2; inset-inline: 16px; bottom: 14px; font-family: var(--font-ui); font-weight: 500; font-size: .88rem; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); }
.wp-fig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4,6,26,.85)); opacity: 0; transition: opacity .4s; }
.wp-fig:hover::after, .wp-fig:focus-visible::after, .wp-fig.is-focus::after { opacity: 1; }
.wp-fig:hover figcaption, .wp-fig:focus-visible figcaption, .wp-fig.is-focus figcaption { opacity: 1; transform: none; }
.wp-fig:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow, var(--gold)) 50%, transparent), 0 26px 60px -22px color-mix(in srgb, var(--glow, var(--gold)) 55%, transparent); }
.wp-fig:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .wp-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 42vw, 240px); } .wp-fig { grid-column: span 1; } .wp-fig.is-wide { grid-column: span 2; grid-row: span 1; } .wp-fig.is-portrait { grid-column: span 1; grid-row: span 2; } .wp-fig figcaption, .wp-fig::after { opacity: 1; transform: none; } }

.wp-split__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.3vw, 18px); }
.wp-split__grid .wp-fig { grid-column: auto; aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .wp-split__grid { grid-template-columns: repeat(2, 1fr); } }

.wp-video, .wp-loop { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; isolation: isolate; box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--glow, var(--gold)) 30%, transparent); }
.wp-video img, .wp-loop video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.wp-video::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,6,26,.05), rgba(4,6,26,.6)); }
.wp-video .yt__play { width: 84px; height: 84px; }
.wp-video .yt__play svg { width: 30px; height: 30px; }
.wp-video__label { position: absolute; left: 50%; top: calc(50% + 62px); transform: translateX(-50%); font-family: var(--font-ui); font-weight: 600; font-size: .9rem; color: #fff; }
.wp-video:hover img { transform: scale(1.04); }
.wp-video:hover .yt__play { transform: translate(-50%, -50%) scale(1.08); }
.wp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.wp-video.is-playing::before, .wp-video.is-playing .yt__play, .wp-video.is-playing .wp-video__label, .wp-video.is-playing img { display: none; }
.wp-loop { cursor: default; }
.wp-chapter--loop .wp-loop { max-width: 980px; margin-inline: auto; }
.wp-chapter--loop .wp-loop video[poster] { background: #000; }

/* ציר זמן: מסגרת בגודל אחיד לכל שלב. הקצב נוצר מהמיקום, מהמרווח ומהתנועה, לא מהקטנת תמונות */
.wp-timeline {
  --tl-axis: 128px; --tl-gap: clamp(20px, 2.4vw, 34px); --tl-ar: 3 / 2;
  --tl-bleed: clamp(0px, 4vw, 56px); --tl-stagger: clamp(26px, 4vw, 62px); --tl-overlap: clamp(14px, 3vw, 52px);
  position: relative; display: grid; padding-block: 22px;
}
.wp-timeline::before, .wp-timeline__line { position: absolute; top: 0; bottom: 0; inset-inline-start: calc(50% - 1px); width: 2px; border-radius: 2px; }
.wp-timeline::before { content: ''; background: rgba(201, 222, 251, .14); }
.wp-timeline__line { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); transform-origin: top; transform: scaleY(0); }

.wp-tl { position: relative; display: grid; grid-template-columns: 1fr var(--tl-axis) 1fr; column-gap: var(--tl-gap); align-items: start; }
.wp-tl + .wp-tl { margin-top: calc(-1 * var(--tl-overlap)); }
.wp-tl__media, .wp-tl__body, .wp-tl__year { grid-row: 1; }
.wp-tl[data-side="start"] .wp-tl__media { grid-column: 1; margin-inline-start: calc(-1 * var(--tl-bleed)); }
.wp-tl[data-side="start"] .wp-tl__body  { grid-column: 3; }
.wp-tl[data-side="end"]   .wp-tl__media { grid-column: 3; margin-inline-end: calc(-1 * var(--tl-bleed)); }
.wp-tl[data-side="end"]   .wp-tl__body  { grid-column: 1; justify-self: end; }

/* אותה מסגרת בכל שורה. הדגשה רק דרך transform, אף פעם לא דרך גודל */
.wp-tl__media { will-change: transform; }
.wp-tl__media .wp-fig { grid-column: auto; width: 100%; aspect-ratio: var(--tl-ar); transform: scale(var(--tl-emph, 1)); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.wp-tl__media .wp-fig img, .wp-tl__media .wp-fig video { inset: -6% 0; height: 112%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* צילומים רחבים במיוחד או ריבועיים: התמונה שלמה, מאחוריה פלטה מטושטשת מאותה תמונה */
.wp-fig.is-plate::before { content: ''; position: absolute; inset: -12%; z-index: 0; background: var(--plate) center / cover no-repeat; filter: blur(30px) saturate(.85) brightness(.5); }
.wp-fig.is-plate img, .wp-fig.is-plate video { inset: 4%; width: 92%; height: 92%; object-fit: contain; z-index: 1; }
.wp-tl.is-active .wp-tl__media .wp-fig { box-shadow: var(--shadow-card), 0 0 0 1px var(--gold-line); }
.wp-fig__badge { position: absolute; z-index: 3; top: 12px; inset-inline-start: 12px; padding: .3em .6em; border-radius: 6px; background: rgba(4,6,26,.7); font: 500 .72rem/1 var(--font-ui); color: var(--gold); }

/* התאריך הוא הנקודה על הציר, בגובה הכותרת */
.wp-tl__year { grid-column: 2; justify-self: center; align-self: start; margin-top: calc(var(--tl-stagger) + .1em); z-index: 2; }
.wp-tl__year span { display: inline-block; padding: .55em .9em; border-radius: 999px; background: var(--navy-950); border: 1px solid var(--gold-line); font: 600 .82rem/1 var(--font-ui); color: var(--gold); white-space: nowrap; transition: background .35s, color .35s, border-color .35s, transform .4s var(--ease); }
.wp-tl.is-active .wp-tl__year span { background: var(--gold); color: #1a1240; border-color: var(--gold); transform: scale(1.06); }

.wp-tl__body { padding-top: var(--tl-stagger); max-width: 42ch; text-align: start; will-change: transform; }
.wp-tl__body h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2.05rem); line-height: 1.15; color: #fff; transition: color .4s; }
.wp-tl.is-active .wp-tl__body h3 { color: var(--gold); }
.wp-tl__body p { margin-top: 10px; color: #d6ddf4; line-height: 1.75; }

@media (max-width: 1023px) {
  .wp-timeline { padding-inline-start: 28px; }
  .wp-timeline::before, .wp-timeline__line { inset-inline-start: 5px; }
  .wp-tl { grid-template-columns: 1fr; row-gap: 12px; }
  .wp-tl + .wp-tl { margin-top: clamp(38px, 9vw, 56px); }
  .wp-tl[data-side] .wp-tl__media { grid-column: 1; grid-row: 1; margin-inline: 0 calc(-1 * var(--tl-bleed)); }
  .wp-tl[data-side] .wp-tl__year { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 4px; position: relative; }
  .wp-tl__year::before { content: ''; position: absolute; inset-inline-start: -28px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--gold-line); box-shadow: 0 0 0 4px var(--navy-950); transition: background .35s, transform .35s var(--ease); }
  .wp-tl.is-active .wp-tl__year::before { background: var(--gold); transform: scale(1.3); }
  .wp-tl[data-side] .wp-tl__body { grid-column: 1; grid-row: 3; padding-top: 0; max-width: none; justify-self: start; }
  .wp-tl__media .wp-fig { transform: none; }
}
/* עולמות קשורים */
.wp-related { background: var(--navy-900); }
.wp-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.3vw, 18px); }
.wp-rel { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--navy-800); isolation: isolate; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.wp-rel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.wp-rel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,6,26,.1) 30%, rgba(4,6,26,.9)); }
.wp-rel__body { position: absolute; z-index: 2; inset-inline: 20px; bottom: 18px; }
.wp-rel__num { font-family: var(--font-ui); font-size: .78rem; font-weight: 600; color: var(--gold); }
.wp-rel h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: #fff; margin-top: 4px; }
.wp-rel p { color: var(--sky-light); font-size: .9rem; margin-top: 4px; }
.wp-rel:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow, var(--gold)) 50%, transparent), 0 26px 60px -22px color-mix(in srgb, var(--glow, var(--gold)) 55%, transparent); }
.wp-rel:hover img { transform: scale(1.05); }
.wp-rel--all { display: grid; place-items: center; border: 1px dashed var(--gold-line); background: var(--navy-950); }
.wp-rel--all .wp-rel__body { position: static; text-align: center; }
@media (max-width: 900px) { .wp-related__grid { grid-template-columns: 1fr; } .wp-rel { aspect-ratio: 16 / 9; } }

/* לייטבוקס של העולם */
.wp-lb { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); background: rgba(4,6,26,.95); opacity: 0; pointer-events: none; transition: opacity .35s; }
.wp-lb.is-open { opacity: 1; pointer-events: auto; }
.wp-lb__fig { margin: 0; max-width: min(1400px, 96vw); max-height: 90vh; display: grid; gap: 12px; justify-items: center; transform: scale(.97); transition: transform .5s var(--ease); }
.wp-lb.is-open .wp-lb__fig { transform: none; }
.wp-lb__fig img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow, var(--sky)) 50%, transparent), 0 0 100px -10px color-mix(in srgb, var(--glow, var(--sky)) 60%, transparent); }
.wp-lb__fig figcaption { font-family: var(--font-ui); color: var(--sky-light); font-size: .95rem; text-align: center; }
.wp-lb__close, .wp-lb__nav { position: absolute; z-index: 5; width: 46px; height: 46px; border-radius: 50%; background: rgba(7,12,38,.85); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; color: #fff; transition: border-color .3s, color .3s, transform .4s var(--ease); }
.wp-lb__close { top: 16px; inset-inline-start: 16px; }
.wp-lb__close:hover { transform: rotate(90deg); border-color: var(--gold); }
.wp-lb__nav { top: 50%; transform: translateY(-50%); }
.wp-lb__nav:hover { border-color: var(--gold); color: var(--gold); }
.wp-lb__nav--prev { inset-inline-start: 16px; }
.wp-lb__nav--next { inset-inline-end: 16px; }
.wp-lb__nav svg, .wp-lb__close svg { width: 20px; height: 20px; }
.wp-lb__counter { position: absolute; bottom: 16px; inset-inline-end: 20px; direction: ltr; font-family: var(--font-ui); font-size: .8rem; color: var(--sky-light); }
@media (max-width: 900px) { .wp-lb__nav { top: auto; bottom: 18px; transform: none; width: 42px; height: 42px; } .wp-lb__nav--next { inset-inline-end: 70px; } .wp-lb__counter { bottom: 28px; inset-inline-end: 124px; } .wp-lb { padding-bottom: 80px; } }

.lightbox__actions .btn--brand { order: -1; }

/* מהרשתות: לוח מספרים שעולה בהדרגה */
.social__stats { display: grid; grid-template-columns: repeat(3, auto); gap: 18px 34px; font-family: var(--font-ui); }
.social__stat { opacity: 0; }
.social__stats.is-live .social__stat, .no-js .social__stat { opacity: 1; }
.social__stat b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); color: var(--gold); line-height: 1; direction: ltr; text-align: end; font-variant-numeric: tabular-nums; }
.social__stat span { display: block; margin-top: 4px; font-size: .82rem; color: var(--muted); }
@media (max-width: 900px) { .social__stats { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; width: 100%; } .social__stat b { font-size: 1.5rem; } .social__stat span { font-size: .74rem; } }

/* לייטבוקס: כשיש וידאו, הוא מקבל את רוב המסך והמידע יורד מתחתיו */
.lightbox--video .lightbox__box { grid-template-columns: 1fr; width: min(1280px, 96vw); max-height: 94vh; overflow: hidden; }
.lightbox--video .lightbox__media { min-height: 0; background: #000; }
.lightbox--video .lightbox__media iframe, .lightbox--video .lightbox__media video { width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: min(72vh, 720px); object-fit: contain; }
.lightbox--video .lightbox__info { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'cat actions' 'title actions' 'desc actions' 'tags actions'; gap: 4px 24px; align-items: center; padding: 18px 26px 20px; }
.lightbox--video .lightbox__cat { grid-area: cat; }
.lightbox--video .lightbox__title { grid-area: title; font-size: clamp(1.3rem, 2vw, 1.8rem); }
.lightbox--video .lightbox__sub { display: none; }
.lightbox--video .lightbox__desc { grid-area: desc; font-size: .95rem; max-width: 70ch; }
.lightbox--video .lightbox__tags { grid-area: tags; margin-top: 4px; }
.lightbox--video .lightbox__actions { grid-area: actions; flex-direction: column; align-items: stretch; margin: 0; }
.lightbox--video .lightbox__nav { top: auto; bottom: 14px; transform: none; }
.lightbox--video .lightbox__counter { bottom: 22px; inset-inline-end: 72px; }
@media (max-width: 900px) { .lightbox--video .lightbox__info { grid-template-columns: 1fr; grid-template-areas: 'cat' 'title' 'desc' 'tags' 'actions'; } .lightbox--video .lightbox__actions { flex-direction: row; margin-top: 10px; } .lightbox--video .lightbox__media iframe { max-height: 56vh; } }

/* עמודי עולם: סרטון אנכי בפורמט המקורי, על במה רחבה עם רקע מטושטש ממנו */
.wp-portrait { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(22px, 4vw, 60px); align-items: center; }
.wp-portrait__stage { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--navy-800); isolation: isolate; box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--glow, var(--gold)) 30%, transparent); }
.wp-portrait__bg { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: blur(34px) brightness(.55) saturate(1.2); transform: scale(1.1); }
.wp-portrait__phone { position: absolute; top: 5%; bottom: 5%; left: 50%; transform: translateX(-50%); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 30px 70px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14); }
.wp-portrait__phone video { width: 100%; height: 100%; object-fit: cover; }
.wp-portrait__note { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.4; color: #fff; }
.wp-portrait__list { margin-top: 18px; display: grid; gap: 10px; color: #d6ddf4; line-height: 1.6; }
.wp-portrait__list li { position: relative; padding-inline-start: 22px; }
.wp-portrait__list li::before { content: ''; position: absolute; inset-inline-start: 0; top: .6em; width: 10px; height: 2px; background: var(--gold); }
@media (max-width: 900px) { .wp-portrait { grid-template-columns: 1fr; } .wp-portrait__stage { aspect-ratio: 4 / 5; } .wp-portrait__phone { top: 4%; bottom: 4%; } }

/* לייטבוקס: המסגרת תמיד ברוחב מלא, כדי שה-iframe של יוטיוב לא יתכווץ ל-300 פיקסל */
.lightbox__frame { width: 100%; display: block; }
.lightbox__media { display: block; }
.lightbox__media img, .lightbox__media video { display: block; margin-inline: auto; max-width: 100%; }
.lightbox:not(.lightbox--video) .lightbox__media { display: grid; place-items: center; }
.lightbox--video .lightbox__media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: min(74vh, 740px); }
/* לייטבוקס וידאו: החיצים במרכז הצדדים, המונה בראש, לא על פס הבקרה של יוטיוב */
.lightbox--video .lightbox__nav { top: 50%; bottom: auto; transform: translateY(-50%); }
.lightbox--video .lightbox__counter { bottom: auto; top: 14px; inset-inline-end: 50%; transform: translateX(50%); }

/* על הבמה: הרצאה גדולה ושני ראיונות */
.stage { background: var(--navy-950); }
.stage__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(10px, 1.3vw, 18px); }
.stage__side { display: grid; gap: clamp(10px, 1.3vw, 18px); }
.stage .yt__title small { display: block; margin-top: 6px; font-family: var(--font-ui); font-weight: 400; font-size: .82rem; color: var(--sky-light); }
.stage .yt--featured .yt__title { font-size: clamp(1.2rem, 2.2vw, 1.8rem); max-width: 30ch; }
@media (max-width: 900px) { .stage__grid { grid-template-columns: 1fr; } .stage__side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stage__side { grid-template-columns: 1fr; } }

/* ============================================================
   v5 · ניווט: מתג עולמות בעמוד עולם, מסילת עולמות בארכיון
   ============================================================ */
/* מתג בין ששת העולמות, נדבק מתחת לניווט */

/* ארכיון העבודות: מסילת העולמות בתחתית, כדי שהארכיון לא יהיה מבוי סתום */
.wstrip { background: var(--navy-900); }
.wstrip__rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.3vw, 18px); }
.wstrip__card { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--navy-800); isolation: isolate; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.wstrip__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.wstrip__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,6,26,.1) 35%, rgba(4,6,26,.92)); }
.wstrip__body { position: absolute; z-index: 2; inset-inline: 18px; bottom: 16px; }
.wstrip__num { font-family: var(--font-ui); font-size: .74rem; font-weight: 600; color: var(--gold); direction: ltr; }
.wstrip__card h3 { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); color: #fff; margin-top: 3px; }
.wstrip__card p { color: var(--sky-light); font-size: .85rem; margin-top: 3px; }
.wstrip__card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow, var(--gold)) 50%, transparent), 0 26px 60px -22px color-mix(in srgb, var(--glow, var(--gold)) 55%, transparent); }
.wstrip__card:hover img { transform: scale(1.05); }
@media (max-width: 900px) { .wstrip__rail { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wstrip__rail { grid-template-columns: 1fr; } }

/* מצב "אתה כאן" בכל משטח ניווט */
.nav__links a[aria-current], .mobile-menu a[aria-current] { color: var(--gold); }
.nav__links a[aria-current]::after { transform: scaleX(1); }
.mobile-bar a[aria-current] { color: var(--gold); }

/* עמוד עולם: הסיפור עולה על ההירו במקום להשאיר חור שחור */
.wp-story { position: relative; z-index: 2; padding-top: clamp(56px, 8vh, 104px); border-radius: 28px 28px 0 0; box-shadow: 0 -40px 90px rgba(4,6,26,.85); }
/* התפרים בין הפרקים: חפיפה קלה במקום קו אופקי ישר */
.wp-chapter + .wp-chapter { margin-top: clamp(-70px, -6vw, -28px); padding-top: calc(var(--section-pad) + clamp(28px, 6vw, 70px)); }
.wp-chapter { position: relative; z-index: 1; }
.wp-chapter--quote { z-index: 0; }

/* ============================================================
   v6 · סבב QA: לייטבוקס, היררכיה בגלריה, ריווח, טופס
   ============================================================ */

/* A. לייטבוקס: המדיה מקבלת את רוב המסך, המידע יורד מתחתיה. גם לתמונות וגם לווידאו */
.lightbox--wide .lightbox__box { grid-template-columns: 1fr; width: min(1320px, 96vw); max-height: 94vh; overflow: hidden; }
.lightbox--wide .lightbox__media { min-height: 0; background: #000; display: grid; place-items: center; }
.lightbox--wide .lightbox__media img { width: auto; height: auto; max-width: 100%; max-height: min(76vh, 780px); object-fit: contain; }
.lightbox--wide .lightbox__media video { width: 100%; height: auto; max-height: min(76vh, 780px); object-fit: contain; }
.lightbox--wide .lightbox__media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: min(76vh, 780px); }
.lightbox--wide .lightbox__info { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'cat actions' 'title actions' 'desc actions' 'tags actions'; gap: 2px 24px; align-items: center; padding: 16px 26px 18px; }
.lightbox--wide .lightbox__cat { grid-area: cat; }
.lightbox--wide .lightbox__title { grid-area: title; font-size: clamp(1.3rem, 2vw, 1.8rem); }
.lightbox--wide .lightbox__sub { display: none; }
.lightbox--wide .lightbox__desc { grid-area: desc; font-size: .95rem; max-width: 78ch; }
.lightbox--wide .lightbox__tags { grid-area: tags; margin-top: 4px; }
.lightbox--wide .lightbox__actions { grid-area: actions; flex-direction: column; align-items: stretch; margin: 0; }
.lightbox--wide .lightbox__nav { top: 50%; bottom: auto; transform: translateY(-50%); }
.lightbox--wide .lightbox__counter { bottom: auto; top: 14px; inset-inline-end: 50%; transform: translateX(50%); }
@media (max-width: 900px) {
  .lightbox--wide .lightbox__info { grid-template-columns: 1fr; grid-template-areas: 'cat' 'title' 'desc' 'tags' 'actions'; padding: 14px 16px 20px; }
  .lightbox--wide .lightbox__actions { flex-direction: row; margin-top: 10px; }
  .lightbox--wide .lightbox__media img, .lightbox--wide .lightbox__media video, .lightbox--wide .lightbox__media iframe { max-height: 54vh; }
  .lightbox--wide .lightbox__nav { top: auto; bottom: 14px; transform: none; }
  .lightbox--wide .lightbox__counter { top: 14px; }
}

/* B. היררכיה: DOOM מקבל רצועה ברוחב מלא, והלופ שלו רץ כשהוא במסך */
.card--hero { grid-column: span 12; grid-row: span 2; }
.card--hero .card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 3rem); }
.card--hero .card__body { inset-inline: clamp(22px, 3vw, 44px); bottom: clamp(20px, 2.6vw, 34px); max-width: 46ch; }
.card--hero .card__sub { font-size: .95rem; }
.card--hero::after { background: linear-gradient(180deg, rgba(4,6,26,0) 30%, rgba(4,6,26,.9)); }
.card--hero .card__flag { position: absolute; z-index: 3; top: clamp(16px, 2vw, 26px); inset-inline-start: clamp(16px, 2vw, 26px);
  padding: .42em .8em; border-radius: 999px; background: rgba(4,6,26,.62); border: 1px solid var(--gold-line);
  font: 600 .78rem/1 var(--font-ui); color: var(--gold); }
@media (max-width: 1000px) { .card--hero { grid-column: span 12; grid-row: span 2; } }
/* מובייל: שתי עמודות לרגילים, רוחב מלא לגדולים — כך נשמרת היררכיה גם בטלפון */
@media (max-width: 560px) {
  .bento { grid-auto-rows: clamp(120px, 33vw, 190px); }
  .card { grid-column: span 6; grid-row: span 1; }
  .card--tall { grid-column: span 6; grid-row: span 2; }
  .card--wide, .card--hero { grid-column: span 12; grid-row: span 2; }
  .card--hero .card__title { font-size: 1.5rem; }
  .card__title { font-size: .95rem; }
  .card__sub { font-size: .74rem; }
}

/* C. ראש סקשן הלקוחות: ממורכז זה בסדר כאן כי המרקיז ממורכז, אבל בלי lede ארוך */
.clients__head { margin-inline: auto; text-align: center; max-width: 640px; }

/* D. שטח מת בין הלקוחות לכלים */
.clients { padding-bottom: clamp(84px, 8vw, 118px); }
.clients .marquee--reverse { padding-bottom: 4px; }
.tools { padding-top: clamp(64px, 8vw, 110px); }

/* E. מרקיז המותגים: מרווח גדול יותר כשיש מעט פריטים, כדי שלא יחזרו על עצמם באותו מסך */
.marquee--reverse .marquee__track { gap: clamp(70px, 10vw, 150px); }

/* G. טופס: שדה שגוי מסומן */
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #e2725b; }
.field.is-invalid label { color: #f0a08e; }
.form.is-error .form__note::after { content: ' חסרים פרטים בשדות המסומנים.'; color: #f0a08e; }

/* H. מובייל: לסגור את השטח המת בין ההירו להצהרה */
@media (max-width: 900px) {
  .manifesto { padding-block: clamp(48px, 12vw, 84px); }
  .hero { padding-bottom: 12px; }
}

/* ============================================================
   v7 · ארכיטקטורת מידע: תפריט אחד, ארבע קבוצות, בכל עמוד
   ============================================================ */

/* ── שולחן עבודה: קבוצה עם פאנל ── */
.navi { position: relative; display: flex; align-items: center; height: var(--nav-h); }
.navi__top { display: inline-flex; align-items: center; gap: 6px; }
.navi__chev { width: 11px; height: 7px; opacity: .55; transition: transform .35s var(--ease), opacity .3s; }
.navi:hover .navi__chev, .navi.is-open .navi__chev { transform: rotate(180deg); opacity: 1; }

.navi__panel {
  position: absolute; top: 100%; inset-inline-start: 50%; transform: translate(50%, 8px);
  z-index: 20; min-width: 288px; padding: 10px; display: grid; gap: 2px;
  background: color-mix(in srgb, var(--navy-900) 96%, transparent);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .28s var(--ease), transform .32s var(--ease), visibility .28s;
}
.navi:hover .navi__panel, .navi:focus-within .navi__panel, .navi.is-open .navi__panel {
  opacity: 1; pointer-events: auto; visibility: visible; transform: translate(50%, 0);
}
/* גשר שקוף בין הכפתור לפאנל, כדי שהעכבר לא יאבד את הפאנל בדרך */
.navi__panel::before { content: ''; position: absolute; inset-inline: 0; top: -10px; height: 10px; }

.navi__panel a {
  display: grid; grid-template-columns: 1fr; gap: 1px; padding: 9px 13px; border-radius: 9px;
  transition: background .25s, color .25s;
}
.navi__panel a::after { display: none; }
.navi__panel a b { font-family: var(--font-ui); font-weight: 600; font-size: .93rem; color: #fff; }
.navi__panel a span { font-family: var(--font-ui); font-size: .79rem; color: var(--muted); line-height: 1.4; }
.navi__panel a:hover { background: rgba(201, 222, 251, .07); }
.navi__panel a:hover span { color: var(--sky-light); }
.navi__panel a[aria-current] b { color: var(--gold); }

/* פאנל העולמות: שתי עמודות, עם המספר שמסמן שזה מסע ולא רשימה */
.navi__panel--worlds { min-width: 520px; grid-template-columns: 1fr 1fr; }
.navi__panel--worlds a { grid-template-columns: auto 1fr; grid-template-areas: 'num title' 'num sub'; gap: 0 11px; align-items: center; }
.navi__num { grid-area: num; font-family: var(--font-ui); font-weight: 700; font-size: .84rem; color: var(--gold); font-style: normal; direction: ltr; opacity: .75; }
.navi__panel--worlds a b { grid-area: title; }
.navi__panel--worlds a span { grid-area: sub; }
.navi__panel--worlds a:hover .navi__num { opacity: 1; }
.navi__all {
  grid-column: 1 / -1; margin-top: 6px; padding-top: 11px !important; border-top: 1px solid var(--line);
  display: inline-flex !important; align-items: center; gap: 7px; border-radius: 0 !important;
  font-family: var(--font-ui); font-size: .84rem; color: var(--sky-light) !important;
}
.navi__all:hover { background: none !important; color: var(--gold) !important; }
.navi__all .navi__chev { transform: rotate(90deg); }

/* עמוד עולם: הפאנל מסמן באיזה עולם אנחנו */
.navi__panel a[data-world].is-here b, .mnav__g--worlds a.is-here { color: var(--gold); }
.navi__panel a[data-world].is-here { background: rgba(255, 222, 89, .07); }

/* בעמודי העולם והעבודות הניווט משתמש באותו רכיב */
.wp-nav__links { display: flex; align-items: center; gap: 2px; }
.wp-nav__links > a, .wp-nav__links .navi__top {
  position: relative; padding: .55em .85em; font-family: var(--font-ui); font-weight: 500;
  font-size: .95rem; color: var(--sky-light); border-radius: 8px; transition: color .3s, background .3s;
}
.wp-nav__links > a:hover, .wp-nav__links .navi__top:hover { color: #fff; background: rgba(201, 222, 251, .08); }

/* ── מובייל: אותן ארבע קבוצות, פרוסות, בלי ריחוף ── */
.mnav { width: min(440px, 100%); display: grid; gap: 22px; text-align: start; }
.mnav__g { display: grid; gap: 1px; }
.mnav__g h3 {
  margin-bottom: 7px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-family: var(--font-ui); font-weight: 600; font-size: .78rem; letter-spacing: .09em;
  color: var(--gold); text-transform: none;
}
.mnav__g a {
  display: block; padding: .42em 0; font-family: var(--font-display); font-size: 1.18rem;
  line-height: 1.45; color: #fff; transform: translateY(14px); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s, color .25s;
}
.mobile-menu.is-open .mnav__g a { transform: none; opacity: 1; }
.mnav__g a:hover, .mnav__g a[aria-current] { color: var(--gold); }
.mnav__g--worlds a { display: flex; align-items: baseline; gap: 10px; }
.mnav__g--worlds a i { font-style: normal; font-family: var(--font-ui); font-weight: 700; font-size: .8rem; color: var(--gold); opacity: .7; direction: ltr; }
.mnav__g--solo h3 { border: 0; padding: 0; margin: 0; }
.mnav__g--solo h3 a { font-size: 1.18rem; color: #fff; padding: 0; }
.mnav__g--solo h3 a::after { display: none; }
/* התפריט התארך, ולכן הוא נגלל מלמעלה במקום להתמרכז ולהיחתך */
.mobile-menu { justify-content: flex-start; align-items: center; padding-block: calc(var(--nav-h) + 18px) 40px; }

/* ── פוטר: מפת אתר מלאה, כי כאן המקום לראות הכול ── */
.fmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 30px; width: 100%; }
.fmap__col { display: grid; gap: 3px; align-content: start; }
.fmap__col h4 {
  margin-bottom: 6px; font-family: var(--font-ui); font-weight: 600; font-size: .76rem;
  letter-spacing: .08em; color: var(--gold);
}
.fmap__col a { font-family: var(--font-ui); font-size: .875rem; color: var(--sky-light); line-height: 1.85; transition: color .25s; }
.fmap__col a:hover { color: #fff; }
.fmap__col a[aria-current] { color: var(--gold); }
@media (max-width: 760px) { .fmap { grid-template-columns: 1fr 1fr; gap: 20px 18px; } }
@media (max-width: 380px) { .fmap { grid-template-columns: 1fr; } }

/* ── מצב "אתה כאן" בכל משטח ── */
.nav__links > a[aria-current], .navi.is-current > .navi__top { color: var(--gold); }
.navi.is-current > .navi__top::after { transform: scaleX(1); }
.mobile-bar a[aria-current] { color: var(--gold); }

/* מתחת ל-900 הניווט העליון מוחלף בבורגר, בשלושת סוגי העמודים */
@media (max-width: 900px) { .nav__links, .wp-nav__links { display: none; } }
/* מסכים בינוניים: הפאנל לא בורח מהמסך */
@media (max-width: 1180px) { .navi__panel--worlds { min-width: 460px; } }
@media (max-width: 1040px) {
  .navi__panel { inset-inline-start: auto; inset-inline-end: 0; transform: translate(0, 8px); }
  .navi:hover .navi__panel, .navi:focus-within .navi__panel, .navi.is-open .navi__panel { transform: translate(0, 0); }
}

/* ============================================================
   v8 · תחומי התמחות: הפאנל מפסיק להיות קישור בודד והופך לשער
   ============================================================ */


/* ============================================================
   v9 · שותפות בתחום, קרדיטים בעמוד הפרויקט, פירורי לחם
   ============================================================ */

/* עמוד הפרויקט: התחום מחליף את מספר העולם */
.wp-hero__domain { display: inline-flex; align-items: center; gap: 8px; padding: .38em .9em; border-radius: 999px; border: 1px solid var(--gold-line); font-family: var(--font-ui); font-weight: 600; font-size: .82rem; color: var(--gold); transition: background .3s, color .3s; }
.wp-hero__domain::before { content: '←'; font-size: .9em; }
.wp-hero__domain:hover { background: var(--gold); color: #1a1240; }

/* קרדיטים: שורה משלהם, לא מוחבאים בין הכלים */
.wp-credits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.wp-credit { display: grid; gap: 1px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--gold-line); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.wp-credit b { font-family: var(--font-ui); font-weight: 600; font-size: .74rem; letter-spacing: .05em; color: var(--gold); }
.wp-credit i { font-style: normal; font-family: var(--font-display); font-size: 1.12rem; color: #fff; }
.wp-credit em { font-style: normal; font-family: var(--font-ui); font-size: .78rem; color: var(--sky-light); }

/* פירורי לחם במקום פס הכפתורים הצפוף */

/* ============================================================
   v10 · התחומים: ארבע קוביות בגריד אלכסוני. הגריד כולו נוטה,
   התוכן והתמונות מיושרים חזרה, ולכן כל התפרים בין הקוביות אלכסוניים.
   ============================================================ */
.worlds { background: var(--navy-800); overflow: hidden; }
/* רגע מטושטש מאחורי הגריד: שקיעה, לא צבע אחיד */
.worlds .bg__img { opacity: .82; }
.worlds .bg::after { background: linear-gradient(180deg, rgba(4,6,26,1) 0%, rgba(4,6,26,.5) 14%, rgba(4,6,26,.22) 40%, rgba(4,6,26,.3) 70%, rgba(4,6,26,.9) 100%); }
.dgrid { --tilt: 4deg; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(38px, 5vw, 70px); transform: skewY(var(--tilt)); }
.tile {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 2; min-height: 300px;
  border-radius: 6px; background: var(--navy-900); box-shadow: var(--shadow-card);
  border-top: 2px solid var(--glow, var(--gold)); will-change: transform;
}
.tile__bg { position: absolute; inset: -10%; z-index: 0; transform: skewY(calc(var(--tilt) * -1)); }
.tile__bg img, .tile__bg video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease), filter .6s; will-change: transform; }
.tile:hover .tile__bg img, .tile:hover .tile__bg video { transform: scale(1.06); }
/* קובייה בלי לופ: התמונה נושמת לאט כל עוד הגריד על המסך */
.tile__bg img { animation: tile-breathe 24s ease-in-out infinite alternate; animation-play-state: paused; }
.dgrid.is-lit .tile__bg img { animation-play-state: running; }
@keyframes tile-breathe { from { transform: scale(1); } to { transform: scale(1.08); } }
.tile:hover .tile__bg img { animation-play-state: paused; }
.tile__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(70% 60% at 6% 100%, color-mix(in srgb, var(--glow, var(--gold)) 30%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(4, 6, 26, .18) 0%, rgba(4, 6, 26, .3) 42%, rgba(4, 6, 26, .93) 100%);
  transition: opacity .5s;
}
.tile__in { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 2.4vw, 30px); padding-bottom: clamp(22px, 2.8vw, 36px); transform: skewY(calc(var(--tilt) * -1)); }
.tile__num { font-family: var(--font-ui); font-weight: 700; font-size: .95rem; letter-spacing: .08em; color: var(--glow, var(--gold)); unicode-bidi: isolate; }
.tile__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.05; margin-top: 4px; color: #fff; text-shadow: 0 8px 30px rgba(4, 6, 26, .7); text-wrap: balance; }
.tile__kicker { margin-top: 8px; max-width: 52ch; font-size: clamp(.9rem, 1.05vw, 1rem); line-height: 1.5; color: var(--sky-light); text-wrap: pretty; }
.tile__foot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-family: var(--font-ui); }
.tile__enter { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; color: var(--gold); }
.tile__enter svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.tile:hover .tile__enter svg { transform: translateX(-4px); }
/* הקישור הראשי נמתח על כל הקובייה; שאר הקישורים צפים מעליו */
.tile__enter::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.tile__more { position: relative; z-index: 2; display: flex; gap: 14px; font-size: .86rem; color: var(--sky-light); }
.tile__more span { color: var(--muted); }
.tile__more a { color: #fff; border-bottom: 1px solid var(--gold-line); transition: color .3s, border-color .3s; }
.tile__more a:hover { color: var(--gold); border-color: var(--gold); }
.tile:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.dgrid__arch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: clamp(40px, 5vw, 64px); font-family: var(--font-ui); font-size: .88rem; color: var(--muted); }
.dgrid__arch b { font-weight: 600; color: var(--sky-light); }
.dgrid__arch a { color: var(--sky-light); border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s; }
.dgrid__arch a:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 900px) {
  .dgrid { --tilt: 3deg; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
  .tile { aspect-ratio: 4 / 3; min-height: 250px; }
  .tile__in { padding: 18px; padding-bottom: 24px; }
  .tile__title { font-size: 1.7rem; }
  .tile__kicker { font-size: .9rem; }
  .tile__foot { margin-top: 12px; }
  .dgrid__arch { margin-top: 30px; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { .tile__bg img, .tile__bg video { transition: none; animation: none; } }

/* ── סרגל התחום: "אתה כאן", הפרויקטים שבתחום, והתחום הבא ── */
.dbar { position: sticky; top: var(--nav-h); z-index: 40; background: color-mix(in srgb, var(--navy-950) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.dbar::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--glow, var(--gold)) 25%, var(--glow, var(--gold)) 75%, transparent); }
.dbar--inline { position: relative; top: auto; z-index: 5; background: var(--navy-950); backdrop-filter: none; }
.dbar__in { width: var(--container); margin-inline: auto; display: flex; align-items: center; gap: 18px; padding-block: 11px; }
.dbar__id { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; font-family: var(--font-ui); }
.dbar__id i { font-style: normal; font-weight: 700; font-size: .84rem; letter-spacing: .06em; color: var(--glow, var(--gold)); direction: ltr; }
.dbar__id b { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: #fff; }
.dbar__id span { font-size: .76rem; color: var(--muted); }
.dbar__id:hover b { color: var(--gold); }
.dbar__list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline-start: 6px; }
.dbar__list::-webkit-scrollbar { display: none; }
.dbar__list a { flex: none; padding: .42em .85em; border-radius: 999px; border: 1px solid var(--line); font-family: var(--font-ui); font-weight: 500; font-size: .86rem; color: var(--sky-light); white-space: nowrap; transition: border-color .3s, color .3s, background .3s; }
.dbar__list a:hover { border-color: var(--gold-line); color: #fff; }
.dbar__list a[aria-current] { background: var(--gold); border-color: var(--gold); color: #1a1240; }
.dbar__list a.dbar__arch { border-style: dashed; color: var(--muted); }
.dbar__list a.dbar__arch:hover { color: var(--sky-light); }
.dbar__nav { margin-inline-start: auto; display: flex; align-items: center; gap: 18px; white-space: nowrap; font-family: var(--font-ui); }
.dbar__next { display: grid; line-height: 1.25; text-align: start; }
.dbar__next span { font-size: .7rem; letter-spacing: .04em; color: var(--muted); }
.dbar__next b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: #fff; transition: color .3s; }
.dbar__next b svg { width: 14px; height: 14px; }
.dbar__next:hover b { color: var(--gold); }
.dbar__all { font-size: .84rem; color: var(--sky-light); border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s; }
.dbar__all:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 900px) {
  /* שתי שורות: התחום והבא בראשונה, הפרויקטים גוללים בשנייה */
  .dbar__in { flex-wrap: wrap; gap: 8px 10px; padding-block: 9px 10px; }
  .dbar__id span, .dbar__all { display: none; }
  .dbar__id b { font-size: 1rem; }
  .dbar__list { order: 3; flex: 1 0 100%; margin: 0; }
  .dbar__list a { font-size: .8rem; padding: .38em .7em; }
  .dbar__next span { display: none; }
  .dbar__next b { font-size: .8rem; }
}

/* ============================================================
   v11 · היציאה מהאתר: הגלילה מרחיקה את המצלמה. סקשן הכלים הוא
   התוכן שעל המסך; המסגרת, השולחן והכותרת "דברו איתי" מתגלים סביבו.
   הבמה דביקה בתוך עטיפה גבוהה. אין pin.
   ============================================================ */
.exit { position: relative; z-index: 1; height: calc(100vh + 190vh); background: var(--navy-950); }
.exit__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1600px; perspective-origin: 50% 36%; background: var(--navy-950); }
/* הקיר: רחוק, זז מעט */
.exit__wall { position: absolute; inset: -8%; z-index: 0; opacity: 0; transform: scale(1.12); will-change: transform, opacity;
  background: radial-gradient(120% 90% at 50% 0%, #141f5c 0%, #080d2c 50%, #04061a 100%); }
.exit__wall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.exit__lamp { position: absolute; top: -12%; inset-inline-end: 8%; width: 60vmax; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 222, 89, .3), rgba(255, 222, 89, .08) 42%, transparent 70%); filter: blur(30px); }
/* העולם התלת-ממדי: השולחן והמסך */
.exit__world { position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d; }
.exit__desk { position: absolute; left: -35%; right: -35%; top: 64%; height: 130%; opacity: 0; transform-origin: 50% 0; transform: rotateX(70deg);
  background: linear-gradient(180deg, #1a2a78 0%, #101d5e 5%, #0b1447 16%, #0a1240 30%, #0a1240 100%); border-top: 1px solid rgba(255, 222, 89, .35); }
.exit__desk::after { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 11% at 50% 0%, rgba(255, 222, 89, .16), transparent 70%); }
.exit__stand::before { content: ''; position: absolute; top: 100%; left: 50%; width: 760px; height: 70px; margin-top: 6px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, .7), transparent 68%); }
.exit__monitor { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 50%; transform-style: preserve-3d; will-change: transform; }
.exit__monitor::before { content: ''; position: absolute; inset: -28px; z-index: 2; pointer-events: none; border: 28px solid #0a0c1a; border-radius: 18px;
  box-shadow: 0 70px 140px -30px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(201, 222, 251, .16); }
.exit__screen { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--navy-950); }
.exit__stand { position: absolute; top: 100%; left: 50%; width: 150px; height: 74px; margin-top: 28px; transform: translateX(-50%);
  background: linear-gradient(180deg, #12152b, #07091a); clip-path: polygon(28% 0, 72% 0, 84% 100%, 16% 100%); }
.exit__stand::after { content: ''; position: absolute; top: 100%; left: 50%; width: 440px; height: 16px; transform: translateX(-50%); background: #0a0c1a; border-radius: 0 0 10px 10px; box-shadow: 0 30px 50px -10px rgba(0, 0, 0, .85); }
/* המסך: סקשן הכלים בגובה מסך אחד בדיוק */
.exit__screen .tools { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + 24px) 40px; }
.exit__screen .tools .section__head { margin-bottom: clamp(18px, 2.5vw, 30px); }
.exit__screen .tool--solo .tool__img { min-height: 240px; }
/* מחוץ למסך אין ניווט של אתר */
.nav, .dots { transition: opacity .5s; }
body.is-away .nav, body.is-away .dots, body.is-away .progress { opacity: 0 !important; pointer-events: none; }
/* צור קשר: ממשיך על השולחן, בלי קצה קרוע */
.contact { background: linear-gradient(180deg, #0a1240 0%, #0a1240 110px, var(--navy-900) 48%); padding-top: clamp(24px, 4vw, 56px); }
@media (max-width: 900px) {
  .exit { height: calc(100vh + 160vh); }
  .exit__stage { perspective: 1200px; perspective-origin: 50% 34%; }
  .exit__monitor::before { inset: -14px; border-width: 14px; border-radius: 42px; }
  .exit__stand { display: none; }
  .exit__desk { top: 66%; }
  .exit__screen .tools { padding-block: calc(var(--nav-h) + 8px) 18px; }
  .exit__screen .tools .section__head { margin-bottom: 14px; }
  .exit__screen .tool--solo .tool__body { padding: 14px 16px 16px; gap: 6px; }
  .exit__screen .tool--solo .tool__body h3 { font-size: 1.4rem; }
  .exit__screen .tool--solo .tool__body p { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .exit { height: auto; }
  .exit__stage { position: relative; height: auto; }
  .exit__wall, .exit__desk { display: none; }
  .exit__monitor { position: relative; height: auto; }
  .exit__monitor::before, .exit__stand { display: none; }
  .exit__screen { position: relative; }
}

/* ============================================================
   v12 · היציאה, הפריים הסופי: המסך הופך לפריים קולנועי, וכל
   "דברו איתי" יושב על השולחן בתוך מסך אחד. הבמה גדלה לפי התוכן.
   ============================================================ */
.exit { height: calc(100vh + 230vh); }
.exit__stage { height: auto; min-height: 100vh; perspective-origin: 50% 34%; }
.exit__world { inset: auto; top: 0; left: 0; right: 0; height: 100vh; }
.exit__desk { top: 52vh; }
.exit__monitor { width: 100%; height: 100vh; }
.exit__screen > .tools { will-change: opacity, transform, filter; transform-origin: 50% 50%; }
/* הפריים הסופי בתוך המסך: ההירו של האתר, חוזר בסוף */
.exit__final { position: absolute; inset: 0; z-index: 3; opacity: 0; overflow: hidden; background: var(--navy-950); will-change: opacity, transform; transform-origin: 50% 50%; }
.exit__final img, .exit__final video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exit__final::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 6, 26, .05) 0%, rgba(4, 6, 26, 0) 40%, rgba(4, 6, 26, .38) 100%); }
/* צור קשר על השולחן */
.exit__contact { position: relative; z-index: 3; margin-top: 56vh; padding-bottom: clamp(24px, 4vh, 44px); opacity: 0; visibility: hidden; }
.exit__contact .contact__grid { grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.exit__contact .contact__col { padding-top: 6px; }
.exit__contact .contact__title { font-size: clamp(2.4rem, 4.8vw, 4.2rem); line-height: 1.02; margin-top: 4px; text-shadow: 0 10px 40px rgba(4, 6, 26, .6); }
.exit__contact .lede { margin-top: 12px; max-width: 44ch; font-size: clamp(.98rem, 1.2vw, 1.08rem); }
.exit__contact .contact__lines { margin-top: 20px; gap: 10px; }
.exit__contact .contact__line { font-size: clamp(1rem, 1.5vw, 1.2rem); }
.exit__contact .socials { margin-top: 20px; gap: 8px; }
.exit__contact .soc { padding: .5em .85em; font-size: .88rem; }
.exit__contact .form { padding: clamp(16px, 2vw, 22px); gap: 10px; background: rgba(4, 6, 26, .74); backdrop-filter: blur(10px); border-color: rgba(255, 222, 89, .18); }
.exit__contact .field input, .exit__contact .field select { padding: 11px 14px; }
.exit__contact .field textarea { min-height: 78px; padding: 11px 14px; }
.exit__contact .form__foot { margin-top: 0; }
.exit__contact .eyebrow, .exit__contact .contact__title, .exit__contact .lede, .exit__contact .contact__lines, .exit__contact .socials, .exit__contact .form { will-change: transform, opacity; }
@media (max-height: 820px) and (min-width: 901px) {
  .exit__contact { margin-top: 53vh; }
  .exit__contact .contact__title { font-size: clamp(2.2rem, 4vw, 3.2rem); }
  .exit__contact .lede { margin-top: 8px; }
  .exit__contact .contact__lines, .exit__contact .socials { margin-top: 14px; }
  .exit__contact .field textarea { min-height: 60px; }
}
@media (max-width: 900px) {
  .exit { height: calc(100vh + 200vh); }
  .exit__stage { perspective-origin: 50% 30%; }
  .exit__desk { top: 39svh; }
  .exit__contact { margin-top: 47svh; padding-bottom: 96px; }
  .exit__contact .contact__grid { grid-template-columns: 1fr; gap: 22px; }
  .exit__contact .contact__title { font-size: 2.3rem; }
  .exit__contact .lede { font-size: .95rem; }
  .exit__contact .contact__lines { margin-top: 14px; }
  .exit__contact .socials { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .exit__final { display: none; }
  .exit__contact { opacity: 1; visibility: visible; margin-top: 40px; }
}

/* ============================================================
   v13 · Mega Menu "עבודות": ארבעת התחומים וכל הפרויקטים שבהם, פרוסים
   בלחיצה אחת. נבנה מ-domains-data.js (domains.js). רוחב המכל, לא dropdown.
   ============================================================ */
.navi--mega { position: static; }
.navi__panel--mega {
  inset-inline: 0; width: var(--container); margin-inline: auto; min-width: 0; max-width: 1240px;
  display: block; padding: 22px 26px 0; border-radius: 18px;
  transform: translate(0, 8px);
}
.navi:hover .navi__panel--mega, .navi:focus-within .navi__panel--mega, .navi.is-open .navi__panel--mega { transform: translate(0, 0); }
.mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 0; }
.mega__cat { display: grid; gap: 10px; align-content: start; padding-inline: 20px; border-inline-start: 1px solid var(--line); }
.mega__cat:first-child { padding-inline-start: 0; border-inline-start: 0; }
.mega__cat:last-child { padding-inline-end: 0; }
.mega__head { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; align-items: baseline; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.mega__head i { grid-row: 1 / 3; align-self: start; padding-top: 3px; font: 700 .78rem/1 var(--font-ui); letter-spacing: .06em; color: var(--glow, var(--gold)); font-style: normal; direction: ltr; }
.mega__head b { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; line-height: 1.15; color: #fff; }
.mega__head span { font-family: var(--font-ui); font-size: .76rem; line-height: 1.4; color: var(--muted); }
.mega__chips { display: grid; gap: 6px; }
.navi__panel .mega__chip {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 0 12px; align-items: center;
  padding: 7px 9px 7px 11px; border-radius: 11px; border: 1px solid transparent; background: rgba(201, 222, 251, .045);
  transition: background .25s, border-color .25s, transform .3s var(--ease);
}
.navi__panel .mega__chip img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--navy-800); }
.navi__panel .mega__chip--flag img { box-shadow: 0 0 0 2px color-mix(in srgb, var(--glow, var(--gold)) 70%, transparent); }
.navi__panel .mega__chip b { font-family: var(--font-ui); font-weight: 600; font-size: .92rem; line-height: 1.25; color: #fff; }
.navi__panel .mega__chip small { display: block; margin-top: 2px; font-family: var(--font-ui); font-size: .75rem; line-height: 1.35; color: var(--muted); }
.navi__panel .mega__chip svg { width: 16px; height: 16px; color: var(--gold); opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .3s var(--ease); }
.navi__panel .mega__chip:hover, .navi__panel .mega__chip:focus-visible { background: rgba(201, 222, 251, .09); border-color: var(--gold-line); transform: translateX(-2px); }
.navi__panel .mega__chip:hover small { color: var(--sky-light); }
.navi__panel .mega__chip:hover svg, .navi__panel .mega__chip:focus-visible svg { opacity: 1; transform: none; }
.navi__panel .mega__chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.navi__panel .mega__chip[aria-current] { border-color: var(--gold); }
.navi__panel .mega__chip[aria-current] b { color: var(--gold); }
.navi__panel .mega__arch { display: inline-flex; width: fit-content; padding: 4px 2px; font: 500 .78rem/1.4 var(--font-ui); color: var(--muted); border-bottom: 1px solid transparent; border-radius: 0; transition: color .25s, border-color .25s; }
.navi__panel .mega__arch:hover { background: none; color: var(--gold); border-color: var(--gold-line); }
.mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px -26px 0; padding: 14px 26px; border-top: 1px solid var(--line); background: rgba(4, 6, 26, .5); border-radius: 0 0 18px 18px; }
.mega__foot span { font-family: var(--font-ui); font-size: .8rem; color: var(--muted); }
.mega__foot div { display: flex; gap: 10px; }
.navi__panel .mega__cta { display: inline-flex; align-items: center; gap: 8px; padding: .62em 1.15em; border-radius: 999px; border: 1px solid var(--line); font: 600 .88rem/1 var(--font-ui); color: var(--sky-light); transition: border-color .25s, color .25s, background .25s; }
.navi__panel .mega__cta svg { width: 15px; height: 15px; }
.navi__panel .mega__cta:hover { background: rgba(201, 222, 251, .07); border-color: var(--gold-line); color: #fff; }
.navi__panel .mega__cta--gold { background: var(--gold); border-color: var(--gold); color: #1a1240; }
.navi__panel .mega__cta--gold:hover { background: #ffe97a; border-color: #ffe97a; color: #1a1240; }
.navi__panel .mega__cta[aria-current] { border-color: var(--gold); color: var(--gold); }
@media (max-width: 1180px) {
  .mega__grid { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .mega__cat { padding-inline: 16px; }
  .mega__cat:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .mega__cat:nth-child(even) { padding-inline-end: 0; }
  .mega__cat:nth-child(n + 3) { padding-top: 20px; border-top: 1px solid var(--line); }
}
/* מובייל: אותו עיקרון, בערימה מסודרת בתוך תפריט הבורגר */
.mnav__g--mega { gap: 12px; }
.mnav__g--mega .mega__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.mnav__g--mega .mega__cat, .mnav__g--mega .mega__cat:nth-child(n) { display: grid; gap: 6px; padding: 0; border: 0; }
.mnav__g--mega .mega__cat + .mega__cat { padding-top: 14px; border-top: 1px solid var(--line); }
.mnav__g--mega .mega__head { display: grid; grid-template-columns: auto 1fr; gap: 0 9px; align-items: baseline; padding-bottom: 4px; }
.mnav__g--mega .mega__head i { grid-row: 1 / 3; font: 700 .74rem/1 var(--font-ui); color: var(--glow, var(--gold)); font-style: normal; direction: ltr; align-self: start; padding-top: 4px; }
.mnav__g--mega .mega__head b { font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.mnav__g--mega .mega__head span { font-family: var(--font-ui); font-size: .74rem; color: var(--muted); }
.mnav__g--mega .mega__chips { display: grid; gap: 6px; }
.mnav__g--mega .mega__chip { display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 0 11px; align-items: center; padding: 7px 9px 7px 10px; border-radius: 11px; border: 1px solid var(--line); background: rgba(201, 222, 251, .04); font-family: var(--font-ui); font-size: 1rem; line-height: 1.25; }
.mnav__g--mega .mega__chip img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.mnav__g--mega .mega__chip b { font-weight: 600; font-size: .95rem; color: #fff; }
.mnav__g--mega .mega__chip small { display: block; font-size: .74rem; color: var(--muted); }
.mnav__g--mega .mega__chip svg { width: 15px; height: 15px; color: var(--gold); opacity: .7; }
.mnav__g--mega .mega__chip[aria-current] { border-color: var(--gold); }
.mnav__g--mega .mega__chip[aria-current] b { color: var(--gold); }
.mnav__g--mega .mega__arch { font: 500 .8rem/1.5 var(--font-ui); color: var(--muted); padding: 2px 0; }
.mnav__g--mega .mega__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.mnav__g--mega .mega__foot span { display: none; }
.mnav__g--mega .mega__foot div { display: contents; }
.mnav__g--mega .mega__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .7em 1em; border-radius: 999px; border: 1px solid var(--line); font: 600 .86rem/1 var(--font-ui); color: var(--sky-light); text-align: center; }
.mnav__g--mega .mega__cta svg { width: 14px; height: 14px; }
.mnav__g--mega .mega__cta--gold { background: var(--gold); border-color: var(--gold); color: #1a1240; }
@media (prefers-reduced-motion: reduce) { .navi__panel .mega__chip, .navi__panel .mega__chip svg { transition: none; } }

/* ============================================================
   v14 · המעבר כרגע קולנועי אחד: השולחן בשכבה משלו מאחורי המסך (לא
   חותך אותו יותר), הקצה שלו הוא אופק רך, המסך משתקף על השולחן, והחלקת
   אור אחת עוברת על הזכוכית. שתי שכבות של אותה סביבה, לא שני סקשנים.
   ============================================================ */
.exit__ground { position: absolute; top: 0; left: 0; right: 0; height: 100vh; z-index: 0; perspective: 1600px; perspective-origin: 50% 34%; pointer-events: none; }
.exit__ground .exit__desk {
  top: 50vh; left: -40%; right: -40%; height: 140%; border-top: 0; opacity: 0;
  background: linear-gradient(180deg, rgba(20, 32, 100, 0) 0%, rgba(20, 32, 100, .55) 4%, #121f62 9%, #0d1750 18%, #0a1240 34%, #0a1240 100%);
}
.exit__ground .exit__desk::after { background: radial-gradient(44% 12% at 50% 0%, rgba(255, 222, 89, .13), transparent 70%); }
/* הקיר: אופק חם ורך במקום קו, כדי שהקיר והשולחן יהיו אותה סביבה */
.exit__wall { background:
  radial-gradient(70% 14% at 50% 52%, rgba(255, 222, 89, .09), transparent 70%),
  radial-gradient(120% 90% at 50% 0%, #141f5c 0%, #0a1240 46%, #0a1240 100%); }
.exit__wall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 6, 26, .35) 0%, rgba(4, 6, 26, 0) 30%, rgba(4, 6, 26, 0) 44%, rgba(10, 18, 64, .6) 58%, rgba(10, 18, 64, .85) 100%); }
/* השתקפות המסך על השולחן: מתחת למסך, הפוכה, מטושטשת, דוהה כלפי מטה */
.exit__reflect { position: absolute; top: 100%; left: 0; right: 0; height: 42%; margin-top: 30px; z-index: 0; opacity: 0; pointer-events: none;
  background: url('../assets/video/hero-shambala.jpg') center / cover no-repeat; transform: scaleY(-1); filter: blur(12px) saturate(.9);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .18) 45%, transparent 90%); mask-image: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .18) 45%, transparent 90%); }
/* החלקת אור על הזכוכית: פס רך, אלכסוני, עובר פעם אחת בזמן הדולי */
.exit__glare { position: absolute; inset: -30% -20%; z-index: 4; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, .035) 47%, rgba(255, 255, 255, .085) 50%, rgba(255, 255, 255, .035) 53%, transparent 58%); }
.exit__screen::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .035) 0%, transparent 28%); }
.exit__stand::before { width: 900px; height: 90px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 68%); }
@media (max-width: 900px) {
  .exit__ground { perspective: 1200px; perspective-origin: 50% 30%; }
  .exit__ground .exit__desk { top: 41svh; }
  .exit__reflect { margin-top: 14px; height: 30%; filter: blur(9px); }
}
@media (prefers-reduced-motion: reduce) { .exit__ground, .exit__reflect, .exit__glare { display: none; } }

/* לוח הבקרה: אלמנט שהוסתר ונשמר לקבצים */
[data-cms-hidden] { display: none !important; }

/* ============================================================
   v15 · ארגז הכלים: לוגואים גדולים של התוכנות ושורה על התפקיד של כל
   אחת, ומתחת רק העבודות החזקות. ריחוף על כלי מדליק את העבודות שנעשו בו.
   ============================================================ */
.toolrail { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); margin: clamp(26px, 3.4vw, 44px) 0 clamp(30px, 4vw, 52px); }
.tl {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 9px; text-align: center;
  padding: clamp(16px, 1.8vw, 22px) 10px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(4, 6, 26, .42);
  cursor: default; transition: transform .45s var(--ease), border-color .3s, background .3s, opacity .35s;
}
.tl--live { cursor: default; }
.tl__logo { width: clamp(52px, 4.4vw, 66px); height: clamp(52px, 4.4vw, 66px); display: grid; place-items: center; transition: transform .5s var(--ease); }
.tl__logo svg { width: 100%; height: 100%; fill: var(--tc, #fff); }
.tl__mark { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 14px; border: 2px solid var(--tc, #fff); color: var(--tc, #fff); font-family: var(--font-ui); font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: -.02em; direction: ltr; }
.tl__mark--txt { font-size: clamp(.78rem, 1vw, .9rem); font-weight: 700; letter-spacing: .04em; }
.tl b { font-family: var(--font-ui); font-weight: 600; font-size: clamp(.86rem, 1vw, .95rem); color: #fff; direction: ltr; }
.tl span { font-family: var(--font-ui); font-size: .76rem; line-height: 1.45; color: var(--muted); transition: color .3s; }
.tl:hover, .tl.is-on { translate: 0 -4px; border-color: color-mix(in srgb, var(--tc, var(--gold)) 60%, transparent); background: rgba(4, 6, 26, .62); }
.tl:hover .tl__logo, .tl.is-on .tl__logo { transform: scale(1.08); }
.tl:hover span, .tl.is-on span { color: var(--sky-light); }
.tl.is-on::after { content: ''; position: absolute; inset-inline: 22%; bottom: -1px; height: 2px; background: var(--tc, var(--gold)); border-radius: 2px; }
.tl:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tl__count { position: absolute; top: 8px; inset-inline-end: 9px; font-family: var(--font-ui); font-size: .68rem; font-weight: 600; color: var(--muted); opacity: 0; transition: opacity .3s; }
.tl--live:hover .tl__count, .tl.is-on .tl__count { opacity: 1; }
/* הכלי שמרחפים עליו מדליק את העבודות שלו; השאר שוקעות */
.bento .card { transition: opacity .45s var(--ease), filter .45s var(--ease), box-shadow .4s; }
.bento.is-filtering .card:not(.is-match) { opacity: .22; filter: saturate(.35) brightness(.7); }
.bento.is-filtering .card.is-match { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc, var(--gold)) 55%, transparent), 0 26px 60px -22px color-mix(in srgb, var(--tc, var(--gold)) 50%, transparent); }
.works__note { margin-top: -6px; margin-bottom: 18px; font-family: var(--font-ui); font-size: .82rem; color: var(--muted); min-height: 1.4em; transition: opacity .3s; }
.works__note b { color: var(--gold); font-weight: 600; }
@media (max-width: 1100px) { .toolrail { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .toolrail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; margin: 22px -4vw 30px; padding: 4px 4vw 8px; }
  .toolrail::-webkit-scrollbar { display: none; }
  .tl { flex: 0 0 42vw; max-width: 200px; scroll-snap-align: start; }
  .tl span { font-size: .74rem; }
  .bento.is-filtering .card:not(.is-match) { opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .tl, .tl__logo, .bento .card { transition: none; } }

/* ============================================================
   v16 · פרק 02 "מה אני עושה": פריים אחד עובר את חמשת השלבים.
   השכבות נערמות בפריים, וכל שלב נחשף ב-wipe שנגרר עם הגלילה. אין pin.
   ============================================================ */
.skills__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 5vw, 76px); align-items: start; }
/* ריווח בתחתית: הפריים נשאר ממורכז גם מול התחנה האחרונה, לפני שהמדבקה משתחררת */
.skills__steps { position: relative; padding-block: 2vh 18vh; }
.skills__line { position: absolute; top: 0; bottom: 0; inset-inline-start: 31px; width: 2px; background: rgba(201, 222, 251, .16); border-radius: 2px; }
.skills__line i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-radius: 2px; box-shadow: 0 0 14px rgba(255, 222, 89, .35); }
/* כל תחנה בקופסה באותו גובה, הטקסט ממורכז בתוכה: כך מרכז הטקסט = מרכז התחנה, בלי קשר לאורך */
.skill { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; align-content: center; min-height: 54vh; padding: 22px 0; cursor: pointer; transition: opacity .5s var(--ease); }
.skill__num { position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; direction: ltr;
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--sky-light); background: var(--navy-950); border: 1px solid rgba(201, 222, 251, .3);
  transition: background .4s, color .4s, border-color .4s, box-shadow .5s, transform .5s var(--ease); }
.skill.is-passed .skill__num { border-color: var(--gold); color: var(--gold); }
.skill.is-active .skill__num { background: var(--gold); color: #1a1240; border-color: var(--gold); box-shadow: 0 0 0 10px rgba(255, 222, 89, .12); transform: scale(1.08); }
.skill__body { padding-top: 8px; }
.skill h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.1vw, 2.9rem); line-height: 1.1; color: #fff; transition: color .4s; }
.skill.is-active h3 { color: var(--gold); }
.skill p { margin-top: 12px; font-size: clamp(1.02rem, 1.25vw, 1.16rem); line-height: 1.75; color: #d6ddf4; max-width: 46ch; }
.skill__out { margin-top: 14px; font-family: var(--font-ui); font-size: .92rem; color: var(--sky-light); }
.skill__out span { color: var(--gold); font-weight: 600; margin-inline-end: 8px; }
.skill__out span::after { content: ':'; }
.skills.is-scrolly .skill:not(.is-active) { opacity: .55; }
.skills.is-scrolly .skill:hover:not(.is-active) { opacity: .78; }
.skills__cta { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 0 0; padding-bottom: 3px; font-family: var(--font-ui); font-weight: 600; font-size: .95rem; color: var(--gold); border-bottom: 1px solid var(--gold-line); transition: border-color .3s; }
.skills__cta svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.skills__cta:hover { border-color: var(--gold); }
.skills__cta:hover svg { transform: translateX(-4px); }
/* הפריים: דביק, ובתוכו חמש שכבות של אותו קליפ */
/* הפריים ממורכז מעט מעל אמצע המסך (42%), בדיוק באזור שבו הטקסט הפעיל נקרא */
.skills__stage { position: sticky; top: calc(var(--nav-h) + 18px); height: calc(100vh - var(--nav-h) - 36px); display: flex; align-items: center; padding-bottom: 20vh; }
.skills__frame { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 10; max-height: calc(100vh - var(--nav-h) - 80px); border-radius: var(--radius); overflow: hidden; background: var(--navy-800);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--line); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.skills__layer { position: absolute; inset: 0; will-change: clip-path; }
.skills__layer + .skills__layer { clip-path: inset(0 0 0 100%); }
.skills__layer img, .skills__layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skills__wipe { position: absolute; z-index: 5; top: 0; bottom: 0; left: 100%; width: 2px; margin-left: -1px; opacity: 0; pointer-events: none;
  background: var(--gold); box-shadow: 0 0 18px rgba(255, 222, 89, .8), -28px 0 36px -8px rgba(255, 222, 89, .28); }
.skills__frame::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(4, 6, 26, .18) 0%, transparent 22%, transparent 70%, rgba(4, 6, 26, .7) 100%); }
.skills__tag { position: absolute; z-index: 6; top: 16px; inset-inline-start: 16px; display: flex; align-items: baseline; gap: 9px; padding: .42em .85em; border-radius: 999px; background: rgba(4, 6, 26, .74); backdrop-filter: blur(8px); border: 1px solid var(--line); font-family: var(--font-ui); max-width: calc(100% - 32px); }
.skills__tag i { font-style: normal; font-weight: 700; font-size: .78rem; letter-spacing: .04em; color: var(--gold); direction: ltr; }
.skills__tag b { font-weight: 600; font-size: .9rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skills__proj { position: absolute; z-index: 6; bottom: 14px; inset-inline-end: 18px; font-family: var(--font-ui); font-size: .78rem; color: var(--sky-light); opacity: .9; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
@media (max-width: 900px) {
  .skills__grid { grid-template-columns: 1fr; gap: 16px; }
  .skills__stage { order: -1; position: sticky; top: calc(var(--nav-h) + 6px); height: auto; z-index: 3; }
  .skills__frame { max-height: none; }
  .skills__steps { padding-block: 10px 30vh; }
  .skill { min-height: 0; padding: 22px 0; grid-template-columns: 48px 1fr; gap: 14px; align-content: start; }
  .skill__num { width: 48px; height: 48px; font-size: 1.05rem; }
  .skills__line { inset-inline-start: 23px; }
  .skill h3 { font-size: 1.6rem; }
  .skill p { font-size: 1rem; }
  .skill__out { font-size: .86rem; }
  .skills__tag { top: 10px; inset-inline-start: 10px; padding: .35em .7em; }
  .skills__tag b { font-size: .8rem; }
  .skills__proj { display: none; }
  .skills__cta { margin-inline-start: 62px; }
}
@media (prefers-reduced-motion: reduce) { .skills__aurora { animation: none; } }

/* ============================================================
   v17 · אחרי הפידבק של אורי: ארגז הכלים מתחת לעבודות, חמש תגיות כלים
   באודות, לוגו שלא נבלע בתפריט.
   ============================================================ */
.works__tools { margin-top: clamp(40px, 5vw, 64px); max-width: 720px; }
.works__subtitle { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: #fff; }
.works__lede { margin-top: 8px; font-size: clamp(.98rem, 1.15vw, 1.08rem); line-height: 1.7; color: var(--sky-light); }
.works .toolrail { margin-top: clamp(16px, 2vw, 24px); }
.about__chip--4 { top: 72%; inset-inline-end: 4%; animation-delay: -2s; }
.about__chip--5 { top: 6%; inset-inline-start: 4%; animation-delay: -4s; color: var(--gold); }
.nav__logo img { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .28)) drop-shadow(0 2px 8px rgba(4, 6, 26, .6)); }
@media (max-width: 900px) { .about__chip--4 { top: 76%; } .about__chip--5 { top: 4%; } }

/* ============================================================
   v18 · ארגז הכלים מרכיב את עצמו: עומק, טשטוש-לפוקוס, הבהק אחד.
   ============================================================ */
.toolrail { position: relative; }
.toolrail > .tl { will-change: transform, opacity, filter; backface-visibility: hidden; transition: border-color .3s, background .3s, opacity .35s, translate .45s var(--ease); }
.toolrail__sweep { position: absolute; z-index: 5; top: -6%; bottom: -6%; left: 0; width: 34%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 238, 205, .06) 35%, rgba(255, 238, 205, .22) 50%, rgba(255, 238, 205, .06) 65%, transparent 100%); mix-blend-mode: screen; filter: blur(2px); }
@media (prefers-reduced-motion: reduce) { .toolrail__sweep { display: none; } }

/* ============================================================
   v19 · הלוגו מרחף בשוט האחרון; AI בארגז הכלים.
   ============================================================ */
.exit__logo { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; will-change: opacity, transform; }
.exit__logo img { position: relative; width: clamp(170px, 21vw, 330px); height: auto; filter: drop-shadow(0 0 22px rgba(255, 244, 214, .45)) drop-shadow(0 18px 40px rgba(4, 6, 26, .7)); animation: exit-logo-float 7s ease-in-out infinite; }
@keyframes exit-logo-float { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-9px) rotate(.6deg); } }
.tl__mark--ai { letter-spacing: .08em; background: linear-gradient(135deg, rgba(201, 222, 251, .12), rgba(140, 48, 254, .18)); }
@media (max-width: 900px) { .exit__logo img { width: 150px; } }
@media (prefers-reduced-motion: reduce) { .exit__logo img { animation: none; } }

/* ============================================================
   v20 · מאחורי הקסם: המספרים חיים בעומק. מספר-רפאים מאחורי הכותרת,
   סטטיסטיקות בשכבות, זוהר כשהן נדלקות.
   ============================================================ */
.social__wrap { position: relative; }
.social__ghost { position: absolute; z-index: 0; inset-inline-end: -4%; top: -8%; display: grid; justify-items: end; pointer-events: none; direction: ltr; will-change: transform, opacity; opacity: 0; }
.social__ghost b { font-family: var(--font-display); font-weight: 700; font-size: clamp(7rem, 24vw, 22rem); line-height: .9; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(201, 222, 251, .16); background: linear-gradient(180deg, rgba(255, 222, 89, .13) 0%, rgba(201, 222, 251, .02) 70%); -webkit-background-clip: text; background-clip: text; }
.social__ghost span { font-family: var(--font-ui); font-size: clamp(.9rem, 1.4vw, 1.2rem); letter-spacing: .3em; color: rgba(201, 222, 251, .22); margin-top: -.2em; }
.social__head, .social__rail, .social__cta { position: relative; z-index: 1; }
.social__stats { align-content: start; }
.social__stat { will-change: transform; }
.social__stat b { transition: text-shadow .8s var(--ease); }
.social__stats.is-live .social__stat b { text-shadow: 0 0 28px rgba(255, 222, 89, .28); }
.social__stat::before { content: ''; display: block; width: 22px; height: 2px; margin-bottom: 10px; background: linear-gradient(90deg, var(--gold), transparent); border-radius: 2px; opacity: .7; }
@media (min-width: 901px) {
  .social__stat:nth-child(2) { translate: 0 22px; }
  .social__stat:nth-child(5) { translate: 0 22px; }
  .social__stat:nth-child(3), .social__stat:nth-child(6) { translate: 0 -10px; }
}
@media (max-width: 900px) { .social__ghost { inset-inline-end: -6%; top: -3%; } .social__ghost b { font-size: 6rem; } }
@media (prefers-reduced-motion: reduce) { .social__ghost { opacity: .6; } }

/* ============================================================
   v21 · "הפרויקט הבא": המעבר היחיד בסוף עמוד פרויקט. פריים אחד, כמו
   סצנה שנפתחת, לא שורת צ'יפים. סרגלי התחום שהיו באמצע העמוד יצאו.
   ============================================================ */
.next-wrap { position: relative; background: var(--navy-950); }
.next { position: relative; display: grid; align-items: end; min-height: min(64vh, 640px); overflow: hidden; color: #fff; isolation: isolate; }
.next__media { position: absolute; inset: 0; z-index: -1; }
.next__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.next__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy-950) 0%, rgba(4, 6, 26, .35) 30%, rgba(4, 6, 26, .2) 60%, rgba(4, 6, 26, .92) 100%); }
.next__body { position: relative; width: var(--container); margin-inline: auto; padding: clamp(60px, 10vw, 140px) 0 clamp(40px, 6vw, 72px); }
.next__kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-weight: 600; font-size: .82rem; letter-spacing: .1em; color: var(--glow, var(--gold)); }
.next__kicker::before { content: ''; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.next__title { margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: 1.02; text-shadow: 0 6px 30px rgba(4, 6, 26, .8); transition: transform .7s var(--ease); }
.next__sub { margin-top: 8px; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--sky-light); }
.next__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding-bottom: 4px; border-bottom: 1px solid var(--gold-line); font-family: var(--font-ui); font-weight: 600; color: var(--gold); transition: gap .4s var(--ease), border-color .3s; }
.next__go svg { width: 16px; height: 16px; }
.next:hover .next__title { transform: translateX(-10px); }
.next:hover .next__go { gap: 16px; border-color: var(--gold); }
.next:hover .next__media img { filter: brightness(1.08); }
.next__foot { width: var(--container); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 18px 0 26px; font-family: var(--font-ui); font-size: .84rem; }
.next__foot a { color: var(--muted); transition: color .3s; }
.next__foot a:hover { color: #fff; }
.k .next-wrap, .kg .next-wrap { background: inherit; }
@media (max-width: 900px) { .next { min-height: 56vh; } .next__body { padding-top: 90px; } }

/* ============================================================
   v22 · וידאו בכרטיסים: crossfade על פריים אמיתי, אותו zoom לתמונה ולווידאו,
   ואייקון שאומר מה קורה בלחיצה (נגן = סרטון, מסגרת = תמונה בגדול).
   ============================================================ */
.card video { transition: transform 1.1s var(--ease), opacity .7s var(--ease); }
.card__play--zoom { opacity: 0; transform: scale(.8); transition: opacity .35s, transform .45s var(--ease); }
.card:hover .card__play--zoom, .card:focus-visible .card__play--zoom { opacity: 1; transform: none; }
.card__play--zoom svg { margin-inline-start: 0; }
@media (hover: none) { .card__play--zoom { opacity: 1; transform: none; } }
.card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ============================================================
   v23 · על הבמה = אולם. המסך עולה מנקודת המבט של כיסא בקהל, אלומת
   מקרן נדלקת, והראיונות יוצאים מאחורי המסך. הכול מהגלילה, אין pin.
   ============================================================ */
.stage__hall { position: relative; perspective: 1400px; }
.stage__beam { position: absolute; z-index: 0; top: -22%; left: 50%; width: 150%; height: 130%; translate: -50% 0; pointer-events: none; opacity: 0; transform-origin: 50% 0;
  background: conic-gradient(from 180deg at 50% 0%, transparent 41%, rgba(255, 238, 205, .05) 46%, rgba(255, 238, 205, .13) 50%, rgba(255, 238, 205, .05) 54%, transparent 59%);
  filter: blur(18px); mix-blend-mode: screen; will-change: opacity, transform; }
.stage__grid { position: relative; z-index: 1; }
.stage__screen { position: relative; display: grid; transform-origin: 50% 100%; will-change: transform, filter; transform-style: flat; }   /* flat: אחרת ה-yt עם tilt לא נלחץ */
.stage__screen .yt--featured { min-height: 100%; box-shadow: 0 40px 90px -30px rgba(4, 6, 26, .95), 0 0 0 1px rgba(201, 222, 251, .12); }
.stage__glow { position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -26px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(25, 157, 251, .34), transparent); filter: blur(14px); pointer-events: none; }
.stage__side { will-change: transform, opacity; transform-style: flat; }
.stage__side .yt { box-shadow: 0 30px 70px -28px rgba(4, 6, 26, .95); }
@media (max-width: 900px) { .stage__beam { display: none; } .stage__screen { transform-origin: 50% 50%; } }
@media (prefers-reduced-motion: reduce) { .stage__beam { opacity: .8; } }

/* ============================================================
   v24 · "פרויקט אחד, מא' ועד ת'": ליטוש. הפריים חי (הרינדור הפעיל נושם),
   השכבה הנכנסת נגררת עם ה-wipe, תווית "הבא" על הקו, תג שמתחלף בקרוס-פייד.
   ============================================================ */
.skill h3 { transition: color .5s var(--ease), letter-spacing .5s var(--ease); }
.skill.is-active h3 { letter-spacing: .005em; }
.skill.is-passed h3 { color: #e9edf9; }
.skills__layer { will-change: clip-path, transform; }
.skills__layer img, .skills__layer video { animation: skills-breathe 18s ease-in-out infinite alternate; animation-play-state: paused; }
.skills__layer.is-on img, .skills__layer.is-on video { animation-play-state: running; }
@keyframes skills-breathe { 0% { transform: scale(1.02) translate(0, 0); } 100% { transform: scale(1.09) translate(-1.6%, 1.2%); } }
.skills__tag { transition: opacity .28s var(--ease), translate .28s var(--ease); }
.skills__tag.is-swap { opacity: 0; translate: 0 -6px; }
.skills__next { position: absolute; z-index: 6; top: 50%; left: 0; translate: 0 -50%; display: inline-flex; align-items: center; gap: 8px; padding: .38em .8em; border-radius: 999px; background: rgba(4, 6, 26, .7); backdrop-filter: blur(8px); border: 1px solid var(--gold-line); font-family: var(--font-ui); font-size: .78rem; color: #fff; opacity: 0; pointer-events: none; white-space: nowrap; }
.skills__next i { font-style: normal; font-weight: 700; color: var(--gold); font-size: .7rem; letter-spacing: .06em; }
.skills__next b { font-weight: 500; }
@media (max-width: 900px) { .skills__next { display: none; } }
@media (prefers-reduced-motion: reduce) { .skills__layer img, .skills__layer video { animation: none; } }


/* ============================================================
   v26 · נגן יוטיוב שלא נפתח שחור: פוסטר מיידי (הפריים החי מהכרטיס),
   טבעת המתנה, וה-iframe נכנס ב-fade כשהוא נטען.
   ============================================================ */
.ytstage { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: min(76vh, 780px); margin: 0 auto; background: #000; overflow: hidden; }
.ytstage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); transform: scale(1.02); transition: opacity .6s .15s, filter .6s; }
.ytstage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .55s; }
.ytstage__wait { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 2px solid rgba(255, 222, 89, .25); border-top-color: var(--gold); animation: ytwait .9s linear infinite; transition: opacity .3s; }
@keyframes ytwait { to { transform: rotate(360deg); } }
.ytstage.is-ready iframe { opacity: 1; }
.ytstage.is-ready .ytstage__wait { opacity: 0; }
.ytstage.is-ready .ytstage__poster { opacity: 0; }
.lightbox--wide .lightbox__media .ytstage { max-height: min(76vh, 780px); }
.film__player-box .ytstage { position: absolute; inset: 0; height: 100%; max-height: none; aspect-ratio: auto; }
@media (max-width: 900px) { .lightbox--wide .lightbox__media .ytstage { max-height: 54vh; } }
@media (prefers-reduced-motion: reduce) { .ytstage__wait { animation: none; } }

/* ============================================================
   v27 · היצירה הקולנועית: מסכים נקיים. מסך גדול אחד (21:9) עם כרטיס
   כותרת מתחתיו, גריד 2/3/3 של מסכים 16:9 עם כותרת וסוג מתחת. הלופ
   נחשף על פריים אמיתי, הריחוף מרים את המסך בעדינות, לחיצה = הסרטון המלא.
   ============================================================ */
.videos { overflow: hidden; }
.videos .videos__all { margin-top: clamp(30px, 4vw, 48px); }
.cine { position: relative; display: grid; gap: clamp(24px, 3.4vw, 48px); }
.screen { position: relative; margin: 0; cursor: pointer; --glow: var(--gold); }
.screen__cell { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--navy-800);
  box-shadow: 0 0 0 1px rgba(201, 222, 251, .14), 0 30px 60px -32px rgba(4, 6, 26, .95); transition: box-shadow .5s, transform .7s var(--ease); }
.screen__cell::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(4, 6, 26, .42)); }
.screen__cell img, .screen__cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.screen__cell video { opacity: 0; pointer-events: none; }
.screen.is-live .screen__cell video { opacity: 1; }
.screen.is-broken .screen__cell video { display: none; }
.screen:hover .screen__cell, .screen:focus-visible .screen__cell { box-shadow: 0 0 0 1px rgba(255, 222, 89, .6), 0 36px 70px -28px rgba(4, 6, 26, 1); transform: translateY(-4px); }
.screen:hover .screen__cell img, .screen:hover .screen__cell video { transform: scale(1.03); }
.screen__play { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; width: 58px; height: 58px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; opacity: 0; scale: .8; transition: opacity .35s, scale .45s var(--ease); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7); }
.screen__play svg { width: 22px; height: 22px; margin-inline-start: 3px; fill: #1a1240; }
.screen:hover .screen__play, .screen:focus-visible .screen__play { opacity: 1; scale: 1; }
.screen__tag { position: absolute; z-index: 3; top: 14px; inset-inline-start: 14px; padding: .34em .8em; border-radius: 999px; background: rgba(4, 6, 26, .66); border: 1px solid var(--gold-line); font-family: var(--font-ui); font-size: .76rem; font-weight: 600; color: var(--gold); backdrop-filter: blur(6px); }
.screen__cap { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding-inline: 2px; }
.screen__kind { font-family: var(--font-ui); font-size: .76rem; font-weight: 600; letter-spacing: .03em; color: var(--muted); }
.screen__title { margin: 0; font-family: var(--font-ui); font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: #fff; text-wrap: balance; }
.screen:hover .screen__title { color: var(--gold); transition: color .35s; }
/* המסך הגדול */
.screen--feature .screen__cell { aspect-ratio: 21 / 9; border-radius: 16px; box-shadow: 0 0 0 1px rgba(201, 222, 251, .16), 0 50px 100px -40px rgba(4, 6, 26, 1); }
.screen--feature .screen__cell::after { background: linear-gradient(180deg, rgba(4, 6, 26, .12), transparent 30%, transparent 70%, rgba(4, 6, 26, .35)); }
.screen--feature .screen__cap { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'kind btn' 'title btn'; align-items: center; gap: 4px 28px; margin-top: 18px; }
.screen--feature .screen__kind { grid-area: kind; color: var(--gold); }
.screen--feature .screen__title { grid-area: title; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.15; }
.screen--feature .screen__btn { grid-area: btn; }
.screen--feature .screen__play { width: 78px; height: 78px; }
.screen--feature .screen__play svg { width: 28px; height: 28px; }
/* הגריד: 2 רחבים, אחר כך 3 ו-3 */
.cine__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px) clamp(16px, 2vw, 26px); }
.cine__grid .screen { grid-column: span 2; }
.cine__grid .screen:nth-child(-n+2) { grid-column: span 3; }
.cine__grid .screen:nth-child(-n+2) .screen__title { font-size: 1.12rem; }
@media (max-width: 1000px) {
  .cine__grid .screen, .cine__grid .screen:nth-child(-n+2) { grid-column: span 3; }
  .screen--feature .screen__cell { aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
  .cine__grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -4vw; padding-inline: 4vw; padding-bottom: 6px; }
  .cine__grid::-webkit-scrollbar { display: none; }
  .cine__grid .screen { flex: 0 0 78vw; scroll-snap-align: center; }
  .cine__grid .screen:nth-child(-n+2) .screen__title { font-size: 1.02rem; }
  .screen--feature .screen__cap { grid-template-columns: 1fr; grid-template-areas: 'kind' 'title' 'btn'; gap: 6px; }
  .screen--feature .screen__btn { justify-self: start; margin-top: 6px; }
  .screen__play { opacity: 1; scale: 1; width: 48px; height: 48px; }
}
@media (hover: none) { .screen__play { opacity: 1; scale: 1; } }
/* הנגן (נשאר מהגרסה הקודמת) */
.film__player { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: 4vw; background: rgba(4, 6, 26, .9); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .35s; }
.film__player.is-open { opacity: 1; pointer-events: auto; }
.film__player > div { width: min(1120px, 100%); }
.film__player-box { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 1); transform: scale(.95); transition: transform .45s var(--ease); }
.film__player.is-open .film__player-box { transform: scale(1); }
.film__player-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__player-cap { margin-top: 14px; text-align: center; font-family: var(--font-ui); color: var(--sky-light); }
.film__player-x { position: absolute; top: 18px; inset-inline-end: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(4, 6, 26, .7); color: #fff; font-size: 1.4rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .screen__cell img, .screen__cell video { transition: none; } }

/* ============================================================
   v28 · סמל אחד שנוסע. בהירו: גדול יותר, עם הילה בצבעי המותג. בגלילה:
   שכבה קבועה נוסעת אל התפריט ומתעגנת ליד השם. אין שני סמלים על המסך.
   ============================================================ */
.hero__logowrap { position: relative; isolation: isolate; }
.hero__logowrap::before { content: ''; position: absolute; z-index: -1; inset: -42% -34%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(140, 48, 254, .34), rgba(42, 102, 224, .2) 46%, transparent 74%); filter: blur(22px); }
.hero__logo { width: clamp(170px, 17vw, 250px); }
body.has-brandfly .hero__logo { visibility: hidden; }
body.has-brandfly .hero__logowrap { animation: none; }
.brandfly { position: fixed; left: 0; top: 0; z-index: 101; pointer-events: none; transform-origin: 0 0; will-change: transform, opacity; }
.brandfly img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(4, 6, 26, .8)); }
.brandfly.is-home img { animation: float 7s ease-in-out infinite; }
/* התפריט: בלי סמל עד שהוא מגיע; אז השם זז לפנות לו מקום */
body.has-navdock .nav__logo img { width: 0; opacity: 0; margin-inline-end: -12px; transition: width .5s var(--ease), opacity .35s, margin .5s var(--ease); }
body.has-navdock .nav.is-docking .nav__logo img { width: 74px; margin-inline-end: 0; }   /* המקום נשמר, השם זז */
body.has-navdock .nav.is-docked .nav__logo img { width: 74px; opacity: 1; margin-inline-end: 0; }
body.has-navdock .nav.is-measuring .nav__logo img { transition: none; }
.nav.is-measuring { transition: none; }
@media (max-width: 900px) {
  .hero__logo { width: 132px; }
  body.has-navdock .nav.is-docking .nav__logo img, body.has-navdock .nav.is-docked .nav__logo img { width: 62px; }
}
@media (prefers-reduced-motion: reduce) { .brandfly.is-home img { animation: none; } }

/* ============================================================
   v29 · "פרויקט אחד, מא' ועד ת'": אותו תוכן, הצגה אחרת.
   מספר עורכי על הקו (לא עיגול), כותרת, משפט מוביל, השלמה משנית,
   ו"יוצא מזה" כמסקנה טיפוגרפית של השלב. הכוריאוגרפיה ב-main.js.
   ============================================================ */
.skills__line { inset-inline-start: 7px; width: 1px; background: rgba(201, 222, 251, .14); }
.skills__line i { width: 1px; box-shadow: 0 0 10px rgba(255, 222, 89, .3); }
.skill { display: block; min-height: 60vh; padding: 28px 0 28px; padding-inline-start: 42px; align-content: center; }
.skills.is-scrolly .skill:not(.is-active), .skills.is-scrolly .skill:hover:not(.is-active) { opacity: 1; }
/* התחנה על הקו: נקודה, לא תג */
.skill::before { content: ''; position: absolute; inset-inline-start: 2px; top: calc(28px + .62em * 3.2); width: 11px; height: 11px; border-radius: 50%; background: var(--navy-950); border: 1px solid rgba(201, 222, 251, .45); transition: background .5s, border-color .5s, box-shadow .6s; }
.skill.is-active::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 6px rgba(255, 222, 89, .14), 0 0 18px rgba(255, 222, 89, .5); }
.skill.is-passed::before { background: var(--gold-deep); border-color: var(--gold-deep); }
/* המספר: התמצאות. גדול, דק, בעברית של סרט */
.skill__num { display: block; width: auto; height: auto; border: 0; background: none; box-shadow: none; transform: none; margin: 0 0 2px; direction: ltr; text-align: start;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 4.6vw, 4.4rem); line-height: .9; letter-spacing: -.02em; color: var(--gold); opacity: .92; }
.skill.is-active .skill__num { background: none; box-shadow: none; transform: none; color: var(--gold); }
.skill.is-passed .skill__num { color: var(--gold-deep); }
.skill__num i { display: block; font-style: normal; will-change: clip-path, transform; }
/* הכותרת: זהות. נחשפת במסכה משורה */
.skill h3 { margin-top: 6px; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.08; color: #fff; }
.skill h3 span { display: block; will-change: clip-path, transform; }
.skill.is-active h3 { color: #fff; }
.skill.is-passed h3 { color: #dfe5f5; }
/* ההסבר: משפט מוביל אחד, ואז ההשלמה בקול נמוך יותר */
.skill__lead { margin-top: 18px; font-family: var(--font-ui); font-weight: 500; font-size: clamp(1.08rem, 1.35vw, 1.24rem); line-height: 1.6; color: #fff; max-width: 38ch; will-change: opacity, transform; }
.skill__more { margin-top: 10px; font-family: var(--font-ui); font-weight: 400; font-size: clamp(.94rem, 1.05vw, 1rem); line-height: 1.7; color: #aeb8d6; max-width: 42ch; will-change: opacity, transform; }
.skill p.skill__lead, .skill p.skill__more { max-width: none; }
.skill p.skill__lead { max-width: 38ch; } .skill p.skill__more { max-width: 42ch; }
/* המסקנה: קו זהב דק שנמתח, תווית קטנה, והמשפט שהשלב הגיע אליו */
.skill__out { margin-top: 30px; padding-top: 16px; position: relative; font-family: var(--font-ui); font-size: .92rem; color: var(--sky-light); }
.skill__out i { position: absolute; top: 0; inset-inline-start: 0; width: 44px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; will-change: transform; }
.skill__out span { display: block; margin: 0 0 6px; font-size: .72rem; font-weight: 600; letter-spacing: .18em; color: var(--gold); opacity: .9; }
.skill__out span::after { content: ''; }
.skill__out b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.85vw, 1.72rem); line-height: 1.25; color: #fff; max-width: 30ch; }
.skill__out b em { display: block; font-style: normal; will-change: clip-path, opacity, transform; }
/* הפריים: התג בלי גלולה, ובלי תווית "הבא" (הטקסט מספר את זה עכשיו) */
.skills__tag { border-radius: 8px; padding: .38em .7em; }
.skills__next { display: none !important; }
.skills__cta { margin-top: 10px; margin-inline-start: 42px; }
@media (max-width: 900px) {
  .skill { min-height: 0; padding: 22px 0 22px; padding-inline-start: 30px; }
  .skill::before { inset-inline-start: 2px; top: calc(22px + .62em * 2.4); }
  .skills__line { inset-inline-start: 7px; }
  .skill__num { font-size: 2.4rem; }
  .skill h3 { font-size: 1.7rem; }
  .skill__lead { font-size: 1.04rem; }
  .skill__more { font-size: .94rem; }
  .skill__out b { font-size: 1.22rem; }
  .skills__cta { margin-inline-start: 30px; }
}

/* ============================================================
   v30 · עמודים משפטיים, הסכמה בטופס, "פחות תנועה" בפוטר.
   ============================================================ */
.legal { padding: calc(var(--nav-h) + clamp(50px, 8vw, 100px)) 0 clamp(70px, 10vw, 130px); background: var(--navy-950); }
.legal__inner { width: min(760px, 92vw); margin-inline: auto; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; margin-bottom: 10px; }
.legal__asof { font-family: var(--font-ui); font-size: .9rem; color: var(--muted); margin-bottom: 28px; }
.legal h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 2.1em 0 .5em; color: #fff; }
.legal h3 { font-family: var(--font-ui); font-weight: 600; font-size: 1.05rem; margin: 1.4em 0 .35em; color: var(--gold); }
.legal p, .legal li { font-family: var(--font-ui); font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.8; color: #d6ddf4; }
.legal p + p { margin-top: .8em; }
.legal ul, .legal ol { padding-inline-start: 1.3em; margin: .5em 0; }
.legal li + li { margin-top: .4em; }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal b { color: #fff; }
.legal__biz { margin-top: 3em; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.legal__biz h2 { margin-top: 0; font-size: 1.2rem; }
.legal__table { width: 100%; border-collapse: collapse; margin: 1em 0; font-family: var(--font-ui); font-size: .95rem; }
.legal__table th, .legal__table td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: #d6ddf4; }
.legal__table th { color: var(--gold); font-weight: 600; }
.legal__table td:first-child { direction: ltr; text-align: end; font-family: ui-monospace, Consolas, monospace; font-size: .88rem; color: #fff; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 30px; font-family: var(--font-ui); font-size: .92rem; }
.legal__nav a { color: var(--sky-light); text-decoration: none; }
.legal__nav a[aria-current] { color: var(--gold); }
/* הפוטר: שורה משפטית וכפתור תנועה */
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.footer__legal nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-ui); font-size: .85rem; }
.footer__legal nav a { color: var(--muted); transition: color .3s; }
.footer__legal nav a:hover, .footer__legal nav a:focus-visible { color: var(--gold); }
.footer__motion { padding: .45em .9em; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--sky-light); font-family: var(--font-ui); font-size: .84rem; cursor: pointer; transition: border-color .3s, color .3s; }
.footer__motion:hover, .footer__motion:focus-visible { border-color: var(--gold); color: var(--gold); }
.footer__motion[aria-pressed="true"] { background: var(--gold); color: #1a1240; border-color: var(--gold); }
/* הטופס: הסכמה */
.field--check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 4px; }
.field--check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--gold); cursor: pointer; }
.field--check label { font-family: var(--font-ui); font-size: .9rem; line-height: 1.55; color: var(--sky-light); cursor: pointer; }
.field--check label a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.field--check.is-invalid label { color: #f0a08e; }
.field--check.is-invalid input { outline: 2px solid #e2725b; outline-offset: 2px; }
.social__asof { grid-column: 1 / -1; margin-top: 6px; font-family: var(--font-ui); font-size: .8rem; color: var(--muted); }
/* "פחות תנועה": הכול נעצר, והתוכן גלוי */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
html.reduce-motion [data-reveal], html.reduce-motion .kg [data-r], html.reduce-motion .k [data-r] { opacity: 1 !important; translate: 0 0 !important; transform: none !important; filter: none !important; }
html.reduce-motion .card video, html.reduce-motion .screen video { display: none !important; }

/* ============================================================
   v31 · סקשן 05 כ"כותרות של סרט": מספר ארכיטקטוני מעומעם, כותרת
   סמכותית, הסבר שנושם, ו"יוצא מזה" עם קו תלוי. משקל משתנה לפי שלב.
   ============================================================ */
.skill { padding: 34px 0 34px; padding-inline-start: 44px; min-height: 62vh; }
/* המספר: התמצאות. אור נמוך, ריווח אותיות נדיב, משקל קל */
.skill__num, .skill.is-active .skill__num, .skill.is-passed .skill__num { font-family: 'Heebo', var(--font-ui), sans-serif; font-weight: 300; font-size: clamp(3.2rem, 5.2vw, 5.4rem); line-height: .95; letter-spacing: .16em; color: rgba(255, 255, 255, .34); opacity: 1; }
.skill__num i { display: block; padding-inline-end: .16em; }
/* הכותרת: זהות */
.skill h3 { margin-top: 14px; font-size: clamp(2.1rem, 3.2vw, 3rem); line-height: 1.06; letter-spacing: -.005em; }
.skill.is-active h3, .skill.is-passed h3 { color: #fff; }
/* ההסבר: נושם */
.skill__lead, .skill p.skill__lead { margin-top: 22px; font-weight: 500; font-size: clamp(1.08rem, 1.35vw, 1.24rem); line-height: 1.65; color: rgba(255, 255, 255, .9); max-width: 36ch; }
.skill__more, .skill p.skill__more { margin-top: 12px; font-size: clamp(.95rem, 1.08vw, 1.02rem); line-height: 1.78; color: rgba(255, 255, 255, .64); max-width: 40ch; }
/* המסקנה: קו תלוי בצד, לא שורה בפסקה */
.skill__out { margin-top: 34px; padding: 2px 0 2px; padding-inline-start: 18px; border-inline-start: 1px solid rgba(255, 222, 89, .5); will-change: transform, opacity; }
.skill__out i { display: none; }
.skill__out span { margin: 0 0 8px; font-size: .7rem; letter-spacing: .22em; color: rgba(255, 255, 255, .48); opacity: 1; }
.skill__out b { font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.28; color: #fff; max-width: 28ch; }
.skill__out b em { clip-path: none; transform: none; opacity: 1; }
/* התחנה על הקו: מעט נמוך יותר, מול המספר */
.skill::before { top: calc(34px + .95em * 2.1); }
/* משקל לפי שלב */
.skill--raw { padding-top: 44px; padding-bottom: 48px; }
.skill--raw h3 { font-size: clamp(2.4rem, 3.9vw, 3.5rem); margin-top: 18px; }
.skill--raw .skill__lead, .skill--raw p.skill__lead { max-width: 30ch; margin-top: 26px; }
.skill--raw .skill__out { margin-top: 40px; }
.skill--struct h3::before { content: ''; display: block; width: 56px; height: 1px; margin-bottom: 14px; background: rgba(255, 255, 255, .18); }
.skill--struct .skill__lead, .skill--struct p.skill__lead { margin-top: 18px; }
.skill--resolve .skill__lead, .skill--resolve p.skill__lead { line-height: 1.55; margin-top: 18px; }
.skill--resolve .skill__more, .skill--resolve p.skill__more { margin-top: 8px; color: rgba(255, 255, 255, .7); }
.skill--resolve .skill__out { margin-top: 30px; border-color: var(--gold); }
.skill--resolve .skill__out b { font-size: clamp(1.5rem, 2.2vw, 2rem); text-shadow: 0 0 34px rgba(255, 222, 89, .28); }
@media (max-width: 900px) {
  .skill, .skill--raw { padding: 24px 0 26px; padding-inline-start: 30px; min-height: 0; }
  .skill__num, .skill.is-active .skill__num, .skill.is-passed .skill__num { font-size: 2.6rem; letter-spacing: .12em; }
  .skill h3, .skill--raw h3 { font-size: 1.75rem; margin-top: 8px; }
  .skill::before { top: calc(24px + .95em * 1.3); }
  .skill__out { margin-top: 22px; }
  .skill__out b, .skill--resolve .skill__out b { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .skill__num i, .skill h3 span, .skill__lead, .skill__more, .skill__out { clip-path: none !important; transform: none !important; opacity: 1 !important; } }
html.reduce-motion .skill__num i, html.reduce-motion .skill h3 span, html.reduce-motion .skill__lead, html.reduce-motion .skill__more, html.reduce-motion .skill__out { clip-path: none !important; transform: none !important; opacity: 1 !important; }

/* ============================================================
   v32 · סקשן 05, ליטוש: משפט מוביל שעומד לבד, מספר שננעל עם הכותרת,
   ו-01 באמת בודד. אותו תוכן, אותה כוריאוגרפיה.
   ============================================================ */
/* המספר ננעל עם הכותרת: גדול יותר, והכותרת נכנסת מתחת לקו הבסיס שלו */
.skill__num, .skill.is-active .skill__num, .skill.is-passed .skill__num { font-size: clamp(3.8rem, 6vw, 6.4rem); line-height: .9; letter-spacing: .14em; color: rgba(255, 255, 255, .28); margin-bottom: -.12em; }
.skill h3 { margin-top: 0; }
.skill--struct h3::before { margin-top: 10px; }
/* המשפט המוביל עומד לבד: גדול, לבן, קצר. ההשלמה מתרחקת ומנמיכה את הקול */
.skill__lead, .skill p.skill__lead { margin-top: 26px; font-size: clamp(1.18rem, 1.55vw, 1.42rem); font-weight: 500; line-height: 1.5; color: #fff; max-width: 30ch; }
.skill__more, .skill p.skill__more { margin-top: 16px; font-size: clamp(.92rem, 1.02vw, .98rem); line-height: 1.75; color: rgba(255, 255, 255, .58); max-width: 38ch; }
/* המסקנה: עוד קצת אוויר מעל, כדי שתהיה רגע ולא שורה */
.skill__out { margin-top: 38px; }
/* 01: בודד. יותר אוויר, משפט מוביל צר יותר, ההשלמה בקול נמוך עוד יותר */
.skill--raw { padding-top: 56px; padding-bottom: 60px; }
.skill--raw .skill__lead, .skill--raw p.skill__lead { max-width: 24ch; margin-top: 30px; }
.skill--raw .skill__more, .skill--raw p.skill__more { color: rgba(255, 255, 255, .5); max-width: 34ch; }
.skill--raw .skill__out { margin-top: 44px; }
/* 04–05: פתור. ההסבר צפוף מעט, המסקנה כבדה */
.skill--resolve .skill__lead, .skill--resolve p.skill__lead { max-width: 34ch; }
.skill--resolve .skill__more, .skill--resolve p.skill__more { color: rgba(255, 255, 255, .66); max-width: 42ch; margin-top: 12px; }
.skill::before { top: calc(34px + .9em * 2.6); }
.skill--raw::before { top: calc(56px + .9em * 2.6); }
@media (max-width: 900px) {
  .skill__num, .skill.is-active .skill__num, .skill.is-passed .skill__num { font-size: 3rem; margin-bottom: -.08em; }
  .skill--raw { padding-top: 28px; padding-bottom: 30px; }
  .skill::before, .skill--raw::before { top: calc(24px + .9em * 1.5); }
  .skill__lead, .skill p.skill__lead, .skill--raw .skill__lead { font-size: 1.1rem; max-width: none; margin-top: 16px; }
  .skill__more, .skill p.skill__more { max-width: none; }
}
.nowrap { white-space: nowrap; }
.skill--raw .skill__lead, .skill--raw p.skill__lead { max-width: 27ch; }

/* ============================================================
   v33 · המספר: בפונט התצוגה של האתר, בזהב, על אותה שורה עם הכותרת
   ועל קו הבסיס שלה. בלי חפיפה, בלי Heebo דק.
   ============================================================ */
.skill__num, .skill.is-active .skill__num, .skill.is-passed .skill__num { display: inline-block; vertical-align: baseline; margin: 0 0 0 0; margin-inline-end: 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.45rem, 2vw, 1.9rem); line-height: 1; letter-spacing: .02em; color: var(--gold); opacity: 1; }
.skill.is-passed .skill__num { color: var(--gold-deep); }
.skill__num i { padding-inline-end: 0; }
.skill h3 { display: inline-block; vertical-align: baseline; margin-top: 0; max-width: calc(100% - 3.2em); }
.skill--struct h3::before { display: none; }
.skill--struct .skill__lead::before { content: ''; display: block; width: 56px; height: 1px; margin-bottom: 16px; background: rgba(255, 255, 255, .18); }
.skill::before, .skill--raw::before { top: auto; }
.skill::before { top: calc(34px + 1.05em); }
.skill--raw::before { top: calc(56px + 1.05em); }
@media (max-width: 900px) {
  .skill__num, .skill.is-active .skill__num, .skill.is-passed .skill__num { font-size: 1.15rem; margin-inline-end: 10px; }
  .skill h3 { max-width: calc(100% - 2.6em); }
  .skill::before, .skill--raw::before { top: calc(24px + .9em); }
}

/* v33b · המספר על השורה הראשונה של הכותרת, לא על האחרונה: גריד עם יישור לקו הבסיס הראשון */
.skill { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; align-content: center; }
.skill__num, .skill.is-active .skill__num, .skill.is-passed .skill__num { display: block; margin-inline-end: 0; grid-column: 1; grid-row: 1; }
.skill h3 { display: block; max-width: none; grid-column: 2; grid-row: 1; }
.skill__lead, .skill p.skill__lead, .skill__more, .skill p.skill__more, .skill__out { grid-column: 1 / -1; }
@media (max-width: 900px) { .skill { column-gap: 10px; } }

/* v35 · התפריט הפתוח מעל הכול: הסרגל (z-index 100) נשאר מעל התפריט (99) בשביל כפתור הסגירה, אז כל מה שבסרגל חוץ מהכפתור מוסתר, וגם הסמל הנוסע */
body.menu-open .nav__inner > :not(.nav__burger) { visibility: hidden; }
body.menu-open .nav__burger { visibility: visible; }   /* גם אם הכפתור יושב בתוך עטיפה שהוסתרה */
body.menu-open .brandfly { visibility: hidden; }

/* ============================================================
   v37 · "הדרך עד לכאן": ציר זמן שמתקדם עם הגלילה. עטיפה גבוהה, במה
   דביקה (100vh), שנה ענקית ברקע שסופרת, תחנה אחת מוצגת, מסילה עם
   נקודה. אין transform על אב של ה-sticky.
   ============================================================ */
.years { position: relative; height: calc(100vh + 9 * 58vh); background: var(--navy-950); }
.years__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; align-items: center; background: radial-gradient(70% 60% at 85% 20%, rgba(42, 102, 224, .14), transparent 65%), var(--navy-950); }
.years__big { position: absolute; inset-inline-end: -1vw; bottom: -4vh; font-family: var(--font-display); font-weight: 700; font-size: clamp(9rem, 26vw, 30rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(201, 222, 251, .14); direction: ltr; pointer-events: none; user-select: none; font-variant-numeric: tabular-nums; }
.years__inner { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr auto; gap: clamp(14px, 2.5vh, 30px); height: calc(100vh - 2 * clamp(20px, 4vh, 48px)); padding-block: clamp(20px, 4vh, 48px); padding-top: calc(var(--nav-h) + 8px); }
.years__head { max-width: 62ch; }
.years__head .title { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.years__head .lede { margin-top: 10px; font-size: clamp(.95rem, 1.2vw, 1.08rem); }
.years__cards { position: relative; min-height: 0; }
.years__card { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(22px, 4vw, 60px); align-items: center; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s .55s; }
.years__card.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.years__card.is-past { transform: translateY(-18px); }
.years__fig { position: relative; margin: 0; justify-self: center; width: min(100%, 640px); max-height: 100%; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 1), 0 0 0 1px rgba(201, 222, 251, .12); }
.years__fig img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transform: scale(1.06); transition: transform 6s linear; }
.years__card.is-on .years__fig img { transform: scale(1); }
.years__card--portrait .years__fig { width: min(100%, 300px); }
.years__card--portrait .years__fig img { aspect-ratio: 4 / 5; }
.years__fig figcaption { position: absolute; bottom: 12px; inset-inline-start: 12px; padding: .35em .75em; border-radius: 999px; background: rgba(4, 6, 26, .78); border: 1px solid var(--gold-line); font-family: var(--font-ui); font-size: .76rem; font-weight: 600; color: var(--gold); }
.years__txt { max-width: 44ch; }
.years__y { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; color: var(--gold); direction: ltr; unicode-bidi: isolate; text-align: start; }
.years__k { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.1; color: #fff; text-wrap: balance; }
.years__p { margin-top: 12px; font-family: var(--font-body); font-size: clamp(.98rem, 1.2vw, 1.12rem); line-height: 1.75; color: #d6ddf4; }
.years__track { position: relative; height: 44px; margin-top: 4px; }
.years__rail { position: absolute; inset-inline: 0; top: 10px; height: 1px; background: rgba(201, 222, 251, .16); }
.years__rail b { position: absolute; right: 0; top: 0; height: 100%; width: 0; background: var(--gold); transition: width .25s var(--ease); }
.years__rail u { position: absolute; top: 50%; right: 0; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(255, 222, 89, .18), 0 0 24px rgba(255, 222, 89, .6); transition: right .25s var(--ease); }
.years__tick { position: absolute; top: 0; right: calc(var(--p) * 100%); translate: 50% 0; appearance: none; background: none; border: 0; padding: 18px 0 0; cursor: pointer; color: rgba(255, 255, 255, .42); font-family: var(--font-ui); font-weight: 600; font-size: .78rem; direction: ltr; transition: color .3s; }
.years__tick::before { content: ''; position: absolute; top: 7px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: rgba(201, 222, 251, .3); transition: background .3s; }
.years__tick.is-past { color: rgba(255, 255, 255, .7); }
.years__tick.is-past::before { background: var(--gold); }
.years__tick.is-on { color: var(--gold); }
.years__tick.is-on::before { background: var(--gold); box-shadow: 0 0 12px rgba(255, 222, 89, .8); }
.years__tick:hover { color: #fff; }
.years__tick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
/* פחות תנועה: רשימה */
.years--static { height: auto; padding-block: var(--section-pad); }
.years--static .years__stage { position: static; height: auto; overflow: visible; }
.years--static .years__inner { height: auto; padding-top: 0; }
.years--static .years__cards { display: grid; gap: 40px; }
.years--static .years__card { position: relative; opacity: 1; visibility: visible; transform: none; }
.years--static .years__track { display: none; }
.years--static .years__big { position: static; font-size: 3rem; color: var(--gold); -webkit-text-stroke: 0; margin-bottom: 20px; }
@media (max-width: 900px) {
  .years { height: calc(100svh + 9 * 70svh); }
  .years__stage { height: 100svh; }
  .years__inner { height: calc(100svh - 12px - 74px - env(safe-area-inset-bottom, 0px)); padding-block: 12px; padding-top: calc(var(--nav-h) + 4px); padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); gap: 10px; }   /* סרגל הטלפון התחתון מכסה 66px */
  .years__head .lede { display: none; }
  .years__big { inset-inline-end: -2vw; bottom: 8vh; font-size: 30vw; }
  .years__card, .years__card--portrait { grid-template-columns: 1fr; gap: 12px; align-content: center; }
  .years__fig { width: min(100%, 440px); }
  .years__card--portrait .years__fig { width: min(52%, 220px); }
  .years__card--portrait .years__fig img { aspect-ratio: 4 / 5; }
  .years__y { font-size: 2.2rem; }
  .years__k { font-size: 1.35rem; }
  .years__p { font-size: .95rem; line-height: 1.6; }
  .years__track { height: 40px; }
  .years__tick { font-size: .68rem; }
  .years__tick:nth-child(2n+1) span { display: none; }
}
.years__go { display: inline-block; margin-top: 14px; font-family: var(--font-ui); font-size: .88rem; color: var(--gold); border-bottom: 1px solid var(--gold-line); transition: color .3s, border-color .3s; }
.years__go:hover { color: #fff; border-color: #fff; }