/* ===========================================================================
   JUST WANNA TRAIN — shared stylesheet for the tier pages
   (/track, /build, /dominate)

   Tokens are copied from index.html so the pages read as one site. Kept in a
   shared file rather than inlined three times: one place to change, no drift
   between the pages.
   =========================================================================== */

:root{
  --bg: #FFFFFF;
  --bg-2: #F4F4F5;
  --ink: #0A0A0B;
  --ink-dim: #55555A;
  --ink-faint: #8A8A90;
  --line: rgba(10,10,11,0.14);
  --line-strong: rgba(10,10,11,0.30);
  --panel: #FFFFFF;
  --panel-2: #FAFAFA;

  --lime: #FF3131;
  --lime-deep: #A81616;
  --purple: #9B6BFF;
  --purple-deep: #7C4DFF;

  --accent: var(--lime-deep);
  --accent-rgb: 168,22,22;
  --accent-soft: rgba(168,22,22,0.12);
  --accent-glow: rgba(168,22,22,0.32);
  --purple-on: var(--purple);

  --display: 'Archivo', 'Inter', sans-serif;
  --sans: 'Archivo', 'Inter', system-ui, sans-serif;
  --mono: 'Space Mono', 'IBM Plex Mono', monospace;
}

.zone-dark{
  --bg: #0A0A0B; --bg-2: #101012;
  --ink: #FFFFFF; --ink-dim: #9A9A9E; --ink-faint: #5A5A5E;
  --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.18);
  --panel: #101114; --panel-2: #141519;
  --accent: var(--lime);
  --accent-rgb: 255,49,49;
  --accent-soft: rgba(255,49,49,0.14);
  --accent-glow: rgba(255,49,49,0.42);
  --purple-on: #C4B0FF;
  background: #0A0A0B; color: #FFFFFF;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
