:root { --bg:#0b0f14; --fg:#f5f7fa; --accent:#18a957; --muted:#93a1a1; --card:#0f1620; --border:rgba(255,255,255,.08); }
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg)}
img{max-width:100%;height:auto}
a{color:var(--fg);text-decoration:none}
header{position:sticky;top:0;background:rgba(11,15,20,.86);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
.container{max-width:1120px;margin:0 auto;padding:16px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:42px;border-radius:6px}
.header-content{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.header-brand{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.header-brand img{height:42px;border-radius:6px;flex-shrink:0}
.header-brand-text{min-width:0}
.header-brand-text strong{display:block}
nav{margin-left:auto;display:flex;gap:14px}
nav a{padding:8px 12px;border-radius:8px;border:1px solid transparent}
nav a:hover{border-color:var(--border);background:#0c121a}
.mobile-menu-toggle{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--fg);cursor:pointer;font-size:16px}
.hero{padding:60px 0 26px;text-align:center;background:linear-gradient(135deg,#0b0f14 0%, #123620 50%, #0b0f14 100%)}
.hero h1{font-size:40px;margin:8px 0 8px;line-height:1.15}
.hero p{color:var(--muted);font-size:18px;margin:0 0 18px;padding:0 16px}
.cta{display:inline-block;padding:12px 20px;border-radius:10px;background:var(--accent);color:#04120a;font-weight:700}
.btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.section{padding:42px 16px;border-top:1px solid rgba(255,255,255,.06)}
.section h2{margin:0 0 10px;font-size:28px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.card img{width:100%;display:block}
.card .p{padding:12px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width: 860px){ .grid2{grid-template-columns:1fr} }
.footer{text-align:center;padding:28px 16px;color:#8fa3b9;font-size:14px;border-top:1px solid rgba(255,255,255,.06)}
.badge{display:inline-block;background:#0d1a10;border:1px solid #1f3b27;color:#b8eecf;padding:4px 8px;border-radius:999px;font-size:12px;margin-left:8px}
.small{font-size:13px;color:var(--muted)}

/* Tablet breakpoint */
@media (max-width: 768px) {
  .header-content{flex-wrap:wrap}
  .mobile-menu-toggle{display:block;margin-left:auto}
  nav{display:none;width:100%;order:3;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--border);margin-top:12px}
  nav.active{display:flex}
  nav a{text-align:center;padding:12px}
  .hero{padding:40px 0 20px}
  .hero h1{font-size:28px}
  .hero p{font-size:16px}
  .section{padding:32px 16px}
  .section h2{font-size:24px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .header-brand-text{font-size:14px}
  .badge{display:block;margin:4px 0 0 0}
}

/* Mobile breakpoint */
@media (max-width: 480px) {
  .container{padding:12px}
  .header-brand img{height:36px}
  .header-brand{gap:10px}
  .hero{padding:32px 0 16px}
  .hero h1{font-size:22px;padding:0 8px}
  .hero p{font-size:14px;padding:0 8px}
  .cta{padding:10px 16px;font-size:14px}
  .btnrow{gap:8px;flex-direction:column;align-items:center}
  .btnrow .cta{width:100%;max-width:280px;text-align:center}
  .section{padding:24px 12px}
  .section h2{font-size:20px}
  .cards{grid-template-columns:1fr;gap:12px}
  .card .p{padding:10px;font-size:14px}
  .grid2{gap:16px}
  .footer{padding:20px 12px;font-size:12px}
  .header-brand-text{font-size:13px}
  .header-brand-text .small{font-size:11px}
}