* { box-sizing: border-box; }
:root { color-scheme: light dark; --void:#0C013A; --indigo:#140556; --violet:#6F4CFF; --blue:#486FE6; --cyan:#10B7C7; --magenta:#C262E7; --spark:#E99F69; --glass:#C5C4F6; --bg:#F7F5FF; --surface:rgba(255,255,255,.88); --surface-strong:#fff; --text:#101827; --muted:#657084; --border:rgba(20,5,86,.12); --primary:var(--violet); --primary-dark:#503FC1; --accent:var(--cyan); --shadow:0 22px 70px rgba(12,1,58,.16); --radius:24px; }
@media (prefers-color-scheme: dark) { :root { --bg:var(--void); --surface:rgba(20,5,86,.70); --surface-strong:#18065D; --text:#F8FAFC; --muted:#C5C4F6; --border:rgba(197,196,246,.16); --shadow:0 22px 70px rgba(0,0,0,.42); } }
html, body { margin:0; padding:0; min-height:100%; }
body { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; background:radial-gradient(circle at top left, rgba(111,76,255,.22), transparent 34%), radial-gradient(circle at top right, rgba(16,183,199,.18), transparent 30%), radial-gradient(circle at 50% 8%, rgba(194,98,231,.10), transparent 28%), var(--bg); color:var(--text); line-height:1.62; }
a { color:inherit; text-decoration:none; } a:hover { text-decoration:underline; }
.container { width:min(1120px, calc(100% - 32px)); margin:0 auto; } .page { padding:28px 0 48px; }
.topbar { display:flex; align-items:center; gap:16px; margin-bottom:18px; } .brand { font-weight:850; letter-spacing:-.03em; flex:0 0 auto; } .nav { margin-left:auto; } .topbar-actions { display:flex; align-items:center; gap:10px; }
.nav, .language-fallback { display:flex; gap:12px; flex-wrap:wrap; } .nav a, .language-fallback a { color:var(--muted); font-weight:650; }
.language-select-label { display:block; color:var(--muted); font-weight:650; margin-bottom:10px; }
.language-select { width:min(100%, 360px); min-height:48px; appearance:auto; border:1px solid var(--border); border-radius:16px; background:var(--surface-strong); color:var(--text); padding:0 14px; font:inherit; font-weight:700; box-shadow:0 8px 24px rgba(15,23,42,.08); } .topbar-language-select { width:auto; min-width:132px; min-height:40px; border-radius:999px; font-size:14px; padding:0 12px; }
.language-fallback { margin-top:12px; }
.hero, .section { background:var(--surface); backdrop-filter:blur(18px); border:1px solid var(--border); box-shadow:var(--shadow); }
.hero { border-radius:32px; padding:32px; } .hero-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:28px; align-items:center; }
.kicker { display:inline-flex; color:var(--primary); background:rgba(111,76,255,.10); padding:8px 12px; border-radius:999px; font-size:13px; margin-bottom:14px; }
h1,h2,h3 { margin:0 0 12px; line-height:1.15; } h1 { font-size:clamp(36px,5vw,56px); letter-spacing:-.035em; } h2 { font-size:clamp(24px,3vw,34px); letter-spacing:-.025em; }
.lead { font-size:18px; color:var(--muted); max-width:65ch; } .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:0 18px; border-radius:999px; border:1px solid var(--border); background:var(--surface-strong); box-shadow:0 8px 24px rgba(15,23,42,.08); font-weight:750; }
.button.primary { background:linear-gradient(135deg,var(--violet),var(--blue)); color:#fff; border-color:transparent; } .section { margin-top:24px; border-radius:var(--radius); padding:24px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; } .feature { background:rgba(255,255,255,.58); border:1px solid var(--border); border-radius:20px; padding:18px; }
@media (prefers-color-scheme: dark) { .feature { background:rgba(255,255,255,.06); } } .feature p, .section p, .section li, .footer, .small { color:var(--muted); }
.box-card { display:grid; gap:12px; } .box-visual { min-height:180px; border-radius:28px; border:1px solid var(--border); background:linear-gradient(135deg, rgba(12,1,58,.94), rgba(80,63,193,.72)), radial-gradient(circle at 24% 24%, rgba(16,183,199,.86), transparent 15%), radial-gradient(circle at 74% 34%, rgba(194,98,231,.70), transparent 16%), radial-gradient(circle at 58% 74%, rgba(233,159,105,.62), transparent 14%), radial-gradient(circle at 44% 50%, rgba(111,76,255,.90), transparent 24%); position:relative; overflow:hidden; } .box-visual:after { content:"YiBox"; position:absolute; left:22px; bottom:18px; font-weight:900; font-size:32px; color:rgba(255,255,255,.88); letter-spacing:-.04em; }
ul { padding-left:1.25rem; } .footer { text-align:center; padding:28px 0 12px; font-size:14px; } .notice { border-left:4px solid var(--primary); padding:14px 16px; background:rgba(111,76,255,.08); border-radius:14px; color:var(--muted); }
@media (max-width:860px) { .hero-grid, .feature-grid { grid-template-columns:1fr; } .hero { padding:24px; } .topbar { align-items:flex-start; flex-direction:column; } .nav { margin-left:0; } .topbar-language-select { width:min(100%, 240px); } }