html, body{
  background: #0A0A0B; color: #FFFFFF;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }

/* ============================== shared bits ============================== */

.wrap{ max-width: 960px; margin: 0 auto; padding: 0 24px; }

.eyebrow{
  font-family: var(--mono); font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 14px; justify-content: center;
}
.eyebrow::before, .eyebrow::after{
  content:''; width: 44px; height: 1px; background: var(--accent); opacity: 0.5;
}

.section-title{
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  line-height: 1.06; letter-spacing: -0.025em;
  text-align: center; margin: 16px auto 0; max-width: 22ch;
}
.section-title em{ font-style: normal; color: var(--accent); }

.section-sub{
  text-align: center; color: var(--ink-dim);
  max-width: 56ch; margin: 16px auto 0; line-height: 1.6;
}

/* Corner frame — the HUD motif from the home page */
.frame{ position: relative; }
.frame::before, .frame::after,
.frame > i::before, .frame > i::after{
  content:''; position: absolute; width: 22px; height: 22px;
  border-color: var(--accent); border-style: solid; opacity: 0.5;
  pointer-events: none;
}
.frame::before{ top: 0; left: 0; border-width: 1px 0 0 1px; }
.frame::after{ top: 0; right: 0; border-width: 1px 1px 0 0; }
.frame > i::before{ bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.frame > i::after{ bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* ================================== nav ================================== */

.nav{
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  max-width: 960px; margin: 0 auto; padding: 22px 24px;
}
.brand{
  display: flex; align-items: center;
  font-family: var(--display); font-weight: 900;
  text-decoration: none;
}
.brand-name{
  /* Holle letters hebben meer lucht nodig dan massieve: de randen van twee
     buurletters lopen anders tegen elkaar aan. */
  font-size: 15px; letter-spacing: 0.06em; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: baseline;
}
.brand-name .jw{ color: inherit; }
.brand-name .t{ color: var(--lime); }
/* Hol woordmerk. Achter @supports omdat color:transparent zonder werkende
   text-stroke een onzichtbaar logo oplevert; zonder steun blijft het massief.
   De rand volgt var(--ink), dus zwart op licht en wit op donker. */
@supports (-webkit-text-stroke: 1px #000) and (-webkit-text-fill-color: #000){
  /* text-fill-color leegt alleen de vulling; color blijft staan, zodat
     currentColor de echte tekstkleur van de balk oppakt. Met color:transparent
     zou currentColor transparant zijn en het woordmerk onzichtbaar. */
  .brand-name .jw, .brand-name .t{
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.1px currentColor;
  }
}
.nav-back{
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;
  transition: color 0.2s ease;
}
.nav-back:hover{ color: var(--accent); }

/* ================================= hero ================================== */

.tier-hero{
  position: relative;
  padding: 46px 0 54px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--accent-rgb),0.10) 0%, transparent 65%),
    #0A0A0B;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.tier-hero .wrap{ position: relative; }
.tier-numeral{
  font-family: var(--display); font-weight: 900;
  font-size: clamp(4.5rem, 17vw, 9rem); line-height: 0.8;
  text-align: center; color: rgba(255,255,255,0.05);
  letter-spacing: -0.04em; user-select: none;
  margin-bottom: -0.34em;
}
.tier-label{
  font-family: var(--mono); font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--ink-faint); text-align: center;
}
.tier-title{
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.6rem, 11vw, 5rem); line-height: 0.95;
  letter-spacing: -0.035em; text-align: center; margin-top: 10px;
}
.tier-title .first{ color: var(--accent); }
.tier-tagline{
  text-align: center; color: var(--ink-dim); margin-top: 14px;
  font-size: 1.02rem; line-height: 1.6;
}
.tier-priceline{
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  margin-top: 24px; flex-wrap: wrap;
}
.tier-amount{
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1;
  color: var(--purple-on); letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
}
.tier-terms{
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ============================== what you get ============================= */

.section{ padding: 66px 0; }
.section.alt{ background: var(--bg-2); }

.gets{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-top: 38px;
}
.get{
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 22px 20px 20px;
}
.get-k{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.get-t{
  font-family: var(--display); font-weight: 800; font-size: 1.02rem;
  line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 7px;
}
.get-d{ font-size: 0.87rem; line-height: 1.55; color: var(--ink-dim); }
.get.inherited .get-k{ color: var(--ink-faint); }

/* ============================== filter bar =============================== */

.filters{
  display: flex; flex-direction: column; gap: 16px;
  margin-top: 34px; padding: 22px 22px 20px;
  border: 1px solid var(--line); background: var(--panel);
}
.filter-row{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.filter-k{
  font-family: var(--mono); font-size: 10px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--ink-faint);
  min-width: 74px;
}
.chips{ display: flex; gap: 9px; flex-wrap: wrap; flex: 1; }
.chip{
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 11px 22px; border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink);
  cursor: pointer; transition: all 0.2s cubic-bezier(.16,1,.3,1);
}
.chip:hover{ border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"]{
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 0 18px var(--accent-glow);
}
.chip:focus-visible{ outline: 2px solid var(--purple-on); outline-offset: 3px; }

.filter-count{
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink-faint);
}

/* =============================== catalogue =============================== */

.catalog{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-top: 22px;
}
.card{
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--panel);
  padding: 24px 22px 22px; overflow: hidden;
  transition: transform 0.28s cubic-bezier(.16,1,.3,1),
              border-color 0.28s ease, box-shadow 0.28s ease;
}
/* .card sets display:flex, which beats the browser's [hidden]{display:none}.
   Without this the filter sets the attribute and nothing visibly changes. */
