/* ===============
   SCPD Designsystem
   =============== */
:root {
  --color-bg: #0e121a;
  --color-bg-alt: #161c26;
  --color-surface: #1f2733;
  --color-border: #2e3b4b;
  --color-text: #d5dce6;
  --color-text-muted: #9aa6b7;
  --color-primary: #2d6cff;
  --color-primary-glow: 190 100% 50%;
  --color-accent: #00c8ff;
  --color-accent-grad: linear-gradient(135deg,#00c8ff,#0072ff 60%,#003b88);
  --color-danger: #ff4d4d;
  --color-warning: #ffcc33;
  --color-success: #3ddc97;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 4px -2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 18px -4px rgba(0,0,0,.5);
  --shadow-glow: 0 0 0 1px rgba(0,200,255,.4),0 0 12px -2px rgba(0,114,255,.6);
  --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Montserrat', var(--font-sans);
  --max-width: 1200px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --nav-height: 68px;
}

html[data-theme="light"] {
  --color-bg: #f5f7fa;
  --color-bg-alt: #ffffff;
  --color-surface: #ffffff;
  --color-border: #d9e1ea;
  --color-text: #1b232c;
  --color-text-muted: #506070;
}

* { box-sizing: border-box; }
body {
  margin:0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }

h1,h2,h3,h4 { font-family: var(--font-display); letter-spacing:.5px; }
h1 { font-size: clamp(2.4rem,5vw,3.4rem); margin:.25em 0 .5em; }
h2 { font-size: clamp(1.6rem,3.3vw,2.4rem); margin:0 0 .75em; }
h3 { font-size:1.25rem; margin:0 0 .5em; }

p { margin:0 0 1em; }
.lead { font-size:1.25rem; max-width: 680px; }
.small { font-size:.75rem; opacity:.7; }
.container { width:100%; margin:0 auto; max-width: var(--max-width); padding:0 1.6rem; }
.section { padding: clamp(4rem,8vw,6rem) 0; position:relative; }
.section--alt { background: var(--color-bg-alt); }
.section--highlight { background: linear-gradient(140deg,#152132,#152132 35%,#183956 60%,#1a4d6f); position:relative; }
.section--highlight:before { content:""; position:absolute; inset:0; backdrop-filter: blur(2px); }
.section--highlight > .container { position:relative; }

/* NAV */
.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter: blur(14px);
  background: radial-gradient(circle at 0 0, rgba(0,200,255,.18), transparent 55%), rgba(8,12,20,.92);
  border-bottom:1px solid rgba(0,200,255,.18);
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: var(--nav-height);
  gap:1.5rem;
  max-width: var(--max-width);
  margin:0 auto;
  padding:0 1.6rem;
}
.nav__left {
  display:flex;
  align-items:center;
}
.nav__brand {
  display:flex;
  gap:.75rem;
  align-items:center;
  text-decoration:none;
  color: var(--color-text);
}
.nav__logo-wrap {
  width:38px;
  height:38px;
  border-radius:12px;
  background: radial-gradient(circle at 30% 0, #00c8ff, #003b88);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 0 18px rgba(0,200,255,.6);
}
.nav__logo-wrap img {
  width:26px;
  height:26px;
}
.nav__title {
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.nav__title-main {
  font-weight:700;
  letter-spacing:.14em;
  font-size:.82rem;
  text-transform:uppercase;
}
.nav__title-sub {
  font-size:.72rem;
  color: var(--color-text-muted);
}
.nav__links {
  list-style:none;
  display:flex;
  gap:.9rem;
  margin:0;
  padding:0;
  align-items:center;
}
.nav__links a {
  text-decoration:none;
  padding:.45rem .85rem;
  border-radius:999px;
  font-weight:500;
  color: var(--color-text-muted);
  position:relative;
  font-size:.85rem;
}
.nav__links a:hover { background: rgba(13,20,32,.9); color: var(--color-text); }
.nav__links .nav__cta {
  padding:.5rem 1rem;
  background: var(--color-accent-grad);
  color:#02121f;
  font-weight:600;
  box-shadow:0 0 16px rgba(0,200,255,.7);
}
.nav__links .nav__cta:hover { filter:brightness(1.05); }
.nav__toggle { display:none; background:none; border:none; cursor:pointer; width:46px; height:46px; position:relative; }
.nav__toggle span, .nav__toggle span:before, .nav__toggle span:after { position:absolute; left:50%; top:50%; width:24px; height:2px; background: var(--color-text); content:""; transform:translate(-50%,-50%); transition:.35s var(--ease); }
.nav__toggle span:before { transform:translate(-50%, -9px); }
.nav__toggle span:after { transform:translate(-50%, 7px); }
.nav__toggle[aria-expanded="true"] span { background:transparent; }
.nav__toggle[aria-expanded="true"] span:before { transform:translate(-50%,0) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:after { transform:translate(-50%,0) rotate(-45deg); }

/* HERO */
.hero { min-height: clamp(540px,80vh,720px); display:flex; align-items:center; position:relative; overflow:hidden; }
.hero__bg { position:absolute; inset:0; background:
    linear-gradient(120deg, rgba(3,8,20,.94), rgba(10,26,50,.96)),
    url("assets/custom/hero-bg.jpg") center/cover no-repeat;
  animation: pulseBg 18s infinite alternate;
 }
@keyframes pulseBg { from { filter:brightness(.9); } to { filter:brightness(1.1); } }
.hero__content { position:relative; padding: 1.6rem 0 3rem; }
.hero__topbar { display:flex; justify-content:flex-end; gap:.5rem; margin-bottom:1.2rem; }
.pill {
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid rgba(0,200,255,.25);
  background: rgba(10,16,26,.85);
  color: var(--color-text-muted);
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.pill--online { color: var(--color-success); border-color: rgba(61,220,151,.5); }
.pill--players { border-style:dashed; }
.hero__card {
  background: rgba(10, 16, 26, 0.78);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 200, 255, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  padding: 2.2rem 2.4rem 2.2rem;
  backdrop-filter: blur(18px);
}
.hero__card h1 { margin-top:0; }
.hero__card .lead { max-width: 720px; }
.hero__actions { display:flex; gap:1rem; margin:2rem 0 2.8rem; flex-wrap:wrap; }
.stats { display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:1.5rem; }
.stat { display:flex; flex-direction:column; }
.stat__value { font-size:2rem; font-weight:700; background: var(--color-accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat__label { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color: var(--color-text-muted); }

/* GRIDS */
.grid { display:grid; gap:1.6rem; }
.cols-3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.cols-4 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.features .feature-card, .division-card { background: var(--color-surface); padding:1.4rem 1.3rem 1.2rem; border:1px solid var(--color-border); border-radius: var(--radius-md); position:relative; isolation:isolate; }
.feature-card:before, .division-card:before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(0,200,255,.08),transparent 60%); border-radius:inherit; opacity:.6; }
.feature-card h3, .division-card h3 { margin-top:0; }

/* TIMELINE */
.timeline { position:relative; display:grid; gap:2.4rem; max-width:800px; margin:0 auto; }
.timeline:before { content:""; position:absolute; left:18px; top:0; bottom:0; width:2px; background:linear-gradient(var(--color-accent),transparent); }
.timeline__item { display:flex; gap:1.2rem; }
.timeline__dot { width:36px; height:36px; background: var(--color-accent-grad); border-radius:50%; box-shadow: var(--shadow-glow); }
.timeline__content { background: var(--color-surface); padding:1rem 1.1rem .9rem; border-radius: var(--radius-md); border:1px solid var(--color-border); flex:1; }

/* RANKS */
.rank-list { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.rank { display:flex; align-items:center; gap:.9rem; background: var(--color-surface); padding:.8rem 1rem; border-radius: var(--radius-sm); border:1px solid var(--color-border); }
.rank__badge { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.35rem .6rem; background: var(--color-accent-grad); border-radius: var(--radius-sm); color:#fff; box-shadow: var(--shadow-sm); }

/* VEHICLES */
.vehicle-grid .vehicle { background: var(--color-surface); padding:1rem; border:1px solid var(--color-border); border-radius: var(--radius-md); text-align:center; transition:.35s var(--ease); position:relative; overflow:hidden; }
.vehicle img { width:110px; margin:0 auto 1rem; filter:drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.vehicle:hover { transform:translateY(-4px); box-shadow: var(--shadow-md); }
.vehicle:before { content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(0,200,255,.12),transparent 65%); opacity:.7; }

/* FORM */
form { margin-top:2rem; }
.form-grid { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.form-control { display:flex; flex-direction:column; gap:.35rem; }
.form-control.full { grid-column:1 / -1; }
label { font-weight:600; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; }
input, textarea { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-sm); padding:.75rem .85rem; color: var(--color-text); font:inherit; resize:vertical; }
input:focus, textarea:focus { outline:2px solid var(--color-accent); outline-offset:1px; }
.error { color: var(--color-danger); font-size:.7rem; min-height:1em; }
.form-footer { margin-top:1.4rem; display:flex; flex-direction:column; gap:.8rem; }
.hint { font-size:.7rem; color: var(--color-text-muted); }

/* ACCORDION */
.accordion__item { border:1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom:.8rem; background: var(--color-surface); overflow:hidden; }
.accordion__trigger { width:100%; text-align:left; padding:1rem 1.1rem; background:none; border:none; font:inherit; font-weight:600; color: var(--color-text); cursor:pointer; position:relative; }
.accordion__trigger:after { content:""; position:absolute; right:1rem; top:50%; width:10px; height:10px; border-right:2px solid var(--color-text-muted); border-bottom:2px solid var(--color-text-muted); transform:translateY(-50%) rotate(45deg); transition:.35s; }
.accordion__trigger[aria-expanded="true"]:after { transform:translateY(-50%) rotate(225deg); }
.accordion__panel { padding:0 1.1rem 1rem; animation: accordion .4s var(--ease); }
@keyframes accordion { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

/* CONTACT */
.contact-list { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.contact-list a { color: var(--color-accent); text-decoration:none; }
.contact-list a:hover { text-decoration:underline; }

/* FOOTER */
.site-footer { background: var(--color-bg-alt); padding:3rem 0 3.4rem; margin-top:4rem; border-top:1px solid var(--color-border); }
.footer__grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.footer__nav { display:flex; flex-direction:column; gap:.5rem; }
.footer__nav a { text-decoration:none; color: var(--color-text-muted); font-size:.85rem; }
.footer__nav a:hover { color: var(--color-text); }
.footer__brand img { margin-bottom:.8rem; }
.footer__legal { font-size:.7rem; color: var(--color-text-muted); }

/* BUTTONS */
.btn { --btn-bg: var(--color-surface); --btn-color: var(--color-text); --btn-border: var(--color-border); border:1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-color); padding:.75rem 1.2rem; font-weight:600; border-radius: var(--radius-sm); cursor:pointer; text-decoration:none; display:inline-flex; gap:.55rem; align-items:center; position:relative; overflow:hidden; }
.btn--primary { --btn-bg: var(--color-accent-grad); --btn-color:#081420; border:none; box-shadow: 0 0 18px rgba(0,200,255,.5); }
.btn--primary:hover { filter:brightness(1.1); box-shadow:0 0 26px rgba(0,200,255,.8); }
.btn--outline { background:transparent; }
.btn--outline:hover { background: var(--color-surface); }
.btn--ghost { background: transparent; border:1px dashed rgba(0,200,255,.4); color: var(--color-text-muted); }
.btn--ghost:hover { border-style:solid; color: var(--color-text); }
.btn:active { transform:translateY(1px); }

.theme-switch { background: var(--color-surface); border:1px solid var(--color-border); width:42px; height:42px; border-radius: var(--radius-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.theme-switch:hover { background: var(--color-bg-alt); }

/* RESPONSIVE NAV */
@media (max-width: 860px) {
  .nav__toggle { display:block; }
  .nav__links { position:absolute; top: var(--nav-height); right:0; background: rgba(14,18,26,.95); flex-direction:column; align-items:flex-start; padding:1rem 1.2rem 2rem; min-width:220px; border-left:1px solid var(--color-border); border-bottom:1px solid var(--color-border); transform-origin: top right; transform:scale(.9) translateY(-8px); opacity:0; pointer-events:none; transition:.4s var(--ease); }
  .nav__links.show { opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }
  .nav__links a, .nav__links button.theme-switch { width:100%; }
  .hero__topbar { justify-content:flex-start; }
  .hero__card { padding: 1.5rem 1.4rem 1.7rem; }
}

/* UTIL */
.section--highlight h2 { background: linear-gradient(90deg,#fff,#c6e9ff); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Scroll effect (optional) */
.nav__links a.active { background: var(--color-accent); color:#02121f; }

/* Focus visible */
:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }

/* Light theme tweaks */
html[data-theme="light"] .section--highlight h2 { background: linear-gradient(90deg,#003b88,#0072ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
html[data-theme="light"] .rank, html[data-theme="light"] .feature-card, html[data-theme="light"] .division-card, html[data-theme="light"] .vehicle { background:#ffffff; }

/* Animations subtle hover */
.feature-card:hover, .division-card:hover { transform:translateY(-4px); transition:.35s var(--ease); box-shadow: var(--shadow-md); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}