:root {
  --bg: #050c12;
  --panel: rgba(9, 22, 32, .74);
  --panel-strong: rgba(7, 17, 25, .9);
  --line: rgba(197, 238, 255, .16);
  --line-strong: rgba(197, 238, 255, .3);
  --text: #f4fbff;
  --muted: #a4b6c1;
  --accent: #59d6ff;
  --accent-2: #7185ff;
  --ok: #6af5b6;
  --warn: #ffd36a;
  --danger: #ff6f82;
  --radius: 28px;
  --shadow: 0 32px 80px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #041019;
  overflow-x: hidden;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { background: rgba(89,214,255,.25); }

.parallax {
  position: fixed; inset: 0; z-index: -10; overflow: hidden; background: #041019;
}
.parallax__layer { position: absolute; inset: -7%; will-change: transform; transition: transform .12s linear; }
.parallax__far {
  background:
    radial-gradient(circle at 18% 22%, rgba(81,181,222,.34), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(59,91,151,.32), transparent 30%),
    linear-gradient(145deg, #0a2838 0%, #071621 45%, #051018 100%);
  filter: blur(2px);
}
.parallax__mid {
  opacity: .75;
  background:
    linear-gradient(140deg, transparent 0 48%, rgba(22,73,94,.8) 49% 61%, transparent 62%),
    linear-gradient(28deg, transparent 0 57%, rgba(31,92,114,.55) 58% 70%, transparent 71%);
  transform: scale(1.15);
  filter: blur(18px);
}
.parallax__near {
  inset: -12%; opacity: .5;
  background:
    radial-gradient(ellipse at 25% 78%, rgba(30,117,142,.35), transparent 42%),
    radial-gradient(ellipse at 78% 72%, rgba(57,72,115,.28), transparent 40%);
  filter: blur(32px);
}
.parallax::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(4,13,20,.1), rgba(4,13,20,.6));
}

