/* ============================================================
   Forgia — Custom Software Studio
   Forge identity: warm iron/charcoal + ember orange. Technical, precise.
   Theme-aware: [data-theme="dark"] (default) + [data-theme="light"]
   ============================================================ */

:root {
  --accent:      #ff6a2b;   /* ember */
  --accent-2:    #ff9d5c;
  --accent-deep: #e0521a;

  --radius-lg: 20px;
  --radius-md: 13px;
  --radius-pill: 999px;

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* DARK (default) */
:root, [data-theme="dark"] {
  --bg:        #15110d;
  --bg-alt:    #1d1813;
  --surface:   rgba(255,255,255,.035);
  --surface-h: rgba(255,106,43,.07);
  --ink:       #ece6dd;
  --ink-soft:  #a99f92;
  --heading:   #fdfaf5;
  --border:    rgba(255,255,255,.1);
  --border-soft: rgba(255,255,255,.06);
  --nav-bg:        rgba(21,17,13,.6);
  --nav-bg-solid:  rgba(21,17,13,.9);
  --shadow:    0 24px 60px -24px rgba(0,0,0,.6);
  --shadow-sm: 0 10px 30px -16px rgba(0,0,0,.5);
  --glow-op:   .5;
  /* fx layer */
  --grid-line:  rgba(255,255,255,.055);
  --grain-op:   .04;
  --spark-op:   .85;
  --cursor-op:  .16;
  --scan-tint:  rgba(255,106,43,.14);
}
/* LIGHT */
[data-theme="light"] {
  --bg:        #faf7f2;
  --bg-alt:    #f1ebe1;
  --surface:   #ffffff;
  --surface-h: #fff6f0;
  --ink:       #322b25;
  --ink-soft:  #6e6358;
  --heading:   #1a1512;
  --border:    rgba(26,21,18,.12);
  --border-soft: rgba(26,21,18,.07);
  --nav-bg:        rgba(250,247,242,.72);
  --nav-bg-solid:  rgba(250,247,242,.93);
  --shadow:    0 24px 60px -28px rgba(60,40,20,.28);
  --shadow-sm: 0 10px 30px -18px rgba(60,40,20,.2);
  --glow-op:   .26;
  /* fx layer — lighter grid, far less grain so the cream stays clean */
  --grid-line:  rgba(26,21,18,.07);
  --grain-op:   .022;
  --spark-op:   .95;
  --cursor-op:  .1;
  --scan-tint:  rgba(255,106,43,.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg);
  line-height: 1.6; overflow-x: hidden;
  transition: background .4s var(--ease), color .4s var(--ease);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, 92vw); margin: 0 auto; }
h1,h2,h3 { font-family: var(--font-display); color: var(--heading); letter-spacing: -.01em; }

