/* ═══════════════════════════════════════════════════════════════════════════
   GameMotionLab — Main Stylesheet
   AI & Physics in Sports  ·  #080d14 base  ·  #3dffa0 neon-green + #00d4ff cyan
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom properties ───────────────────────────────────────────────────── */
:root {
  --bg:         #080d14;
  --bg2:        #0e1620;
  --bg3:        #162030;
  --accent:     #3dffa0;          /* neon green — primary brand colour        */
  --accent2:    #00d4ff;          /* cyan — secondary                         */
  --accent3:    #f0b429;          /* gold — highlights / warning              */
  --text:       #e8f0ec;
  --text2:      #8fa89a;
  --text3:      #566b61;
  --border:     #1a2a22;
  --glow:       rgba(61,255,160,.15);
  --glow2:      rgba(0,212,255,.12);
  --glow3:      rgba(61,255,160,.06);
  --danger:     #ef4444;
  --warning:    #f0b429;
  --success:    #3dffa0;
  --grad:       linear-gradient(135deg, #3dffa0 0%, #00d4ff 100%);
  --grad-text:  linear-gradient(135deg, #3dffa0 20%, #00d4ff 80%);
  --radius:     12px;
  --radius-lg:  20px;
  --font:       'Space Grotesk', system-ui, sans-serif;
  --mono:       'JetBrains Mono', 'Fira Code', monospace;
  --trans:      .22s cubic-bezier(.4,0,.2,1);
}

/* ── Light theme ──────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:         #f4f7f5;
  --bg2:        #e8ede9;
  --bg3:        #dce3de;
  --text:       #1a2e22;
  --text2:      #4a6555;
  --text3:      #7a9488;
  --border:     #c2d4c8;
  --glow:       rgba(20,140,80,.12);
  --glow2:      rgba(0,160,200,.10);
  --glow3:      rgba(20,140,80,.06);
  --accent:     #0d9956;
  --accent2:    #0094b3;
  --accent3:    #c08a10;
  --danger:     #dc2626;
  --warning:    #c08a10;
  --success:    #0d9956;
  --grad:       linear-gradient(135deg, #0d9956 0%, #0094b3 100%);
  --grad-text:  linear-gradient(135deg, #0d9956 20%, #0094b3 80%);
}
[data-theme="light"] .nav.scrolled { background: rgba(244,247,245,.94); }
[data-theme="light"] .dropdown-menu { background: var(--bg); box-shadow: 0 16px 48px rgba(0,0,0,.12); }
[data-theme="light"] .hero-bg {
  background:
    radial-gradient(ellipse 70% 55% at 30% 50%, rgba(13,153,86,.06) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 75% 65%, rgba(0,148,179,.05) 0%, transparent 60%);
}
[data-theme="light"] .hero-grid-lines {
  background-image:
    linear-gradient(rgba(13,153,86,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,153,86,.06) 1px, transparent 1px);
}
[data-theme="light"] .hero-grid-lines::after {
  background-image: linear-gradient(135deg, rgba(13,153,86,.04) 1px, transparent 1px);
}
[data-theme="light"] .sim-card { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
[data-theme="light"] .sim-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.10); }

/* ── Theme toggle button ─────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: border-color var(--trans), color var(--trans), background var(--trans);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--glow3);
}
.theme-toggle svg { width: 20px; height: 20px; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.theme-toggle:hover svg { transform: rotate(30deg); }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"]  .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: none; }

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; transition: color var(--trans); }
a:hover { color: #fff; }

/* ── Gradient text utility ────────────────────────────────────────────────── */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

img, svg { display: block; max-width: 100%; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p  { color: var(--text2); max-width: 68ch; }

.mono { font-family: var(--mono); }
.accent  { color: var(--accent); }
.accent2 { color: var(--accent2); }
.accent3 { color: var(--accent3); }
.muted   { color: var(--text3); font-size: .875rem; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container {
  width: min(1200px, 100% - 2rem);
  margin-inline: auto;
}
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }

/* ── Navigation ──────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: blur(0);
  border-bottom: 1px solid transparent;
  transition: background var(--trans), backdrop-filter var(--trans), border-color var(--trans);
  padding: 1rem 0;
}
.nav.scrolled {
  background: rgba(10,14,26,.92);
  backdrop-filter: blur(16px);
  border-color: var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Orbitron', var(--font);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(61,255,160,.35));
}
.nav-logo .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--grad);
  box-shadow: 0 0 12px var(--accent);
  animation: pulse-dot 2.4s infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 6px var(--accent); }
  50%      { box-shadow: 0 0 18px var(--accent), 0 0 36px rgba(61,255,160,.4); }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  color: var(--text2);
  font-weight: 500;
  font-size: .95rem;
  padding: .25rem 0;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--grad);
  transition: width var(--trans);
  border-radius: 2px;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-auth {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* ── Dropdown ─────────────────────────────────────────────────────────────── */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + .75rem);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem;
  min-width: 260px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--trans), transform var(--trans);
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  z-index: 200;
}
/* Invisible "bridge" filling the .75rem visual gap between the trigger and
   the menu.  Without this, moving the cursor down off "Simulations" briefly
   leaves the hover area and the menu collapses before reaching the items. */
.dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.75rem;
  height: .75rem;
}
.dropdown-category {
  padding: .55rem .75rem .25rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}
.dropdown-category:not(:first-child) {
  border-top: 1px solid var(--border);
  margin-top: .35rem;
  padding-top: .65rem;
}
.dropdown-category-disabled {
  padding: .35rem .75rem .45rem;
  font-size: .82rem;
  color: var(--text2);
  opacity: .4;
  font-style: italic;
  pointer-events: none;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  color: var(--text2);
  font-size: .9rem;
  transition: background var(--trans), color var(--trans);
}
.dropdown-menu a:hover { background: var(--bg3); color: var(--accent); }
.dropdown-menu .badge {
  margin-left: auto;
  font-size: .65rem;
  padding: .15rem .4rem;
  border-radius: 4px;
  background: rgba(0,212,255,.12);
  color: var(--accent);
  font-weight: 700;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  border: none;
  transition: all var(--trans);
  white-space: nowrap;
  font-family: var(--font);
}
.btn-primary {
  background: var(--grad);
  color: var(--bg);
  font-weight: 700;
  box-shadow: 0 0 24px rgba(61,255,160,.3);
  border: none;
}
.btn-primary:hover {
  box-shadow: 0 0 40px rgba(61,255,160,.55), 0 0 20px rgba(0,212,255,.3);
  transform: translateY(-2px);
  color: var(--bg);
  filter: brightness(1.08);
}
.btn-outline {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--glow3);
  box-shadow: 0 0 16px var(--glow);
}
/* Light theme: boost btn-outline contrast — white fill, darker border,
   stronger hover tint — so buttons don't vanish into the page */
[data-theme="light"] .btn-outline {
  background: #ffffff;
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
[data-theme="light"] .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(13,153,86,.08);
  box-shadow: 0 3px 10px rgba(13,153,86,.18);
}
.btn-ghost {
  background: transparent;
  color: var(--accent);
  padding: .55rem .75rem;
}
.btn-ghost:hover { background: var(--glow3); }
.btn-cyan {
  background: var(--accent2);
  color: var(--bg);
  font-weight: 700;
  box-shadow: 0 0 20px var(--glow2);
}
.btn-cyan:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 32px rgba(0,212,255,.5);
  transform: translateY(-1px);
}
.btn-lg { padding: .8rem 2rem; font-size: 1.05rem; border-radius: 10px; }
.btn-sm { padding: .35rem .85rem; font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
}
/* Atmospheric banner bg — pure CSS, zero layout impact */
.hero::before {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 65%;
  background: url('/static/img/banner-wide.png') center 35% / cover no-repeat;
  opacity: .16;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 25%, black 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, black 25%, black 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 860px) { .hero::before { display: none; } }
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 30% 50%, rgba(61,255,160,.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 75% 65%, rgba(0,212,255,.06) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 85% 20%, rgba(61,255,160,.04) 0%, transparent 55%);
  pointer-events: none;
}
.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(61,255,160,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,255,160,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
/* diagonal accent line */
.hero-grid-lines::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(61,255,160,.025) 1px, transparent 1px);
  background-size: 80px 80px;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .9rem;
  background: rgba(61,255,160,.07);
  border: 1px solid rgba(61,255,160,.25);
  border-radius: 100px;
  font-size: .75rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 16px rgba(61,255,160,.1);
}
.hero h1 {
  font-family: 'Orbitron', var(--font);
  font-weight: 900;
  letter-spacing: -.01em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 0 30px rgba(61,255,160,.3));
  line-height: 1.15;
}
.hero p {
  font-size: 1.15rem;
  margin-bottom: 2rem;
  color: var(--text2);
}
.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.hero-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.hero-stat { display: flex; flex-direction: column; gap: .15rem; }
.hero-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--accent);
}
.hero-stat-label { font-size: .8rem; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; }

