/* RBLURRR SUB-PAGE MOTION LAYER
   Shared by /work/*.html and /about/. Loaded after work.css.
   Speaks the main site's motion language: 3D depth reveals, decode
   scramble, holographic rotating borders, image scanlines, magnetic
   buttons, molten-gold light. Everything here is progressive: without
   JS (no .m-js on <html>) or with reduced motion, pages render complete
   and still. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-gold-soft: rgba(255, 210, 119, 0.14);
}

/* ───────────── cross-page transitions (Chrome/Edge 126+, Safari 18.2+) ───────────── */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: m-vt-out 0.26s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: m-vt-in 0.52s var(--ease-out) both; }
@keyframes m-vt-out { to { opacity: 0; transform: translateY(-14px) scale(0.992); filter: blur(4px); } }
@keyframes m-vt-in { from { opacity: 0; transform: translateY(22px) scale(1.004); filter: blur(6px); } }
/* manual fallback when cross-document transitions aren't supported */
body.m-leaving main, body.m-leaving .hero, body.m-leaving .story, body.m-leaving .values, body.m-leaving .footer {
  opacity: 0; transform: translateY(-10px); filter: blur(3px);
  transition: opacity 0.22s ease, transform 0.22s ease, filter 0.22s ease;
}

/* ───────────── ambient: particle field, aurora, grain, vignette ───────────── */
.m-aurora {
  position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 78% 12%, rgba(255, 122, 61, 0.2), transparent 62%),
    radial-gradient(34vmax 28vmax at 14% 30%, rgba(255, 210, 119, 0.15), transparent 60%),
    radial-gradient(44vmax 34vmax at 58% 70%, rgba(255, 160, 80, 0.09), transparent 62%),
    radial-gradient(40vmax 30vmax at 60% 92%, rgba(114, 247, 200, 0.05), transparent 60%);
  animation: m-aurora 38s ease-in-out infinite alternate;
}
@keyframes m-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-3vmax, 2vmax, 0) rotate(4deg) scale(1.06); }
  100% { transform: translate3d(2vmax, -2vmax, 0) rotate(-3deg) scale(1.02); }
}
/* cinematic hero backdrop — full bleed behind the hero and the sticky nav */
.m-backdrop {
  position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: -1;
  overflow: hidden; pointer-events: none; opacity: var(--bd-o, 1);
}
.m-backdrop-still, .m-backdrop-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
  transform: translate3d(0, var(--bd-y, 0px), 0) scale(1.14); filter: blur(10px) saturate(0.6); opacity: 0;
  transition: transform 2.4s var(--ease-out), filter 1.8s var(--ease-out), opacity 1.4s ease;
}
.m-backdrop.m-on .m-backdrop-still { opacity: 1; filter: none; transform: translate3d(0, var(--bd-y, 0px), 0) scale(1.04); }
.m-backdrop-video { transition: opacity 1.6s ease; filter: none; transform: translate3d(0, var(--bd-y, 0px), 0) scale(1.04); }
.m-backdrop.m-playing .m-backdrop-video { opacity: 1; }
.m-backdrop.m-settled .m-backdrop-still { transition: opacity 1.4s ease; }
/* legibility: the headline column stays dark, the art glows on the right,
   and the whole plate melts into the page below */
