/* ==========================================================================
   StarUp — tema Midnight
   Ordem: tokens › reset › tipografia › layout › componentes › animação › media
   Sem framework, sem @import (cada @import custa um round-trip no Lighthouse).
   ========================================================================== */

/* ------------------------------ 0. FONTES -------------------------------- */
/* Poppins auto-hospedado — subconjuntos latin e latin-ext (sem devanagari).
   Gerado a partir do Google Fonts v24. Elimina 2 preconnects, 1 CSS externo
   render-blocking e o aviso de preload não utilizado no console. */
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ------------------------------ 1. TOKENS -------------------------------- */
:root{
  /* Fundo — profundidade em 3 camadas, do mais escuro ao mais claro */
  --ink:        #04060D;
  --midnight:   #070B16;
  --surface:    #0D1424;
  --surface-2:  #121A2E;

  /* Texto */
  --star:       #EDF1FB;   /* branco estelar */
  --dim:        #98A2BE;
  --faint:      #66708C;

  /* Marca — TROCADAS EM TEMPO REAL por assets/js/app.js (efeito camaleão).
     Todo componente deve consumir estas variáveis, nunca um hex fixo. */
  --brand:      #4FE3E0;   /* ciano aurora */
  --brand-rgb:  79, 227, 224;
  --brand-2:    #FF9F45;   /* laranja solar */
  --brand-2-rgb: 255, 159, 69;
  --radius:     16px;      /* o raio também é white-label */

  /* Derivados */
  --line:       rgba(255,255,255,.09);
  --line-soft:  rgba(255,255,255,.05);
  --glass:      rgba(255,255,255,.035);
  --glow:       rgba(var(--brand-rgb), .35);

  /* Ritmo vertical e medidas */
  --gutter:     clamp(20px, 5vw, 40px);
  --maxw:       1180px;
  --section-y:  clamp(88px, 11vw, 168px);

  /* Movimento */
  --ease:       cubic-bezier(.22,.68,.32,1);
  --dur:        .7s;
}

/* ------------------------------ 2. RESET --------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--star);
  font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:clamp(15px, .55vw + 13.6px, 17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }

/* A cena 3D agora fica atrás da página inteira. Conteúdo sobe uma camada. */
.backdrop{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;   /* nunca rouba clique de link ou botão */
}
.site-header, main, .site-footer{ position:relative; z-index:1; }
img{ height:auto; }            /* sempre declare width/height no HTML: evita CLS */
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
h1,h2,h3,p,figure,blockquote,ul,ol{ margin:0; }
ul,ol{ list-style:none; padding:0; }

::selection{ background:rgba(var(--brand-rgb), .3); color:#fff; }

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:12px; z-index:99;
  background:var(--brand); color:var(--ink);
  padding:10px 18px; border-radius:8px; font-weight:600;
}
.skip:focus{ left:12px; }

/* --------------------------- 3. TIPOGRAFIA ------------------------------- */
.h2{
  font-size:clamp(1.9rem, 4.4vw, 3.35rem);
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:600;
}
.h2--center{ text-align:center; margin-inline:auto; max-width:16ch; }
.h3{
  font-size:1.16rem; font-weight:600; letter-spacing:-.015em;
  margin-bottom:.5rem;
}
.lede{ color:var(--dim); font-size:clamp(1rem, 1.3vw, 1.14rem); max-width:60ch; }
.lede--center{ text-align:center; margin-inline:auto; max-width:56ch; }
.note{ color:var(--dim); }

/* Eyebrow em versalete + monoespaçada: contraponto de "utilidade" ao Poppins,
   sem custo de download (usa a mono do sistema). */
.eyebrow{
  font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand);
  display:flex; align-items:center; gap:.7em;
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--brand); opacity:.6; flex:none;
}
.section__head .eyebrow{ justify-content:center; }

/* ----------------------------- 4. LAYOUT --------------------------------- */
.wrap{ width:min(var(--maxw), 100% - var(--gutter) * 2); margin-inline:auto; }
.section{ padding-block:var(--section-y); position:relative; }
.section__head{ margin-bottom:clamp(48px, 6vw, 80px); }

