:root{
  --primary:#2563eb;--accent:#f59e0b;--ink:#0f172a;--muted:#64748b;--bg:#0b1220;--card:#ffffff;
  --radius:16px;--shadow:0 6px 18px rgba(2,6,23,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;color:var(--ink);background:#f6f7fb;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:auto;padding-inline:clamp(14px,3vw,24px)}

/* Header */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{width:36px;height:36px}
.brand .txt{display:flex;flex-direction:column}
.brand .title{font-size:clamp(1rem,2.6vw,1.15rem)}
.brand .subtitle{font-size:.72rem;color:var(--muted);font-weight:600}

nav ul{list-style:none;margin:0;padding:0;display:flex;gap:8px}
nav a{padding:10px 12px;border-radius:10px;font-weight:600;color:#0f172a;display:block}
nav a:hover{background:#eff6ff;color:var(--primary)}
nav a.active{color:var(--primary);background:#eff6ff}
.burger{border:0;background:none;display:none;gap:4px;padding:8px;border-radius:10px}
.burger span{width:22px;height:2px;background:#0f172a;border-radius:2px}

@media (max-width:900px){
  nav ul{position:absolute;inset:64px 0 auto 0;background:#fff;border-bottom:1px solid #e5e7eb;display:none;flex-direction:column;padding:10px}
  nav ul.open{display:flex}
  .burger{display:inline-grid}
}

/* Hero */
.hero{background:linear-gradient(135deg,var(--bg),#13213f);color:#fff}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;padding-block:56px}
.hero h1{font-size:clamp(1.5rem,5vw,2.6rem);margin:0 0 12px}
.hero p{color:#cbd5e1;margin:0 0 18px;max-width:60ch}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{background:var(--primary);color:#fff;padding:12px 16px;border-radius:12px;font-weight:700;box-shadow:0 10px 18px rgba(37,99,235,.18)}
.btn.alt{background:transparent;border:1.5px solid rgba(255,255,255,.35)}
.hero-card{background:#0f172a;border:1px solid rgba(255,255,255,.08);padding:18px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.25)}

@media (min-width:900px){
  .hero .wrap{grid-template-columns:1.15fr .85fr;padding-block:72px}
}

/* Sections */
section{padding-block:56px}
h2{font-size:clamp(1.25rem,3.5vw,2rem);margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 22px}

/* Cards */
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.thumb{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#e2e8f0}
.thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:14px}
.chip{display:inline-block;font-size:.75rem;font-weight:700;color:#334155;background:#e2e8f0;border-radius:999px;padding:6px 10px}

/* Footer */
footer{background:#0f172a;color:#cbd5e1}
footer .cols{display:grid;grid-template-columns:1fr;gap:18px;padding-block:32px}
footer a{color:#cbd5e1}
footer .foot{border-top:1px solid rgba(255,255,255,.08);padding:14px 0;color:#9aa7b7}
@media (min-width:900px){footer .cols{grid-template-columns:2fr 1fr 1fr}}