.hero-chart {
  position: absolute;
  /* Align right edge with the .container (max 1200px, centered) instead of
     the viewport — otherwise on wide screens the chart drifts far from the
     centred content and the page looks off-balance. */
  right: max(1rem, calc(50% - 600px));
  top: 50%;
  transform: translateY(-50%);
  width: 55%;
  max-width: 600px;
  opacity: .75;
  pointer-events: none;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.card:hover {
  border-color: rgba(61,255,160,.3);
  box-shadow: 0 0 32px var(--glow), 0 8px 32px rgba(0,0,0,.4);
  transform: translateY(-3px);
}
.card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  background: rgba(61,255,160,.07);
  border: 1px solid rgba(61,255,160,.18);
}
.card-icon.cyan   { background: rgba(0,212,255,.07);  border-color: rgba(0,212,255,.2); }
.card-icon.green  { background: rgba(61,255,160,.07); border-color: rgba(61,255,160,.2); }
.card-icon.gold   { background: rgba(240,180,41,.07); border-color: rgba(240,180,41,.2); }

.sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.sim-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
  cursor: pointer;
}
.sim-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 40px var(--glow), 0 0 1px var(--accent);
  transform: translateY(-4px);
}
.sim-card-header {
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--bg3) 0%, rgba(61,255,160,.04) 100%);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.sim-card-header::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,255,160,.1) 0%, transparent 70%);
}
.sim-card-emoji { font-size: 2.25rem; margin-bottom: .5rem; }
.sim-card-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.sim-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.sim-card-desc { font-size: .9rem; color: var(--text2); margin-bottom: 1rem; }
.sim-card-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.tag {
  font-size: .7rem;
  padding: .2rem .6rem;
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tag-green   { background: rgba(61,255,160,.1);  color: var(--accent); }
.tag-cyan    { background: rgba(0,212,255,.1);   color: var(--accent2); }
.tag-gold    { background: rgba(240,180,41,.1);  color: var(--accent3); }
.tag-dimmed  { background: rgba(255,255,255,.05); color: var(--text3); }

.sim-card.coming-soon {
  opacity: .65;
  filter: grayscale(30%);
  cursor: default;
}
.sim-card.coming-soon:hover { transform: none; border-color: var(--border); box-shadow: none; }
.coming-soon-badge {
  position: absolute;
  top: .75rem; right: .75rem;
  font-size: .65rem;
  padding: .2rem .5rem;
  background: rgba(245,158,11,.12);
  color: var(--warning);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Features strip ──────────────────────────────────────────────────────── */
.features-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  padding: 3rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.feature-item { display: flex; gap: .85rem; align-items: flex-start; }
.feature-icon {
  font-size: 1.3rem;
  margin-top: .1rem;
  flex-shrink: 0;
}
.feature-text h4 { font-size: .95rem; color: var(--text); margin-bottom: .15rem; }
.feature-text p  { font-size: .82rem; color: var(--text3); margin: 0; }

/* ── Section header ──────────────────────────────────────────────────────── */
.section-header { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.section-header p { margin: .75rem auto 0; font-size: 1.05rem; }
.section-label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .75rem;
}

/* ── Simulation page layout ──────────────────────────────────────────────── */
.sim-page { padding-top: 100px; padding-bottom: 60px; }
.sim-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 860px) { .sim-layout { grid-template-columns: 1fr; } }

.sim-controls {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: sticky;
  top: 90px;
}
.sim-controls h3 { margin-bottom: 1.25rem; color: var(--text); }

.sim-output {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sim-chart-area {
  padding: 1.25rem;
  min-height: 420px;
}
.sim-stats {
  padding: 1.25rem;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
}
.stat-item { display: flex; flex-direction: column; gap: .2rem; }
.stat-value { font-size: 1.3rem; font-weight: 700; font-family: var(--mono); color: var(--accent); }
.stat-label { font-size: .75rem; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }

.result-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: .9rem;
}
.result-badge.in  { background: rgba(16,185,129,.12); color: var(--accent3); border: 1px solid rgba(16,185,129,.25); }
.result-badge.out { background: rgba(239,68,68,.1);   color: var(--danger);  border: 1px solid rgba(239,68,68,.2); }

/* ── Form controls ───────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.1rem; }
.form-group label {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: .4rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.form-group label .value-display {
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 700;
  font-size: .85rem;
}
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--bg3);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(0,212,255,.5);
  transition: box-shadow var(--trans);
}
input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 16px rgba(0,212,255,.8);
}

select, input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: .55rem .85rem;
  font-family: var(--font);
  font-size: .9rem;
  outline: none;
  transition: border-color var(--trans), box-shadow var(--trans);
}
select:focus, input[type="text"]:focus,
input[type="email"]:focus, input[type="password"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(61,255,160,.1);
}

/* ── Auth forms ───────────────────────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1rem;
}
.auth-card {
  width: min(440px, 100%);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: 0 0 60px rgba(0,0,0,.5);
}
.auth-card h2 { margin-bottom: .5rem; }
.auth-card .subtitle { color: var(--text2); font-size: .9rem; margin-bottom: 2rem; }
.auth-card .form-group label {
  text-transform: none;
  letter-spacing: 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text2);
  justify-content: flex-start;
}
.auth-divider { text-align: center; color: var(--text3); font-size: .85rem; margin: 1.25rem 0; }
.auth-footer { margin-top: 1.5rem; text-align: center; color: var(--text3); font-size: .875rem; }
.auth-footer a { color: var(--accent); font-weight: 600; }

.alert {
  padding: .75rem 1rem;
  border-radius: 8px;
  font-size: .875rem;
  margin-bottom: 1.25rem;
}
.alert-error   { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.25);  color: #fca5a5; }
.alert-success { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25); color: #6ee7b7; }
.alert-info    { background: rgba(61,255,160,.07); border: 1px solid rgba(61,255,160,.2);  color: var(--accent); }

/* ── Community / social section ──────────────────────────────────────────── */
.social-strip {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.social-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.5rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text2);
  transition: all var(--trans);
  font-weight: 600;
  font-size: .9rem;
}
.social-card:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 20px var(--glow);
  background: var(--glow3);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
  color: var(--text3);
  font-size: .875rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
}
.footer-brand { display: flex; flex-direction: column; gap: .75rem; }
.footer-brand p { font-size: .85rem; color: var(--text3); max-width: 28ch; }
footer h4 { color: var(--text2); font-size: .85rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .1em; margin-bottom: .85rem; }
footer ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
footer ul a { color: var(--text3); font-size: .875rem; }
footer ul a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  color: var(--text3);
  font-size: .8rem;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ── Responsive nav ──────────────────────────────────────────────────────── */
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: .4rem; }
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text2);
  border-radius: 2px;
  transition: all var(--trans);
  margin: 4px 0;
}
@media (max-width: 860px) {
  .nav-hamburger { display: block; }
  .nav-links, .nav-auth { display: none; }

  /* Mobilní menu — bulletproof CSS Grid layout.
     Historie: zkoušeli jsme `:has(.open)` (Chrome 105+ / Samsung Internet 19+
     — selhal na starších mobilech), pak `flex-wrap+flex-basis:100%` (občas
     položky neuwrapovaly a uživatel viděl jen poslední — login).  Grid s
     pojmenovanými oblastmi funguje všude od r. 2017 (Chrome 57 / Samsung
     Internet 6.2 / iOS Safari 10.3) a explicitně garantuje, že každá
     sekce má svůj řádek. */
  .nav-inner.menu-open {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo      hamburger"
      "navlinks  navlinks"
      "navauth   navauth";
    row-gap: .5rem;
    align-items: center;
  }
  .nav-inner.menu-open .nav-logo       { grid-area: logo; }
  .nav-inner.menu-open .nav-hamburger  { grid-area: hamburger; justify-self: end; }
  .nav-inner.menu-open .nav-links.open { grid-area: navlinks; }
  .nav-inner.menu-open .nav-auth.open  { grid-area: navauth; }

  /* Viditelné panely — !important vyhrává nad případnou starší pravidlem
     `.nav-links { display: flex }` z desktopové části, takže máme jistotu,
     že se objeví i kdyby jiný selektor cokoli skrýval. */
  .nav-links.open {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: .85rem 0;
    gap: .85rem;
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    list-style: none;
  }
  .nav-auth.open {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: .35rem 0 .75rem;
    gap: .75rem;
    box-sizing: border-box;
  }

  /* Když je menu otevřené, .nav nesmí být průhledné, jinak prosvítá obsah pod ním. */
  .nav.menu-open {
    background: rgba(10,14,26,.97);
    backdrop-filter: blur(16px);
    border-color: var(--border);
    max-height: 100vh;
    overflow-y: auto;
  }
  [data-theme="light"] .nav.menu-open {
    background: rgba(244,247,245,.97);
  }

  .hero-chart { display: none; }

  /* Mobilní dropdown — položky pod "Simulace" se zobrazí inline místo
     plovoucího menu, aby je šlo bez problému ťuknout prstem. */
  .nav-links.open .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    background: transparent;
    border: none;
    padding: .35rem 0 .5rem .85rem;
    min-width: 0;
    width: 100%;
    z-index: auto;
  }
  .nav-links.open .dropdown-menu::before { display: none; }
  /* Parent "Simulace ▼" link is informational only on mobile — disable
     it so taps don't navigate to "#"; the children below are the actual
     entry points. */
  .nav-links.open .dropdown > a { pointer-events: none; }
}

