/* ============================================================
   Webrivio — enhancement layer
   New components for the elevated build. Loads AFTER styles.css.
   Brand tokens only. Everything here is additive / progressive.
   ============================================================ */

/* ---------- Lenis smooth scroll (required hooks) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Atmosphere layers 2+3 (drafting grid + aurora wisps) ---------- */
/* layer 2: drafting grid — 1px lines every 72px, heavier every 360px.
   Extra top/bottom bleed gives the JS parallax drift headroom. */
.atm-grid {
  position: fixed;
  inset: -360px 0;
  z-index: -1;
  pointer-events: none;
  /* calmed down: a barely-there depth grid, not a blueprint overlay */
  background-image:
    repeating-linear-gradient(0deg,  rgba(123,164,255,0.018) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(123,164,255,0.018) 0 1px, transparent 1px 96px);
  will-change: transform;
}
/* layer 3: aurora wisps canvas (JS-initialized; sits under the grid) */
#atm-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
#atm-canvas.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #atm-canvas { display: none; }
}

/* ---------- Hero living field (WebGL canvas + CSS fallback) ----------
   Full-bleed: the hero itself is a max-width:1440 .container, but the field
   must cover the WHOLE viewport width (any screen size, incl. maximized 4K /
   ultrawide) — otherwise the aurora becomes a centred band with dark side
   bars. The content stays in the container; only this background breaks out. */
.hero-field {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Always-painted static fallback (also the low-power / reduced-motion image) */
.hero-field::before {
  content: '';
  position: absolute;
  inset: -15%;
  background:
    /* bright top-right glow */
    radial-gradient(50% 62% at 84% 20%, rgba(127,227,255,0.32), transparent 70%),
    radial-gradient(64% 72% at 97% 3%, rgba(30,63,153,0.52), transparent 76%),
    /* fill the left and centre (behind the headline) */
    radial-gradient(58% 66% at 15% 24%, rgba(77,126,255,0.26), transparent 72%),
    radial-gradient(56% 60% at 42% 58%, rgba(77,126,255,0.20), transparent 70%),
    /* fill the whole bottom band so it never reads flat/dark */
    radial-gradient(66% 60% at 12% 96%, rgba(77,126,255,0.24), transparent 72%),
    radial-gradient(70% 58% at 68% 100%, rgba(127,227,255,0.16), transparent 72%),
    radial-gradient(80% 60% at 95% 90%, rgba(30,63,153,0.30), transparent 74%),
    /* base tint so no corner is ever pure black */
    linear-gradient(150deg, rgba(30,63,153,0.34) 0%, rgba(14,27,51,0.14) 46%, rgba(30,63,153,0.24) 100%);
  filter: blur(46px);
  animation: fieldDrift 24s ease-in-out infinite;
}
@keyframes fieldDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-2.5%, 2%) scale(1.06); }
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
#hero-canvas.on { opacity: 1; }
/* readability scrim so the headline always reads over the field */
.hero-field::after {
  content: '';
  position: absolute;
  inset: 0;
  /* light readability scrim — keeps the headline crisp without flattening the
     aurora into a dark band */
  background:
    radial-gradient(70% 78% at 24% 52%, rgba(5,11,24,0.28), transparent 64%),
    linear-gradient(180deg, rgba(5,11,24,0.28) 0%, rgba(5,11,24,0.0) 38%, rgba(5,11,24,0.0) 76%, rgba(5,11,24,0.34) 100%);
  pointer-events: none;
}

/* ---------- Hero italic underline — the first hint of the signal line ---------- */
.sig-underline { position: relative; display: inline-block; }
.sig-underline .u {
  position: absolute;
  left: 0.02em; right: 0.06em;
  bottom: -0.02em;
  width: calc(100% - 0.08em);
  height: 0.1em;
  overflow: visible;
}
.sig-underline .u path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.1; /* viewBox units; scales with the word */
  stroke-linecap: round;
  opacity: 0.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* draws once, 500ms, after the word reveal completes (~+1.4s) */
  transition: stroke-dashoffset 0.6s var(--ease-out) 1.4s;
}
.reveal-mask.in .sig-underline .u path,
html:not(.js) .sig-underline .u path {
  stroke-dashoffset: 0;
}

