:root{--bg:#0F172A;--bg2:#0B1B34;--card:#0B1223;--line:#1E293B;--text:#E2E8F0;--muted:#94A3B8;--brand:#22C55E;--shadow:0 12px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(1100px 600px at 20% -200px,#073034 0%,var(--bg) 50%),var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 18px}
.topbar{position:sticky;top:0;background:rgba(15,23,42,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:30}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:30px}
.nav{display:flex;gap:12px;flex-wrap:wrap}
.nav a{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg2)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;padding:42px 0}
h1{font-size:46px;line-height:1.05;margin:0}
.lead{color:var(--muted);font-size:18px;max-width:820px;margin:10px 0 0 0}
.actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--line);background:var(--brand);color:#052d22;font-weight:900;box-shadow:var(--shadow)}
.btn.secondary{background:var(--bg2);color:var(--text)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.item{background:#0b1b34;border:1px solid var(--line);border-radius:14px;padding:16px}
.item h3{margin:0 0 6px 0}
.iframe-wrap{background:#0b1223;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:10px}
.iframe-wrap iframe{width:100%;height:640px;border:0}
.footer{border-top:1px solid var(--line);margin-top:26px}
.footer .inner{display:flex;justify-content:space-between;gap:12px;padding:18px 0;color:var(--muted);flex-wrap:wrap}
@media (max-width: 980px){ .hero{grid-template-columns:1fr} .grid4{grid-template-columns:1fr} }