/* ============================================================
   ABBA — AI Consulting & Platform · Home (landing institucional)
   Design system da marca (navy / ouro / teal), serif + sans.
   Fontes self-hosted — sem dependência externa. Conteúdo estático.
   ============================================================ */

/* ---- Fontes (woff2 self-hosted) --------------------------- */
@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:700; font-display:swap; src:url("assets/fonts/playfair-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:800; font-display:swap; src:url("assets/fonts/playfair-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:900; font-display:swap; src:url("assets/fonts/playfair-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* ---- Tokens ------------------------------------------------ */
:root {
  --bg:#081321; --bg-2:#0B1728;
  --ink:#F2F6FB; --ink-soft:#C7D4E2; --muted:#8598AD;
  --gold:#D6A94F; --gold-2:#EBD095; --gold-deep:#B5892F;
  --teal:#3E8FA0; --teal-2:#57A7B6; --steel:#8FB4CC;
  --panel:#0E1D31; --panel-2:#13243C; --border:rgba(255,255,255,0.09);
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw:1140px;
}

/* ---- Reset ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; max-width:100%; overflow-x:hidden; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); line-height:1.6;
  background:
    radial-gradient(1100px 720px at 82% -5%, rgba(214,169,79,0.10), transparent 60%),
    radial-gradient(920px 640px at 8% 12%, rgba(62,143,160,0.09), transparent 55%),
    linear-gradient(180deg, #0B1728 0%, #081321 40%, #07111E 100%);
  overflow-x:hidden; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,p{ margin:0; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem); }

/* ---- Header (slim, sticky) --------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:rgba(8,19,33,0.72); border-bottom:1px solid var(--border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:60px; gap:1rem; }
.brand{ display:flex; align-items:baseline; gap:.6rem; text-decoration:none; min-width:0; }
.brand .b-word{ font-family:var(--serif); font-weight:800; font-size:1.5rem; letter-spacing:.02em; color:var(--ink); }
.brand .b-sub{ font-size:.82rem; color:var(--steel); letter-spacing:.04em; white-space:nowrap; }
.nav-link{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; white-space:nowrap;
  font-weight:600; font-size:.9rem; color:var(--gold-2);
  padding:.5rem .9rem; border:1px solid rgba(214,169,79,0.35); border-radius:9px;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-link:hover{ background:rgba(214,169,79,0.12); border-color:rgba(214,169,79,0.6); transform:translateY(-1px); }
.nav-link span{ transition:transform .18s ease; }
.nav-link:hover span{ transform:translateX(3px); }
.nav-link:focus-visible,.cta:focus-visible,.scroll-cue:focus-visible{ outline:3px solid var(--steel); outline-offset:3px; }

/* ---- Hero -------------------------------------------------- */
.hero{ min-height:calc(88vh - 60px); display:grid; align-items:center; }
.hero .container{ display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(2rem,6vw,5rem); padding-top:clamp(2rem,5vw,4rem); padding-bottom:clamp(2rem,5vw,4rem); }
.hero-intro{ max-width:36rem; min-width:0; }
.wordmark{ font-family:var(--serif); font-weight:800; font-size:clamp(4rem,11vw,8rem); line-height:.9; letter-spacing:.005em; color:var(--ink); text-shadow:0 1px 0 rgba(0,0,0,.25); }
.subtitle{ font-weight:500; font-size:clamp(1.05rem,2.2vw,1.55rem); letter-spacing:.05em; color:var(--steel); margin-top:.5rem; }
.rule{ width:74px; height:3px; margin:1.6rem 0; background:linear-gradient(90deg,var(--gold-2),var(--gold)); border-radius:3px; }
.tagline{ font-style:italic; font-size:clamp(1.02rem,1.9vw,1.24rem); line-height:1.6; color:var(--ink-soft); max-width:min(46ch,100%); }
.hero-lead{ margin-top:1.1rem; color:var(--muted); font-size:1.02rem; max-width:min(50ch,100%); }
.scroll-cue{ display:inline-flex; align-items:center; gap:.5rem; margin-top:2rem; text-decoration:none; color:var(--ink-soft); font-weight:500; font-size:.95rem; }
.scroll-cue .dot{ display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid var(--border); border-radius:50%; color:var(--gold); transition:transform .2s ease, border-color .2s ease; }
.scroll-cue:hover .dot{ transform:translateY(3px); border-color:rgba(214,169,79,.5); }
.brain{ position:relative; display:flex; justify-content:center; align-items:center; margin:0; min-width:0; }
.brain::before{ content:""; position:absolute; inset:-14%; background:radial-gradient(circle at 50% 44%, rgba(214,169,79,.20), rgba(62,143,160,.06) 42%, transparent 66%); filter:blur(6px); z-index:0; }
.brain img{ position:relative; z-index:1; width:clamp(200px,28vw,320px); filter:drop-shadow(0 24px 55px rgba(214,169,79,.24)); }

/* ---- Seções (scaffolding) ---------------------------------- */
section{ padding:clamp(3.25rem,7vw,5.5rem) 0; scroll-margin-top:72px; }
.band{ background:linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.018)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.eyebrow .num{ color:var(--gold-deep); font-family:var(--serif); font-size:1rem; }
.section-title{ font-family:var(--serif); font-weight:800; font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.1; color:var(--ink); margin-top:.7rem; }
.section-sub{ color:var(--ink-soft); font-size:1.05rem; margin-top:.9rem; max-width:60ch; }
.section-head{ margin-bottom:2.4rem; }

/* ---- Blockquote (visão / proposta) ------------------------- */
.quote{ border-left:3px solid var(--gold); padding:.2rem 0 .2rem 1.3rem; margin:0 0 2.2rem; font-style:italic; font-size:clamp(1.1rem,2.2vw,1.4rem); line-height:1.55; color:var(--ink-soft); max-width:68ch; }

/* ---- Grid de stats (proposta de valor) --------------------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.stat{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:1.8rem 1.6rem; text-align:center; }
.stat .num{ font-family:var(--serif); font-weight:800; font-size:clamp(2.6rem,6vw,3.6rem); line-height:1; color:var(--gold); }
.stat .lbl{ margin-top:.6rem; color:var(--ink-soft); font-weight:500; }

/* ---- Cards genéricos --------------------------------------- */
.cards{ display:grid; gap:1.2rem; }
.cards.cols-3{ grid-template-columns:repeat(3,1fr); }
.cards.cols-2{ grid-template-columns:repeat(2,1fr); }
.card{ position:relative; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:1.7rem; transition:transform .2s ease, border-color .2s ease, background .2s ease; }
.card:hover{ transform:translateY(-3px); border-color:rgba(214,169,79,0.28); background:var(--panel-2); }
.icon-badge{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:11px; background:rgba(62,143,160,0.14); color:var(--teal-2); margin-bottom:1rem; }
.icon-badge svg{ width:22px; height:22px; }
.card h3{ font-size:1.12rem; font-weight:700; color:var(--ink); }
.card .card-desc{ color:var(--muted); margin-top:.4rem; font-size:.96rem; }

/* ---- Cards de serviço (com faixa dourada no topo) ---------- */
.service{ padding-top:1.9rem; }
.service::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; border-radius:14px 14px 0 0; background:linear-gradient(90deg,var(--teal),var(--gold)); }
.service ul{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.6rem; }
.service li{ display:flex; align-items:flex-start; gap:.6rem; color:var(--ink-soft); font-size:.96rem; }
.service li svg{ flex:none; width:17px; height:17px; color:var(--gold); margin-top:.18rem; }

/* ---- Valores (quem somos) ---------------------------------- */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.value{ display:flex; gap:.9rem; align-items:flex-start; }
.value .icon-badge{ margin:0; flex:none; width:40px; height:40px; }
.value h3{ font-size:1.02rem; font-weight:600; color:var(--ink); }
.value p{ color:var(--muted); font-size:.92rem; margin-top:.25rem; }

/* ---- Assessment: escada de maturidade ---------------------- */
.stepper{ display:grid; grid-template-columns:repeat(5,1fr); gap:.9rem; margin-bottom:2rem; }
.step{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:1.4rem 1rem 1.2rem; position:relative; overflow:hidden; }
.step .bar{ position:absolute; top:0; left:0; right:0; height:4px; }
.step .lvl{ font-family:var(--serif); font-weight:800; font-size:1.9rem; color:var(--ink); opacity:.92; }
.step .name{ font-weight:600; margin-top:.2rem; color:var(--ink); font-size:.98rem; }
.step .d{ color:var(--muted); font-size:.85rem; margin-top:.35rem; }
.dims{ display:flex; flex-wrap:wrap; gap:.7rem; }
.dim{ display:inline-flex; align-items:center; gap:.5rem; background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:.5rem 1rem; color:var(--ink-soft); font-size:.92rem; font-weight:500; }
.dim svg{ width:16px; height:16px; color:var(--teal-2); }

/* ---- CTA final --------------------------------------------- */
.cta-final{ text-align:center; }
.cta-final .box{ background:linear-gradient(180deg, rgba(214,169,79,0.08), rgba(62,143,160,0.05)); border:1px solid rgba(214,169,79,0.28); border-radius:20px; padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,5vw,3rem); }
.cta-final h2{ font-family:var(--serif); font-weight:800; font-size:clamp(1.9rem,4.2vw,2.8rem); color:var(--ink); line-height:1.12; max-width:20ch; margin:0 auto; }
.cta-final p{ color:var(--ink-soft); margin:1rem auto 2rem; max-width:52ch; font-size:1.05rem; }
.cta{ display:inline-flex; align-items:center; gap:.6rem; font-weight:600; font-size:1.05rem; color:#0A1526; background:linear-gradient(180deg,var(--gold-2),var(--gold)); padding:1rem 1.9rem; border-radius:12px; text-decoration:none; box-shadow:0 14px 38px -14px rgba(214,169,79,.6); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.cta span{ transition:transform .18s ease; }
.cta:hover{ transform:translateY(-2px); box-shadow:0 20px 48px -16px rgba(214,169,79,.75); filter:brightness(1.03); }
.cta:hover span{ transform:translateX(3px); }
.cta-note{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:1.1rem; color:var(--muted); font-size:.9rem; }

/* ---- Rodapé ------------------------------------------------ */
footer{ border-top:1px solid var(--border); }
footer .container{ padding-top:1.4rem; padding-bottom:1.4rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; color:var(--muted); font-size:.85rem; }
footer strong{ color:var(--ink-soft); font-weight:600; }

/* ---- Responsivo -------------------------------------------- */
@media (max-width:900px){
  .cards.cols-3,.values,.stats{ grid-template-columns:1fr 1fr; }
  .stepper{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .hero .container{ grid-template-columns:1fr; text-align:center; gap:2.2rem; }
  .hero-intro{ order:2; max-width:100%; margin:0 auto; min-width:0; }
  .brain{ order:1; min-width:0; }
  .brain img{ width:clamp(150px,42vw,210px); }
  .rule,.tagline,.hero-lead{ margin-left:auto; margin-right:auto; }
  .scroll-cue{ display:none; }
  .brand .b-sub{ display:none; }
  .cards.cols-3,.values,.stats,.stepper{ grid-template-columns:1fr; }
  .value{ text-align:left; }
  footer .container{ flex-direction:column; text-align:center; gap:.45rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .card,.cta,.nav-link,.scroll-cue .dot{ transition:none; }
}