.card[hidden]{ display: none; }
.card::before{
  content:''; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(.16,1,.3,1);
}
.card:hover{
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.card:hover::before{ width: 100%; }

.card-code{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.card-badge{
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.4px;
  padding: 3px 8px; background: var(--accent); color: #fff;
  text-transform: uppercase;
}
.card-name{
  font-family: var(--display); font-weight: 900;
  font-size: 1.16rem; line-height: 1.2; letter-spacing: -0.015em;
  margin: 14px 0 8px;
}
.card-name .d{ color: var(--accent); }
.card-desc{
  font-size: 0.87rem; line-height: 1.55; color: var(--ink-dim);
  margin-bottom: 16px;
}
.card-specs{
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 14px; border-top: 1px solid var(--line);
  margin-top: auto;
}
.spec{
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--line); padding: 4px 8px;
}
.card-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 18px;
}
.card-price{
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  color: var(--purple-on); letter-spacing: -0.02em;
  font-feature-settings: 'tnum'; line-height: 1;
}
.card-price small{
  display: block; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 1.2px; color: var(--ink-faint); font-weight: 400;
  margin-top: 4px; text-transform: uppercase;
}
.card-buy{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 20px; border-radius: 100px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px;
  font-weight: 700; text-transform: uppercase; text-decoration: none;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-buy:hover{ transform: translateY(-1px); box-shadow: 0 8px 26px var(--accent-glow); }
.card-buy .arr{ transition: transform 0.2s ease; }
.card-buy:hover .arr{ transform: translateX(3px); }

/* A checkout link that is still a placeholder must not look buyable. */
.card-buy[data-unconfigured="true"]{
  background: transparent; color: var(--ink-faint);
  border-color: var(--line-strong); box-shadow: none; cursor: not-allowed;
}
.card-buy[data-unconfigured="true"]:hover{ transform: none; box-shadow: none; }

.catalog-note{
  margin-top: 18px; text-align: center;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-faint); line-height: 1.8;
}

/* ============================== animation =============================== */

[data-reveal]{ opacity: 0; transform: translateY(16px); }
[data-reveal].in{
  opacity: 1; transform: none;
  transition: opacity 0.55s cubic-bezier(.16,1,.3,1),
              transform 0.55s cubic-bezier(.16,1,.3,1);
}

/* ================================ add-on ================================= */

.addon{
  display: grid; grid-template-columns: 1fr auto; gap: 22px;
  align-items: center;
  border: 1px solid var(--line); background: var(--panel-2);
  padding: 26px 24px; margin-top: 38px;
}
.addon-k{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.addon-t{
  font-family: var(--display); font-weight: 900; font-size: 1.3rem;
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.addon-d{ font-size: 0.9rem; line-height: 1.55; color: var(--ink-dim); }
.addon-buy{ text-align: right; }
.addon-price{
  font-family: var(--display); font-weight: 800; font-size: 1.6rem;
  color: var(--purple-on); letter-spacing: -0.02em; font-feature-settings: 'tnum';
}
.addon-terms{
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 2px;
}
.addon-cta{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 12px 20px; border-radius: 100px;
  border: 1px solid var(--line-strong); text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; white-space: nowrap;
  transition: all 0.18s ease;
}
.addon-cta:hover{ border-color: var(--accent); color: var(--accent); }

/* ================================ roadmap ================================ */

/* A single strip instead of a full section: what is announced here cannot be
   bought yet, so it should not interrupt the page just before someone does. */
.roadmap-strip{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* A faint purple wash, kept low enough that purple still reads as the price
     colour everywhere else on the page. */
  background:
    linear-gradient(90deg,
      rgba(155,107,255,0.11) 0%,
      rgba(155,107,255,0.05) 42%,
      rgba(155,107,255,0.01) 78%,
      transparent 100%),
    var(--bg-2);
  padding: 18px 0;
}
.roadmap-strip .wrap{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px;
  color: var(--ink-faint); line-height: 1.6;
}
.roadmap-strip b{
  color: var(--accent); font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase;
}
.roadmap-strip .dot{
  flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-on); box-shadow: 0 0 8px var(--purple-on);
  animation: pulseDot 2.6s ease-in-out infinite;
}

/* =============================== other tiers ============================= */

.others{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 34px;
}
.other{
  display: block; text-decoration: none;
  border: 1px solid var(--line); background: var(--panel);
  padding: 24px 22px; transition: all 0.2s ease;
}
.other:hover{ border-color: var(--accent); transform: translateY(-2px); }
.other-k{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px;
}
.other-t{
  font-family: var(--display); font-weight: 900; font-size: 1.5rem;
  letter-spacing: -0.02em; margin-bottom: 6px;
}
.other-d{ font-size: 0.87rem; color: var(--ink-dim); line-height: 1.5; }
.other-p{
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
  color: var(--purple-on); margin-top: 12px; font-feature-settings: 'tnum';
}

/* ================================= footer ================================ */

.foot{
  border-top: 1px solid var(--line);
  padding: 40px 0 54px; text-align: center;
}
.foot-links{
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.8px;
  text-transform: uppercase;
}
.foot-links a{ color: var(--ink-dim); text-decoration: none; transition: color 0.2s ease; }
.foot-links a:hover{ color: var(--accent); }
.foot-note{
  margin-top: 20px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint);
}

