/* ============ ניצוצות — שפה עיצובית ============ */
:root {
  /* פלטת הצבעים מהציור: שמפניה, בז', אוקרה, זהב, אלמוג ואדום יין */
  --champagne: #F2E2BE;
  --beige: #C9AA88;
  --ochre: #A8733A;
  --gold: #C9A15B;
  --coral: #B5573F;
  --wine: #8B2F2C;

  --bg: #F6EEE1;
  --bg-2: #EDE0CB;
  --paper: #FBF6EE;
  --wash: #F1E5CF;
  --ink: #2E1C14;
  --ink-2: #6E5544;
  --ink-3: #A08A74;
  --line: rgba(46, 28, 20, .14);
  --line-2: rgba(46, 28, 20, .07);
  --spark: var(--wine);
  --spark-2: var(--coral);
  --night: #2A1610;
  --night-2: #3A2018;
  --bone-on-night: #F4E7D2;
  --danger: #B3261E;
  --cat-active: #8B2F2C;

  --serif: "Suez One", "Frank Ruhl Libre", Georgia, serif; /* הגופן הקרוב לאותיות המכחול של הלוגו */
  --sans: "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --W: 480px;
  --H: 320px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
  overflow-x: hidden;
}
body::after { /* גרעיניות עדינה על כל הדף */
  content: "";
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { fill: currentColor; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 10px; right: 10px; z-index: 200; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: 10px; transform: translateY(-160%); transition: transform .2s; text-decoration: none; }
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; }

.wrap { width: min(1180px, 100% - var(--gutter) * 2); margin-inline: auto; }

/* ============ כפתורים ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 26px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 600 15px/1 var(--sans); letter-spacing: .01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-spark {
  color: #fff;
  background: linear-gradient(135deg, var(--spark), var(--spark-2));
  box-shadow: 0 12px 30px -12px rgba(139, 47, 44, .75), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-spark:hover { box-shadow: 0 16px 36px -12px rgba(139, 47, 44, .85), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: #000; }
.btn-ghost { background: rgba(255, 255, 255, .55); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: #fff; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ============ ניווט ============ */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; }
.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 6px; padding-inline-start: 16px;
  border-radius: 999px;
  background: rgba(251, 246, 238, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 0 rgba(46, 28, 20, .04), 0 12px 32px -18px rgba(80, 45, 20, .35);
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 2px 8px -2px rgba(80, 45, 20, .35); }
.brand-word { height: 24px; width: auto; }
.hero-title img { display: block; height: min(15vh, 10.5vw, 150px); width: auto; filter: drop-shadow(0 4px 22px rgba(255, 243, 214, .95)); }
.nav-links { display: flex; gap: 2px; margin-inline: 14px 8px; }
.nav-links a { padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--ink-2); text-decoration: none; transition: background .2s, color .2s; }
.nav-links a:hover { background: rgba(46, 28, 20, .06); color: var(--ink); }
.nav-cta { position: relative; }
.nav-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-inline-start: 8px;
  border-radius: 99px; background: linear-gradient(135deg, var(--gold), var(--spark)); color: #fff; font-size: 12px; font-weight: 700;
}
.nav-count[hidden] { display: none; }
.nav-count.pop { animation: pop .5s var(--ease); }
@keyframes pop { 40% { transform: scale(1.35); } }

