/* ═══════════════════════════════════════════════════════════════════════════
   scenes — the hero fixture, the routing diagram, the dial console, the tree
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

/* A drafting grid with a heavier line every fifth square, like a plan sheet. */
.hero__plan {
  position: absolute;
  inset: -25% -10% 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(126, 170, 158, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 170, 158, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(126, 170, 158, 0.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 170, 158, 0.085) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px, 220px 220px, 220px 220px;
  mask-image: radial-gradient(74% 62% at 52% 26%, #000 26%, transparent 76%);
  -webkit-mask-image: radial-gradient(74% 62% at 52% 26%, #000 26%, transparent 76%);
}

.hero__glow {
  position: absolute;
  z-index: -2;
  top: -18%; right: -8%;
  width: min(820px, 88vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 224, 122, 0.17), transparent 62%);
  filter: blur(34px);
  animation: glow-breathe 9s var(--ease-fluid) infinite;
  pointer-events: none;
}

@keyframes glow-breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.09); opacity: 1; }
}

/* The water sits above the fixture so splashes land in front of the glass
   rather than behind the tank's back panel. It only covers the fixture, so it
   can never paint over the copy on the other side of the hero. */
.fixture__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.hero__copy, .hero__fixture { min-width: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem 0.4rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(18, 30, 33, 0.85), rgba(6, 11, 14, 0.85));
  font-size: 0.8rem;
  color: var(--text-soft);
  margin-bottom: 1.7rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.eyebrow strong { color: var(--water-bright); font-weight: 600; }
.eyebrow__sep { width: 1px; height: 12px; background: var(--line); }
.eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); flex-wrap: wrap; row-gap: 0.25rem; }
.eyebrow > * { white-space: nowrap; }
.eyebrow__tag { color: var(--water-bright); font-weight: 700; }
.eyebrow__sha { background: none; border: 0; padding: 0; color: var(--copper-lit); font-size: inherit; }

.hero__lede--small { font-size: 0.95rem; color: var(--muted); margin-top: -1.2rem; }

