/* ============================================================================
   MILLVATO — landing page styles.
   Builds ON theme.css: uses its tokens, .wrap/.panel/.card/.btn/.eyebrow/.num
   primitives. Adds page layout, the four animated flow clips, the device
   frames, the dashboard monitor and all reveal/motion states.
   Dark only. No new palette — every colour is a var() from theme.css.
   ============================================================================ */

/* ---------------------------------------------------------------- sections */
section { position: relative; z-index: 1; }
.section { padding: 120px 0; }
.section--tight { padding: 84px 0; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head .eyebrow { display: inline-block; margin-bottom: 16px; }
.section-title {
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.04;
  margin: 0;
}
.section-sub { color: var(--muted); font-size: clamp(16px, 2vw, 19px); margin-top: 16px; }

/* feature point grid (invoicing, quality) */
.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.feature-pt {
  padding: 24px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--card);
}
.feature-pt .eyebrow { display: block; margin-bottom: 12px; }
.feature-pt p { color: var(--text-2); font-size: 15px; line-height: 1.55; margin: 0; }
@media (max-width: 820px) { .feature-row { grid-template-columns: 1fr; gap: 16px; } }

/* ============================================= MONOGRAM DRAW-IN === */
/* The grain-flow "M" draws itself on load, then the amber grain dots rise in,
   like grain settling into the mark. One-time, on-brand, reduced-motion safe. */
@media (prefers-reduced-motion: no-preference) {
  .brand .mark svg path {
    stroke-dasharray: 100; stroke-dashoffset: 100;
    animation: monoDraw 1.1s var(--ease-out) .15s forwards;
  }
  .brand .mark svg circle {
    transform-box: fill-box; transform-origin: center;
    opacity: 0; animation: monoDot .5s var(--ease-out) forwards;
  }
  .brand .mark svg circle:nth-of-type(1) { animation-delay: .85s; }
  .brand .mark svg circle:nth-of-type(2) { animation-delay: 1s; }
  .brand .mark svg circle:nth-of-type(3) { animation-delay: 1.15s; }
}
@keyframes monoDraw { to { stroke-dashoffset: 0; } }
@keyframes monoDot {
  from { opacity: 0; transform: translateY(3px) scale(.6); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================================================ FOOTER LINKS === */
.footer-links { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: 14px; }
.footer-links a:hover { color: var(--text); }

/* ================================================ CONTACT MODAL === */
.cf-modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(8,11,9,0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cf-modal.is-open { display: flex; }
.cf-card {
  position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--hair-2); border-radius: 18px; padding: 28px;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,0.8);
}
.cf-x {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 9px;
  background: transparent; border: 1px solid var(--hair); color: var(--muted);
}
.cf-x svg { width: 18px; height: 18px; }
.cf-x:hover { color: var(--text); border-color: var(--hair-2); }
.cf-title { font-family: var(--display); font-size: 26px; margin: 0 0 8px; }
.cf-lead { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 20px; }
.cf-label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin: 14px 0 6px;
}
.cf-input {
  width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--hair);
  border-radius: 12px; padding: 13px 14px; color: var(--text); font-family: var(--body); font-size: 16px;
}
.cf-input:focus { outline: none; border-color: var(--green); }
.cf-msg-wrap { position: relative; }
.cf-textarea { resize: vertical; min-height: 110px; padding-right: 58px; }
.cf-mic {
  position: absolute; top: 10px; right: 10px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--card-2); border: 1px solid var(--hair); color: var(--muted);
}
.cf-mic svg { width: 18px; height: 18px; }
.cf-mic:hover { color: var(--text); }
.cf-mic.is-on { color: var(--green); border-color: var(--green); animation: cfMic 1.4s ease-in-out infinite; }
@keyframes cfMic { 0%,100% { box-shadow: 0 0 0 3px rgba(0,224,138,0.16); } 50% { box-shadow: 0 0 0 6px rgba(0,224,138,0.04); } }
.cf-status { min-height: 18px; font-size: 13px; margin: 14px 0 0; color: var(--muted); }
.cf-status--ok { color: var(--green); }
.cf-status--err { color: var(--red); }
.cf-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .cf-mic.is-on { animation: none; } }