/* ============ קטלוג החלומות — במה תלת מימדית ============ */
.catalog { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.stage-glow {
  position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background: /* כמו בציור: זוהר שמפניה במרכז, הילה חמה סביבו, שוליים בז' */
    radial-gradient(28% 30% at 50% 50%, rgba(255, 243, 214, .95), rgba(255, 243, 214, 0) 70%),
    radial-gradient(48% 46% at 50% 50%, rgba(224, 159, 108, .24), rgba(181, 87, 63, .10) 50%, transparent 76%),
    radial-gradient(120% 95% at 50% 50%, transparent 52%, rgba(185, 149, 112, .30) 100%);
}
.sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.scene { position: absolute; inset: 0; z-index: 2; perspective: 1400px; }

.thread { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; z-index: 1; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--line) 15%, var(--line) 85%, transparent); }
.thread::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 18%, var(--cat-active) 42%, var(--cat-active) 58%, transparent 82%); }
.thread-spark { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--cat-active); box-shadow: 0 0 14px 4px var(--cat-active); animation: run 3.6s linear infinite; }
@keyframes run { from { top: -2%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { top: 102%; opacity: 0; } }

/* כרטיס חלום */
.card {
  position: absolute; left: 50%; top: 50%;
  width: 100px; height: 100px; padding: 0; border: 0;
  border-radius: var(--cr, 14px); overflow: hidden;
  background: #E6D3B5; cursor: pointer;
  opacity: 0; will-change: transform, opacity;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 2px rgba(60, 35, 15, .10), 0 14px 34px -14px rgba(80, 45, 20, .45), 0 40px 70px -40px rgba(80, 45, 20, .45);
  -webkit-tap-highlight-color: transparent;
  --k: 0;
}
.card::after { /* מסגרת אור פנימית */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.card-media { position: absolute; inset: 0; }
.card-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: sepia(.32) saturate(.82) contrast(1.05) brightness(1.02);
  transform: scale(1.06); transform-origin: 50% 60%;
  user-select: none; -webkit-user-drag: none;
}
.card-media::after { /* גוון אחיד מהפלטה: אוקרה */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(176, 122, 66, .16); mix-blend-mode: color;
}
.card-grade { /* אורות בגוון שמפניה, צללים חומים חמים */
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(160deg, rgba(255, 226, 170, .42), rgba(255, 226, 170, 0) 50%, rgba(90, 45, 25, .40));
}
/* ציורים (images/*.webp) כבר בפלטה הנכונה: בלי פילטר צילום */
.card.is-art .card-media img, .chip.is-art img { filter: none; }
.card.is-art .card-media::after, .card.is-art .card-grade { display: none; }
.card.is-art .card-grain { opacity: .1; }
.card-grain { position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.card-shade { position: absolute; inset: auto 0 0 0; height: 60%; pointer-events: none; background: linear-gradient(to top, rgba(40, 22, 12, .62), rgba(40, 22, 12, 0)); opacity: var(--k); }
.card-num {
  position: absolute; top: 14px; right: 16px;
  font: 500 14px/1 var(--serif); letter-spacing: .08em; color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  opacity: calc(var(--k) * 1.6 - .6);
}
.card-cat {
  position: absolute; bottom: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 99px;
  background: rgba(40, 22, 12, .42); color: #fff;
  font: 500 12.5px/1 var(--sans);
  opacity: calc((var(--k) - .55) * 2.4);
}
.card-cat i { width: 7px; height: 7px; border-radius: 50%; background: var(--cat); box-shadow: 0 0 10px 1px var(--cat); }
.card-mine {
  position: absolute; top: 9px; left: 9px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--spark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  transform: scale(0); transition: transform .4s var(--ease);
}
.card-mine svg { width: 14px; height: 14px; }
.card.is-mine .card-mine { transform: scale(1); }

/* טקסט הפתיחה במרכז הטבעת */
.hero-copy {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px; pointer-events: none;
}
.hero-copy > * { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.stage.is-ready .hero-copy > * { opacity: 1; transform: none; }
.stage.is-ready .hc-2 { transition-delay: .08s; }
.stage.is-ready .hc-3 { transition-delay: .16s; }
.stage.is-ready .hc-4 { transition-delay: .24s; }
.stage.is-ready .hc-5 { transition-delay: .32s; }
.stage.is-ready .hc-6 { transition-delay: .40s; }
.hero-copy-in { display: contents; }

.kicker { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); }
.kicker svg { width: 12px; height: 12px; color: var(--spark); }
.hero-title { /* האותיות של הלוגו עצמו */
  margin-top: 16px; line-height: 0;
}
.hero-sub { margin-top: 10px; font: 400 clamp(19px, 2.2vw, 26px)/1.3 var(--serif); color: var(--ink); }
em { font-style: normal; }
.hero-sub em, .sec-title em, .method-line em, .gate-title em {
  background: linear-gradient(120deg, var(--wine) 15%, var(--coral) 60%, var(--ochre) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-text { margin-top: 14px; max-width: 400px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.hero-actions { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; pointer-events: auto; }
.hero-trust { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); }
.hero-trust svg { width: 15px; height: 15px; }

/* פאנל מידע על החלום הפעיל */
.dream-info {
  position: absolute; z-index: 4; top: 50%;
  right: clamp(24px, 5vw, 88px);
  left: calc(50% + var(--W) / 2 + clamp(32px, 4.5vw, 72px));
  transform: translateY(-50%);
  opacity: 0; visibility: hidden; text-align: right;
}
.stage.show-info .dream-info { visibility: visible; }
.di-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }
.di-n { font: 500 15px/1 var(--serif); color: var(--cat-active); letter-spacing: .08em; }
.di-sep { width: 22px; height: 1px; background: currentColor; opacity: .5; }
.di-cat { color: var(--cat-active); font-weight: 500; }
.di-title { margin: 14px 0 12px; font: 500 clamp(24px, 2.5vw, 38px)/1.15 var(--serif); text-wrap: balance; max-width: 15ch; }
.di-desc { max-width: 34ch; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.di-mine {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 18px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .6);
  font: 500 14px/1 var(--sans);
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.di-mine svg { width: 14px; height: 14px; color: var(--spark); transition: transform .5s var(--ease); }
.di-mine:hover { background: #fff; transform: translateY(-1px); }
.di-mine[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.di-mine[aria-pressed="true"] svg { color: var(--gold); transform: rotate(90deg) scale(1.15); }
.dream-info.swap .di-meta, .dream-info.swap .di-title, .dream-info.swap .di-desc { animation: swapIn .6s var(--ease) both; }
.dream-info.swap .di-title { animation-delay: .04s; }
.dream-info.swap .di-desc { animation-delay: .08s; }
@keyframes swapIn { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

/* אינדקס החלומות */
.dream-index {
  position: absolute; z-index: 4; top: 50%; left: clamp(20px, 3.5vw, 64px);
  transform: translateY(-50%); width: 190px;
  opacity: 0; visibility: hidden;
}
.stage.show-info .dream-index { visibility: visible; }
.di-group + .di-group { margin-top: 14px; }
.di-group h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 7px; font: 500 11.5px/1.4 var(--sans); letter-spacing: .06em; color: var(--ink-3); }
.di-group h4 i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.di-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 3px 0; border: 0; background: none; cursor: pointer; text-align: right;
  font: 400 13px/1.45 var(--sans); color: var(--ink-3);
  transition: color .3s;
}
.di-item::before { content: ""; flex: none; width: 10px; height: 1px; background: currentColor; opacity: .5; transition: width .4s var(--ease), opacity .3s, background .3s; }
.di-item:hover { color: var(--ink-2); }
.di-item.is-active { color: var(--ink); font-weight: 500; }
.di-item.is-active::before { width: 22px; opacity: 1; background: var(--c); }
.di-item.is-mine::after { content: "✦"; color: var(--spark); font-size: 10px; }

.dream-count { display: none; }

.ring-tip {
  position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none;
  padding: 7px 12px; border-radius: 99px; white-space: nowrap;
  background: var(--ink); color: var(--bg); font: 500 13px/1 var(--sans);
  opacity: 0; transform: translate(-50%, 6px); transition: opacity .2s, transform .25s var(--ease);
}
.ring-tip.on { opacity: 1; transform: translate(-50%, 0); }

.scroll-hint {
  position: absolute; z-index: 4; bottom: max(28px, env(safe-area-inset-bottom)); right: clamp(20px, 3.5vw, 56px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .08em; color: var(--ink-3); pointer-events: none;
}
.scroll-hint span { writing-mode: vertical-rl; letter-spacing: .12em; }
.scroll-hint i { position: relative; width: 1px; height: 38px; background: var(--line); overflow: hidden; }
.scroll-hint i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--spark); animation: drip 1.8s var(--ease) infinite; }
@keyframes drip { to { top: 100%; } }

/* ============ אזורים כלליים ============ */
.section { position: relative; padding: clamp(88px, 12vw, 168px) 0; }
.sec-head { max-width: 760px; }
.sec-title { margin-top: 18px; font: 500 clamp(34px, 5.2vw, 64px)/1.12 var(--serif); letter-spacing: .005em; text-wrap: balance; }
.sec-lead { margin-top: 22px; max-width: 60ch; font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.75; color: var(--ink-2); }
.sec-lead strong { color: var(--ink); font-weight: 600; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* השיטה */
.method { background: linear-gradient(to bottom, var(--bg), var(--wash) 55%, var(--bg)); }
.layers { margin-top: clamp(48px, 7vw, 88px); display: grid; grid-template-columns: 1fr 1fr 1.55fr; gap: 16px; }
.layer {
  position: relative; overflow: hidden;
  padding: 30px 28px 32px; border-radius: 24px;
  background: rgba(255, 255, 255, .55); border: 1px solid var(--line-2);
  min-height: 250px; display: flex; flex-direction: column;
}
.layer:nth-child(2) { transition-delay: .08s; }
.layer:nth-child(3) { transition-delay: .16s; }
.layer-n { font: 500 14px/1 var(--serif); letter-spacing: .1em; color: var(--ink-3); }
.layer h3 { margin-top: auto; padding-top: 48px; font: 500 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); }
.layer p { margin-top: 10px; color: var(--ink-2); line-height: 1.65; }
.layer-key { background: var(--night); color: var(--bone-on-night); border-color: transparent; box-shadow: 0 30px 60px -30px rgba(60, 30, 10, .6); }
.layer-key .layer-n { color: var(--gold); }
.layer-key h3 { font-size: clamp(30px, 3.2vw, 44px); background: linear-gradient(120deg, #FFF1D6, var(--gold) 55%, var(--coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.layer-key p { color: rgba(244, 231, 210, .72); max-width: 40ch; }
.layer-glow { position: absolute; width: 420px; height: 420px; top: -180px; left: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 161, 91, .35), rgba(139, 47, 44, .12) 50%, transparent); pointer-events: none; animation: breathe 6s ease-in-out infinite; }
.layer-spark { position: absolute; top: 26px; left: 28px; width: 34px; height: 34px; fill: url(#sparkGrad); animation: twinkle 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12) translate(10px, 14px); opacity: .8; } }
@keyframes twinkle { 50% { transform: rotate(45deg) scale(.82); opacity: .7; } }
.method-line { margin-top: clamp(56px, 8vw, 100px); text-align: center; font: 400 clamp(24px, 3.2vw, 40px)/1.35 var(--serif); }
.method { padding-bottom: clamp(64px, 8vw, 110px); }
.how { padding-top: clamp(64px, 8vw, 110px); }

/* איך זה עובד */
.steps { list-style: none; margin: clamp(48px, 7vw, 84px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.steps::before { content: ""; position: absolute; top: 23px; right: 24px; left: 24px; height: 1px; background: linear-gradient(to left, var(--spark), var(--gold) 50%, var(--line)); opacity: .55; }
.step { position: relative; }
.step:nth-child(2) { transition-delay: .08s; }
.step:nth-child(3) { transition-delay: .16s; }
.step:nth-child(4) { transition-delay: .24s; }
.step-n {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
  font: 500 19px/1 var(--serif); color: var(--spark);
  box-shadow: 0 0 0 6px var(--bg);
}
.step h3 { margin-top: 22px; font: 500 22px/1.25 var(--serif); }
.step p { margin-top: 8px; color: var(--ink-2); line-height: 1.65; font-size: 15.5px; }

.compare { margin-top: clamp(64px, 9vw, 112px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmp-col { padding: 32px 30px; border-radius: 24px; }
.cmp-col h3 { display: flex; align-items: center; gap: 10px; font: 500 24px/1.2 var(--serif); }
.cmp-col h3 svg { width: 22px; height: 22px; }
.cmp-col ul { list-style: none; margin: 22px 0 0; padding: 0; }
.cmp-col li { position: relative; padding: 13px 30px 13px 0; border-top: 1px solid var(--line-2); line-height: 1.5; }
.cmp-col li::before { position: absolute; right: 2px; top: 13px; font-size: 14px; }
.cmp-them { color: var(--ink-3); border: 1px dashed var(--line); }
.cmp-them li::before { content: "—"; }
.cmp-us { background: var(--paper); border: 1px solid rgba(139, 47, 44, .25); box-shadow: 0 30px 60px -36px rgba(139, 47, 44, .45); }
.cmp-us li::before { content: "✦"; color: var(--spark); }

/* פרטיות */
.privacy { background: var(--night); color: var(--bone-on-night); overflow: hidden; }
.privacy::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 78% 40%, rgba(201, 161, 91, .16), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(176, 122, 66, .12), transparent 70%); }
.privacy .kicker { color: rgba(244, 231, 210, .7); }
.privacy .sec-lead { color: rgba(244, 231, 210, .72); }
.privacy .sec-title em { background-image: linear-gradient(120deg, #FFF1D6, var(--gold) 55%, var(--coral)); }
.privacy-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.privacy-visual { position: relative; aspect-ratio: 1; width: min(100%, 460px); justify-self: center; display: grid; place-items: center; }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(244, 231, 210, .12); animation: spin 26s linear infinite; }
.orbit i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 16px 4px rgba(201, 161, 91, .55); }
.o1 { inset: 0; }
.o2 { inset: 14%; animation-duration: 18s; animation-direction: reverse; }
.o2 i { background: var(--champagne); box-shadow: 0 0 16px 4px rgba(242, 226, 190, .5); }
.o3 { inset: 28%; animation-duration: 12s; border-style: dashed; }
.o3 i { width: 6px; height: 6px; margin-left: -3px; top: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.vault { /* הלוגו: לב בין ידיים, כלומר הפרטים שמורים אצלנו */
  position: relative; width: 50%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(244, 231, 210, .14), 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 90px -6px rgba(240, 190, 120, .45);
}
.vault-mark { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.vault-lock {
  position: absolute; bottom: 4%; left: 4%; width: 26%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--night-2); border: 1px solid rgba(201, 161, 91, .45); color: var(--gold);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7);
}
.vault-lock svg { width: 46%; height: 46%; }
.privacy-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.privacy-list li { display: flex; gap: 14px; align-items: flex-start; }
.privacy-list li:nth-child(2) { transition-delay: .06s; }
.privacy-list li:nth-child(3) { transition-delay: .12s; }
.privacy-list li:nth-child(4) { transition-delay: .18s; }
.privacy-list svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--gold); background: rgba(201, 161, 91, .1); border: 1px solid rgba(201, 161, 91, .2); }
.privacy-list h3 { font: 500 19px/1.3 var(--serif); }
.privacy-list p { margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: rgba(244, 231, 210, .65); }

/* הצטרפות */
.join { background: radial-gradient(60% 50% at 80% 10%, rgba(201, 161, 91, .14), transparent 70%), radial-gradient(50% 40% at 10% 90%, rgba(242, 226, 190, .35), transparent 70%), var(--bg); }
.join-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.join-copy { position: sticky; top: 120px; }
.join-points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
.join-points li { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.join-points svg { width: 18px; height: 18px; color: var(--spark); flex: none; }
.join-points li:last-child svg { width: 14px; height: 14px; margin-inline: 2px; }

.join-form {
  position: relative; padding: clamp(22px, 3.4vw, 40px); border-radius: 28px;
  background: var(--paper); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 rgba(46, 28, 20, .04), 0 40px 80px -40px rgba(80, 45, 20, .35);
}
.jf-head { margin-bottom: 28px; }
.jf-tabs { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.jf-tabs li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); padding-inline-end: 12px; transition: color .3s; }
.jf-tabs li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); font: 500 12px/1 var(--sans); transition: all .3s; }
.jf-tabs li.is-on { color: var(--ink); font-weight: 500; }
.jf-tabs li.is-on span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.jf-tabs li.is-done span { background: var(--spark); color: #fff; border-color: var(--spark); }
.jf-progress { margin-top: 16px; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.jf-bar { display: block; height: 100%; width: 33.33%; border-radius: inherit; background: linear-gradient(to left, var(--spark), var(--gold)); transition: width .6s var(--ease); margin-inline-start: 0; }

.jf-step { border: 0; padding: 0; margin: 0; min-width: 0; display: none; }
.jf-step.is-active { display: block; animation: stepIn .55s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(-18px); } }
.jf-legend { padding: 0; margin-bottom: 18px; font: 500 26px/1.2 var(--serif); }

.field { display: block; margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.fl { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.fl b, .drop b, .check b { color: var(--spark); font-weight: 600; }
.field input:not([type=radio]):not([type=checkbox]):not([type=file]), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 13px;
  border: 1px solid var(--line); background: #fff; font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%236E5544' stroke-width='1.8' stroke-linecap='round' d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: left 12px center; padding-left: 38px; }
.field textarea { resize: vertical; line-height: 1.6; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--spark); box-shadow: 0 0 0 4px rgba(139, 47, 44, .14); }
.field input::placeholder, .field textarea::placeholder { color: #BDA88F; }
.field-err { display: block; min-height: 0; font-style: normal; font-size: 13px; color: var(--danger); margin-top: 6px; }
.field-err:empty { display: none; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select, .field.is-invalid .drop, .field.is-invalid .seg { border-color: var(--danger); }
.field-hint { margin: -4px 0 16px; font-size: 14px; color: var(--ink-3); }
.field-hint.with-ic { display: flex; align-items: center; gap: 8px; margin-top: -6px; }
.field-hint svg { width: 16px; height: 16px; flex: none; }

.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line-2); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; padding: 10px 26px; border-radius: 99px; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: all .25s; }
.seg input:checked + span { background: var(--ink); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--spark); outline-offset: 2px; }

.chips { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.chip-group h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--sans); letter-spacing: .04em; color: var(--ink-3); }
.chip-group h4 i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; font-size: 14px; line-height: 1.2; text-align: right;
  transition: all .25s var(--ease);
}
.chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; filter: sepia(.32) saturate(.82); }
.chip:hover { border-color: rgba(46, 28, 20, .3); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip[aria-pressed="true"]::after { content: "✦"; color: var(--gold); font-size: 11px; }

.drop { position: relative; border-radius: 18px; border: 1.5px dashed rgba(46, 28, 20, .2); background: var(--bg); transition: border-color .2s, background .2s; }
.drop.is-over { border-color: var(--spark); background: rgba(139, 47, 44, .06); }
.drop-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 18px; text-align: center; cursor: pointer; }
.drop-empty span:last-child { font-size: 13.5px; color: var(--ink-3); }
.drop-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; background: #fff; border: 1px solid var(--line-2); color: var(--spark); box-shadow: 0 8px 20px -12px rgba(80, 45, 20, .4); }
.drop-ic svg { width: 24px; height: 24px; }
.drop-full { display: flex; align-items: center; gap: 18px; padding: 14px; }
.drop-full[hidden] { display: none; }
.drop-full img { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .4); }
.drop-name { display: block; font-size: 14.5px; word-break: break-all; }
.drop-change { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--spark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--spark); }
.check a { color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.jf-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; }
.jf-nav .btn-ink, .jf-nav .btn-spark { margin-inline-start: auto; }
.jf-error { margin-top: 14px; color: var(--danger); font-size: 14px; }
.jf-error:empty { display: none; }
.jf-submit.is-loading { position: relative; color: transparent; }
.jf-submit.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin .8s linear infinite; }

