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

/* ===== Tokens ===== */
:root {
  --white:  #FFFFFF;
  --g50:    #F9FAFB;
  --g100:   #F3F4F6;
  --g200:   #E5E7EB;
  --g300:   #D1D5DB;
  --g400:   #9CA3AF;
  --g500:   #6B7280;
  --g600:   #4B5563;
  --g700:   #374151;
  --g800:   #1F2937;
  --g900:   #111827;

  --red:    #E87171;
  --green:  #4ABA6E;

  --font: 'DM Sans', -apple-system, system-ui, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --r:    14px;
  --r-lg: 24px;
  --r-full: 100px;
}

/* ===== Base ===== */
html {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  height:100%;
  overscroll-behavior:none;
}
body {
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  color:var(--g900);
  background:var(--white);
  overflow:hidden;
  height:100%;
  overscroll-behavior:none;
}
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ===== Ambient ===== */
.ambient { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ambient__orb { position:absolute; border-radius:50%; filter:blur(120px); opacity:.4; }
.ambient__orb--1 { width:520px; height:520px; background:#E0E7F1; top:-18%; right:-12%; animation:d1 24s ease-in-out infinite alternate; }
.ambient__orb--2 { width:420px; height:420px; background:#E2EDE0; bottom:-10%; left:-15%; animation:d2 30s ease-in-out infinite alternate; }
.ambient__orb--3 { width:360px; height:360px; background:#EDE0E7; top:38%; left:52%; animation:d3 22s ease-in-out infinite alternate; }
@keyframes d1 { to { transform:translate(-40px,50px) scale(1.04); } }
@keyframes d2 { to { transform:translate(35px,-40px) scale(1.06); } }
@keyframes d3 { to { transform:translate(-25px,-30px) scale(1.03); } }

/* ===== Hero ===== */
.hero {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  height:100vh; height:100dvh;
  padding:3rem 1.5rem;
  text-align:center;
  overflow:hidden;
}
.hero__inner { max-width:460px; }
.hero__tag {
  font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--g400);
  margin-bottom:2.5rem;
}
.hero__title {
  font-size:clamp(3.2rem, 8vw, 5rem);
  font-weight:300;
  letter-spacing:-.04em;
  line-height:.95;
  color:var(--g900);
  margin-bottom:1.75rem;
}
.hero__desc {
  font-size:16px; font-weight:400;
  color:var(--g500);
  line-height:1.65;
  max-width:340px;
  margin:0 auto 3rem;
}
.hero__cta {
  display:inline-flex; align-items:center;
  font-family:var(--font);
  font-size:14px; font-weight:500;
  letter-spacing:.03em;
  color:var(--white);
  background:var(--g900);
  border:none;
  border-radius:var(--r-full);
  padding:16px 42px;
  cursor:pointer;
  transition: transform .15s var(--ease), box-shadow .4s var(--ease), opacity .15s;
}
.hero__cta:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(17,24,39,.16);
}
.hero__cta:active { transform:translateY(0) scale(.97); }
.hero__cta:focus-visible { outline:2px solid var(--g400); outline-offset:4px; }
.hero__cta:disabled { opacity:.6; pointer-events:none; }

.hero__footer {
  position:absolute; bottom:0; left:0; right:0;
  text-align:center; padding:1.25rem;
  font-size:11px; color:var(--g300); letter-spacing:.03em;
}
.hero__footer-sep { margin:0 6px; }
.hero__footer-link {
  color:var(--g400);
  text-decoration:none;
  transition:color .15s;
}
.hero__footer-link:hover { color:var(--g500); }

/* ===== Overlay ===== */
.overlay {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:rgba(255,255,255,0);
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), -webkit-backdrop-filter .4s var(--ease);
}
.overlay[hidden] { display:none; }
.overlay.is-open {
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

/* ===== Modal ===== */
.modal {
  width:100%; max-width:560px;
  max-height:92vh; max-height:92dvh;
  background:var(--white);
  border:1px solid var(--g200);
  border-radius:var(--r-lg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.02),
    0 4px 12px rgba(0,0,0,.04),
    0 16px 48px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0;
  transform:scale(.92);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.overlay.is-open .modal { opacity:1; transform:scale(1); }

/* Head */
.modal__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 16px 16px;
  flex-shrink:0;
  gap:8px;
}
.modal__counter {
  font-size:12px; font-weight:500;
  color:var(--g400);
  font-variant-numeric:tabular-nums;
  flex:1; text-align:center;
}
.modal__back {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border:none; border-radius:50%;
  background:transparent; color:var(--g400);
  cursor:pointer;
  transition:color .15s, background .15s;
  flex-shrink:0;
}
.modal__back:hover { color:var(--g600); background:var(--g100); }
.modal__back:focus-visible { outline:2px solid var(--g400); outline-offset:2px; }
.modal__back[hidden] { visibility:hidden; }

.modal__x {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border:none; border-radius:50%;
  background:transparent; color:var(--g400);
  cursor:pointer;
  transition:color .15s, background .15s;
  flex-shrink:0;
}
.modal__x:hover { color:var(--g600); background:var(--g100); }
.modal__x:focus-visible { outline:2px solid var(--g400); outline-offset:2px; }

/* Progress */
.modal__bar {
  height:3px; background:var(--g100);
  margin:0 24px; border-radius:2px;
  flex-shrink:0; overflow:hidden;
}
.modal__bar-fill {
  height:100%; width:0%;
  background:var(--g400);
  border-radius:2px;
  transition:width .5s var(--ease);
}

/* Body */
.modal__body {
  position:relative; flex:1;
  min-height:320px; overflow:hidden;
}

/* Foot */
.modal__foot {
  flex-shrink:0;
  display:flex; justify-content:center;
  padding:0 20px 16px;
}
.modal__go {
  width:100%; max-width:320px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font);
  font-size:14px; font-weight:500;
  letter-spacing:.02em;
  color:var(--white); background:var(--g900);
  border:none; border-radius:var(--r-full);
  padding:14px 28px;
  cursor:pointer;
  transition:transform .15s var(--ease), background .15s, opacity .2s;
}
.modal__go:hover { background:var(--g800); transform:translateY(-1px); }
.modal__go:active { transform:translateY(0) scale(.97); }
.modal__go:focus-visible { outline:2px solid var(--g400); outline-offset:3px; }
.modal__go.is-loading { opacity:.5; pointer-events:none; }
.modal__go[hidden] { display:none; }

/* Trust line */
.modal__trust {
  text-align:center;
  font-size:11px; color:var(--g400);
  padding:0 20px 14px;
  flex-shrink:0;
}
.modal__trust a {
  color:var(--g500);
  text-decoration:none;
}
.modal__trust a:hover { text-decoration:underline; }

/* ===== Steps ===== */
.step {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:2rem 2.5rem 1.5rem;
  overflow:hidden;
  opacity:0;
  transform:translateX(24px);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.step.is-on { opacity:1; transform:translateX(0); pointer-events:auto; }
.step.is-on-now { transition:none; }
.step.out-l {
  opacity:0; transform:translateX(0);
  transition:opacity .18s ease-out;
}
.step.out-r {
  opacity:0; transform:translateX(0);
  transition:opacity .18s ease-out;
}

.step__wrap { width:100%; max-width:400px; }
.step__wrap--done { text-align:center; }

.step__hi {
  font-size:13px; font-weight:400;
  color:var(--g400); text-align:center;
  margin-bottom:6px;
}
.step__q {
  font-size:22px; font-weight:400;
  letter-spacing:-.015em; line-height:1.3;
  color:var(--g800); text-align:center;
  margin-bottom:2rem;
}
.step__sub {
  font-size:14px; font-weight:400;
  color:var(--g400); text-align:center;
  line-height:1.55; margin-bottom:1.5rem;
}
.step__fail {
  font-size:13px; color:var(--red);
  text-align:center; margin-top:1rem;
}

/* ===== Inputs ===== */
.step__fields { display:flex; flex-direction:column; gap:10px; }
.inp { position:relative; }
.inp input {
  width:100%;
  padding:13px 16px;
  font-family:var(--font);
  font-size:16px; font-weight:400;
  color:var(--g900);
  background:var(--g50);
  border:1.5px solid var(--g200);
  border-radius:var(--r);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.inp input::placeholder { color:var(--g400); font-weight:300; }
.inp input:focus {
  outline:none;
  background:var(--white);
  border-color:var(--g400);
  box-shadow:0 0 0 3px rgba(156,163,175,.1);
}
.inp input:disabled {
  background:var(--g50);
  border-color:var(--g100);
  color:var(--g400);
  cursor:not-allowed;
}
.inp.is-bad input { border-color:var(--red); animation:shake .3s ease-out; }
.inp.is-bad input:focus { box-shadow:0 0 0 3px rgba(232,113,113,.1); }
.inp__err {
  display:block;
  font-size:12px; color:var(--red);
  padding-top:5px;
  opacity:0; transition:opacity .15s;
}
.inp.is-bad .inp__err { opacity:1; }

@keyframes shake {
  0%,100% { transform:translateX(0); }
  25% { transform:translateX(-3px); }
  75% { transform:translateX(3px); }
}

/* ===== Picks ===== */
.picks--grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.picks--half { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.picks--col  { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.picks--col .picks__err { grid-column:1/-1; }
.picks--single { display:flex; flex-direction:column; gap:8px; }
.picks__err {
  font-size:12px; color:var(--red);
  text-align:center; padding-top:8px;
  opacity:0; transition:opacity .15s;
}
.picks--grid .picks__err,
.picks--half .picks__err { grid-column:1/-1; }
.picks__err.is-on { opacity:1; }

.pick {
  font-family:var(--font);
  font-size:14px; font-weight:400;
  color:var(--g600);
  background:var(--g50);
  border:1.5px solid var(--g200);
  border-radius:var(--r);
  padding:11px 14px;
  cursor:pointer; text-align:center;
  transition:background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.pick:hover { background:var(--g100); border-color:var(--g300); }
.pick:active { transform:scale(.97); }
.pick:focus-visible { outline:2px solid var(--g400); outline-offset:2px; }
.pick.is-on {
  background:var(--g900); color:var(--white);
  border-color:var(--g900);
  box-shadow:0 2px 8px rgba(17,24,39,.1);
}
.pick--tall { padding:16px 18px; font-size:15px; }
.pick--row  { padding:13px 16px; text-align:center; }

/* ===== Done ===== */
.done { color:var(--green); display:flex; justify-content:center; margin-bottom:2rem; }
.done__c { stroke-dasharray:188; stroke-dashoffset:188; }
.step.is-on .done__c { animation:dc .7s var(--ease) .1s forwards; }
.done__k { stroke-dasharray:36; stroke-dashoffset:36; }
.step.is-on .done__k { animation:dk .35s var(--ease) .45s forwards; }
@keyframes dc { to { stroke-dashoffset:0; } }
@keyframes dk { to { stroke-dashoffset:0; } }

/* ===== Reveals ===== */
.reveal {
  opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-vis { opacity:1; transform:translateY(0); }
.hero__tag.reveal      { transition-delay:0ms; }
.hero__title.reveal    { transition-delay:80ms; }
.hero__desc.reveal     { transition-delay:180ms; }
.hero__cta.reveal      { transition-delay:300ms; }
.hero__footer.reveal   { transition-delay:400ms; }

/* ===== Responsive ===== */
@media (max-width:600px) {
  html, body { height:auto; overflow:auto; }

  .hero { height:100dvh; }

  .overlay { padding:0; align-items:flex-end; }
  .modal {
    max-width:100%; height:100dvh;
    border-radius:0; border:none;
    max-height:none;
    transform:translateY(100%);
    overflow-y:auto;
  }
  .overlay.is-open .modal {
    transform:translateY(0);
  }
  .modal__body { min-height:0; flex:1; }
  .step {
    padding:1.5rem 1.25rem 1rem;
    overflow-y:auto;
  }
  .step__wrap { max-width:100%; }
  .step__q { font-size:20px; margin-bottom:1.5rem; }
  .modal__head { padding:12px 12px; }
  .modal__back { width:40px; height:40px; }
  .modal__foot { padding:0 16px 12px; }
  .modal__go { max-width:100%; padding:16px 28px; font-size:15px; }
  .modal__trust { padding:0 16px 16px; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
  .picks--col { grid-template-columns:1fr; }
  .picks--single { gap:6px; }
  .pick { padding:14px 16px; min-height:48px; font-size:15px; }
  .pick--tall { padding:18px 20px; min-height:52px; }
  .inp input { padding:14px 16px; touch-action:manipulation; }
  .hero__cta { padding:16px 36px; font-size:15px; }
  .ambient__orb--1 { width:300px; height:300px; }
  .ambient__orb--2 { width:260px; height:260px; }
  .ambient__orb--3 { width:220px; height:220px; }
}
@media (max-width:380px) {
  .step__q { font-size:18px; }
  .pick { font-size:14px; padding:12px 14px; }
  .picks--grid { gap:6px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal { opacity:1; transform:none; }
  .step { transition:none; }
  .done__c,.done__k { stroke-dashoffset:0; }
}