/* ============================================================
   BRILLIANTICS — LANDING FX LAYER
   Symbols, motion and the three interactive demos.

   Loaded AFTER css/landing.css so it can extend the editorial system
   without editing it. Everything here degrades to a static, readable
   page: no rule hides content that JS is required to reveal, and the
   reduced-motion block at the end switches the whole layer off.
   ============================================================ */

/* ---- 0. LOCAL TOKENS ---- */
:root {
  --fx-ring: rgba(0, 74, 153, 0.14);
  --fx-ring-strong: rgba(0, 170, 176, 0.42);
  --fx-tilt: 7deg;
  --fx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   1. SYMBOLS
   Brand line-icons replacing the emoji set. `currentColor` means a
   symbol takes the colour of whatever it sits in, so one sprite
   serves the light cards, the dark section and the buttons alike.
   ============================================================ */
.sym {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  overflow: visible;
}
.sym-xs { font-size: 0.95rem; }
.sym-sm { font-size: 1.15rem; }
.sym-md { font-size: 1.6rem; }
.sym-lg { font-size: 2rem; }
.sym-xl { font-size: 2.6rem; }

/* Gradient-filled icon plate — the emoji replacement inside cards. */
.sym-plate {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, rgba(0, 74, 153, 0.10), rgba(0, 170, 176, 0.14));
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px rgba(0, 74, 153, 0.08);
  transition: transform 0.45s var(--fx-ease-spring), background 0.4s ease, color 0.4s ease;
}
.sym-plate .sym { stroke-width: 1.5; }

.missing-card:hover .sym-plate,
.vision-card:hover .sym-plate,
.stat-card:hover .sym-plate {
  transform: translateY(-3px) rotate(-3deg) scale(1.03);
  background: var(--gradient-brand);
  color: #fff;
}

/* Stroke draw-in. The dash values are set from JS per path length so a
   long path and a short one finish together instead of racing. */
.sym-draw path,
.sym-draw circle,
.sym-draw rect {
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
}
[data-animate].in-view .sym-draw path,
[data-animate].in-view .sym-draw circle,
[data-animate].in-view .sym-draw rect,
.in-view .sym-draw path,
.in-view .sym-draw circle,
.in-view .sym-draw rect {
  animation: sym-draw 1.05s var(--fx-ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes sym-draw {
  to { stroke-dashoffset: 0; }
}

/* ============================================================
   2. SCROLL PROGRESS
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 120;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent) 55%, var(--color-blue-bright));
  box-shadow: 0 0 12px rgba(0, 170, 176, 0.5);
}

/* ============================================================
   3. BUTTONS — press feedback
   landing.css gives .btn a 300ms transform transition, which is right
   for a hover lift and much too slow for a press: the button took a
   third of a second to sink and another third to come back, so it read
   as the button inflating on its own after your finger had already
   left it. A press should be almost instantaneous going down and
   settle on the way back — and it should only ever sink. Nothing here
   scales, because a button that changes size under the cursor always
   looks like a glitch rather than a response.
   ============================================================ */
.btn,
.tour-btn,
.quiz-next, .quiz-restart, .quiz-option,
.sim-start, .sim-replay, .sim-option,
.radar-chip, .tour-nav, .tour-skip, .to-top, .lang-toggle {
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn, .tour-btn, .quiz-next, .quiz-restart,
.sim-start, .sim-replay, .radar-chip, .tour-nav, .to-top, .lang-toggle {
  overflow: hidden;
  transition: transform 220ms var(--fx-ease-out),
              box-shadow 240ms ease,
              background 240ms ease,
              color 240ms ease,
              border-color 240ms ease;
}

/* Down fast, up gently. `translateY` only — never scale. */
.btn:active,
.tour-btn:active,
.quiz-next:active, .quiz-restart:active, .quiz-option:active,
.sim-start:active, .sim-replay:active, .sim-option:active,
.radar-chip:active, .tour-nav:active, .to-top:active, .lang-toggle:active {
  transform: translateY(1px);
  transition-duration: 90ms;
}

/* On a touch screen :hover latches after the tap, so the lift never
   comes back down and the button sits permanently raised. Hover
   movement belongs to real pointers only. */
@media (hover: none) {
  .btn-primary:hover, .btn-ghost:hover, .tour-btn:hover,
  .quiz-next:hover, .quiz-restart:hover, .quiz-option:hover,
  .sim-start:hover, .sim-replay:hover, .sim-option:hover,
  .radar-chip:hover, .tour-nav:hover, .to-top:hover,
  .stat-card:hover, .vision-card:hover, .missing-card:hover,
  .team-card:hover, .evolution-card:hover, .media-plate:hover {
    transform: none;
  }
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.42) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--fx-ease-out);
}
.btn-primary:hover::before { transform: translateX(120%); }

/* A soft radial bloom rather than a hard white disc — the disc edge is
   what made the old press look like something inflating. */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 68%);
  transform: scale(0);
  animation: ripple 0.55s var(--fx-ease-out) forwards;
  pointer-events: none;
  z-index: -1;
}
.btn-ghost .ripple, .quiz-restart .ripple, .radar-chip .ripple,
.to-top .ripple, .lang-toggle .ripple, .tour-btn .ripple {
  background: radial-gradient(circle, rgba(0, 74, 153, 0.22), rgba(0, 74, 153, 0) 68%);
}
@keyframes ripple {
  to { transform: scale(2.2); opacity: 0; }
}

/* Arrow nudge on any button carrying a trailing symbol. */
.btn .sym, .quiz-next .sym, .tour-nav .sym { transition: transform 0.35s var(--fx-ease-spring); }
.btn:hover .sym-nudge, .quiz-next:hover .sym-nudge, .tour-nav:hover .sym-nudge {
  transform: translateX(4px);
}

