/* ============================================================
   LANDING PAGE — Classic Couros (tema escuro institucional)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg: #0a0a0a;
  --surface: #111111;
  --border: #1e1e1e;
  --accent: #c8a96e;
  --accent2: #e8c98e;
  --accent-dim: rgba(200,169,110,0.10);
  --accent-border: rgba(200,169,110,0.22);
  --text: #f0ede8;
  --text2: #bfbab2;
  --muted: #6e6e6e;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }

.container { max-width:1400px; margin:0 auto; padding:0 40px; }

/* ── NAV ───────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,10,0.88);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-inner {
  display:flex; align-items:center;
  justify-content:space-between; height:56px;
}
.nav-brand { display:flex; align-items:center; gap:10px; }
.nav-logo-img {
  height:36px; width:auto; object-fit:contain;
  filter:brightness(0) invert(1);
}
.nav-name {
  font-weight:800; font-size:20px; letter-spacing:0.04em;
}
.nav-name em { font-style:normal; color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a {
  font-size:12px; color:var(--muted);
  letter-spacing:0.1em; text-transform:uppercase;
  transition:color 0.2s;
}
.nav-links a:hover { color:var(--accent); }

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
  padding:120px 0 80px; text-align:center;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 700px 400px at 50% 0%,rgba(200,169,110,0.06),transparent 70%);
}
.hero-logo {
  width:90px; height:auto; margin:0 auto 28px;
  border-radius:10px; position:relative;
}
.hero h1 {
  font-size:clamp(30px,5.2vw,54px); font-weight:800;
  line-height:1.08; max-width:900px;
  margin:0 auto 24px; position:relative;
}
.hero h1 span { color:var(--accent); }
.hero-sub {
  font-size:17px; color:var(--text2); line-height:1.75;
  max-width:650px; margin:0 auto; position:relative;
}

/* ── STATS BAR ─────────────────────────────────────────────── */
.stats-bar {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border);
  border-radius:4px; overflow:hidden;
  margin:60px 0 100px;
}
.stat-item {
  background:var(--surface);
  padding:28px 16px; text-align:center;
}
.stat-num {
  font-size:clamp(22px,3vw,30px); font-weight:800;
  color:var(--accent); margin-bottom:2px;
}
.stat-label {
  font-size:11px; color:var(--muted);
  letter-spacing:0.08em; text-transform:uppercase;
}

/* ── SECTIONS ──────────────────────────────────────────────── */
.section { padding-bottom:100px; }
.sec-eyebrow {
  font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:14px;
}
.sec-title {
  font-size:clamp(24px,3.5vw,36px); font-weight:700;
  line-height:1.12; margin-bottom:14px;
}
.sec-desc {
  font-size:15px; color:var(--text2); line-height:1.75;
  max-width:650px; margin-bottom:48px;
}
.sec-desc.center { margin-left:auto; margin-right:auto; text-align:center; }

/* ── CARDS ─────────────────────────────────────────────────── */
.card-grid-3 {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:5px; padding:32px 28px;
  transition:border-color 0.3s;
}
.card:hover { border-color:var(--accent-border); }
.card-icon {
  width:44px; height:44px; border-radius:10px;
  background:var(--accent-dim);
  border:1px solid var(--accent-border);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.card-icon svg {
  width:20px; height:20px;
  stroke:var(--accent); fill:none; stroke-width:1.8;
}
.card-title {
  font-size:15px; font-weight:700; margin-bottom:8px;
}
.card-desc {
  font-size:13px; color:var(--text2); line-height:1.7;
}

/* ── MVV (Missao Visao Valores) ────────────────────────────── */
.mvv-card { text-align:center; }
.mvv-badge {
  display:inline-block; font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--accent-border);
  padding:4px 14px; border-radius:3px;
  margin-bottom:16px;
}

/* ── CONTACT ───────────────────────────────────────────────── */
.contact-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px; padding:64px 40px;
  text-align:center; position:relative; overflow:hidden;
}
.contact-box::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 500px 300px at 50% 100%,rgba(200,169,110,0.04),transparent);
}
.contact-box h2 {
  font-size:clamp(22px,3vw,32px); font-weight:700;
  margin-bottom:12px; position:relative;
}
.contact-box h2 span { color:var(--accent); }
.contact-box p {
  font-size:15px; color:var(--text2); line-height:1.7;
  max-width:550px; margin:0 auto; position:relative;
}
.contact-info {
  font-size:14px; color:var(--accent);
  margin-top:20px; position:relative;
}

/* ── FOOTER ────────────────────────────────────────────────── */
.footer {
  border-top:1px solid var(--border);
  padding:28px 0;
}
.footer-inner {
  display:flex; align-items:center;
  justify-content:space-between;
}
.footer-logo {
  height:32px; width:auto;
  filter:brightness(0) invert(1); opacity:0.5;
}
.footer p {
  font-size:12px; color:var(--muted); letter-spacing:0.04em;
}
.footer em { font-style:normal; color:var(--accent); }
.footer-login {
  font-size:10px; color:var(--muted);
  letter-spacing:0.08em; text-transform:uppercase;
  opacity:0.35; transition:opacity 0.3s, color 0.3s;
  padding:4px 12px; border:1px solid transparent;
  border-radius:3px;
}
.footer-login:hover {
  opacity:1; color:var(--accent);
  border-color:var(--accent-border);
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:900px) {
  .card-grid-3 { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .nav-links { display:none; }
  .hero { padding:72px 0 56px; }
  .stats-bar { grid-template-columns:1fr; }
  .contact-box { padding:48px 24px; }
  .footer-inner { flex-direction:column; gap:12px; text-align:center; }
}

/* ── REVEAL ANIMATION ──────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(24px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }