:root {
  --bg: #03070c;
  --bg-soft: #08101a;
  --panel: rgba(8, 16, 26, 0.94);
  --panel-light: rgba(13, 24, 37, 0.92);
  --line: rgba(166, 188, 214, 0.16);
  --line-bright: rgba(193, 211, 232, 0.28);
  --text: #f1f4f7;
  --muted: #96a2b1;
  --red: #c82f35;
  --red-bright: #ef4148;
  --blue: #1f5d9d;
  --green: #67c861;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  --condensed: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behaviour: smooth; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; color: var(--text); background: radial-gradient(circle at 70% 10%, #101d2a 0, var(--bg) 42%); font-family: var(--body); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.site-shell { min-height: 100vh; overflow: hidden; background: linear-gradient(180deg, rgba(4, 8, 13, .1), #03070c 82%); }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 1000; height: 72px; padding: 0 clamp(20px, 4vw, 74px);
  display: grid; grid-template-columns: 250px 1fr 240px; align-items: center;
  border-bottom: 1px solid rgba(172, 193, 216, .12);
  background: linear-gradient(180deg, rgba(3, 7, 12, .96), rgba(3, 7, 12, .78));
  backdrop-filter: blur(14px); transition: .25s ease;
}
.site-header.scrolled { background: rgba(3, 7, 12, .96); box-shadow: 0 12px 35px rgba(0,0,0,.32); }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-mountain { width: 52px; color: #d6dee8; }
.brand-mountain svg { display: block; width: 100%; fill: rgba(220,228,237,.12); stroke: currentColor; stroke-width: 2; }
.brand strong, .brand small { display: block; font-family: var(--condensed); letter-spacing: .16em; }
.brand strong { font-size: 18px; }
.brand small { color: var(--red-bright); font-size: 13px; font-weight: 800; letter-spacing: .32em; }
.main-nav { justify-self: center; display: flex; align-items: stretch; height: 100%; }
.main-nav a { position: relative; display: grid; place-items: center; min-width: 76px; padding: 0 13px; color: #c7ced8; font-family: var(--condensed); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.main-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--red-bright); transition: .2s ease; }
.main-nav a:hover, .main-nav a.active { color: #fff; background: linear-gradient(180deg, transparent, rgba(255,255,255,.03)); }
.main-nav a:hover::after, .main-nav a.active::after { left: 18%; right: 18%; }
.header-status { justify-self: end; width: 222px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 5px; background: rgba(8,15,24,.74); }
.status-label { display: block; margin-bottom: 6px; color: #8996a6; font: 600 11px var(--condensed); letter-spacing: .12em; }
.header-status > div { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; font: 700 14px var(--condensed); }
.header-status > div > span { color: #b5c0ce; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px rgba(103,200,97,.8); }
.signal-bars { display: flex; align-items: end; gap: 2px; height: 15px; margin-left: 8px; }
.signal-bars i { width: 3px; background: var(--green); border-radius: 2px 2px 0 0; }
.signal-bars i:nth-child(1){height:5px}.signal-bars i:nth-child(2){height:8px}.signal-bars i:nth-child(3){height:12px}.signal-bars i:nth-child(4){height:15px}
.nav-toggle { display: none; border: 0; background: transparent; color: white; }

.hero { position: relative; min-height: 640px; padding: 145px clamp(28px, 7vw, 135px) 80px; display: grid; grid-template-columns: minmax(390px, .9fr) minmax(440px, 1.1fr); align-items: center; background-image: var(--hero-background, url("assets/hero-scene.svg")); background-size: cover; background-position: center top; border-bottom: 1px solid var(--line); isolation: isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(2,5,9,.94) 0%, rgba(2,5,9,.56) 36%, rgba(2,5,9,.04) 70%, rgba(2,5,9,.26) 100%), linear-gradient(0deg, rgba(3,7,12,.88), transparent 34%); }
.hero-overlay { position:absolute; inset:0; z-index:-1; background: radial-gradient(circle at 67% 40%, rgba(101,127,156,.12), transparent 35%), repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.008) 3px 4px); }
.hero-copy { z-index: 3; max-width: 650px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 14px; color:#e8edf4; font: 600 14px var(--condensed); text-transform:uppercase; letter-spacing:.08em; }
.eyebrow span { width:3px; height:20px; background:var(--red-bright); box-shadow:0 0 14px rgba(239,65,72,.6); }
.hero h1 { margin:0; color:#eef1f4; font: 800 clamp(48px, 4vw, 76px)/.91 var(--condensed); letter-spacing:.02em; text-shadow:0 4px 24px rgba(0,0,0,.64); }
.hero h1 em { color:#d53b3f; font-style:normal; }
.hero-description { max-width:560px; margin:22px 0 26px; color:#d5dce5; font-size:15px; line-height:1.7; text-shadow:0 2px 8px #000; }
.hero-actions { display:flex; flex-wrap:wrap; gap:13px; }
.button { min-height:48px; padding:0 23px; display:inline-flex; align-items:center; justify-content:center; gap:14px; border:1px solid rgba(194,211,232,.3); border-radius:3px; font:700 15px var(--condensed); letter-spacing:.03em; text-transform:uppercase; box-shadow:0 14px 26px rgba(0,0,0,.22); transition:.2s ease; }
.button:hover { transform:translateY(-2px); filter:brightness(1.12); }
.button-primary { background:linear-gradient(180deg,#d03b40,#8c171d); border-color:#ef5358; }
.button-secondary { background:linear-gradient(180deg,#172a43,#0c1727); }
.button-secondary svg { width:21px; fill:#e5ebf2; }
.button-ghost { background:rgba(8,13,20,.72); }
.play-icon { width:20px;height:20px;border:1px solid #b8c4d1;border-radius:50%;display:grid;place-items:center;font-size:8px; }

.hero-logo-wrap { position:relative; z-index:2; display:grid; place-items:center; justify-self:center; width:min(650px, 48vw); margin-top:10px; }
.hero-logo { width:100%; max-height:510px; object-fit:contain; filter:drop-shadow(0 25px 34px rgba(0,0,0,.62)); animation: logoFloat 7s ease-in-out infinite; }
.logo-glow { position:absolute; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(199,56,61,.22), rgba(72,114,159,.1) 40%, transparent 72%); filter:blur(24px); }
@keyframes logoFloat { 50% { transform:translateY(-7px); } }

.welcome-sign { position:absolute; left:14px; top:220px; z-index:1; width:150px; padding:17px 8px; border:5px solid #24201a; outline:1px solid #65594a; background:linear-gradient(180deg,rgba(47,38,29,.92),rgba(19,18,17,.96)); color:#b7a58f; text-align:center; transform:rotate(-1deg); box-shadow:0 14px 30px rgba(0,0,0,.55); font-family:Georgia,serif; opacity:.72; }
.welcome-sign span,.welcome-sign small { display:block; font-style:italic; }
.welcome-sign strong { display:block; margin:6px 0; font-size:31px; line-height:.95; }
.welcome-sign small { font-size:9px; }

.server-card { position:absolute; z-index:5; right:clamp(22px,6vw,116px); bottom:-75px; width:270px; }
.glass-card { border:1px solid rgba(162,187,215,.28); border-radius:5px; background:linear-gradient(180deg,rgba(13,24,37,.97),rgba(5,12,21,.96)); box-shadow:var(--shadow); overflow:hidden; }
.server-card header { padding:14px 18px 10px; border-bottom:1px solid var(--line); }
.server-card header strong,.server-card header small { display:block; font-family:var(--condensed); letter-spacing:.12em; }
.server-card header strong { font-size:17px; }.server-card header small{color:#8f9aaa;font-size:10px}
.server-card dl { margin:0; padding:8px 18px; }
.server-card dl div { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid rgba(170,190,214,.1); font:600 12px var(--condensed); text-transform:uppercase; letter-spacing:.05em; }
.server-card dt{color:#8491a1}.server-card dd{margin:0;color:#dce4ec}.server-card .online{color:var(--green)}
.map-button { display:flex; justify-content:center; margin:4px 14px 14px; padding:10px 12px; border:1px solid rgba(61,109,165,.48); border-radius:3px; background:#0d2037; color:#e3ebf5; font:700 12px var(--condensed); text-transform:uppercase; }
.hero-lights i { position:absolute; z-index:-1; bottom:10%; width:120px; height:28px; border-radius:50%; filter:blur(25px); opacity:.16; animation:pulse 2.1s ease-in-out infinite; }
.hero-lights i:nth-child(1){left:24%;background:#1f70ff}.hero-lights i:nth-child(2){left:31%;background:#e31f38;animation-delay:.7s}.hero-lights i:nth-child(3){right:18%;background:#e31f38;animation-delay:.3s}.hero-lights i:nth-child(4){right:11%;background:#1f70ff;animation-delay:1s}
@keyframes pulse{50%{opacity:.4;transform:scaleX(1.25)}}

.feature-strip { min-height:130px; padding:24px clamp(24px,7vw,135px); display:grid; grid-template-columns:repeat(4,1fr); align-items:center; background:linear-gradient(180deg,#08111b,#050b12); border-bottom:1px solid var(--line); }
.feature-strip article { min-height:75px; padding:0 30px; display:flex; align-items:center; gap:20px; border-right:1px solid var(--line); }
.feature-strip article:first-child{padding-left:0}.feature-strip article:last-child{border-right:0;padding-right:290px;margin-right:-290px}
.feature-icon { flex:0 0 48px; width:48px;height:48px;border:2px solid #aeb8c5;clip-path:polygon(50% 0,92% 17%,84% 72%,50% 100%,16% 72%,8% 17%);display:grid;place-items:center;color:#dbe2e9;font-size:18px;background:rgba(255,255,255,.03)}
.feature-strip h2 { margin:0 0 6px;font:700 15px var(--condensed);text-transform:uppercase;letter-spacing:.04em}.feature-strip p{margin:0;color:#96a2b0;font-size:12px;line-height:1.55}

.dashboard { padding:90px clamp(24px,6vw,116px) 26px; display:grid; grid-template-columns:1.05fr 1fr 1.05fr 1fr 1.05fr; gap:15px; background:linear-gradient(180deg,#03080e,#050b12); }
.panel { min-height:280px; padding:17px 18px 0; display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:linear-gradient(155deg,rgba(13,24,37,.94),rgba(6,13,22,.98));box-shadow:0 16px 38px rgba(0,0,0,.18);overflow:hidden; }
.panel > header{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.panel h2{margin:0;font:700 15px var(--condensed);text-transform:uppercase;letter-spacing:.07em}.panel-symbol{width:25px;height:25px;border:1px solid #9aa8b8;border-radius:50%;display:grid;place-items:center;font:700 14px var(--condensed);color:#e4e8ee}
.department-list,.check-list{list-style:none;margin:12px 0 8px;padding:0}.department-list li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:7px;min-height:31px;font:600 12px var(--condensed);letter-spacing:.03em}.department-list strong{font-size:14px}.department-icon{color:var(--department-colour);text-align:center;text-shadow:0 0 12px var(--department-colour)}
.check-list li{display:flex;gap:8px;align-items:center;min-height:30px;color:#bdc6d0;font-size:11px}.check-list li span{color:#7ed24f;font-size:16px}
.panel-link{margin-top:auto;margin-inline:-18px;padding:14px 18px;display:flex;justify-content:space-between;border-top:1px solid var(--line);color:#aab5c2;font:600 11px var(--condensed);text-transform:uppercase;letter-spacing:.05em;transition:.2s}.panel-link:hover{color:#fff;background:rgba(255,255,255,.025)}
.faq-list{padding-top:10px}.faq-item{border-bottom:1px solid rgba(170,190,214,.1)}.faq-item button{width:100%;min-height:34px;padding:0;border:0;background:none;color:#cbd3dd;display:flex;justify-content:space-between;align-items:center;text-align:left;font:500 11px var(--body);cursor:pointer}.faq-item button b{font-size:16px}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}.faq-answer p{min-height:0;overflow:hidden;margin:0;color:#8492a2;font-size:10px;line-height:1.55}.faq-item.open .faq-answer{grid-template-rows:1fr}.faq-item.open .faq-answer p{padding-bottom:10px}
.staff-card{display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:center;margin-top:22px}.staff-avatar{width:80px;height:80px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#d5d9df,#5f6a78);box-shadow:0 12px 25px rgba(0,0,0,.3)}.staff-avatar span,.staff-avatar img{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 28%,#5c4637,#151c24 64%);font:800 25px var(--condensed);color:#d8dce2}.staff-avatar img{object-fit:cover;background:#151c24}.staff-card small{font:600 11px var(--condensed);letter-spacing:.05em}.staff-card h3{margin:3px 0 8px;color:var(--red-bright);font:800 16px var(--condensed);letter-spacing:.08em}.staff-card p{margin:0;color:#929dac;font-size:10px;line-height:1.6}.carousel-dots{display:flex;gap:8px;margin-top:22px}.carousel-dots i{width:6px;height:6px;border-radius:50%;background:#6e7885}.carousel-dots .active{background:var(--red-bright);box-shadow:0 0 8px rgba(239,65,72,.8)}
.community-links{display:grid;gap:6px;margin-top:15px}.community-links a{padding:8px 10px;border:1px solid rgba(145,170,200,.17);border-radius:3px;background:linear-gradient(180deg,rgba(25,46,70,.7),rgba(11,23,37,.8));color:#cbd4df;font:600 11px var(--condensed);text-transform:uppercase;transition:.2s}.community-links a:hover{border-color:rgba(90,140,200,.5);transform:translateX(2px)}

.media-section{padding:70px clamp(24px,6vw,116px) 85px;background:#050b12}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.section-heading h2{margin:0;font:800 clamp(34px,4vw,56px) var(--condensed);text-transform:uppercase}.section-heading>a{color:#b8c2ce;font:700 13px var(--condensed);text-transform:uppercase}.media-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}.media-card{position:relative;min-height:260px;padding:26px;display:flex;flex-direction:column;justify-content:end;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#0b1420;box-shadow:var(--shadow)}.media-card::before,.media-card::after{content:"";position:absolute;inset:0}.media-card::before{background:linear-gradient(180deg,transparent 20%,rgba(1,4,8,.92)),radial-gradient(circle at 65% 45%,rgba(46,112,230,.32),transparent 18%),linear-gradient(135deg,#131e2b 0 35%,#09111a 35% 100%)}.media-card.fire::before{background:linear-gradient(180deg,transparent 20%,rgba(1,4,8,.92)),radial-gradient(circle at 45% 42%,rgba(224,45,54,.38),transparent 20%),linear-gradient(135deg,#281113 0 35%,#0b1118 35% 100%)}.media-card.civilian::before{background:linear-gradient(180deg,transparent 20%,rgba(1,4,8,.92)),radial-gradient(circle at 72% 40%,rgba(214,173,86,.22),transparent 19%),linear-gradient(135deg,#111c18 0 35%,#091119 35% 100%)}.media-card::after{background-image:var(--card-image, url("assets/hero-scene.svg"));background-size:cover;background-position:center;opacity:.28;mix-blend-mode:screen}.media-card>*{position:relative;z-index:2}.media-card span{color:#b7c1cd;font:700 12px var(--condensed);letter-spacing:.12em}.media-card h3{margin:6px 0 0;font:800 28px var(--condensed);text-transform:uppercase}

.site-footer{min-height:105px;padding:20px clamp(24px,4vw,74px);display:grid;grid-template-columns:260px 1fr 300px;align-items:center;border-top:1px solid var(--line);background:linear-gradient(180deg,#050b12,#02060a)}.footer-motto{display:flex;align-items:center;justify-content:center;gap:20px;color:#c4ccd6;font:700 15px var(--condensed);letter-spacing:.32em;text-align:center}.footer-motto i{width:min(120px,10vw);height:1px;background:var(--red)}.footer-motto span{position:absolute;margin-top:35px;color:#d7dee7}.socials{justify-self:end;display:flex;align-items:center;gap:20px;color:#aeb8c3;font-size:22px}.socials a{transition:.2s}.socials a:hover{color:#fff;transform:translateY(-2px)}.fivem-link{display:flex;align-items:center;gap:8px;font-size:18px}.fivem-link span{font:600 14px var(--condensed)}

@media (max-width: 1250px){
  .site-header{grid-template-columns:210px 1fr 205px;padding-inline:26px}.main-nav a{min-width:auto;padding-inline:10px;font-size:13px}.header-status{width:200px}
  .welcome-sign{display:none}.hero{padding-inline:55px}.hero-logo-wrap{width:50vw}.server-card{right:30px}.feature-strip{padding-inline:45px}.feature-strip article{padding-inline:18px}.feature-strip article:last-child{padding-right:280px;margin-right:-280px}
  .dashboard{padding-inline:30px;grid-template-columns:repeat(6,1fr)}.dashboard .panel{grid-column:span 2}.dashboard .links-panel,.dashboard .staff-panel{grid-column:span 3}
}
@media (max-width: 980px){
  .site-header{height:66px;grid-template-columns:1fr auto;padding-inline:20px}.header-status{display:none}.nav-toggle{display:grid;gap:5px;width:42px;height:42px;place-content:center;cursor:pointer}.nav-toggle span{width:24px;height:2px;background:#fff;transition:.2s}.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .main-nav{position:absolute;top:66px;left:0;right:0;height:auto;padding:10px 18px 20px;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;background:rgba(3,7,12,.98);border-bottom:1px solid var(--line);transform:translateY(-140%);opacity:0;pointer-events:none;transition:.25s}.main-nav.open{transform:none;opacity:1;pointer-events:auto}.main-nav a{min-height:44px;border:1px solid rgba(255,255,255,.06)}
  .hero{min-height:900px;padding:118px 28px 170px;grid-template-columns:1fr;align-content:start}.hero::before{background:linear-gradient(180deg,rgba(2,5,9,.42),rgba(2,5,9,.89) 65%,#03070c)}.hero-copy{text-align:center;justify-self:center}.eyebrow,.hero-actions{justify-content:center}.hero-logo-wrap{grid-row:1;width:min(540px,80vw);margin-bottom:-35px}.hero h1{font-size:clamp(46px,10vw,72px)}.server-card{left:50%;right:auto;bottom:-60px;transform:translateX(-50%)}
  .feature-strip{padding:90px 28px 28px;grid-template-columns:repeat(2,1fr);gap:0}.feature-strip article,.feature-strip article:first-child,.feature-strip article:last-child{padding:18px;border-right:0;border-bottom:1px solid var(--line);margin:0}.feature-strip article:nth-child(odd){border-right:1px solid var(--line)}
  .dashboard{padding-top:50px;grid-template-columns:repeat(2,1fr)}.dashboard .panel,.dashboard .staff-panel,.dashboard .links-panel{grid-column:span 1}.media-grid{grid-template-columns:1fr}.site-footer{grid-template-columns:1fr;text-align:center;gap:22px}.footer-brand,.socials{justify-self:center}.footer-motto{grid-row:1}.footer-motto i{display:none}
}
@media (max-width: 650px){
  .brand-mountain{width:43px}.brand strong{font-size:16px}.brand small{font-size:11px}
  .hero{min-height:850px;padding-inline:18px}.hero-logo-wrap{width:92vw}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.button{padding-inline:14px}.button-ghost{grid-column:1/-1}.hero-description{font-size:13px}.server-card{width:calc(100% - 36px)}
  .feature-strip{grid-template-columns:1fr;padding-inline:18px}.feature-strip article:nth-child(odd){border-right:0}.feature-strip article{padding-inline:0}
  .dashboard{padding-inline:18px;grid-template-columns:1fr}.dashboard .panel,.dashboard .staff-panel,.dashboard .links-panel{grid-column:1}.panel{min-height:265px}.section-heading{align-items:start;gap:20px;flex-direction:column}.media-section{padding-inline:18px}.site-footer{padding-inline:18px}.footer-motto{font-size:12px;letter-spacing:.18em}.socials{gap:16px}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}