.grid-2{
  display:grid; gap:clamp(28px, 5vw, 72px);
  grid-template-columns:1fr;
}
@media (min-width:860px){
  .grid-2{ grid-template-columns:.85fr 1fr; align-items:start; }
}

/* ----------------------------- 5. HEADER --------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto; z-index:50;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
/* backdrop-filter é caro: aplicado só aqui e no painel camaleão. */
.site-header.is-stuck{
  background:rgba(4,6,13,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:72px; gap:24px;
}

.brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:600; letter-spacing:-.02em; }
.brand__mark{
  width:11px; height:11px; flex:none; border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 4px rgba(var(--brand-rgb), .16), 0 0 22px 2px var(--glow);
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.brand__name{ font-size:1.06rem; }

.nav{ display:flex; align-items:center; gap:clamp(14px, 2vw, 30px); }
.nav a:not(.btn){ color:var(--dim); font-size:.93rem; transition:color .25s; }
.nav a:not(.btn):hover{ color:var(--star); }

.nav-toggle{
  display:none; width:42px; height:42px; background:none;
  border:1px solid var(--line); border-radius:10px; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:16px; height:1.5px; background:var(--star);
  margin-inline:auto; transition:transform .3s var(--ease), opacity .2s;
}
.nav-toggle span::before{ transform:translateY(-5px); }
.nav-toggle span::after{ transform:translateY(3.5px); }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-1.5px) rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:72px 0 auto; flex-direction:column; gap:4px;
    background:rgba(7,11,22,.96);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:20px var(--gutter) 28px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav a:not(.btn){ padding:12px 0; font-size:1.05rem; width:100%; }
  .nav .btn{ margin-top:10px; width:100%; justify-content:center; }
}

/* ----------------------------- 6. BOTÕES --------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.92rem 1.6rem; border-radius:calc(var(--radius) * .7);
  font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease),
             background .3s var(--ease), border-color .3s var(--ease);
}
.btn--sm{ padding:.6rem 1.1rem; font-size:.88rem; }
.btn--block{ width:100%; }
.btn--primary{
  background:var(--brand); color:var(--ink);
  box-shadow:0 6px 30px -8px var(--glow);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 40px -8px var(--glow); }
.btn--ghost{ border-color:var(--line); color:var(--star); background:var(--glass); }
.btn--ghost:hover{ border-color:rgba(var(--brand-rgb), .5); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* ------------------------------ 7. HERO ---------------------------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(120px, 18vh, 190px) clamp(80px, 12vh, 120px);
  overflow:hidden;
  /* Fallback estático: é o que se vê se o WebGL falhar ou em reduced-motion. */
  background:
    radial-gradient(80% 55% at 50% 0%,  rgba(var(--brand-rgb), .13), transparent 62%),
    radial-gradient(60% 45% at 82% 78%, rgba(var(--brand-2-rgb), .08), transparent 60%);
  transition:background 1s var(--ease);
}
/* Véu: garante contraste AA do texto sobre as partículas em qualquer frame.
   Sem ele, um aglomerado de partículas passando atrás do H1 quebra a leitura. */
.hero__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 50% at 26% 46%, rgba(4,6,13,.78), transparent 72%),
    linear-gradient(180deg, rgba(4,6,13,.5) 0%, transparent 30% 70%, rgba(4,6,13,.85) 100%);
}
.hero__hint{
  position:relative; align-self:center; margin-top:clamp(28px,5vh,56px);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  opacity:0; animation:hintIn 1s var(--ease) 2.4s forwards;
}
@keyframes hintIn{ to{ opacity:.9 } }
/* Em toque não há cursor para mover: a dica muda de sentido. */
@media (pointer:coarse){ .hero__hint{ display:none } }
.hero__inner{ position:relative; }
.hero__title{
  font-size:clamp(2.6rem, 7.4vw, 5.4rem);
  line-height:1.02; letter-spacing:-.045em; font-weight:600;
  margin-bottom:1.4rem; max-width:15ch;
}
.hero__title em{
  font-style:normal; font-weight:700;
  background:linear-gradient(96deg, var(--star) 12%, var(--brand) 52%, var(--brand-2) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lede{ max-width:52ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-block:2.2rem 2.6rem; }

.specs{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  color:var(--faint); font-size:.85rem;
}
.specs li{ display:flex; align-items:center; gap:.45em; }
.specs li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brand); opacity:.8; }
.specs span{ color:var(--star); font-weight:500; }