/* ============================================================
   4. CARD TILT + CURSOR SPOTLIGHT
   JS writes --mx/--my (0–100%) on pointer move; the glow is a radial
   gradient painted on a pseudo-element so it never touches text.
   ============================================================ */
.tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s var(--fx-ease-out), box-shadow 0.5s var(--fx-ease-out);
}
.tilt.is-tilting { transition: box-shadow 0.3s ease; }

.spot { position: relative; overflow: hidden; }
.spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0, 170, 176, 0.16), transparent 62%);
}
.spot:hover::after { opacity: 1; }

/* ============================================================
   5. HERO — word-by-word reveal + parallax
   ============================================================ */
/* `.hero-title span { display: block }` in landing.css is a descendant
   selector, so it would flatten every split word onto its own line —
   hence the more specific rule here. */
.hero-title .word,
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotateX(-55deg);
  filter: blur(6px);
  transform-origin: 50% 100%;
  animation: word-in 0.85s var(--fx-ease-out) forwards;
  animation-delay: calc(var(--w, 0) * 62ms + 180ms);
}
@keyframes word-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* The gradient line animates whole, never word-by-word. `filter` on a
   descendant promotes it to its own layer, and the parent's
   background-clip:text no longer paints through it — the line would
   simply vanish. Animating the clipping element itself keeps the
   gradient intact. */
.hero-title .word-line {
  opacity: 0;
  transform: translateY(0.35em);
  animation: line-in 0.9s var(--fx-ease-out) forwards;
  animation-delay: calc(var(--w, 0) * 62ms + 180ms);
}
@keyframes line-in {
  to { opacity: 1; transform: none; }
}

.hero-orb { will-change: transform; }

/* Live diagnostic card gets a soft breathing glow. */
.diag-card { position: relative; }
.diag-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(0, 74, 153, 0.35), rgba(0, 170, 176, 0.35));
  filter: blur(18px);
  opacity: 0.35;
  z-index: -1;
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.22; transform: scale(0.98); }
  50%      { opacity: 0.46; transform: scale(1.02); }
}

/* The sparkline draws itself once the hero settles. */
.diag-spark path {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: sym-draw 2.2s var(--fx-ease-out) 0.6s forwards;
}

/* ============================================================
   6. GRADIENT TEXT — slow drift
   ============================================================ */
.grad-text, .grad-italic {
  background-size: 220% 100%;
  animation: grad-drift 9s ease-in-out infinite alternate;
}
@keyframes grad-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ============================================================
   7. NAV — active section + tour launcher
   ============================================================ */
.nav-link.is-active { color: var(--color-primary); font-weight: 600; }
.nav-link.is-active::after { width: 100%; }

.tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 170, 176, 0.35);
  background: rgba(0, 170, 176, 0.08);
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.tour-btn:hover {
  background: rgba(0, 170, 176, 0.16);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.tour-btn .sym { animation: tour-pip 2.6s ease-in-out infinite; }
@keyframes tour-pip {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1; }
}

/* ============================================================
   8. BACK TO TOP
   ============================================================ */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 108px;
  z-index: 95;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(0, 74, 153, 0.12);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.85);
  transition: opacity 0.4s ease, transform 0.4s var(--fx-ease-spring), visibility 0.4s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--color-accent-text); transform: translateY(-3px); }

/* ============================================================
   9. MARQUEE — edge fade
   ============================================================ */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ============================================================
   10. FAQ — animated accordion
   `details` normally snaps open. JS sets --h to the panel height and
   toggles .faq-open so the body can slide instead.
   ============================================================ */
.faq-item summary { transition: color var(--transition); }
.faq-item summary:hover { color: var(--color-primary); }
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--fx-ease-out), opacity 0.32s ease;
  opacity: 0;
}
.faq-item[open] .faq-body { grid-template-rows: 1fr; opacity: 1; }
.faq-body > div { overflow: hidden; min-height: 0; }

/* ============================================================
   11. WORKFLOW — scroll-drawn connector
   ============================================================ */
.workflow { position: relative; }
.workflow::before {
  content: '';
  position: absolute;
  left: 43px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
  transform: scaleY(var(--wf, 0));
  transform-origin: 50% 0;
  transition: transform 0.15s linear;
  opacity: 0.5;
}
.workflow-step { position: relative; z-index: 1; }
.workflow-num { position: relative; overflow: hidden; }
.workflow-step.is-live .workflow-num {
  box-shadow: 0 0 0 6px rgba(0, 170, 176, 0.16);
}

/* ============================================================
   12. SECTION HEAD — eyebrow shimmer
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow .sym { opacity: 0.75; }

/* ============================================================
   13. INTERACTIVE DEMO SHELL (shared by the three games)
   ============================================================ */
.demo {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.demo-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 14px;
}
.demo-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-green);
  animation: pulse-ring 2s ease-out infinite;
}

/* ============================================================
   14. MINI-ASSESSMENT
   ============================================================ */
.quiz-grid { display: grid; gap: 24px; align-items: start; }

.quiz-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.quiz-pip {
  height: 5px;
  flex: 1;
  border-radius: 3px;
  background: rgba(0, 74, 153, 0.10);
  overflow: hidden;
}
.quiz-pip span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--gradient-brand);
  transition: width 0.55s var(--fx-ease-out);
}
.quiz-pip.done span, .quiz-pip.current span { width: 100%; }
.quiz-pip.current span { background: linear-gradient(90deg, var(--color-accent), var(--color-blue-bright)); }
.quiz-count { font-size: 0.74rem; font-weight: 700; color: var(--color-text-dim); letter-spacing: 0.06em; }

.quiz-stage { position: relative; min-height: 300px; }
.quiz-card { transition: opacity 0.32s ease, transform 0.42s var(--fx-ease-out); }
.quiz-card.out { opacity: 0; transform: translateX(-26px); pointer-events: none; }
.quiz-card.in  { opacity: 0; transform: translateX(26px); }