/* ============================================================ REVEAL STATE */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px) scale(.985);
  filter: blur(2px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}
/* No persistent will-change: leaving will-change:filter on dozens of revealed
   elements builds GPU layers that never release and makes the hero fail to
   repaint when you scroll back to the top (it goes blank). The transition
   still runs fine without the hint. */
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ================================================================== NAV === */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 72px;
  display: flex; align-items: center;
  transition: background .45s var(--ease), backdrop-filter .45s var(--ease),
              border-color .45s var(--ease), height .45s var(--ease),
              box-shadow .45s var(--ease);
  border-bottom: 1px solid transparent;
}
#nav.is-scrolled {
  height: 64px;
  background: rgba(11, 15, 13, 0.74);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
          backdrop-filter: saturate(150%) blur(18px);
  border-bottom-color: var(--hair);
  box-shadow: 0 14px 40px -28px rgba(0,0,0,0.9), 0 0 50px -38px var(--green-glow);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand .mark { width: 30px; height: 30px; }
.brand .mark svg { width: 100%; height: 100%; }
.brand .word {
  font-family: var(--display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.01em; color: var(--text);
}
.brand .live-dot { margin-left: 2px; }
.nav-cta { display: inline-flex; align-items: center; gap: 14px; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); font-size: 15px; font-weight: 500;
  transition: color .25s var(--ease);
}
.nav-link:hover { color: var(--text); }
#nav .btn { height: 48px; padding: 0 22px; font-size: 15px; }
@media (max-width: 680px) { .nav-link { display: none; } }

/* ================================================================= HERO === */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 72px;
  overflow: hidden;
}
#grain-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* vignette so foreground text stays legible over the particle field */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 18%, transparent 30%, rgba(11,15,13,0.55) 78%, var(--bg) 100%),
    linear-gradient(180deg, rgba(11,15,13,0.30) 0%, transparent 26%, transparent 70%, var(--bg) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; text-align: center; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 26px;
}
#hero-title {
  font-size: clamp(40px, 8.2vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 16ch;
}
/* kinetic word reveal — the hidden start state only applies when JS is present
   (html.has-js), so without JS the headline renders normally and visibly. */
.hero-word { display: inline-block; overflow: hidden; vertical-align: top; }
html.has-js .hero-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s var(--ease-out);
  transition-delay: inherit;
}
#hero-title.is-in .hero-word > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-word { overflow: visible; }
  .hero-word > span { transform: none !important; }
}
.hero-sub {
  color: var(--text-2);
  font-size: clamp(17px, 2.4vw, 22px);
  max-width: 38ch;
  margin: 26px auto 0;
}
.hero-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: 38px;
}
.hero-stat {
  margin-top: 56px;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: rgba(0,224,138,0.04);
}
.hero-stat .live-dot { flex: none; }
.hero-note {
  margin: 48px auto 0;
  max-width: 48ch;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.55;
}
.hero-stat .num { font-size: 26px; font-weight: 600; color: var(--text); }
.hero-stat .lbl { color: var(--muted); font-size: 14px; letter-spacing: 0.02em; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2; color: var(--muted); display: flex; flex-direction: column;
  align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.hero-scroll svg { width: 18px; height: 18px; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ========================================================= FLOW RIBBON === */
.flow { padding: 110px 0 130px; }
.flow-rail { position: relative; }
/* the spine line connecting the four clips — a dim base rail... */
.flow-rail::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--hair-2) 8%, var(--hair-2) 92%, transparent);
}
/* ...with a green "current" that fills downward as clips play, drawing the line
   that connects each node. Its height tracks --spine-fill set by scenes.js. */
