/* ==========================================================================
   דף נחיתה – בדיקת זכאות להלוואה
   ========================================================================== */

:root{
  --blue:      #3b82f6;
  --blue-dark: #2563eb;
  --blue-soft: #eff6ff;
  --ink:       #0f172a;
  --ink-soft:  #475569;
  --line:      #e2e8f0;
  --bg:        #0b1220;
  --white:     #ffffff;
  --radius:    18px;
  --slide-ms:  380ms;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}

/* מובייל: בלי הבזק אפור בלחיצה ובלי השהיית 300ms */
button,input{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* min-height ולא height: הגוף חייב לגדול מעבר למסך, אחרת אין גלילה */
html,body{min-height:100%}

body{
  font-family:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* זוהר רקע */
.bg-glow{
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 78% -8%,  rgba(59,130,246,.38), transparent 62%),
    radial-gradient(720px 480px at 10% 108%, rgba(37,99,235,.26), transparent 60%);
  pointer-events:none;
}

.wrap{
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
}

/* מרכוז בטוח: עם justify-content:center התוכן שגבוה מהמסך נחתך למעלה
   ואי אפשר לגלול אליו. שוליים אוטומטיים מרכזים כשיש מקום, ומתפוגגים כשאין. */
.wrap > :first-child{margin-top:auto}
.wrap > :last-child{margin-bottom:auto}

/* ---------- הכרטיס ---------- */

.card{
  width:100%;
  max-width:520px;
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:0 24px 60px -12px rgba(2,8,23,.55), 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
}

/* ---------- פס התקדמות ---------- */

.progress{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 22px 0;
}

.progress__track{
  flex:1;
  height:7px;
  background:var(--line);
  border-radius:99px;
  overflow:hidden;
}

.progress__fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--blue-dark),var(--blue));
  border-radius:99px;
  transition:width var(--slide-ms) var(--ease);
}

.progress__label{
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft);
  min-width:38px;
  text-align:left;
  font-variant-numeric:tabular-nums;
}

.progress.is-hidden{
  opacity:0;
  pointer-events:none;
  height:0;
  padding-top:0;
  overflow:hidden;
  transition:opacity .2s linear;
}

/* ---------- הסליידר ---------- */

.slides{
  position:relative;
  height:0;                       /* נקבע ב-JS לפי השקופית הפעילה */
  transition:height var(--slide-ms) var(--ease);
}

.slide{
  position:absolute;
  inset-inline:0;
  top:0;
  padding:26px 22px 28px;
  will-change:transform,opacity;
}

/* ---------- תוכן שקופית ---------- */

.slide h1,.slide h2{
  font-size:23px;
  font-weight:900;
  line-height:1.35;
  color:var(--ink);
  letter-spacing:-.02em;
}

.slide h1{font-size:27px}

.slide p{
  margin-top:12px;
  font-size:16px;
  line-height:1.7;
  color:var(--ink-soft);
}

.slide p strong{color:var(--ink);font-weight:700}

/* הסכום הגדול במסך הפתיחה */
.slide p.lead{
  margin-top:6px;
  font-size:27px;
  font-weight:900;
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--blue-dark);
}

/* כל חלק נשאר שלם – השבירה קורית רק בין החלקים */
.slide p.lead span{white-space:nowrap}

/* שלוש נקודות המכירה */
.perks{
  list-style:none;
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.perks li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:15.5px;
  line-height:1.5;
  color:var(--ink-soft);
}

/* ביטוי מודגש לא נשבר באמצע בין שתי שורות */
.perks li strong{color:var(--ink);font-weight:700;white-space:nowrap}

.perks svg{
  flex:none;
  width:15px;
  height:15px;
  margin-top:4px;
  padding:3px;
  box-sizing:content-box;
  color:var(--white);
  background:var(--blue);
  border-radius:50%;
}

/* שורת ההרגעה מתחת לכפתור */
.note{
  margin-top:12px;
  font-size:13px;
  line-height:1.6;
  text-align:center;
  color:#94a3b8;
}

