/* ===== Futuristic Neon Theme ===== */
:root{
  --bg:#050712; --bg2:#070a1a; --card:rgba(10,14,32,.55);
  --text:#e6e8ee; --muted:#a3b2c9; --border:rgba(148,163,184,.18);
  --neon:#22d3ee; --neon2:#7c3aed;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--text);
  font:15.5px/1.7 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC","Noto Sans CJK SC";
  background:
     radial-gradient(1200px 600px at 85% -20%, rgba(124,58,237,.22), transparent 60%),
     radial-gradient(1100px 650px at -15% 110%, rgba(34,211,238,.18), transparent 60%),
     linear-gradient(180deg, var(--bg), var(--bg2));
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:var(--neon); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px; margin:0 auto; padding:0 24px}
/* Animated grid */
.bg-grid:before{content:""; position:fixed; inset:0; z-index:-2;
  background:linear-gradient(transparent 31px, rgba(255,255,255,.045) 31px) 0 0/32px 32px,
             linear-gradient(90deg, transparent 31px, rgba(255,255,255,.045) 31px) 0 0/32px 32px;
  mask: radial-gradient(120% 90% at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,.2));
  animation:gridmove 22s linear infinite;
}
@keyframes gridmove{to{transform:translateY(32px)}}
/* Header */
.nav{position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(8,12,26,.85), rgba(8,12,26,.4)); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--border)}
.nav-inner{height:68px; display:flex; align-items:center; justify-content:space-between}
.logo{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}
.logo-chip{width:32px;height:32px;border-radius:9px;background:radial-gradient(70% 70% at 30% 30%,var(--neon),var(--neon2));box-shadow:0 0 18px rgba(124,58,237,.45), inset 0 0 12px rgba(34,211,238,.35);display:grid;place-items:center;color:#081029;font-weight:900}
.nav a{color:#e6e8ee; opacity:.9; font-weight:600; margin-left:18px}
.nav a:hover{opacity:1}
/* Hero */
.hero{padding:62px 0 36px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center}
.kicker{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.03); color:#c6d1e6; font-size:.85rem}
h1{font-size:46px; line-height:1.12; margin:14px 0 10px; letter-spacing:-.02em}
.gradient-text{background:linear-gradient(90deg,#e6faff,#a5b4fc); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:1.08rem; color:#b8c1d6; max-width:65ch}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid rgba(34,211,238,.6); background:linear-gradient(90deg, rgba(34,211,238,.22), rgba(124,58,237,.26)); color:#e6faff; font-weight:800; text-decoration:none; box-shadow:0 10px 34px rgba(34,211,238,.22), inset 0 0 24px rgba(124,58,237,.18)}
.btn:hover{box-shadow:0 12px 38px rgba(124,58,237,.28), inset 0 0 30px rgba(34,211,238,.24)}
/* Cards */
.card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px; box-shadow:0 30px 80px rgba(2,6,23,.45); position:relative; overflow:hidden}
.card:before{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(34,211,238,.08), rgba(124,58,237,.08)); opacity:.25; mix-blend-mode:overlay}
.section{padding:18px 0 36px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
h2{font-size:24px; margin:0 0 8px}
.kv{display:grid; grid-template-columns:180px 1fr; gap:12px; border-top:1px dashed var(--border); padding:10px 0}
.meta{color:#a5b4c8; font-size:.95rem}
hr{border:none; border-top:1px solid var(--border); margin:12px 0}
.badge{font-size:.8rem; padding:4px 8px; background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.25); border-radius:6px; color:#c6f9ff}
.icon{width:26px;height:26px; margin-right:8px; vertical-align:middle}
/* Footer */
.footer{margin-top:56px; border-top:1px solid var(--border); background:linear-gradient(180deg, rgba(10,12,25,.45), rgba(10,12,25,.75))}
.footer-inner{display:grid; grid-template-columns:1fr; gap:12px; padding:24px 0; color:#a9b3c8; text-align:center}
/* Responsive */
@media(max-width:1000px){ .hero-grid{grid-template-columns:1fr} .grid-3,.grid-2{grid-template-columns:1fr} .kv{grid-template-columns:1fr} h1{font-size:36px} }