/* Self-hosted fonts (Montserrat + JetBrains Mono, latin+cyrillic) */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/jetbrains-mono-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/jetbrains-mono-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:900;font-display:swap;src:url(/fonts/montserrat-900i-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:900;font-display:swap;src:url(/fonts/montserrat-900i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/montserrat-900-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/montserrat-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  --font-body:    'Montserrat', Arial, Helvetica, sans-serif;
  --font-display: 'Montserrat', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --ink:        #11062f;
  --shadow-ink: #0c0322;
  --hex-attack:  #ff4d6d;
  --hex-speed:   #29c7ff;
  --hex-defense: #ffd429;
  --hex-control: #6be24a;
  --hex-support: #b070ff;
  --gold-1: #ffe156;
  --mint-1: #2ee5b0;
  --magenta: #ff2bb6;
  --bg:        #0c0420;
  --bg-2:      #190a3e;
  --surface:   rgba(255,255,255,0.04);
  --fg:     #ffffff;
  --fg-dim: rgba(255,255,255,0.72);
  --accent:     #00ffea;
  --accent-soft:rgba(0,255,234,0.4);
  --accent-hot: #ff4ec9;
  --card-bg:     linear-gradient(180deg, rgba(74,30,150,0.7) 0%, rgba(40,15,90,0.85) 100%);
  --card-border: 3px solid var(--shadow-ink);
  --card-radius: 22px;
  --card-shadow: 0 6px 0 var(--shadow-ink), 0 14px 28px rgba(0,0,0,0.45);
  --cta-bg:     linear-gradient(180deg, #2dffe6 0%, #00c8b3 100%);
  --cta-fg:     #052a2e;
  --cta-border: 3px solid var(--shadow-ink);
  --cta-shadow: 0 6px 0 var(--shadow-ink), 0 12px 22px rgba(0,255,234,0.35);
  --cta-radius: 14px;

  /* Radius scale (consolidates ad-hoc 5–24px values) */
  --r-xs: 8px;     /* badges / chips / tags — unified */
  --r-sm: 8px;     /* small square icons (faq +, ability number) */
  --r-md: 14px;    /* UNIFIED radius — all interactive buttons & controls */
  --r-lg: 16px;    /* panels, consoles (structural, not buttons) */
  /* --cta-radius: 14px — CTA buttons (= --r-md); --card-radius: 22px — big cards */
  --r-pill: 999px;

  /* Elevation scale — chunky bottom edge (was 11 ad-hoc depths) */
  --elev-1: 0 2px 0 var(--shadow-ink);
  --elev-2: 0 3px 0 var(--shadow-ink);
  --elev-3: 0 4px 0 var(--shadow-ink);
  --elev-4: 0 6px 0 var(--shadow-ink);
  --elev-5: 0 8px 0 var(--shadow-ink);

  /* Motion scale — consolidates the 4 dominant durations (1:1, no feel change) */
  --t-fast:   0.15s;  /* micro: taps, small hovers */
  --t-snappy: 0.2s;   /* buttons, filters */
  --t-base:   0.25s;  /* cards, default */
  --t-smooth: 0.3s;   /* larger reveals */

  --section-bg-alt: radial-gradient(ellipse 80% 50% at 50% 50%,
                       rgba(255,120,40,0.10) 0%,
                       rgba(255,40,180,0.05) 40%,
                       transparent 70%);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.modal-open, body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
button:disabled { cursor: not-allowed; opacity: 0.68; }

/* Critical modal guard.
   Modal-specific CSS is allowed to load later, but these hidden defaults must
   arrive with base.css so raw dialog markup never flashes on load. */
.dev-popup-backdrop,
.lightbox-backdrop {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.dev-popup-backdrop.active,
.lightbox-backdrop.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Accessibility — unified keyboard focus ring. The 3px offset puts the ring on
   the dark page background, so it stays visible even on accent-colored controls
   (a cyan ring on a cyan button would otherwise vanish). Mouse clicks don't
   trigger :focus-visible, so pointer users never see it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.btn-glow {
  font-family: var(--font-display);
  font-weight: 900; font-style: italic;
  font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--cta-fg); background: var(--cta-bg);
  border: var(--cta-border); border-radius: var(--cta-radius);
  box-shadow: var(--cta-shadow);
  padding: 14px 26px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform var(--t-fast) ease, box-shadow var(--t-base) ease;
  position: relative; white-space: nowrap;
}
.btn-glow:hover { transform: translateY(-2px); box-shadow: var(--elev-5), 0 14px 24px rgba(0,255,234,0.45); }
.btn-glow:active { transform: translateY(3px); box-shadow: var(--elev-2); }
.btn-glow.btn-lg { font-size: 18px; padding: 18px 38px; }
.btn-glow.btn-xl { font-size: 22px; padding: 22px 46px; }
.btn-glow.animated::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(0,255,200,0.4), transparent);
  filter: blur(8px); z-index: -1; opacity: 0.4;
  animation: btn-neon 2.4s ease-in-out infinite;
}
@keyframes btn-neon { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }
.btn-show-more {
  display: block;
  margin: 40px auto 0;
  font-family: var(--font-display);
  font-weight: 800; font-style: italic;
  font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 2px solid var(--shadow-ink);
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  padding: 14px 32px;
  transition: transform var(--t-fast), background var(--t-snappy);
}
.btn-show-more:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); }