.m-backdrop-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 5, 3, 0.95) 0%, rgba(7, 5, 3, 0.86) 34%, rgba(7, 5, 3, 0.52) 60%, rgba(7, 5, 3, 0.16) 100%),
    linear-gradient(180deg, rgba(7, 5, 3, 0.55) 0%, rgba(7, 5, 3, 0) 18%, rgba(7, 5, 3, 0) 58%, #070503 100%);
}
.m-backdrop::after {          /* a slow molten light sweep across the plate */
  content: ''; position: absolute; top: 0; bottom: 0; width: 38%; left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 210, 119, 0.07), transparent);
  animation: m-bd-sweep 9s ease-in-out 2.5s infinite;
}
@keyframes m-bd-sweep { 0% { left: -40%; } 55%, 100% { left: 120%; } }
/* the nav floats over the art instead of cutting it off */
.nav { background: linear-gradient(180deg, rgba(7, 7, 8, 0.78), rgba(7, 7, 8, 0.42)) !important; }
.nav.m-scrolled { background: rgba(7, 7, 8, 0.92) !important; }
.hero h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55); }
.hero .lede { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.7); }
.hero-side { background: rgba(10, 8, 6, 0.55) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (max-width: 850px) {
  .m-backdrop-still, .m-backdrop-video { object-position: 72% 50%; }
  .m-backdrop-shade {
    background:
      linear-gradient(180deg, rgba(7, 5, 3, 0.55) 0%, rgba(7, 5, 3, 0.72) 45%, rgba(7, 5, 3, 0.9) 80%, #070503 100%);
  }
}
/* the closing call to action gets the page's key art, slowly drifting */
.cta { overflow: hidden; }
.m-cta-art {
  position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; opacity: 0.32;
  background-size: cover; background-position: 70% 50%;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 55%); mask: linear-gradient(90deg, transparent 0%, #000 55%);
  animation: m-cta-drift 26s ease-in-out infinite alternate;
}
.cta > *:not(.m-cta-art):not(.holo-ring) { position: relative; z-index: 2; }
@keyframes m-cta-drift { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.14) translateX(-2%); } }

#m-field {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity 1.6s ease;
}
#m-field.on { opacity: 1; }
.m-grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .75  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
.m-vignette {
  position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* ───────────── scroll progress beam + cursor light ───────────── */
.m-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9300; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #ffd277, #ff7a3d 70%, #fff1c9);
  box-shadow: 0 0 12px rgba(255, 170, 90, 0.7);
}
.m-cursor {
  position: fixed; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px;
  z-index: -1; pointer-events: none; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 196, 110, 0.085), rgba(255, 122, 61, 0.03) 42%, transparent 68%);
  transition: opacity 0.6s ease; will-change: transform;
}
.m-cursor.on { opacity: 1; }

/* ───────────── nav: condense on scroll, ink underline, mobile sheet ───────────── */
.nav { transition: background 0.4s ease, box-shadow 0.4s ease; overflow-anchor: none; }
.nav.m-scrolled { background: rgba(7, 7, 8, 0.94); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); }
.nav .links { position: relative; }
.nav .links a:not(.nav-cta) { position: relative; padding: 6px 0; transition: color 0.25s ease; }
.m-ink {
  position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, #ffd277, #ff7a3d);
  box-shadow: 0 0 10px rgba(255, 170, 90, 0.6);
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out), opacity 0.3s ease;
  pointer-events: none; opacity: 0;
}
.m-ink.on { opacity: 1; }
.brand { transition: letter-spacing 0.5s var(--ease-out), filter 0.4s ease; }
.brand:hover { letter-spacing: 0.22em; filter: drop-shadow(0 0 14px rgba(255, 170, 90, 0.45)); }
.nav-cta { position: relative; overflow: hidden; transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease; }
.nav-cta:hover { box-shadow: 0 10px 30px rgba(255, 150, 70, 0.35); }

