/* ─────────────────────────────────────────
   DNA הלמידה של הילד™ — Teacher4U
   style.css  v2
───────────────────────────────────────── */

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

:root{
  --navy:   #0f2044;
  --blue:   #1a3a6b;
  --purple: #7c3aed;
  --cyan:   #06b6d4;
  --bg:     #f0f4f8;
  --white:  #ffffff;
  --text:   #1e293b;
  --muted:  #64748b;
  --border: #e2e8f0;
  --hero:   linear-gradient(155deg,#0b1d3a 0%,#1a3a6b 50%,#2d1b69 100%);
  --cta:    linear-gradient(135deg,#06b6d4,#7c3aed);
  --r:      18px;
  --r-sm:   10px;
  --sh:     0 4px 20px rgba(0,0,0,.08);
  --sh-lg:  0 8px 40px rgba(0,0,0,.14);
}

html{scroll-behavior:smooth}
body{
  font-family:'Heebo',-apple-system,sans-serif;
  direction:rtl;color:var(--text);
  background:var(--bg);min-height:100vh;overflow-x:hidden;
}

/* ── Screens ── */
#app{min-height:100vh}
.screen{display:none;min-height:100vh;animation:fadeUp .4s ease}
.screen.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ── Shared ── */
.brand-logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.3px}
.brand-logo span{color:#a78bfa}
.hidden{display:none!important}
.arr{font-size:18px}

/* ── CTA Button ── */
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--cta);color:#fff;border:none;border-radius:50px;
  padding:15px 34px;font-size:17px;font-weight:700;cursor:pointer;
  width:100%;max-width:380px;box-shadow:0 4px 24px rgba(124,58,237,.4);
  transition:transform .2s,box-shadow .2s;font-family:inherit;text-decoration:none;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(124,58,237,.5)}
.btn-cta:active{transform:translateY(0)}

.btn-back{
  background:none;border:none;color:var(--muted);font-size:14px;
  font-family:inherit;cursor:pointer;padding:8px 0;
  display:inline-flex;align-items:center;gap:5px;
  text-decoration:underline;text-underline-offset:3px;
}
.btn-back:hover{color:var(--text)}

/* ═══════════════════════════════
   SCREEN 1 — Landing
═══════════════════════════════ */
#screen-landing{background:var(--hero);color:#fff}

.landing-header{
  padding:20px 24px;display:flex;align-items:center;justify-content:center;
}

.landing-hero{
  max-width:640px;margin:0 auto;
  padding:12px 24px 56px;text-align:center;
}

.dna-icon{
  font-size:64px;margin-bottom:14px;
  filter:drop-shadow(0 0 18px rgba(6,182,212,.45));
  animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.landing-badge{
  display:inline-block;
  background:rgba(124,58,237,.28);border:1px solid rgba(124,58,237,.45);
  color:#c4b5fd;border-radius:20px;padding:5px 16px;
  font-size:13px;font-weight:600;margin-bottom:18px;letter-spacing:.3px;
}

.landing-title{
  font-size:clamp(26px,7vw,42px);font-weight:900;line-height:1.2;
  margin-bottom:16px;
  background:linear-gradient(135deg,#fff,#c4b5fd);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.landing-subtitle{
  font-size:17px;line-height:1.7;color:rgba(255,255,255,.8);margin-bottom:22px;
}
.landing-subtitle strong{color:#67e8f9}

.landing-intro{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:18px 22px;margin-bottom:26px;text-align:right;
}
.landing-intro p{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:8px}
.landing-quote{font-size:17px!important;color:rgba(255,255,255,.95)!important;font-weight:500;line-height:1.6;margin-bottom:0!important}
.landing-quote strong{color:#67e8f9}

.landing-features{
  display:flex;flex-direction:column;gap:9px;margin-bottom:30px;text-align:right;
}
.feature-item{
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.06);border-radius:var(--r-sm);
  padding:10px 14px;font-size:14px;color:rgba(255,255,255,.84);
}
.fi{font-size:18px;flex-shrink:0}

.landing-note{margin-top:13px;font-size:12px;color:rgba(255,255,255,.45)}

/* ═══════════════════════════════
   SCREEN 2 — Child Info
═══════════════════════════════ */
.screen-inner{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px 16px;background:var(--bg);
}

.step-pill{
  font-size:12px;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;
}

.card{
  background:var(--white);border-radius:var(--r);
  padding:32px 28px;box-shadow:var(--sh-lg);
  width:100%;max-width:480px;text-align:center;
}
.card-icon{font-size:46px;margin-bottom:14px}
.card h2{font-size:20px;font-weight:800;color:var(--text);margin-bottom:22px;line-height:1.4}

.form-group{text-align:right;margin-bottom:16px}
.form-label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:5px}
.form-input,.form-select{
  width:100%;padding:13px 15px;border:2px solid var(--border);border-radius:var(--r-sm);
  font-size:15px;font-family:inherit;color:var(--text);
  background:var(--white);outline:none;transition:border-color .2s;text-align:right;
}
.form-input:focus,.form-select:focus{border-color:var(--purple)}
.form-note{font-size:12px;color:var(--muted);margin-bottom:20px;text-align:right}
.form-error{color:#dc2626;font-size:13px;margin-top:10px;font-weight:500}
.opt-label{color:var(--muted);font-weight:400;font-size:12px}
.privacy-note{font-size:11px;color:var(--muted);margin-top:14px}

/* ═══════════════════════════════
   SCREEN 3 — Quiz
═══════════════════════════════ */
#screen-quiz{background:var(--bg)}

.quiz-header{
  background:var(--white);padding:14px 20px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);position:sticky;top:0;z-index:100;
}
.quiz-brand{font-size:16px;font-weight:800;color:var(--blue);text-align:center;margin-bottom:10px}
.quiz-brand span{color:var(--purple)}

.quiz-progress-bar{height:7px;background:var(--border);border-radius:10px;overflow:hidden;margin-bottom:7px}
.quiz-progress-fill{height:100%;background:var(--cta);border-radius:10px;transition:width .45s ease;width:0%}
.quiz-progress-text{font-size:12px;color:var(--muted);text-align:center;font-weight:600}

.quiz-body{padding:22px 16px;max-width:600px;margin:0 auto}

.question-card{
  background:var(--white);border-radius:var(--r);
  padding:26px 22px;box-shadow:var(--sh);margin-bottom:18px;
  animation:slideIn .3s ease;
}
@keyframes slideIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}

.question-number{
  font-size:11px;font-weight:700;color:var(--purple);
  margin-bottom:9px;text-transform:uppercase;letter-spacing:.5px;
}
.question-text{font-size:19px;font-weight:700;color:var(--text);line-height:1.5;margin-bottom:22px}

.answers-grid{display:flex;flex-direction:column;gap:10px}

.answer-btn{
  width:100%;padding:14px 17px;border:2px solid var(--border);border-radius:var(--r-sm);
  background:var(--white);font-size:15px;font-family:inherit;color:var(--text);
  text-align:right;cursor:pointer;transition:all .17s;line-height:1.45;font-weight:500;
}
.answer-btn:hover{border-color:var(--purple);background:rgba(124,58,237,.04);transform:translateX(-3px)}
.answer-btn.selected{border-color:var(--purple);background:rgba(124,58,237,.08);color:var(--purple);font-weight:700}

/* ═══════════════════════════════
   SCREEN 4 — Processing
═══════════════════════════════ */
#screen-processing{
  background:var(--hero);display:flex;
  align-items:center;justify-content:center;
}

