:root {
  --color-bg: #07110e;
  --color-surface: #0d1d18;
  --color-surface-alt: #102b22;
  --color-text: #edf6e9;
  --color-muted: #9eb2a8;
  --color-primary: #cfff4f;
  --color-primary-dark: #89b72e;
  --color-secondary: #36d6a1;
  --color-accent: #ff9f43;
  --color-border: rgba(207, 255, 79, .22);
  --font-heading: "Arial Narrow", "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-soft: 0 22px 55px rgba(0, 0, 0, .34);
  --line: rgba(237, 246, 233, .12);
  --chalk: rgba(237, 246, 233, .68);
  --danger: #ff5f5f;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-body);
  color: var(--color-text);
  background:
    radial-gradient(circle at 12% 8%, rgba(54, 214, 161, .12), transparent 26rem),
    radial-gradient(circle at 92% 18%, rgba(207, 255, 79, .11), transparent 30rem),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--color-bg);
  background-size: auto, auto, 42px 42px, 42px 42px, auto;
  line-height: 1.65;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: #e6ff95; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
img { max-width: 100%; height: auto; display: block; }

.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.skip-link { position: absolute; left: -999px; top: 12px; padding: 10px 14px; background: var(--color-primary); color: #0a120e; border-radius: var(--radius-sm); z-index: 20; }
.skip-link:focus { left: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 17, 14, .86);
  backdrop-filter: blur(16px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 14px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.brand img { width: 34px; height: 34px; }
.nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nav-link { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 12px; border-radius: 999px; color: var(--color-muted); font-size: .94rem; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--color-text); background: rgba(237,246,233,.07); }
.header-cta { display: inline-flex; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-primary); color: #10160b; box-shadow: 0 12px 28px rgba(207, 255, 79, .16); }
.btn-primary:hover { color: #10160b; background: #dfff76; }
.btn-secondary { border-color: var(--color-border); color: var(--color-text); background: rgba(237,246,233,.05); }
.btn-secondary:hover { border-color: rgba(207,255,79,.46); color: var(--color-primary); }
.btn-small { min-height: 38px; padding: 9px 13px; font-size: .9rem; }

.eyebrow { color: var(--color-secondary); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 900; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.05; margin: 0; letter-spacing: -.025em; }
h1 { font-size: clamp(2.8rem, 7.5vw, 6.8rem); max-width: 990px; text-transform: uppercase; }
h2 { font-size: clamp(2rem, 4.4vw, 4.2rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
p { margin: 0; color: var(--color-muted); }
.lead { font-size: clamp(1.05rem, 2vw, 1.35rem); color: #c4d4ca; max-width: 780px; }
.section { padding: clamp(58px, 8vw, 104px) 0; }
.section-tight { padding: clamp(34px, 5vw, 64px) 0; }
.section-head { display: grid; grid-template-columns: minmax(0, .95fr) minmax(260px, .45fr); gap: 28px; align-items: end; margin-bottom: 30px; }
.section-head p { max-width: 540px; }

.hero { position: relative; padding: clamp(46px, 8vw, 92px) 0 clamp(60px, 9vw, 112px); overflow: hidden; }
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: clamp(28px, 5vw, 70px); align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--color-muted); font-size: .92rem; }
.hero-note::before { content: ""; width: 42px; height: 1px; background: var(--color-primary); }

/* Theme components */
.tactical-board {
  position: relative;
  min-height: 560px;
  border: 1px solid var(--color-border);
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 67px, rgba(237,246,233,.26) 68px 70px, transparent 71px),
    linear-gradient(90deg, transparent 49.7%, rgba(237,246,233,.24) 49.9% 50.1%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(237,246,233,.14) 49.9% 50.1%, transparent 50.3%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 58px, rgba(255,255,255,.045) 58px 116px),
    linear-gradient(155deg, #103625, #071611 70%);
  box-shadow: var(--shadow-soft);
}
.tactical-board::before,
.tactical-board::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  height: 110px;
  border: 2px solid rgba(237,246,233,.17);
  pointer-events: none;
}
.tactical-board::before { top: -2px; border-top: 0; }
.tactical-board::after { bottom: -2px; border-bottom: 0; }
.player-dot {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 7px rgba(207,255,79,.11), 0 0 24px rgba(207,255,79,.48);
}
.player-dot.alt { background: var(--color-secondary); box-shadow: 0 0 0 7px rgba(54,214,161,.12), 0 0 24px rgba(54,214,161,.42); }
.player-dot.risk { background: var(--color-accent); box-shadow: 0 0 0 7px rgba(255,159,67,.12), 0 0 24px rgba(255,159,67,.42); }
.pass-line {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(207,255,79,.1), var(--color-primary));
  opacity: .75;
}
.signal-panel {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(7, 17, 14, .84);
  border: 1px solid rgba(237,246,233,.13);
  backdrop-filter: blur(12px);
}
.signal-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; font-size: .86rem; color: var(--color-muted); }
.signal-row strong { color: var(--color-text); }
.signal-bar { height: 9px; border-radius: 999px; background: rgba(237,246,233,.08); overflow: hidden; }
.signal-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)); }
.score-chip {
  position: absolute; top: 22px; left: 22px;
  display: inline-flex; gap: 10px; align-items: center;
  padding: 10px 13px;
  border: 1px solid rgba(237,246,233,.15);
  border-radius: 999px;
  background: rgba(7,17,14,.7);
  color: #ddecda;
  font-weight: 800;
  backdrop-filter: blur(10px);
}
.score-chip span { color: var(--color-primary); }