.m-menu {
  display: none; width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--text); cursor: pointer; place-items: center;
}
.m-menu span, .m-menu span::before, .m-menu span::after {
  display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 0.35s var(--ease-out), opacity 0.2s ease; content: '';
}
.m-menu span { position: relative; }
.m-menu span::before { position: absolute; top: -6px; }
.m-menu span::after { position: absolute; top: 6px; }
.m-menu[aria-expanded="true"] span { background: transparent; }
.m-menu[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.m-menu[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.m-sheet {
  position: fixed; inset: 0; z-index: 9400; display: flex; flex-direction: column; justify-content: center;
  padding: 90px 28px 40px; gap: 6px;
  background: radial-gradient(circle at 80% 0, rgba(255, 122, 61, 0.16), transparent 45%), rgba(7, 7, 8, 0.97);
  backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.m-sheet.open { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.m-sheet a {
  font: 500 clamp(26px, 8vw, 36px)/1.25 'Space Grotesk', sans-serif; letter-spacing: -0.03em;
  color: var(--body); padding: 8px 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), color 0.2s ease;
}
.m-sheet a.active, .m-sheet a:hover { color: #fff; }
.m-sheet a.active::after { content: ' •'; color: var(--gold); }
.m-sheet.open a { opacity: 1; transform: none; }
.m-sheet.open a:nth-child(2) { transition-delay: 0.04s; } .m-sheet.open a:nth-child(3) { transition-delay: 0.08s; }
.m-sheet.open a:nth-child(4) { transition-delay: 0.12s; } .m-sheet.open a:nth-child(5) { transition-delay: 0.16s; }
.m-sheet.open a:nth-child(6) { transition-delay: 0.2s; } .m-sheet.open a:nth-child(7) { transition-delay: 0.24s; }
.m-sheet.open a:nth-child(8) { transition-delay: 0.28s; } .m-sheet.open a:nth-child(9) { transition-delay: 0.32s; }
.m-sheet.open a:nth-child(10) { transition-delay: 0.36s; } .m-sheet.open a:nth-child(n+11) { transition-delay: 0.4s; }
.m-sheet { overflow-y: auto; justify-content: flex-start; }
@media (min-height: 760px) { .m-sheet { justify-content: center; } }
.m-sheet .m-sheet-cta {
  margin-top: 22px; border: 0; text-align: center; border-radius: 12px; padding: 16px;
  font: 600 17px/1.2 Inter, sans-serif; letter-spacing: 0; color: #130b05;
  background: linear-gradient(135deg, var(--gold), var(--ember));
}
.m-sheet .m-sheet-cta::after { content: none; }
.m-sheet-meta { margin-top: 18px; color: var(--muted); font: 500 13px/1.6 Inter, sans-serif; }
.m-sheet-meta a { color: var(--gold); text-decoration: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.m-sheet a:focus-visible { outline: 2px solid #ffd277; outline-offset: 3px; border-radius: 6px; }
body.m-sheet-open { overflow: hidden; }
body.m-sheet-open .nav { z-index: 9500; }            /* the X stays tappable above the sheet */
@media (max-width: 850px) {
  .m-menu { display: grid; }
  .nav .links { gap: 10px; }
  .nav-cta { padding: 10px 12px; font-size: 12px; }
}

/* ───────────── hero choreography (CSS-only, runs on load) ───────────── */
.m-js .hero .eyebrow, .m-js .hero .lede, .m-js .hero .actions > *, .m-js .hero .proof > div,
.m-js .hero .identity-line > span, .m-js .hero-side, .m-js .portrait-wrap {
  opacity: 0; animation: m-rise 0.9s var(--ease-out) forwards;
}
.m-js .hero .eyebrow { animation-delay: 0.08s; }
.m-js .hero .lede { animation-delay: 0.62s; }
.m-js .hero .actions > :nth-child(1) { animation-delay: 0.78s; }
.m-js .hero .actions > :nth-child(2) { animation-delay: 0.86s; }
.m-js .hero .identity-line > span { animation-name: m-pop; animation-duration: 0.6s; }
.m-js .hero .identity-line > span:nth-child(1) { animation-delay: 0.7s; }
.m-js .hero .identity-line > span:nth-child(2) { animation-delay: 0.76s; }
.m-js .hero .identity-line > span:nth-child(3) { animation-delay: 0.82s; }
.m-js .hero .identity-line > span:nth-child(4) { animation-delay: 0.88s; }
.m-js .hero .identity-line > span:nth-child(5) { animation-delay: 0.94s; }
.m-js .hero .proof > div { animation-name: m-fade; }
.m-js .hero .proof > div:nth-child(1) { animation-delay: 1.0s; }
.m-js .hero .proof > div:nth-child(2) { animation-delay: 1.1s; }
.m-js .hero .proof > div:nth-child(3) { animation-delay: 1.2s; }
.m-js .hero-side { animation-name: m-side; animation-duration: 1.1s; animation-delay: 0.9s; }
.m-js .portrait-wrap { animation-name: m-portrait; animation-duration: 1.4s; animation-delay: 0.25s; }

/* entrance finished: release the element so hover transforms (magnetic,
   tilt) aren't pinned by the animation's fill-mode */
.m-js .hero .m-done, .m-js .m-done.hero-side, .m-js .m-done.portrait-wrap { animation: none !important; opacity: 1 !important; filter: none !important; }

/* the gold rule on each proof point draws downward as it lands */
.hero .proof > div { position: relative; border-left-color: transparent !important; }
.hero .proof > div::before {
  content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, #ffd277, rgba(255, 122, 61, 0.35));
  transform-origin: 50% 0; transform: scaleY(1);
}
.m-js .hero .proof > div::before { transform: scaleY(0); animation: m-draw-y 0.9s var(--ease-out) forwards; animation-delay: inherit; }

/* headline: words rise out of a mask, then a molten highlight passes */
.hero h1 { perspective: 900px; }
.m-js .hero h1:not(.m-split) { opacity: 0; animation: m-fade 0.01s linear 2.2s forwards; } /* failsafe if JS never splits */
.m-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.02em 0.12em; margin: -0.04em -0.02em -0.12em; }
.m-wi { display: inline-block; will-change: transform; }
.m-split .m-wi {
  transform: translateY(108%) rotate(4deg); opacity: 0;
  animation: m-word 0.95s var(--ease-out) forwards;
  animation-delay: calc(0.18s + var(--w, 0) * 0.055s);
}
.m-split.m-shine .m-wi {
  background: linear-gradient(100deg, currentColor 0 38%, #fff4d6 46%, #ffd277 50%, #ff9f5a 54%, currentColor 62% 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: m-word 0.95s var(--ease-out) forwards, m-shine 1.5s ease forwards;
  animation-delay: calc(0.18s + var(--w, 0) * 0.055s), calc(1.05s + var(--w, 0) * 0.045s);
}

/* ───────────── scroll reveals (JS adds .m-in) ───────────── */
.m-js [data-m] {
  opacity: 0;
  transform: perspective(1000px) translateY(48px) rotateX(7deg) scale(0.985);
  transform-origin: 50% 100%;
  transition: opacity 0.85s var(--ease-out), transform 0.95s var(--ease-out), filter 0.85s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.09s);
  filter: blur(6px);
}
.m-js [data-m="fade"] { transform: none; }
.m-js [data-m="left"] { transform: translateX(-36px); }
.m-js [data-m="right"] { transform: translateX(36px); }
.m-js [data-m="pop"] { transform: scale(0.94); }
.m-js [data-m][id] { transform: none; }
.m-js [data-m].m-in { opacity: 1; transform: none; filter: none; }
/* failsafe: if the observer never runs, nothing stays invisible */
.m-js:not(.m-live) [data-m] { animation: m-failsafe 0.01s linear 3s forwards; }
@keyframes m-failsafe { to { opacity: 1; transform: none; filter: none; } }

/* one-shot scan line that sweeps a card as it arrives */
.category, .case, .value, .step-card, .faq, .price-card, .cta { isolation: isolate; }
.m-js .category[data-m]::after, .m-js .case[data-m]::after, .m-js .value[data-m]::after, .m-js .price-card[data-m]::after {
  content: ''; position: absolute; left: 0; right: 0; top: -30%; height: 30%; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 210, 119, 0.12), transparent);
  opacity: 0;
}
.m-js .category.m-in::after, .m-js .case.m-in::after, .m-js .value.m-in::after, .m-js .price-card.m-in::after {
  animation: m-scan-once 1.3s var(--ease-out) forwards; animation-delay: calc(0.25s + var(--i, 0) * 0.09s);
}

/* case images: wipe up from the bottom, then settle from a slow zoom */
.case img { transition: transform 1.2s var(--ease-out), filter 0.6s ease; transform-origin: 50% 60%; }
.case .m-media { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.case .m-media img { display: block; border-bottom: 0; transform: translateY(var(--py, 0px)) scale(1.06); }
.m-js .case[data-m] .m-media { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-out); transition-delay: calc(0.12s + var(--i, 0) * 0.09s); }
.m-js .case.m-in .m-media { clip-path: inset(0 0 0 0); }
.case:hover .m-media img { transform: translateY(var(--py, 0px)) scale(1.1); filter: saturate(1.12) contrast(1.04); }
.img-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(255, 210, 119, 0.035) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
.img-scan::after {
  content: ''; position: absolute; left: 0; right: 0; top: -20%; height: 18%; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 210, 119, 0.16), transparent);
}
.case:hover .img-scan::after { opacity: 1; animation: m-scan-loop 1.6s var(--ease-out) infinite; }
.m-live-badge {
  position: absolute; left: 14px; top: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 999px; background: rgba(7, 7, 8, 0.72); backdrop-filter: blur(8px);
  border: 1px solid rgba(114, 247, 200, 0.35); color: #bff9e7; font: 700 9.5px/1 ui-monospace, monospace; letter-spacing: 0.14em;
}
.m-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: m-blink 1.8s ease-in-out infinite; }

