:root{--bg:#030712;--panel:rgba(8,19,43,.76);--panel2:#07142c;--line:rgba(87,170,255,.22);--blue:#35a7ff;--cyan:#6ce7ff;--text:#f5f9ff;--muted:#9db0ca;--danger:#ff735c;--radius:22px;--shadow:0 24px 80px rgba(0,0,0,.38)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 50% 0,#0b2a61 0,#041027 35%,var(--bg) 72%);line-height:1.6}body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 80%)}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 36px));margin:auto}.site-header{position:fixed;z-index:50;top:0;left:0;right:0;border-bottom:1px solid transparent;transition:.25s}.site-header.scrolled{background:rgba(3,9,23,.88);backdrop-filter:blur(18px);border-color:var(--line)}.navbar{height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand img{width:150px;filter:drop-shadow(0 0 14px rgba(66,184,255,.4))}.nav-links{display:flex;align-items:center;gap:24px;font-weight:700;font-size:.94rem}.nav-links a{color:#dbeafe;opacity:.82}.nav-links a:hover,.nav-links a.active{opacity:1;color:#7dd3fc}.nav-cta{padding:11px 18px;border-radius:999px;background:linear-gradient(135deg,#1687ff,#55d7ff);color:#03111f!important;box-shadow:0 10px 30px rgba(35,167,255,.28)}.menu-btn{display:none;border:1px solid var(--line);background:rgba(8,18,42,.8);color:white;border-radius:12px;width:44px;height:44px;font-size:1.25rem}.hero{min-height:100vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:linear-gradient(rgba(1,7,20,.4),rgba(1,7,20,.78)),url('../images/backgrounds/hero.png') center/cover}.hero::after{content:"";position:absolute;inset:auto 0 0;height:240px;background:linear-gradient(transparent,var(--bg))}.hero-content{position:relative;z-index:2;padding:125px 0 100px}.hero-logo{width:min(700px,92vw);margin:0 auto 18px;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 0 28px rgba(44,173,255,.4))}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:900;color:#74d9ff}.hero h1,.page-hero h1{font-size:clamp(2.1rem,5vw,4.4rem);line-height:1.05;margin:12px 0}.hero p{max-width:720px;margin:0 auto 28px;color:#c8d8ed;font-size:1.08rem}.hero-actions,.button-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:14px;padding:14px 21px;font-weight:850;cursor:pointer;transition:.2s;background:linear-gradient(135deg,#198cff,#5ee1ff);color:#03111f;box-shadow:0 12px 28px rgba(20,143,255,.24)}.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(20,143,255,.34)}.btn.secondary{background:rgba(8,23,52,.75);color:#eef8ff;border:1px solid var(--line);box-shadow:none}.server-pill{margin:24px auto 0;display:flex;align-items:center;justify-content:center;gap:12px;width:max-content;max-width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(3,13,33,.68);backdrop-filter:blur(12px);font-weight:800}.status-dot{width:10px;height:10px;border-radius:50%;background:#5ee78a;box-shadow:0 0 16px #5ee78a}.status-dot.offline{background:#ff6b6b;box-shadow:0 0 16px #ff6b6b}.section{padding:96px 0}.section-head{text-align:center;max-width:760px;margin:0 auto 42px}.section-head h2{font-size:clamp(2rem,4vw,3.2rem);margin:8px 0}.section-head p{color:var(--muted)}.grid{display:grid;gap:22px}.features{grid-template-columns:repeat(3,1fr)}.card{background:linear-gradient(180deg,rgba(11,31,68,.82),rgba(5,14,34,.82));border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}.feature-icon{font-size:2rem}.card h3{margin:12px 0 8px}.card p{color:var(--muted);margin:0}.modes{grid-template-columns:repeat(4,1fr)}.mode-card{position:relative;overflow:hidden;min-height:210px}.mode-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(74,194,255,.2),transparent 45%)}.mode-card>*{position:relative}.tag{display:inline-flex;padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:.76rem;font-weight:900;color:#89e8ff}.tag.live{background:rgba(28,190,108,.12);color:#75f0aa;border-color:rgba(81,240,163,.24)}.page-hero{padding:150px 0 72px;text-align:center;background:linear-gradient(rgba(1,7,20,.5),rgba(3,7,18,.96)),url('../images/backgrounds/hero.png') center/cover}.store-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:30px;flex-wrap:wrap}.tab-btn{padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:rgba(7,19,44,.72);color:#dcecff;font-weight:800;cursor:pointer}.tab-btn.active{background:linear-gradient(135deg,#1687ff,#55d7ff);color:#03111f}.rank-grid{grid-template-columns:repeat(3,1fr)}.rank-card{padding:18px;overflow:hidden;position:relative}.rank-card.popular{border-color:rgba(91,218,255,.7);box-shadow:0 0 0 1px rgba(91,218,255,.15),0 25px 80px rgba(20,125,255,.24)}.popular-label{position:absolute;right:16px;top:16px;background:#67e8f9;color:#042033;font-size:.7rem;font-weight:950;padding:6px 9px;border-radius:999px;z-index:2}.rank-art{height:180px;display:grid;place-items:center}.rank-art img{max-height:165px;object-fit:contain;filter:drop-shadow(0 12px 28px rgba(0,0,0,.42));transition:.25s}.rank-card:hover .rank-art img{transform:scale(1.04) translateY(-3px)}.price{font-size:2rem;font-weight:950;margin:4px 0 14px}.price span{font-size:.9rem;color:var(--muted)}.benefits{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:9px;color:#cbdcf1}.benefits li::before{content:"✓";color:#5ce1ff;font-weight:900;margin-right:9px}.coming{min-height:350px;display:grid;place-items:center;text-align:center}.coming .big-icon{font-size:4rem}.staff-grid{grid-template-columns:repeat(4,1fr)}.staff-card{text-align:center;padding-top:30px}.staff-card img{height:250px;margin:auto;object-fit:contain;filter:drop-shadow(0 16px 25px rgba(0,0,0,.45));transition:.25s}.staff-card:hover img{transform:translateY(-6px)}.role{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:950;color:#67dfff}.rules-grid{grid-template-columns:repeat(2,1fr)}.rule{display:flex;gap:15px}.rule-number{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(42,161,255,.14);border:1px solid var(--line);font-weight:950;color:#75ddff}.contact-grid{grid-template-columns:repeat(4,1fr)}.contact-card{text-align:center}.contact-card .icon{font-size:2.3rem}.site-footer{border-top:1px solid var(--line);padding:48px 0 26px;background:#020611}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}.footer-logo{width:180px}.footer-links{display:grid;gap:8px;color:var(--muted)}.footer-bottom{margin-top:35px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:20px;color:#7890ac;font-size:.88rem}.toast{position:fixed;right:22px;bottom:22px;z-index:100;padding:14px 18px;border-radius:14px;background:#0c234a;border:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(120px);opacity:0;transition:.25s}.toast.show{transform:none;opacity:1}.reveal{opacity:0;transform:translateY(20px);transition:.65s}.reveal.visible{opacity:1;transform:none}@keyframes float{50%{transform:translateY(-10px)}}@media(max-width:920px){.features,.rank-grid{grid-template-columns:repeat(2,1fr)}.modes,.staff-grid,.contact-grid{grid-template-columns:repeat(2,1fr)}.nav-links{position:absolute;top:80px;left:18px;right:18px;display:none;flex-direction:column;align-items:stretch;padding:18px;background:rgba(3,10,25,.96);border:1px solid var(--line);border-radius:18px}.nav-links.open{display:flex}.menu-btn{display:block}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.container{width:min(100% - 24px,1180px)}.brand img{width:125px}.hero-content{padding-top:120px}.features,.rank-grid,.modes,.staff-grid,.rules-grid,.contact-grid,.footer-grid{grid-template-columns:1fr}.section{padding:72px 0}.rank-art{height:150px}.staff-card img{height:220px}.footer-bottom{flex-direction:column}.server-pill{border-radius:18px;flex-wrap:wrap}.hero-actions .btn{width:100%}}