/* Resonance-style clean branding theme
   - Minimal palette
   - Strong typography
   - Subtle motion
*/
:root{
  --bg:#0a0a0a;
  --card:#111;
  --ink:#f5f5f5;
  --muted:#c9c9c9;
  --accent:#8b5cf6; /* violet */
  --accent-2:#14b8a6; /* teal */
  --radius:1.25rem;
  --max:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{opacity:.9}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding:0 20px}

.btn{
  display:inline-block;padding:14px 20px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:white;font-weight:700;letter-spacing:.3px;transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 10px 30px rgba(139,92,246,.25);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(20,184,166,.25)}

.nav{
  position:sticky;top:0;z-index:40;background:rgba(10,10,10,.7);backdrop-filter:blur(10px);
  border-bottom:1px solid #1b1b1b
}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.5px}
.logo .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

.menu{display:flex;gap:26px;align-items:center}
.menu a{color:var(--muted);font-weight:600}
.menu a.active, .menu a:hover{color:var(--ink)}

.hero{
  padding:110px 0 80px;position:relative;overflow:hidden;
  border-bottom:1px solid #1b1b1b;
}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center
}
.hero h1{font-size:clamp(36px,6vw,64px);line-height:1.02;margin:0 0 16px;font-weight:900;letter-spacing:-1px}
.hero p{font-size:clamp(16px,2.1vw,20px);color:var(--muted);max-width:60ch}
.badge{
  display:inline-flex;align-items:center;gap:10px;background:#0f0f0f;
  border:1px solid #1b1b1b;border-radius:999px;padding:8px 12px;margin-bottom:16px;color:var(--muted)
}
.badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(139,92,246,.15)}

.hero-card{
  background:radial-gradient(1200px 500px at 110% -10%,rgba(139,92,246,.2),transparent 50%),
            radial-gradient(600px 300px at -20% 110%,rgba(20,184,166,.18),transparent 50%),
            var(--card);
  padding:28px;border:1px solid #1b1b1b;border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.hero-card h3{margin:6px 0 8px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px}
.kpi{background:#0f0f0f;border:1px solid #1b1b1b;border-radius:18px;padding:16px}
.kpi b{font-size:28px;display:block}

.section{padding:80px 0;border-bottom:1px solid #1b1b1b}
.section h2{font-size:clamp(28px,4vw,42px);margin:0 0 12px}
.section p.lead{color:var(--muted);max-width:62ch}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.card{background:var(--card);border:1px solid #1b1b1b;border-radius:var(--radius);padding:20px;transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.card h3{margin:8px 0 8px}
.meta{color:var(--muted);font-size:14px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.quote{font-size:20px;line-height:1.6;margin:0}
.quote-card{background:#0f0f0f;border:1px solid #1b1b1b;border-radius:var(--radius);padding:24px}

.cta{padding:80px 0;text-align:center}
.cta .cta-box{background:var(--card);border:1px solid #1b1b1b;border-radius:var(--radius);padding:36px}
.cta h3{font-size:32px;margin:0 0 14px}

.footer{padding:40px 0;color:var(--muted)}
.footer .cols{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:26px}
.footer small{color:#8a8a8a}

.badgelist{display:flex;gap:10px;flex-wrap:wrap}
.badgelist span{background:#0f0f0f;border:1px solid #1b1b1b;border-radius:999px;padding:6px 10px;color:var(--muted);font-size:13px}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .cards{grid-template-columns:1fr}
  .grid-2, .grid-3{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .menu{display:none}
  .kpis{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr}
}