.quiz-context {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(0, 74, 153, 0.07);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  margin-bottom: 12px;
}
.quiz-question {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.45;
  font-weight: 600;
  margin-bottom: 18px;
}

.quiz-options { display: grid; gap: 10px; }
.quiz-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  text-align: left;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 74, 153, 0.09);
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--color-text);
  transition: transform 0.3s var(--fx-ease-out), border-color var(--transition),
              background var(--transition), box-shadow var(--transition);
}
.quiz-option:hover:not(:disabled) {
  transform: translateX(5px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.quiz-key {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 8px;
  background: rgba(0, 74, 153, 0.08);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-primary);
  transition: background var(--transition), color var(--transition);
}
.quiz-option.picked {
  border-color: var(--color-accent);
  background: rgba(0, 170, 176, 0.09);
  box-shadow: 0 0 0 3px rgba(0, 170, 176, 0.13);
}
.quiz-option.picked .quiz-key { background: var(--gradient-brand); color: #fff; }
.quiz-option:disabled { cursor: default; opacity: 0.55; }
.quiz-option.picked:disabled { opacity: 1; }

.quiz-consequence {
  margin-top: 16px;
  padding: 15px 17px;
  border-radius: var(--radius-sm);
  background: rgba(0, 74, 153, 0.05);
  border-left: 3px solid var(--color-accent);
  animation: slide-up 0.45s var(--fx-ease-out) both;
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.quiz-consequence-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-accent-text); margin-bottom: 6px;
}
.quiz-consequence p { font-size: 0.9rem; color: var(--color-text-muted); font-weight: 300; }

.quiz-next {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 15px; padding: 11px 22px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: #fff; font-weight: 600; font-size: 0.9rem;
  box-shadow: var(--shadow-glow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.quiz-next:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-lg); }

/* Live readout panel */
.quiz-live { padding: 26px 24px; }
.quiz-live-title { font-size: 1.05rem; margin-bottom: 4px; }
.quiz-live-note { font-size: 0.82rem; color: var(--color-text-dim); font-weight: 300; margin-bottom: 20px; }

.live-row { margin-bottom: 15px; }
.live-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.84rem; margin-bottom: 6px;
}
.live-head span { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-muted); }
.live-val { font-family: var(--font-display); font-weight: 700; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.live-track { height: 7px; border-radius: 4px; background: rgba(0, 74, 153, 0.08); overflow: hidden; }
.live-fill {
  display: block; height: 100%; width: 0;
  border-radius: 4px;
  background: var(--gradient-brand);
  transition: width 0.8s var(--fx-ease-out), background 0.4s ease;
}
.live-fill.weak { background: linear-gradient(135deg, #fb2c36, #ff7a5c); }
.live-fill.strong { background: linear-gradient(135deg, #00aab0, #79c000); }
.live-row.bump .live-val { animation: bump 0.5s var(--fx-ease-spring); }
@keyframes bump {
  0% { transform: scale(1); }
  45% { transform: scale(1.32); color: var(--color-accent-text); }
  100% { transform: scale(1); }
}

.quiz-result { animation: slide-up 0.5s var(--fx-ease-out) both; }
.quiz-result-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--radius-full);
  background: rgba(121, 192, 0, 0.12); color: #4b7a00;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 12px;
}
.quiz-result h4 { font-size: 1.24rem; margin-bottom: 8px; }
.quiz-result p { font-size: 0.93rem; color: var(--color-text-muted); font-weight: 300; margin-bottom: 8px; }
.quiz-result-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.quiz-restart {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 22px; border-radius: var(--radius-full);
  border: 1px solid rgba(0, 74, 153, 0.16);
  font-size: 0.9rem; font-weight: 600; color: var(--color-primary);
  transition: background var(--transition), transform var(--transition);
}
.quiz-restart:hover { background: rgba(0, 74, 153, 0.06); transform: translateY(-2px); }
.quiz-restart:hover .sym { transform: rotate(-90deg); }
.quiz-restart .sym { transition: transform 0.5s var(--fx-ease-out); }

/* Confetti burst on completion */
.confetti-piece {
  position: fixed;
  width: 9px; height: 14px;
  z-index: 9998;
  pointer-events: none;
  border-radius: 2px;
  animation: confetti-fall var(--dur, 2.4s) linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate3d(0,0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--dx, 0px), var(--dy, 460px), 0) rotate(var(--rot, 620deg)); opacity: 0; }
}

/* ============================================================
   15. SKILL RADAR
   ============================================================ */
.radar-grid { display: grid; gap: 26px; align-items: center; }

.radar-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: 8px;
}
.radar-svg { width: 100%; max-width: 420px; height: auto; overflow: visible; }
.radar-web { fill: none; stroke: rgba(0, 74, 153, 0.13); stroke-width: 1; }
.radar-axis { stroke: rgba(0, 74, 153, 0.10); stroke-width: 1; }
.radar-shape {
  fill: url(#radarFill);
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: d 0.7s var(--fx-ease-out);
  transform-origin: 50% 50%;
  animation: radar-in 1s var(--fx-ease-out) both;
}
@keyframes radar-in {
  from { opacity: 0; transform: scale(0.5) rotate(-25deg); }
  to   { opacity: 1; transform: none; }
}
.radar-vertex {
  fill: #fff;
  stroke: var(--color-accent);
  stroke-width: 2.4;
  cursor: pointer;
  transition: r 0.3s var(--fx-ease-spring), fill 0.3s ease;
}
.radar-vertex:hover, .radar-vertex.active { fill: var(--color-accent); }
.radar-hit { fill: transparent; cursor: pointer; }
.radar-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  fill: var(--color-text-muted);
  cursor: pointer;
  transition: fill 0.3s ease;
  user-select: none;
}
.radar-label.active, .radar-label:hover { fill: var(--color-primary); }
.radar-pulse {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  opacity: 0;
}
.radar-pulse.go { animation: radar-ping 0.85s ease-out; }
@keyframes radar-ping {
  0%   { r: 5; opacity: 0.7; }
  100% { r: 26; opacity: 0; }
}