/* glow blobs */
.glow { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.glow span { position: absolute; border-radius: 50%; filter: blur(100px); opacity: var(--glow-op); transition: opacity .4s var(--ease); }
.glow-a { width: 520px; height: 520px; background: radial-gradient(circle, var(--accent) 0%, transparent 65%); top: -180px; right: -120px; }
.glow-b { width: 460px; height: 460px; background: radial-gradient(circle, #ff8a00 0%, transparent 65%); bottom: -200px; left: -140px; opacity: calc(var(--glow-op) * .7); }

/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 16px 0; background: var(--nav-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-soft); transition: padding .3s var(--ease), background .3s var(--ease); }
.nav.scrolled { padding: 10px 0; background: var(--nav-bg-solid); }
.nav-inner { width: min(1180px, 92vw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 32px; height: 32px; color: var(--heading); display: inline-flex; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: .005em; color: var(--heading); }
.nav-links { display: flex; align-items: center; gap: 24px; font-weight: 500; font-size: .95rem; }
.nav-links > a:not(.btn) { position: relative; color: var(--ink); padding: 4px 0; }
.nav-links > a:not(.btn)::after { content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--accent); border-radius:2px; transition: right .3s var(--ease); }
.nav-links > a:not(.btn):hover { color: var(--heading); }
.nav-links > a:not(.btn):hover::after { right: 0; }
.nav-controls { display: inline-flex; align-items: center; gap: 12px; }

.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.lang-switch button { appearance: none; background: transparent; border: 0; color: var(--ink-soft); font: inherit; font-weight: 700; font-size: .76rem; letter-spacing: .04em; padding: 6px 11px; cursor: pointer; transition: background .2s, color .2s; }
.lang-switch button.active { background: var(--accent); color: #fff; }
.lang-switch button:not(.active):hover { color: var(--heading); }

.theme-toggle { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; }
.theme-toggle:hover { border-color: var(--accent); background: var(--surface-h); }
.theme-sun, .theme-moon { position: absolute; width: 18px; height: 18px; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.theme-sun { border-radius: 50%; background: radial-gradient(circle, var(--accent) 40%, transparent 42%); box-shadow: 0 -11px 0 -8px var(--accent),0 11px 0 -8px var(--accent),-11px 0 0 -8px var(--accent),11px 0 0 -8px var(--accent),8px 8px 0 -8px var(--accent),-8px -8px 0 -8px var(--accent),8px -8px 0 -8px var(--accent),-8px 8px 0 -8px var(--accent); }
.theme-moon { border-radius: 50%; box-shadow: inset -6px -2px 0 0 var(--ink); transform: rotate(-20deg); }
[data-theme="light"] .theme-sun { opacity: 0; transform: scale(.4) rotate(-40deg); }
[data-theme="light"] .theme-moon { opacity: 1; }
[data-theme="dark"] .theme-sun { opacity: 1; }
[data-theme="dark"] .theme-moon { opacity: 0; transform: scale(.4) rotate(40deg); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 600; font-size: .95rem; cursor: pointer; border: 1.5px solid transparent; transition: transform .2s var(--ease), background .2s, border-color .2s; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; box-shadow: 0 12px 30px -12px rgba(255,106,43,.6); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--heading); transform: translateY(-2px); }

.mobile-toggle { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; }
.mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* kicker / sections */
.kicker { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 600; color: var(--accent); margin: 0 0 16px; }
.section { position: relative; z-index: 1; padding: 100px 0; }
/* No alternating fill at all. The alternation existed to give the page rhythm
   back when the background was empty; the grid + ember field + glow now do that,
   and a tonal band on top of them just reads as an out-of-place slab. Section
   padding and the heading hierarchy carry the rhythm instead. */
.section-alt { background: transparent; }
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section-title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.12; font-weight: 700; margin: 8px 0 0; }
.section-text { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 16px; }
.section-text.center { margin: 16px auto 0; max-width: 620px; }

/* hero */
.hero { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; padding: 150px 0 90px; }
.hero-inner { width: min(1180px, 92vw); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; }
.hero-text { min-width: 0; }
.hero-title { font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1.02; font-weight: 700; margin: 0 0 24px; }
.hero-title .hot { position: relative; color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; }
.hero-copy { max-width: 560px; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--ink-soft); margin: 0 0 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* hero code card */
.hero-card { min-width: 0; }
.term { background: #100d0a; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 18px 20px 22px; box-shadow: var(--shadow); }
.term .dots { display: flex; gap: 7px; margin-bottom: 16px; }
.term .dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a342d; }
.term .dots i:first-child { background: var(--accent); }
.term code { font-family: var(--font-mono); font-size: .92rem; line-height: 1.9; color: #d7cfc4; display: block; white-space: pre-wrap; }
.term .c-mut { color: #6f675c; }
.term .c-key { color: #ff9d5c; }
.term .c-str { color: #9ed59b; }
.term .c-fn  { color: #6cc6ff; }

/* about */
.about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: start; }

/* services */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* single transition declaration — the rule previously declared `transition`
   twice, so the second silently dropped the background transition */
.svc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px 22px; position: relative; overflow: hidden; opacity: 0; transition: opacity .6s var(--ease) var(--d,0s), transform .6s var(--ease) var(--d,0s), border-color .3s, background .3s; }
.svc.in-view { opacity: 1; transform: translateY(0); }
.svc:hover { border-color: var(--accent); background: var(--surface-h); transform: translateY(-5px); }
.svc h3 { font-size: 1.12rem; margin: 0 0 8px; }
.svc p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* process */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.step { padding: 24px 18px; border-top: 2px solid var(--border); }
.step:hover { border-top-color: var(--accent); }
.step-n { font-family: var(--font-mono); font-weight: 600; color: var(--accent); font-size: .95rem; }
.step h3 { font-size: 1.1rem; margin: 12px 0 8px; }
.step p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* why */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px 22px; }
.why h3 { font-size: 1.08rem; margin: 0 0 8px; }
.why h3::before { content: '→'; color: var(--accent); margin-right: 8px; }
.why p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* stack chips */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chips li { font-family: var(--font-mono); font-size: .88rem; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); color: var(--ink); transition: border-color .2s, color .2s, transform .2s; }
.chips li:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* contact */
.contact-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 8px 0 0; }
/* auto-fit so a single channel centres instead of hugging the left column */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); justify-content: center; gap: 16px; margin-top: 8px; max-width: 760px; margin-left: auto; margin-right: auto; }
.contact-card { display: flex; flex-direction: column; gap: 6px; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: transform .25s var(--ease), border-color .25s; }
.contact-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.contact-label { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.contact-value { font-weight: 600; color: var(--heading); word-break: break-word; }

/* footer */
.footer { position: relative; z-index: 1; padding: 36px 0; border-top: 1px solid var(--border-soft); background: transparent; font-size: .9rem; color: var(--ink-soft); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand .brand-mark { width: 28px; height: 28px; }
.footer-brand b { font-family: var(--font-display); font-size: 1.05rem; color: var(--heading); display: block; }
.footer-brand small { color: var(--ink-soft); }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* responsive */
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-card { max-width: 460px; }
  .about-grid { grid-template-columns: 1fr; gap: 24px; }
  .svc-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 76px 0; }
}
@media (max-width: 600px) {
  .mobile-toggle { display: block; }
  .nav-links { position: fixed; inset: 60px 0 auto 0; flex-direction: column; background: var(--nav-bg-solid); backdrop-filter: blur(16px); padding: 22px 26px 30px; align-items: stretch; gap: 16px; transform: translateY(-120%); transition: transform .35s var(--ease); border-bottom: 1px solid var(--border-soft); }
  .nav-links.open { transform: translateY(0); }
  .nav-controls { justify-content: space-between; }
  .svc-grid, .why-grid, .steps, .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   ===== FX ===== "Forged Machine" motion layer.
   Everything here is decorative. Every animated property is
   transform/opacity (compositor-only) — no layout thrash, no CLS.
   The prefers-reduced-motion block at the very end of this file
   neutralises all of it, so keep that block LAST.
   ============================================================ */

/* --- fixed background layers ------------------------------- */
.fx-grid {
  position: fixed; inset: -12%; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 68px 68px;
  transform: translate3d(0, calc(var(--fx-par, 0) * -60px), 0);
  -webkit-mask-image: radial-gradient(ellipse 85% 62% at 50% 32%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 62% at 50% 32%, #000 35%, transparent 100%);
}
.fx-sparks { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--spark-op); }
.fx-cursor {
  position: fixed; top: 0; left: 0; z-index: 0; pointer-events: none;
  width: 480px; height: 480px; margin: -240px 0 0 -240px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease);
  transform: translate3d(var(--fx-mx, 50vw), var(--fx-my, 50vh), 0);
}
.fx-cursor.on { opacity: var(--cursor-op); }
.fx-grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-2));
  transform: scaleX(var(--fx-progress, 0)); transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(255,106,43,.7);
}

