/* =========================================================
   FB Growth · LP principal
   Sistema de design. Paleta OFICIAL (brandbook / site no ar):
   navy de fundo #061B38, navy da marca #16183F, dourado #F2C979,
   verde de ação #78F279. Mist (corpo sobre navy) é derivado.
   ========================================================= */

@font-face{font-family:'Hando';src:local('Hando Regular'),url('../fonts/Hando-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hando';src:local('Hando SemiBold'),url('../fonts/Hando-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Hando';src:local('Hando Black'),url('../fonts/Hando-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}

:root{
  /* cor */
  --navy-900:#061B38;   /* fundo, brandbook (site no ar) */
  --navy-850:#081F3D;    /* faixa sutil */
  --navy-800:#0A2547;    /* superfície elevada, card */
  --navy-mark:#16183F;   /* navy da marca (texto sobre botão verde) */
  --navy-line:#163457;   /* borda sobre escuro */
  --gold:#F2C979;        /* acento sobre escuro */
  --gold-veil:rgba(242,201,121,.26);
  --green:#78F279;       /* ação: só botão sobre escuro */
  --off:#F6F8FB;         /* fundo claro */
  --ink:#060707;         /* texto sobre claro */
  --white:#F8F8F8;
  --mist:#A9BDD6;        /* corpo sobre navy (derivado, ~8:1) */
  --mist-dim:#7E96B4;    /* label/caption sobre navy */

  /* tipografia */
  --font-display:'Hando','Inter',system-ui,sans-serif;
  --font-body:'Hando','Inter',system-ui,sans-serif;
  --font-data:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --step-hero:clamp(2.6rem,6vw,4.9rem);
  --step-h2:clamp(1.9rem,3.8vw,3.05rem);
  --step-h3:clamp(1.35rem,2.1vw,1.8rem);
  --step-lead:clamp(1.1rem,1.5vw,1.4rem);
  --step-body:clamp(1rem,1.12vw,1.1rem);
  --step-data:.8125rem;
  --step-micro:.6875rem;

  /* espaço */
  --pad-x:clamp(1.4rem,5vw,5rem);
  --block-y:clamp(4rem,10vh,8rem);
  --max:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
.nowrap{white-space:nowrap}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:
    radial-gradient(60% 42% at 82% 6%, rgba(242,201,121,.09) 0, transparent 62%),
    var(--navy-900);
  color:var(--mist);
  font-family:var(--font-body);
  font-size:var(--step-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{margin:0;color:var(--white);font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;line-height:1;text-wrap:balance}
p{margin:0}
figure,dl,dd{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--gold);color:var(--navy-900)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* utilitários */
.shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x)}

.label{font-family:var(--font-data);font-size:var(--step-data);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.label--dim{color:var(--mist-dim)}

/* régua curta dourada que abre bloco */
.rule{width:44px;height:3px;background:var(--gold);border:0;border-radius:2px}

/* botões: verde é ação (sobre escuro, um por vista); ghost dourado é secundário */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1;text-decoration:none;padding:.95em 1.5em;border-radius:10px;border:1.5px solid transparent;cursor:pointer;transition:transform .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}
.btn--action{background:var(--green);color:var(--navy-mark)}
.btn--action:hover{transform:translateY(-2px);background:#8ff58f}
.btn--ghost{background:transparent;color:var(--white);border-color:var(--navy-line)}
.btn--ghost:hover{border-color:var(--gold);color:var(--white)}
.btn__arrow{font-family:var(--font-body)}

/* link subordinado (texto) */
.link-sub{display:inline-flex;align-items:center;gap:.4em;color:var(--gold);font-size:.95rem;text-decoration:none;border-bottom:1px solid rgba(242,201,121,.5);padding-bottom:2px;transition:color .16s,border-color .16s}
.link-sub:hover{color:var(--gold);border-color:var(--gold)}

/* reveal por scroll (respeita reduced-motion) */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(15px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  [data-reveal].is-in{opacity:1;transform:none}
}