/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:#030b18; --bg2:#060e1c; --bg3:#091120;
  --sf:#0b1725; --sf2:#0f1d2e; --sf3:#132339;
  --blue:#3b7ef8; --bl:#5b94ff; --bll:#85b2ff; --bd:#162e60;
  --bxs:rgba(59,126,248,.07);
  --cyan:#22d3ee; --green:#22c55e; --gl:#4ade80;
  --yellow:#fbbf24; --orange:#fb923c; --red:#f87171;
  --t:#e2ecff; --td:#506f96; --tm:#8aaed0;
  --bo:rgba(59,126,248,.12); --bo2:rgba(59,126,248,.24); --bo3:rgba(59,126,248,.42);
  --gs:0 0 20px rgba(59,126,248,.18);
  --gm:0 0 40px rgba(59,126,248,.28);
  --glg:0 0 80px rgba(59,126,248,.38);
  --r1:6px; --r2:10px; --r3:16px; --r4:22px; --r5:30px;
  --nav-h:76px;
  --ease:cubic-bezier(.4,0,.2,1);
  --tr:all .2s cubic-bezier(.4,0,.2,1);
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--t); min-height:100vh; overflow-x:hidden; }
h1,h2,h3,h4,h5 { font-family:'Syne',sans-serif; }
a { text-decoration:none; color:inherit; }
img, svg { display:block; }
button { font-family:'DM Sans',sans-serif; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--bd); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--blue); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ─── LOGO BADGE ─────────────────────────────────────────── */
.logo-badge {
  background:#fff; border-radius:var(--r2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.logo-badge.xl { width:52px; height:52px; box-shadow:0 3px 16px rgba(0,0,0,.4); border-radius:12px; }
.logo-badge.xl img { width:40px; height:40px; object-fit:contain; }
.logo-badge.sm { width:32px; height:32px; border-radius:8px; }
.logo-badge.sm img { width:24px; height:24px; object-fit:contain; }

/* ─── NAV ───────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center;
  padding:0 4vw; height:var(--nav-h);
  background:rgba(3,11,24,.94);
  backdrop-filter:blur(28px) saturate(1.8);
  border-bottom:1px solid var(--bo);
}
/* Logo left, fixed width */
.nav-logo { display:flex; align-items:center; flex-shrink:0; width:160px; }
/* Links perfectly centered */
.nav-links {
  display:flex; gap:2px; list-style:none;
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav-links a {
  color:var(--td); font-size:14px; font-weight:500;
  padding:8px 14px; border-radius:var(--r1);
  transition:var(--tr); white-space:nowrap; display:block;
}
.nav-links a:hover { color:var(--t); background:rgba(255,255,255,.04); }
.nav-links a.active { color:var(--bl); background:rgba(59,126,248,.1); }
/* Buttons right */
.nav-right { display:flex; align-items:center; gap:9px; margin-left:auto; }
.nav-ghost {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--tm); font-size:13px; font-weight:600;
  padding:8px 16px; border-radius:var(--r1);
  border:1px solid var(--bo2); transition:var(--tr); white-space:nowrap;
}
.nav-ghost:hover { color:var(--t); border-color:var(--bo3); background:var(--bxs); }
.nav-cta {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--blue); color:#fff;
  padding:9px 20px; border-radius:var(--r1);
  font-weight:700; font-size:13px; white-space:nowrap;
  box-shadow:0 0 20px rgba(59,126,248,.3); transition:var(--tr);
}
.nav-cta:hover { background:var(--bl); transform:translateY(-1px); box-shadow:var(--gs); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; }
.hamburger span { width:22px; height:2px; background:var(--tm); border-radius:2px; transition:var(--tr); display:block; }
.mob-menu {
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:99;
  background:rgba(3,11,24,.97); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bo);
  padding:16px 5vw 24px; display:none; flex-direction:column; gap:4px;
  max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
}
.mob-menu.open { display:flex; }
.mob-menu a { padding:14px 16px; border-radius:10px; font-size:16px; font-weight:600; color:var(--tm); display:block; transition:var(--tr); }
.mob-menu a:hover, .mob-menu a.active { color:var(--bl); background:rgba(59,126,248,.08); }
.mob-menu .mob-ctas { display:flex; flex-direction:column; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--bo); }
.mob-menu .mob-ctas .btn { width:100%; justify-content:center; text-align:center; font-size:15px; padding:14px 20px; }
.mob-menu .mob-ctas .btn-p { box-shadow:0 0 24px rgba(59,126,248,.3); }
.mob-menu.open { display:block; }
.mob-menu a {
  display:flex; align-items:center; gap:10px;
  color:var(--tm); font-size:15px; font-weight:500;
  padding:13px 0; border-bottom:1px solid var(--bo); transition:var(--tr);
  min-height:48px;
}
.mob-menu a:hover { color:var(--bl); }
.mob-menu a:last-child { border-bottom:none; }
.mob-sep { height:1px; background:var(--bo); margin:6px 0; }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:var(--r2);
  font-weight:700; font-size:15px; cursor:pointer; border:none;
  transition:var(--tr); white-space:nowrap; font-family:'DM Sans',sans-serif;
  min-height:48px;
}
.btn-p  { background:linear-gradient(135deg,#1a44c8,#3b7ef8); color:#fff; box-shadow:0 0 24px rgba(59,126,248,.35); }
.btn-p:hover  { transform:translateY(-2px); box-shadow:var(--gm); }
.btn-s  { background:transparent; color:var(--tm); border:1px solid var(--bo2); }
.btn-s:hover  { border-color:var(--bo3); color:var(--t); background:var(--bxs); }
.btn-gold { background:linear-gradient(135deg,#92400e,#d97706); color:#fff; box-shadow:0 0 24px rgba(217,119,6,.3); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(217,119,6,.4); }
.btn-lg  { padding:16px 34px; font-size:16px; border-radius:var(--r3); }
.btn-sm  { padding:9px 18px; font-size:13px; border-radius:var(--r1); min-height:40px; }

/* ─── LAYOUT ─────────────────────────────────────────────── */
.page-wrap { padding-top:var(--nav-h); }
.container { max-width:1200px; margin:0 auto; padding:0 5vw; }
.divider { width:100%; height:1px; background:var(--bo); }
.sec-label {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:3px;
  text-transform:uppercase; color:var(--bl); margin-bottom:14px;
}
.sec-label::before {
  content:''; display:inline-block; width:14px; height:2px;
  background:var(--blue); border-radius:2px;
}
.sec-title { font-size:clamp(28px,4vw,50px); font-weight:800; letter-spacing:-1.5px; line-height:1.08; }
.sec-title span { color:var(--bl); }
.sec-sub { color:var(--td); font-size:17px; margin-top:14px; line-height:1.8; max-width:560px; }

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes scaleIn  { from{opacity:0;transform:scale(.93) translateY(14px)} to{opacity:1;transform:none} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes barGrow  { from{width:0!important} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.afu { animation:fadeUp .55s var(--ease) both; }
.d1{animation-delay:.06s} .d2{animation-delay:.12s} .d3{animation-delay:.18s}
.d4{animation-delay:.24s} .d5{animation-delay:.30s}

/* ─── DOTS ───────────────────────────────────────────────── */
.dot-live { width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; animation:pulse 2s infinite; transition:background .4s; }
/* Instatus status colours on the widget link */
#statusWidget[data-status="hasissues"]        .dot-live { background:#f59e0b; }
#statusWidget[data-status="undermaintenance"] .dot-live { background:#6366f1; }
#statusWidget[data-status="down"]             .dot-live { background:var(--red); }
.dot-new  { width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block; animation:pulse 2s infinite; flex-shrink:0; }

/* ─── FOOTER ─────────────────────────────────────────────── */
footer { background:var(--bg2); border-top:1px solid var(--bo); }
.ft {
  max-width:1200px; margin:0 auto;
  padding:60px 5vw 48px;
  display:grid;
  grid-template-columns:2.4fr 1fr 1fr 1fr;
  gap:40px;
  align-items:start;
}
.fb-logo { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.fb-logo span { font-family:'Syne',sans-serif; font-weight:800; font-size:18px; color:var(--t); }
.fb-desc { color:var(--td); font-size:14px; line-height:1.8; max-width:280px; margin-bottom:22px; }
.fb-status {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2);
  padding:8px 16px; border-radius:100px;
  font-size:12px; font-weight:600; color:var(--gl);
  text-decoration:none; transition:var(--tr);
}
.fb-status:hover { background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.35); }
.fb-socials { display:flex; gap:10px; margin-top:22px; }
.fb-soc {
  width:38px; height:38px; border-radius:var(--r2);
  background:var(--sf2); border:1px solid var(--bo);
  display:flex; align-items:center; justify-content:center;
  color:var(--td); transition:var(--tr);
}
.fb-soc:hover { border-color:var(--bo2); color:var(--bl); background:var(--bxs); transform:translateY(-2px); }
.fc h4 {
  font-size:11px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--td); margin-bottom:18px;
}
.fl {
  display:flex; align-items:center; gap:8px;
  color:var(--td); font-size:14px; padding:6px 0;
  transition:var(--tr); line-height:1.4; min-height:36px;
}
.fl:hover { color:var(--bl); }
.fb-bot {
  max-width:1200px; margin:0 auto;
  padding:20px 5vw; border-top:1px solid var(--bo);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
}
.fb-bot-l { color:var(--td); font-size:13px; }
.fb-bot-r { display:flex; gap:24px; flex-wrap:wrap; }
.fb-bot-r a { color:var(--td); font-size:13px; transition:var(--tr); }
.fb-bot-r a:hover { color:var(--t); }

/* ─── MODAL ──────────────────────────────────────────────── */
.modal-ov {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(3,11,24,.92); backdrop-filter:blur(18px);
  align-items:center; justify-content:center; padding:20px;
}
.modal-ov.open { display:flex; }
.modal {
  background:var(--sf); border:1px solid var(--bo2);
  border-radius:var(--r4); padding:36px; max-width:520px; width:100%;
  animation:scaleIn .28s var(--ease);
  box-shadow:var(--glg),0 40px 80px rgba(0,0,0,.6);
  position:relative; max-height:92vh; overflow-y:auto;
}
.modal-x {
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:var(--r1);
  background:var(--sf2); border:1px solid var(--bo);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--tr); font-size:14px; color:var(--td);
  background-color:var(--sf2); font-family:'DM Sans',sans-serif;
}
.modal-x:hover { background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.3); color:var(--red); }

/* ─── MOBILE ─────────────────────────────────────────────── */
/* ══ GLOBAL RESPONSIVE ══════════════════ */

@media(max-width:1100px) {
  .ft { grid-template-columns:1fr 1fr 1fr; }
  .ft>.fb { grid-column:1/-1; }
  .container { padding:0 4vw; }
}

@media(max-width:900px) {
  .sec-title { font-size:clamp(28px,5vw,48px); letter-spacing:-1.5px; }
  .sec-sub   { font-size:15px; }
}

@media(max-width:768px) {
  :root { --nav-h:64px; }
  /* Hide links and Game Panel from top nav */
  .nav-links, .nav-ghost, .nav-right { display:none; }
  .nav-logo { width:auto; }
  .hamburger { display:flex; flex-shrink:0; }
  nav { padding:0 4vw; justify-content:space-between; }
  .ft { grid-template-columns:1fr 1fr; }
  .ft>.fb { grid-column:1/-1; }
  .btn-lg { padding:14px 22px; font-size:15px; }
  .page-wrap { padding-top:var(--nav-h); }
  .mob-menu { top:64px; }
  .ph { padding:56px 5vw 44px; }
  .ph .sec-title { font-size:clamp(28px,7vw,44px); }
  .container { padding-left:5vw; padding-right:5vw; }
}
@media(max-width:480px) {
  .hamburger { padding:10px; }
}

@media(max-width:540px) {
  :root { --nav-h:60px; }
  .ft { grid-template-columns:1fr; }
  .ft-copy { flex-direction:column; gap:10px; text-align:center; }
  .btn-lg { padding:14px 20px; font-size:14px; }
  .trust { gap:0; }
  .ti { padding:4px 14px; font-size:12px; }
  /* Nav */
  nav { padding:0 4vw; }
  .logo-badge.xl { width:34px; height:34px; }
  .logo-badge.xl img { width:30px; height:30px; }
}

@media(max-width:480px) {
  .btn-lg { width:100%; justify-content:center; }
  .btn + .btn { margin-top:0; }
}