.flow-rail::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 2px;
  transform: translateX(-50%);
  height: var(--spine-fill, 0%);
  background: linear-gradient(180deg, rgba(0,224,138,0) 0%, var(--green) 14%, var(--green-2) 100%);
  box-shadow: 0 0 14px -1px var(--green-glow);
  transition: height 1.1s var(--ease-out);
  pointer-events: none;
}
@media (max-width: 900px) {
  .flow-rail::before { left: 26px; }
  .flow-rail::after  { left: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-rail::after { transition: none; height: 100%; }
}

.clip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 0;
}
.clip:nth-child(even) .clip-copy { order: 2; }
.clip:nth-child(even) .clip-stage { order: 1; }
@media (max-width: 900px) {
  .clip { grid-template-columns: 1fr; gap: 24px; padding-left: 64px; }
  .clip:nth-child(even) .clip-copy,
  .clip:nth-child(even) .clip-stage { order: initial; }
}

/* the numbered node sitting on the spine */
.clip-node {
  position: absolute; left: 50%; top: 56px; transform: translate(-50%, 0);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,224,138,0) 60%, transparent),
    var(--card);
  border: 1px solid var(--hair-2);
  font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--muted);
  z-index: 3; overflow: hidden;
  transition: color .55s var(--ease), border-color .55s var(--ease),
              box-shadow .55s var(--ease), background .55s var(--ease);
}
/* a green "fill" sweeps up from the bottom of the node as its clip plays */
.clip-node::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 100% at 50% 100%, rgba(0,224,138,0.30), transparent 70%);
  transform: translateY(100%);
  transition: transform .7s var(--ease-out);
}
.clip.is-playing .clip-node {
  color: var(--green); border-color: rgba(0,224,138,0.6);
  box-shadow: 0 0 0 5px rgba(0,224,138,0.10), 0 0 32px -2px var(--green-glow);
}
.clip.is-playing .clip-node::before { transform: translateY(0); }
.clip.is-playing .clip-node { animation: nodePulse 2.6s var(--ease) infinite; }
@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(0,224,138,0.10), 0 0 26px -4px var(--green-glow); }
  50%      { box-shadow: 0 0 0 7px rgba(0,224,138,0.05), 0 0 40px -2px var(--green-glow); }
}
@media (max-width: 900px) { .clip-node { left: 26px; top: 56px; } }
@media (prefers-reduced-motion: reduce) {
  .clip-node::before { transform: none; }
  .clip.is-playing .clip-node { animation: none; }
}

.clip-copy .eyebrow { margin-bottom: 14px; }
.clip-copy .step { color: var(--muted-2); }
.clip-title { font-size: clamp(24px, 3vw, 34px); margin: 0 0 12px; }
.clip-cap { color: var(--text-2); font-size: clamp(16px, 2vw, 19px); max-width: 30ch; }
/* all clip captions stay left-aligned for a calm, even rhythm — the stage still
   swaps sides on even rows via the grid order, but the copy never goes ragged. */

