@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,600&display=swap");

:root { --ink:#f6f4ff; --muted:#9c9bb7; --panel:rgba(24,27,52,.72); --line:rgba(255,255,255,.1); --purple:#8173ff; --purple-light:#aaa1ff; --mint:#56e0bb; --gold:#ffc971; --danger:#ff7085; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#0e1021; color:var(--ink); font-family:Manrope,Arial,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.ambient { border-radius:50%; filter:blur(100px); opacity:.18; position:fixed; pointer-events:none; }
.ambient-one { background:#6555ff; height:600px; right:-120px; top:-100px; width:600px; }
.ambient-two { background:#16b893; bottom:15%; height:380px; left:-180px; width:380px; }
.topbar, main, footer { margin:auto; max-width:1180px; padding-left:24px; padding-right:24px; }
.topbar { align-items:center; display:flex; height:82px; justify-content:space-between; }
.brand { align-items:center; display:flex; gap:12px; }
.brand-mark { align-items:center; background:linear-gradient(135deg,var(--purple),#5744ef); border-radius:12px; box-shadow:0 6px 22px rgba(98,78,245,.35); display:flex; font-family:"DM Mono"; font-size:12px; height:38px; justify-content:center; width:38px; }
.brand small { color:var(--muted); display:block; font-family:"DM Mono"; font-size:9px; letter-spacing:1px; margin-top:3px; text-transform:uppercase; }
nav { align-items:center; display:flex; gap:26px; } nav>a:not(.button) { color:var(--muted); font-size:13px; } nav>a:hover { color:#fff; }
.button { border:1px solid transparent; border-radius:10px; display:inline-flex; font-size:13px; font-weight:700; gap:15px; padding:12px 17px; transition:.2s; }
.button:hover { transform:translateY(-2px); }.button-primary { background:var(--purple); box-shadow:0 7px 26px rgba(98,78,245,.3); }.button-subtle,.button-ghost { border-color:var(--line); }.button-ghost { color:#d3d0e5; }
.hero { align-items:center; display:grid; gap:60px; grid-template-columns:1.1fr .9fr; min-height:630px; padding-bottom:90px; padding-top:60px; }
.eyebrow { color:var(--mint); font-family:"DM Mono"; font-size:10px; letter-spacing:1.8px; text-transform:uppercase; }.eyebrow span { background:var(--mint); display:inline-block; height:1px; margin:0 8px 3px 0; width:24px; }
h1 { font-size:76px; letter-spacing:-5px; line-height:.98; margin:20px 0; max-width:640px; } em { color:var(--purple-light); font-family:"Playfair Display"; font-weight:600; }
.hero-text { color:var(--muted); font-size:17px; line-height:1.8; max-width:590px; }.actions { display:flex; gap:10px; margin-top:30px; }.trust-row { color:var(--muted); display:flex; font-size:11px; gap:22px; margin-top:32px; }.trust-row b { color:var(--mint); }
.hero-visual { min-height:410px; position:relative; }.glow { background:var(--purple); border-radius:50%; filter:blur(90px); height:240px; opacity:.22; position:absolute; right:80px; top:50px; width:240px; }
.glass { backdrop-filter:blur(20px); background:var(--panel); border:1px solid var(--line); box-shadow:0 24px 70px rgba(0,0,0,.25); }
.count-card { border-radius:20px; padding:28px; position:absolute; right:10px; top:45px; width:380px; }.card-top { color:var(--mint); font-family:"DM Mono"; font-size:10px; letter-spacing:1px; }.card-top small { color:var(--muted); float:right; }.live-dot { background:var(--mint); border-radius:50%; box-shadow:0 0 12px var(--mint); display:inline-block; height:6px; margin-right:7px; width:6px; }
.big-number { display:block; font-size:66px; letter-spacing:-5px; margin:35px 0 22px; }.progress { background:rgba(255,255,255,.08); border-radius:4px; height:4px; }.progress i { background:linear-gradient(90deg,var(--purple),var(--mint)); border-radius:4px; display:block; height:4px; width:72%; }.count-meta { color:var(--muted); display:flex; font-size:11px; justify-content:space-between; margin-top:14px; }.count-meta b { color:#fff; }
.float-card { align-items:center; border-radius:14px; display:flex; gap:13px; padding:15px; position:absolute; }.float-card span { align-items:center; background:rgba(86,224,187,.14); border-radius:9px; color:var(--mint); display:flex; height:34px; justify-content:center; width:34px; }.float-card b,.float-card small { display:block; font-size:11px; }.float-card small { color:var(--muted); font-size:10px; margin-top:3px; }.streak { left:-20px; top:0; }.members { bottom:25px; right:-18px; }
.features { border-top:1px solid var(--line); display:grid; gap:60px; grid-template-columns:1fr 1.4fr; padding-bottom:130px; padding-top:100px; } h2 { font-size:45px; letter-spacing:-2.5px; line-height:1.1; margin:12px 0; }.feature-grid { display:grid; gap:15px; grid-template-columns:repeat(3,1fr); }.feature-grid article { background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:14px; padding:20px; }.feature-grid b { color:var(--purple-light); font-family:"DM Mono"; font-size:11px; }.feature-grid h3 { font-size:15px; margin:40px 0 9px; }.feature-grid p { color:var(--muted); font-size:12px; line-height:1.7; margin:0; }
.dashboard-section { padding-bottom:130px; }.dashboard-section.standalone { min-height:calc(100vh - 153px); padding-top:70px; }.section-heading { align-items:end; display:flex; justify-content:space-between; margin-bottom:25px; }.section-heading p:last-child { color:var(--muted); font-size:13px; max-width:360px; }.app-shell { border-radius:18px; min-height:400px; overflow:hidden; }.loading,.empty { color:var(--muted); padding:90px 25px; text-align:center; }
.login-panel,.error-panel { align-items:center; display:flex; flex-direction:column; justify-content:center; min-height:400px; padding:35px; text-align:center; }.login-panel h3,.error-panel h3 { font-size:24px; margin:5px 0; }.login-panel p,.error-panel p { color:var(--muted); font-size:13px; line-height:1.7; max-width:490px; }.error-mark { align-items:center; background:rgba(255,112,133,.12); border:1px solid rgba(255,112,133,.3); border-radius:50%; color:var(--danger); display:flex; font-family:"DM Mono"; font-size:22px; height:58px; justify-content:center; margin-bottom:16px; width:58px; }.error-panel .actions { margin-top:18px; }.error-panel .button { cursor:pointer; }
.server-overview { min-height:400px; padding:28px; }.overview-copy h3 { font-size:24px; margin:7px 0; }.overview-copy>p:last-child { color:var(--muted); font-size:12px; line-height:1.7; margin:0; max-width:570px; }.server-grid { display:grid; gap:12px; grid-template-columns:repeat(3,1fr); margin-top:26px; }.server-card { align-items:center; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:11px; display:flex; gap:12px; padding:16px; transition:.2s; }.server-card:hover { background:rgba(129,115,255,.13); border-color:rgba(129,115,255,.3); transform:translateY(-2px); }.server-icon { align-items:center; background:#393657; border-radius:8px; display:flex; flex:0 0 auto; font-size:11px; height:28px; justify-content:center; overflow:hidden; width:28px; }.server-icon.large { height:42px; width:42px; }.server-icon img { height:100%; width:100%; }.server-card b,.server-card small { display:block; }.server-card b { font-size:12px; }.server-card small { color:var(--muted); font-size:10px; margin-top:4px; }.server-card i { color:var(--purple-light); font-style:normal; margin-left:auto; }
.server-page { min-height:560px; }.server-content { padding:26px; }.content-top { align-items:center; display:flex; justify-content:space-between; }.server-content h3 { font-size:23px; margin:5px 0 0; }.back-link { color:var(--purple-light); display:inline-block; font-size:10px; font-weight:700; margin-bottom:4px; }.subtle { color:var(--muted); font-size:11px; }.stat-grid { display:grid; gap:10px; grid-template-columns:repeat(4,1fr); margin:22px 0; }.stat { background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:11px; padding:15px; }.stat small { color:var(--muted); display:block; font-size:10px; }.stat b { display:block; font-size:25px; letter-spacing:-1px; margin-top:7px; }
.panel-grid { display:grid; gap:12px; grid-template-columns:1.25fr .75fr; }.panel { background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:11px; padding:16px; }.panel h4 { font-size:13px; margin:0 0 14px; }.field { margin:12px 0; }.field label { color:var(--muted); display:block; font-size:10px; margin-bottom:6px; }.field select,.field input { background:#151833; border:1px solid var(--line); border-radius:7px; color:#fff; font:inherit; font-size:11px; padding:9px; width:100%; }.switch-row { align-items:center; color:#c8c6d8; display:flex; font-size:11px; justify-content:space-between; margin:11px 0; }.switch-row input { accent-color:var(--purple); }.panel-actions { display:flex; gap:7px; margin-top:16px; }.small-button { background:var(--purple); border:0; border-radius:7px; color:#fff; cursor:pointer; font-size:10px; font-weight:700; padding:9px 11px; }.small-button.danger { background:rgba(255,112,133,.12); color:var(--danger); }
.ranking { list-style:none; margin:0; padding:0; }.ranking li { border-bottom:1px solid var(--line); display:flex; font-size:11px; gap:8px; padding:8px 0; }.ranking i { color:var(--purple-light); font-style:normal; width:18px; }.ranking b { margin-left:auto; }.events { grid-column:1 / -1; }.event-list { display:flex; flex-wrap:wrap; gap:7px; }.event { background:rgba(255,255,255,.04); border-radius:6px; color:var(--muted); font-size:10px; padding:7px 9px; }.event b { color:#fff; }.notice { background:rgba(255,201,113,.1); border:1px solid rgba(255,201,113,.2); border-radius:8px; color:var(--gold); font-size:11px; margin-bottom:12px; padding:10px; }
footer { border-top:1px solid var(--line); color:var(--muted); display:flex; font-size:11px; justify-content:space-between; padding-bottom:28px; padding-top:28px; }
@media (max-width:850px) { nav>a:not(.button){display:none}.hero{display:block;min-height:auto;padding-top:70px}.hero-visual{display:none}h1{font-size:60px}.features{display:block;padding-bottom:90px}.feature-grid{margin-top:32px}.server-grid{grid-template-columns:repeat(2,1fr)}.stat-grid{grid-template-columns:repeat(2,1fr)}.panel-grid{display:block}.panel{margin-top:10px}.events{margin-top:10px} }
@media (max-width:500px) { h1{font-size:49px;letter-spacing:-3px}.feature-grid,.server-grid{grid-template-columns:1fr}.server-content,.server-overview{padding:16px}.section-heading{display:block}.trust-row{gap:10px;flex-wrap:wrap}.topbar{padding:0 16px}.topbar nav{gap:8px}.dashboard-section{padding-bottom:70px}.big-number{font-size:50px} }