:root {
  --bg:#0b0620;
  --ink:#e6e6f2;
  --muted:#a8b0d8;
  --brand:#4db2ff;
  --accent:#a97cff;
  --card:#15112c;
  --radius:18px;
  --glow1: 0 0 40px rgba(77,178,255,.35);
  --glow2: 0 0 60px rgba(169,124,255,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.headerbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 4vw;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:rgba(11,6,32,.7);backdrop-filter:saturate(140%) blur(8px)}
.headerbar img{height:36px;width:auto}
.headerbar nav{display:flex;gap:14px;flex-wrap:wrap}
.button{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#130f29;color:#dfe6ff;font-weight:600}
.hero{position:relative;display:grid;align-items:center;min-height:64vh;padding:clamp(20px,4vw,48px);background: radial-gradient(65% 80% at 60% 50%, rgba(77,178,255,.16), transparent 60%), url('assets/hero_banner.png') center/cover no-repeat fixed;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,6,32,.25), rgba(11,6,32,.85) 70%);z-index:0}
.wrap{position:relative;z-index:1;max-width:1100px;margin:0 auto}
.tag{display:inline-block;padding:6px 12px;background:rgba(77,178,255,.15);color:var(--brand);border:1px solid rgba(77,178,255,.35);border-radius:999px;font-weight:600;letter-spacing:.02em;box-shadow:var(--glow1)}
h1{margin:14px 0 10px;font-size:clamp(36px,6vw,62px);line-height:1.02}
.lead{color:var(--muted);font-size:clamp(16px,2.2vw,20px);max-width:66ch}
.cta{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:14px;border:1px solid rgba(230,230,242,.15);background:linear-gradient(180deg,#1f1a3a,#17132d);color:var(--ink);box-shadow:var(--glow2);font-weight:600;letter-spacing:.02em}
.btn.primary{background:linear-gradient(180deg,#2b2156,#1b1741);border-color:rgba(169,124,255,.45)}
.grid{display:grid;gap:24px;grid-template-columns:repeat(12,1fr);width:min(1200px,94%);margin:max(36px,6vh) auto}
.card{grid-column:span 12;background:linear-gradient(180deg,#17132d,#120f25);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius);box-shadow:var(--glow1);overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr}
.card:nth-child(even){grid-template-columns:1fr 1.2fr}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:clamp(16px,2.6vw,28px)}
.card h2{margin:0 0 8px;font-size:clamp(24px,3.3vw,34px)}
.card p{color:var(--muted);margin:0 0 16px}
.pillrow{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 6px}
.pill{padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#d9d9f3;background:rgba(255,255,255,.04)}
.about{width:min(1000px,94%);margin:10vh auto 6vh;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:clamp(16px,2.4vw,28px);box-shadow:var(--glow2)}
.portrait{width:100%;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08)}
.subscribe{display:flex;gap:10px;margin-top:6px}
.subscribe input[type="email"]{flex:1;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#0f0c22;color:var(--ink)}
.subscribe button{padding:12px 16px;border-radius:12px;border:1px solid rgba(77,178,255,.4);background:#112c4a;color:#cfe8ff;font-weight:700}
footer{border-top:1px solid rgba(255,255,255,.08);padding:28px 0 40px;margin-top:8vh}
.footwrap{width:min(1100px,94%);margin:0 auto;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.social{display:flex;gap:14px}
.social a{display:inline-flex;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#130f29}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:42px;width:auto}
.back{display:inline-flex;gap:8px;align-items:center;margin:18px 4vw}
@media (max-width:900px){.card{grid-template-columns:1fr}.about{grid-template-columns:1fr}.hero{min-height:58vh}}