/* the animated stage panel */
.clip-stage {
  position: relative;
  height: 320px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(130% 110% at 0% 0%, rgba(0,224,138,0.06), transparent 52%),
    radial-gradient(120% 120% at 100% 100%, rgba(255,178,62,0.045), transparent 55%),
    linear-gradient(180deg, var(--card-2), var(--card) 60%);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(236,239,233,0.04);
  overflow: hidden;
  /* subtle scroll parallax: scenes.js feeds --par (-1..1); we lift the stage a
     few px so it drifts gently against the page as it scrolls through view. */
  transform: translateY(calc(var(--par, 0) * 14px));
  transition: box-shadow .5s var(--ease);
  will-change: transform;
}
.clip.is-playing .clip-stage {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(236,239,233,0.05),
              0 0 50px -22px var(--green-glow);
}
@media (prefers-reduced-motion: reduce) { .clip-stage { transform: none; } }
.clip-stage::before { /* faint floor grid inside the stage */
  content: ""; position: absolute; inset: 0; opacity: .6;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
          mask-image: linear-gradient(180deg, transparent, #000 40%);
}
.stage-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* tiny readout chips used inside several clips */
.readout {
  position: absolute;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  background: rgba(10,13,11,0.82); border: 1px solid var(--hair-2);
  border-radius: 10px; padding: 8px 12px; backdrop-filter: blur(4px);
  display: flex; flex-direction: column; gap: 2px; z-index: 4;
}
.readout .rk { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.readout .rv { font-size: 18px; font-weight: 600; color: var(--text); }

/* a ledger line that "writes itself" */
.ledger {
  position: absolute; left: 18px; bottom: 18px; right: 18px; z-index: 4;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px;
  background: rgba(0,224,138,0.06); border: 1px solid rgba(0,224,138,0.22);
  font-family: var(--mono); font-size: 13px; color: var(--text-2);
  opacity: 0; transform: translateY(8px);
}
.clip.is-playing .ledger { animation: ledgerIn .7s var(--ease-out) 2.3s forwards; }
.clip.is-static .ledger { opacity: 1; transform: none; }
.ledger .led-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
@keyframes ledgerIn { to { opacity: 1; transform: none; } }

/* ---- CLIP 1 · RECEIVE — lorry eases in & settles + weighbridge presses ---- */
.lorry { transform: translateX(-44%); opacity: 0; }
.clip.is-playing .lorry { animation: lorryIn 1.7s var(--ease-out) .2s forwards; }
.clip.is-static .lorry { transform: none; opacity: 1; }
/* a touch of overshoot then settle, so the lorry feels weighty as it parks */
@keyframes lorryIn {
  0%   { transform: translateX(-46%); opacity: 0; }
  55%  { opacity: 1; }
  78%  { transform: translateX(2.5%); }
  90%  { transform: translateX(-1%); }
  100% { transform: translateX(0); opacity: 1; }
}
.weigh-pad { transform-origin: center bottom; }
.clip.is-playing .weigh-pad { animation: weighPress 1.4s var(--ease) 1.7s; }
@keyframes weighPress { 0%,100% { transform: scaleY(1); } 30% { transform: scaleY(.92); } 60% { transform: scaleY(1.01); } }
/* weighbridge confirmation glow blooms once the lorry has settled */
.pad-glow { opacity: 0; transform-box: fill-box; transform-origin: center; }
.clip.is-playing .pad-glow { animation: padBloom 1.8s var(--ease-out) 1.9s forwards; }
.clip.is-static .pad-glow { opacity: 1; }
@keyframes padBloom { 0% { opacity: 0; transform: scale(.7); } 40% { opacity: 1; transform: scale(1.06); } 100% { opacity: .85; transform: scale(1); } }

/* ---- CLIP 2 · MILL — grain pours, grade bars stagger, yield ring fills ---- */
.grade-bar { transform-origin: left center; transform: scaleX(0); }
.grade-bar.g1 { background: linear-gradient(90deg, var(--green), var(--green-2)); }
.grade-bar.g2 { background: linear-gradient(90deg, var(--amber), var(--amber-2)); }
.grade-bar.g3 { background: linear-gradient(90deg, var(--blue), var(--violet)); }
.clip.is-playing .grade-bar { animation: gradeGrow 1.5s var(--ease-out) forwards; }
.clip.is-static .grade-bar { transform: scaleX(1); }
.clip.is-playing .grade-bar.g1 { animation-delay: .55s; }
.clip.is-playing .grade-bar.g2 { animation-delay: .85s; }
.clip.is-playing .grade-bar.g3 { animation-delay: 1.15s; }
@keyframes gradeGrow { 0% { transform: scaleX(0); } 80% { transform: scaleX(1.02); } 100% { transform: scaleX(1); } }
.yield-ring { stroke-dasharray: 264; stroke-dashoffset: 264; transform: rotate(-90deg); transform-origin: center; }
.clip.is-playing .yield-ring { animation: ringFill 1.9s var(--ease-out) .7s forwards; }
.clip.is-static .yield-ring { stroke-dashoffset: 90; }
@keyframes ringFill { to { stroke-dashoffset: 90; } } /* ~66% of 264 */
.gauge-glow { opacity: 0; transform-box: fill-box; transform-origin: center; }
.clip.is-playing .gauge-glow { animation: gaugeGlow 2.6s var(--ease) 1.4s infinite; }
.clip.is-static .gauge-glow { opacity: .7; }
@keyframes gaugeGlow { 0%,100% { opacity: .35; transform: scale(.96); } 50% { opacity: .8; transform: scale(1.04); } }
/* each grain fleck streams down into the hopper on its own offset */
.mill-grain .mg { opacity: 0; }
.clip.is-playing .mill-grain .mg { animation: millStream 1.6s linear infinite; }
.clip.is-playing .mg1 { animation-delay: 0s; }
.clip.is-playing .mg2 { animation-delay: .3s; }
.clip.is-playing .mg3 { animation-delay: .6s; }
.clip.is-playing .mg4 { animation-delay: .9s; }
.clip.is-playing .mg5 { animation-delay: 1.2s; }
@keyframes millStream { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(36px); } }

/* ---- CLIP 3 · PACK — grain pours, bag fills with a squash, bags pop up ---- */
.bag { opacity: 0; transform: translateY(8px) scale(.8); transform-origin: bottom center; }
.clip.is-playing .bag { animation: bagPop .55s var(--ease-out) forwards; }
.clip.is-static .bag { opacity: 1; transform: none; }
.clip.is-playing .bag.b1 { animation-delay: .6s; }
.clip.is-playing .bag.b2 { animation-delay: 1.0s; }
.clip.is-playing .bag.b3 { animation-delay: 1.4s; }
.clip.is-playing .bag.b4 { animation-delay: 1.8s; }
.clip.is-playing .bag.b5 { animation-delay: 2.2s; }
/* a subtle squash/scale as the bag lands, so it feels filled, not just shown */
@keyframes bagPop { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 60% { opacity: 1; transform: translateY(-2px) scaleY(1.06) scaleX(.96); } 100% { opacity: 1; transform: none; } }
.fill-level { transform-origin: bottom; transform: scaleY(0); }
.clip.is-playing .fill-level { animation: fillUp 1.3s var(--ease-out) .3s forwards; }
.clip.is-static .fill-level { transform: scaleY(1); }
@keyframes fillUp { 0% { transform: scaleY(0); } 88% { transform: scaleY(1.03); } 100% { transform: scaleY(1); } }
.pack-stream .ps { opacity: 0; }
.clip.is-playing .pack-stream .ps { animation: packStream 1.1s linear infinite; }
.clip.is-playing .pack-stream .ps2 { animation-delay: .35s; }
.clip.is-playing .pack-stream .ps3 { animation-delay: .7s; }
@keyframes packStream { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(34px); } }