.radar-panel {
  position: relative;
  min-height: 250px;
  padding: 26px 24px;
}
.radar-panel-inner { animation: slide-up 0.4s var(--fx-ease-out) both; }
.radar-panel-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.radar-panel-icon {
  display: grid; place-items: center;
  width: 50px; height: 50px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--gradient-brand);
  color: #fff;
}
.radar-panel h3 { font-size: 1.16rem; margin-bottom: 2px; }
.radar-panel-score {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  color: var(--color-accent-text); letter-spacing: 0.04em;
}
.radar-panel-body { font-size: 0.94rem; color: var(--color-text-muted); font-weight: 300; margin-bottom: 16px; }
.radar-example {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(0, 170, 176, 0.07);
  border-left: 3px solid var(--color-accent);
}
.radar-example-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-text); margin-bottom: 5px;
}
.radar-example p { font-size: 0.88rem; color: var(--color-text-muted); font-weight: 300; font-style: italic; }

.radar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; justify-content: center; }
.radar-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--radius-full);
  border: 1px solid rgba(0, 74, 153, 0.12);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);
  transition: all var(--transition);
}
.radar-chip:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.radar-chip.active {
  background: var(--gradient-brand); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-glow);
}

/* ============================================================
   16. CONSEQUENCE SIMULATOR
   ============================================================ */
.sim {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  overflow: hidden;
  background: linear-gradient(150deg, #0b1020 0%, #0d2138 55%, #0b1020 100%);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-glow-lg);
}
.sim::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 22% 18%, rgba(0, 170, 176, 0.22), transparent 46%),
              radial-gradient(circle at 82% 78%, rgba(37, 99, 255, 0.18), transparent 48%);
  animation: spin 42s linear infinite;
  pointer-events: none;
}
.sim > * { position: relative; z-index: 1; }

.sim-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sim-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #5ad6da;
}