/* ===== Skeleton loaders — neutral shimmer placeholders while a section loads ===== */
.skeleton-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.skeleton-art { aspect-ratio: 420 / 246; }
.skeleton-lines { padding: 18px 18px 22px; display: grid; gap: 11px; }
.skeleton-lines span { height: 14px; border-radius: var(--r-xs); }
.skeleton-lines span:last-child { width: 60%; }
.skeleton-art,
.skeleton-lines span {
  background:
    linear-gradient(100deg,
      rgba(255,255,255,0.04) 30%,
      rgba(255,255,255,0.11) 50%,
      rgba(255,255,255,0.04) 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-art, .skeleton-lines span { animation: none; }
}
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  font: inherit; letter-spacing: inherit;
  color: transparent; pointer-events: none;
  mix-blend-mode: screen;
}
.glitch::before {
  color: rgba(255,0,204,0.7);
  filter: drop-shadow(0 0 6px rgba(255,0,204,0.5));
  text-shadow: none;
  animation: glitch1 6s infinite steps(1);
}
.glitch::after {
  color: rgba(0,255,200,0.6);
  filter: drop-shadow(0 0 6px rgba(0,255,200,0.4));
  text-shadow: none;
  animation: glitch2 6s infinite steps(1);
}
@keyframes glitch1 {
  0%, 92%, 100% { transform: translateX(-2px); opacity: 0.4; clip-path: none; }
  93% { transform: translateX(-14px); clip-path: inset(10% 0 60% 0); opacity: 1; }
  94% { transform: translateX(10px); clip-path: inset(50% 0 25% 0); opacity: 1; }
  95% { transform: translateX(-2px); opacity: 0.4; clip-path: none; }
}
@keyframes glitch2 {
  0%, 92%, 100% { transform: translateX(2px); opacity: 0.3; clip-path: none; }
  93% { transform: translateX(16px); clip-path: inset(60% 0 10% 0); opacity: 1; }
  94% { transform: translateX(-12px); clip-path: inset(20% 0 55% 0); opacity: 1; }
  95% { transform: translateX(2px); opacity: 0.3; clip-path: none; }
}
[data-animate],
[data-animate-stagger] > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-animate].is-visible,
[data-animate-stagger].is-visible > * {
  opacity: 1; transform: translateY(0);
}
[data-animate-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-animate-stagger].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
[data-animate-stagger].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-animate-stagger].is-visible > *:nth-child(4) { transition-delay: 0.24s; }
[data-animate-stagger].is-visible > *:nth-child(5) { transition-delay: 0.32s; }
[data-animate-stagger].is-visible > *:nth-child(6) { transition-delay: 0.40s; }