/* ---------- Design Tokens ---------- */
:root{
  --bg: #0b1020;
  --surface: #0f1629;
  --surface-2: #121a33;
  --text: #e9eefb;
  --muted: #9aa7c7;
  --accent: #7c8cff;
  --accent-2: #5be4a8;
  --ring: rgba(124,140,255,.35);
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.25);
  --container: 1100px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8ff;
    --surface:#ffffff;
    --surface-2:#f1f4ff;
    --text:#101424;
    --muted:#5b6788;
    --accent:#5a6cff;
    --accent-2:#0bbf88;
    --ring: rgba(90,108,255,.25);
    --shadow: 0 8px 28px rgba(16,20,36,.08);
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color:var(--text); background: radial-gradient(1200px 600px at 70% -50%, rgba(124,140,255,.12), transparent 60%),
                       radial-gradient(900px 500px at -20% 20%, rgba(91,228,168,.10), transparent 60%),
                       var(--bg);
  line-height:1.7;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.narrow{max-width:800px}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
}
.nav-bar{display:flex; align-items:center; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text)}
.brand-logo{width:28px; height:28px}
.brand-text .en{opacity:.65; font-weight:600; margin-left:6px; font-size:.95em}

.nav{margin-left:auto; display:flex; gap:16px; align-items:center}
.nav a{
  padding:8px 12px; border-radius:10px; color:var(--text); text-decoration:none;
}
.nav a:hover{background: color-mix(in oklab, var(--surface-2) 70%, transparent)}
.nav a.active{background: color-mix(in oklab, var(--accent) 22%, transparent); outline: 2px solid color-mix(in oklab, var(--accent) 30%, transparent)}

.nav .divider{width:1px; height:22px; background: color-mix(in oklab, var(--muted) 25%, transparent)}
.lang-switch{display:flex; gap:8px; align-items:center}
.lang-switch button{
  font: inherit; color: var(--text); background: transparent; border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
  padding:6px 10px; border-radius:10px; cursor:pointer;
}
.lang-switch button.active{background: color-mix(in oklab, var(--accent) 22%, transparent)}

.nav-toggle{display:none; margin-left:auto; font-size:22px; line-height:1; padding:6px 10px; border-radius:10px; background:transparent; color:var(--text); border:1px solid color-mix(in oklab, var(--muted) 20%, transparent)}
@media (max-width: 820px){
  .nav{display:none; position:absolute; right:20px; top:60px; flex-direction:column; background:var(--surface); border:1px solid color-mix(in oklab, var(--muted) 20%, transparent); padding:10px; border-radius:12px; box-shadow:var(--shadow)}
  .nav[aria-expanded="true"]{display:flex}
  .nav-toggle{display:inline-block}
}

/* ---------- Hero ---------- */
.hero{padding:64px 0 40px}
.hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:36px; align-items:center}
.hero-copy h1{font-size: clamp(28px, 4vw, 44px); line-height:1.15; margin:0 0 12px}
.hero-copy p{margin:0 0 18px; color:var(--muted)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

.hero-art{position:relative}
.halo{
  position:absolute; inset:-20px -30px auto auto; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(124,140,255,.35), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(91,228,168,.25), transparent 60%);
  filter: blur(10px); opacity:.9; pointer-events:none; transform: translateY(-6px);
  animation: pulse 6s ease-in-out infinite alternate;
}
@keyframes pulse{from{transform:translateY(-8px)} to{transform:translateY(8px)}}

/* ---------- Sections ---------- */
.section{padding:48px 0}
.section-title{font-size: clamp(22px, 3vw, 32px); margin:0 0 18px}

.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
@media (max-width: 920px){ .grid-3{grid-template-columns: 1fr 1fr} }
@media (max-width: 640px){ .grid-3{grid-template-columns: 1fr} }

.card{
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface-2) 70%, transparent));
  border:1px solid color-mix(in oklab, var(--muted) 20%, transparent);
  border-radius: var(--radius);
  padding:18px; box-shadow: var(--shadow);
  transition: transform .25s ease, border-color .25s ease;
}
.card:hover{transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 28%, transparent)}
.card h3{margin:6px 0 8px}
.card p{margin:0 0 12px; color:var(--muted)}

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  backdrop-filter: blur(6px);
}
.list{padding-left:18px; margin:0 0 12px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid transparent;
  background: color-mix(in oklab, var(--surface-2) 40%, transparent);
  color:var(--text); text-decoration:none; font-weight:600;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.btn:hover{transform: translateY(-1px); background: color-mix(in oklab, var(--surface-2) 70%, transparent)}
.btn:focus{outline:2px solid var(--ring); outline-offset:2px}
.btn-primary{background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 70%, transparent), color-mix(in oklab, var(--accent) 50%, transparent)); border-color: color-mix(in oklab, var(--accent) 40%, transparent)}
.btn-primary:hover{box-shadow: 0 8px 20px color-mix(in oklab, var(--accent) 25%, transparent)}
.btn-outline{border-color: color-mix(in oklab, var(--muted) 30%, transparent); background: transparent}
.btn-small{padding:8px 12px; font-size:.95em}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid color-mix(in oklab, var(--muted) 20%, transparent); margin-top:24px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0}
.muted{color:var(--muted)}