.processing-inner{text-align:center;padding:40px 24px;color:#fff}

/* DNA helix */
.dna-helix{
  display:flex;gap:14px;justify-content:center;
  align-items:flex-end;height:110px;margin-bottom:30px;
}
.helix-col{display:flex;flex-direction:column;gap:8px}
.h-dot{
  width:16px;height:16px;border-radius:50%;background:#06b6d4;
  animation:helixBounce 1.4s calc(var(--i)*0.14s) infinite ease-in-out;
}
.h-dot.alt{background:#a78bfa;animation-name:helixBounceAlt}
@keyframes helixBounce{
  0%,100%{transform:translateX(0) scale(.8);opacity:.5}
  50%{transform:translateX(18px) scale(1.15);opacity:1}
}
@keyframes helixBounceAlt{
  0%,100%{transform:translateX(0) scale(.8);opacity:.5}
  50%{transform:translateX(-18px) scale(1.15);opacity:1}
}

.processing-title{font-size:22px;font-weight:800;margin-bottom:10px;line-height:1.3}
.processing-sub{font-size:16px;color:rgba(255,255,255,.65);transition:opacity .35s}

/* ═══════════════════════════════
   SCREEN 5 — Result
═══════════════════════════════ */
#screen-result{background:var(--bg)}

/* ═══════════════════════════════
   SCREEN 5 — Result
═══════════════════════════════ */
#screen-result{background:var(--bg)}

.result-hero{
  padding:30px 20px 28px;text-align:center;color:#fff;
  background:var(--hero);/* overridden by JS per identity */
}
.result-brand{font-size:16px;font-weight:800;margin-bottom:8px}
.result-brand span{color:#a78bfa}
.result-badge-sm{
  display:inline-block;background:rgba(124,58,237,.28);
  border:1px solid rgba(124,58,237,.45);color:#c4b5fd;
  border-radius:20px;padding:4px 14px;font-size:12px;font-weight:600;margin-bottom:14px;
}
.result-title{
  font-size:clamp(22px,5vw,30px);font-weight:900;margin-bottom:14px;
  background:linear-gradient(135deg,#fff,#c4b5fd);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* Identity illustration */
.profile-illus{
  width:96px;height:96px;border-radius:50%;
  background:rgba(255,255,255,.15);border:3px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:44px;margin:0 auto 12px;
}
.profile-name{font-size:24px;font-weight:900;color:#fff;margin-bottom:6px}
.profile-type-label{
  font-size:11px;color:rgba(255,255,255,.55);
  text-transform:uppercase;letter-spacing:.8px;font-weight:600;
}

.result-body{max-width:640px;margin:0 auto;padding:22px 16px 56px}

/* DNA Strip */
.dna-strip-label{
  font-size:13px;font-weight:700;color:var(--muted);
  text-align:center;margin-bottom:12px;letter-spacing:.3px;
}
.dna-strip{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
  margin-bottom:20px;scrollbar-width:none;
}
.dna-strip::-webkit-scrollbar{display:none}
.dna-layer-card{
  flex:0 0 auto;width:108px;background:var(--white);
  border-radius:var(--r-sm);padding:12px 8px;
  box-shadow:var(--sh);text-align:center;
}
.dlc-emoji{font-size:22px;margin-bottom:5px}
.dlc-label{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.dlc-value{font-size:13px;font-weight:800;color:var(--purple)}

/* Section label */
.r-section-label{
  font-size:12px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;
}
.r-section-label .cn{color:var(--purple)}

/* Description card */
.result-desc-card{
  background:var(--white);border-radius:var(--r);padding:22px;
  box-shadow:var(--sh);margin-bottom:14px;
  font-size:16px;line-height:1.8;color:var(--text);
}

/* Content cards */
.r-card{background:var(--white);border-radius:var(--r);padding:20px;margin-bottom:12px;box-shadow:var(--sh)}
.r-card-purple{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border:1px solid #ddd6fe}
.r-card-blue{background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe}
.r-card-green{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid #bbf7d0}

.r-card-title{
  display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:700;color:var(--text);margin-bottom:13px;
}
.r-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.r-list li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:14px;color:var(--text);line-height:1.5;
}
.r-list li::before{content:'◆';color:var(--purple);font-size:8px;margin-top:5px;flex-shrink:0}

/* Encouraging message */
.encouraging-card{
  background:linear-gradient(135deg,#1a3a6b,#2d1b69);
  border-radius:var(--r);padding:24px 22px;margin-bottom:16px;
  text-align:center;position:relative;overflow:hidden;
}
.enc-quote{
  font-size:60px;line-height:.8;color:rgba(255,255,255,.12);
  font-family:Georgia,serif;margin-bottom:8px;
}
.enc-text{font-size:17px;font-weight:600;color:#fff;line-height:1.65}
.enc-text strong{color:#67e8f9}

.cn{color:var(--purple);font-weight:700}

/* PDF CTA */
.pdf-cta{
  background:linear-gradient(135deg,#1a3a6b,#2d1b69);
  border-radius:var(--r);padding:26px 22px;
  text-align:center;color:#fff;margin-top:22px;
}
.pdf-cta h3{font-size:18px;font-weight:800;margin-bottom:10px;line-height:1.4}
.pdf-cta p{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:12px}
.pdf-list{list-style:none;text-align:right;margin-bottom:22px;display:flex;flex-direction:column;gap:8px}
.pdf-list li{font-size:14px;color:rgba(255,255,255,.85);display:flex;align-items:flex-start;gap:8px}
.pdf-list li::before{content:'✓';color:#67e8f9;font-weight:700;flex-shrink:0}

/* ═══════════════════════════════
   SCREEN 7 — Thank You
═══════════════════════════════ */
#screen-thankyou{background:var(--hero);color:#fff}
.ty-inner{max-width:600px;margin:0 auto;padding:48px 20px;text-align:center}
.ty-icon{font-size:64px;margin-bottom:18px;animation:bounceIn .6s ease}
@keyframes bounceIn{0%{transform:scale(0)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.ty-inner h1{
  font-size:clamp(20px,5vw,28px);font-weight:900;margin-bottom:26px;
  background:linear-gradient(135deg,#fff,#c4b5fd);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ty-info{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:22px;margin-bottom:24px;text-align:right;
}
.ty-info p{font-size:14px;color:rgba(255,255,255,.65);margin-bottom:10px}
.ty-quote{font-size:16px!important;color:rgba(255,255,255,.92)!important;line-height:1.65}
.ty-quote strong{color:#67e8f9}
.ty-benefits{margin-top:14px}
.ty-benefits h3{font-size:14px;font-weight:700;color:rgba(255,255,255,.9);margin-bottom:9px}
.ty-benefits ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.ty-benefits li{font-size:13px;color:rgba(255,255,255,.75);display:flex;align-items:flex-start;gap:7px}
.ty-benefits li::before{content:'✓';color:#67e8f9;font-weight:700;flex-shrink:0}

.booking-box{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r);padding:26px 22px;margin-bottom:28px;text-align:center;
}
.booking-box h3{font-size:18px;font-weight:800;margin-bottom:10px;color:#fff}
.booking-box p{font-size:14px;color:rgba(255,255,255,.7);line-height:1.65;margin-bottom:18px}

.ty-brand{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.ty-brand p{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px}

/* ═══════════════════════════════
   Responsive
═══════════════════════════════ */
@media(max-width:480px){
  .card{padding:24px 18px}
  .quiz-body{padding:14px 10px}
  .question-text{font-size:17px}
  .answer-btn{font-size:14px;padding:13px 14px}
  .result-body{padding:18px 10px 44px}
  .dims-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:640px){
  .landing-features{display:grid;grid-template-columns:repeat(2,1fr)}
}