.note span{white-space:nowrap}

/* הדגשה אדומה בתוך שאלה – למשל "ללא שעבוד" */
.mark-red{
  color:#dc2626;
  font-weight:900;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  white-space:nowrap;   /* שהביטוי המודגש לא יישבר בין שתי שורות */
}

/* כוכבית שדה חובה */
.req{
  color:#ef4444;
  font-weight:700;
  margin-inline-start:3px;
}

.eyebrow{
  display:inline-block;
  margin-bottom:12px;
  padding:5px 12px;
  background:var(--blue-soft);
  color:var(--blue-dark);
  font-size:13px;
  font-weight:700;
  border-radius:99px;
}

/* ---------- כפתורי בחירה ---------- */

.options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:22px;
}

.option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:16px 18px;
  font-family:inherit;
  font-size:16.5px;
  font-weight:500;
  color:var(--ink);
  text-align:start;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s;
}

/* hover רק במכשירים עם עכבר – במגע הוא "נתקע" אחרי לחיצה */
@media (hover:hover){
  .option:hover{border-color:#bfdbfe;background:#f8fbff}
}

.option:active{transform:scale(.985)}

.option.is-selected{
  border-color:var(--blue);
  background:var(--blue-soft);
  font-weight:700;
}

.option__mark{
  flex:none;
  width:21px;
  height:21px;
  border:2px solid #cbd5e1;
  border-radius:50%;
  position:relative;
  transition:border-color .15s;
}

.option.is-selected .option__mark{
  border-color:var(--blue);
  background:var(--blue);
}

.option.is-selected .option__mark::after{
  content:'';
  position:absolute;
  inset:0;
  margin:auto;
  width:7px;
  height:7px;
  background:var(--white);
  border-radius:50%;
}

/* ---------- שדות טקסט ---------- */

.field{margin-top:22px}

/* עוטף את תיבת הקלט בלבד – הבועה נתלית ממנה */
.field__box{position:relative}

/* בועת הסבר מתחת לשדה */
.bubble{
  position:absolute;
  top:calc(100% + 8px);
  right:12px;
  z-index:3;
  padding:9px 14px;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  color:var(--white);
  background:var(--ink);
  border-radius:10px;
  white-space:nowrap;
  box-shadow:0 10px 22px -6px rgba(15,23,42,.55);
  opacity:0;
  transform:translateY(-6px) scale(.94);
  pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}

/* הזנב של הבועה */
.bubble::after{
  content:'';
  position:absolute;
  bottom:100%;
  right:20px;
  border:6px solid transparent;
  border-bottom-color:var(--ink);
}

.bubble.is-on{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* הרמז מתחלף בבועה כל עוד היא מוצגת */
.field.is-bubbling .hint{opacity:0}
.hint{transition:opacity .15s linear}

.field input{
  width:100%;
  padding:16px 18px;
  font-family:inherit;
  font-size:17px;
  color:var(--ink);
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:12px;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}

.field input::placeholder{color:#94a3b8;font-weight:400}

.field input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(59,130,246,.13);
}

.field input[data-ltr]{
  direction:ltr;
  text-align:right;
  letter-spacing:.02em;
}

.field.has-error input{border-color:#ef4444}
.field.has-error input:focus{box-shadow:0 0 0 4px rgba(239,68,68,.13)}

.hint{
  display:block;
  margin-top:8px;
  font-size:13.5px;
  color:#94a3b8;
}

/* רמז שיושב מתחת לכותרת שאלה, לא מתחת לשדה */
.hint--question{
  margin-top:10px;
  line-height:1.5;
  color:#64748b;
}

.error{
  display:none;
  margin-top:8px;
  font-size:14px;
  font-weight:500;
  color:#dc2626;
}

.field.has-error .error{display:block}
.field.has-error .hint{display:none}

/* ---------- כפתורים ---------- */

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:17px 20px;
  font-family:inherit;
  font-size:17.5px;
  font-weight:700;
  text-align:center;
  color:var(--white);
  background:var(--blue);
  border:none;
  border-radius:12px;
  cursor:pointer;
  transition:background .15s,transform .1s;
}

@media (hover:hover){
  .btn:hover{background:var(--blue-dark)}
}

.btn:active{transform:scale(.99)}
.btn[disabled]{opacity:.6;cursor:default;transform:none}

.btn--cta{
  margin-top:24px;
  padding:19px 20px;
  font-size:19px;
  box-shadow:0 10px 24px -8px rgba(59,130,246,.75);
}

.actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:22px;
}

.actions .btn{flex:1}

.back{
  flex:none;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:12px;
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .15s,color .15s;
}

@media (hover:hover){
  .back:hover{border-color:#cbd5e1;color:var(--ink)}
}

.back svg{width:19px;height:19px}

/* ---------- מסכי סיום ---------- */

.done{text-align:center;padding-top:8px}

.done__icon{
  position:relative;
  width:66px;
  height:66px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  border-radius:50%;
  animation:pop .45s var(--ease) both;
}

.done__icon svg{width:36px;height:36px;color:var(--blue);position:relative;z-index:1}

/* ---------- הווי הירוק עם הזיקוק ---------- */

.done__icon--ok{background:#ecfdf5}
.done__icon--ok svg{color:#059669}

/* טבעת שנושמת החוצה בלולאה */
.done__icon--ok::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  animation:ring-ok 2.4s ease-out infinite;
}

@keyframes ring-ok{
  0%       {box-shadow:0 0 0 0 rgba(16,185,129,.55)}
  70%,100% {box-shadow:0 0 0 17px rgba(16,185,129,0)}
}

/* ניצוצות שמתפזרים החוצה פעם אחת, כמו זיקוק */
.done__icon--ok::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  animation:sparks 1s ease-out .2s both;
  box-shadow:
      0    -48px 0 -31px #10b981,
     34px  -34px 0 -32px #34d399,
     48px    0   0 -31px #10b981,
     34px   34px 0 -32px #34d399,
      0     48px 0 -31px #10b981,
    -34px   34px 0 -32px #34d399,
    -48px    0   0 -31px #10b981,
    -34px  -34px 0 -32px #34d399;
}

@keyframes sparks{
  0%  {transform:scale(.3); opacity:0}
  25% {opacity:1}
  100%{transform:scale(1.3); opacity:0}
}

.done p{margin-top:12px}

/* מסך אי-התאמה – אפור במקום כחול, שלא ייקרא כהצלחה */
.done--stop{padding-top:6px}
.done--stop .done__icon{background:#f1f5f9;width:68px;height:68px;margin-bottom:18px}
.done--stop .done__icon svg{color:#64748b;width:32px;height:32px}
.done--stop h2{font-size:21px}

/* כפתור משני */
.btn--muted{
  color:var(--ink);
  background:#f1f5f9;
  font-size:16.5px;
}

@media (hover:hover){
  .btn--muted:hover{background:#e2e8f0}
}

/* ---------- כפתורי ההמשך במסך התודה ---------- */

.done-actions{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:20px;
}

/* כשיש שלוש הצעות – מכווצים כדי שכולן ייכנסו במסך אחד */
.done-actions:has(> :nth-child(3)) .btn{padding:14px 18px;font-size:16.5px}
.done-actions:has(> :nth-child(3)) .btn__sub{font-size:13px}

.done-actions .btn{
  text-decoration:none;
  margin-top:0;
}

/* כפתור דו-שורתי */
.btn--stack{
  flex-direction:column;
  gap:2px;
  line-height:1.3;
}

/* השורה הראשונה קטנה יותר כדי להיכנס בשורה אחת */
.btn--stack > span:first-child{
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
}

.btn__sub{
  font-size:13.5px;
  font-weight:600;
  opacity:.88;
}

/* הכפתור ה"נושם" – בא והולך כדי למשוך את העין */
.btn--pulse{
  position:relative;
  animation:breathe 2.4s ease-in-out infinite;
}

.btn--pulse::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  animation:ring 2.4s ease-out infinite;
  pointer-events:none;
}

@keyframes breathe{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.035)}
}

@keyframes ring{
  0%       {box-shadow:0 0 0 0 rgba(59,130,246,.55)}
  70%,100% {box-shadow:0 0 0 18px rgba(59,130,246,0)}
}

/* גרסה ירוקה – נבדלת מהכחול של המותג כדי לא להיבלע במסך */
.btn--green{
  background:#059669;
  box-shadow:0 10px 24px -8px rgba(5,150,105,.7);
}

@media (hover:hover){
  .btn--green:hover{background:#047857}
}

.btn--green.btn--pulse::after{animation-name:ring-green}

@keyframes ring-green{
  0%       {box-shadow:0 0 0 0 rgba(5,150,105,.55)}
  70%,100% {box-shadow:0 0 0 18px rgba(5,150,105,0)}
}

/* גרסה סגולה – הצעה שלישית, נבדלת מהכחול ומהירוק */
.btn--purple{
  background:#7c3aed;
  box-shadow:0 10px 24px -8px rgba(124,58,237,.7);
}

@media (hover:hover){
  .btn--purple:hover{background:#6d28d9}
}

.btn--purple.btn--pulse::after{animation-name:ring-purple}

@keyframes ring-purple{
  0%       {box-shadow:0 0 0 0 rgba(124,58,237,.55)}
  70%,100% {box-shadow:0 0 0 18px rgba(124,58,237,0)}
}

/* כשיש כמה בועות – לא כולן נושמות באותו רגע */
.done-actions .btn--pulse:nth-of-type(2){animation-delay:.8s}
.done-actions .btn--pulse:nth-of-type(2)::after{animation-delay:.8s}

@keyframes pop{
  from{transform:scale(.5);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* ---------- טקסט משפטי ---------- */

.legal{
  max-width:520px;
  font-size:12px;
  line-height:1.65;
  color:rgba(255,255,255,.45);
  text-align:center;
}

/* קישורי הזיהוי בתחתית – קריאים, אבל לא מושכים את העין מהטופס */
.legal a{
  color:rgba(255,255,255,.62);
  text-decoration:underline;
  text-underline-offset:2px;
}

.legal a:hover{ color:rgba(255,255,255,.9); }

.legal__sep{ margin:0 5px; opacity:.45; }

.legal a[href^="mailto:"]{
  direction:ltr; unicode-bidi:isolate;
  display:inline-block; white-space:nowrap;
}

/* ---------- ספינר ---------- */

.spinner{
  width:19px;
  height:19px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:var(--white);
  border-radius:50%;
  animation:spin .7s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- מסכים קטנים ---------- */

@media (max-width:420px){
  .wrap{padding:14px 12px calc(16px + env(safe-area-inset-bottom))}
  .slide{padding:22px 18px 24px}
  .slide h1{font-size:24px}
  .slide h2{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* גל אחיד במסך הפתיחה */
@keyframes softPulse{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.06)}
}

@keyframes pill{
  0%,100%{transform:scale(1);    box-shadow:0 0 0 0 rgba(5,150,105,.30)}
  50%    {transform:scale(1.06); box-shadow:0 0 0 7px rgba(5,150,105,0)}
}

/* ---------- מד זכאות (רק בדפים שמגדירים FORM.meter) ---------- */

.meter{
  padding:16px 22px 14px;
  border-bottom:1px solid var(--line);
  background:#fbfdff;
}

.meter__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}

.meter__label{font-size:13.5px;font-weight:700;color:var(--ink-soft)}

.meter__value{
  font-size:30px;
  font-weight:900;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  transition:color .4s var(--ease);
}

.meter__track{
  height:12px;
  margin-top:9px;
  background:var(--line);
  border-radius:99px;
  overflow:hidden;
}

.meter__fill{
  height:100%;
  width:0;
  border-radius:99px;
  transition:width .55s var(--ease),background .4s var(--ease);
}

.meter__note{
  display:block;
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  transition:color .4s var(--ease);
}

.meter__legal{display:block;margin-top:5px;font-size:11px;color:#94a3b8}

.meter__value.is-bump{animation:bump .45s var(--ease)}

@keyframes bump{
  0%,100%{transform:scale(1)}
  40%    {transform:scale(1.14)}
}

/* הציון הגדול במסך הסיום */
.slide p.score{
  margin-top:10px;
  font-size:78px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}

.slide p.score__note{
  margin-top:4px;
  font-size:16px;
  font-weight:800;
}

/* הווי הירוק גדול יותר במסך שמציג ציון */
.done:has(.score) .done__icon{
  width:82px;
  height:82px;
  margin-bottom:10px;
}

.done:has(.score) .done__icon svg{width:44px;height:44px;stroke-width:3}

/* תקלת שליחה בשלב שאין בו שדה טקסט */
.send-error{
  margin-top:12px !important;
  font-size:14px;
  font-weight:600;
  color:#dc2626;
}

/* הכפתור הראשי בכל שקופית נושם, כדי שיהיה ברור לאן ללחוץ.
   הכפתורים האפורים (חזרה / יציאה) נשארים סטטיים. */
.btn--cta,
.actions .btn:not(.btn--muted){
  position:relative;
  animation:breathe 2.4s ease-in-out infinite;
}

.btn--cta::after,
.actions .btn:not(.btn--muted)::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  animation:ring 2.4s ease-out infinite;
}

/* ---------- שורת עידוד מעל השאלות (דף הרכב) ---------- */

.topnote{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 16px;
  padding:11px 14px;
  font-size:13.5px;
  font-weight:500;
  line-height:1.45;
  color:#1d4ed8;
  background:#eff6ff;
  border:1px solid #dbeafe;
  border-radius:11px;
}

.topnote::before{
  content:'';
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2563eb;
  animation:softPulse 2.2s ease-in-out infinite;
}

.topnote.is-hidden{
  opacity:0;
  height:0;
  margin:0;
  padding:0;
  border-width:0;
  overflow:hidden;
  transition:opacity .2s linear;
}

/* ---------- בחירת תאריך ---------- */

.date-grid{
  display:grid;
  grid-template-columns:1fr 1.5fr 1fr;
  gap:9px;
}

.date-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.date-grid label>span{
  font-size:12.5px;
  font-weight:600;
  color:#94a3b8;
  padding-right:2px;
}

.date-grid select{
  width:100%;
  padding:15px 11px;
  font-family:inherit;
  font-size:16.5px;
  font-weight:500;
  color:var(--ink);
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:12px;
  outline:none;
  cursor:pointer;
  appearance:none;
  text-align:center;
  transition:border-color .15s,box-shadow .15s;
}

.date-grid select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(59,130,246,.13);
}

.field.has-error .date-grid select{border-color:#ef4444}

/* ---------- כפתורים משניים בתוך שקופית ---------- */

/* משותף לשניהם: בועה קטנה שיושבת מעל שורת הכפתורים */
.btn--skip,
.btn--retry{
  display:block;
  width:auto;
  margin:16px auto 0;
  padding:9px 18px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  line-height:1.3;
  border-radius:99px;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}

.btn--skip:active,
.btn--retry:active{transform:scale(.97)}

/* "אין עליי כעת" – אפור ושקט. בלי אנימציה, שלא יגרה ללחוץ. */
.btn--skip{
  color:#64748b;
  background:transparent;
  border:1.5px solid #cbd5e1;
}

@media (hover:hover){
  .btn--skip:hover{
    color:var(--ink);
    background:#f8fafc;
    border-color:#94a3b8;
  }
}

/* "לחצתי בטעות" – אדום ונושם, כי כאן דווקא רוצים שילחצו */
.btn--retry{
  color:#dc2626;
  background:#fef2f2;
  border:1.5px solid #fecaca;
  animation:pill 2.8s ease-in-out infinite;
}

@media (hover:hover){
  .btn--retry:hover{
    background:#fee2e2;
    border-color:#fca5a5;
  }
}

/* ---------- רצועת אמון וקופסת המספר במסך הפתיחה ---------- */

.trust{
  display:flex;
  gap:7px;
  margin-bottom:16px;
}

.trust span{
  flex:1;
  padding:9px 4px;
  font-size:11.5px;
  font-weight:800;
  line-height:1.35;
  text-align:center;
  color:#047857;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  border-radius:9px;
}

.stat{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:9px;
  margin-top:16px;
  padding:15px 13px;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:13px;
}

.stat b{
  font-size:42px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.035em;
  color:#047857;
}

.stat i{
  font-style:normal;
  font-size:15px;
  font-weight:700;
  line-height:1.35;
  color:var(--ink-soft);
}

/* ---------- הרכב כמד התקדמות, מעל הכרטיס ---------- */

/* לרוחב המסך המלא, כדי שהנסיעה תרגיש כמו כביש ולא כמו פס */
.scene{
  position:relative;
  width:100%;
  max-width:520px;      /* בדיוק כרוחב הכרטיס, גם במסך רחב */
  height:202px;
  margin:0 0 -16px;
  overflow:hidden;
  pointer-events:none;
}

.scene.is-hidden{display:none}

.scene__road{
  position:absolute;
  bottom:14px;
  left:0;
  width:100%;
  height:12px;
}

/* המיקום נקבע ב-JS לפי אחוז ההתקדמות. המעבר עצמו הוא הנסיעה. */
.scene__rig{
  position:absolute;
  bottom:0;
  left:50%;
  width:250px;
  margin-left:-125px;
  transition:transform .85s cubic-bezier(.34,.02,.28,1);
}

/* ההקפה של המעבר הראשון: יציאה משמאל, כניסה מחדש מימין */
.scene__rig.is-lap{
  transition:none;
  animation:first-lap 2s cubic-bezier(.42,0,.3,1) forwards;
}

@keyframes first-lap{
  0%     {transform:translateX(var(--from))}
  49%    {transform:translateX(calc(-1 * var(--edge)))}
  49.01% {transform:translateX(var(--edge))}
  100%   {transform:translateX(var(--to))}
}

.scene__car{
  display:block;
  width:250px;
  height:141px;
}

/* השלט מתנדנד סביב בסיס המוט, כמו על קפיץ */
.scene__car .sign{
  transform-box:view-box;
  transform-origin:171px 58px;
  animation:sign-sway 1.5s ease-in-out infinite alternate;
}

@keyframes sign-sway{
  from{transform:rotate(-6deg)}
  to  {transform:rotate(6.5deg)}
}

/* ---------- בועת הדיבור מעל הנהג ---------- */

.scene__bubble{
  position:absolute;
  bottom:100px;
  left:4px;
  max-width:236px;
  opacity:0;
  transform:translateY(6px) scale(.9);
  transform-origin:left bottom;
  transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.4,.5,1);
}

.scene__bubble.is-on{
  opacity:1;
  transform:translateY(0) scale(1);
}

.scene__bubble span{
  display:block;
  padding:8px 13px;
  font-size:12.5px;
  font-weight:800;
  line-height:1.35;
  color:var(--ink);
  background:var(--white);
  border-radius:13px;
  box-shadow:0 6px 18px -4px rgba(2,8,23,.5);
}

/* הזנב שמצביע אל הראש */
.scene__bubble::after{
  content:'';
  position:absolute;
  bottom:-5px;
  left:76px;
  width:12px;
  height:12px;
  background:var(--white);
  border-radius:0 0 3px 0;
  transform:rotate(45deg);
}

/* ---------- תנועות פנימיות ---------- */

.scene__car .car{
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:bump-drive .32s ease-in-out infinite alternate;
  animation-play-state:paused;
}

.scene.is-driving .car{animation-play-state:running}

@keyframes bump-drive{
  from{transform:translateY(0) rotate(-.4deg)}
  to  {transform:translateY(-1.6px) rotate(.4deg)}
}

/* הגלגלים מסתובבים רק כשהרכב באמת נוסע */
.scene__car .hub{
  transform-box:fill-box;
  transform-origin:center;
  animation:wheel .5s linear infinite;
  animation-play-state:paused;
}

.scene.is-driving .hub{animation-play-state:running}

@keyframes wheel{to{transform:rotate(-360deg)}}

/* הנהג ממשיך לנפנף גם בעצירה. הסיבוב סביב הכתף. */
.scene__car .arm{
  transform-box:fill-box;
  transform-origin:96% 82%;
  animation:wave-hand .5s ease-in-out infinite alternate;
}

/* קריצה קצרה בעין ימין, אחת לחמש שניות */
.scene__car .eye-wink{
  transform-box:fill-box;
  transform-origin:center;
  animation:wink 5s ease-in-out infinite;
}

@keyframes wink{
  0%, 80%, 100%{transform:scaleY(1)}
  86%          {transform:scaleY(.1)}
  92%          {transform:scaleY(1)}
}

/* מעיף את השטרות, ומיד שולף חבילה חדשה מתוך הרכב */
.scene__car .cash{
  transform-box:fill-box;
  transform-origin:center;
  animation:cash-toss 10s ease-in-out infinite;
}

@keyframes cash-toss{
  0%, 58% {transform:translate(0,0) rotate(0);opacity:1}
  70%     {transform:translate(-30px,-34px) rotate(-170deg);opacity:0}
  73%     {transform:translate(10px,12px) rotate(25deg);opacity:0}
  86%,100%{transform:translate(0,0) rotate(0);opacity:1}
}

.scene__car .hair{
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:hair-bounce .5s ease-in-out infinite alternate;
}

@keyframes hair-bounce{
  from{transform:rotate(-3deg) translateX(0)}
  to  {transform:rotate(3.5deg) translateX(-1px)}
}

/* עשן שיוצא מהאגזוז ברציפות */
.scene__car .smoke circle{
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
  animation:puff 1.6s ease-out infinite;
}

.scene__car .smoke circle:nth-child(2){animation-delay:.4s}
.scene__car .smoke circle:nth-child(3){animation-delay:.8s}
.scene__car .smoke circle:nth-child(4){animation-delay:1.2s}

@keyframes puff{
  0%  {transform:translate(0,0) scale(.35);opacity:.5}
  60% {opacity:.28}
  100%{transform:translate(30px,-20px) scale(2.4);opacity:0}
}

/* שטרות שמרחפים באוויר לאורך הכביש, ללא קשר לרכב */
.scene__air{position:absolute;inset:0}

.note-bill{
  position:absolute;
  bottom:18px;
  left:var(--x);
  display:flex;
  align-items:center;
  justify-content:center;
  width:23px;
  height:14px;
  font-size:11px;
  font-weight:900;
  line-height:1;
  color:#047857;
  border-radius:2.5px;
  background:#34d399;
  border:1.4px solid #047857;
  opacity:0;
  animation:float-bill 6s ease-in-out infinite;
  animation-delay:var(--d);
}

@keyframes float-bill{
  0%  {transform:translate(0,10px) rotate(-8deg);opacity:0}
  15% {opacity:.9}
  70% {opacity:.5}
  100%{transform:translate(-34px,-64px) rotate(150deg);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .scene__rig{transition:none}
  .scene__car .car,
  .scene__car .hub,
  .scene__car .arm,
  .scene__car .hair,
  .scene__car .smoke circle,
  .scene__car .sign,
  .note-bill{animation:none}
  .note-bill{opacity:.5}
}

/* ---------- חגיגת הסיום ---------- */

/* מטח השטרות מוסתר לגמרי עד שהפנייה נשלחת */
.scene__car .burst g{opacity:0}

.scene.is-finish .burst g{
  transform-box:fill-box;
  transform-origin:center;
  animation:burst-out 1.5s cubic-bezier(.18,.7,.3,1) forwards;
}

.scene.is-finish .burst g:nth-child(1){--bx:-58px;--by:-56px;--br:-140deg;animation-delay:.05s}
.scene.is-finish .burst g:nth-child(2){--bx:-26px;--by:-72px;--br:200deg; animation-delay:.13s}
.scene.is-finish .burst g:nth-child(3){--bx:  8px;--by:-78px;--br:-260deg;animation-delay:.02s}
.scene.is-finish .burst g:nth-child(4){--bx: 42px;--by:-66px;--br:170deg; animation-delay:.2s}
.scene.is-finish .burst g:nth-child(5){--bx: 70px;--by:-44px;--br:-190deg;animation-delay:.1s}
.scene.is-finish .burst g:nth-child(6){--bx:-72px;--by:-32px;--br:230deg; animation-delay:.26s}
.scene.is-finish .burst g:nth-child(7){--bx: -4px;--by:-50px;--br:-300deg;animation-delay:.34s}

@keyframes burst-out{
  0%  {transform:translate(0,0) rotate(0) scale(.5);opacity:0}
  12% {opacity:1}
  70% {opacity:1}
  100%{transform:translate(var(--bx),var(--by)) rotate(var(--br)) scale(1);opacity:0}
}

/* הרכב עוצר, מתרומם קדימה ומתיישב */
.scene.is-finish .car{
  animation:finish-hop 1.1s cubic-bezier(.3,1.5,.5,1) .1s 2;
  animation-play-state:running;
}

@keyframes finish-hop{
  0%  {transform:translateY(0) rotate(0)}
  30% {transform:translateY(-7px) rotate(-5deg)}
  60% {transform:translateY(0) rotate(0)}
  100%{transform:translateY(0) rotate(0)}
}

/* הנהג מנופף בהתלהבות */
.scene.is-finish .arm{animation-duration:.22s}
.scene.is-finish .hair{animation-duration:.2s}


/* ---------- מסכים נמוכים: מכווצים כדי שהמסך הראשון ייכנס בלי גלילה ---------- */

@media (max-height:780px){
  .wrap{gap:10px;padding-top:12px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}

  .scene{height:120px;margin-bottom:-10px}
  .scene__rig{width:186px;margin-left:-93px}
  .scene__car{width:186px;height:105px}
  .scene__bubble{bottom:76px;left:2px;max-width:180px}
  .scene__bubble span{padding:6px 11px;font-size:11.5px}
  .scene__bubble::after{left:56px}
  .scene__road{bottom:10px}

  .slide{padding:18px 17px 20px}
  .progress{padding:12px 17px 0}

  .trust{margin-bottom:11px;gap:6px}
  .trust span{padding:6px 3px;font-size:10.5px}

  .slide h1{font-size:23px}
  .slide h2{font-size:20px}
  .slide p{margin-top:8px;font-size:15px}

  .stat{margin-top:11px;padding:10px}
  .stat b{font-size:31px}
  .stat i{font-size:13.5px}

  .perks{margin-top:12px;gap:8px}
  .perks li{font-size:14.5px}

  .options{gap:8px;margin-top:16px}
  .option{padding:13px 16px;font-size:15.5px}
  .hint--question{margin-top:8px;font-size:12.5px}
  .field__box + .hint{font-size:12.5px}

  .btn{padding:15px 18px;font-size:16.5px}
  .note{margin-top:9px;font-size:12px}
  .legal{font-size:11px;line-height:1.5}
  .topnote{margin-bottom:12px;padding:9px 12px;font-size:12.5px}
}