.hero__tagline{
  position:relative; align-self:center; margin-top:clamp(40px, 7vh, 84px);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.7rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--faint);
}

/* ---------------------------- 8. O PROBLEMA ------------------------------ */
.section--problema{ background:linear-gradient(180deg, rgba(4,6,13,.88), rgba(7,11,22,.82)); }
.section--problema p{ color:var(--dim); }
.chains{ margin-block:1.6rem; display:grid; gap:.85rem; }
.chains li{
  padding-left:1.9rem; position:relative; color:var(--faint);
}
.chains li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:12px; height:1px; background:var(--faint);
}
/* A "amarra" é riscada no hover: a caixa se rompe. Detalhe, não decoração. */
.chains li::after{
  content:""; position:absolute; left:1.9rem; right:0; top:.78em; height:1px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.chains li:hover{ color:var(--dim); }
.chains li:hover::after{ transform:scaleX(1); }

/* --------------------------- 9. LIBERDADE -------------------------------- */
.section--liberdade{ background:linear-gradient(180deg, rgba(7,11,22,.82), rgba(7,11,22,.74)); }

.manifesto{
  position:relative; max-width:72ch; margin:0 auto clamp(56px, 7vw, 92px);
  text-align:center; padding:clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px);
}
.manifesto__lead{
  font-size:clamp(1.25rem, 2.6vw, 1.85rem);
  line-height:1.42; letter-spacing:-.02em; font-weight:500;
}
.manifesto__body{
  margin-top:1.3rem; color:var(--dim);
  font-size:clamp(.95rem, 1.2vw, 1.05rem); max-width:62ch; margin-inline:auto;
}
/* Refrão da marca: três verbos do tom de voz, em ritmo de respiração */
.manifesto__verbs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.6rem;
  margin-top:1.8rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand);
}
.manifesto::before{
  content:"“"; position:absolute; top:-.32em; left:50%; transform:translateX(-50%);
  font-size:6rem; line-height:1; color:var(--brand); opacity:.22;
}
.manifesto cite{
  display:block; margin-top:1.4rem; font-style:normal;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}