.hero__docs {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.86rem 0.4rem;
  font-size: 0.92rem;
  color: var(--text-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.hero__docs:hover { color: var(--water-bright); border-bottom-color: var(--water-dim); }

.hero__title {
  font-size: clamp(2.7rem, 1.3rem + 5.6vw, 5.5rem);
  letter-spacing: -0.045em;
  line-height: 0.94;
  margin-bottom: 1.7rem;
}

.hero__title .ink { font-size: 1.16em; }

/* Each line is masked and slides up from under its own edge — a wipe, not a
   fade. The delays are set inline by motion.js so the cascade is per-line. */
.hero__title .line { display: block; overflow: hidden; }

.hero__title .line > span,
.hero__title .line > em {
  display: inline-block;
  transform: translateY(110%) rotate(2deg);
  opacity: 0;
  transition:
    transform 1.05s var(--ease-out) var(--d, 0ms),
    opacity 0.8s var(--ease-out) var(--d, 0ms);
}

.hero__title.is-in .line > span,
.hero__title.is-in .line > em { transform: none; opacity: 1; }

.hero__lede {
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem);
  color: var(--text-soft);
  max-width: 56ch;
  margin-bottom: 2.1rem;
}

.hero__lede strong { color: var(--text); font-weight: 600; }
.hero__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* ── the fixture, and the room it is mounted in ──────────────────────────
   The faucet is not floating in the dark: it is bolted to a glazed tile wall,
   lit from above by one warm lamp, with the tank's own light bouncing back
   off the tiles and a wet floor under it. Everything that makes a product
   photo read as a photo is here, in CSS.                                    */

.hero__fixture { position: relative; display: grid; justify-items: center; min-width: 0; }

.scene {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 5.7;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(148, 190, 178, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 40px 90px -30px rgba(0, 0, 0, 0.95),
    0 0 0 8px rgba(8, 15, 17, 0.6),
    0 0 0 9px rgba(148, 190, 178, 0.06);
}

/* Glazed ceramic tiles with grout, each catching the lamp on its upper-left. */
.scene__wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0a1615;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.62) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 2px, transparent 2px),
    radial-gradient(at 22% 18%, rgba(255, 255, 255, 0.075), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 60%),
    linear-gradient(180deg, #102220 0%, #0a1615 55%, #061010 100%);
  background-size: 100% 68px, 68px 100%, 68px 68px, 68px 68px, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* Water light dancing on the wall. Painted by motion.js at low resolution
   and blurred up, so it costs almost nothing. */
.scene__caustics {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  opacity: 0.55;
  mix-blend-mode: screen;
  filter: blur(6px);
  pointer-events: none;
}

/* One warm lamp, above and slightly left. */
.scene__spot {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(76% 62% at 44% -8%, rgba(255, 214, 160, 0.3), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

/* The tank lighting the tiles behind it. Opacity follows the valve. */
.scene__glow {
  position: absolute;
  left: 34%; right: -6%;
  bottom: 14%;
  height: 40%;
  z-index: 2;
  background: radial-gradient(60% 60% at 50% 70%, rgba(0, 224, 122, 0.36), transparent 70%);
  opacity: calc(0.35 + var(--flow, 0.72) * 0.65);
  filter: blur(10px);
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}

/* A brass nameplate on the wall. */
.scene__plaque {
  position: absolute;
  top: 7%;
  left: 7%;
  z-index: 4;
  display: grid;
  gap: 2px;
  padding: 0.55rem 0.8rem 0.5rem;
  border-radius: 6px;
  background:
    linear-gradient(160deg, #e9bd8b 0%, #b87333 38%, #8a4f22 70%, #d19a5e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 6px 14px -6px rgba(0, 0, 0, 0.9);
  transform: rotate(-0.6deg);
}

.scene__plaque::before,
.scene__plaque::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3df, #6b3d18 70%);
  transform: translateY(-50%);
}

.scene__plaque::before { left: 4px; }
.scene__plaque::after  { right: 4px; }

.scene__plaqueName {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: #2a1608;
  text-shadow: 0 1px 0 rgba(255, 240, 220, 0.45);
}

.scene__plaqueNo {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: #3d2410;
  text-shadow: 0 1px 0 rgba(255, 240, 220, 0.35);
}

.scene__stage {
  position: absolute;
  inset: 6.5% 4% 21% 4%;
  z-index: 3;
  display: grid;
  place-items: center;
}

.fixture__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}

.faucet {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: fixture-settle 12s var(--ease-fluid) infinite;
}

@keyframes fixture-settle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-0.2deg); }
}

/* Wet floor: a dark glossy strip with the tank's reflection smeared into it. */
.scene__floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 19%;
  z-index: 3;
  background:
    radial-gradient(38% 90% at 63% 0%, rgba(0, 224, 122, 0.32), transparent 70%),
    linear-gradient(180deg, rgba(4, 8, 10, 0.2) 0%, rgba(3, 6, 8, 0.96) 40%, #02050600 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.scene__floor::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, transparent 0 66px, rgba(0, 0, 0, 0.35) 66px 68px);
  opacity: 0.5;
}

.scene__readouts {
  position: absolute;
  left: 0; right: 0; bottom: 3.5%;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  padding-inline: 0.75rem;
}

.fx-valve { cursor: grab; }
.fx-valve:active { cursor: grabbing; }
.fx-valveHit { pointer-events: all; }

.fx-handleSpin {
  transform-origin: 235px 112px;
  transform: rotate(var(--valve-turn, 0deg));
  transition: transform 0.16s linear;
}

.fx-halo {
  opacity: var(--flow, 0.72);
  animation: halo-breathe 3.2s var(--ease-fluid) infinite;
  transform-origin: 354px 476px;
}

@keyframes halo-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}

.fx-condense ellipse { animation: bead-run 7s var(--ease-fluid) infinite; }
.fx-condense .d1 { animation-delay: 0s; }
.fx-condense .d2 { animation-delay: 2.1s; }
.fx-condense .d3 { animation-delay: 4.3s; }
.fx-condense .d4 { animation-delay: 5.6s; }

@keyframes bead-run {
  0%   { opacity: 0;    transform: translateY(0) scale(0.6); }
  18%  { opacity: 0.55; transform: translateY(0) scale(1); }
  62%  { opacity: 0.5;  transform: translateY(26px) scale(1.05); }
  100% { opacity: 0;    transform: translateY(58px) scale(0.7); }
}

