/* Fusion Tech AI · art-direction pass (Wave 2026-10-11, Ricky: "fonts too blocky", "big light underneath", "intro is cheesy").
   Loaded after the inline <style>, so it only overrides. Reviews: Codex (fusion_review/CODEX_REVIEW.md) + Grok. */

/* ---------- Type: editorial serif display + humanist sans ---------- */
body{font-family:'Manrope',system-ui,sans-serif;font-feature-settings:"ss01" on}
h1,h2,.display,.sec-title,.founder-quote{font-family:'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:-.012em}
h1 em,h2 em,.founder-quote em{font-style:italic}
h2 .grad,.sec-title .grad{font-style:italic;padding-right:.06em}
h3{font-family:'Manrope',system-ui,sans-serif;font-weight:700;letter-spacing:-.012em}
.btn{font-family:'Manrope',system-ui,sans-serif;font-weight:700;letter-spacing:-.005em}
.eyebrow{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.24em}
.founder-name{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.01em}
.founder-quote{font-size:clamp(34px,5.6vw,66px);line-height:1.04;letter-spacing:-.015em}

/* ---------- Quiet the atmosphere ---------- */
.ghost-type,.grid-overlay,.cur-dot,.cur-ring,#core,.disc-layer,.scroll-hint{display:none!important}
body.cursor-on,body.cursor-on a,body.cursor-on button{cursor:auto}
#particles,.stack-viz{display:none!important}

/* ---------- Hero ---------- */
.hero{padding:104px 0 80px}
.hero-content{max-width:980px;z-index:auto;isolation:auto}
.hero{isolation:auto}
.hero-atom{position:relative;width:clamp(150px,19vw,224px);aspect-ratio:1;margin:0 auto 6px;pointer-events:none}
.hero-atom::after{content:"";position:absolute;inset:18%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(34,211,238,.20),rgba(127,211,239,.08) 55%,transparent 75%);filter:blur(18px)}
.hero-atom video{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
  opacity:0;transform:scale(.94);animation:heroAtomIn 1.4s var(--ease-out) .25s forwards}