.dna{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:640px){  .dna{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .dna{ grid-template-columns:repeat(4,1fr); } }

.card{
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(22px, 2.6vw, 32px);
  transition:border-color .35s var(--ease), transform .35s var(--ease),
             box-shadow .35s var(--ease), border-radius .5s var(--ease);
}
.card p{ color:var(--dim); font-size:.95rem; }
.card:hover{
  border-color:rgba(var(--brand-rgb), .38);
  transform:translateY(-4px);
  box-shadow:0 22px 50px -30px var(--glow);
}

.stat{
  margin-top:clamp(56px, 7vw, 92px); text-align:center;
  padding:clamp(34px, 5vw, 60px) var(--gutter);
  border:1px solid var(--line); border-radius:var(--radius);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(var(--brand-rgb), .10), transparent 70%),
    var(--surface);
}
.stat__num{
  font-size:clamp(3.4rem, 11vw, 6.4rem); font-weight:700; line-height:1;
  letter-spacing:-.05em;
  background:linear-gradient(180deg, var(--star), var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__label{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brand); margin-block:.9rem 1.1rem;
}
.stat__text{ color:var(--dim); max-width:56ch; margin-inline:auto; }

/* -------------------------- 10. PLATAFORMA ------------------------------- */
.section--plataforma{ background:linear-gradient(180deg, rgba(7,11,22,.78), rgba(4,6,13,.88)); }

.chameleon{
  border:1px solid var(--line); border-radius:calc(var(--radius) + 6px);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:clamp(18px, 3vw, 30px);
  margin-bottom:clamp(48px, 6vw, 76px);
  transition:border-radius .5s var(--ease);
}
.chameleon__controls{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.chip{
  background:transparent; border:1px solid var(--line);
  border-radius:999px; padding:.5rem 1.05rem; font-size:.85rem;
  color:var(--dim); cursor:pointer;
  transition:color .25s, border-color .25s, background .25s;
}
.chip:hover{ color:var(--star); border-color:rgba(255,255,255,.2); }
.chip.is-active{
  color:var(--ink); background:var(--brand); border-color:var(--brand); font-weight:600;
}
.chameleon__hint{
  margin-top:16px; text-align:center; color:var(--faint); font-size:.82rem;
}

/* Mock de painel — puro CSS, herda --brand e --radius */
.mock{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:border-radius .5s var(--ease);
}
@media (min-width:720px){ .mock{ grid-template-columns:200px 1fr; } }
.mock__side{ background:var(--surface-2); padding:20px; }
.mock__main{ background:var(--surface); padding:20px; display:grid; gap:14px; }
.mock__logo{ display:flex; align-items:center; gap:.55rem; font-weight:600; margin-bottom:22px; }
.mock__mark{
  width:9px; height:9px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 14px 1px var(--glow); transition:background .5s var(--ease);
}
.mock__menu{ display:grid; gap:2px; font-size:.85rem; color:var(--faint); }
.mock__menu li{ padding:.5rem .7rem; border-radius:calc(var(--radius) * .45); transition:border-radius .5s var(--ease); }
.mock__menu li.is-active{
  color:var(--star); background:rgba(var(--brand-rgb), .14);
  box-shadow:inset 2px 0 0 var(--brand);
}
.mock__row{ display:grid; gap:12px; grid-template-columns:repeat(3, 1fr); }
.mock__row--charts{ grid-template-columns:1fr; }
@media (min-width:720px){ .mock__row--charts{ grid-template-columns:1.7fr 1fr; } }
.mock__kpi{
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:calc(var(--radius) * .55); padding:14px;
  display:grid; gap:4px; transition:border-radius .5s var(--ease);
}
.mock__kpi span{ font-size:.7rem; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; }
.mock__kpi strong{ font-size:1.05rem; font-weight:600; letter-spacing:-.02em; }
.mock__chart{
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:calc(var(--radius) * .55); padding:16px;
  transition:border-radius .5s var(--ease);
}
.mock__title{ font-size:.72rem; color:var(--faint); text-transform:uppercase; letter-spacing:.14em; margin-bottom:14px; }
.bars{ display:flex; align-items:flex-end; gap:7px; height:104px; }
.bars i{
  flex:1; height:var(--h); border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg, var(--brand), rgba(var(--brand-rgb), .25));
  transition:background .5s var(--ease), height .6s var(--ease);
}
.mock__chart--donut{ display:grid; place-items:center; align-content:start; }
.donut{
  position:relative;
  width:104px; height:104px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--brand) 0 72%, rgba(255,255,255,.07) 72% 100%);
  transition:background .5s var(--ease);
}
.donut::before{ content:""; position:absolute; width:74px; height:74px; border-radius:50%; background:var(--surface-2); }
.donut span{ position:relative; font-size:1rem; font-weight:600; }

.features{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:640px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .features{ grid-template-columns:repeat(4,1fr); } }