/* ================================= mobile ================================ */

@media (max-width: 640px){
  .wrap{ padding: 0 16px; }
  .nav{ padding: 18px 16px; }
  .section{ padding: 48px 0; }
  .tier-hero{ padding: 34px 0 42px; }
  .builder{ padding: 24px 18px 22px; }
  .chip{ flex: 1 1 40%; padding: 12px 10px; font-size: 11px; text-align: center; }
  .filter-row{ gap: 10px; }
  .filter-k{ min-width: 100%; }
  .filters{ padding: 18px 16px 16px; }
  .catalog{ grid-template-columns: 1fr; }
  .addon{ grid-template-columns: 1fr; gap: 16px; }
  .addon-buy{ text-align: left; }
  .gets{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}

/* ===========================================================================
   HUD DETAIL + MOTION
   Everything below is CSS and inline SVG only — no images, no libraries, so
   the extra detail costs nothing on a phone connection.
   =========================================================================== */

/* ------------------------------------------------ the glow behind the hero */

.tier-hero{ isolation: isolate; }
.tier-hero .glow-a,
.tier-hero .glow-b{
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(46px);
}
.tier-hero .glow-a{
  width: 60vw; height: 60vw; max-width: 520px; max-height: 520px;
  left: 50%; top: 34%; margin: -26vw 0 0 -30vw;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.42) 0%, rgba(var(--accent-rgb),0.12) 45%, transparent 70%);
  animation: glowBreathe 7s ease-in-out infinite;
}
.tier-hero .glow-b{
  width: 46vw; height: 46vw; max-width: 380px; max-height: 380px;
  left: 26%; top: 62%;
  background: radial-gradient(circle, rgba(155,107,255,0.26) 0%, transparent 68%);
  animation: glowDrift 13s ease-in-out infinite;
}
@keyframes glowBreathe{
  0%, 100%{ transform: scale(1);    opacity: 0.75; }
  50%     { transform: scale(1.16); opacity: 1; }
}
@keyframes glowDrift{
  0%, 100%{ transform: translate(0, 0) scale(1); opacity: 0.5; }
  33%     { transform: translate(16%, -12%) scale(1.14); opacity: 0.85; }
  66%     { transform: translate(-14%, 8%) scale(0.94); opacity: 0.6; }
}

/* A slow scanline crossing the hero, the way the home page reads. */
.tier-hero .scan{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--accent-rgb),0.10) 50%, transparent 100%);
  height: 26%;
  animation: scanSweep 9s linear infinite;
}
@keyframes scanSweep{
  0%  { transform: translateY(-120%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100%{ transform: translateY(420%); opacity: 0; }
}

/* --------------------------------------------------------- section detail */

/* A faint measurement grid, so a flat panel reads as an instrument. */
.section{ position: relative; }
.section.gridlines::before{
  content:''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--hairline, rgba(255,255,255,0.045)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline, rgba(255,255,255,0.045)) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 78%);
  opacity: 0.7;
}
.section > .wrap{ position: relative; z-index: 1; }

/* Ruler strip: tick marks with a longer mark every fifth, like a scale. */
.tick-rule{
  position: relative; height: 22px; margin: 0 0 26px;
  border-top: 1px solid var(--line);
}
.tick-rule::before{
  content:''; position: absolute; inset: 0 0 auto 0; height: 7px;
  background-image: repeating-linear-gradient(
    to right,
    var(--line-strong) 0 1px,
    transparent 1px 14px);
  opacity: 0.7;
}
.tick-rule::after{
  content:''; position: absolute; inset: 0 0 auto 0; height: 13px;
  background-image: repeating-linear-gradient(
    to right,
    var(--accent) 0 1px,
    transparent 1px 70px);
  opacity: 0.45;
}