/* Countdown ring */
.sim-timer { position: relative; width: 62px; height: 62px; flex: none; }
.sim-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sim-timer-bg { fill: none; stroke: rgba(248, 250, 252, 0.14); stroke-width: 5; }
.sim-timer-fg {
  fill: none; stroke: #5ad6da; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 163.4;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.25s linear, stroke 0.4s ease;
}
.sim-timer.warn .sim-timer-fg { stroke: #ffb020; }
.sim-timer.danger .sim-timer-fg { stroke: #fb2c36; }
.sim-timer.danger { animation: shake 0.5s ease-in-out infinite; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.sim-timer-num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sim-scene {
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 2.6vw, 1.32rem);
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 8px;
}
.sim-scene em { color: #5ad6da; font-style: normal; font-weight: 700; }
.sim-sub { font-size: 0.9rem; color: rgba(248, 250, 252, 0.6); font-weight: 300; margin-bottom: 22px; }

.sim-options { display: grid; gap: 11px; }
.sim-option {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 15px 17px;
  border-radius: var(--radius-sm);
  background: rgba(248, 250, 252, 0.06);
  border: 1px solid rgba(248, 250, 252, 0.12);
  color: var(--color-text-invert);
  font-size: 0.93rem; line-height: 1.45;
  transition: transform 0.3s var(--fx-ease-out), background var(--transition), border-color var(--transition);
}
.sim-option:hover:not(:disabled) {
  transform: translateY(-2px);
  background: rgba(90, 214, 218, 0.13);
  border-color: rgba(90, 214, 218, 0.5);
}
.sim-option:disabled { opacity: 0.35; cursor: default; }
.sim-option.chosen { opacity: 1; background: rgba(90, 214, 218, 0.18); border-color: #5ad6da; }
.sim-opt-key {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(248, 250, 252, 0.1);
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
}
.sim-option.chosen .sim-opt-key { background: #5ad6da; color: #0b1020; }

.sim-outcome { margin-top: 22px; animation: slide-up 0.5s var(--fx-ease-out) both; }
.sim-outcome-title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 700;
  margin-bottom: 8px;
}
.sim-outcome-title.good { color: #8fd94b; }
.sim-outcome-title.mixed { color: #ffb020; }
.sim-outcome-title.bad { color: #ff6b73; }
.sim-outcome p { font-size: 0.93rem; color: rgba(248, 250, 252, 0.75); font-weight: 300; margin-bottom: 16px; }

.sim-meters { display: grid; gap: 11px; margin-bottom: 18px; }
.sim-meter-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: rgba(248, 250, 252, 0.66); margin-bottom: 5px;
}
.sim-delta { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.sim-delta.up { color: #8fd94b; }
.sim-delta.down { color: #ff6b73; }
.sim-meter-track {
  position: relative; height: 6px; border-radius: 4px;
  background: rgba(248, 250, 252, 0.12); overflow: hidden;
}
.sim-meter-track::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(248, 250, 252, 0.28);
}
.sim-meter-fill {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
  border-radius: 4px;
  background: #8fd94b;
  transition: width 0.85s var(--fx-ease-out), left 0.85s var(--fx-ease-out);
}
.sim-meter-fill.neg { background: #ff6b73; }

.sim-replay {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-full);
  border: 1px solid rgba(90, 214, 218, 0.45);
  color: #5ad6da; font-size: 0.9rem; font-weight: 600;
  transition: background var(--transition), transform var(--transition);
}
.sim-replay:hover { background: rgba(90, 214, 218, 0.12); transform: translateY(-2px); }
.sim-replay .sym { transition: transform 0.55s var(--fx-ease-out); }
.sim-replay:hover .sym { transform: rotate(-180deg); }

.sim-start {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 28px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, #00aab0, #2563ff);
  color: #fff; font-weight: 600; font-size: 0.96rem;
  box-shadow: 0 18px 40px -18px rgba(0, 170, 176, 0.9);
  transition: transform var(--transition), box-shadow var(--transition);
}
.sim-start:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -18px rgba(0, 170, 176, 0.95); }

.sim-hint { font-size: 0.82rem; color: rgba(248, 250, 252, 0.45); margin-top: 14px; }

/* ============================================================
   17. SPARK GUIDED TOUR
   ============================================================ */
.tour-veil {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: rgba(11, 16, 32, 0.55);
  -webkit-mask-image: radial-gradient(circle var(--r, 0px) at var(--tx, 50%) var(--ty, 50%), transparent 60%, #000 100%);
  mask-image: radial-gradient(circle var(--r, 0px) at var(--tx, 50%) var(--ty, 50%), transparent 60%, #000 100%);
}
.tour-veil.on { opacity: 1; }

.tour-ring {
  position: fixed;
  z-index: 9991;
  pointer-events: none;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 0 4px rgba(0, 170, 176, 0.2), 0 0 40px rgba(0, 170, 176, 0.45);
  opacity: 0;
  transition: opacity 0.4s ease, top 0.6s var(--fx-ease-out), left 0.6s var(--fx-ease-out),
              width 0.6s var(--fx-ease-out), height 0.6s var(--fx-ease-out);
}
.tour-ring.on { opacity: 1; }

.tour-bar {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 24px);
  z-index: 9993;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 18px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(0, 74, 153, 0.12);
  box-shadow: var(--shadow-glow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, transform 0.5s var(--fx-ease-spring), visibility 0.4s;
  max-width: calc(100vw - 32px);
}
.tour-bar.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tour-step-count {
  font-size: 0.74rem; font-weight: 700; color: var(--color-text-dim);
  letter-spacing: 0.08em; white-space: nowrap;
}
.tour-dots { display: flex; gap: 5px; }
.tour-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(0, 74, 153, 0.18);
  transition: background 0.3s ease, transform 0.3s var(--fx-ease-spring);
}
.tour-dot.on { background: var(--color-accent); transform: scale(1.5); }
.tour-nav {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 17px; border-radius: var(--radius-full);
  background: var(--gradient-brand); color: #fff;
  font-size: 0.84rem; font-weight: 600;
  transition: transform var(--transition);
}
.tour-nav:hover { transform: translateY(-2px); }
.tour-skip {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--color-text-dim);
  transition: background var(--transition), color var(--transition);
}
.tour-skip:hover { background: rgba(0, 74, 153, 0.07); color: var(--color-text); }

/* ============================================================
   18. MISC POLISH
   ============================================================ */
.stat-card, .vision-card, .missing-card, .team-card, .evolution-card { will-change: transform; }

.team-initials { position: relative; overflow: hidden; }
.team-initials::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-140%);
  transition: transform 0.85s var(--fx-ease-out);
}
.team-card:hover .team-initials::after { transform: translateX(140%); }

.evolution-card { transition: transform 0.45s var(--fx-ease-out), background var(--transition), box-shadow var(--transition); }
.evolution-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: rgba(90, 214, 218, 0.12);
  color: #5ad6da;
}

.quote-block { position: relative; }
.quote-mark {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.fills-gap { transition: transform 0.4s var(--fx-ease-out), box-shadow 0.4s ease; }
.fills-gap:hover { transform: scale(1.015); box-shadow: var(--shadow-glow); }

.science-list li { transition: transform 0.35s var(--fx-ease-out), background var(--transition); }
.science-list li:hover { transform: translateX(6px); }

/* Section separators that draw as they enter view */
.sep {
  height: 1px;
  border: 0;
  margin: 0 auto;
  max-width: var(--container-max);
  background: linear-gradient(90deg, transparent, rgba(0, 74, 153, 0.16), transparent);
  transform: scaleX(0);
  transition: transform 1s var(--fx-ease-out);
}
.sep.in-view { transform: scaleX(1); }

/* ============================================================
   19. RESPONSIVE
   ============================================================ */
@media (min-width: 768px) {
  .demo { padding: 34px 32px; }
  .sim { padding: 40px 36px; }
  .quiz-live { padding: 32px 28px; }
  .radar-panel { padding: 32px 28px; }
}

@media (min-width: 900px) {
  .quiz-grid { grid-template-columns: 1.15fr 0.85fr; gap: 28px; }
  .radar-grid { grid-template-columns: 0.95fr 1.05fr; gap: 40px; }
}

@media (max-width: 899px) {
  .tour-btn { width: fit-content; }
  .to-top { right: 16px; bottom: 96px; width: 42px; height: 42px; }
}

@media (max-width: 560px) {
  /* The radar's axis labels live OUTSIDE the 300-unit viewBox, so the
     chart has to stop short of the container or the outermost label
     runs off the screen edge. */
  .radar-svg { max-width: 286px; }
  .radar-label { font-size: 10.5px; }
}

@media (max-width: 520px) {
  .tour-bar { gap: 7px; padding: 8px 8px 8px 13px; }
  .tour-step-count { display: none; }
  .sim-top { gap: 10px; }
  .sym-plate { width: 50px; height: 50px; }
}

/* ============================================================
   20. REDUCED MOTION
   Every decorative motion in this layer is opt-out. Content that JS
   animates in still ends up visible — nothing is left at opacity 0.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .word, .hero-title .word-line { opacity: 1; transform: none; filter: none; animation: none; }
  .sym-draw path, .sym-draw circle, .sym-draw rect { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .diag-spark path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .diag-card::before, .sim::before, .grad-text, .grad-italic,
  .tour-btn .sym, .demo-live-dot { animation: none !important; }
  .tilt { transform: none !important; }
  .spot::after { display: none; }
  .sim-timer.danger { animation: none; }
  .confetti-piece { display: none; }
  .radar-shape { animation: none; }
  .sep { transform: scaleX(1); }
  .btn-primary::before, .ripple { display: none; }
}

/* ------------------------------------------------------------
   The science orbital's rings are square boxes spinning behind a
   circular mask, so their axis-aligned bounding box grows by up to
   √2 mid-rotation. At 84vw that briefly pushed a couple of pixels
   past the viewport on a narrow phone. Shrinking the orbital on
   small screens keeps the spun bbox inside the fold.
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .brain-orbital { width: min(300px, 68vw); }
}

/* ============================================================
   21. THE JOURNEY RAIL  (replaces the flat .workflow list)
   Five bullet points in a row explain nothing about a journey. A rail
   does: the spine fills as you scroll, a dot travels down it, and each
   node closes behind you. The page performs the progression it is
   describing.
   ============================================================ */
.rail {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

/* Track + fill live on the rail itself so they can span the gaps. */
/* The spine runs from the FIRST node's centre to the LAST node's
   centre — 24px down (half a 48px node) and `--rail-h` tall, measured
   in JS. Spanning the whole list instead would leave a filled tail
   hanging below a step that has not been reached yet. */
.rail::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 24px;
  height: var(--rail-h, calc(100% - 48px));
  width: 3px;
  border-radius: 3px;
  background: rgba(0, 74, 153, 0.10);
}
.rail-fill {
  position: absolute;
  left: 23px;
  top: 24px;
  height: var(--rail-h, calc(100% - 48px));
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
  transform: scaleY(var(--wf, 0));
  transform-origin: 50% 0;
  transition: transform 0.12s linear;
}
.rail-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}

.rail-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-light-base);
  box-shadow: inset 0 0 0 2px rgba(0, 74, 153, 0.14);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-dim);
  transition: background 0.45s var(--fx-ease-out), color 0.45s ease,
              box-shadow 0.45s ease, transform 0.45s var(--fx-ease-spring);
}
.rail-num, .rail-check {
  grid-area: 1 / 1;
  transition: opacity 0.35s ease, transform 0.35s var(--fx-ease-spring);
}
.rail-check { opacity: 0; transform: scale(0.4); }

.rail-step.is-live .rail-node {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(0, 170, 176, 0.14), var(--shadow-glow);
  transform: scale(1.06);
}
.rail-step.is-done .rail-node {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.rail-step.is-done .rail-num { opacity: 0; transform: scale(0.4); }
.rail-step.is-done .rail-check { opacity: 1; transform: none; }

.rail-card {
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: var(--color-light-surface);
  border: var(--glass-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--fx-ease-out), box-shadow 0.4s ease, border-color 0.4s ease;
}
.rail-step.is-live .rail-card {
  transform: translateX(6px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(0, 170, 176, 0.25);
}

.rail-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 9px; }
.rail-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, rgba(0, 74, 153, 0.09), rgba(0, 170, 176, 0.13));
  color: var(--color-primary);
  transition: background 0.4s ease, color 0.4s ease;
}
.rail-step.is-live .rail-icon { background: var(--gradient-brand); color: #fff; }

.rail-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 2px;
}
.rail-card h3 { font-size: 1.06rem; }
.rail-card > p { font-size: 0.93rem; color: var(--color-text-muted); font-weight: 300; margin-bottom: 12px; }