.fixture__panel {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.48rem 0.95rem;
  border: 1px solid rgba(148, 190, 178, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(20, 33, 36, 0.92), rgba(6, 11, 14, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 24px -12px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

.fixture__label { color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.62rem; }
.fixture__value { color: var(--water-bright); font-weight: 700; font-size: 0.92rem; min-width: 3.4ch; }
.fixture__hint  { color: var(--faint); font-size: 0.66rem; }
.fixture__panel--total { border-color: rgba(0, 224, 122, 0.26); }
.fixture__panel--total .fixture__value { min-width: 0; }

/* ── the routing diagram ─────────────────────────────────────────────────── */

.loop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: start;
}

@media (max-width: 1080px) { .loop { grid-template-columns: 1fr; } }

.loop__canvas { min-width: 0; }

.loop__frame {
  --frame-pad: clamp(1.1rem, 2.2vw, 1.8rem);
  position: relative;
  border: var(--plate-edge);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 74% at 50% 44%, rgba(0, 224, 122, 0.06), transparent 66%),
    var(--plate-bg);
  box-shadow: var(--plate-shadow);
  padding: var(--frame-pad);
  overflow: hidden;
}

/* The inlets start outside the plate, so the pipes read as arriving from
   somewhere rather than being drawn inside a box. */
.loop__stage { position: relative; overflow-x: auto; margin-left: calc(-1 * var(--frame-pad)); }
.flow { width: 100%; min-width: 780px; height: auto; overflow: visible; display: block; }

.flow__particles {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* The body of the water: a dashed stroke scrolling toward the outlets. The
   canvas above adds discrete droplets on the same paths, so the pipes read as
   full of liquid rather than as a dashed line. */
.flow__stream {
  stroke: var(--water);
  stroke-dasharray: 30 34;
  animation: flow-run var(--flow-speed, 2.2s) linear infinite;
  opacity: 0.9;
}

@keyframes flow-run { to { stroke-dashoffset: -64; } }

.flow__stream--out { stroke-width: calc(4px + var(--weight, 0.35) * 16px); }
.flow__stream--out[data-bucket='buyback']   { stroke: var(--burn); }
.flow__stream--out[data-bucket='liquidity'] { stroke: var(--liquidity); }
.flow__stream--out[data-bucket='treasury']  { stroke: var(--build); }

.flow__pulse { transform-origin: 570px 282px; animation: manifold-pulse 3s var(--ease-fluid) infinite; }
.flow__pulse--b { animation-delay: 0.6s; }

@keyframes manifold-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.45; }
  50%      { transform: scale(1.22); opacity: 0.95; }
}

.flow__manifoldBolts circle { opacity: 0.9; }

.flow__wheel { animation: wheel-turn 9s linear infinite; }
.flow__outlet[data-bucket='drip'] .flow__wheel      { animation-duration: 7s; }
.flow__outlet[data-bucket='liquidity'] .flow__wheel { animation-duration: 12s; animation-direction: reverse; }
.flow__outlet[data-bucket='treasury'] .flow__wheel  { animation-duration: 15s; }

@keyframes wheel-turn { to { transform: rotate(360deg); } }

.flow__title {
  fill: var(--text);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.flow__sub { fill: var(--muted); font-family: var(--font-display); font-size: 14px; }

.flow__pct {
  fill: var(--water-bright);
  font-family: var(--font-mono);
  font-size: 25px;
  font-weight: 700;
}

.flow__outlet[data-bucket='buyback']   .flow__pct { fill: var(--burn); }
.flow__outlet[data-bucket='liquidity'] .flow__pct { fill: var(--liquidity); }
.flow__outlet[data-bucket='treasury']  .flow__pct { fill: var(--build); }

.flow__manifoldTitle {
  fill: var(--copper-pale);
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.flow__manifoldSum {
  fill: var(--water);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  opacity: 0.85;
}

.flow__outlet { transition: opacity 0.3s var(--ease-out); }
.flow.is-focused .flow__outlet { opacity: 0.28; }
.flow.is-focused .flow__outlet.is-focused { opacity: 1; }
.flow.is-focused .flow__stream--out { opacity: 0.14; }
.flow.is-focused .flow__stream--out.is-focused { opacity: 1; }

/* ── pressure panel ──────────────────────────────────────────────────────── */

.loop__panel {
  padding: 1.55rem 1.45rem;
  border: var(--plate-edge);
  border-radius: var(--radius-lg);
  background: var(--plate-bg);
  box-shadow: var(--plate-shadow);
  position: sticky;
  top: 100px;
}

@media (max-width: 1080px) { .loop__panel { position: static; } }

.slider { display: block; margin-bottom: 1.4rem; }

.slider__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-mono);
}