/* ───────────── card interaction: tilt, spotlight, holographic border ───────────── */
.category, .case, .value, .price-card { transform-style: preserve-3d; }
.m-tilt { transition: transform 0.6s var(--ease-out), border-color 0.3s ease, background 0.3s ease, box-shadow 0.4s ease; }
.m-tilt.m-hot { transition: transform 0.12s linear, border-color 0.3s ease, background 0.3s ease, box-shadow 0.4s ease; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 210, 119, 0.12); }
.hero-side, .value, .cta { position: relative; }
.hero-side { overflow: hidden; }
.hero-side > * { position: relative; z-index: 2; }
.m-spot {
  position: absolute !important; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1 !important; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 210, 119, 0.13), rgba(255, 122, 61, 0.05) 35%, transparent 60%);
  transition: opacity 0.4s ease;
}
.m-hot .m-spot { opacity: 1; }
.category > *, .case > *, .value > *, .price-card > * { position: relative; z-index: 2; }
.category > .arrow { position: absolute; }
@property --holoA { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.holo-ring {
  position: absolute !important; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; z-index: 6 !important;
  background: conic-gradient(from var(--holoA), transparent 0deg, rgba(255, 210, 119, 0.9) 40deg, transparent 80deg,
    transparent 180deg, rgba(255, 122, 61, 0.9) 220deg, transparent 260deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  animation: m-holo-spin 3.5s linear infinite; animation-play-state: paused; transition: opacity 0.45s ease;
}
.m-hot .holo-ring, .cta.m-in .holo-ring, .m-js .price-card.m-feature .holo-ring { opacity: 1; animation-play-state: running; }
.cta .holo-ring { opacity: 0.55; }

/* category card extras: ghost numeral, travelling arrow */
.category { overflow: hidden; }
.category .m-ghost {
  position: absolute; right: -8px; bottom: -34px; z-index: 0 !important; pointer-events: none;
  font: 600 170px/1 'Space Grotesk', sans-serif; letter-spacing: -0.06em;
  background: linear-gradient(160deg, rgba(255, 210, 119, 0.10), rgba(255, 122, 61, 0.02) 60%, transparent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform 0.9s var(--ease-out), opacity 0.6s ease; opacity: 0.8;
}
.category:hover .m-ghost { transform: translate(-10px, -12px) scale(1.04); opacity: 1; }
.category .arrow { transition: transform 0.5s var(--ease-spring), color 0.3s ease, text-shadow 0.3s ease; }
.category:hover .arrow { transform: translate(5px, -5px) scale(1.15); text-shadow: 0 0 18px rgba(255, 170, 90, 0.8); }
.category h3 { transition: transform 0.6s var(--ease-out); }
.category:hover h3 { transform: translateX(4px); }
.category .m-cat-cta { display: inline-flex; gap: 8px; align-items: center; margin-top: 16px; color: var(--gold); font-weight: 600; font-size: 14px; }
.category .m-cat-cta::after { content: '→'; transition: transform 0.4s var(--ease-out); }
.category:hover .m-cat-cta::after { transform: translateX(6px); }

.case-link { position: relative; transition: gap 0.3s ease, color 0.3s ease; }
.case-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: linear-gradient(90deg, #ffd277, #ff7a3d); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-out);
}
.case-link:hover::after, .case-link:focus-visible::after { transform: scaleX(1); }
.chips span { transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out); }
.case:hover .chips span { background: rgba(255, 210, 119, 0.08); color: var(--body); }
.m-js .case[data-m] .chips span { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.m-js .case.m-in .chips span { opacity: 1; transform: none; }
.m-js .case.m-in .chips span:nth-child(1) { transition-delay: calc(0.5s + var(--i, 0) * 0.09s); }
.m-js .case.m-in .chips span:nth-child(2) { transition-delay: calc(0.58s + var(--i, 0) * 0.09s); }
.m-js .case.m-in .chips span:nth-child(3) { transition-delay: calc(0.66s + var(--i, 0) * 0.09s); }
.m-js .case.m-in .chips span:nth-child(4) { transition-delay: calc(0.74s + var(--i, 0) * 0.09s); }

/* ───────────── buttons: magnetic + molten shimmer ───────────── */
.btn { position: relative; overflow: hidden; transition: transform 0.35s var(--ease-out), border-color 0.3s ease, box-shadow 0.35s ease, background 0.3s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { box-shadow: 0 16px 45px rgba(255, 160, 80, 0.2); }
.btn.primary:hover { box-shadow: 0 20px 55px rgba(255, 150, 70, 0.34); }
.btn.primary::before, .nav-cta::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg); animation: m-sheen 5.5s ease-in-out infinite;
}
.nav-cta::before { animation-delay: 1.4s; }
.m-mag { will-change: transform; }
.btn:focus-visible, .nav a:focus-visible, .case-link:focus-visible, .category:focus-visible, .m-menu:focus-visible, .faq summary:focus-visible {
  outline: 2px solid #ffd277; outline-offset: 3px; border-radius: 8px;
}
.m-ripple {
  position: fixed; width: 8px; height: 8px; border: 1.5px solid #ffd277; border-radius: 50%;
  pointer-events: none; z-index: 9996; transform: translate(-50%, -50%);
  animation: m-ripple 0.55s var(--ease-out) forwards;
}

/* ───────────── section heads, decode ───────────── */
.m-decoding { text-shadow: 0 0 22px rgba(255, 210, 119, 0.35); }
.eyebrow { position: relative; }
.m-js .section-head[data-m] .eyebrow::before, .m-js .cta[data-m] .eyebrow::before {
  content: ''; display: inline-block; width: 0; height: 1px; margin-right: 0; vertical-align: middle;
  background: currentColor; transition: width 0.8s var(--ease-out) 0.3s, margin 0.8s var(--ease-out) 0.3s;
}
.m-js .section-head.m-in .eyebrow::before, .m-js .cta.m-in .eyebrow::before { width: 26px; margin-right: 10px; }

/* ───────────── new content blocks ───────────── */
/* trust strip */
.m-trust { margin: 8px 0 0; padding: 30px 0 8px; border-top: 1px solid var(--line); }
.m-trust-label { font: 600 11px ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 18px; }
.m-marquee { position: relative; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* spacing lives on the items (not flex gap) so the duplicated half is exactly
   half the track and the -50% loop point is seamless */
.m-marquee-track { display: flex; width: max-content; align-items: center; animation: m-marquee 36s linear infinite; }
.m-marquee-track > * { flex: none; margin-right: 56px; }
.m-marquee:hover .m-marquee-track, .m-marquee:focus-within .m-marquee-track, .m-marquee.m-paused .m-marquee-track { animation-play-state: paused; }
.m-marquee img { height: 44px; width: auto; object-fit: contain; filter: grayscale(1) brightness(1.6) contrast(0.9); opacity: 0.62; transition: filter 0.4s ease, opacity 0.4s ease; }
.m-marquee img:hover { filter: none; opacity: 1; }
.m-marquee .m-name { font: 600 15px/1 'Space Grotesk', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.m-marquee .m-name::before { content: '◆'; color: var(--gold); margin-right: 14px; font-size: 9px; vertical-align: 3px; }

/* stat band */
.m-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 64px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); }
.m-stat { background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)), var(--bg); padding: 26px 22px; }
.m-stat b { display: block; font: 500 clamp(30px, 4vw, 44px)/1 'Space Grotesk', sans-serif; letter-spacing: -0.04em; background: linear-gradient(120deg, #fff4d6, #ffd277 45%, #ff9f5a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-stat span { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* pricing band */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.price-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.014)); }
.price-card.m-feature { border-color: rgba(255, 210, 119, 0.35); background: radial-gradient(circle at 90% 0, rgba(255, 122, 61, 0.14), transparent 45%), linear-gradient(150deg, rgba(255, 210, 119, 0.06), rgba(255, 255, 255, 0.014)); }
.price-card .tier { font: 600 11px ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); }
.price-card .amount { display: block; margin: 18px 0 4px; font: 500 40px/1 'Space Grotesk', sans-serif; letter-spacing: -0.04em; color: #fff; }
.price-card .amount small { font-size: 15px; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.price-card .unit { color: var(--muted); font-size: 13px; }
.price-card p { color: var(--body); margin: 14px 0 0; font-size: 14.5px; line-height: 1.65; }
.price-card ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.price-card li { color: var(--body); font-size: 13.5px; padding-left: 20px; position: relative; }
.price-card li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, #ffd277, #ff7a3d); }
.price-note { margin-top: 14px; color: var(--muted); font-size: 13px; }

/* process (work.css already styles .process/.step) */
.process { position: relative; }
.process::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, #ffd277, #ff7a3d, rgba(255, 122, 61, 0.2));
  transform-origin: 0 50%; transform: scaleX(var(--p, 1));
}
.m-js .process::before { transform: scaleX(var(--p, 0)); }
.step { position: relative; }
.step .n { display: block; font: 600 11px ui-monospace, monospace; letter-spacing: 0.16em; color: var(--gold); margin-bottom: 12px; }
.step::before {
  content: ''; position: absolute; top: -5px; left: 8px; width: 9px; height: 9px; border-radius: 50%;
  background: #070708; border: 1px solid rgba(255, 210, 119, 0.6); transition: background 0.5s ease, box-shadow 0.5s ease;
}
.step.m-lit::before { background: #ffd277; box-shadow: 0 0 14px rgba(255, 190, 100, 0.9); }
.step { border-top-color: transparent !important; }

/* FAQ */
.faq-list { display: grid; gap: 10px; }
.faq { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.022); overflow: hidden; transition: border-color 0.3s ease, background 0.3s ease; }
.faq[open] { border-color: rgba(255, 210, 119, 0.32); background: linear-gradient(145deg, rgba(255, 210, 119, 0.05), rgba(255, 255, 255, 0.018)); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; position: relative; font: 500 18px/1.35 'Space Grotesk', sans-serif; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg);
  transition: transform 0.4s var(--ease-out), margin 0.4s var(--ease-out);
}
.faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .faq-a { padding: 0 22px 20px; color: var(--body); line-height: 1.7; }
.faq .faq-a p { margin: 0; }

/* footer */
.m-foot { max-width: var(--max); margin: 0 auto; padding: 56px 24px 30px; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; text-align: left; }
.m-foot h4 { font: 600 11px ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.m-foot a { display: block; color: var(--body); padding: 4px 0; font-size: 14px; transition: color 0.2s ease, transform 0.3s var(--ease-out); }
.m-foot a:hover { color: #fff; transform: translateX(3px); }
.m-foot p { color: var(--muted); font-size: 13.5px; line-height: 1.7; margin: 10px 0 0; max-width: 340px; }
.m-foot .brand { display: inline-block; }
.m-foot-base { max-width: var(--max); margin: 0 auto; padding: 18px 24px 34px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.m-foot-base a { color: var(--muted); } .m-foot-base a:hover { color: #fff; }
.footer.m-footer { padding: 0; text-align: left; }

/* keyframes */
@keyframes m-rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes m-fade { to { opacity: 1; } }
@keyframes m-pop { from { opacity: 0; transform: scale(0.85) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes m-side { from { opacity: 0; transform: perspective(900px) translateX(40px) rotateY(-14deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes m-portrait { from { opacity: 0; filter: blur(12px) saturate(0); } to { opacity: 1; filter: none; } }
@keyframes m-word { to { transform: none; opacity: 1; } }
@keyframes m-shine { to { background-position: 0 0; } }
@keyframes m-draw-y { to { transform: scaleY(1); } }
@keyframes m-scan-once { 0% { top: -30%; opacity: 0; } 15% { opacity: 1; } 100% { top: 110%; opacity: 0; } }
@keyframes m-scan-loop { from { top: -20%; } to { top: 120%; } }
@keyframes m-holo-spin { to { --holoA: 360deg; } }
@keyframes m-sheen { 0%, 62% { left: -60%; } 80%, 100% { left: 130%; } }
@keyframes m-ripple { from { width: 8px; height: 8px; opacity: 0.85; } to { width: 96px; height: 96px; opacity: 0; } }
@keyframes m-marquee { to { transform: translateX(-50%); } }
@keyframes m-blink { 50% { opacity: 0.35; } }

@media (max-width: 850px) {
  .m-stats { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; }
  /* stacked steps: the progress rail runs down the left edge instead */
  .process::before { left: 12px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
    background: linear-gradient(180deg, #ffd277, #ff7a3d, rgba(255, 122, 61, 0.2));
    transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
  .m-js .process::before { transform: scaleY(var(--p, 0)); }
  .process .step { padding-left: 34px; }
  .process .step::before { top: 26px; left: 8px; }
  .m-foot { grid-template-columns: 1fr 1fr; }
  .m-foot > :first-child { grid-column: 1 / -1; }
  .category .m-ghost { font-size: 130px; }
  .m-cursor { display: none; }
}
@media (max-width: 520px) {
  .m-stats { grid-template-columns: 1fr 1fr; }
  .m-stat { padding: 20px 16px; }
  .m-marquee-track > * { margin-right: 36px; }
}

/* hover-only effects stay off touch screens */
@media (hover: none) {
  .m-spot, .m-cursor { display: none; }
}

/* reduced motion: everything visible, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .m-js .hero .eyebrow, .m-js .hero .lede, .m-js .hero .actions > *, .m-js .hero .proof > div,
  .m-js .hero .identity-line > span, .m-js .hero-side, .m-js .portrait-wrap, .m-js .hero h1:not(.m-split) {
    opacity: 1 !important; animation: none !important; filter: none !important;
  }
  .m-split .m-wi, .m-split.m-shine .m-wi { transform: none; opacity: 1; animation: none; background: none; -webkit-text-fill-color: currentColor; }
  .m-js [data-m], .m-js [data-m].m-in { opacity: 1; transform: none; filter: none; transition: none; }
  .m-js .case[data-m] .m-media { clip-path: none; }
  .m-js .case[data-m] .chips span { opacity: 1; transform: none; }
  .m-js .process::before, .m-js .hero .proof > div::before { transform: none; animation: none; }
  .m-aurora, .m-marquee-track, .btn.primary::before, .nav-cta::before, .holo-ring, .m-live-badge i, .img-scan::after, .m-backdrop::after, .m-cta-art { animation: none !important; }
  .m-backdrop-still { opacity: 1; filter: none; transform: none; transition: none; }
  #m-field, .m-cursor { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* printing or saving as PDF: everything visible and still, no chrome */
@media print {
  .m-js [data-m], .m-js .case[data-m] .m-media, .m-js .case[data-m] .chips span,
  .m-js .hero .eyebrow, .m-js .hero .lede, .m-js .hero .actions > *, .m-js .hero .proof > div,
  .m-js .hero .identity-line > span, .m-js .hero-side, .m-js .portrait-wrap, .m-split .m-wi {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; animation: none !important;
  }
  .m-split.m-shine .m-wi { background: none !important; -webkit-text-fill-color: currentColor !important; }
  #m-field, .m-aurora, .m-grain, .m-vignette, .m-cursor, .m-progress, .m-sheet, .holo-ring, .m-spot { display: none !important; }
}