.rail-out {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--radius-full);
  background: rgba(121, 192, 0, 0.10);
  color: #4b7a00;
  font-size: 0.78rem;
  font-weight: 600;
}
.rail-out .sym { stroke-width: 2.4; }

/* ============================================================
   22. MEDIA PRESENCE
   ============================================================ */
.media-head {
  display: grid;
  gap: 22px;
  align-items: center;
  max-width: 900px;
  margin: 0 auto 42px;
  text-align: center;
}
.media-count {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
}
.media-count-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: 10px;
}
.media-kinds { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.media-kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 74, 153, 0.10);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.media-kind .sym { color: var(--color-accent); }

/* Two rows travelling in opposite directions: one moving band reads as
   a widget, two counter-moving bands read as a stream of coverage. */
.marquee + .marquee { margin-top: 4px; }
.marquee-track.reverse { animation-direction: reverse; animation-duration: 42s; }

.media-plate {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 74, 153, 0.08);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition: transform 0.4s var(--fx-ease-out), box-shadow 0.4s ease,
              border-color 0.4s ease, background 0.4s ease;
}
.media-plate:hover,
.media-plate:focus-visible {
  transform: translateY(-4px);
  background: #fff;
  border-color: rgba(0, 170, 176, 0.35);
  box-shadow: var(--shadow-glow);
}
/* The plates are anchors to the article each outlet published — the lift on
   hover existed before they were clickable, so it finally means something.
   `color: inherit` keeps the inner .media-title and .media-kindline on their
   own colours instead of the browser's link blue, and the underline goes
   because the plate itself is the affordance. */
a.media-plate { text-decoration: none; color: inherit; }
a.media-plate:focus-visible {
  outline: 3px solid var(--color-accent, #00aab0);
  outline-offset: 3px;
}
.media-mono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, rgba(0, 74, 153, 0.10), rgba(0, 170, 176, 0.14));
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  transition: background 0.4s ease, color 0.4s ease;
}
.media-plate:hover .media-mono { background: var(--gradient-brand); color: #fff; }
.media-body { display: flex; flex-direction: column; line-height: 1.25; }
.media-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-text);
}
.media-kindline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: 3px;
}
.media-kindline .sym { color: var(--color-accent); opacity: 0.9; }

.media-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(0, 74, 153, 0.08);
}
.media-note-wrap { text-align: center; margin-top: 30px; }

/* ============================================================
   23. STAT RINGS
   A percentage told as a number is a claim; the same percentage drawn
   as an arc is a quantity you can see.
   ============================================================ */