.jf-done { text-align: center; padding: 30px 10px 20px; animation: stepIn .6s var(--ease); }
.jf-done:focus { outline: none; }
.done-spark { width: 84px; height: 84px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 161, 91, .28), transparent); }
.done-spark svg { width: 46px; height: 46px; animation: twinkle 2.6s ease-in-out infinite; }
.done-title { font: 500 34px/1.2 var(--serif); margin-bottom: 10px; }
.jf-done p { color: var(--ink-2); max-width: 42ch; margin-inline: auto; line-height: 1.7; }
.done-demo { margin-top: 16px !important; padding: 10px 14px; border-radius: 12px; background: var(--bg); font-size: 13.5px; color: var(--ink-3) !important; }

/* פוטר */
.footer { padding: 56px 0 40px; border-top: 1px solid var(--line-2); }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.footer .brand-mark { width: 44px; height: 44px; }
.footer .brand-word { height: 30px; }
.footer-tag { color: var(--ink-3); font-family: var(--serif); font-size: 17px; }
.footer-links { display: flex; gap: 20px; margin-inline-start: auto; }
.footer-links a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.footer-links a:hover { color: var(--ink); }
.footer-small { width: 100%; font-size: 12.5px; color: var(--ink-3); }

.toast {
  position: fixed; z-index: 120; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  padding: 12px 20px; border-radius: 99px; background: var(--ink); color: var(--bg);
  font-size: 14.5px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease);
  max-width: calc(100% - 32px); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============ שער פתיחה ============ */