/* ---------- Hero trust cue (honest signals, no invented numbers) ---------- */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 26px;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.trust-item svg { width: 15px; height: 15px; color: var(--accent-glow); flex-shrink: 0; }
.trust-sep { width: 1px; height: 14px; background: var(--border-strong); }

/* ---------- Magnetic button glow ---------- */
.btn-primary { position: relative; overflow: visible; }
.btn-primary::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(60% 120% at 50% 0%, rgba(127,227,255,0.5), transparent 70%);
  opacity: 0;
  filter: blur(14px);
  transition: opacity .3s var(--ease-out);
  z-index: -1;
  pointer-events: none;
}
.btn-primary:hover::after { opacity: 1; }

/* ---------- Sticky mobile CTA bar ---------- */
.mobile-cta {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + var(--safe-b));
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px;
  background: rgba(10,20,38,0.86);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,0.7);
  transform: translateY(140%);
  transition: transform .6s var(--ease-out);
}
.mobile-cta.show { transform: translateY(0); }
.mobile-cta a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
.mobile-cta .m-call {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink);
  flex: 0 0 auto;
  width: 52px;
  padding: 0;
}
.mobile-cta .m-call svg { width: 18px; height: 18px; }
.mobile-cta .m-start {
  background: linear-gradient(180deg, #5A8BFF 0%, #3E6EEF 100%);
  color: #fff;
}
@media (max-width: 860px) {
  .mobile-cta { display: flex; }
}

/* ---------- Section intro (eyebrow + heading reusable) ---------- */
.section-head { max-width: 24ch; margin-bottom: clamp(40px, 6vh, 72px); }

/* ---------- Placeholder marker (honest "to be supplied") ---------- */
[data-placeholder] { position: relative; }
.ph-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 5;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-glow);
  background: rgba(5,11,24,0.7);
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  padding: 5px 10px;
  pointer-events: none;
}

/* ============================================================
   SELECTED WORK — cinematic showcase
   ============================================================ */
.showcase { position: relative; }
.work-feature {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(36px, 6vh, 80px) 0;
}
.work-feature + .work-feature { border-top: 1px solid var(--border); }
.work-feature.flip { direction: rtl; }
.work-feature.flip > * { direction: ltr; }

/* the stage that holds the mockups (an anchor to the case study) */
.work-stage {
  display: block;
  color: inherit;
  position: relative;
  perspective: 1400px;
  padding: 4% 6% 8%;
}
.work-stage::before {
  content: '';
  position: absolute;
  inset: 6% 2% 0;
  background: radial-gradient(60% 60% at 50% 40%, rgba(77,126,255,0.28), transparent 70%);
  filter: blur(50px);
  z-index: 0;
}
.work-stage > * { position: relative; z-index: 1; }

/* reusable browser mockup */
.mockup {
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  transform: rotateX(var(--rx,7deg)) rotateY(var(--ry,-9deg));
  transform-style: preserve-3d;
  transition: transform .6s var(--ease-out), border-color .3s;
  will-change: transform;
}
/* case-card hover: screenshot scales 1.03, frame border brightens (fine pointer) */
@media (hover: hover) {
  .work-stage:hover .mockup-screen img { transform: scale(1.03); }
  .work-stage:hover .mockup { border-color: var(--accent-glow); }
  .note-card:hover .thumb img { transform: scale(1.03); }
}
.note-card .thumb img { transition: transform .6s var(--ease-out); }
.mockup-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px;
  background: rgba(8,16,32,0.95);
  border-bottom: 1px solid var(--border);
}
.mockup-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(123,164,255,0.28); }
.mockup-bar .url {
  margin-left: 10px;
  flex: 1;
  height: 18px;
  border-radius: 999px;
  background: rgba(5,11,24,0.6);
  border: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--mute);
  max-width: 60%;
}
.mockup-screen { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.mockup-screen picture { display: block; width: 100%; height: 100%; }
.mockup-screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  transition: transform .6s var(--ease-out);
}
/* real screenshot inside the floating phone frame */
.mockup-phone picture { position: absolute; inset: 0; display: block; }
.mockup-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* a polished CSS "demo site" used as a placeholder preview (looks finished) */
.demo-site { position: absolute; inset: 0; display: flex; flex-direction: column; }
.demo-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  font-size: 9px; letter-spacing: 0.04em;
}
.demo-nav b { font-family: var(--serif); font-style: italic; font-size: 15px; }
.demo-nav span { display: flex; gap: 12px; opacity: 0.7; }
.demo-hero {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 8px 24px 18px; gap: 10px; position: relative; overflow: hidden;
}
.demo-hero h6 { font-family: var(--serif); font-size: clamp(20px, 3vw, 30px); line-height: 0.98; font-weight: 400; }
.demo-hero h6 em { font-style: italic; }
.demo-hero .demo-cta { display: inline-flex; width: max-content; padding: 7px 14px; border-radius: 999px; font-size: 9px; }
.demo-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0 24px 24px; }
.demo-cards div { height: 46px; border-radius: var(--r-sm); }

