:root{
    --color-bg:#0a0f1c;
    --color-bg-soft:#0f1729;
    --color-primary:#2563eb;
    --color-accent:#38bdf8;
    --color-text:#e8edf6;
    --color-text-dim:#334155;
    --color-text-active:#8b9bbd;
    --color-border:rgba(255,255,255,.07);
    --color-danger:#f87171;
    --color-success:#34d399;
    --font-display:'Syne',sans-serif;
    --font-body:'Inter',sans-serif;
  }

  *{box-sizing:border-box;}
  html, body {
    margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text);
    font-family: var(--font-body); min-height: 100vh; height: 100vh; height: 100dvh;
    overflow: hidden;
  }

  h1,h2{font-family:var(--font-display);margin:0;line-height:1.2; text-align: center; position:relative;}
  .scroller-section.active h1::before,
  .scroller-section.active h2::before{
    content:'';
    position:absolute;
    left:50%; top:50%;
    width:min(440px, 80vw); height:160px;
    transform:translate(-50%,-50%);
    background:radial-gradient(closest-side, rgba(56,189,248,.16), rgba(37,99,235,.08) 55%, transparent 75%);
    filter:blur(18px);
    z-index:-1;
    pointer-events:none;
  }
  p{margin:0; text-align: center;}
  button{font-family:var(--font-body);border:none;cursor:pointer;}
  :focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;}

  /* ---------- CORREÇÃO EM CAMADAS (Z-INDEX) E TAMANHO DO CIRCUITO ---------- */
  .bg-circuit{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1; /* Acima do body, abaixo do formulário */
    pointer-events: none;
    overflow: hidden;
    background: transparent !important;
  }
  .bg-circuit::before, .bg-circuit::after{
    content:'';
    position:absolute;
    border-radius:50%;
    filter: blur(35px);
    pointer-events:none;
    will-change: transform, opacity;
  }
  .bg-circuit::before{
    width:55vw; height:55vw; left:-8%; top:5%;
    background: radial-gradient(circle, rgba(37,99,235,.25), transparent 70%);
    animation: driftA 19s ease-in-out infinite alternate;
  }
  .bg-circuit::after{
    width:60vw; height:60vw; right:-10%; bottom:0%;
    background: radial-gradient(circle, rgba(56,189,248,.18), transparent 70%);
    animation: driftB 23s ease-in-out infinite alternate;
  }
  @keyframes driftA{0%{transform:translate(0,0) scale(1);opacity:.9;}100%{transform:translate(4vw,3vh) scale(1.12);opacity:1;}}
  @keyframes driftB{0%{transform:translate(0,0) scale(1);opacity:.85;}100%{transform:translate(-4vw,-3vh) scale(1.15);opacity:1;}}

  /* Forçado preenchimento completo no Desktop */
  .bg-circuit svg{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    opacity: .85;
  }
  .bg-circuit .trace{
    fill:none;stroke:var(--color-accent);stroke-width:1.2;opacity:.9;
    stroke-dasharray:6 10;animation:dashflow 14s linear infinite;
    filter: drop-shadow(0 0 4px rgba(56,189,248,0.6));
  }
  .bg-circuit .trace.alt{stroke:var(--color-primary);animation-duration:18s;animation-direction:reverse;filter: drop-shadow(0 0 4px rgba(37,99,235,0.6));}
  .bg-circuit .node{fill:var(--color-accent);opacity:.75;animation:blip 3.6s ease-in-out infinite;}
  @keyframes dashflow{to{stroke-dashoffset:-160;}}
  @keyframes blip{0%,100%{opacity:.25;}50%{opacity:1;}}

  /* ---------- partículas flutuantes ---------- */
  .bg-particles{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;background: transparent !important;}
  .bg-particles span{
    position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;
    background:var(--color-accent);opacity:0;
    animation-name:floatUp;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  }
  .bg-particles span:nth-child(even){background:var(--color-primary);width:2px;height:2px;}
  @keyframes floatUp{
    0%{transform:translateY(0) translateX(0);opacity:0;}
    10%{opacity:.7;}
    50%{transform:translateY(-50vh) translateX(8px);}
    90%{opacity:.3;}
    100%{transform:translateY(-100vh) translateX(-6px);opacity:0;}
  }

  /* ---------- progress bar ---------- */
  .progress-rail{position:fixed;top:0;left:0;width:100%;height:4px;background:transparent;z-index:100;display:flex;gap:2px;padding:0 2px;}
  .step-seg{flex:1;height:100%;background:rgba(255,255,255,.06);border-radius:2px;transition:background .3s ease;}
  .step-seg.filled{background:linear-gradient(90deg,var(--color-primary),var(--color-accent));}

  /* ---------- NAVBAR FIXA NO TOPO ---------- */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(10,15,28,.92), rgba(10,15,28,.78));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    z-index: 90;
  }
  .brand-logo {
    height: 46px;
    width: auto;
    object-fit: contain;
  }

  /* ---------- container fixado ---------- */
  .form-container{
    position:relative;
    z-index:10; /* Garante que fica acima do circuito */
    max-width:760px;
    margin:0 auto;
    padding:0 6vw;
    height: 100vh; height: 100dvh;
    display: block;
    background: transparent !important;
  }

  /* ---------- seções estilo fade ---------- */
  .scroller-section{
    position: absolute;
    inset: 0;
    padding: 108px 6vw 92px 6vw;
    height:100vh; height:100dvh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    justify-content:safe center;
    align-items:center;
    gap:24px;
    opacity: 0;
    transform: translateX(0) scale(0.98);
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: transparent !important;
  }
  .scroller-section::-webkit-scrollbar{ display:none; width:0; height:0; }

  .scroller-section.active{
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
    z-index: 15;
  }

  /* Classes de posicionamento inicial antes de engatar a transição */
  .scroller-section.enter-right{ transform: translateX(45px) scale(0.98); opacity: 0; transition: none !important; }
  .scroller-section.enter-left{ transform: translateX(-45px) scale(0.98); opacity: 0; transition: none !important; }

  /* Classes de saída definitiva */
  .scroller-section.exit-left{ opacity: 0; transform: translateX(-45px) scale(0.98); }
  .scroller-section.exit-right{ opacity: 0; transform: translateX(45px) scale(0.98); }

  .eyebrow{
    font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--color-accent);
    text-align: center;
  }
  h1{font-size:1.875rem;font-weight:800;}
  h2{font-size:1.5rem;font-weight:700;}
  .lede{color:var(--color-text-active);font-size:1rem;max-width:580px;line-height:1.55;}

  .hint{color:#475569;font-size:.85rem;display:flex;align-items:center;justify-content:center;gap:6px;}
  .hint kbd{
    background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:5px;
    padding:1px 6px;font-family:var(--font-body);font-size:.75rem;color:var(--color-text-active);
  }

  /* ---------- DESIGN PADRONIZADO DO BOTÃO PRINCIPAL CENTRAL (EFEITO GLASSMORPHISM) ---------- */
  .btn-primary {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--color-text) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.03em !important;
    padding: 15px 32px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }

  .btn-primary:hover {
    background: rgba(37, 99, 235, 0.15) !important;
    color: var(--color-accent) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.35) !important;
    transform: translateY(-1px) !important;
  }

  .btn-primary:active {
    transform: translateY(1px) scale(0.97) !important;
    background: rgba(37, 99, 235, 0.25) !important;
  }

  .btn-ghost{
    background:transparent;color:var(--color-text-active);font-size:.85rem;text-decoration:underline;
    text-decoration-color:var(--color-border);text-align:center;padding:8px 0; display: block; margin: 0 auto;
  }
  .btn-ghost:hover{color:var(--color-accent);}

  .actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin-top:8px;width:100%;}

  /* ---------- DESIGN DOS BOTÕES DE SETA (CANTO INFERIOR DIREITO) ---------- */
  .nav-arrows {
    position: fixed;
    bottom: 24px;
    right: 6vw;
    display: flex;
    gap: 6px;
    z-index: 150;
    background: rgba(15, 23, 41, 0.5);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
  .nav-arrow-btn {
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-active);
    width: 44px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-arrow-btn:hover:not(:disabled) {
    background: rgba(37, 99, 235, 0.15);
    color: var(--color-accent);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.3);
  }
  .nav-arrow-btn:active:not(:disabled) {
    transform: scale(0.95);
    background: rgba(37, 99, 235, 0.25);
  }
  .nav-arrow-btn:disabled {
    background: transparent;
    color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.02);
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ---------- inputs ---------- */
  .field{width:100%; max-width: 580px; position: relative; z-index: 20;}
  input[type=text],input[type=tel],input[type=email],textarea{
    width:100%;background:transparent;border:none;border-bottom:2px solid var(--color-border);
    color:var(--color-text);font-family:var(--font-body);font-size:1.125rem;padding:10px 2px;
    transition:border-color .2s ease;border-radius:0; text-align: center;
  }
  textarea{resize:none;min-height:60px;font-size:1rem;line-height:1.4;}
  input:focus,textarea:focus{border-color:var(--color-accent);outline:none;}
  input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.15); text-align: center;}
  .field-error{color:var(--color-danger);font-size:.85rem;margin-top:6px;min-height:1.2em;font-weight:500; text-align: center;}

  /* Grid Geral das Opções */
  .options{
    display:grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width:100%;
    max-width: 580px;
    margin: 4px auto 0 auto;
    max-height: 44vh;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    position: relative;
    z-index: 20;
  }

  .options::-webkit-scrollbar { width: 4px; }
  .options::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

  /* ---------- DESIGN PADRONIZADO DAS CAIXAS DE OPÇÕES ---------- */
  .option{
    display:flex;align-items:flex-start;justify-content:flex-start;gap:14px;padding:16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius:12px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family:var(--font-display);font-weight:700;line-height:1.35;
    font-size:1rem;text-align:left;color:var(--color-text);width:100%;
    cursor: pointer;
  }
  .option:hover{
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(56, 189, 248, 0.25);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
  }
  .option:active {
    transform: translateY(0) scale(0.99);
  }
  .option .opt-label{flex:1;min-width:0; color: var(--color-text-active); transition: color 0.2s;}
  .option:hover .opt-label{ color: var(--color-text); }

  .option .mark{
    width:26px;height:26px;border-radius:5px;border:2px solid #4b5b7a;flex-shrink:0;margin-top:1px;
    display:flex;align-items:center;justify-content:center;font-size:.8rem;color:transparent;
    transition:all .15s ease;font-weight:bold;
  }
  .option.single .mark{border-radius:50%;}

  /* Quando Selecionado */
  .option.selected{
    border-color:var(--color-accent);
    background: rgba(37, 99, 235, 0.18);
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.3);
    animation:optionPop .3s ease;
  }
  .option.selected .opt-label { color: #fff; }
  .option.selected .mark{background:var(--color-accent);border-color:var(--color-accent);color:#06222f;animation:markPop .35s cubic-bezier(.34,1.56,.64,1);}

  @keyframes optionPop{0%{transform:scale(1);}45%{transform:scale(1.015);}100%{transform:scale(1);}}
  @keyframes markPop{0%{transform:scale(.55);}65%{transform:scale(1.18);}100%{transform:scale(1);}}

  .shake{animation:shake .3s;}
  @keyframes shake{25%{transform:translateY(-6px);}75%{transform:translateY(6px);}}

  .spinner-wrap{position:relative;width:60px;height:60px;margin:0 auto;}
  .spinner-wrap::before{
    content:'';position:absolute;inset:-10px;border-radius:50%;
    background:radial-gradient(closest-side, rgba(56,189,248,.25), transparent 75%);
    animation:pulseGlow 1.6s ease-in-out infinite;
  }
  .spinner{
    width:40px;height:40px;border-radius:50%;border:3px solid var(--color-border);
    border-top-color:var(--color-accent);animation:spin .8s linear infinite;
    position:absolute;top:10px;left:10px;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  @keyframes pulseGlow{0%,100%{opacity:.5;transform:scale(.9);}50%{opacity:1;transform:scale(1.08);}}
  .icon-circle{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 8px auto;position:relative;animation:iconPop .5s cubic-bezier(.34,1.56,.64,1);}
  .icon-circle::before{
    content:'';position:absolute;inset:-12px;border-radius:50%;animation:pulseGlow 2s ease-in-out infinite;
  }
  .icon-circle.ok{background:rgba(52,211,153,.12);color:var(--color-success);}
  .icon-circle.ok::before{background:radial-gradient(closest-side, rgba(52,211,153,.22), transparent 75%);}
  .icon-circle.err{background:rgba(248,113,113,.12);color:var(--color-danger);}
  .icon-circle.err::before{background:radial-gradient(closest-side, rgba(248,113,113,.2), transparent 75%);}
  .icon-circle svg{position:relative;z-index:1;}
  .icon-circle .check-path{stroke-dasharray:24;stroke-dashoffset:24;animation:drawCheck .4s ease-out .15s forwards;}
  @keyframes drawCheck{to{stroke-dashoffset:0;}}
  @keyframes iconPop{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.12);opacity:1;}100%{transform:scale(1);}}

  /* ====== RESPONSIVIDADE ====== */
  @media (min-width: 1440px) {
    html { font-size: 18px; }
    .navbar { height: 104px; }
    .brand-logo { height: 56px; }
    .form-container, .scroller-section { max-width: 980px; }
    .scroller-section { padding-top: 132px; }
    .field, .options { max-width: 720px; }
    .lede { max-width: 700px; }
    .btn-primary { padding: 16px 38px !important; }
    .option { padding: 18px 22px; }
  }

  @media (max-width: 1024px) {
    html { font-size: 15.5px; }
    .options { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .form-container { padding: 0 5vw; }
    .scroller-section { padding: 100px 5vw 88px 5vw; }
  }

  @media (max-width: 768px) {
    html { font-size: 15px; }
    .navbar { height: 64px; }
    .brand-logo { height: 36px; }

    .scroller-section{
      padding: 88px 6vw 80px 6vw;
      gap: 16px; justify-content: flex-start;
    }

    .field { max-width: 100%; }
    .actions{ width: 100%; align-items: stretch; gap: 10px; }
    .btn-primary{ width: 100%; max-width: 580px; }
    .hint{ display: none; }

    .options { grid-template-columns: 1fr; gap: 8px; max-height: 40vh; max-height: 40dvh; }
    .option { padding: 14px 16px; }

    .nav-arrows { bottom: 16px; right: 16px; gap: 4px; padding: 3px; }
    .nav-arrow-btn { width: 40px; height: 36px; font-size: 0.8rem; }
  }

/* Premium upgrades */
body::before{
content:'';
position:fixed;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
background-size:40px 40px;
pointer-events:none;
z-index:0;
}

.brand-logo{
filter:drop-shadow(0 0 12px rgba(56,189,248,.35));
}

h1{
background:linear-gradient(90deg,#fff,#38bdf8);
background-clip: text;
-webkit-background-clip: text;
}

.step-seg.filled{
background:linear-gradient(90deg,#2563eb,#38bdf8,#2563eb);
background-size:200% 100%;
animation:progressFlow 2s linear infinite;
}

@keyframes progressFlow{
to{background-position:200% 0;}
}

.success-particles{
position:fixed;
inset:0;
pointer-events:none;
}

.success-particles span{
position:absolute;
width:6px;
height:6px;
border-radius:50%;
background:#38bdf8;
animation:burst 2s ease-out forwards;
}

@keyframes burst{
from{transform:translate(0,0) scale(1);opacity:1}
to{transform:translate(var(--x),var(--y)) scale(0);opacity:0}
}