.pitch-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-border);
}
.pitch-lane {
  position: relative;
  min-height: 235px;
  padding: 22px;
  background:
    linear-gradient(0deg, rgba(237,246,233,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,246,233,.04) 1px, transparent 1px),
    rgba(13, 29, 24, .92);
  background-size: 100% 46px, 46px 100%, auto;
}
.pitch-lane::before { content: attr(data-zone); color: rgba(237,246,233,.16); font-size: 4.8rem; line-height: .8; font-family: var(--font-heading); font-weight: 900; }
.pitch-lane h3 { margin: 18px 0 10px; }
.pitch-lane p { font-size: .98rem; }

.heatmap-card {
  position: relative;
  display: grid;
  gap: 16px;
  min-height: 260px;
  padding: 24px;
  border: 1px solid rgba(237,246,233,.12);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 24% 38%, rgba(255,159,67,.58), transparent 18%),
    radial-gradient(circle at 64% 52%, rgba(207,255,79,.42), transparent 23%),
    radial-gradient(circle at 78% 22%, rgba(54,214,161,.42), transparent 14%),
    linear-gradient(150deg, rgba(16,43,34,.94), rgba(7,17,14,.94));
  overflow: hidden;
}
.heatmap-card::after {
  content: "";
  position: absolute; inset: 16px;
  border: 1px solid rgba(237,246,233,.18);
  border-radius: 22px;
  pointer-events: none;
}
.heatmap-card h3, .heatmap-card p, .heatmap-card .metric-row { position: relative; z-index: 1; }
.metric-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.metric-chip { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: rgba(237,246,233,.1); color: #dcebd8; font-size: .78rem; font-weight: 800; }

.model-log {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(7,17,14,.62);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.log-row { display: grid; grid-template-columns: 112px 1fr auto; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); align-items: center; }
.log-row:last-child { border-bottom: 0; }
.log-time { color: var(--color-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.log-row strong { color: var(--color-text); }
.log-tag { justify-self: end; border: 1px solid rgba(207,255,79,.24); border-radius: 999px; padding: 5px 9px; color: var(--color-primary); font-size: .78rem; }

.scout-radar {
  border: 1px solid rgba(237,246,233,.12);
  border-radius: var(--radius-lg);
  padding: 22px;
  background: linear-gradient(160deg, rgba(16,43,34,.92), rgba(7,17,14,.88));
}
.radar-frame { position: relative; aspect-ratio: 1 / 1; border-radius: 50%; margin: 8px auto 20px; width: min(260px, 100%); border: 1px dashed rgba(237,246,233,.24); background: radial-gradient(circle, transparent 0 22%, rgba(237,246,233,.05) 23% 24%, transparent 25% 47%, rgba(237,246,233,.08) 48% 49%, transparent 50%); }
.radar-frame::before { content: ""; position: absolute; inset: 18%; clip-path: polygon(50% 0, 86% 30%, 78% 78%, 32% 88%, 12% 42%); background: rgba(207,255,79,.22); border: 2px solid rgba(207,255,79,.72); }
.radar-frame::after { content: "AI"; position: absolute; inset: 42% auto auto 42%; color: var(--color-primary); font-weight: 900; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card {
  border: 1px solid rgba(237,246,233,.12);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: rgba(13,29,24,.76);
}
.card.offset { transform: translateY(28px); }
.card h3 { margin-bottom: 12px; }
.card img { width: 58px; height: 58px; margin-bottom: 16px; }
.card-list { display: grid; gap: 10px; padding: 0; margin: 18px 0 0; list-style: none; color: var(--color-muted); }
.card-list li { position: relative; padding-left: 22px; }
.card-list li::before { content: "•"; position: absolute; left: 0; top: -1px; color: var(--color-primary); }

.split-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, .65fr); gap: 28px; align-items: stretch; }
.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 42px);
  background: linear-gradient(150deg, rgba(13,29,24,.88), rgba(7,17,14,.88));
}
.panel.lightline { background: linear-gradient(90deg, rgba(207,255,79,.08) 1px, transparent 1px), linear-gradient(0deg, rgba(207,255,79,.05) 1px, transparent 1px), rgba(13,29,24,.78); background-size: 34px 34px; }
.number-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: item; }
.number-list li { counter-increment: item; display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.number-list li::before { content: counter(item, decimal-leading-zero); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-border); color: var(--color-primary); font-weight: 900; background: rgba(207,255,79,.06); }
.number-list strong { display: block; color: var(--color-text); margin-bottom: 4px; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 34px; align-items: start; }
.article-body { display: grid; gap: 28px; }
.article-body article, .article-card { padding: clamp(22px, 4vw, 42px); border-radius: var(--radius-lg); border: 1px solid rgba(237,246,233,.12); background: rgba(13,29,24,.78); }
.article-body h2, .article-body h3 { margin-bottom: 14px; }
.article-body p + p { margin-top: 12px; }
.article-aside { position: sticky; top: 92px; display: grid; gap: 14px; }
.aside-box { padding: 18px; border-radius: 20px; border: 1px solid var(--color-border); background: rgba(7,17,14,.68); }
.aside-box a { display: block; margin-top: 8px; color: var(--color-muted); }
.aside-box a:hover { color: var(--color-primary); }