/* demo-site palettes (representative industries) */
.demo-roof   { background: linear-gradient(160deg,#0E1B14,#081410); color:#CFEFD8; }
.demo-roof .demo-hero { background: radial-gradient(70% 90% at 80% 10%, rgba(46,160,90,0.30), transparent 70%); }
.demo-roof .demo-hero em { color:#7FE0A0; }
.demo-roof .demo-cta { background:#2EA05A; color:#04140A; }
.demo-roof .demo-cards div { background: rgba(127,224,160,0.10); }

.demo-medspa { background: linear-gradient(160deg,#F3E7EA,#E3CDD3); color:#3A2630; }
.demo-medspa .demo-hero { background: radial-gradient(70% 90% at 80% 10%, rgba(201,164,172,0.5), transparent 70%); }
.demo-medspa .demo-hero em { color:#9C5A6E; }
.demo-medspa .demo-cta { background:#9C5A6E; color:#fff; }
.demo-medspa .demo-cards div { background: rgba(58,38,48,0.10); }
.demo-medspa .demo-nav span { opacity: 0.55; }

.demo-dental { background: linear-gradient(160deg,#0A1A2A,#06101E); color:#CFE6FF; }
.demo-dental .demo-hero { background: radial-gradient(70% 90% at 80% 10%, rgba(80,180,230,0.30), transparent 70%); }
.demo-dental .demo-hero em { color:#7FE3FF; }
.demo-dental .demo-cta { background:#3FA9E0; color:#04121E; }
.demo-dental .demo-cards div { background: rgba(127,227,255,0.10); }

/* floating phone in front of the browser */
.mockup-phone {
  position: absolute;
  right: -2%; bottom: -6%;
  width: 23%;
  min-width: 92px;
  aspect-ratio: 9 / 19;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.85);
  overflow: hidden;
  z-index: 3;
  transform: translateZ(60px) rotate(2deg);
}
.mockup-phone .demo-nav { padding: 12px 12px 6px; }
.mockup-phone .demo-nav span { display: none; }
.mockup-phone .demo-hero { padding: 4px 14px 12px; }
.mockup-phone .demo-cards { grid-template-columns: 1fr; padding: 0 14px 16px; gap: 6px; }

.work-info .work-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--accent-glow);
}
.work-info .work-tag::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--accent-glow); box-shadow: 0 0 10px var(--accent); }
.work-info h3 {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 18px 0 16px;
}
.work-info h3 .it { font-style: italic; color: var(--accent-glow); }
.work-info p { color: var(--ink-soft); font-size: 16px; max-width: 42ch; }
.work-result {
  display: inline-flex; align-items: baseline; gap: 10px;
  margin-top: 22px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: rgba(13,33,71,0.4);
}
.work-result .n { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--ink); }
.work-result .l { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute); }
.work-links { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-top: 20px; }
/* padded hit area >= 44px (DEF-03); underline sits at the text baseline */
.visit-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink);
  padding: 12px 0; position: relative;
}
.visit-link::after { content:''; position:absolute; left:0; bottom:9px; width:100%; height:1px; background: var(--accent-glow); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.visit-link:hover::after { transform: scaleX(1); }
.visit-link svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.visit-link:hover svg { transform: translate(3px,-3px); }

/* ============================================================
   HERO — auto-playing live preview (a real build scrolling behind glass)
   ============================================================ */
.hero-preview {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 620px;
}
.hero-browser {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 50px 110px -40px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.02), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-browser::after {
  /* subtle glass sheen so it reads as a screen, not a flat image */
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(127,227,255,0.05), transparent 22%);
}
.hero-browser-bar {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  background: rgba(8,16,32,0.96);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 2;
}
.hero-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(123,164,255,0.28); }
.hero-browser-bar .url {
  margin-left: 10px; flex: 1; height: 20px; max-width: 70%;
  border-radius: 999px;
  background: rgba(5,11,24,0.6); border: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--mute);
}
.hero-browser-screen {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.hero-scroll-img {
  width: 100%; height: auto; display: block;
  will-change: transform;
  /* slow, cinematic auto-scroll: down, hold, back up, loop */
  animation: heroScroll 34s var(--ease) infinite;
}
@keyframes heroScroll {
  0%, 7%   { transform: translateY(0); }
  46%, 54% { transform: translateY(-73%); }
  93%, 100% { transform: translateY(0); }
}
/* mobile preview = a legible real phone build (swapped in via styles.css breakpoint) */
.hero-phone {
  display: none;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 26px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05);
}
.hero-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero-preview-tag {
  position: absolute;
  left: 16px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(5,11,24,0.72); border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 3;
}
.hero-preview-tag .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #48e08a;
  box-shadow: 0 0 0 0 rgba(72,224,138,0.6);
  animation: livePulse 2.4s var(--ease) infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(72,224,138,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(72,224,138,0); }
}

