/* ============================================================================
   kit.css — מערכת העיצוב של "הפורטל" (מתן ניסתור)
   מותג נאמן למקור: שחור · כחול רויאל (#0A5AD9) · זהב · זרקורים · אור אמביינט.
   עברית RTL. משותף לדפי הנחיתה ולאבחון. דורש step-engine.js.
   הערה: שמות הטוקנים --red* נשמרו כ-aliases לכחול (תאימות לאחור), הצבע בפועל כחול.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;800;900&family=Secular+One&display=swap');

:root {
  /* —— רקע שכבתי (שחור-נייבי, לא טהור) —— */
  --bg:        #06080f;
  --bg-2:      #0b0f1e;
  --surface:   rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.08);
  --elevated:  rgba(255,255,255,.11);
  --fg:        #F4F6FB;
  --muted:     #A6AEC2;
  --dim:       #6a7088;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.18);

  /* —— מותג: כחול + זהב —— */
  --blue:      #1E6BFF;
  --blue-deep: #0A5AD9;
  --blue-300:  #7DA8FF;
  --on-blue:   #FFFFFF;
  --gold:      #F5B83D;
  --gold-bright:#FFD24A;
  --green:     #2BD66A;
  --grad-blue: linear-gradient(135deg, #3E86FF 0%, #0A5AD9 100%);
  --glow-blue: 0 12px 40px rgba(30,107,255,.45);
  --glow-rgb: 30,107,255;

  /* aliases לאחור — היו "אדום", עכשיו כחול */
  --red: var(--blue); --red-700: var(--blue-deep); --red-300: var(--blue-300);
  --on-red: #fff; --grad-red: var(--grad-blue); --glow-red: var(--glow-blue);
  --glass-blur: 16px;

  /* —— טיפוגרפיה —— */
  --font-body:    'Heebo', system-ui, sans-serif;
  --font-display: 'Heebo', system-ui, sans-serif;
  --font-impact:  'Secular One', 'Heebo', sans-serif;
  --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-base: 1.0625rem; --fs-lg: 1.2rem;
  --fs-xl: 1.5rem;   --fs-2xl: 1.95rem;  --fs-3xl: clamp(2.1rem, 6vw, 2.9rem);
  --fs-4xl: clamp(2.5rem, 8vw, 3.9rem);  --fs-hero: clamp(2.9rem, 11vw, 5.3rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;
  --sh1: 0 1px 2px rgba(0,0,0,.5); --sh2: 0 14px 40px rgba(0,0,0,.5); --sh3: 0 30px 80px rgba(0,0,0,.65);
  --ease: cubic-bezier(.16,1,.3,1); --dur: 460ms; --dur-fast: 200ms; --maxw: 580px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  direction: rtl; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6;
  color: var(--fg); -webkit-font-smoothing: antialiased; overflow: hidden; min-height: 100dvh; position: relative;
  /* זרקור עליון (cinematic) + רקע */
  background:
    radial-gradient(ellipse 85% 45% at 50% -5%, rgba(125,168,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 55%);
}
/* אור אמביינט נע — מוטיב "פורטל" דרך אור (כחול + זהב) */
body::before, body::after { content: ''; position: fixed; z-index: -2; border-radius: 50%; filter: blur(75px); pointer-events: none; will-change: transform; }
body::before { width: 72vw; height: 72vw; max-width: 640px; max-height: 640px; top: -24vh; inset-inline-start: 50%; transform: translateX(50%);
  background: radial-gradient(circle, rgba(var(--glow-rgb),.32), rgba(var(--glow-rgb),0) 70%); animation: drift1 17s var(--ease) infinite alternate; }
/* אקסנט פר-רמה — כל רמה מרגישה אחרת (data-tier על body) */
body[data-tier="2"] { --blue:#14C8A6; --blue-deep:#0E9E88; --blue-300:#74E3D2; --grad-blue:linear-gradient(135deg,#1FD9BC,#0E9E88); --glow-blue:0 12px 40px rgba(20,200,166,.42); --glow-rgb:20,200,166; }
body[data-tier="3"] { --blue:#E8B23A; --blue-deep:#C8922A; --blue-300:#F5D480; --grad-blue:linear-gradient(135deg,#F7CB52,#C8922A); --glow-blue:0 14px 44px rgba(232,178,58,.5); --glow-rgb:232,178,58; }
body::after { width: 58vw; height: 58vw; max-width: 500px; max-height: 500px; bottom: -16vh; inset-inline-end: -8vw;
  background: radial-gradient(circle, rgba(245,184,61,.16), rgba(245,184,61,0) 70%); animation: drift2 23s var(--ease) infinite alternate; }
@keyframes drift1 { from { transform: translateX(50%) translateY(0) scale(1); } to { transform: translateX(38%) translateY(7vh) scale(1.12); } }
@keyframes drift2 { from { transform: translateY(0) scale(1); } to { transform: translateY(-9vh) scale(1.16); } }

/* טבעת הפורטל — נדלקת ומסתחררת ברגע המעבר (תחושת "עוברים דרך הפורטל") */
.portal { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
/* גלקסיה אמיתית כרקע חי — screen מעלים את השחור, רק המערבולת זוהרת. מתעצמת במעברים */
.portal .galaxy { position: absolute; inset: -12%; background: url(../assets/portal-bg.jpg) center center / cover no-repeat; opacity: .36; mix-blend-mode: screen; will-change: transform, opacity; transition: opacity .7s var(--ease); animation: galaxyBreathe 26s ease-in-out infinite alternate; }
.portal .vortex-core { position: absolute; top: 44%; left: 50%; width: 138vmin; height: 138vmin; transform: translate(-50%, -50%); background: url(../assets/vortex.png) center / contain no-repeat; opacity: .22; mix-blend-mode: screen; will-change: transform, opacity; transition: opacity .8s var(--ease); animation: vortexSpin 60s linear infinite; }
@keyframes vortexSpin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
body.entering .portal .vortex-core { opacity: .46; }
body.warping .portal .vortex-core { opacity: .4; }
body.transforming .portal .vortex-core { opacity: .55; }
@keyframes galaxyBreathe { from { transform: scale(1.04) rotate(-4deg); } to { transform: scale(1.14) rotate(4deg); } }
body.entering .portal .galaxy { opacity: .5; }
body.warping .portal .galaxy { opacity: .44; }
body.transforming .portal .galaxy { opacity: .62; }
.portal > i { width: 84vmin; height: 84vmin; max-width: 720px; max-height: 720px; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0%, rgba(var(--glow-rgb), .55) 11%, transparent 27%, transparent 58%, rgba(var(--glow-rgb), .45) 73%, transparent 90%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 59%, #000 71%, transparent 79%);
  mask: radial-gradient(circle, transparent 52%, #000 59%, #000 71%, transparent 79%);
  filter: blur(9px); transform: scale(.55) rotate(0deg); will-change: transform, opacity; }
body.warping .portal > i { animation: portalWarp .72s var(--ease); }
@keyframes portalWarp { 0% { opacity: 0; transform: scale(.45) rotate(0deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.95) rotate(150deg); } }
/* כניסת פורטל דרמטית בטעינה */
body.entering .portal > i { animation: portalEnter 1.5s var(--ease) both; }
@keyframes portalEnter { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 30% { opacity: .95; } 100% { opacity: 0; transform: scale(1.85) rotate(55deg); } }
/* רגע הטרנספורמציה — הפורטל פועם בעוד התוצאה נחשפת */
body.transforming .portal > i { animation: portalPulse 2.6s var(--ease) both; }
@keyframes portalPulse { 0% { opacity: 0; transform: scale(.5) rotate(0); } 25% { opacity: .9; } 55% { opacity: .6; transform: scale(1.05) rotate(70deg); } 100% { opacity: .25; transform: scale(1.35) rotate(160deg); } }
.tf-before { color: var(--dim); font-size: var(--fs-lg); font-weight: 700; margin-top: var(--s6); }
.tf-before span { color: var(--muted); }
.tf-arrow { font-size: 40px; color: var(--blue-300); margin: var(--s3) 0; animation: tfArrow 1.2s var(--ease) infinite; }
@keyframes tfArrow { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(9px); opacity: 1; } }
.tf-label { font-weight: 700; }
.tf-after { font-size: var(--fs-3xl); line-height: 1.05; margin-top: 4px; }

/* ===== סליידר החלקה רציף (slide-control.js) ===== */
.sc { user-select: none; -webkit-user-select: none; }
.sc-val { font-family: var(--font-impact); font-size: var(--fs-2xl); color: var(--blue-300); text-align: center; min-height: 1.3em; margin-bottom: 12px; transition: color .25s var(--ease); }
.sc-track { position: relative; height: 66px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); overflow: hidden; touch-action: none; box-shadow: inset 0 2px 9px rgba(0,0,0,.4); }
.sc-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--grad-blue); opacity: .26; }
.sc-hint { position: absolute; inset: 0; display: grid; place-items: center; direction: rtl; color: var(--muted); font-weight: 700; font-size: var(--fs-sm); pointer-events: none; transition: opacity .25s var(--ease); padding-inline: 66px; }
.sc-knob { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: var(--grad-blue); box-shadow: var(--glow-blue), inset 0 1px 1px rgba(255,255,255,.6); border: 3px solid rgba(255,255,255,.92); display: grid; place-items: center; cursor: grab; touch-action: none; z-index: 3; }
.sc-knob:active { cursor: grabbing; }
.sc-arrow { color: #fff; font-weight: 900; font-size: 28px; line-height: 1; }
.sc-active .sc-knob { box-shadow: 0 0 0 10px rgba(255,255,255,.07), var(--glow-blue); }
.sc-active .sc-hint { opacity: .3; }
.sc-done .sc-fill { opacity: .6; }
.sc-done .sc-knob { animation: scPulse .5s var(--ease); }
@keyframes scPulse { 0% { transform: translateY(-50%) scale(1); } 45% { transform: translateY(-50%) scale(1.22); } 100% { transform: translateY(-50%) scale(1); } }
.sc-track::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); transform: translateX(-100%); animation: scShimmer 2.6s ease-in-out infinite; pointer-events: none; }
.sc-active .sc-track::after, .sc-done .sc-track::after { animation: none; opacity: 0; }
@keyframes scShimmer { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

/* ===== מנוע השלבים ===== */
.stage { position: fixed; inset: 0; overflow: hidden; perspective: 1100px; perspective-origin: 50% 42%; transform-style: preserve-3d; }
/* מעבר תלת-ממדי: השלב הבא עולה מעומק הפורטל, היוצא חולף קדימה דרך המשתמש */
.step { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: max(var(--s7), calc(env(safe-area-inset-top) + 60px)) var(--s5) max(var(--s6), env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: translateZ(-400px) scale(.88);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  overflow-y: auto; -webkit-overflow-scrolling: touch; backface-visibility: hidden; }
.step.is-active { opacity: 1; visibility: visible; transform: translateZ(0) scale(1); z-index: 2; will-change: transform, opacity;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.step.is-exit { opacity: 0; visibility: visible; transform: translateZ(300px) scale(1.24); z-index: 1; will-change: transform, opacity;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.step-inner { width: 100%; max-width: var(--maxw); margin: auto; text-align: center; }

.bar { position: fixed; inset-inline: 0; top: 0; height: 3px; background: rgba(255,255,255,.07); z-index: 40; }
.bar > i { display: block; height: 100%; width: 0; background: var(--grad-blue); box-shadow: 0 0 12px rgba(30,107,255,.75); border-radius: 0 var(--r-pill) var(--r-pill) 0; transition: width var(--dur) var(--ease); }

/* ===== טיפוגרפיה ===== */
.eyebrow { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .04em; color: var(--gold); }
.display { font-family: var(--font-display); font-weight: 900; line-height: 1.07; font-size: var(--fs-3xl); letter-spacing: -.015em; text-wrap: balance; }
.hero-word { font-family: var(--font-impact); font-size: var(--fs-hero); line-height: .95;
  background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(var(--glow-rgb), .4)); }
h1,h2,h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.14; text-wrap: balance; }
.lead { font-size: var(--fs-lg); color: var(--muted); line-height: 1.55; text-wrap: pretty; }
p { text-wrap: pretty; }
.muted { color: var(--muted); } .dim { color: var(--dim); } .red { color: var(--blue-300); }
.gold { color: var(--gold); } .green { color: var(--green); }
mark { background: linear-gradient(transparent 58%, rgba(30,107,255,.42) 0); color: inherit; padding: 0 .12em; }

/* ===== כפתורים ===== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 54px; padding: 0 var(--s6); border-radius: var(--r-pill); font-weight: 800; font-size: var(--fs-lg); line-height: 1; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad-blue); color: var(--on-blue); box-shadow: var(--glow-blue); }
.btn-primary:hover { box-shadow: 0 16px 50px rgba(30,107,255,.62); transform: translateY(-2px); }
.btn-gold { background: linear-gradient(135deg, #FFD24A, #F5B83D); color: #1a1300; box-shadow: 0 12px 40px rgba(245,184,61,.4); }
.btn-ghost { background: var(--surface); backdrop-filter: blur(var(--glass-blur)); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-block { display: flex; width: 100%; } .btn-lg { min-height: 62px; font-size: var(--fs-xl); }

/* ===== זכוכית: כרטיסים / אפשרויות ===== */
.card { position: relative; background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--sh2); text-align: start; }
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%); }
.card-red { background: linear-gradient(180deg, rgba(30,107,255,.15), rgba(30,107,255,.03)); border-color: rgba(30,107,255,.4); }
.card-gold { background: linear-gradient(180deg, rgba(245,184,61,.15), rgba(245,184,61,.02)); border-color: rgba(245,184,61,.38); }
.card-green { background: linear-gradient(180deg, rgba(43,214,106,.13), rgba(43,214,106,.02)); border-color: rgba(43,214,106,.34); }

.chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s4); border-radius: var(--r-pill);
  background: var(--surface); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; }

.opt { display: flex; align-items: center; gap: var(--s4); width: 100%; min-height: 62px; padding: var(--s4) var(--s5); margin-bottom: var(--s3);
  background: var(--surface); backdrop-filter: blur(var(--glass-blur)); border: 1.5px solid var(--line); border-radius: var(--r-md);
  text-align: start; font-size: var(--fs-lg); font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.opt:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-1px); }
.opt:active { transform: scale(.985); }
.opt.sel { border-color: var(--blue); background: linear-gradient(90deg, rgba(30,107,255,.2), rgba(30,107,255,.05)); box-shadow: var(--glow-blue); }
.opt .ic { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.opt .ck { margin-inline-start: auto; color: var(--blue-300); opacity: 0; font-weight: 900; }
.opt.sel .ck { opacity: 1; }

.row { display: flex; gap: var(--s4); align-items: flex-start; text-align: start; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: none; }
.row .num { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-pill); display: grid; place-items: center; font-weight: 900; font-size: var(--fs-sm); background: rgba(30,107,255,.2); color: var(--blue-300); }

/* סליידר (טווח/הזדהות) */
.slider { width: 100%; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--blue), rgba(255,255,255,.12)); outline: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; border-radius: 50%; background: var(--grad-blue); box-shadow: var(--glow-blue); cursor: pointer; border: 3px solid #fff; }
.slider::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); box-shadow: var(--glow-blue); cursor: pointer; border: 3px solid #fff; }
.slider-val { font-family: var(--font-impact); font-size: var(--fs-xl); color: var(--blue-300); }