.slider__value {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--water-bright);
  letter-spacing: -0.035em;
  margin-block: 0.25rem 0.8rem;
  text-shadow: 0 0 26px rgba(0, 224, 122, 0.35);
}

.slider__value em { font-style: normal; font-size: 0.5em; color: var(--muted); letter-spacing: 0.04em; }

.slider input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, var(--water) var(--pct, 10%), rgba(255, 255, 255, 0.07) var(--pct, 10%));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fdeacd, #b87333 52%, #4a2a10);
  border: 2px solid #231306;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.75), 0 0 0 4px rgba(184, 115, 51, 0.1);
}

.slider input[type='range']::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fdeacd, #b87333 52%, #4a2a10);
  border: 2px solid #231306;
}

.slider__scale { display: flex; justify-content: space-between; margin-top: 0.5rem; }
.slider__scale i { width: 1px; height: 6px; background: var(--line); }

.loop__outputs { list-style: none; padding: 0; display: grid; gap: 0.55rem; }

.loop__outputs li {
  position: relative;
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem 0.75rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(4, 8, 10, 0.55);
  font-size: 0.85rem;
  overflow: hidden;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}

.loop__outputs li:hover { border-color: var(--water-dim); background: var(--water-wash); }

.loop__outputs .bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: var(--w, 0%);
  background: currentColor;
  opacity: 0.8;
}

.loop__outputs li[data-bucket='buyback']   { color: var(--burn); }
.loop__outputs li[data-bucket='drip']      { color: var(--drip); }
.loop__outputs li[data-bucket='liquidity'] { color: var(--liquidity); }
.loop__outputs li[data-bucket='treasury']  { color: var(--build); }

.loop__outputs .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.loop__outputs .k { color: var(--text-soft); }
.loop__outputs .v { font-family: var(--font-mono); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

.loop__checksum {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.81rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.loop__checksum strong { color: var(--water-bright); font-family: var(--font-mono); }

.loop__checksumOk {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--water);
  box-shadow: 0 0 0 3px rgba(0, 224, 122, 0.18);
  flex: none;
}

/* ── the dial console ────────────────────────────────────────────────────── */

.console {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(1.2rem, 2.4vw, 2rem);
  /* Brushed metal: a fine repeating gradient over a soft vertical shade. */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #131f22, #080f11 55%, #050a0c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px -50px #000;
}

.console__rail { position: absolute; inset: 0; pointer-events: none; }

.console__strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0.5rem 1.1rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--faint);
}

.console__plate { color: var(--copper-lit); }
.console__serial { margin-left: auto; }
.console__leds { display: inline-flex; gap: 6px; }
.console__leds i:nth-child(2) { animation-delay: 0.35s; background: var(--build); box-shadow: 0 0 8px var(--build); }
.console__leds i:nth-child(3) { animation-delay: 0.7s;  background: var(--liquidity); box-shadow: 0 0 8px var(--liquidity); }
.console__leds i:nth-child(4) { animation-delay: 1.05s; background: var(--burn); box-shadow: 0 0 8px var(--burn); }

.dials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
}