/* ============================================================
   SELECTED WORK — cinematic device-duo proof (no links, screenshots as proof)
   ============================================================ */
.proof {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  padding: clamp(40px, 6vh, 84px) 0;
}
.proof + .proof { border-top: 1px solid var(--border); }
.proof.flip .proof-devices { order: 2; }
.proof-devices {
  position: relative;
  padding: 2% 3% 6%;
  perspective: 1400px;
}
.proof-devices::before {
  content: '';
  position: absolute; inset: 4% 2% 0;
  background: radial-gradient(58% 60% at 50% 38%, rgba(77,126,255,0.26), transparent 70%);
  filter: blur(52px);
  z-index: 0;
}
.proof-browser {
  position: relative;
  z-index: 1;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 44px 100px -34px rgba(0,0,0,0.82), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform .6s var(--ease-out), border-color .3s;
}
.proof-bar {
  display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 14px;
  background: rgba(8,16,32,0.95);
  border-bottom: 1px solid var(--border);
}
.proof-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(123,164,255,0.28); }
.proof-bar .url {
  margin-left: 10px; flex: 1; height: 18px; max-width: 60%;
  border-radius: 999px;
  background: rgba(5,11,24,0.6); border: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--mute);
}
.proof-screen { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.proof-screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
}
/* the browser plays the real build live, scrolling slowly behind the glass —
   but only once the build is actually on screen (see enhance.js). Left idle it
   would loop through on page load and be sitting at the bottom by the time you
   reach it; .is-playing starts the scroll from the top when the frame enters view. */
.proof-screen img.proof-scroll-img {
  height: auto;
  object-fit: unset;
  will-change: transform;
}
.proof-screen.is-playing img.proof-scroll-img {
  animation: proofScroll 32s var(--ease) infinite;
}
@keyframes proofScroll {
  0%, 7%    { transform: translateY(0); }
  47%, 53%  { transform: translateY(-76%); }
  93%, 100% { transform: translateY(0); }
}
@media (hover: hover) {
  .proof-devices:hover .proof-browser { border-color: var(--accent-glow); }
}
/* LIVE tag on each build's browser */
.proof-live-tag {
  position: absolute;
  left: 14px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  z-index: 4;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(5,11,24,0.72); border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.proof-live-tag .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #48e08a;
  box-shadow: 0 0 0 0 rgba(72,224,138,0.6);
  animation: livePulse 2.4s var(--ease) infinite;
}
/* the floating phone holds a REAL phone screenshot at a legible size */
.proof-phone {
  position: absolute;
  right: -1%; bottom: -3%;
  width: 27%;
  min-width: 128px;
  aspect-ratio: 9 / 19.5;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 34px 70px -22px rgba(0,0,0,0.88);
  z-index: 3;
}
.proof.flip .proof-phone { right: auto; left: -1%; }
.proof-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.proof-info .work-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--accent-glow);
}
.proof-info .work-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-glow); box-shadow: 0 0 10px var(--accent); }
.proof-info h3 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 16px 0 14px;
}
.proof-info h3 .it { font-style: italic; color: var(--accent-glow); }
.proof-info p { color: var(--ink-soft); font-size: 16px; max-width: 44ch; }
.proof-points {
  list-style: none;
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 11px;
}
.proof-points li {
  position: relative; padding-left: 22px;
  color: var(--mute); font-size: 14px;
}
.proof-points li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--accent-glow);
}