/* --- hero headline: words rise + blur in -------------------- */
.fx-word { display: inline-block; will-change: transform, opacity, filter; }
.fx-anim .fx-word {
  opacity: 0; transform: translateY(.42em); filter: blur(7px);
  animation: fxWordIn .72s var(--ease) forwards; animation-delay: var(--wd, 0s);
}
@keyframes fxWordIn { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* --- terminal: caret + live edge glow ---------------------- */
.term { position: relative; }
.fx-anim .term { animation: fxTermGlow 5s var(--ease) infinite; }
@keyframes fxTermGlow {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 1px rgba(255,106,43,.18); }
  50%      { box-shadow: var(--shadow), 0 0 26px -4px rgba(255,106,43,.4), 0 0 0 1px rgba(255,106,43,.42); }
}
.fx-caret {
  display: inline-block; width: .58ch; height: 1.05em; margin-left: 1px;
  background: var(--accent); vertical-align: text-bottom;
  animation: fxBlink 1.05s steps(1) infinite;
}
@keyframes fxBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --- primary CTA: shine sweep + heat pulse ----------------- */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.fx-anim .btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.42) 46%, transparent 62%);
  transform: translateX(-130%);
  animation: fxShine 5s var(--ease) infinite; animation-delay: 1.4s;
}
@keyframes fxShine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }

