/* ============================================================
   ALAVANCTI — Tokens (derivados do logo + paletas oficiais)
   Navy #0A1931 · #1A3D63 · Steel #4A7FA7 · Sky #B3CFE5 · #F6FAFD
   Nuvem/gradiente: #0077B6 → #00B4D8 · #90E0EF · #CAF0F8
   ============================================================ */
:root{
  --navy:#0A1931;
  --navy-2:#1A3D63;
  --steel:#4A7FA7;
  --sky:#B3CFE5;
  --mist:#F6FAFD;

  --blue:#0077B6;          /* azul médio — ação primária */
  --blue-strong:#02689E;
  --cyan:#00B4D8;          /* destaque / acento da nuvem */
  --cyan-soft:#90E0EF;
  --cyan-pale:#CAF0F8;
  --blue-tint:#EAF3FB;

  --ok:#0E9E8E;
  --amber:#B26A00;

  --bg:#FFFFFF;
  --bg-alt:#F5F9FD;
  --surface:#FFFFFF;
  --surface-2:#F7FBFE;
  --border:#E1EAF4;
  --border-strong:#CEDCEC;

  --text:#0A1931;
  --text-muted:#516480;
  --text-inverse:#FFFFFF;

  --grad-cloud:linear-gradient(120deg,var(--blue) 0%,var(--cyan) 100%);

  --shadow-sm:0 1px 2px rgba(10,25,49,.06), 0 2px 6px rgba(10,25,49,.05);
  --shadow-md:0 4px 12px rgba(10,25,49,.06), 0 12px 32px rgba(10,25,49,.07);
  --shadow-lg:0 10px 24px rgba(10,25,49,.08), 0 30px 64px rgba(10,25,49,.11);

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --space-1:.5rem; --space-2:.875rem; --space-3:1.25rem; --space-4:1.75rem;
  --space-5:2.5rem; --space-6:3.5rem;

  --font-ui:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Cascadia Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --maxw:1120px;
  --logo-src:url("logo.png");
}

@media (prefers-color-scheme: dark){
  :root{
    --blue:#2E9BD6;
    --blue-strong:#4FB0E4;
    --cyan:#35C6E8;
    --cyan-soft:#7FD6EC;
    --blue-tint:rgba(46,155,214,.14);

    --ok:#2FD3BC;
    --amber:#E0A54A;

    --bg:#07162A;
    --bg-alt:#0A1E38;
    --surface:#0E2440;
    --surface-2:#102A4A;
    --border:rgba(255,255,255,.10);
    --border-strong:rgba(255,255,255,.18);

    --text:#E9F1FA;
    --text-muted:#A6BAD3;
    --text-inverse:#06162B;

    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 10px 28px rgba(0,0,0,.40);
    --shadow-lg:0 24px 60px rgba(0,0,0,.52);

    --logo-src:url("logo-white.png");
  }
}

/* ============================================================ Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-ui); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
h1,h2,h3,p,ul{margin:0}
ul{padding:0; list-style:none}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px}

.shell{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2rem)}
.skip{position:absolute; left:1rem; top:-4rem; z-index:50; background:var(--navy); color:#fff;
  padding:.7rem 1.1rem; border-radius:var(--r-sm); transition:top .2s ease}
.skip:focus{top:1rem; text-decoration:none}

.eyebrow{font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue)}
.h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.15rem); line-height:1.1; letter-spacing:-.025em; font-weight:700}
.h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem); line-height:1.2; letter-spacing:-.02em; font-weight:700}
.h3{font-size:1.0625rem; line-height:1.35; letter-spacing:-.01em; font-weight:650}
.lead{font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem); color:var(--text-muted); line-height:1.7}
.muted{color:var(--text-muted)}
.measure{max-width:60ch; margin-inline:auto}

/* ============================================================ Cabeçalho */
.site-header{padding:clamp(1.4rem,4vw,2rem) 0; border-bottom:1px solid var(--border); background:var(--bg)}
.brand{display:flex; justify-content:center}
.brand a{display:inline-flex; align-items:center; line-height:0}
.logo{
  width:auto; height:clamp(38px,4.6vw,52px);
  background:var(--logo-src) center/contain no-repeat;
  aspect-ratio:706 / 203;
}

/* ============================================================ Hero */
.hero{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);
  background:radial-gradient(72% 120% at 50% -12%, var(--blue-tint) 0%, transparent 60%), var(--bg);
}
.hero-inner>*+*{margin-top:var(--space-3)}

.envelope{
  position:relative; width:116px; height:116px; margin:0 auto var(--space-4);
  display:grid; place-items:center; border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
  box-shadow:var(--shadow-lg); color:#fff;
}
.envelope svg{width:54px; height:54px}
.envelope::before,.envelope::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--cyan); opacity:0;
  animation:pulse-ring 3.2s cubic-bezier(.22,.61,.36,1) infinite;
}
.envelope::after{animation-delay:1.6s}
@keyframes pulse-ring{0%{transform:scale(1); opacity:.6}70%{transform:scale(1.45); opacity:0}100%{transform:scale(1.45); opacity:0}}

.status-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.4rem .95rem .4rem .72rem; border:1px solid var(--border-strong);
  border-radius:var(--r-pill); background:var(--surface); box-shadow:var(--shadow-sm);
  font-size:.8125rem; font-weight:600; color:var(--text-muted);
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--cyan); flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cyan) 22%, transparent); animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