/* ===== עזרי פריסה ===== */
.stack > * + * { margin-top: var(--s4); } .stack-lg > * + * { margin-top: var(--s5); }
.flex { display: flex; } .between { justify-content: space-between; align-items: center; } .center { align-items: center; justify-content: center; }
.wrap { flex-wrap: wrap; } .gap2 { gap: var(--s2); } .gap3 { gap: var(--s3); }
.mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)} .mt5{margin-top:var(--s5)} .mt6{margin-top:var(--s6)}
.full { width: 100%; } .tc { text-align: center; }
.pill-row { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 800; }
.badge-red { background: rgba(245,184,61,.18); color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(245,184,61,.34); }
.badge-gold { background: rgba(245,184,61,.18); color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(245,184,61,.34); }

.dots { display: inline-flex; gap: 7px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px rgba(30,107,255,.75); animation: bd 1s var(--ease) infinite; }
.dots i:nth-child(2){ animation-delay: .15s } .dots i:nth-child(3){ animation-delay: .3s }
@keyframes bd { 0%,100%{ opacity:.25; transform: translateY(0) } 50%{ opacity:1; transform: translateY(-6px) } }

.fade-up { animation: fu var(--dur) var(--ease) both; }
@keyframes fu { from{ opacity:0; transform: translateY(14px) } to{ opacity:1; transform:none } }
.reveal > * { animation: fu var(--dur) var(--ease) both; }
.reveal > *:nth-child(2){ animation-delay:.07s } .reveal > *:nth-child(3){ animation-delay:.14s }
.reveal > *:nth-child(4){ animation-delay:.21s } .reveal > *:nth-child(5){ animation-delay:.28s }
.reveal > *:nth-child(6){ animation-delay:.35s } .reveal > *:nth-child(7){ animation-delay:.42s }

@media (prefers-reduced-motion: reduce) { *, .step, .bar > i { transition-duration: 1ms !important; animation: none !important; } .step { transform: none !important; } body::before, body::after { animation: none !important; } }
@media (min-width: 768px) { :root { --maxw: 600px; } }
@media (max-width: 400px) {
  :root { --fs-base: 1rem; --fs-lg: 1.1rem; --fs-xl: 1.3rem; --fs-2xl: 1.62rem; }
  .opt { min-height: 56px; font-size: 1.05rem; padding: var(--s3) var(--s4); } .opt .ic { font-size: 1.25rem; }
  .card { padding: var(--s4); } .btn-lg { min-height: 56px; font-size: 1.15rem; }
}
@media (max-height: 760px) {
  .step { padding-top: var(--s5); padding-bottom: var(--s5); } .cta-wrap { margin-top: var(--s5); } .stack-lg > * + * { margin-top: var(--s4); }
}