/* --------------------------- 11. JORNADA --------------------------------- */
.section--jornada{ background:rgba(4,6,13,.82); }
.journey{ display:grid; gap:22px; grid-template-columns:1fr; counter-reset:step; }
@media (min-width:680px){ .journey{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .journey{ grid-template-columns:repeat(4,1fr); } }
.journey__step{
  padding-top:22px; border-top:1px solid var(--line); position:relative;
}
.journey__step::after{
  content:""; position:absolute; top:-1px; left:0; width:34%; height:1px;
  background:var(--brand); transform-origin:left; transform:scaleX(0);
  transition:transform .8s var(--ease);
}
.journey__step.is-visible::after{ transform:scaleX(1); }
.journey__num{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.74rem; letter-spacing:.2em; color:var(--brand); margin-bottom:1.4rem;
}
.journey__step p:last-child{ color:var(--dim); font-size:.95rem; }

/* ----------------------------- 12. CTA ----------------------------------- */
.section--cta{
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(var(--brand-rgb), .13), transparent 70%),
    linear-gradient(180deg, rgba(4,6,13,.86), rgba(7,11,22,.62));
}
.cta{ text-align:center; }
.form{
  margin-top:clamp(32px, 4vw, 46px); max-width:440px; margin-inline:auto;
  display:grid; gap:14px; text-align:left;
}
.form__field{ display:grid; gap:6px; }
.form__field label{ font-size:.8rem; color:var(--dim); }
.form__field input{
  background:var(--surface); border:1px solid var(--line);
  border-radius:calc(var(--radius) * .7); padding:.85rem 1rem;
  transition:border-color .25s, background .25s, border-radius .5s var(--ease);
}
.form__field input::placeholder{ color:var(--faint); }
.form__field input:focus{ border-color:var(--brand); background:var(--surface-2); outline:none; }
.form__field input[aria-invalid="true"]{ border-color:#FF6B6B; }
.form__msg{ font-size:.85rem; min-height:1.2em; color:var(--brand); }
.form__msg[data-state="error"]{ color:#FF8B8B; }
.form__legal{ font-size:.78rem; color:var(--faint); text-align:center; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------------------------- 13. FOOTER --------------------------------- */
.site-footer{ background:rgba(7,11,22,.92); border-top:1px solid var(--line-soft); padding-block:52px 40px; }
.site-footer__inner{ display:grid; gap:26px; align-items:center; }
@media (min-width:800px){
  .site-footer__inner{ grid-template-columns:1fr auto; }
  .site-footer__legal{ grid-column:1 / -1; }
}
.site-footer__tag{
  margin-top:.6rem; color:var(--faint); font-size:.85rem; letter-spacing:.02em;
}
.site-footer__nav{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.9rem; color:var(--dim); }
.site-footer__nav a:hover{ color:var(--star); }
.site-footer__legal{
  color:var(--faint); font-size:.78rem;
  border-top:1px solid var(--line-soft); padding-top:22px;
}

/* ------------------- 13b. CICLO DE VIDA (acompanha o scroll) ------------- */
/* Barra fina no topo — é a leitura de progresso no mobile. */
.progress{
  position:fixed; inset:0 0 auto; height:2px; z-index:60;
  background:rgba(255,255,255,.06); pointer-events:none;
}
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow:0 0 12px 0 var(--glow);
}

/* Trilha lateral: mostra em que capítulo da narrativa o usuário está.
   O ponto ativo pulsa junto com a formação 3D correspondente. */
.lifecycle{
  position:fixed; z-index:55; right:clamp(14px, 2.4vw, 30px); top:50%;
  transform:translateY(-50%); pointer-events:none;
}
.lifecycle__list{ display:grid; gap:20px; }
.lifecycle__list li{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
}
.lifecycle__list i{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.22);
  transition:background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.lifecycle__list em{
  font-style:normal;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); opacity:0; transform:translateX(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), color .45s var(--ease);
  white-space:nowrap;
}
.lifecycle__list li.is-past i{ background:rgba(var(--brand-rgb), .45); }
.lifecycle__list li.is-active i{
  background:var(--brand); transform:scale(1.5);
  box-shadow:0 0 0 4px rgba(var(--brand-rgb), .14), 0 0 16px 1px var(--glow);
}
.lifecycle__list li.is-active em{ opacity:1; transform:none; color:var(--brand); }
/* Espaço apertado ou toque: some. A barra de progresso já dá a orientação. */
@media (max-width:1180px), (pointer:coarse){ .lifecycle{ display:none; } }

/* ------------------- 13c. MICRO-INTERAÇÕES (assets/js/motion.js) --------- */

/* Revelação palavra a palavra. O <span class="w"> recorta, o <i> sobe.
   Enquanto o JS não roda, o título fica visível e legível — nunca se aposta
   o conteúdo principal num script. */
[data-split].split-ready .w{
  display:inline-block; overflow:hidden; vertical-align:top;
  /* o rotate(2deg) do <i> tira o "g" e o "p" para fora da caixa: dá folga
     embaixo e compensa com margem negativa para não mexer no ritmo da linha */
  padding-bottom:.1em; margin-bottom:-.1em;
}
[data-split].split-ready .w > i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%) rotate(2deg); opacity:0;
  transition:transform .78s var(--ease), opacity .5s var(--ease);
}
[data-split].split-in .w > i{ transform:none; opacity:1; }