/* ---- CLIP 4 · DELIVER — load + gate pass slides out + lorry departs ---- */
.depart { transform: translateX(0); }
.clip.is-playing .depart { animation: departOut 2.1s var(--ease) 2.4s forwards; }
@keyframes departOut { 0% { transform: translateX(0); } 100% { transform: translateX(48%); opacity: .12; } }
.trail { opacity: 0; transform-box: fill-box; transform-origin: center; }
.clip.is-playing .trail { animation: trailPuff 2.1s var(--ease) 2.4s forwards; }
@keyframes trailPuff { 0% { opacity: 0; transform: scale(.5); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4) translateX(-30px); } }
.gatepass {
  position: absolute; right: 18px; top: 22px; width: 168px; z-index: 5;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,178,62,0.10), transparent 60%),
    var(--card-2);
  border: 1px solid var(--hair-2); border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow-lg), 0 0 30px -10px var(--amber-glow);
  transform: translateX(120%) translateY(-6px); opacity: 0;
}
.clip.is-playing .gatepass { animation: passOut 1s var(--ease-out) 1.6s forwards; }
.clip.is-static .gatepass { transform: none; opacity: 1; }
/* slides in from the right with a slight settle, casting a real shadow */
@keyframes passOut {
  0%   { transform: translateX(120%) translateY(-6px); opacity: 0; }
  60%  { opacity: 1; }
  78%  { transform: translateX(-4%) translateY(0); }
  100% { transform: none; opacity: 1; }
}
.gatepass .gp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.gatepass .gp-sl { font-family: var(--mono); font-size: 12px; color: var(--green); }
.gatepass .gp-party { font-weight: 600; font-size: 14px; }
.gatepass .gp-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .clip * { animation: none !important; }
}

