/* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --bg-deep:#0a0708;
    --bg-panel: rgba(255,255,255,0.045);
    --bg-panel-strong: rgba(255,255,255,0.07);
    --border-glass: rgba(255,255,255,0.10);
    --border-glass-strong: rgba(255,255,255,0.18);
    --ink:#f6f1ef;
    --ink-soft:#cfc3c0;
    --muted:#8f8280;
    --red:#ff3b5c;
    --red-soft:#ff7a8a;
    --red-deep:#7a1129;
    --green:#34d399;
    --amber:#fbbf24;
    --radius-lg:24px;
    --radius-md:16px;
    --radius-sm:10px;
    --shadow-soft: 0 20px 60px -20px rgba(0,0,0,.65);
    --ease: cubic-bezier(.22,1,.36,1);
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--bg-deep);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.num-font{font-family:'Space Grotesk', sans-serif;}
  ::selection{background:var(--red); color:#fff;}

  button{font-family:inherit;}
  input{font-family:inherit;}

  /* ============================================================
     AMBIENT BACKGROUND
     ============================================================ */
  .ambient{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
  .blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; animation:drift 22s ease-in-out infinite;}
  .blob-1{width:520px; height:520px; background:radial-gradient(circle, var(--red) 0%, transparent 70%); top:-160px; left:-120px; animation-delay:0s;}
  .blob-2{width:460px; height:460px; background:radial-gradient(circle, var(--red-deep) 0%, transparent 70%); bottom:-140px; right:-100px; animation-delay:-7s;}
  .blob-3{width:360px; height:360px; background:radial-gradient(circle, var(--red-soft) 0%, transparent 70%); top:40%; left:50%; opacity:.18; animation-delay:-14s;}
  @keyframes drift{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(40px,-30px) scale(1.08);}
  }
  @media (prefers-reduced-motion: reduce){ .blob{animation:none;} }

  /* ============================================================
     TOP BRAND HEADER (shown on quiz / form / result screens)
     ============================================================ */
  .app-header{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px;
    background:rgba(10,7,8,.72);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--border-glass);
  }
  .app-header.hidden{ display:none; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-logo{ width:28px; height:28px; border-radius:8px; object-fit:cover; flex-shrink:0; }
  .brand-name{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.05em; color:var(--ink); }
  .restart-link{
    background:none; border:none; color:var(--muted); font-size:12.5px;
    cursor:pointer; display:flex; align-items:center; gap:4px; padding:8px 4px;
    transition:color .15s ease;
  }
  .restart-link:hover{ color:var(--ink); }

  /* ============================================================
     FLOATING CTA (start screen only, appears after scrolling past
     the "Veja o que você vai receber" section)
     ============================================================ */
  .floating-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:30;
    display:flex; justify-content:center;
    padding:14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(to top, rgba(10,7,8,.96) 55%, rgba(10,7,8,0));
    transform:translateY(120%);
    transition:transform .28s var(--ease);
    pointer-events:none;
    will-change:transform;
  }
  .floating-cta.visible{ transform:translateY(0); pointer-events:auto; }
  .floating-cta .btn{ width:100%; max-width:600px; box-shadow:0 -6px 30px -10px rgba(255,59,92,.5), 0 10px 30px -8px rgba(255,59,92,.55); }

  /* ============================================================
     LAYOUT SHELL
     ============================================================ */
  .app-shell{
    position:relative;
    z-index:1;
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:28px 18px 40px;
  }
  @media (min-height:760px){ .app-shell{ align-items:center; } }
  /* Quiz and lead-form cards are shorter than the start/result screens,
     so on tall viewports the default vertical centering leaves a large
     empty gap above them. Keep those two anchored near the top instead. */
  .app-shell.align-top{ align-items:flex-start !important; }

  .glass-panel{
    background:var(--bg-panel);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-lg);
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
    box-shadow:var(--shadow-soft);
  }

  .screen{ display:none; width:100%; }
  .screen.active{ display:flex; flex-direction:column; animation:screenIn .35s var(--ease); }
  @keyframes screenIn{
    from{opacity:0; transform:translateY(12px);}
    to{opacity:1; transform:translateY(0);}
  }

  /* ============================================================
     SHARED UI BITS
     ============================================================ */
  .eyebrow{
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--red-soft); font-weight:600; margin:0 0 12px;
    display:flex; align-items:center; gap:8px;
  }
  .eyebrow::before{content:''; width:18px; height:1px; background:var(--red-soft);}

  .btn{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:15px;
    padding:16px 26px;
    min-height:52px;
    border-radius:100px;
    border:none;
    cursor:pointer;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), opacity .2s;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
  }
  .btn-block{ width:100%; }
  .btn-primary{
    background:linear-gradient(135deg, var(--red), #d92c4d);
    color:#fff;
    box-shadow:0 10px 30px -8px rgba(255,59,92,.55);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -8px rgba(255,59,92,.7); }
  .btn-primary:active{ transform:translateY(0) scale(.98); }
  .btn-primary:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
  .btn-ghost{
    background:var(--bg-panel-strong);
    border:1px solid var(--border-glass-strong);
    color:var(--ink);
  }
  .btn-ghost:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }
  .btn-text{
    background:transparent; color:var(--muted); padding:12px 8px; min-height:auto;
  }
  .btn-text:hover{ color:var(--ink); }
  .btn:focus-visible{ outline:2px solid var(--red-soft); outline-offset:3px; }

  /* ============================================================
     START / PREVIEW SCREEN
     ============================================================ */
  #screen-start{ max-width:600px; margin:0 auto; }
  .start-card{ padding:28px 22px 26px; }
  @media (max-width:560px){ .start-card{ padding:20px 16px 20px; } }

  .brand-block{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .brand-logo-lg{
    width:38px; height:38px; border-radius:10px; object-fit:cover; flex-shrink:0;
    box-shadow:0 8px 24px -8px rgba(255,59,92,.45);
  }
  .brand-name-lg{
    font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:13.5px;
    letter-spacing:.08em; color:var(--ink);
  }

  .start-card h1{ font-size:clamp(21px,5.4vw,27px); font-weight:600; margin:0 0 8px; letter-spacing:-.02em; line-height:1.28; }
  .start-card .lede{ color:var(--muted); font-size:14px; line-height:1.55; margin:0 0 10px; max-width:48ch; }
  .hero-micro{ font-size:12.5px; font-weight:600; color:var(--red-soft); margin:0 0 18px; letter-spacing:.02em; }

  .inline-quiz-card{
    margin:0 0 22px;
    padding:18px 16px;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.035);
    border:1px solid var(--border-glass-strong);
  }
  .inline-quiz-card .question-full-text{ margin-bottom:18px; }
  .inline-quiz-card .option-row{ margin-bottom:10px; padding:15px 16px; min-height:52px; }

  .preview-block-strong{
    border-color:rgba(255,59,92,.28);
    background:rgba(255,59,92,.045);
  }
  .preview-subtitle{ font-size:13px; font-weight:600; color:var(--ink); margin:22px 0 12px; }

  .preview-block{
    margin:24px 0 0;
    padding:20px 18px;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.03);
    border:1px solid var(--border-glass);
  }
  .preview-block h3{
    font-size:12.5px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--red-soft); font-weight:600; margin:0 0 4px;
  }
  .preview-note{ font-size:12px; color:var(--muted); margin:0 0 16px; line-height:1.5; }
  .preview-radar-wrap{ display:flex; justify-content:center; }
  #radarPreviewSvg{ width:100%; max-width:250px; height:auto; overflow:visible; }

  .plan-preview-steps .plan-step{ background:rgba(255,255,255,.025); }

  /* ---- "O que o relatório entrega" ---- */
  .report-includes{ display:flex; flex-direction:column; gap:10px; }
  .report-item{
    display:flex; align-items:flex-start; gap:12px;
    padding:14px; border-radius:var(--radius-md);
    background:rgba(255,255,255,.03); border:1px solid var(--border-glass);
  }
  .report-item-icon{
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background:rgba(255,59,92,.12); border:1px solid rgba(255,59,92,.25);
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  .report-item-body h4{ margin:0 0 3px; font-size:14px; font-weight:600; color:var(--ink); }
  .report-item-body p{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.5; }

  /* ---- "3 passos simples" ---- */
  .steps-block{ display:flex; flex-direction:column; gap:12px; }
  .step-card{ padding:16px; border-radius:var(--radius-md); background:rgba(255,255,255,.03); border:1px solid var(--border-glass); }
  .step-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--red-soft);
    text-transform:uppercase; background:rgba(255,59,92,.12); border:1px solid rgba(255,59,92,.25);
    padding:5px 10px; border-radius:100px; margin-bottom:10px;
  }
  .step-icon{
    width:36px; height:36px; border-radius:10px;
    background:rgba(255,59,92,.12); border:1px solid rgba(255,59,92,.25);
    display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:10px;
  }
  .step-card h4{ margin:0 0 4px; font-size:14.5px; font-weight:600; color:var(--ink); }
  .step-card p{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.5; }

  /* ---- Final CTA (bottom of the landing page) ---- */
  .final-cta-block{ margin-top:10px; text-align:center; }
  .final-cta-note{ font-size:12px; color:var(--muted); margin-top:12px; }

  /* ============================================================
     LEAD FORM (final step, after the quiz)
     ============================================================ */
  #screen-leadfinal{ max-width:600px; margin:0 auto; }
  .lead-card{ padding:40px 30px; }
  @media (max-width:560px){ .lead-card{ padding:26px 20px 24px; } }
  .lead-card h1,
  .lead-card h2{ font-size:clamp(22px,4.5vw,28px); font-weight:600; margin:0 0 10px; letter-spacing:-.02em; }
  .lead-card .lede{ color:var(--muted); font-size:15px; line-height:1.6; margin:0 0 26px; max-width:44ch; }

  .field{ margin-bottom:18px; }
  .field label{
    display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    margin-bottom:8px; letter-spacing:.02em;
  }
  .field input[type=text], .field input[type=email], .field input[type=tel]{
    width:100%;
    background:rgba(255,255,255,.05);
    border:1px solid var(--border-glass);
    color:var(--ink);
    padding:16px 16px;
    min-height:52px;
    border-radius:var(--radius-sm);
    font-size:16px;
    transition:border-color .2s ease, background .2s ease;
  }
  .field input::placeholder{ color:var(--muted); }
  .field input:focus{
    outline:none;
    border-color:var(--red);
    background:rgba(255,255,255,.08);
    box-shadow:0 0 0 4px rgba(255,59,92,.14);
  }
  .field input.invalid{
    border-color:var(--red);
    background:rgba(255,59,92,.06);
  }
  .field-error{
    font-size:12px;
    color:var(--red-soft);
    max-height:0;
    overflow:hidden;
    margin:0 2px;
    opacity:0;
    transition:max-height .2s ease, opacity .2s ease, margin .2s ease;
  }
  .field-error.show{ max-height:20px; margin:7px 2px 0; opacity:1; animation:shake .4s ease; }

  .lead-form .btn-primary{ width:100%; margin-top:10px; }

  /* ============================================================
     DIAGNOSTIC SCREEN — one question at a time
     ============================================================ */
  #screen-diagnostic{ max-width:600px; margin:0 auto; }
  .diag-card{ padding:26px 22px 24px; }
  @media (max-width:560px){ .diag-card{ padding:20px 16px 18px; } }

  .progress-wrap{ margin-bottom:26px; }
  .progress-top{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:10px; }
  .progress-top strong{ color:var(--ink-soft); }
  .progress-track{ height:6px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
  .progress-fill{ height:100%; background:linear-gradient(90deg, var(--red-deep), var(--red)); border-radius:6px; transition:width .5s var(--ease); }

  .pillar-head-mini{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
  .pillar-icon-sm{
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    background:rgba(255,59,92,.12); border:1px solid rgba(255,59,92,.25);
    display:flex; align-items:center; justify-content:center; font-size:15px;
  }
  .pillar-badge-text{ font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--red-soft); text-transform:uppercase; }

  .q-enter{ animation:questionIn .22s var(--ease); }
  @keyframes questionIn{
    from{ opacity:0; transform:translateX(16px); }
    to{ opacity:1; transform:translateX(0); }
  }

  .question-full-text{
    font-size:clamp(19px,5.2vw,25px); font-weight:600; line-height:1.35;
    margin:0 0 26px; letter-spacing:-.01em;
  }

  .options-list{ display:flex; flex-direction:column; }
  .option-row{
    position:relative;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    width:100%; padding:17px 18px; margin-bottom:12px;
    min-height:58px;
    border-radius:16px;
    border:1px solid var(--border-glass);
    background:rgba(255,255,255,.03);
    cursor:pointer;
    transition:border-color .18s ease, background .18s ease, transform .12s ease;
  }
  .option-row:hover{ border-color:var(--border-glass-strong); background:rgba(255,255,255,.055); }
  .option-row:active{ transform:scale(.98); }
  .option-row.selected{
    border-color:var(--red);
    background:rgba(255,59,92,.14);
    animation:rowPop .18s var(--ease);
  }
  @keyframes rowPop{
    0%{ transform:scale(.97); }
    60%{ transform:scale(1.015); }
    100%{ transform:scale(1); }
  }
  .option-row input{ position:absolute; opacity:0; width:1px; height:1px; }
  .option-row:focus-within{ outline:2px solid var(--red-soft); outline-offset:2px; }
  .option-label{ font-size:15.5px; font-weight:600; color:var(--ink); flex:1; }
  .option-radio{
    width:24px; height:24px; border-radius:50%; flex-shrink:0;
    border:2px solid var(--border-glass-strong);
    display:flex; align-items:center; justify-content:center;
    transition:all .2s ease;
  }
  .option-row.selected .option-radio{ border-color:var(--red); background:var(--red); }
  .option-row.selected .option-radio::after{ content:'✓'; color:#fff; font-size:12.5px; font-weight:700; }

  .question-nav{ display:flex; justify-content:flex-start; margin-top:4px; }

  /* ============================================================
     RESULT SCREEN
     ============================================================ */
  #screen-result{ max-width:760px; margin:0 auto; }
  .result-card{ padding:44px 40px; }
  @media (max-width:560px){ .result-card{ padding:30px 18px; } }

  .result-hero{ text-align:center; margin-bottom:8px; }
  .result-eyebrow{ justify-content:center; }
  .score-display{
    display:flex; align-items:baseline; justify-content:center; gap:6px;
    margin:6px 0 16px;
  }
  #scoreCount{ font-size:clamp(64px,12vw,88px); font-weight:700; letter-spacing:-.03em;
    background:linear-gradient(135deg, #fff, var(--red-soft));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .score-max{ font-size:22px; color:var(--muted); font-weight:500; }
  .result-summary{ max-width:52ch; margin:0 auto 40px; color:var(--ink-soft); font-size:15.5px; line-height:1.6; }

  .radar-wrap{ display:flex; justify-content:center; margin:0 auto 36px; }
  #radarSvg{ width:100%; max-width:340px; height:auto; overflow:visible; }
  .radar-vertex{ transition:r .3s ease; }

  .pillar-cards{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
    margin-bottom:36px;
  }
  @media (max-width:560px){ .pillar-cards{ grid-template-columns:1fr; } }
  .pillar-card{
    background:rgba(255,255,255,.04);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-md);
    padding:20px;
    opacity:0; transform:translateY(14px);
    animation:cardIn .55s var(--ease) forwards;
  }
  .pillar-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .pillar-card-head span.name{ font-size:14px; font-weight:600; color:var(--ink); }
  .pillar-card-head span.pct{ font-family:'Space Grotesk', sans-serif; font-size:20px; font-weight:700; }
  .pillar-bar-track{ height:5px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:12px; }
  .pillar-bar-fill{ height:100%; border-radius:5px; width:0%; transition:width 1s var(--ease); }
  .pillar-card p{ font-size:13px; color:var(--muted); line-height:1.5; margin:0; }
  @keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }

  .diagnosis-block{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:22px;
    margin-bottom:36px;
    padding-top:30px;
    border-top:1px dashed var(--border-glass-strong);
  }
  @media (max-width:560px){ .diagnosis-block{ grid-template-columns:1fr; } }
  .diag-col h3{
    font-size:13px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--red-soft); font-weight:600; margin:0 0 14px;
  }
  .diag-col ul{ margin:0; padding:0; list-style:none; }
  .diag-col li{
    font-size:13.5px; color:var(--ink-soft); line-height:1.55;
    padding-left:16px; position:relative; margin-bottom:12px;
  }
  .diag-col li::before{
    content:''; position:absolute; left:0; top:7px;
    width:6px; height:6px; border-radius:50%; background:var(--red);
  }

  /* ---- Plan of action (result screen + preview) ---- */
  .plan-block{
    margin-bottom:36px;
    padding-top:30px;
    border-top:1px dashed var(--border-glass-strong);
  }
  .plan-title{
    font-size:13px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--red-soft); font-weight:600; margin:0 0 18px;
  }
  .plan-steps{ display:flex; flex-direction:column; }
  .plan-step{
    display:flex; gap:14px; align-items:flex-start;
    padding:16px; border-radius:var(--radius-md);
    background:rgba(255,255,255,.03);
    border:1px solid var(--border-glass);
    margin-bottom:12px;
  }
  .plan-step-num{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    background:rgba(255,59,92,.14); border:1px solid rgba(255,59,92,.3);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; color:var(--red-soft); font-family:'Space Grotesk', sans-serif;
  }
  .plan-step-body h4{ margin:0 0 4px; font-size:14px; font-weight:600; color:var(--ink); }
  .plan-step-body p{ margin:0; font-size:13px; color:var(--muted); line-height:1.5; }

  .result-footer{ display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; }