/* ==========================================================================
   home.css  |  Página inicial (index.html)
   ========================================================================== */

/* ---------- Header (transparente, sobre o hero) ---------- */
header.nav{position:absolute;top:0;left:0;right:0;z-index:10}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.nav a.dou{font-size:13.5px;font-weight:600;color:#cdd7ee;white-space:nowrap}
.nav a.dou:hover{color:#fff}

/* ---------- Hero ---------- */
.hero{background:radial-gradient(1100px 520px at 78% -10%,rgba(3,63,201,.30),transparent 60%),linear-gradient(180deg,var(--dark),var(--dark-2));color:#fff;padding:150px 0 120px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(760px 480px at 80% 0%,#000,transparent 72%);mask-image:radial-gradient(760px 480px at 80% 0%,#000,transparent 72%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.badge-reg{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:8px 15px;border-radius:999px;font-size:12.5px;font-weight:600;color:#cdd7ee;margin-bottom:28px}
.badge-reg .dot{width:7px;height:7px;border-radius:50%;background:#39d98a;box-shadow:0 0 0 4px rgba(57,217,138,.18)}
.hero h1{font-size:clamp(32px,5.4vw,58px);color:#fff;max-width:17ch;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.hero h1 em{font-style:normal;color:#8fb0ff}
.hero p.sub{margin-top:24px;font-size:clamp(16px,2.1vw,20px);color:#b8c2d6;max-width:58ch}
.hero p.sub b{color:#fff;font-weight:600}
.hero-cta{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}

/* ---------- Faixa da marca (entre hero e seção) ---------- */
.brand-strip{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.brand-strip .wrap{padding:40px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.strip-label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a93a3}
.lockup{display:flex;flex-direction:column;align-items:center;gap:18px}
.brand-icon{width:88px;height:88px;display:block;border-radius:20px;box-shadow:0 12px 28px -12px rgba(3,63,201,.55)}
.wordmark{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-style:italic;letter-spacing:-.03em;font-size:clamp(30px,5vw,46px);line-height:1;color:var(--blue);transform:skewX(-5deg);display:inline-block}
.strip-dom{font-size:14px;font-weight:600;color:var(--muted)}
.strip-dom a{color:var(--blue)}

/* ---------- Seção: Autorização ---------- */
section.auth{padding:96px 0}
.auth h2{font-size:clamp(25px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin-top:12px;max-width:20ch}
.auth .intro{color:var(--muted);font-size:17px;margin-top:16px;max-width:64ch}
.facts{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fact{background:#fff;padding:22px 24px}
.fact span{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#8a93a3;font-weight:700}
.fact b{display:block;margin-top:7px;font-size:16px;color:var(--ink);font-weight:600;line-height:1.4}
.fact b a{color:var(--blue)}
.fact.full{grid-column:1/-1}
.doulink{margin-top:24px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--blue)}
.doulink:hover{text-decoration:underline}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .hero{padding:122px 0 96px}
}
@media (max-width:720px){
  .nav-inner{height:70px}
  section.auth{padding:64px 0}
  .facts{grid-template-columns:1fr}
  .hero{padding:110px 0 80px}
}
@media (max-width:480px){
  .nav-inner{height:64px}
  .nav a.dou{font-size:12px}
  .brand b{font-size:15px}
  .hero{padding:98px 0 66px}
  .badge-reg{font-size:11.5px;padding:7px 13px;margin-bottom:22px}
  .hero p.sub{margin-top:20px}
  .hero-cta{gap:10px;margin-top:32px;flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .brand-strip .wrap{padding:34px 18px}
  .brand-icon{width:76px;height:76px}
  .fact{padding:18px 18px}
  .auth .intro{font-size:16px}
}