/* ============================================================ ONE TRUTH === */
.truth-grid {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(20px, 5vw, 70px);
  flex-wrap: wrap;
}
/* faint connective line running behind the three screens — it sells "the same
   number flows to every screen". Draws itself once the section is in view. */
.truth-grid::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 46%; height: 2px;
  z-index: 0; transform: scaleX(0); transform-origin: center;
  background: linear-gradient(90deg,
    rgba(0,224,138,0) 0%, var(--green) 18%, var(--blue) 50%, var(--green) 82%, rgba(0,224,138,0) 100%);
  box-shadow: 0 0 16px -2px var(--green-glow);
  opacity: 0;
  transition: transform 1.1s var(--ease-out) .15s, opacity .6s var(--ease) .15s;
}
.truth-grid.is-linked::before { transform: scaleX(1); opacity: .55; }
@media (max-width: 760px) { .truth-grid::before { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .truth-grid::before { transition: none; transform: scaleX(1); opacity: .5; }
}
.device { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.device .dev-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.screen {
  position: relative; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0,224,138,0.06), transparent 55%),
    var(--panel);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px;
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease);
}
/* the synced flash all three screens share the instant the number lands */
.device.is-landed .screen {
  border-color: rgba(0,224,138,0.5);
  box-shadow: var(--shadow), 0 0 36px -8px var(--green-glow);
  animation: screenLand .9s var(--ease-out);
}
@keyframes screenLand {
  0%   { box-shadow: var(--shadow), 0 0 0 0 var(--green-glow); }
  35%  { box-shadow: var(--shadow), 0 0 50px -4px var(--green-glow); }
  100% { box-shadow: var(--shadow), 0 0 36px -8px var(--green-glow); }
}
@media (prefers-reduced-motion: reduce) {
  .device.is-landed .screen { animation: none; }
}
.screen .sc-cap { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
.screen .sc-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--green); line-height: 1; }
.screen .sc-unit { font-size: 11px; color: var(--muted); margin-top: 6px; }
/* phone */
.device.phone .screen { width: 132px; height: 268px; border-radius: 26px; padding: 22px 14px; }
.device.phone .sc-num { font-size: 34px; }
.device.phone .screen::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 42px; height: 5px; border-radius: 3px; background: var(--hair-2); }
/* tablet */
.device.tablet .screen { width: 230px; height: 300px; border-radius: 20px; }
.device.tablet .sc-num { font-size: 52px; }
/* wall screen */
.device.wall .screen { width: clamp(280px, 40vw, 420px); height: 250px; border-radius: 14px; }
.device.wall .sc-num { font-size: clamp(60px, 8vw, 92px); }
.device.wall .screen::after {
  content: ""; position: absolute; bottom: -14px; left: 20%; right: 20%; height: 14px;
  background: linear-gradient(180deg, var(--card), transparent); border-radius: 0 0 6px 6px;
}
.truth-cap { text-align: center; color: var(--muted); margin-top: 48px; font-size: 17px; }
.truth-cap strong { color: var(--text); font-weight: 600; }