/* ── Utilities ────────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Plotly override for dark theme ──────────────────────────────────────── */
.js-plotly-plot .plotly .modebar { background: transparent !important; }
.js-plotly-plot .plotly .modebar-btn path { fill: var(--text3) !important; }
.js-plotly-plot .plotly .modebar-btn:hover path { fill: var(--accent) !important; }

/* ── Nav scrolled — tinted border ───────────────────────────────────────── */
.nav.scrolled { border-color: rgba(61,255,160,.08); }

/* ── Dropdown hover accent ───────────────────────────────────────────────── */
.dropdown-menu a:hover { color: var(--accent); }
.dropdown-menu .badge {
  background: rgba(61,255,160,.1);
  color: var(--accent);
}

/* ── Stat value gradient ─────────────────────────────────────────────────── */
.hero-stat-num, .stat-value {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Range thumb — green glow ────────────────────────────────────────────── */
input[type="range"]::-webkit-slider-thumb {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(61,255,160,.5);
}
input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 16px rgba(61,255,160,.8);
}

/* ── Glowing divider ─────────────────────────────────────────────────────── */
.glow-divider {
  width: 100px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  margin: 1.5rem auto;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(61,255,160,.4);
}

/* ── Animated counter ────────────────────────────────────────────────────── */
.counter { font-variant-numeric: tabular-nums; }