/* שתי דלתות בתלת מימד. סגורות: טקסט מימין, ציור הלוגו כקנבס תלת־ממדי משמאל.
   בלחיצה על "התחל" הדלתות נפתחות פנימה, המצלמה מתקרבת והאור מציף. */
html.gate-open, html.gate-open body { overflow: hidden; }
.gate-skip .gate { display: none; }
.gate { position: fixed; inset: 0; z-index: 150; overflow: hidden; }
.gate.is-leaving { pointer-events: none; }

.gate-light { /* האור שמאחורי הדלתות */
  position: fixed; inset: 0;
  background: radial-gradient(45% 65% at 50% 50%, #FFF6E2, rgba(255, 240, 210, .94) 45%, rgba(246, 238, 225, .8) 80%);
  transition: opacity .8s var(--ease) 1s;
}
.gate.is-leaving .gate-light { opacity: 0; }

.gate-stage { position: absolute; inset: 0; perspective: 1700px; }
.gate-scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--srx, 0deg)) rotateY(var(--sry, 0deg)); }
.gate-rig { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(.2, .7, .1, 1), opacity 1.1s var(--ease); }
.gate:not(.is-in) .gate-rig { transform: translateZ(-460px) rotateX(9deg); opacity: 0; }
.gate.is-leaving .gate-rig { transform: translateZ(190px); transition: transform 1.6s cubic-bezier(.6, 0, .2, 1) .2s; }