.comparison-table { overflow-x: auto; border: 1px solid rgba(237,246,233,.12); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--color-primary); background: rgba(207,255,79,.06); }
td { color: var(--color-muted); }
tr:last-child td { border-bottom: 0; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-field { display: grid; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
label { color: #dfead9; font-weight: 800; font-size: .92rem; }
input, textarea, select { width: 100%; border: 1px solid rgba(237,246,233,.16); border-radius: 16px; padding: 13px 14px; color: var(--color-text); background: rgba(7,17,14,.84); font: inherit; }
textarea { min-height: 128px; resize: vertical; }
.form-note { font-size: .88rem; color: var(--color-muted); }

.hero-compact { padding: clamp(42px, 7vw, 78px) 0 clamp(36px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.hero-compact .lead { margin-top: 20px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: var(--color-muted); font-size: .9rem; }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }

.matrix { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.matrix .card:nth-child(1) { grid-column: span 7; }
.matrix .card:nth-child(2) { grid-column: span 5; }
.matrix .card:nth-child(3) { grid-column: span 4; }
.matrix .card:nth-child(4) { grid-column: span 8; }
.matrix .card:nth-child(5) { grid-column: span 6; }
.matrix .card:nth-child(6) { grid-column: span 6; }

.cta-band { position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: 36px; padding: clamp(28px, 5vw, 54px); background: linear-gradient(135deg, rgba(207,255,79,.12), rgba(54,214,161,.08) 42%, rgba(7,17,14,.92)); }
.cta-band::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(237,246,233,.12); border-radius: 26px; pointer-events: none; }
.cta-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; }

.site-footer { border-top: 1px solid var(--line); padding: 40px 0; background: rgba(3, 8, 7, .42); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: start; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a { color: var(--color-muted); }
.footer-links a:hover { color: var(--color-primary); }
.micro { font-size: .86rem; color: var(--color-muted); }

@media (max-width: 980px) {
  .header-inner { align-items: flex-start; flex-direction: column; }
  .header-cta { display: none; }
  .hero-grid, .section-head, .split-panel, .article-layout, .cta-inner, .footer-grid { grid-template-columns: 1fr; }
  .tactical-board { min-height: 480px; }
  .pitch-strip { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-aside { position: static; }
}

@media (max-width: 720px) {
  body { background-size: auto, auto, 32px 32px, 32px 32px, auto; }
  .nav-list { gap: 2px; }
  .nav-link { padding: 7px 9px; font-size: .88rem; }
  .hero-grid, .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr; }
  .pitch-strip { grid-template-columns: 1fr; }
  .pitch-lane { min-height: 190px; }
  .log-row { grid-template-columns: 1fr; }
  .log-tag { justify-self: start; }
  .signal-row { grid-template-columns: 1fr; }
  .tactical-board { min-height: 430px; border-radius: 24px; }
  .score-chip { top: 14px; left: 14px; }
  .signal-panel { left: 14px; right: 14px; bottom: 14px; }
  .matrix { grid-template-columns: 1fr; }
  .matrix .card { grid-column: auto !important; }
  .card.offset { transform: none; }
  h1 { font-size: clamp(2.3rem, 14vw, 4.1rem); }
  .number-list li { grid-template-columns: 38px 1fr; }
  .number-list li::before { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: no-preference) {
  .player-dot { animation: pulse 3.2s ease-in-out infinite; }
  .player-dot:nth-of-type(2n) { animation-delay: .8s; }
  .pass-line { animation: scan 4s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
  @keyframes scan { 0%,100% { opacity: .38; } 50% { opacity: .95; } }
}

.dot-a { left: 18%; top: 22%; }
.dot-b { left: 36%; top: 36%; }
.dot-c { left: 54%; top: 28%; }
.dot-d { left: 72%; top: 50%; }
.dot-e { left: 42%; top: 67%; }
.dot-f { left: 22%; top: 74%; }
.pass-a { left: 19%; top: 24%; width: 145px; transform: rotate(28deg); }
.pass-b { left: 38%; top: 38%; width: 142px; transform: rotate(-18deg); }
.pass-c { left: 55%; top: 31%; width: 132px; transform: rotate(35deg); }
.w-76 { width: 76%; }
.w-63 { width: 63%; }
.w-84 { width: 84%; }
.mt-24 { margin-top: 24px; }
.brief-form { margin-top: 22px; }