:root{--bg: #0b1020;--primary: #7c3aed;--primary-2: #22d3ee;--text: #e5e7eb;--muted: #94a3b8;--glass: rgba(255,255,255,.06);--border: rgba(255,255,255,.12)}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:radial-gradient(1200px 600px at 10% 10%,#111827 0%,var(--bg) 50%) no-repeat fixed}.container{max-width:1280px;margin:0 auto;padding:48px}.hero{display:grid;grid-template-columns:1fr;gap:12px;align-items:center;margin-top:24px;margin-bottom:12px}.brand{display:flex;align-items:center;gap:14px;letter-spacing:.5px}.logo{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:grid;place-items:center;box-shadow:0 12px 40px #7c3aed59}.title{font-size:34px;font-weight:800}.tagline{font-size:16px;color:var(--muted);margin-top:6px}.badge{padding:10px 14px;border:1px solid var(--border);border-radius:14px;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text)}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:40px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 700px){.grid,.hero{grid-template-columns:1fr}}.card{position:relative;border:1px solid var(--border);background:var(--glass);border-radius:20px;padding:24px;overflow:hidden}.card:before{content:"";position:absolute;inset:-60% -30% auto auto;width:420px;height:420px;background:radial-gradient(300px 300px at 50% 50%,rgba(124,58,237,.2),rgba(34,211,238,.12),transparent 70%);transform:rotate(25deg);pointer-events:none}.card-head{display:flex;align-items:center;gap:12px}.card-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#ffffff14}.card-title{font-weight:700;font-size:18px}.card-sub{color:var(--muted);font-size:13px}.card-body{margin-top:14px}.card-desc{color:var(--muted);font-size:15px;margin-top:10px}.preview{margin-top:16px;border:1px dashed rgba(255,255,255,.16);border-radius:14px;padding:20px;background:#ffffff0a}.footer{margin-top:28px;color:var(--muted);font-size:13px;text-align:center}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#ffffff0f;color:var(--text)}.digits{display:flex;gap:12px;align-items:baseline}.digit{font-size:42px;font-weight:800;letter-spacing:2px;color:#e9d5ff;text-shadow:0 0 12px rgba(124,58,237,.55)}.colon{opacity:.7}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.swatch{height:56px;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#000000b3}.swatch.dark{color:#fff}.chart{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metric{border:1px solid var(--border);border-radius:10px;padding:12px;background:#ffffff0a}.metric-title{font-size:12px;color:var(--muted)}.metric-value{font-size:20px;font-weight:800}.spark{width:100%;height:50px}.orb{position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(closest-side,#22d3eecc,#22d3ee00);filter:blur(18px)}