/* ---------- Before / after slider ---------- */
.ba {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  aspect-ratio: 16 / 10;
  touch-action: pan-y;
  user-select: none;
  --pos: 50%;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8);
}
.ba-pane { position: absolute; inset: 0; }
.ba-pane .demo-site { inset: 0; }
.ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-label {
  position: absolute; top: 12px;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(5,11,24,0.75); border: 1px solid var(--border); color: var(--ink-soft);
  z-index: 4;
}
.ba-label.before { left: 12px; }
.ba-label.after { right: 12px; color: var(--accent-glow); border-color: var(--border-strong); }
.ba-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 2px; background: var(--accent-glow);
  transform: translateX(-1px);
  z-index: 5; cursor: ew-resize;
  box-shadow: 0 0 18px rgba(127,227,255,0.6);
}
.ba-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(10,20,38,0.9);
  border: 1px solid var(--accent-glow);
  display: flex; align-items: center; justify-content: center;
  gap: 3px;
  backdrop-filter: blur(6px);
}
.ba-knob span { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ba-knob .l { border-right: 6px solid var(--accent-glow); }
.ba-knob .r { border-left: 6px solid var(--accent-glow); }
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0; z-index: 6;
}
.ba-range:focus-visible + .ba-handle { outline: 2px solid var(--accent-glow); outline-offset: 2px; }
/* a fake "old/ugly" site for the BEFORE pane */
.demo-old { background: #d8d4c8; color: #3a3a3a; }
.demo-old .demo-nav { background:#b51e1e; color:#fff; padding: 8px 14px; }
.demo-old .demo-nav b { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 12px; }
.demo-old .demo-hero { background:#e7e3d6; align-items:center; text-align:center; }
.demo-old .demo-hero h6 { font-family: 'Times New Roman', serif; font-style: normal; color:#1b3a8a; text-decoration: underline; }
.demo-old .demo-hero .demo-cta { background:#1f8f1f; color:#fff; border-radius: var(--r-sm); align-self:center; font-weight:700; }
.demo-old .demo-cards div { background:#cfcabb; border:1px solid #b8b2a2; }

/* ============================================================
   THE UNSEEN COST — money leak
   ============================================================ */
.leak-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.leak-meter {
  position: sticky; top: 120px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 34px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(30,63,153,0.28), transparent 60%), var(--bg-soft);
  overflow: hidden;
}
.leak-meter .leak-eyebrow {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--mute);
}
.leak-amount {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 14px 0 4px;
  display: flex; align-items: baseline;
}
.leak-amount .cur { font-size: 0.5em; color: var(--accent-glow); margin-right: 4px; font-style: italic; }
.leak-sub { color: var(--mute); font-size: 14px; max-width: 30ch; }
/* ---- funnel instrument: VISITORS -> DOUBT -> GONE, leaking the count-up ---- */
.funnel {
  position: relative;
  margin: 20px auto 0;
  max-width: 280px;
  overflow: visible;
}
.funnel-svg { width: 100%; height: auto; display: block; overflow: visible; }
.funnel-fill { fill: url(#funnelFill); }
.funnel-outline { fill: none; stroke: url(#funnelG); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.funnel-divider { stroke: rgba(127,227,255,0.26); stroke-width: 1; stroke-dasharray: 2 5; stroke-linecap: round; }
.funnel-drain { fill: rgba(127,227,255,0.55); }
.funnel-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; fill: var(--mute); }
.funnel-drips { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.drip {
  position: absolute;
  top: 84%; left: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  opacity: 0;
}
.leak-exit { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 8px; }
.leak-amount { justify-content: center; font-size: clamp(48px, 6.5vw, 88px); }
.leak-amount .per { font-family: var(--sans); font-size: 0.28em; font-style: normal; color: var(--mute); letter-spacing: 0; margin-left: 4px; align-self: center; }
.leak-sub { text-align: center; margin-top: 6px; }
.leak-disc { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--mute-2); text-align: center; margin-top: 14px; }
.leak-list .bullet:last-child { border-bottom: none; }

/* ---- bullet schematic glyphs (drawn on reveal) ---- */
.bullet-glyph { display: block; width: 24px; height: 24px; margin-bottom: 10px; color: var(--accent-glow); }
.bullet-glyph svg { width: 100%; height: 100%; }
.bullet-glyph svg path, .bullet-glyph svg circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .3s var(--ease-out);
}
.bullet.in .bullet-glyph svg path, .bullet.in .bullet-glyph svg circle { stroke-dashoffset: 0; }
html:not(.js) .bullet-glyph svg path, html:not(.js) .bullet-glyph svg circle { stroke-dashoffset: 0; }

/* ============================================================
   PROOF — gauges, counters, logos, honest testimonial slots
   ============================================================ */
.proof-gauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 64px;
}
.gauge-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  transition: border-color .3s, transform .6s var(--ease-out);
}
.gauge-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.gauge { position: relative; width: 116px; height: 116px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge .track { fill: none; stroke: rgba(123,164,255,0.12); stroke-width: 8; }
.gauge .val {
  fill: none; stroke: url(#gaugeGrad); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: var(--circ); stroke-dashoffset: var(--circ);
  transition: stroke-dashoffset 1.1s var(--ease-out);
  filter: drop-shadow(0 0 6px rgba(77,126,255,0.5));
}
.gauge-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gauge-center .n { font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1; color: var(--ink); }
.gauge-center .n .u { font-size: 0.45em; color: var(--accent-glow); }
.gauge-card .g-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute); }
.gauge-card .g-note { color: var(--mute-2); font-size: 12px; }
/* a non-gauge metric tile (e.g. "code you own") */
.gauge .glyph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--serif); font-style: italic; font-size: 58px; color: var(--accent-glow); }

/* logo marquee (placeholder chips) */
.logo-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 26px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-strip-head { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--mute-2); text-align: center; margin-bottom: 18px; }
.logo-track { display: flex; gap: 46px; width: max-content; align-items: center; animation: slide 38s linear infinite; }
.logo-chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 4px;
  color: var(--mute);
  opacity: 0.65;
  white-space: nowrap;
}
.logo-chip svg { width: 20px; height: 20px; color: var(--mute-2); }
.logo-chip span { font-family: var(--serif); font-style: italic; font-size: 20px; letter-spacing: -0.01em; }