.track{display:grid; grid-template-columns:repeat(3,1fr); margin:var(--space-5) auto 0; max-width:720px}
.track-step{position:relative; padding-top:2.35rem; text-align:center}
.track-step::before{content:""; position:absolute; top:13px; left:0; right:0; height:2px; background:var(--border-strong)}
.track-step:first-child::before{left:50%}
.track-step:last-child::before{right:50%}
.track-step::after{content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%; background:var(--bg); border:2px solid var(--border-strong)}
.track-step.is-done::before{background:var(--ok)}
.track-step.is-done::after{background:var(--ok); border-color:var(--ok)}
.track-step.is-current::after{background:var(--cyan); border-color:var(--cyan);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--cyan) 22%, transparent)}
.track-step span{display:block; font-size:.8125rem; font-weight:600; color:var(--text-muted)}
.track-step.is-current span{color:var(--text)}

/* ============================================================ Seções */
.section{padding:clamp(2.5rem,6vw,4.5rem) 0}
.section--alt{background:var(--bg-alt); border-block:1px solid var(--border)}
.section-head{text-align:center; margin-bottom:var(--space-5)}
.section-head>*+*{margin-top:var(--space-2)}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-md); padding:clamp(1.75rem,4vw,3rem)}
.card--primary{max-width:760px; margin-inline:auto; text-align:center; position:relative}
.card--primary::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  border-radius:var(--r-xl) var(--r-xl) 0 0; background:var(--grad-cloud)}
.card--primary>*+*{margin-top:var(--space-3)}
.confirm-chip{display:inline-block; padding:.55rem 1rem; border:1px dashed var(--border-strong);
  border-radius:var(--r-sm); background:var(--surface-2);
  font-family:var(--font-mono); font-size:.875rem; font-weight:600; color:var(--text)}

.actions{margin-top:var(--space-4); display:flex; flex-direction:column; align-items:center; gap:var(--space-2)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 2rem; min-height:56px; border-radius:var(--r-pill); border:1px solid transparent;
  font:inherit; font-size:1.0625rem; font-weight:650; letter-spacing:-.01em; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.btn:hover{text-decoration:none}
.btn svg{width:20px; height:20px; flex:none}
.btn--primary{color:#fff; background:var(--grad-cloud);
  box-shadow:0 8px 20px color-mix(in srgb, var(--blue) 34%, transparent); width:min(100%,380px)}
.btn--primary:hover{transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:0 12px 28px color-mix(in srgb, var(--blue) 40%, transparent)}
.btn--primary:active{transform:translateY(0)}
.quick-links{display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.25rem; font-size:.875rem; color:var(--text-muted)}
.quick-links a{font-weight:600}

.guide-cover{display:flex; align-items:center; gap:var(--space-3); max-width:760px;
  margin:0 auto var(--space-5); padding:var(--space-3); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); text-align:left}
.cover-art{flex:none; width:82px; height:106px; border-radius:8px; position:relative; overflow:hidden;
  background:linear-gradient(155deg,var(--navy) 0%,var(--navy-2) 55%,var(--blue) 100%); box-shadow:var(--shadow-md)}
.cover-art::before{content:""; position:absolute; inset:0 auto 0 0; width:6px; background:rgba(255,255,255,.18)}
.cover-art::after{content:""; position:absolute; left:18px; right:12px; top:26px; height:2px; background:rgba(255,255,255,.6);
  box-shadow:0 10px 0 rgba(255,255,255,.38),0 20px 0 rgba(255,255,255,.24),0 30px 0 rgba(255,255,255,.16)}
.cover-meta>*+*{margin-top:.35rem}

.grid{display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feature{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--space-3); box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.feature:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-strong)}
.icon{width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--blue-tint); color:var(--blue); margin-bottom:var(--space-2)}
.icon svg{width:22px; height:22px}
.feature p{margin-top:.35rem; font-size:.9375rem; color:var(--text-muted); line-height:1.6}

.split{display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:clamp(1.5rem,3vw,2rem); height:100%}
.panel--help{border-left:3px solid var(--amber)}
.panel--trust{border-left:3px solid var(--ok)}
.panel .h3{margin-bottom:var(--space-2)}
.checklist{margin-top:var(--space-2); display:grid; gap:.7rem}
.checklist li{display:flex; gap:.7rem; align-items:flex-start; font-size:.9375rem; color:var(--text-muted)}
.checklist svg{width:20px; height:20px; flex:none; color:var(--ok); margin-top:.15rem}
.panel--trust p{font-size:.9375rem; color:var(--text-muted)}

/* ============================================================ Rodapé */
.site-footer{border-top:1px solid var(--border); background:var(--bg);
  padding:clamp(2.5rem,5vw,3.5rem) 0 var(--space-4); text-align:center}
.site-footer>.shell>*+*{margin-top:var(--space-2)}
.footer-mail{display:inline-flex; align-items:center; gap:.5rem; font-weight:650; font-size:1.0625rem}
.footer-legal{margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--border);
  font-size:.8125rem; color:var(--text-muted)}

/* ============================================================ Animações */
.rise{opacity:0; transform:translateY(16px); animation:rise .7s cubic-bezier(.22,.61,.36,1) forwards}
.d1{animation-delay:.12s}.d2{animation-delay:.22s}.d3{animation-delay:.32s}.d4{animation-delay:.42s}
@keyframes rise{to{opacity:1; transform:none}}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.is-visible{opacity:1; transform:none}
.reveal.s1{transition-delay:.06s}.reveal.s2{transition-delay:.12s}.reveal.s3{transition-delay:.18s}
.reveal.s4{transition-delay:.24s}.reveal.s5{transition-delay:.3s}.reveal.s6{transition-delay:.36s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .rise,.reveal{opacity:1; transform:none}
}
@media (max-width:560px){
  .guide-cover{flex-direction:column; text-align:center}
  .track-step span{font-size:.75rem}
}