.page-wrap { width: min(1240px, calc(100% - 34px)); margin: 0 auto; padding: 44px 0 54px; }
.site-shell {
  position: relative;
  min-height: min(800px, calc(100vh - 88px));
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(14,38,52,.2), rgba(4,15,22,.72));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(125%);
}
.site-shell::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:30;
  background: linear-gradient(120deg, rgba(255,255,255,.05), transparent 20% 80%, rgba(86,206,255,.04));
}
.navbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 30px;
  height: 92px; padding: 0 38px;
  background: linear-gradient(180deg, rgba(6,15,23,.55), transparent);
}
.brand { display:flex; align-items:center; gap:11px; margin-right: 12px; font-weight: 800; letter-spacing: .13em; }
.brand img { width: 34px; height:34px; }
.brand small { display:block; margin-top:2px; font-size:9px; color:var(--muted); letter-spacing:.22em; font-weight:600; }
.nav-links { display:flex; align-items:center; gap: 26px; }
.nav-links a { position:relative; color: #d8e3e9; font-size:14px; padding: 10px 0; opacity:.78; transition:.2s; }
.nav-links a:hover, .nav-links a.active { opacity:1; color:#fff; }
.nav-links a::after { content:""; position:absolute; left:0; right:100%; bottom:3px; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:.22s; }
.nav-links a:hover::after, .nav-links a.active::after { right:0; }
.nav-actions { margin-left:auto; display:flex; gap:10px; align-items:center; }
.server-pill { display:flex; gap:8px; align-items:center; color:#dce8ec; font-size:12px; border:1px solid var(--line); background:rgba(6,20,29,.4); border-radius:999px; padding:9px 12px; }
.server-dot { width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok); }
.icon-btn { width:42px;height:42px;border:1px solid var(--line);border-radius:13px;background:rgba(5,16,24,.38);cursor:pointer;display:grid;place-items:center;transition:.2s; }
.icon-btn:hover { background:rgba(89,214,255,.11); border-color:rgba(89,214,255,.4); }
.hamburger { display:none; }
.hamburger span, .hamburger::before, .hamburger::after { content:""; width:18px; height:1.5px; display:block; background:#fff; margin:4px 0; }

.btn { border:1px solid transparent; border-radius:12px; padding:12px 18px; cursor:pointer; transition: .22s ease; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:650; font-size:13px; }
.btn-primary { background: linear-gradient(135deg, #22b9ee, #5f7dff); box-shadow:0 12px 32px rgba(53,158,234,.24); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 38px rgba(53,158,234,.34); }
.btn-ghost { background:rgba(5,16,24,.28); border-color: rgba(224,247,255,.5); color:#eaf7fb; }
.btn-ghost:hover { background:rgba(222,247,255,.08); }
.btn-sm { padding:9px 13px; border-radius:10px; }

.hero-stage { position: relative; min-height: 790px; height: calc(100vh - 88px); max-height: 900px; }
.hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition: opacity .65s ease, visibility .65s; background-position:center; background-size:cover; }
.hero-slide.active { opacity:1; visibility:visible; }
.hero-slide::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,12,18,.84) 0%,rgba(4,12,18,.48) 42%,rgba(4,12,18,.1) 70%,rgba(4,12,18,.38) 100%),linear-gradient(0deg,rgba(4,12,18,.82),transparent 55%); }
.hero-slide__content { position:absolute; z-index:5; left:70px; top:50%; width:min(570px, 52%); transform:translateY(-45%); }
.eyebrow { display:flex; align-items:center; gap:10px; color:#bceefe; font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; }
.eyebrow::before { content:""; width:28px;height:1px;background:var(--accent);box-shadow:0 0 12px var(--accent); }
.hero-title { font-size: clamp(48px, 6vw, 78px); line-height:.92; letter-spacing:.02em; margin:0 0 20px; text-transform:uppercase; }
.hero-title span { color:transparent; -webkit-text-stroke:1px rgba(220,247,255,.75); text-shadow:0 0 24px rgba(89,214,255,.15); }
.hero-copy { max-width: 530px; color:#d1dde2; line-height:1.55; font-size:15px; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.hero-actions { display:flex; gap:12px; margin-top:24px; }
.hero-meta { display:flex; gap:18px; align-items:center; margin-top:20px; color:#a8bec8; font-size:12px; }
.hero-meta b { color:#fff; font-size:13px; }
.hero-side { position:absolute; right:28px; top:50%; z-index:10; transform:translateY(-50%); display:flex; align-items:center; gap:14px; color:#9eb1ba; font-size:12px; }
.next-slide { width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:rgba(5,15,22,.4);cursor:pointer;display:grid;place-items:center; }
.next-slide::after { content:""; width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg) translate(-1px,1px); }

.carousel-dock { position:absolute; left:70px; right:70px; bottom:34px; z-index:20; }
.thumb-track { display:flex; gap:18px; overflow:auto; padding:4px 2px 10px; scrollbar-width:none; }
.thumb-track::-webkit-scrollbar{display:none}
.thumb { min-width:210px; width:210px; height:118px; border:1px solid rgba(223,246,255,.26); border-radius:10px; overflow:hidden; cursor:pointer; position:relative; background:#0a151d; transition:.25s; box-shadow:0 9px 24px rgba(0,0,0,.22); }
.thumb img { width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82) brightness(.8);transition:.25s; }
.thumb.active { transform:translateY(-4px); border-color:rgba(210,247,255,.72); box-shadow:0 12px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(89,214,255,.14); }
.thumb.active img, .thumb:hover img { filter:saturate(1) brightness(1); transform:scale(1.035); }
.thumb::after { content:attr(data-label); position:absolute; left:10px; bottom:8px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; background:rgba(3,10,15,.56); padding:5px 8px; border-radius:7px; backdrop-filter:blur(6px); }
.progress { width:160px;height:3px;border-radius:999px;background:rgba(217,244,255,.15);margin:8px auto 0;overflow:hidden; }
.progress span { display:block;height:100%;width:33.33%;background:#dffaff;border-radius:999px;transition:transform .35s;transform-origin:left center; }

.modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; transition:.28s; }
.modal.open { opacity:1; visibility:visible; }
.modal__backdrop { position:absolute; inset:0; background:rgba(0,7,11,.72); backdrop-filter:blur(14px); }
.modal__window { position:relative; width:min(500px, 100%); border:1px solid rgba(188,239,255,.22); border-radius:24px; background:linear-gradient(160deg,rgba(16,36,48,.95),rgba(6,16,24,.97)); box-shadow:0 40px 110px rgba(0,0,0,.58); padding:30px; transform:translateY(18px) scale(.97); transition:.28s; overflow:hidden; }
.modal.open .modal__window { transform:none; }
.modal__window::before { content:""; position:absolute; width:220px;height:220px;right:-80px;top:-100px;border-radius:50%;background:rgba(89,214,255,.13);filter:blur(30px); }
.modal__header { display:flex; align-items:start; gap:16px; margin-bottom:24px; }
.modal__header h2 { margin:0; font-size:25px; }
.modal__header p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.modal__close { margin-left:auto; flex:0 0 auto; }
.form-grid { display:grid; gap:14px; }
.field label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.11em; color:#aec2cc; margin:0 0 7px 2px; }
.field input { width:100%; border:1px solid rgba(210,243,255,.16); border-radius:12px; background:rgba(2,10,15,.52); color:#fff; padding:13px 14px; outline:none; transition:.2s; }
.field input:focus { border-color:rgba(89,214,255,.62); box-shadow:0 0 0 3px rgba(89,214,255,.08); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-note { font-size:11px;color:#8fa6b2;line-height:1.5; }
.form-status { min-height:18px; font-size:12px; color:var(--muted); }
.form-status.success { color:var(--ok); }.form-status.error { color:var(--danger); }

.toast { position:fixed; right:24px; bottom:24px; z-index:300; padding:13px 16px; border:1px solid var(--line); background:rgba(6,17,25,.94); backdrop-filter:blur(12px); border-radius:12px; color:#e8f6fb; font-size:12px; transform:translateY(20px); opacity:0; pointer-events:none; transition:.25s; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.toast.show { opacity:1; transform:none; }

/* interior pages */
.inner-shell { min-height: calc(100vh - 88px); padding:125px 48px 48px; background:linear-gradient(180deg,rgba(8,22,32,.78),rgba(4,12,18,.9)); }
.page-hero { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:32px; }
.page-kicker { color:#8ceaff;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px; }
.page-hero h1 { margin:0; font-size:clamp(36px,5vw,62px); letter-spacing:-.035em; }
.page-hero p { color:var(--muted); max-width:600px; line-height:1.55; margin:10px 0 0; }
.panel { border:1px solid var(--line); border-radius:20px; background:rgba(7,18,27,.58); backdrop-filter:blur(12px); box-shadow:0 18px 45px rgba(0,0,0,.2); }
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab-btn { border:1px solid var(--line); color:#b8cad3; background:rgba(3,13,19,.45); padding:10px 14px;border-radius:11px;cursor:pointer;font-size:12px;transition:.2s; }
.tab-btn.active { color:#fff; border-color:rgba(89,214,255,.42); background:rgba(89,214,255,.12);box-shadow:inset 0 0 18px rgba(89,214,255,.06); }
.search-box { min-width:230px; border:1px solid var(--line); background:rgba(3,12,18,.48); border-radius:11px; padding:10px 12px; color:#fff; outline:none; }
.search-box:focus { border-color:rgba(89,214,255,.42); }
.table-toolbar { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px;border-bottom:1px solid var(--line); }
.ranking-table-wrap { overflow:auto; }
.ranking-table { width:100%; border-collapse:collapse; min-width:760px; }
.ranking-table th { text-align:left; padding:14px 18px; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:#8fa6b0; background:rgba(255,255,255,.018); }
.ranking-table td { padding:14px 18px; border-top:1px solid rgba(213,244,255,.075); color:#dce8ed; font-size:13px; }
.ranking-table tr:hover td { background:rgba(89,214,255,.035); }
.rank-no { color:#92aab5; font-variant-numeric:tabular-nums; }
.rank-badge { width:28px;height:28px;border-radius:9px;display:inline-grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);font-weight:800; }
.ranking-table tr:nth-child(1) .rank-badge { background:rgba(255,211,106,.12);border-color:rgba(255,211,106,.35);color:#ffe195; }
.ranking-table tr:nth-child(2) .rank-badge { background:rgba(207,226,236,.10);border-color:rgba(207,226,236,.28);color:#e7f5fb; }
.ranking-table tr:nth-child(3) .rank-badge { background:rgba(213,151,99,.10);border-color:rgba(213,151,99,.3);color:#efb47e; }
.player { display:flex;align-items:center;gap:11px;font-weight:700;color:#f6fbfd; }
.avatar { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(89,214,255,.18),rgba(113,133,255,.18));border:1px solid var(--line);font-size:11px;color:#c5eff8; }
.tag { display:inline-flex;padding:4px 7px;border-radius:7px;background:rgba(89,214,255,.08);color:#b7ecf8;border:1px solid rgba(89,214,255,.14);font-size:10px; }

.download-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr); gap:22px; }
.download-card { padding:28px; position:relative; overflow:hidden; }
.download-card::after { content:"";position:absolute;width:280px;height:280px;right:-90px;top:-100px;border-radius:50%;background:radial-gradient(circle,rgba(89,214,255,.17),transparent 65%); }
.download-logo { width:70px;height:70px;border-radius:19px;border:1px solid var(--line-strong);display:grid;place-items:center;background:rgba(89,214,255,.06); }
.download-logo img{width:48px}
.download-card h2 { font-size:32px;margin:20px 0 8px; }
.download-card p { color:var(--muted);line-height:1.6; }
.download-actions { display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;position:relative;z-index:2; }
.stat-row { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px; }
.stat { padding:13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025); }
.stat small { display:block;color:#8fa6b1;font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px; }
.stat b { font-size:13px; }
.side-card { padding:22px; }
.side-card h3 { margin:0 0 16px; }
.req-list, .steps { display:grid;gap:12px; }
.req { display:flex;justify-content:space-between;gap:15px;padding-bottom:11px;border-bottom:1px solid rgba(213,244,255,.08);font-size:12px; }
.req span:first-child { color:#8fa6b0; }
.step { display:flex;gap:12px;align-items:flex-start; }
.step-no { flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(89,214,255,.09);border:1px solid rgba(89,214,255,.18);color:#c8f3fc;font-size:11px;font-weight:800; }
.step b { display:block;font-size:12px;margin:2px 0 3px; }.step p{margin:0;color:#91a8b2;font-size:11px;line-height:1.5}
.info-strip { margin-top:22px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px; }
.info-strip code { color:#b7dce6;font-size:11px;word-break:break-all; }

@media (max-width: 900px) {
 .page-wrap { width:min(100% - 20px, 1240px); padding:10px 0; }
 .site-shell { min-height:calc(100vh - 20px); border-radius:22px; }
 .navbar{height:76px;padding:0 20px;gap:14px}.nav-links{display:none}.server-pill{display:none}.hamburger{display:block}.nav-actions .btn{display:none}
 .hero-stage{height:calc(100vh - 20px);min-height:720px}.hero-slide__content{left:28px;top:45%;width:calc(100% - 56px)}.hero-title{font-size:50px}.hero-copy{font-size:13px}.hero-side{display:none}.carousel-dock{left:28px;right:28px;bottom:24px}.thumb{min-width:165px;width:165px;height:92px}
 .inner-shell{padding:105px 20px 28px}.page-hero{align-items:start;flex-direction:column}.table-toolbar{align-items:stretch;flex-direction:column}.search-box{width:100%;min-width:0}.download-grid{grid-template-columns:1fr}.stat-row{grid-template-columns:1fr}.info-strip{align-items:flex-start;flex-direction:column}
}
@media(max-width:540px){.brand span{font-size:13px}.hero-title{font-size:42px}.hero-actions{flex-direction:column;align-items:stretch}.hero-meta{display:none}.form-row{grid-template-columns:1fr}.modal__window{padding:22px}.carousel-dock{left:20px;right:20px}.hero-slide__content{left:20px;width:calc(100% - 40px)}}