@charset "UTF-8";
:root {
  --bg: #06131f;
  --bg-2: #081b2b;
  --panel: #091d30;
  --line: #2b4255;
  --gold: #f3c76d;
  --gold-2: #cf9d44;
  --cream: #f5edd9;
  --text: #f5f7fb;
  --muted: #c8d3dd;
  --width: 1310px;
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-ui: 'Segoe UI', Roboto, Arial, sans-serif;
}
*, *::before, *::after {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:80px}
body {margin:0;background:var(--bg); color:var(--text); font-family:var(--font-ui);font-size:15px;-webkit-font-smoothing:antialiased}
a {color:inherit;text-decoration:none}
button {font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #ffe59e; outline-offset:4px}
img {display:block;max-width:100%}
svg {width:1.5em;height:1.5em;flex:none}
.container {width:min(var(--width), calc(100% - 112px)); margin-inline:auto}
.svg-defs {position:absolute;overflow:hidden;width:0;height:0}
.skip-link{position:absolute;left:10px;top:-50px;background:var(--gold);z-index:20;color:#06131f;padding:10px 16px}
.skip-link:focus{top:8px}
.eyebrow {display:block;color:var(--gold);font-weight:700;letter-spacing:.20em;font-size:11px}
.btn {border-radius:6px;display:inline-flex;justify-content:center;align-items:center;gap:10px;border:1px solid transparent;font-weight:700;white-space:nowrap;transition:background .2s,border-color .2s, transform .2s, box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(180deg,#ffdf8d 0%,#e5b65a 100%);border-color:#f5cb76;color:#131b24;box-shadow:0 4px 14px #0004}
.btn-gold:hover{background:linear-gradient(180deg,#ffe9b0,#eac46f);box-shadow:0 6px 20px #d1a24838}
.btn-outline{background:linear-gradient(180deg,#0a2339e8,#081522eb);color:#fff;border-color:#8a9eaf}
.btn-outline:hover{background:#1b3347}
.btn-small{min-height:41px;padding:8px 22px;font-size:14px}
.btn-large{min-height:55px;padding:12px 26px;font-size:16px}
.btn-large svg{width:21px;height:21px}
.btn-large .arrow {margin-left:16px;width:18px;height:18px}
.site-header {position:relative;z-index:5;background:#061420; border-bottom:1px solid #263848;box-shadow:0 4px 14px #0003}
.header-inner {min-height:64px;display:flex;gap:26px;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none;min-width:0}
.brand-icon {width:48px;height:48px;color:var(--gold)}
.brand-name{font:small-caps 26px/.92 var(--font-heading);white-space:nowrap;letter-spacing:-.035em}
.brand-name span{font-variant:small-caps}
.main-nav{display:flex;gap:3px;align-items:center;justify-content:center}
.nav-link{position:relative;border:0;background:transparent;color:#dce4ec;font-size:13px;padding:23px 14px;white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--gold)}
.nav-link.active::after{content:"";position:absolute;bottom:7px;left:14px;right:14px;height:2px;background:var(--gold);box-shadow:0 0 8px #f7d88394}
.header-actions {display:flex;gap:11px;align-items:center}
.mobile-toggle{display:none;background:#092035;color:white;border:1px solid var(--line);padding:8px 10px;border-radius:6px}

/* Hero */
.hero{isolation:isolate;min-height:495px;position:relative;overflow:hidden;border-bottom:1px solid #253a49;background:#081929}
.hero-image {position:absolute;inset:0;z-index:-2;background-image:linear-gradient(90deg,#061322ec 0%,#061322bd 23%,#0613222d 53%,#06132206 100%),url('../img/hero_city.webp');background-size:cover;background-position:center 47%;transform:scale(1.015)}
.hero::after{content:"";position:absolute;inset:50% 0 0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#06131f8e,transparent)}
.hero-content{min-height:495px;display:flex;flex-direction:column;justify-content:space-between;padding-top:64px;padding-bottom:23px}
.hero-copy{max-width:560px}
.hero-eyebrow{font-size:11px;letter-spacing:.23em;margin-bottom:10px;opacity:.9}
.hero h1{font:normal clamp(55px,6.8vw,91px)/.82 var(--font-heading);font-variant:small-caps;text-transform:uppercase;letter-spacing:-.045em;margin:0 0 25px;text-shadow:0 3px 6px #05121e}
.hero h1 span{color:var(--gold);text-shadow:0 2px 1px #543618,0 4px 9px #0009}
.hero-copy > p{margin:0 0 27px;color:#f2f5f8;font-size:clamp(17px,1.75vw,22px);font-weight:500;line-height:1.33;max-width:450px;text-shadow:0 1px 7px #000b}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap}
.hero-benefits{display:flex;align-items:center;gap:0;color:#e7edf3;font-size:12px;text-shadow:0 2px 5px #000b}
.hero-benefits span{display:inline-flex;align-items:center;gap:8px;padding:0 21px;border-right:1px solid #4c586580}
.hero-benefits span:first-child{padding-left:0}
.hero-benefits span:last-child{border:0}
.hero-benefits svg{color:var(--gold);height:17px;width:17px}

/* Four feature tiles */
.section-block{position:relative}
.features{padding:26px 0 25px;background:linear-gradient(180deg,#071420 0%,#0b1d2a 54%,#071522 100%)}
.section-heading h2{font:700 clamp(30px,3.05vw,40px)/1.13 var(--font-heading);margin:7px 0 10px;letter-spacing:-.03em}
.section-heading p{margin:0;color:#e4e8ed;line-height:1.48;font-size:14px}
.section-heading.centered{text-align:center;margin-bottom:23px}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.feature-card{border:1px solid #344c61;background:linear-gradient(180deg,#10263a 0%,#081724 100%);border-radius:6px;overflow:hidden;min-width:0;box-shadow:0 5px 24px #0003;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.feature-card:hover{border-color:#a28b5f;transform:translateY(-3px)}
.feature-body{padding:17px 16px 10px;min-height:152px}
.feature-icon{color:var(--gold);width:31px;height:31px;vertical-align:middle;margin-right:8px}
.feature-card h3{font:700 clamp(14px,1.35vw,18px) var(--font-heading);margin:0;display:inline;vertical-align:middle}
.feature-card p{font-size:13px;line-height:1.31;margin:13px 0 0;color:#e2eaf1}
.feature-card img{width:100%;height:168px;object-fit:cover;object-position:center 49%;margin-top:auto}

/* Real stats, no fabricated player counts */
.statistics{padding:29px 0 31px;min-height:284px;background:radial-gradient(ellipse at 27% 45%,#14405547,transparent 57%),linear-gradient(180deg,#061625,#06121c);border-top:1px solid #294257;border-bottom:1px solid #294257}
.stats-layout{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(320px,1fr);gap:22px}
.stats-main .section-heading{margin:0 0 20px}
.stats-main .section-heading p{max-width:430px}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:15px 6px 12px;min-height:126px;border:1px solid #40596b;border-radius:6px;background:linear-gradient(155deg,#0c263a,#071827);box-shadow:0 3px 13px #0003}
.stat-card svg{width:30px;height:30px;color:#dfe9f3}
.stat-card strong{font-weight:750;font-size:24px;letter-spacing:.005em;line-height:1}
.stat-card span{font-size:11px;color:#dce5eb;line-height:1.3}
.stats-note{margin:9px 0 0;color:#9caeba;font-size:11px}
.leaderboard{border:1px solid #385268;border-radius:7px;padding:17px 15px 15px;background:linear-gradient(160deg,#0a1c2c,#061420);min-width:0;box-shadow:0 6px 25px #0004}
.leaderboard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.leaderboard-top h3{display:flex;align-items:center;gap:10px;font:700 17px var(--font-heading);margin:0;white-space:nowrap}
.leaderboard-top h3 svg{color:var(--gold);width:24px;height:24px}
.leaderboard-label{font-size:11px;color:var(--gold);text-align:right}
.ranking-header{display:grid;grid-template-columns:40px 1fr 100px;padding:7px 10px;background:#152a3c;border-radius:4px;color:#bdd0db;font-size:12px}
.ranking-header span:last-child{text-align:right}
.ranking-empty{text-align:center;padding:24px 14px 15px}
.ranking-empty svg{color:#b58d46;width:32px;height:32px;margin-bottom:8px}
.ranking-empty strong{display:block;font-size:14px;margin-bottom:7px}
.ranking-empty p{margin:0 auto;max-width:300px;color:#a9bcc8;font-size:12px;line-height:1.45}

/* Lower imagery and footer */
.story{display:grid;grid-template-columns:1fr 1fr;min-height:290px;background:#071624}
.story-image{background-image:linear-gradient(90deg,transparent 78%,#061522ae),url('../img/office.webp');background-size:cover;background-position:center center;min-height:290px}
.story-content{display:flex;align-items:center;padding:34px clamp(36px,5.6vw,88px) 34px 28px;background:linear-gradient(105deg,#061522,#06121d)}
.story-inner{max-width:570px}
.story h2{font:700 clamp(28px,3.1vw,40px)/1.15 var(--font-heading);letter-spacing:-.035em;margin:7px 0 14px}
.story p{color:#dfe7ec;font-size:14px;line-height:1.55;margin:0 0 20px}
.story-highlights{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:11px 13px}
.story-highlights span{display:flex;gap:9px;align-items:center;font-size:12px;color:#e6edf3}
.story-highlights svg{width:24px;height:24px;color:var(--gold)}
.footer{background:#051320;border-top:1px solid #35475a;padding:22px 0 16px}
.footer-top{display:flex;gap:20px;align-items:center;justify-content:space-between}
.footer-brand .brand-icon{height:37px;width:37px}
.footer-brand .brand-name{font-size:22px}
.footer-brand small{display:block;color:#a7b5c0;font:11px var(--font-ui);margin-top:6px}
.footer-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0}
.footer-nav a,.footer-nav button{background:transparent;border:0;border-right:1px solid #435060;color:#bfcbd4;padding:0 11px;white-space:nowrap;font-size:11px}
.footer-nav a:hover,.footer-nav button:hover{color:var(--gold)}
.footer-nav > :last-child{border-right:0}
.back-top{display:grid;place-items:center;height:31px;width:31px;border-radius:50%;background:#2b4053;color:white;flex:none}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;padding-top:18px;color:#8197a6;font-size:11px}

/* Accessible dialogs */
.site-dialog{max-width:min(550px,calc(100vw - 28px));min-width:min(520px,calc(100vw - 28px));border:1px solid #5d7485;border-radius:12px;padding:31px 31px 30px;background:linear-gradient(150deg,#142b40,#081725);color:#edf2f8;box-shadow:0 15px 65px #000c}
.site-dialog::backdrop{background:#020911cc;backdrop-filter:blur(5px)}
.dialog-close{position:absolute;right:15px;top:15px;display:grid;place-items:center;border:1px solid #4c647a;background:#162d40;color:#fff;border-radius:50%;width:32px;height:32px;padding:0}
.dialog-close svg{width:15px;height:15px}
.dialog-content h2{font:700 33px var(--font-heading);margin:8px 0 14px}
.dialog-content p,.dialog-content li{font-size:15px;line-height:1.62;color:#dbe7ee}
.dialog-content p:last-child{margin-bottom:0}
.dialog-content ul{padding-left:19px}
.dialog-content li{margin-bottom:7px}
.dialog-notice{margin-top:22px;padding:13px 14px;border-left:3px solid var(--gold);background:#183043;color:#f4dfb5;font-size:13px}

@media (max-width: 1180px){
  .container{width:min(var(--width),calc(100% - 86px))}
  .header-inner{gap:14px}
  .brand-icon{width:40px;height:40px}
  .brand-name{font-size:22px}
  .nav-link{padding-inline:10px;font-size:12px}
  .btn-small{padding:8px 15px}
  .feature-body{padding:14px 12px 10px;min-height:150px}
  .feature-card img{height:146px}
  .story-content{padding-right:31px}
  .footer-nav a,.footer-nav button{padding:0 7px}
}
@media (max-width: 950px){
  .container{width:calc(100% - 44px)}
  .header-inner{min-height:66px}
  .mobile-toggle{display:inline-grid;place-items:center;order:4}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#071727;box-shadow:0 12px 18px #0007;border-bottom:1px solid #2c4557;flex-direction:column;align-items:stretch;padding:7px 22px 15px}
  .main-nav.is-open{display:flex}
  .nav-link{padding:12px 10px;font-size:14px;text-align:left}
  .nav-link.active::after{left:10px;right:auto;width:42px;bottom:5px}
  .header-actions{margin-left:auto}
  .hero,.hero-content{min-height:465px}
  .hero-content{padding-top:53px}
  .feature-grid{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-body{min-height:130px}
  .feature-card img{height:175px}
  .stats-layout{grid-template-columns:1fr}
  .statistics{padding-bottom:28px}
  .footer-top{flex-wrap:wrap}
  .footer-nav{order:3;width:100%;justify-content:flex-start}
}
@media (max-width: 620px){
  .container{width:calc(100% - 32px)}
  .site-header .brand-icon{width:34px;height:34px}
  .brand{gap:7px}
  .brand-name{font-size:19px}
  .header-actions .btn-small{min-height:35px;padding:6px 10px;font-size:12px}
  .header-actions .btn-outline{display:none}
  .mobile-toggle{padding:6px 7px}
  .hero,.hero-content{min-height:475px}
  .hero-image{background-position:57% center;background-image:linear-gradient(90deg,#061322f5 0%,#061322c8 45%,#06132240 100%),url('../img/hero_city.webp')}
  .hero-content{padding-top:55px;padding-bottom:16px}
  .hero h1{font-size:clamp(58px,12vw,72px);margin-bottom:23px}
  .hero-copy>p{font-size:17px;max-width:320px}
  .btn-large{min-height:46px;padding:10px 17px;font-size:14px}
  .btn-large .arrow{margin-left:2px}
  .hero-benefits{gap:9px;flex-wrap:wrap;font-size:11px}
  .hero-benefits span{padding:0 10px 0 0}
  .features{padding-block:30px}
  .section-heading h2{font-size:31px}
  .feature-card img{height:125px}
  .feature-body{min-height:181px}
  .feature-icon{display:block;margin-bottom:10px;width:27px;height:27px}
  .feature-card h3{display:block;font-size:16px}
  .feature-card p{font-size:12px;line-height:1.38;margin-top:8px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-card{min-height:104px}
  .story{grid-template-columns:1fr}
  .story-image{min-height:230px}
  .story-content{padding:30px 22px 34px}
  .story h2{font-size:31px}
  .footer-nav{gap:12px 0}
  .footer-bottom{flex-direction:column;gap:6px}
}
@media (max-width: 380px){
  .hero h1{font-size:56px}
  .header-actions .btn-gold{padding-inline:7px;font-size:11px}
  .feature-grid{gap:9px}
  .feature-body{padding:12px 10px;min-height:198px}
  .feature-card img{height:110px}
  .story-highlights{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}