.dial-card {
  position: relative;
  padding: 1.5rem 1.35rem 1.4rem;
  border: var(--plate-edge);
  border-radius: var(--radius-lg);
  background: var(--plate-bg);
  box-shadow: var(--plate-shadow);
  transition: border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.dial-card:hover { border-color: var(--water-dim); transform: translateY(-5px); }
.dial-card[data-bucket='buyback']:hover   { border-color: rgba(255, 138, 91, 0.4); }
.dial-card[data-bucket='liquidity']:hover { border-color: rgba(75, 215, 255, 0.4); }
.dial-card[data-bucket='treasury']:hover  { border-color: rgba(233, 189, 139, 0.4); }

.dial-card h3 { font-size: 1.16rem; margin-bottom: 0.6rem; }
.dial-card p { font-size: 0.89rem; color: var(--text-soft); }

.dial { position: relative; margin-bottom: 1.15rem; padding-bottom: 2rem; }
.dial svg { width: 100%; max-width: 216px; height: auto; margin-inline: auto; overflow: visible; }

.dial__face {
  fill: radial-gradient(#000, #000);
  fill: #060c0e;
  stroke: none;
  filter: drop-shadow(inset 0 0 20px #000);
}

.dial__bezel { fill: none; stroke: url(#pipeSkin); stroke-width: 5; opacity: 0.55; }
.dial__ticks line { stroke: rgba(190, 214, 208, 0.35); stroke-width: 1.4; }
.dial__ticks line.major { stroke: rgba(214, 236, 230, 0.7); stroke-width: 2.2; }
.dial__track { stroke: rgba(255, 255, 255, 0.06); stroke-width: 13; stroke-linecap: round; }
.dial__redline { stroke: rgba(255, 92, 61, 0.35); stroke-width: 13; stroke-linecap: round; }

.dial__arc {
  stroke: var(--accent, var(--water));
  stroke-width: 13;
  stroke-linecap: round;
  stroke-dasharray: var(--arc, 258);
  stroke-dashoffset: var(--arc, 258);
  filter: drop-shadow(0 0 9px var(--accent-glow, rgba(0, 224, 122, 0.6)));
  transition: stroke-dashoffset 1.5s var(--ease-fluid);
}

.dial.is-live .dial__arc { stroke-dashoffset: var(--dash-offset, 258); }

.dial__needle {
  transform-origin: 110px 128px;
  transform: rotate(-90deg);
  transition: transform 1.5s var(--ease-fluid);
}

.dial.is-live .dial__needle { transform: rotate(var(--needle, 0deg)); }
/* Once the sweep has landed, the live jitter takes over from JS. */
.dial.is-settled .dial__needle { transition: none; }
.dial__needle path { stroke: #f4dcb8; stroke-width: 3.4; stroke-linecap: round; }
.dial__needle .dial__tail { stroke: #8a6b47; stroke-width: 5; }
.dial__hub { fill: url(#pipeSkin); }
.dial__pin { fill: #2b1608; }

.dial__unit {
  fill: var(--faint);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
}

.dial__readout {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent, var(--water-bright));
  letter-spacing: -0.02em;
  text-shadow: 0 0 22px var(--accent-glow, rgba(0, 224, 122, 0.5));
}

.dial-card[data-bucket='buyback']   { --accent: var(--burn);      --accent-glow: rgba(255, 138, 91, 0.5); }
.dial-card[data-bucket='drip']      { --accent: var(--water);     --accent-glow: rgba(0, 224, 122, 0.55); }
.dial-card[data-bucket='liquidity'] { --accent: var(--liquidity); --accent-glow: rgba(75, 215, 255, 0.5); }
.dial-card[data-bucket='treasury']  { --accent: var(--build);     --accent-glow: rgba(233, 189, 139, 0.45); }
.dial-card[data-bucket='buyback']   .dial__readout { color: var(--burn); }
.dial-card[data-bucket='liquidity'] .dial__readout { color: var(--liquidity); }
.dial-card[data-bucket='treasury']  .dial__readout { color: var(--build); }

.dial-card__facts {
  list-style: none;
  padding: 1rem 0 0;
  margin-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 0.45rem;
}

.dial-card__facts li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.79rem; }
.dial-card__facts span { color: var(--muted); }
.dial-card__facts strong { color: var(--text); font-weight: 600; }

.console__seal {
  margin-top: clamp(1.3rem, 2.4vw, 2rem);
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.15rem 1.4rem;
  border: 1px solid rgba(0, 224, 122, 0.22);
  border-radius: var(--radius);
  background: var(--water-wash);
  font-size: 0.89rem;
  color: var(--text-soft);
  flex-wrap: wrap;
}

.console__seal strong { color: var(--water-bright); font-family: var(--font-mono); }

.console__sealIcon {
  width: 10px; height: 10px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--water);
  box-shadow: 0 0 0 4px rgba(0, 224, 122, 0.16);
  flex: none;
}

/* ── proof ───────────────────────────────────────────────────────────────── */

.proof {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

@media (max-width: 960px) { .proof { grid-template-columns: 1fr; } }

.proof__steps { list-style: none; padding: 0; display: grid; gap: 0.9rem; }

.proof__step {
  position: relative;
  padding: 1.2rem 1.35rem 1.2rem 3.8rem;
  border: var(--plate-edge);
  border-radius: var(--radius);
  background: var(--plate-bg);
  box-shadow: var(--plate-shadow);
  transition: border-color 0.3s var(--ease-out);
}

.proof__step:hover { border-color: var(--water-dim); }

.proof__step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.98rem; bottom: -0.95rem;
  width: 3px; height: 0.95rem;
  background: linear-gradient(180deg, var(--copper), transparent);
}

.proof__num {
  position: absolute;
  left: 1.15rem; top: 1.15rem;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--copper-pale), var(--copper) 45%, var(--copper-deep));
  color: #1a0e04;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.proof__step h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.proof__step p { font-size: 0.87rem; color: var(--text-soft); }

.proof__stack { display: grid; gap: 1rem; min-width: 0; }

/* ── the merkle tree ─────────────────────────────────────────────────────── */

.tree {
  margin: 0;
  border: var(--plate-edge);
  border-radius: var(--radius);
  background: var(--plate-bg);
  box-shadow: var(--plate-shadow);
  padding: 1rem 1.1rem 1.2rem;
}

.tree__cap { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.5rem; flex-wrap: wrap; }

.tree__capTitle {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper-lit);
}

.tree__capNote { font-size: 0.78rem; color: var(--muted); }
.tree__capNote b { color: var(--water-bright); font-family: var(--font-mono); }
.tree svg { width: 100%; height: auto; overflow: visible; }

.tree__edges line {
  stroke: #1e2c2a;
  stroke-width: 2;
  transition: stroke 0.4s var(--ease-out), stroke-width 0.4s var(--ease-out);
}

.tree__edges line.on { stroke: var(--water); stroke-width: 3.4; filter: drop-shadow(0 0 6px rgba(0, 224, 122, 0.75)); }

.tree__nodes rect,
.tree__nodes circle {
  fill: #0b1416;
  stroke: #22322f;
  stroke-width: 1.6;
  transition: fill 0.4s var(--ease-out), stroke 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}

.tree__nodes .on   { fill: rgba(0, 224, 122, 0.2);  stroke: var(--water); filter: drop-shadow(0 0 8px rgba(0, 224, 122, 0.6)); }
.tree__nodes .sib  { fill: rgba(233, 189, 139, 0.16); stroke: var(--copper-lit); }
.tree__nodes .root { stroke-width: 2.4; }
.tree__label { fill: var(--faint); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; }
.tree__label.on { fill: var(--water-bright); }
.tree__label.sib { fill: var(--copper-lit); }

.proof__notes {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1rem;
}

.note {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--copper);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(90deg, rgba(184, 115, 51, 0.06), rgba(10, 18, 20, 0.6) 30%);
  transition: border-left-color 0.3s var(--ease-out);
}

.note:hover { border-left-color: var(--water); }
.note h4 { font-size: 0.92rem; margin-bottom: 0.4rem; color: var(--copper-pale); }
.note p { font-size: 0.83rem; color: var(--muted); }

/* ── phones ──────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__fixture { order: -1; }
}

@media (max-width: 620px) {
  /* The fixture must not eat the whole first screen — the headline is the
     thing that has to be visible without scrolling. */
  .hero { padding-top: 1rem; }
  .hero__inner { gap: 0.9rem; }
  .scene { max-width: 340px; aspect-ratio: 4 / 5.9; }
  .scene__plaque { transform: scale(0.8) rotate(-0.6deg); transform-origin: top left; }
  .fixture__panel { padding: 0.4rem 0.7rem; font-size: 0.66rem; gap: 0.45rem; }
  .fixture__hint { display: none; }
  .section { padding-block: clamp(3rem, 11vw, 4.5rem); }
  .dial svg { max-width: 190px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   clean pass — flat surfaces, no glow, no chrome
   ═══════════════════════════════════════════════════════════════════════════ */

.hero { padding-top: clamp(2rem, 5vw, 4rem); }
.hero__title { font-size: clamp(2.3rem, 1.2rem + 4vw, 4.2rem); letter-spacing: -0.035em; line-height: 1.02; }
.hero__title .ink { font-size: 1.1em; }
.hero__lede { max-width: 58ch; }
.hero__docs { color: var(--muted); }

.scene {
  max-width: 480px;
  aspect-ratio: 4 / 5.4;
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: var(--radius-xl);
}
.scene__wall {
  background-color: #111716;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 2px, transparent 2px),
    radial-gradient(at 22% 18%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(180deg, #151c1b 0%, #111716 55%, #0d1211 100%);
  background-size: 100% 68px, 68px 100%, 68px 68px, 100% 100%;
}
.scene__spot { background: radial-gradient(70% 55% at 44% -6%, rgba(255, 220, 180, 0.14), transparent 68%), linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45) 100%); }
.scene__glow { background: radial-gradient(60% 60% at 50% 70%, rgba(25, 195, 125, 0.22), transparent 70%); opacity: calc(0.3 + var(--flow, 0.72) * 0.5); }
.scene__floor { background: radial-gradient(38% 90% at 63% 0%, rgba(25, 195, 125, 0.18), transparent 70%), linear-gradient(180deg, rgba(12, 14, 14, 0.2) 0%, rgba(10, 12, 12, 0.96) 40%, transparent 100%); border-top-color: rgba(255, 255, 255, 0.05); }
.scene__floor::after { display: none; }
.scene__plaque { transform: none; box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.4); }
.scene__stage { inset: 7% 5% 21% 5%; }
.faucet { animation: none; }
.fixture__panel { background: rgba(12, 14, 14, 0.85); border-color: var(--line); box-shadow: none; backdrop-filter: none; }
.fixture__value { color: var(--water-bright); }
.fixture__panel--total { border-color: var(--line); }
.fx-halo { display: none; }

/* diagram */
.loop { grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); }
.loop__frame { border: 1px solid var(--line); background: var(--panel); box-shadow: none; }
.loop__stage { margin-left: 0; overflow: visible; }
.flow { min-width: 760px; }
.flow__water { filter: none; }
.flow__stream { stroke: var(--water); opacity: 0.85; stroke-dasharray: 28 30; }
.flow__stream--burn { stroke: var(--burn); }
.flow__title { fill: var(--text); font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.flow__sub { fill: var(--muted); font-family: var(--font-display); font-size: 13.5px; }
.flow__pct { fill: var(--water-bright); font-family: var(--font-mono); font-size: 26px; font-weight: 700; }
.flow__nodeTitle { fill: var(--text); font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; }
.flow__addr { fill: var(--burn); font-family: var(--font-mono); font-size: 18px; font-weight: 700; }
.flow__node--burn .flow__nodeTitle { fill: var(--burn); }

.loop__panel { border: 1px solid var(--line); background: var(--panel); box-shadow: none; }
.panel__title { color: var(--text); font-family: var(--font-display); font-size: 0.95rem; letter-spacing: -0.01em; text-transform: none; font-weight: 600; }
.slider__value { text-shadow: none; color: var(--text); font-size: 1.5rem; }
.slider input[type='range'] { box-shadow: none; background: linear-gradient(90deg, var(--water) var(--pct, 10%), rgba(255, 255, 255, 0.08) var(--pct, 10%)); }
.slider input[type='range']::-webkit-slider-thumb { background: var(--text); border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); width: 20px; height: 20px; }
.slider input[type='range']::-moz-range-thumb { background: var(--text); border: 0; width: 18px; height: 18px; }
.loop__outputs li { grid-template-columns: 1fr auto; background: rgba(255, 255, 255, 0.02); border-color: var(--line-soft); }
.loop__outputs li:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--line); }
.loop__outputs .k { color: var(--text-soft); }
.loop__outputs .v { color: var(--text); }
.loop__checksum { font-size: 0.8rem; }
.loop__checksumOk { background: var(--water); box-shadow: none; }
.loop__checksumOk--idle { background: var(--muted); }

/* policy */
.policy { display: grid; gap: 1rem; }
.policy__rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.2rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
@media (max-width: 700px) { .policy__rule { grid-template-columns: 1fr; } }
.policy__pct { font-family: var(--font-mono); font-size: clamp(2.6rem, 2rem + 3vw, 4.4rem); font-weight: 700; color: var(--water-bright); letter-spacing: -0.04em; line-height: 1; }
.policy__rule h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.policy__rule p { font-size: 0.94rem; color: var(--text-soft); }
.policy__meta { margin-top: 0.6rem; font-size: 0.8rem !important; color: var(--muted) !important; }

.constants__grid { border: 1px solid var(--line); background: var(--panel); box-shadow: none; }
.constants__grid dd { font-family: var(--font-display); font-weight: 500; }
.constants__grid dd span { display: inline; font: inherit; color: inherit; margin: 0; }
.constants__grid dd small { display: block; font-size: 0.78rem; font-weight: 400; color: var(--faint); margin-top: 0.15rem; }

.notes-grid--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1rem; }
@media (max-width: 900px) { .notes-grid--row { grid-template-columns: 1fr; } }
.note { border: 1px solid var(--line); border-left: 2px solid var(--water); background: var(--panel); }
.note:hover { border-left-color: var(--water); }
.note h4 { color: var(--text); }