/* --- HUD corner brackets + scanline sweep (cards) ---------- */
.svc, .why { position: relative; }
.hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); }
.svc:hover .hud, .why:hover .hud { opacity: 1; }
.hud::before, .hud::after {
  content: ''; position: absolute; width: 13px; height: 13px; border: 1.5px solid var(--accent);
}
.hud::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.hud::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
/* scanline lives on the card so it can be clipped by overflow:hidden */
.svc::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, transparent 0%, var(--scan-tint) 50%, transparent 100%);
  transform: translateY(-101%); transition: transform .85s var(--ease);
}
.svc:hover::before { transform: translateY(101%); }
.svc > * { position: relative; z-index: 1; }

/* --- 3D tilt (composed through custom props so reveal +
       hover + tilt never fight over `transform`) ------------- */
/* These cards also carry `.reveal`, and `.reveal.in-view` (0,2,0) sets its own
   `transform` — so the tilt transform must be declared at equal-or-higher
   specificity or it gets silently overridden the moment the card reveals. */
.svc, .svc.in-view, .svc.reveal.in-view {
  transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translate3d(0, var(--ty, 24px), 0);
}
.svc.in-view { --ty: 0px; }
.svc:hover { --ty: -5px; }
.svc.fx-tilting { transition: transform .12s linear, border-color .3s, background .3s, opacity .6s var(--ease); }
.why { transition: transform .3s var(--ease), border-color .3s, background .3s; }
.why:hover { border-color: var(--accent); background: var(--surface-h); transform: translateY(-4px); }

/* --- stack chips: infinite marquee ------------------------- */
/* Vertical padding is load-bearing: the wrapper clips with overflow:hidden, and
   chips lift 2px on hover. With zero headroom that lift (and the 1px border at
   rest, which lands right on the clip edge) gets shaved off. The mask is
   horizontal-only, so padding costs nothing visually. */
.fx-marquee { position: relative; overflow: hidden; padding: 10px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.fx-marquee .fx-track { display: flex; width: max-content; gap: 12px; animation: fxMarquee 34s linear infinite; }
.fx-marquee:hover .fx-track { animation-play-state: paused; }
.fx-marquee .chips { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }
@keyframes fxMarquee { to { transform: translateX(-50%); } }

/* --- process: line draws down as it enters ----------------- */
.step { position: relative; overflow: hidden; }
.step::after {
  content: ''; position: absolute; top: -2px; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease) var(--d, 0s);
}
.step.in-view::after { transform: scaleX(1); }
.step-n { position: relative; display: inline-block; }
.fx-anim .step.in-view .step-n { animation: fxTick .5s var(--ease) both; animation-delay: calc(var(--d, 0s) + .15s); }
@keyframes fxTick { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* --- mobile: trim the heavy bits --------------------------- */
@media (max-width: 640px) {
  .fx-cursor { display: none; }
  .fx-grid { background-size: 48px 48px; }
  .svc { transform: translate3d(0, var(--ty, 24px), 0); }  /* no tilt on touch */
}
@media (hover: none), (pointer: coarse) {
  .fx-cursor { display: none; }
}

/* ============================================================
   Reduced motion — MUST stay the last block in this file so it
   overrides the FX layer above. Motion off, content fully intact.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .svc, .why, .fx-word { opacity: 1 !important; transform: none !important; filter: none !important; }
  .step::after { transform: scaleX(1) !important; }
  .fx-sparks, .fx-cursor, .fx-progress, .fx-caret { display: none !important; }
  .fx-grid { transform: none !important; }
  .fx-marquee .fx-track { animation: none !important; }
}