/* ---------------- Design System (Purple) ---------------- */
:root{
  --bg:#0a0714;
  --ink:#0e0a1f;
  --text:#1a1333;
  --muted:#6b6a8b;
  --card:#ffffff;
  --brand:#7c3aed;
  --brand-2:#8b5cf6;
  --brand-3:#a78bfa;
  --line:#eee7ff;
  --radius:18px;
  --shadow:0 14px 44px rgba(124,58,237,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:400 16px/1.7 "PingFang SC","Microsoft YaHei",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1e163f;background:linear-gradient(180deg,#fff 0%,#fbf8ff 100%);}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 22px}
h1{font-size:56px;line-height:1.12;margin:10px 0 10px}
h2{font-size:32px;margin:0 0 10px}
h3{margin:0 0 6px}
.muted{color:var(--muted)}
small, .kicker{color:#7a6cb8;font-weight:600;letter-spacing:.2px}
.kicker{display:inline-block;padding:6px 12px;border:1px solid #e3dbff;border-radius:999px;background:#faf7ff}
.lead{max-width:760px}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:14px;border:1px solid transparent;cursor:pointer;transition:.25s;backdrop-filter:blur(6px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{border-color:#e8e1ff;background:#f7f3ff;color:#5433a4}
.btn.ghost:hover{background:#efe9ff}

/* Topbar */
.topbar{height:72px;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.75);backdrop-filter:blur(12px);border-bottom:1px solid #eee}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:42px;height:42px;border-radius:12px;
  background:conic-gradient(from 210deg at 50% 50%,#5b21b6,#a78bfa,#7c3aed,#5b21b6);
  display:grid;place-items:center;color:#fff;font-weight:800}
.brand-title{font-weight:800}
nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
nav a{padding:8px 10px;border-radius:10px}
nav a.active, nav a:hover{background:#f4f1ff;color:#5b21b6}

/* Hero (shared) */
.hero{position:relative;min-height:66vh;display:grid;place-items:center;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:contrast(1.02) saturate(1.05)}
.hero .overlay{position:absolute;inset:0;background:radial-gradient(1200px 480px at 30% -10%,rgba(124,58,237,.65),transparent 60%), 
  linear-gradient(180deg,rgba(29,20,60,.76),rgba(29,20,60,.58) 40%,rgba(29,20,60,.86));}
.hero .grid{position:absolute;inset:0;
  background:radial-gradient(1px 1px at 20px 20px,rgba(255,255,255,.12) 1px,transparent 1px) 0 0/22px 22px;opacity:.35;mix-blend-mode:overlay}
.hero .inner{position:relative;z-index:2;text-align:center;padding:90px 0}
.hero h1{text-shadow:0 12px 40px rgba(0,0,0,.35)}
.hero p{margin:8px auto 0;max-width:820px;opacity:.96}
.hero .cta{margin-top:16px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .chips{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.chip{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-size:13px}

/* Sections */
.section{padding:80px 0}
.deck{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{grid-column:span 4;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.75));
  border:1px solid rgba(167,139,250,.35);border-radius:18px;padding:20px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.card.wide{grid-column:span 8}
.card.tall{grid-row:span 2}
ul.clean{margin:6px 0 0;padding:0 0 0 18px}
.table-wrap{border:1px solid #eee;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:14px 16px;border-bottom:1px solid #f0eaff;text-align:left}
th{background:#faf7ff;color:#5b21b6}
.badge{padding:10px 14px;border-radius:14px;border:1px solid #e8e2ff;background:#fbf9ff;white-space:nowrap}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.row{display:flex;gap:14px;align-items:center;animation:m 18s linear infinite}
@keyframes m{to{transform:translateX(-50%)}}

/* Footer */
footer{padding:40px 0;border-top:1px solid #eee;color:#7a7a95;text-align:center;background:linear-gradient(180deg,#faf7ff,#ffffff)}

/* Responsive */
@media (max-width:1000px){
  .card, .card.wide{grid-column:span 12}
  .hero{min-height:56vh}
  h1{font-size:42px}
  h2{font-size:26px}
}