.stat-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  margin: 0 auto 16px;
}
.stat-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.stat-ring-bg { fill: none; stroke: rgba(0, 74, 153, 0.09); stroke-width: 8; }
.stat-ring-fg {
  fill: none;
  stroke: url(#statGrad);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;           /* 2πr, r = 52 */
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 1.6s var(--fx-ease-out);
}
.stat-ring .stat-num {
  position: relative;
  font-size: clamp(1.9rem, 4.6vw, 2.5rem);
  margin-bottom: 0;
}
.stat-sym {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  border-radius: var(--radius-sm);
  background: rgba(0, 170, 176, 0.10);
  color: var(--color-primary);
}

/* ============================================================
   24. SCIENCE — labelled nodes + list symbols
   ============================================================ */
.science-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}
.science-sym {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, rgba(0, 74, 153, 0.09), rgba(0, 170, 176, 0.13));
  color: var(--color-primary);
  transition: background 0.4s ease, color 0.4s ease;
}
.science-list li:hover .science-sym { background: var(--gradient-brand); color: #fff; }

.brain-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(0, 74, 153, 0.10);
  box-shadow: var(--shadow-sm);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  white-space: nowrap;
  animation: float 7s ease-in-out infinite;
}
.brain-tag .sym { color: var(--color-accent); }
.tag-1 { top: 4%;  left: 50%; transform: translateX(-50%); }
.tag-2 { top: 46%; left: -6%;  animation-delay: -2.4s; }
.tag-3 { bottom: 6%; right: -4%; animation-delay: -4.8s; }

/* ============================================================
   25. TEAM — role symbol on the avatar
   ============================================================ */
/* A <span> is inline: without display:inline-block the width and the
   auto margins do nothing, the avatar hugs the left edge and the badge
   anchors to a zero-width box. The card centres text, so inline-block
   is all the centring this needs. */
.team-avatar {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  margin: 0 0 16px;
}
.team-avatar .team-initials { margin: 0; }
.team-badge {
  position: absolute;
  right: -6px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(0, 74, 153, 0.08);
  transition: transform 0.45s var(--fx-ease-spring), background 0.4s ease, color 0.4s ease;
}
.team-card:hover .team-badge {
  transform: scale(1.12) rotate(-8deg);
  background: var(--gradient-brand);
  color: #fff;
}

/* ============================================================
   26. FAQ — symbol in the summary
   ============================================================ */
/* `summary` is a space-between flex row. With only a label and the +/-
   icon that centred the label nicely; once a symbol joined on the left
   the label got pushed into the middle of the row, floating between two
   icons. Letting it take the free space puts it back beside its symbol. */
.faq-item summary { gap: 12px; }
.faq-item summary > span:not(.faq-sym):not(.faq-icon) {
  flex: 1;
  text-align: left;
}
.faq-sym {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: rgba(0, 74, 153, 0.07);
  color: var(--color-primary);
  transition: background 0.35s ease, color 0.35s ease;
}
.faq-item[open] .faq-sym { background: var(--gradient-brand); color: #fff; }
.faq-more { text-align: center; margin-top: 26px; }
.faq-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(0, 74, 153, 0.25);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.faq-more a:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ============================================================
   27. CLOSING CTA
   The page used to end on an FAQ answer and fall straight into the
   footer — the one place a reader who has gone the whole way is most
   ready to act, and there was nothing to act on.
   ============================================================ */
.closer {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 58px 28px;
  text-align: center;
  background: linear-gradient(150deg, #003a78 0%, #004a99 45%, #00787e 100%);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-glow-lg);
}
.closer::before {
  content: '';
  position: absolute;
  inset: -45%;
  pointer-events: none;
  background: radial-gradient(circle at 26% 22%, rgba(90, 214, 218, 0.30), transparent 44%),
              radial-gradient(circle at 78% 76%, rgba(37, 99, 255, 0.28), transparent 46%);
  animation: spin 50s linear infinite;
}
.closer > * { position: relative; z-index: 1; }
.closer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5ad6da;
  margin-bottom: 16px;
}
.closer h2 {
  font-size: clamp(1.9rem, 5.4vw, 3.1rem);
  margin-bottom: 14px;
  color: var(--color-text-invert);
}
.closer p {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 1.02rem;
  font-weight: 300;
  color: rgba(248, 250, 252, 0.78);
}
.closer-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.closer .btn-primary {
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.55);
}
.closer .btn-ghost {
  background: rgba(248, 250, 252, 0.08);
  border-color: rgba(248, 250, 252, 0.28);
  color: var(--color-text-invert);
}
.closer .btn-ghost:hover { background: rgba(248, 250, 252, 0.16); border-color: rgba(248, 250, 252, 0.5); }
.closer-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 0.82rem;
  color: rgba(248, 250, 252, 0.55);
}
.closer-note .sym { color: #5ad6da; }

/* ============================================================
   28. RESPONSIVE FOR THE NEW BLOCKS
   ============================================================ */
@media (min-width: 768px) {
  .rail-card { padding: 24px 26px; }
  .closer { padding: 76px 48px; }
  .media-head { grid-template-columns: auto 1fr; text-align: left; gap: 40px; }
  .media-kinds { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .rail-step { grid-template-columns: 40px 1fr; gap: 12px; }
  .rail-node { width: 40px; height: 40px; font-size: 0.9rem; }
  .rail::before, .rail-fill {
    left: 19px;
    top: 20px;
    height: var(--rail-h, calc(100% - 40px));
  }
  .rail-card { padding: 17px 18px; }
  .stat-ring { width: 128px; height: 128px; }
  .media-plate { padding: 12px 18px 12px 12px; gap: 11px; }
  .media-mono { width: 38px; height: 38px; font-size: 0.85rem; }
  .media-title { font-size: 0.92rem; }
  .brain-tag { font-size: 0.62rem; padding: 5px 9px; }
  .tag-2 { left: -2%; }
  .tag-3 { right: 0; }
  .closer { padding: 44px 20px; border-radius: var(--radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .rail-fill { transition: none; }
  .brain-tag, .closer::before { animation: none; }
  .stat-ring-fg { transition: none; }
}

/* ============================================================
   29. MEMBER STATE
   What a signed-in person sees instead of "Sign In / Get Started".
   Written by js/landing-auth.js; <html> carries .is-member.
   ============================================================ */
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 74, 153, 0.12);
  background: rgba(255, 255, 255, 0.7);
  transition: transform 220ms var(--fx-ease-out), border-color 240ms ease,
              background 240ms ease, box-shadow 240ms ease;
}
.member-chip:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(0, 170, 176, 0.4);
  box-shadow: var(--shadow-sm);
}
.member-chip:active { transform: translateY(1px); transition-duration: 90ms; }

.member-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
}
.member-id { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.member-name {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-text);
  /* A name is user data and has no length limit. Without a cap, "Κωνσταντίνος"
     pushes the whole nav row past the container — and because .member-id is
     nowrap, it cannot give the space back. The full name stays in the chip's
     title and aria-label, so nothing is lost to a screen reader or a hover. */
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
  margin-top: 1px;
}
.member-streak .sym { color: #ff8a1f; stroke-width: 1.8; }
.member-streak-word { margin-left: 2px; }

/* The member's own numbers, in the slot that used to hold the pitch. */
.member-stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-text-muted);
}