/* honest stand-in for testimonials (no fake cards) */
.proof-invite {
  text-align: center;
  margin: 56px auto 0;
  max-width: 44ch;
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.proof-invite p { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; color: var(--ink-soft); }
.proof-invite p.mut { color: var(--mute); font-style: italic; margin-top: 4px; }

/* ---------- Founder / human moment ---------- */
.founder {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(120deg, var(--surface) 0%, var(--bg-soft) 100%);
  margin-top: 64px;
}
.founder-mark {
  aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border-strong);
  background: radial-gradient(120% 120% at 30% 20%, var(--surface-2), var(--bg));
  display: flex; align-items: center; justify-content: center;
}
.founder-mark img {
  width: 44%; height: 44%;
  object-fit: contain;
  border-radius: var(--r-sm);
  filter: drop-shadow(0 0 16px rgba(123,164,255,0.35));
}
.founder blockquote { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -0.01em; }
.founder blockquote .it { font-style: italic; color: var(--accent-glow); }
.founder .sig { margin-top: 18px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute); }

/* ============================================================
   POSITIONING — freelancer ↔ Webrivio ↔ agency
   ============================================================ */
.compare {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin-top: 12px;
}
.compare-col {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  background: var(--bg-soft);
  display: flex; flex-direction: column; gap: 18px;
}
.compare-col.mid {
  background: linear-gradient(180deg, #0F2147 0%, #0A1426 100%);
  border-color: var(--accent);
  box-shadow: 0 30px 80px -40px rgba(77,126,255,0.6);
  position: relative;
}
/* side cards dim until hovered; the middle one is the verdict */
.compare-col:not(.mid) { opacity: 0.75; transition: opacity .3s var(--ease); }
@media (hover: hover) { .compare-col:not(.mid):hover { opacity: 1; } }
/* perimeter stroke that draws when the compare scrolls in (700ms) */
.mid-outline {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 2;
}
.mid-outline rect {
  fill: none; stroke: var(--cyan); stroke-width: 1.5;
  opacity: 0.9;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .7s var(--ease-out);
}
.compare.in .mid-outline rect { stroke-dashoffset: 0; }
.compare-col.mid::before {
  content: 'You are here';
  position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.9);
  transform-origin: center top;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em;
  color: #fff; background: linear-gradient(180deg,#5A8BFF,#3E6EEF);
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
  opacity: 0; z-index: 3;
  transition: opacity .3s var(--ease-out) .9s, transform .3s var(--ease-out) .9s;
}
.compare.in .compare-col.mid::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
html:not(.js) .compare-col:not(.mid) { opacity: 1; }
html:not(.js) .mid-outline rect { stroke-dashoffset: 0; }
html:not(.js) .compare-col.mid::before { opacity: 1; transform: translateX(-50%) scale(1); }
.compare-col h4 { font-family: var(--serif); font-size: 26px; font-style: italic; line-height: 1; }
.compare-col.mid h4 { color: var(--accent-glow); }
.compare-price { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute); }
.compare-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.compare-list li { font-size: 14px; color: var(--ink-soft); display: flex; gap: 10px; align-items: flex-start; }
.compare-list li svg { width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; }
.compare-list li.no { color: var(--mute-2); }
.compare-list li.no svg { color: var(--mute-2); }
.compare-list li.yes svg { color: var(--accent-glow); }

