:root{
  --bg:#0b0d12;
  --panel:#111827;
  --text:#e6edf6;
  --muted:#a5b4c3;
  --brand:#38bdf8;
  --ring: 0 0 0 8px color-mix(in srgb, var(--brand) 20%, transparent);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial,Helvetica,sans-serif;line-height:1.65}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* Header / Nav */
header{position:sticky;top:0;z-index:20;background:#0b0d12d9;backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand .logo{width:32px;height:32px;border-radius:10px;background:url('favicon.png') no-repeat center/cover;}
.brand .name{font-weight:800;letter-spacing:.3px}
.menu a{color:var(--text);opacity:.94;margin-left:18px}
.menu a:hover{opacity:1}

/* Hero */
.hero{position:relative;text-align:center;padding:110px 0 90px;background:
radial-gradient(60% 60% at 20% 10%,rgba(56,189,248,.18),transparent 60%),
radial-gradient(50% 50% at 80% 20%,rgba(52,211,153,.14),transparent 60%);}
.hero h1{font-size:44px;line-height:1.12;margin:0 0 12px}
.hero p.lead{max-width:760px;margin:0 auto 26px;color:var(--muted);font-size:18px}
.btn{display:inline-block;background:var(--brand);color:#04131c;padding:11px 18px;border-radius:10px;font-weight:700;border:1px solid rgba(255,255,255,.08)}
.btn:hover{filter:brightness(1.04) saturate(1.05)}
.secondary{background:transparent;color:var(--text);border-color:rgba(255,255,255,.18);margin-left:10px}

/* Sections */
section{padding:70px 0;border-top:1px solid rgba(255,255,255,.06)}
h2{font-size:30px;margin:0 0 10px}
.muted{color:var(--muted)}

/* Cards / grid */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden}
.card .media{height:160px;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover}
.card .pad{padding:16px}
.card h3{margin:6px 0 6px;font-size:18px}

/* Content typography */
.content{max-width:960px;margin:0 auto}
.content h1{font-size:36px;margin:0 0 10px}
.content h3{margin-top:26px}
.content p{color:#d9e3ee;margin:10px 0}
.content ul{color:#cfd7e2;padding-left:20px}

/* Footer */
footer{padding:34px 0;border-top:1px solid rgba(255,255,255,.07);color:#9fb0c3;text-align:center}

/* Utilities */
.kicker{color:var(--brand);text-transform:uppercase;letter-spacing:.24em;font-size:12px;font-weight:700}
.sep{height:1px;background:rgba(255,255,255,.08);margin:26px 0}
blockquote{margin:12px 0;padding:12px 16px;border-left:3px solid var(--brand);background:rgba(255,255,255,.03);border-radius:8px}