/* דלתות */
.gate-door { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; transition: transform 1.35s cubic-bezier(.66, 0, .22, 1) .22s; }
.gate-door--r { right: 0; transform-origin: 100% 50%; }
.gate-door--l { left: 0; transform-origin: 0 50%; }
.gate.is-leaving .gate-door--r { transform: rotateY(-104deg); }
.gate.is-leaving .gate-door--l { transform: rotateY(104deg); }
.door-face {
  position: absolute; inset: 0; display: grid; place-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--bg);
}
.gate-door--r .door-face {
  padding: clamp(28px, 5vh, 56px) clamp(28px, 5vw, 88px);
  background:
    radial-gradient(60% 70% at 0% 50%, rgba(255, 243, 214, .95), rgba(255, 243, 214, 0) 70%),
    radial-gradient(140% 110% at 100% 50%, rgba(185, 149, 112, .3), transparent 55%), var(--bg);
}
.gate-door--l .door-face {
  background:
    radial-gradient(60% 70% at 100% 50%, rgba(255, 243, 214, .95), rgba(255, 243, 214, 0) 70%),
    radial-gradient(55% 55% at 50% 50%, rgba(224, 159, 108, .16), transparent 75%),
    radial-gradient(140% 110% at 0% 50%, rgba(185, 149, 112, .3), transparent 55%), var(--bg);
}
.door-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.door-back { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(to right, #CDB08A, #B48E64); }
.door-edge { position: absolute; top: 0; bottom: 0; width: 18px; background: linear-gradient(to right, #8C6A2F, #E8C77E 45%, #A8733A); }
.gate-door--r .door-edge { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.gate-door--l .door-edge { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }

.gate-seam { /* קו האור בין הדלתות */
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px;
  transform: translateZ(1px);
  background: linear-gradient(to bottom, transparent, rgba(201, 161, 91, .9) 18%, #FFF4DC 50%, rgba(201, 161, 91, .9) 82%, transparent);
  box-shadow: 0 0 26px 8px rgba(240, 195, 125, .55), 0 0 80px 20px rgba(255, 236, 196, .35);
  animation: seamPulse 3.2s ease-in-out infinite;
  transition: opacity .7s ease .35s;
}
@keyframes seamPulse { 50% { box-shadow: 0 0 40px 14px rgba(240, 195, 125, .7), 0 0 120px 30px rgba(255, 236, 196, .45); } }
.gate.is-leaving .gate-seam { opacity: 0; animation: none; box-shadow: 0 0 140px 70px rgba(255, 236, 196, .95); }

/* הטקסט */
.gate-copy { position: relative; z-index: 1; width: 100%; max-width: 560px; transition: opacity .35s ease, transform .5s ease; }
.gate.is-leaving .gate-copy { opacity: 0; transform: translateY(-14px); }
.gate-title { margin-top: 16px; font: 400 clamp(32px, min(4vw, 6.4vh), 58px)/1.12 var(--serif); }
.gate-text { margin-top: 18px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.75; color: var(--ink-2); }
.gate-method {
  margin-top: 20px; padding: 15px 20px; padding-inline-start: 22px;
  border-radius: 18px; border-inline-start: 3px solid var(--gold);
  background: rgba(251, 246, 238, .75); box-shadow: 0 18px 40px -30px rgba(80, 45, 20, .5);
}
.gate-method h3 { font: 400 20px/1.3 var(--serif); color: var(--wine); }
.gate-method p { margin-top: 6px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.gate-steps { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gate-steps li { display: inline-flex; align-items: center; gap: 9px; padding: 6px 7px; padding-inline-end: 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .55); font-size: 13.5px; color: var(--ink-2); }
.gate-steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--wine); color: var(--bg); font: 400 13px/1 var(--serif); }
.gate-actions { margin-top: 28px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.gate-start { height: 58px; padding: 0 40px; font-size: 18px; gap: 12px; animation: startGlow 2.8s ease-in-out infinite; }
.gate-start svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.gate-start:hover svg { transform: translateX(-4px); }
@keyframes startGlow { 50% { box-shadow: 0 14px 40px -10px rgba(139, 47, 44, .75), 0 0 0 8px rgba(201, 161, 91, .15), inset 0 1px 0 rgba(255, 255, 255, .28); } }
.gate-join { font-size: 15px; color: var(--ink-2); text-underline-offset: 4px; }
.gate-join:hover { color: var(--ink); }
.gate-trust { margin-top: 16px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.gate-trust svg { width: 15px; height: 15px; }

/* ציור הלוגו כקנבס תלת־ממדי */
.art3d { --aw: min(540px, 36vw, 64vh); --d: 20px; position: relative; perspective: 1100px; transition: opacity 1.2s var(--ease) .15s; }
.gate:not(.is-in) .art3d { opacity: 0; }
.gate.is-leaving .art3d { opacity: 0; transition: opacity .55s var(--ease) .12s; }
/* השקיפות על העוטף ולא על הקנבס עצמו, כדי שהקנבס יישאר תלת־ממדי */
.art3d-spin { transform-style: preserve-3d; transition: transform 1.7s cubic-bezier(.2, .7, .1, 1) .15s; }
.gate:not(.is-in) .art3d-spin { transform: translateZ(-240px) rotateY(-38deg) rotateX(8deg); }
.gate.is-leaving .art3d-spin { transform: translateZ(260px) rotateY(16deg); transition: transform .9s var(--ease); }
.art3d-obj { position: relative; width: var(--aw); aspect-ratio: 1200 / 896; transform-style: preserve-3d; transform: rotateX(var(--arx, 0deg)) rotateY(var(--ary, 0deg)); }
.art3d-front {
  position: absolute; inset: 0; overflow: hidden; border-radius: 3px;
  transform: translateZ(calc(var(--d) / 2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.art3d-front img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art3d-glare {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(60% 70% at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%);
}
.art3d-side { position: absolute; background: linear-gradient(to bottom, #F1E6D1, #D8C4A2); }
.s-r { top: 0; height: 100%; width: var(--d); left: calc(100% - var(--d) / 2); transform: rotateY(90deg); filter: brightness(.8); }
.s-l { top: 0; height: 100%; width: var(--d); left: calc(var(--d) / -2); transform: rotateY(-90deg); filter: brightness(.94); }
.s-t { left: 0; width: 100%; height: var(--d); top: calc(var(--d) / -2); transform: rotateX(90deg); }
.s-b { left: 0; width: 100%; height: var(--d); top: calc(100% - var(--d) / 2); transform: rotateX(-90deg); filter: brightness(.72); }
.art3d-shadow {
  position: absolute; left: 10%; right: 10%; bottom: -10%; height: 13%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(80, 45, 20, .4), transparent);
  filter: blur(12px); transform: translateX(calc(var(--mx, 0) * -22px));
  transition: opacity .6s;
}
.gate:not(.is-in) .art3d-shadow, .gate.is-leaving .art3d-shadow { opacity: 0; }

/* עלי זהב ועלי כותרת שמרחפים בעומק סביב הקנבס */
.art3d-flecks { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.fleck {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: calc(var(--s) * .62); border-radius: 60% 0 60% 0;
  background: linear-gradient(135deg, #FBE7B0, #C9A15B 55%, #8C6A2F);
  box-shadow: 0 0 10px rgba(240, 200, 120, .5);
  transform: translate3d(-50%, -50%, var(--z)) rotate(var(--r));
  animation: fleckFloat var(--t) ease-in-out infinite alternate;
  transition: transform 1.2s cubic-bezier(.2, .7, .1, 1), opacity .9s ease;
}
.fleck.petal { background: linear-gradient(135deg, #EBA99A, #B5573F 55%, #8B2F2C); box-shadow: none; }
@keyframes fleckFloat { from { translate: 0 7px; } to { translate: 0 -9px; } }
.gate.is-leaving .fleck { transform: translate3d(calc(-50% + var(--bx)), calc(-50% + var(--by)), calc(var(--z) + 420px)) rotate(calc(var(--r) + 140deg)); opacity: 0; }

/* כניסה מדורגת של הטקסט */
.gate .gi { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.gate.is-in .gi { opacity: 1; transform: none; }
.gate.is-in .g-1 { transition-delay: .35s; }
.gate.is-in .g-2 { transition-delay: .43s; }
.gate.is-in .g-3 { transition-delay: .51s; }
.gate.is-in .g-4 { transition-delay: .59s; }
.gate.is-in .g-5 { transition-delay: .67s; }
.gate.is-in .g-6 { transition-delay: .75s; }
.gate.is-in .g-7 { transition-delay: .83s; }

@media (max-width: 900px) {
  .gate { overflow-y: auto; overscroll-behavior: contain; }
  .gate-light { background: radial-gradient(80% 38% at 50% 20%, rgba(255, 243, 214, .95), transparent 70%), radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(185, 149, 112, .3)), var(--bg); }
  .gate-stage, .gate-scene, .gate-rig { position: relative; inset: auto; min-height: 100%; }
  .gate-rig { display: flex; flex-direction: column; }
  .gate-door { position: relative; top: auto; bottom: auto; width: 100%; transform-style: flat; transition: transform 1.1s cubic-bezier(.66, 0, .22, 1) .1s, opacity .8s ease .3s; }
  .gate-door--l { order: -1; }
  .gate.is-leaving .gate-door { opacity: 0; transition: transform 1.2s cubic-bezier(.5, 0, .2, 1), opacity .7s ease .45s; }
  .gate.is-leaving .gate-door--r { transform: rotateY(-62deg); }
  .gate.is-leaving .gate-door--l { transform: rotateY(62deg); }
  /* בטלפון התוכן מסתובב יחד עם הלוח ורק אז נעלם */
  .gate.is-leaving .gate-copy { opacity: 1; transform: none; }
  .gate.is-leaving .art3d { opacity: 1; }
  .door-face { position: relative; inset: auto; background: transparent !important; backface-visibility: visible; }
  .gate-door--l .door-face { padding: 30px 0 14px; }
  .gate-door--r .door-face { display: block; padding: 0 var(--gutter); }
  .door-face::after, .door-back, .door-edge, .gate-seam { display: none; }
  .art3d { --aw: min(74vw, 330px); --d: 14px; }
  .gate-copy { max-width: none; }
  .gate-title { font-size: clamp(30px, 8.4vw, 44px); margin-top: 12px; }
  .gate-text { font-size: 15px; margin-top: 12px; }
  .gate-method { margin-top: 16px; padding: 14px 16px; }
  .gate-steps { margin-top: 16px; }
  .gate-steps li { font-size: 13px; }
  .gate-actions {
    position: sticky; bottom: 0; z-index: 2;
    margin: 18px calc(var(--gutter) * -1) 0; padding: 22px var(--gutter) max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(246, 238, 225, 0), var(--bg) 34%);
  }
  .gate-start { flex: 1; }
  .gate-trust { margin: 0 0 18px; }
}

/* ============ רספונסיביות ============ */
@media (max-height: 760px) and (min-width: 760px) {
  .hero-text { display: none; }
  .hero-actions { margin-top: 20px; }
}
@media (max-width: 1079px), (max-height: 600px) {
  .dream-index { display: none; }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .layers { grid-template-columns: 1fr 1fr; }
  .layer-key { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .steps::before { display: none; }
  .privacy-grid { grid-template-columns: 1fr; }
  .privacy-visual { width: min(70%, 340px); }
  .join-grid { grid-template-columns: 1fr; }
  .join-copy { position: static; }
}
@media (max-width: 759px) {
  .nav { top: 10px; }
  .nav-pill { padding-inline-start: 14px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-word { height: 21px; }
  .nav-pill { gap: 14px; }

  .hero-title { margin-top: 12px; }
  .hero-title img { height: min(15.5vw, 9vh); }
  .hero-sub { font-size: 19px; }
  .hero-text { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; width: min(210px, 100%); gap: 8px; margin-top: 22px; }
  .hero-actions .btn { height: 46px; }
  .hero-trust { margin-top: 12px; font-size: 12px; }
  .kicker { font-size: 12px; }
  .scroll-hint span { display: none; }

  .dream-info {
    top: auto; transform: none;
    left: var(--gutter); right: var(--gutter);
    bottom: max(20px, env(safe-area-inset-bottom));
    padding-top: 22px;
  }
  .dream-info::before { content: ""; position: absolute; inset: -40px calc(var(--gutter) * -1) -30px; z-index: -1; background: linear-gradient(to top, var(--bg) 62%, rgba(246, 238, 225, 0)); }
  .di-title { font-size: 25px; margin: 10px 0 8px; max-width: none; }
  .di-desc { font-size: 14.5px; line-height: 1.6; max-width: none; }
  .di-mine { margin-top: 14px; height: 40px; }
  .dream-count { display: block; direction: ltr; position: absolute; z-index: 4; top: 78px; left: var(--gutter); font: 500 13px/1 var(--serif); letter-spacing: .1em; color: var(--ink-3); opacity: 0; }
  .thread { mix-blend-mode: multiply; }
  .dc-n { color: var(--cat-active); }

  .layers { grid-template-columns: 1fr; }
  .layer { min-height: 0; }
  .layer h3 { padding-top: 28px; }
  .steps { grid-template-columns: 1fr; row-gap: 32px; padding-right: 0; }
  .step { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; }
  .step h3 { margin-top: 8px; }
  .step p { grid-column: 2; }
  .compare { grid-template-columns: 1fr; }
  .cmp-col { padding: 26px 22px; }
  .privacy-list { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .jf-tabs li { font-size: 0; padding: 0; gap: 0; }
  .jf-tabs li span { font-size: 12px; }
  .jf-tabs li.is-on { font-size: 13.5px; gap: 8px; padding-inline-end: 8px; }
  .footer-links { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .gate .gi, .gate .gate-rig, .gate .art3d, .gate .art3d-spin { opacity: 1 !important; transform: none !important; }
}