/* Section index, sat against the ruler. */
.sec-meta{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-faint);
}
.sec-meta .id{ color: var(--accent); }
.sec-meta .dot{
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--purple-on); margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 8px var(--purple-on);
  animation: pulseDot 2.6s ease-in-out infinite;
}
@keyframes pulseDot{
  0%, 100%{ opacity: 0.45; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.35); }
}

/* ------------------------------------------------------- card enhancements */

/* A light sweep as a card arrives, so the grid feels built rather than drawn. */
.card::after{
  content:''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255,255,255,0.07) 50%,
    transparent 62%);
  transform: translateX(-110%);
}
.card.in::after{ animation: sheen 1.15s cubic-bezier(.16,1,.3,1) 0.15s 1; }
@keyframes sheen{ to{ transform: translateX(110%); } }

/* Rechts uitgelijnd onder de tiernaam. Geen kader: als tekst leest het als
   een eigenschap van het product in plaats van een sticker erop. */
.card-code-end{
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; text-align: right; flex: none;
}
.card-combo{
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--purple-on);
  white-space: nowrap;
  animation: comboPulse 3s ease-in-out infinite;
}
@keyframes comboPulse{
  0%, 100%{ text-shadow: 0 0 0 rgba(155,107,255,0); }
  50%     { text-shadow: 0 0 12px rgba(155,107,255,0.85); }
}
@media (prefers-reduced-motion: reduce){
  .card-combo{ animation: none; }
}

.card-meta{
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-faint);
  padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto;
}

@media (prefers-reduced-motion: reduce){
  .tier-hero .glow-a,
  .tier-hero .glow-b,
  .tier-hero .scan,
  .sec-meta .dot,
  .card.in::after{ animation: none !important; }
  .tier-hero .scan{ opacity: 0; }
}

/* ===========================================================================
   RED GLOW PASSES
   Three places only: behind the price, softly behind each section, and on the
   card you are pointing at. Restraint is what keeps a glow readable — light
   everything and nothing stands out.
   =========================================================================== */

/* ------------------------------------------------- ambient section light */

.section.gridlines::after{
  content:''; position: absolute; z-index: 0; pointer-events: none;
  width: 72vw; max-width: 680px; height: 72vw; max-height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.11) 0%, transparent 68%);
  filter: blur(44px);
  left: 50%; top: 0; margin-left: -36vw; margin-top: -22vw;
  animation: ambDrift 22s ease-in-out infinite;
}
/* Offset on alternating sections so the page does not pulse in one rhythm. */
.section.alt.gridlines::after{
  left: 16%; top: auto; bottom: 0; margin-top: 0; margin-bottom: -26vw;
  background: radial-gradient(circle, rgba(155,107,255,0.09) 0%, transparent 68%);
  animation-duration: 27s; animation-direction: reverse;
}
@keyframes ambDrift{
  0%, 100%{ transform: translate(0, 0) scale(1);        opacity: 0.65; }
  50%     { transform: translate(6%, 4%) scale(1.14);   opacity: 1; }
}

/* ------------------------------------------------------ glow at the price */

.card-price{ position: relative; isolation: isolate; }
.card-price::before{
  content:''; position: absolute; z-index: -1; pointer-events: none;
  left: -18px; top: 50%; width: 108px; height: 108px; margin-top: -54px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.34) 0%, transparent 68%);
  filter: blur(18px);
  animation: priceBreathe 5.5s ease-in-out infinite;
}
@keyframes priceBreathe{
  0%, 100%{ opacity: 0.55; transform: scale(0.94); }
  50%     { opacity: 1;    transform: scale(1.08); }
}

/* ------------------------------------------------- the card you are on ---- */

/* :focus-within is deliberate: someone tabbing to the buy button gets the same
   highlight as someone hovering, so keyboard use is not a second-class path. */
.card:hover,
.card:focus-within{
  border-color: rgba(var(--accent-rgb),0.5);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.5),
    0 0 0 1px rgba(var(--accent-rgb),0.22),
    0 0 36px rgba(var(--accent-rgb),0.16);
}

/* ------------------------------------------------------- denser card body */