@media (max-width: 899px) {
  /* Stacked mobile nav: the chip is a full-width row like the links. */
  .member-chip { align-self: stretch; justify-content: flex-start; }
}
/* Greek labels run ~20% longer than the English ones, so "Το Πρόβλημα"
   and "Δοκίμασέ το" broke across two lines and left the navbar ragged.
   They fit on one line at every width the horizontal nav still exists at
   (see the breakpoint below). */
.nav-link { white-space: nowrap; }

/* Reclaiming width instead of dropping links. The row holds six section
   links, a tour button, the language toggle, the account (a chip once
   you are signed in) and a CTA — and the longest combination, a
   signed-in Greek visitor, ran ~110px past a 1100px viewport.
   Collapsing to a hamburger for every laptop under 1280 would have been
   the lazy fix; tightening the row keeps the full nav down to ~1100
   instead, and no link is taken away from anyone. */
/* THESE USED TO BE CAPPED AT 1439px AND 1279px. They are unconditional now.
   The caps meant the WIDEST viewports got the LOOSEST row: above 1440 the tour
   button reclaimed its word (~80px) while the gap/font tightening stopped
   applying, so a signed-in Greek visitor overflowed by ~110px at 1920 —
   invisibly, because flexbox was paying for it out of the logo, squeezing the
   mark from 46px to 10px. Fixing the logo (`.nav-logo { flex: none }` in
   landing.css) made the real overflow visible, and this is the real fix.
   Below 1280 nothing changes: these were already the active values there, and
   the mobile-panel blocks further down still override them. */
/* The tour button keeps its icon and its aria-label, loses its word. */
.tour-btn span { display: none; }
.tour-btn { padding: 8px 11px; }
.nav-links { gap: 16px; }
.nav-link { font-size: 0.86rem; }
.member-chip { padding-right: 11px; gap: 8px; }

/* The name shows when the bar is wide enough to carry it, and not before.
   A signed-in visitor's chip is ~127px wider than the "Sign in" link it
   replaces; below 1440 that is the difference between a row with 130px of
   slack and one with 42px, on a bar that has overflowed twice in this file's
   history. Rather than collapse the whole nav to a hamburger for everyone
   at those widths — guests have 80px to spare there — the chip drops to its
   avatar. The name and the streak keep living in its title and aria-label, the
   same trade this file already made for the streak's word. */
@media (max-width: 1439px) {
  .member-chip { padding: 5px; gap: 0; }
  .member-id { display: none; }
}

/* ============================================================
   30. NAVBAR BREAKPOINT
   The horizontal nav now carries six links, a "Tour" button, the
   language toggle, a CTA — and, for a member, a profile chip. That row
   stopped fitting well before the 899px where landing.css collapses it:
   in Greek it already spilled ~32px past the viewport at 950px as a
   guest, and ~150px as a member. The rules below are landing.css's own
   mobile-nav block, applied 200px earlier. Duplicated rather than edited
   in place so landing.css stays untouched.

   1199, RE-MEASURED (2026-08). It was 1099, correct for a six-link row.
   The row now carries a seventh — the link into the public content hub —
   and the measurement moved with it: at 1100px a signed-in Greek visitor
   is 24px short, at 1200px there are 166px to spare. The old number also
   flattered itself, because flexbox was paying any shortfall out of the
   logo mark instead of overflowing visibly; that is fixed in
   landing.css, so this pin is now measured against a row that cannot
   cheat.
   ============================================================ */
@media (max-width: 1199px) {
  .nav-hamburger { display: flex; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: var(--container-px);
    right: var(--container-px);
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 22px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav-link { font-size: 1rem; padding: 4px 0; }
  .nav-link::after { display: none; }
  .nav-divider { width: 100%; height: 1px; }
  .lang-toggle, .tour-btn { width: fit-content; }
  /* The row-tightening above is about a cramped horizontal bar. Stacked,
     there is room for the word again — an unlabelled icon in a list of
     labelled rows just reads as a mistake. */
  .tour-btn span { display: inline; }
  .tour-btn { padding: 10px 16px; }
  .btn-sm { padding: 13px 20px; font-size: 0.95rem; }

  /* Stacked, the chip is a full-width row and has space for the meta again. */
  .member-chip { align-self: stretch; justify-content: flex-start; }
}