/* ============================================================
   CASE STUDIES (work page) — real builds, framed and annotated
   ============================================================ */
.case { scroll-margin-top: 96px; }
.case + .case { border-top: 1px solid var(--border); }
.case-head {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.case.flip .case-head { grid-template-columns: 1.1fr 0.9fr; }
.case.flip .case-head .work-info { order: 2; }
.case-visit {
  display: inline-flex; align-items: center; gap: 10px;
  height: var(--btn-h); padding: 0 26px; margin-top: 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5A8BFF 0%, #3E6EEF 100%);
  color: #fff; font-size: 14px; font-weight: 500;
  box-shadow: 0 10px 40px -10px rgba(77,126,255,0.55);
  transition: transform .3s var(--ease-out);
}
.case-visit:hover { transform: translateY(-2px); }
.case-visit svg { width: 15px; height: 15px; }
.demo-note {
  display: block; margin-top: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute-2); max-width: 52ch; line-height: 1.7;
}
.case-concept {
  max-width: 62ch; margin: clamp(40px, 6vh, 80px) 0 clamp(32px, 4vh, 56px);
}
.case-concept .lede { color: var(--ink-soft); }
.case-concept .brief {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-glow); margin-bottom: 18px; display: block;
}

/* design-note cards (image thumb + caption) */
.case-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: clamp(24px, 4vh, 48px); }
.note-card {
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
  display: flex; flex-direction: column;
  transition: border-color .3s;
}
.note-card:hover { border-color: var(--border-strong); }
.note-card .thumb { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--border); }
.note-card .thumb picture { display: block; width: 100%; height: 100%; }
.note-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.note-card .cap { padding: 18px 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.note-card .cap b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 4px; font-size: 13px; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }

/* gallery rhythm */
.case-gallery { display: flex; flex-direction: column; gap: 16px; margin: clamp(8px,2vh,24px) 0 clamp(28px,4vh,56px); }
.gal-frame { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); aspect-ratio: 1500 / 938; }
.gal-frame picture { display: block; width: 100%; height: 100%; }
.gal-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.gal-2up .phone-frame {
  border-radius: var(--r-md); border: 1px solid var(--border-strong);
  overflow: hidden; background: var(--bg); max-width: 300px; margin: 0 auto;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
}
.gal-2up .phone-frame img { width: 100%; height: auto; display: block; }