@media (max-width: 620px) {
  .scene { max-width: 320px; aspect-ratio: 4 / 6.1; }
  .scene__stage { inset: 6% 5% 27% 5%; }
  .scene__readouts { bottom: 2.5%; flex-direction: column; align-items: center; gap: 0.35rem; }
}

/* The single-row diagram wants the whole width; the calculator sits under it. */
.loop { grid-template-columns: 1fr; }
.loop__stage { overflow-x: auto; }
.flow { min-width: 640px; }
.loop__panel {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.5rem 2.5rem;
  align-items: start;
}
.loop__panel .panel__head, .loop__panel .panel__text { grid-column: 1; }
.loop__panel .slider { grid-column: 1; margin-bottom: 0; }
.loop__panel .loop__outputs { grid-column: 2; grid-row: 1 / span 3; }
.loop__panel .loop__checksum { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 800px) {
  .loop__panel { grid-template-columns: 1fr; }
  .loop__panel .loop__outputs { grid-column: 1; grid-row: auto; }
}

/* quieter pass: the fixture on a plain dark panel, no nameplate, no tiles */
.scene { max-width: 460px; aspect-ratio: 4 / 5.2; background: linear-gradient(180deg, #141818 0%, #101414 60%, #0e1111 100%); }
.scene__wall { background: none; }
.scene__spot { background: radial-gradient(70% 50% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%); }
.scene__glow { background: radial-gradient(60% 60% at 50% 70%, rgba(25, 195, 125, 0.16), transparent 70%); }
.scene__plaque { display: none; }
.scene__floor { background: linear-gradient(180deg, transparent 0%, rgba(12, 14, 14, 0.9) 60%, transparent 100%); border-top: 0; }
.scene__stage { inset: 6% 6% 20% 6%; }
.fixture__panel { font-family: var(--font-display); font-size: 0.8rem; }
.fixture__label { font-family: var(--font-display); letter-spacing: 0; text-transform: none; font-size: 0.78rem; }
.fixture__hint { font-size: 0.74rem; }
.flow__nodeTitle { font-family: var(--font-display); letter-spacing: 0.02em; font-size: 14px; }
.flow__title { font-weight: 600; }
.loop__panel .slider__label { font-family: var(--font-display); letter-spacing: 0; text-transform: none; font-size: 0.82rem; }
.policy__pct { font-family: var(--font-display); letter-spacing: -0.04em; }
.policy__meta code { font-size: 0.78rem; }
.hero__title { font-weight: 600; }
@media (max-width: 620px) { .scene { max-width: 300px; aspect-ratio: 4 / 5.9; } }
.eyebrow { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0; color: var(--muted); }
.eyebrow__tag { color: var(--text); font-weight: 600; }
.eyebrow__sha { font-family: var(--font-mono); color: var(--muted); font-size: 0.78rem; }