/* Tailwind-like utility vibe, but hand-written, no build step */
:root{
  --bg:#0b1020;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22c55e;
  --accent-2:#0ea5e9;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg,#0b1020 0%, #0b1020 30%, #0f172a 100%);
  color:var(--text);
  line-height:1.6;
}

a{color:var(--accent-2); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1200px; margin:0 auto; padding:0 10px}
.header{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 0;
}
.nav .brand{display:flex; align-items:center; gap:12px}
.nav img{height:40px}
.nav .cta{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#0b1020; padding:10px 16px; border-radius:999px; font-weight:700;
  box-shadow:var(--shadow);
}
.hero{
  position:relative; border-radius:10px; overflow:hidden;
  aspect-ratio:16/9; background:#000; box-shadow:var(--shadow);
}
.hero iframe,.hero video{width:100%; height:100%; border:0; display:block}
.hero-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.7));
  display:flex; align-items:end;
}
.hero-caption{padding:24px; font-size:clamp(18px,2vw,22px)}

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

.card{
  background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:20px; box-shadow:var(--shadow);
}
.card h3{margin-top:0}

.badges{display:flex; gap:12px; flex-wrap:wrap}
.badges img{height:20px}

.section{padding:16px 0}
.section h2{margin:0 0 16px; font-size:clamp(24px,3vw,32px)}
.section p.lead{color:var(--muted); margin-top:0}

.list{margin:0; padding-left:18px}
.kpis{display:flex; gap:16px; flex-wrap:wrap}
.kpi{flex:1 1 160px; background:#0b1020; padding:16px; border-radius:12px; border:1px solid rgba(255,255,255,.06); text-align:center}
.kpi strong{font-size:20px; display:block}

.faq details{background:#0b1020; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:16px; margin-bottom:12px}
.faq summary{cursor:pointer; font-weight:700}
.faq p{margin:8px 0 0; color:var(--muted)}

.cta-block{
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg, rgba(34,197,94,.15), rgba(14,165,233,.15));
  border:1px solid rgba(255,255,255,.08);
  padding:20px; border-radius:16px;
}
.cta-block .btn{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#0b1020; padding:12px 18px; border-radius:12px; font-weight:800;
  box-shadow:var(--shadow);
}

.footer{padding:32px 0; color:var(--muted); border-top:1px solid rgba(255,255,255,.06)}

@media (max-width: 900px){
  .grid.cols-3{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
}