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

: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;
}

html,body{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:center;
  gap:18px;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
}

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

.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;
}

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

.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)}
}