/* craft details list */
.case-craft { border-top: 1px solid var(--border); padding-top: 28px; }
.case-craft h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); margin-bottom: 18px; }
.case-craft ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; }
.case-craft li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); }
.case-craft li::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--accent-glow); margin-top: 8px; flex-shrink: 0; }

@media (max-width: 1024px) {
  .case-head, .case.flip .case-head { grid-template-columns: 1fr; gap: 28px; }
  .case.flip .case-head .work-info { order: 0; }
  .case-notes { grid-template-columns: 1fr; }
  .case-craft ul { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gal-2up { grid-template-columns: 1fr; }
}

/* ============================================================
   PROCESS — cinematic timeline (2D lateral storytelling on scroll)
   ============================================================ */
.proc-timeline { position: relative; }
@media (min-width: 1025px) {
  .proc-timeline { padding-left: calc(var(--gutter) + var(--safe-l) + 38px); }
  /* a thin spine the phases hang off; it draws down as you scroll (JS) */
  .proc-timeline::before {
    content: '';
    position: absolute;
    left: calc(var(--gutter) + var(--safe-l) + 6px);
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--border-strong) 8%, var(--border-strong) 92%, transparent);
    transform-origin: top center;
    transform: scaleY(var(--proc-progress, 0));
    opacity: 0.7;
  }
}
/* the giant phase number reads as a moving set-piece, not static type */
.phase-num { will-change: transform; }
.phase-num .pn-mark {
  display: inline-block;
  will-change: transform;
}
/* lateral slide-in: the left column enters from the left, the right from the right,
   so the story literally moves across the screen as you scroll (2D, no 3D) */
@media (min-width: 861px) {
  .phase-left.reveal { transform: translateX(-52px); }
  .phase-left.reveal.in { transform: translateX(0); }
  .phase-right .reveal { transform: translateX(52px); }
  .phase-right .reveal.in { transform: translateX(0); }
  .phase-right .reveal { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .proof-gauges { grid-template-columns: 1fr 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .leak-wrap { grid-template-columns: 1fr; }
  .leak-meter { position: static; }
  .compare { grid-template-columns: 1fr; }
  .work-feature { grid-template-columns: 1fr; }
  .work-feature.flip { direction: ltr; }
  .proof { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
  .proof.flip .proof-devices { order: 0; }
  .founder { grid-template-columns: 1fr; text-align: center; }
  .founder-mark { max-width: 160px; margin: 0 auto; }
}
/* frames read straight-on below the touch breakpoint (tilt is a fine-pointer affordance) */
@media (max-width: 860px) {
  .mockup { transform: none; }
  /* hero preview: swap the desktop browser for a legible real phone build
     (defined here so it wins over the base rules in this same file) */
  .hero-browser { display: none; }
  .hero-phone { display: block; }
  .hero-preview { width: min(290px, 80vw); max-width: none; justify-self: center; margin: 6px auto 0; }
  /* keep the real phone build prominent and legible on small screens */
  .proof-devices { padding: 1% 0 8%; }
  .proof-phone { width: 30%; min-width: 118px; right: 2%; }
  .proof.flip .proof-phone { left: 2%; }
}
@media (max-width: 640px) {
  .proof-gauges { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gauge-card { padding: 22px 16px; }
  .gauge { width: 96px; height: 96px; }
  .work-stage { padding: 2% 2% 10%; }
  .mockup-phone { width: 28%; right: -1%; }
  .proof-phone { width: 33%; min-width: 112px; }
  .proof-info h3 { font-size: clamp(28px, 8vw, 40px); }
  .leak-amount { font-size: clamp(48px, 14vw, 80px); }
  .compare-col.mid { order: -1; }
  .trust-row { gap: 8px 14px; }
  .trust-sep { display: none; }
}

/* ============================================================
   Reduced motion — kill the heavy stuff, keep it readable
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-field::before, .logo-track, .ticker-track { animation: none; }
  #hero-canvas { display: none; }
  .gauge .val { transition: none; }
  .mockup { transform: none; }
  .compare-col:not(.mid) { opacity: 1; }
  .mid-outline rect { stroke-dashoffset: 0; }
  .hero-scroll-img, .proof-scroll-img { animation: none !important; transform: none !important; }
  .phase-left.reveal, .phase-right .reveal { transform: none !important; }
}