.card-index{
  color: var(--accent); font-weight: 700; margin-right: 10px;
  font-feature-settings: 'tnum';
}

.card-schema{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  letter-spacing: -0.01em; line-height: 1.2;
}
.card-schema .days{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.card-plus{
  margin-top: 9px; font-size: 0.8rem; line-height: 1.55; color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce){
  .section.gridlines::after,
  .card-price::before{ animation: none !important; }
}

/* ============================== JWT mark ================================ */

  /* ============== JWT MARK — concentric orbit ==============
     One piece of artwork used at 24px in the nav and at 78px in the about
     block. Colour comes from currentColor so it follows whatever zone it sits
     in; stroke width is set per context, because a stroke that reads at 24px
     is far too heavy at 78px. */
  .jwt-orbit .r{ fill: none; stroke: currentColor; }
  .jwt-orbit .r1{ opacity: 1; }
  .jwt-orbit .r2{ opacity: 0.55; }
  .jwt-orbit .r3{ opacity: 0.30; }
  .jwt-orbit .r4{ opacity: 0.14; }
  .jwt-orbit .c{ fill: currentColor; }

  /* Fills the avatar's content box, the way the mark it replaced did. The
     avatar's 22px padding was cut to 12px: that inset was tuned for a compact
     hexagon and left the wider orbit only 34px to work with on a phone. */
  .about-avatar{ padding: 12px; }
  .about-avatar .jwt-orbit{
    width: 100%; height: 100%; flex-shrink: 0;
    color: var(--accent);
  }
  .about-avatar .jwt-orbit .r{ stroke-width: 2.2; }

/* ========================================================================== */
/*  HERO-MOTION — per tier een eigen beweging, zie build-tier-pages.py         */
/*  Alles CSS op server-gerenderde SVG: geen extra tekenlus in JavaScript.     */
/* ========================================================================== */
.hero-motion{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
  /* Vervaagt naar de randen zodat het een veld is en geen plaatje. */
  -webkit-mask-image: radial-gradient(ellipse 86% 92% at 50% 55%, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 86% 92% at 50% 55%, #000 20%, transparent 100%);
}
.tier-hero.motion-paused .hero-motion *{ animation-play-state: paused; }

/* --- TRACK: het werkblad vult zich --- */
.hero-motion.sheet rect{
  opacity: 0;
  animation: cellOn 9s ease-out infinite;
}
@keyframes cellOn{
  0%   { opacity: 0; }
  2%   { opacity: 0.20; }
  9%   { opacity: 0.07; }
  60%  { opacity: 0.03; }
  100% { opacity: 0; }
}
/* Vaste rasterlijnen eronder, zodat het ook tussen de oplichtende cellen door
   als werkblad leest en niet als losse blokjes. */
.hero-motion.sheet{
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* --- BUILD: volume bouwt op en af --- */
.hero-motion.bars .b{
  fill: var(--accent); opacity: 0.34;
  transform-origin: bottom; transform-box: fill-box;
  animation: barUp 4.6s ease-in-out infinite;
}
.hero-motion.bars .b.p{ fill: var(--purple-on); opacity: 0.30; }
@keyframes barUp{
  0%, 100%{ transform: scaleY(0.22); }
  50%     { transform: scaleY(1); }
}

/* --- DOMINATE: de progressielijn tekent zichzelf --- */
.hero-motion.line .grid line{ stroke: rgba(255,255,255,0.045); }
.hero-motion.line .curve{
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.38;
  filter: drop-shadow(0 0 7px rgba(var(--accent-rgb),0.45));
  stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: curveDraw 7s cubic-bezier(.4,0,.3,1) infinite;
}
@keyframes curveDraw{
  0%   { stroke-dashoffset: 620; opacity: 0; }
  6%   { opacity: 0.38; }
  58%  { stroke-dashoffset: 0;   opacity: 0.38; }
  88%  { stroke-dashoffset: 0;   opacity: 0.38; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .hero-motion *{ animation: none !important; }
  .hero-motion.sheet rect{ opacity: 0.07; }
  .hero-motion.line .curve{ stroke-dashoffset: 0; opacity: 0.3; }
}