/* ==========================================================================
   Tema Competenc / Robotizap — design system compartilhado
   Fonte da verdade para cores, tipografia e componentes reutilizáveis.
   Ver public/css/README.md para instruções de customização.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#0b0f0d; --ink-2:#111713; --paper:#f6f4ee;
  --emerald:#2fa66b; --emerald-2:#1c7a4d; --emerald-glow:#5fe3a0;
  --gold:#d9a84e; --gold-soft:#f0d9a8;
  --muted:#9aa79f; --line:rgba(255,255,255,.08);
  --whats:#25d366;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Manrope',sans-serif; background:var(--ink); color:var(--paper); line-height:1.65;}
h1,h2,h3{font-family:'Fraunces',serif; letter-spacing:-0.01em;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* ---------- fundo animado ---------- */
.bg-fx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.35;}
.blob-1{width:520px; height:520px; background:var(--emerald); top:-160px; left:-120px; animation:tema-drift 18s ease-in-out infinite alternate;}
.blob-2{width:420px; height:420px; background:var(--gold); top:220px; right:-140px; animation:tema-drift 22s ease-in-out infinite alternate-reverse;}
@keyframes tema-drift{ from{transform:translate(0,0) scale(1);} to{transform:translate(40px,60px) scale(1.15);} }
.grain{position:fixed; inset:0; z-index:1; opacity:.04; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- nav sticky com blur ao rolar ---------- */
.site-nav{position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  padding:20px 28px; transition:background .3s ease, backdrop-filter .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;}
.site-nav.scrolled{background:rgba(11,15,13,.82); backdrop-filter:blur(16px); border-color:var(--line); padding:14px 28px;}
.site-nav .brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:700; font-size:20px; color:#fff;}
.site-nav .brand .dot{color:var(--emerald-glow);}
.site-nav .nav-links{display:flex; align-items:center; gap:32px; font-size:14px; font-weight:600; color:var(--muted);}
.site-nav .nav-links a{color:inherit; text-decoration:none;}
.site-nav .nav-links a:hover{color:#fff;}
.site-nav .nav-cta{background:var(--emerald); color:#fff !important; padding:10px 20px; border-radius:100px; transition:transform .2s ease, background .2s ease;}
.site-nav .nav-cta:hover{background:var(--emerald-2); transform:translateY(-1px);}
@media (max-width:900px){ .site-nav .nav-links a:not(.nav-cta){display:none;} }

/* ---------- botões ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:100px; font-weight:700; font-size:15px;
  font-family:'Manrope',sans-serif; text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease; border:none; cursor:pointer;}
.btn-primary{background:linear-gradient(120deg, var(--emerald), var(--emerald-2)); color:#fff; box-shadow:0 14px 32px -10px rgba(47,166,107,.6);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 40px -10px rgba(47,166,107,.7);}
.btn-ghost{color:#fff; background:rgba(255,255,255,.06); border:1px solid var(--line);}
.btn-ghost:hover{background:rgba(255,255,255,.1); transform:translateY(-2px);}
.btn-outline{background:rgba(255,255,255,.05); color:#fff; border:1px solid var(--line);}
.btn-outline:hover{background:rgba(255,255,255,.1);}
.btn-block{width:100%; justify-content:center;}

/* ---------- eyebrow (rótulo em pílula) ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-soft); padding:8px 16px; border:1px solid rgba(217,168,78,.35); border-radius:100px; background:rgba(217,168,78,.08); margin-bottom:24px;}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--emerald-glow); box-shadow:0 0 0 3px rgba(95,227,160,.25);}

/* ---------- título de seção ---------- */
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head h2{font-size:38px; color:#fff; margin-top:14px;}
.section-head p{color:var(--muted); font-size:16px; margin-top:12px;}

/* ---------- scroll reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);}
[data-reveal].in{opacity:1; transform:translateY(0);}
[data-reveal="1"].in{transition-delay:.08s;} [data-reveal="2"].in{transition-delay:.16s;} [data-reveal="3"].in{transition-delay:.24s;}

/* ---------- rodapé ---------- */
.site-footer{border-top:1px solid var(--line); padding:32px 28px; text-align:center; font-size:13px; color:var(--muted);}
.site-footer a{color:var(--muted); text-decoration:none;}
.site-footer a:hover{color:#fff;}