/* ── Logo images ─────────────────────────────────────────────────────────── */
.nav-logo-img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  /* PNG has dark bg — lighten blend removes black, keeps the coloured logo */
  mix-blend-mode: lighten;
  filter: drop-shadow(0 0 10px rgba(61,255,160,.5)) brightness(1.1);
  transition: filter var(--trans), transform var(--trans);
}
.nav-logo:hover .nav-logo-img {
  filter: drop-shadow(0 0 18px rgba(61,255,160,.8)) brightness(1.2);
  transform: rotate(-6deg) scale(1.1);
}
.nav-logo-img-sm {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
}

/* ── Brand banner section ────────────────────────────────────────────────── */
.brand-banner-section {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}
.brand-banner-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.brand-banner-img {
  width: 100%;
  height: auto;           /* přirozený poměr stran, nula deformace */
  display: block;
  filter: brightness(.82) saturate(1.2);
  transition: transform .7s ease, filter .5s ease;
}
.brand-banner-img-wrap:hover .brand-banner-img {
  transform: scale(1.03);
  filter: brightness(.92) saturate(1.3);
}
/* top & bottom fades only — sides kept visible */
.brand-banner-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      var(--bg) 0%,
      transparent 14%,
      transparent 80%,
      var(--bg) 100%);
  pointer-events: none;
}
.brand-banner-caption {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: rgba(8,13,20,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(61,255,160,.25);
  border-radius: 18px;
  padding: .85rem 1.75rem;
  box-shadow: 0 0 48px rgba(61,255,160,.14), 0 8px 40px rgba(0,0,0,.5);
  white-space: nowrap;
}
.brand-caption-logo {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(61,255,160,.6));
  flex-shrink: 0;
}
.brand-caption-title {
  font-family: 'Orbitron', var(--font);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: .06em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.brand-caption-sub {
  font-size: .8rem;
  color: var(--text2);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: .35rem;
}
@media (max-width: 600px) {
  .brand-banner-caption { padding: .6rem 1.1rem; gap: .7rem; bottom: 1rem; }
  .brand-caption-logo { width: 38px !important; height: 38px !important; max-width: 38px !important; max-height: 38px !important; }
  .brand-caption-title { font-size: .9rem; }
  .brand-caption-sub { font-size: .68rem; }
}

/* ── Language switcher ───────────────────────────────────────────────────── */
.lang-switcher {
  position: relative;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text2);
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--font);
  padding: .3rem .65rem;
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
}
.lang-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--glow3);
}
.lang-menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .35rem;
  min-width: 130px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--trans), transform var(--trans);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  z-index: 300;
}
.lang-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.lang-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 6px;
  color: var(--text2);
  font-size: .875rem;
  font-weight: 500;
  transition: background var(--trans), color var(--trans);
  text-decoration: none;
}
.lang-option:hover { background: var(--bg3); color: var(--text); }
.lang-option.active { color: var(--accent); font-weight: 700; }
.lang-option.active::after {
  content: '✓';
  margin-left: auto;
  font-size: .75rem;
}