/* Tilt + spotlight. Só transform e um radial-gradient em ::before — nada de
   box-shadow animado, que força repaint em toda a caixa. */
[data-tilt]{
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%; --tilt-scale:1;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--tilt-scale));
  transform-style:preserve-3d;
  transition:transform .45s var(--ease), border-color .35s var(--ease);
  position:relative;
}
[data-tilt].is-tilting{ transition:transform .12s linear, border-color .35s var(--ease); }
[data-tilt]::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx) var(--my),
             rgba(var(--brand-rgb), .16), transparent 62%);
  opacity:0; transition:opacity .35s var(--ease);
}
[data-tilt].is-tilting::before{ opacity:1; }
/* ::before é posicionado e pintaria ACIMA do conteúdo em fluxo do card.
   Uma camada para cada um resolve sem precisar de z-index negativo. */
[data-tilt]::before{ z-index:0; }
[data-tilt] > *{ position:relative; z-index:1; }
/* O tilt substitui o translateY do hover — senão as duas transforms brigam. */
.card[data-tilt]:hover{ transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--tilt-scale)); }

/* Botões magnéticos: o JS escreve transform, então o hover não pode escrever
   também. O realce fica por conta da sombra. */
[data-magnetic]{ transition:transform .35s var(--ease), box-shadow .3s var(--ease); }
.btn--primary[data-magnetic]:hover{ transform:none; box-shadow:0 14px 44px -8px var(--glow); }
.btn--ghost[data-magnetic]:hover{ transform:none; }

/* Dashboard vivo */
.bars i{ transition:height .8s var(--ease), background .5s var(--ease); }
.donut{
  /* valor final por padrão: sem JS o donut aparece preenchido, não vazio */
  --sweep:72%;
  background:conic-gradient(var(--brand) 0 var(--sweep), rgba(255,255,255,.07) var(--sweep) 100%);
  transition:--sweep 1.1s var(--ease), background .5s var(--ease);
}
/* @property permite o Chrome interpolar a varredura do donut. Onde não houver
   suporte, o donut simplesmente aparece no valor final. */
@property --sweep{ syntax:'<percentage>'; inherits:false; initial-value:72%; }

/* Pulso quando a narrativa 3D muda de capítulo */
@keyframes chapterFlash{
  0%{ box-shadow:0 0 0 0 rgba(var(--brand-rgb), .55) }
  100%{ box-shadow:0 0 0 16px rgba(var(--brand-rgb), 0) }
}
.lifecycle__list li.flash i{ animation:chapterFlash .9s var(--ease); }

/* --------------------------- 14. ANIMAÇÃO -------------------------------- */
/* Entrada por scroll (Intersection Observer em app.js).
   Escalonamento: style="--d:120ms" no elemento. Só transiciona opacity e
   transform — ambas na GPU, zero reflow. */
/* Sem a classe .js (script inline do <head> não rodou, ou watchdog derrubou),
   nada disto se aplica e o conteúdo aparece normalmente. Ver comentário no
   <head> do index.html. */
.js [data-reveal]{
  opacity:0;
  transform:translate3d(0, 22px, 0);
  transition:opacity var(--dur) var(--ease) var(--d, 0ms),
             transform var(--dur) var(--ease) var(--d, 0ms);
  will-change:opacity, transform;
}
.js [data-reveal].is-visible{ opacity:1; transform:none; will-change:auto; }

/* --------------------- 15. ACESSIBILIDADE / MOTION ----------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
  [data-split].split-ready .w > i{ transform:none; opacity:1; }
  [data-tilt]{ transform:none; }
  [data-tilt]::before{ display:none; }
  .lifecycle, .hero__hint{ display:none; }
  /* app.js também NÃO inicializa o Three.js neste modo — o hero fica no
     gradiente estático definido em .hero. */
}

@media print{
  .site-header,.backdrop,.lifecycle,.progress,.chameleon__controls,.nav-toggle{ display:none; }
  body{ background:#fff; color:#000; }
}