@keyframes heroAtomIn{to{opacity:1;transform:none}}
.hero-k{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:#8fe8f5;margin:0 0 22px;opacity:.85}
.hero h1{font-size:clamp(54px,8.8vw,116px);line-height:.95;letter-spacing:-.018em;margin-bottom:28px;font-weight:400}
.hero h1 .grad{display:inline-block;padding:0 .08em .06em 0}
.lede{font-family:'Manrope',system-ui,sans-serif;font-weight:400;font-size:clamp(17px,1.9vw,19.5px);line-height:1.62;color:#b4bedb;max-width:620px}
.lede b{color:#eef2ff;font-weight:700}
.hero .cta-row{margin-top:6px}

/* ---------- Intro: the atom materializes, the wordmark settles, gone in under 2 s ---------- */
#entry{gap:18px;background:radial-gradient(circle at 50% 44%,#0b1224 0%,#05070e 72%)}
#entry .en-atom{width:min(46vw,210px);aspect-ratio:1}
#entry .en-vid{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent 100%);mask-image:radial-gradient(closest-side,#000 60%,transparent 100%);
  opacity:0;filter:blur(10px);transform:scale(.88);animation:enAtom 1.1s cubic-bezier(.16,1,.3,1) .05s forwards}
@keyframes enAtom{to{opacity:1;filter:blur(0);transform:none}}
#entry .en-word{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(28px,4.6vw,40px);letter-spacing:-.005em;color:#eef2ff;
  opacity:0;transform:translateY(10px);animation:enUp .8s cubic-bezier(.16,1,.3,1) .55s forwards}
#entry .en-word em{font-style:italic;background:linear-gradient(110deg,#22d3ee,#c7d4de);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
#entry .en-line{width:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.8),transparent);animation:enLine 1s cubic-bezier(.65,0,.35,1) .8s forwards}
@keyframes enUp{to{opacity:1;transform:none}}
@keyframes enLine{to{width:min(56vw,260px)}}
#entry .skip{font-family:'Manrope',system-ui,sans-serif;font-weight:600;letter-spacing:.14em}

@media (max-width:760px){
  .hero{padding:92px 0 64px;min-height:auto}
  .hero-atom{width:150px;margin-bottom:2px}
  .hero-k{font-size:10.5px;letter-spacing:.24em;margin-bottom:16px}
  .hero h1{font-size:clamp(50px,13.4vw,64px)}
}
@media (prefers-reduced-motion:reduce){
  .hero-atom video,#entry .en-vid,#entry .en-word,#entry .en-line{animation:none;opacity:1;filter:none;transform:none}
  #entry .en-line{width:min(56vw,260px)}
}

/* ---------- Example-restaurant demo photos (illustrative, Higgsfield; no client named) ---------- */
.r-th1,.r-th2,.r-th3,.r-th4{background-size:cover;background-position:center}
.r-th1{background-image:url(/media/demo/croissant-sq.webp)}
.r-th2{background-image:url(/media/demo/flatbread-sq.webp)}
.r-th3{background-image:url(/media/demo/latte-sq.webp)}
.r-th4{background-image:url(/media/demo/cookie-sq.webp)}
.pf-card .pf-img.r-th1{background-image:url(/media/demo/croissant-wide.webp)}
.pf-card .pf-img.r-th2{background-image:url(/media/demo/flatbread-wide.webp)}
.pf-card .pf-img.r-th3{background-image:url(/media/demo/latte-wide.webp)}
.pf-card .pf-img.r-th4{background-image:url(/media/demo/cookie-wide.webp)}

/* ---------- Calmer rhythm ---------- */
section{padding:100px 0}
.grad,h1 .grad,h2 .grad{animation:none!important;background-size:100% auto!important}
@media (max-width:940px){.hero .hero-call{display:none}}
@media (max-width:760px){section{padding:76px 0}}
#value-h{font-size:clamp(30px,3.4vw,46px);line-height:1.08}
@media (max-width:560px){
  .flowdiag[data-mode="usual"]{padding-bottom:150px}
  .fd-external{width:max-content;max-width:calc(100% - 20px)}
}
.flowdiag[data-mode="usual"] .fd-brandline span{visibility:hidden}
@media (max-width:560px){.flowdiag[data-mode="usual"] .fd-brandline{bottom:110px}}
/* Marina bench line (merged from the old Lab section) */
.bench{margin-top:34px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding:20px 24px;border:1px solid var(--border2);border-radius:16px;background:rgba(255,255,255,.02)}
.bench-k{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#cfe3ee}
.bench p{margin:0;color:#b4bedb;font-size:15.5px;line-height:1.6;flex:1 1 360px}
.bench p b{color:#eef2ff}
.bench .clink{white-space:nowrap}
#method .steps{align-self:center}

/* Retire Space Grotesk everywhere it was hard-coded (non-display text) */
h3,
.brand,
.nav-cta,
.btn,
.ghost-type,
.frow .qm,
.demo-toggle button,
.r-brand,
.r-checkout,
.ext .ext-logo,
.mod-title,
.mod-add,
.fd-x-l,
.pf-shot .pf-name,
.clink-arrow,
.spec .hook,
.rnd-card h4,
.lab-copy .clink,
.step h4,
.founder-name,
.lopt .lo-t{font-family:'Manrope',system-ui,sans-serif!important;letter-spacing:-.01em}
.sec-title .grad,h2 .grad{background:linear-gradient(110deg,#22d3ee 0%,#7fd3ef 50%,#c7d4de 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ================= CHROME HEADLINE (Ricky 7:07 PM: bold, stainless, blue, 3D, like the orb) ================= */
:root{--disp:'Montserrat',system-ui,sans-serif}
h1,h2,.display,.sec-title,.founder-quote{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;font-style:normal}
h2 .grad,.sec-title .grad,h1 em,h2 em,.founder-quote em{font-style:normal}
.hero h1.chrome-h{font-family:var(--disp);font-weight:800;font-size:clamp(46px,8vw,104px);line-height:1.04;letter-spacing:.006em;margin-bottom:30px;
  animation:chrPulse 4.8s ease-in-out infinite}
.chr{position:relative;display:inline-block;color:transparent;-webkit-text-fill-color:transparent;padding:0 .02em .1em}
/* layer 1 (back): extrusion depth + glow */
.chr::before,.chr::after{content:attr(data-text);position:absolute;left:0;top:0;right:0;padding:inherit;text-align:inherit;pointer-events:none}
.chr::before{z-index:0;color:#0d2548;-webkit-text-fill-color:#0d2548;
  text-shadow:0 1px 0 #2b6299,0 2px 0 #235384,0 3px 0 #1c456f,0 4px 0 #16375b,0 5px 0 #112c49,0 6px 0 #0c223a,0 9px 20px rgba(0,0,0,.7),0 0 46px rgba(34,211,238,.26)}
/* layer 2 (front): polished chrome face + travelling light band (two backgrounds, only the band moves) */
.chr::after{z-index:1;color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  background-repeat:no-repeat;background-size:260% 100%,100% 100%;background-position:130% 0,0 0;
  animation:chrSweep 7s cubic-bezier(.45,0,.2,1) infinite 1.4s}
.chr-1::after{background-image:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.95) 48%,rgba(170,236,255,.75) 52%,transparent 60%),
  linear-gradient(180deg,#ffffff 0%,#f4f8ff 26%,#cdd9e7 44%,#5f7893 50%,#7f97b1 55%,#dcebfb 68%,#ffffff 82%,#a6dfff 100%)}
.chr-2::after{background-image:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.95) 48%,rgba(170,236,255,.75) 52%,transparent 60%),
  linear-gradient(180deg,#f0fbff 0%,#aeeeff 26%,#52c6ff 42%,#1d4fb6 50%,#2a62d6 56%,#55d4ff 69%,#c4f4ff 83%,#a6d8ee 100%);animation-delay:1.7s}
@keyframes chrSweep{0%{background-position:130% 0,0 0}55%,100%{background-position:-70% 0,0 0}}
@keyframes chrPulse{0%,100%{filter:drop-shadow(0 0 14px rgba(34,211,238,.22)) drop-shadow(0 0 2px rgba(255,255,255,.15))}
  50%{filter:drop-shadow(0 0 26px rgba(34,211,238,.42)) drop-shadow(0 0 3px rgba(255,255,255,.25))}}
@media (max-width:760px){.hero h1.chrome-h{font-size:clamp(40px,11.4vw,58px);line-height:1.05}.chr::before{text-shadow:0 1px 0 #2b6299,0 2px 0 #1c456f,0 3px 0 #112c49,0 6px 14px rgba(0,0,0,.6),0 0 30px rgba(34,211,238,.24)}}
@media (prefers-reduced-motion:reduce){.hero h1.chrome-h,.chr::after{animation:none}}
/* intro wordmark matches */
#entry .en-word{font-family:var(--disp);font-weight:800;letter-spacing:.01em}
#entry .en-word em{font-style:normal}

/* ================= ANIMATED ORDER FLOW (Ricky 7:12 PM: 3D tiles, arrows that flow, usual way ugly, our way beautiful) ================= */
.flowdiag.fx{padding:0!important;margin-top:18px}
.flowdiag.fx .fd-brandline,.flowdiag.fx .fd-external{display:none}
.fx-rail{display:none;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr);align-items:start;gap:0;padding:10px 0 4px}
.flowdiag[data-mode="usual"] .fx-usual,.flowdiag[data-mode="fusion"] .fx-fusion{display:grid}
.fx-step{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.fx-armed .fx-step{opacity:0;transform:translateY(12px) scale(.96);filter:blur(4px)}
.fx-on .fx-step{animation:fxIn .55s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i) * .62s + .1s)}
@keyframes fxIn{to{opacity:1;transform:none;filter:none}}
.fx-tile{display:block;width:clamp(78px,9vw,112px);aspect-ratio:1;border-radius:24%;overflow:hidden;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.fx-tile img{width:100%;height:100%;object-fit:cover;display:block}
.fx-step:hover .fx-tile{transform:translateY(-4px) rotateX(8deg)}
.fx-step figcaption{display:flex;flex-direction:column;gap:3px;max-width:150px}
.fx-step figcaption b{font:700 13.5px/1.3 'Manrope',system-ui,sans-serif;color:#eef2ff;letter-spacing:-.005em}
.fx-step figcaption span{font:400 12px/1.4 'Manrope',system-ui,sans-serif;color:#8f9bbb}
/* usual way: cold, desaturated, a little crooked */
.fx-step.dull .fx-tile{filter:grayscale(.55) brightness(.85)}
.fx-step.dull .fx-tile img{transform:rotate(-2deg) scale(1.03)}
.fx-on .fx-step.lost{animation:fxIn .55s cubic-bezier(.16,1,.3,1) forwards,fxShake .5s ease-in-out forwards;animation-delay:calc(var(--i) * .62s + .1s),calc(var(--i) * .62s + .7s)}
.fx-step.lost .fx-tile{box-shadow:0 18px 40px -16px rgba(0,0,0,.8),0 0 0 1px rgba(255,90,110,.35),0 0 30px -6px rgba(255,70,90,.55)}
.fx-step.lost figcaption b{color:#ff8fa3}
@keyframes fxShake{0%,100%{translate:0}20%{translate:-5px}40%{translate:5px}60%{translate:-3px}80%{translate:2px}}
/* our way: the finish glows */
.fx-step.win .fx-tile{box-shadow:0 18px 40px -16px rgba(0,0,0,.8),0 0 0 1px rgba(34,211,238,.45),0 0 34px -4px rgba(34,211,238,.6)}
.fx-step.win figcaption b{color:#9ff0ff}
/* arrows: line draws in, then a light dash travels along it forever */
.fx-arrow{position:relative;align-self:start;margin-top:calc(clamp(78px,9vw,112px) / 2 - 1px);height:2px;width:100%;display:block}
.fx-arrow i{position:absolute;inset:0;transform-origin:left center;border-radius:2px;overflow:hidden;
  background:linear-gradient(90deg,rgba(34,211,238,.25),rgba(127,211,239,.55))}
.fx-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid rgba(127,211,239,.8);border-right:0}
.fx-armed .fx-arrow i{transform:scaleX(0)}.fx-armed .fx-arrow::after,.fx-armed .fx-arrow em,.fx-armed .fx-ghost{opacity:0}
.fx-on .fx-arrow i{animation:fxDraw .45s ease-out forwards;animation-delay:calc(var(--i) * .62s + .55s)}
.fx-on .fx-arrow::after{animation:fxFade .2s linear forwards;animation-delay:calc(var(--i) * .62s + .95s)}
.fx-arrow i::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-40%;background:linear-gradient(90deg,transparent,#e8fbff,transparent);
  animation:fxRun 1.15s linear infinite;animation-delay:calc(var(--i) * .62s + 1s)}
@keyframes fxDraw{to{transform:scaleX(1)}}
@keyframes fxFade{to{opacity:1}}
@keyframes fxRun{to{left:110%}}
.fx-arrow.bad i{background:repeating-linear-gradient(90deg,#ff7a95 0 6px,transparent 6px 11px)}
.fx-arrow.bad::after{border-left-color:#ff7a95}
.fx-arrow.bad i::after{background:linear-gradient(90deg,transparent,rgba(255,200,210,.9),transparent)}
.fx-arrow.jog i{transform-origin:left center}
.fx-on .fx-arrow.jog{animation:fxJog .5s ease-in-out forwards;animation-delay:calc(var(--i) * .62s + 1s)}
@keyframes fxJog{30%{transform:translateY(5px)}60%{transform:translateY(-3px)}100%{transform:none}}
.fx-arrow.sputter i::after{animation:fxSputter 1.6s steps(6) infinite}
@keyframes fxSputter{0%{left:-40%;opacity:1}50%{left:40%;opacity:.2}60%{opacity:0}100%{left:60%;opacity:0}}
.fx-arrow em{position:absolute;left:50%;top:10px;transform:translateX(-50%);white-space:nowrap;font:600 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#ff8fa3;font-style:normal}
.fx-on .fx-arrow em{animation:fxFade .3s linear forwards;animation-delay:calc(var(--i) * .62s + 1s)}
.fx-arrow.good i{background:linear-gradient(90deg,rgba(34,211,238,.55),rgba(127,211,239,.75))}
.fx-arrow.good::after{border-left-color:#9fdcf2}
/* the invisible POS: a ghost pill hanging under the arrow */
.fx-arrow.pos em{top:auto;bottom:auto;top:16px;white-space:normal;width:150px;text-align:center;line-height:1.35;letter-spacing:.04em;text-transform:none;
  font:500 10.5px/1.35 'Manrope',system-ui,sans-serif;color:#9fdcff;border:1px dashed rgba(34,211,238,.4);border-radius:10px;padding:6px 8px;background:rgba(34,211,238,.04)}
/* toggle: invite the tap */
.demo-toggle button{position:relative}
.demo-toggle button:not(.on)::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:1.5px solid rgba(34,211,238,.7);animation:tapRing 1.8s ease-out infinite;pointer-events:none}
.demo-toggle button:not(.on)::before{content:"";position:absolute;right:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#22d3ee;box-shadow:0 0 10px #22d3ee;animation:tapDot 1.8s ease-in-out infinite}
@keyframes tapRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
@keyframes tapDot{0%,100%{opacity:.35}50%{opacity:1}}
.demo-toggle button:not(.on){padding-right:26px}
@media (max-width:760px){
  .fx-rail{grid-template-columns:1fr;justify-items:center;gap:0}
  .fx-step{flex-direction:row;text-align:left;gap:14px;width:100%;max-width:330px}
  .fx-tile{width:84px}
  .fx-step figcaption{max-width:none}
  .fx-arrow{width:2px;height:34px;margin:6px 0 6px 0;align-self:start;margin-left:max(0px,calc(50% - 165px + 41px))}
  .fx-arrow i{transform-origin:center top;background:linear-gradient(180deg,rgba(34,211,238,.25),rgba(127,211,239,.6))}
  @keyframes fxDraw{to{transform:scaleY(1)}}
  .fx-armed .fx-arrow i{transform:scaleY(0)}
  .fx-arrow.bad i{background:repeating-linear-gradient(180deg,#ff7a95 0 6px,transparent 6px 11px)}
  .fx-arrow::after{right:auto;left:-4px;top:auto;bottom:-6px;border:5px solid transparent;border-top:7px solid rgba(127,211,239,.8);border-bottom:0}
  .fx-arrow.bad::after{border-top-color:#ff7a95;border-left-color:transparent}
  .fx-arrow i::after{width:auto;height:38%;left:0;right:0;top:-40%;bottom:auto;background:linear-gradient(180deg,transparent,#e8fbff,transparent);animation-name:fxRunV}
  @keyframes fxRunV{to{top:110%}}
  .fx-arrow em{left:16px;top:50%;transform:translateY(-50%)}
  .fx-arrow.pos{height:64px}
  .fx-arrow.pos em{left:18px;width:220px;top:50%;transform:translateY(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .fx-step,.fx-on .fx-step{animation:none;opacity:1;transform:none;filter:none}
  .fx-arrow i{transform:none}.fx-arrow::after,.fx-arrow em{opacity:1}
  .fx-arrow i::after,.demo-toggle button::after,.demo-toggle button::before{animation:none}
}

/* flow: fit the narrow column cleanly */
.fx-rail{grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr)}
.fx-tile{width:clamp(70px,7vw,96px)}
.fx-arrow{margin-top:calc(clamp(70px,7vw,96px) / 2 - 1px)}
.fx-step figcaption{max-width:100%;padding:0 2px}
.fx-step figcaption b{font-size:12.5px}
.fx-step figcaption span{font-size:11px}
.fx-arrow em{top:auto;bottom:9px;left:50%;transform:translateX(-50%);white-space:normal;width:58px;text-align:center;font-size:8px;line-height:1.25;letter-spacing:.06em}
.fx-arrow.pos em{display:none}
.fx-ghost{grid-column:3 / 6;grid-row:2;margin-top:12px;position:relative;text-align:center;
  border:1px dashed rgba(34,211,238,.38);border-radius:12px;padding:9px 12px;background:rgba(34,211,238,.035);opacity:.85}
.fx-ghost span{font:500 11.5px/1.35 'Manrope',system-ui,sans-serif;color:#9fdcff;letter-spacing:.01em}
.fx-ghost::before,.fx-ghost::after{content:"";position:absolute;top:-13px;width:1px;height:12px;background:repeating-linear-gradient(180deg,rgba(34,211,238,.5) 0 3px,transparent 3px 6px)}
.fx-ghost::before{left:16%}.fx-ghost::after{right:16%}
.fx-on .fx-ghost{animation:fxGhost .6s ease forwards;animation-delay:1.6s}
@keyframes fxGhost{to{opacity:.85}}
@media (max-width:760px){
  .fx-rail{grid-template-columns:1fr;justify-items:start;max-width:340px;margin:0 auto}
  .fx-step{max-width:none}
  .fx-tile{width:84px}
  .fx-arrow{margin:6px 0 6px 41px!important;width:2px;height:34px}
  .fx-arrow em{left:16px;bottom:auto;top:50%;transform:translateY(-50%);width:auto;white-space:nowrap;text-align:left;font-size:9px}
  .fx-arrow.pos{height:62px}
  .fx-arrow.pos em{display:block;white-space:normal;width:min(230px,calc(100vw - 150px));font-size:10.5px}
  .fx-ghost{display:none}
  .fx-step figcaption b{font-size:14px}.fx-step figcaption span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.fx-ghost{animation:none;opacity:.85}}