/* ====================================================== LIVE DASHBOARD === */
.dash-wrap { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.dash-copy { max-width: 640px; margin: 0 auto; text-align: center; }
.dash-copy .section-title { margin-bottom: 16px; }
.monitor {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1080px;
  border-radius: 22px;
  padding: 16px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,224,138,0.05), transparent 60%),
    linear-gradient(180deg, #101713, #0a0d0b);
  border: 1px solid var(--hair-2);
  box-shadow:
    var(--shadow-lg),
    0 0 90px -28px var(--green-glow);
}
.monitor::before { /* bezel sheen + a slow "live" shimmer that travels across it */
  content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(236,239,233,0.07);
  background: linear-gradient(115deg,
    transparent 30%, rgba(0,224,138,0.05) 46%, rgba(236,239,233,0.06) 50%,
    rgba(0,224,138,0.05) 54%, transparent 70%);
  background-size: 280% 100%;
  background-position: 120% 0;
  animation: bezelShimmer 7s var(--ease) infinite;
}
@keyframes bezelShimmer {
  0%, 12%  { background-position: 130% 0; }
  60%, 100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .monitor::before { animation: none; background: none; box-shadow: inset 0 1px 0 rgba(236,239,233,0.07); }
}
.monitor-bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; }
.monitor-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hair-2); }
.monitor-bar .dot.live { background: var(--green); box-shadow: 0 0 8px var(--green-glow); }
.monitor-bar .mb-title { margin-left: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.monitor-screen {
  position: relative;
  border-radius: 12px; overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--hair);
  /* Show the header, heartbeat, alerts and Today's tempo, then stop. The
     preview is deliberately not scrollable (iframe pointer-events:none) and
     fades out at the bottom so it doesn't reveal the whole internal screen. */
  aspect-ratio: 16 / 11;
  box-shadow: inset 0 0 60px -20px var(--green-glow);
}
.monitor-screen iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none; /* non-interactive preview — no scrolling into internals */
}
/* a subtle screen glass reflection + edge vignette over the iframe (non-interactive) */
.monitor-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(118deg, rgba(236,239,233,0.07) 0%, rgba(236,239,233,0.015) 22%, transparent 34%),
    linear-gradient(180deg, transparent 60%, rgba(11,15,13,0.6) 85%, var(--bg) 100%),
    radial-gradient(140% 120% at 50% 0%, transparent 60%, rgba(0,0,0,0.28) 100%);
}
.monitor-foot { margin-top: 22px; text-align: center; }

/* =============================================================== TRUST === */
.trust { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.trust-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 760px) { .trust-row { grid-template-columns: repeat(2, 1fr); } }
.trust-item {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 18px;
  border-radius: var(--r);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  border: 1px solid transparent;
}
.trust-item:hover { background: var(--card); border-color: var(--hair); transform: translateY(-3px); }
.trust-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(0,224,138,0.08); border: 1px solid rgba(0,224,138,0.2);
}
.trust-ico svg { width: 22px; height: 22px; color: var(--green); }
.trust-item.amber .trust-ico { background: rgba(255,178,62,0.08); border-color: rgba(255,178,62,0.2); }
.trust-item.amber .trust-ico svg { color: var(--amber); }
.trust-label { font-weight: 600; font-size: 16px; line-height: 1.2; }

/* ============================================================== CLOSING === */
.closing { text-align: center; padding: 150px 0; }
.closing-title { font-size: clamp(36px, 6.6vw, 76px); line-height: 1.0; letter-spacing: -0.025em; max-width: 18ch; margin: 0 auto 36px; }
.closing-glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 600px; height: 600px; max-width: 90vw; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, var(--green-glow), transparent 62%);
  opacity: .28; filter: blur(20px);
}

/* =============================================================== FOOTER === */
.footer { border-top: 1px solid var(--hair); padding: 40px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer .brand .mark { width: 26px; height: 26px; }
.footer .brand .word { font-size: 19px; }
.footer-meta { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: 14px; }
.footer-meta a:hover { color: var(--text); }
.footer-mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; }

/* generic icon button hover bump for cards already styled by theme.css */
.card.lift { transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.card.lift:hover { transform: translateY(-4px); border-color: var(--hair-2); background: var(--card-2); }