/* =========================================================
   AJ — FX layer styles
   ========================================================= */

/* ---------- hero particle sculpture ---------- */
.hero__orb{position:absolute;z-index:2;left:42vw;top:1vh;width:58vw;height:78vh;cursor:grab;touch-action:pan-y}
.hero__orb.is-drag{cursor:grabbing}
.hero::after{content:"";position:absolute;z-index:1;right:12vw;top:16vh;width:min(34vw,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,107,44,.22),rgba(255,107,44,.06) 45%,transparent 70%);filter:blur(10px);pointer-events:none;animation:orbPulse 6s ease-in-out infinite}
@keyframes orbPulse{50%{transform:scale(1.08);opacity:.8}}
.hero__orbcap{position:absolute;z-index:5;left:47vw;top:calc(83vh - 40px);display:flex;gap:12px;align-items:center;color:var(--dim);pointer-events:none;white-space:nowrap}
.hero__orbcap-n{color:var(--ember)}
.hero__orbcap-t{color:var(--bone)}
.hero__orbcap-h{padding-left:12px;border-left:1px solid var(--faint)}
.hero__grain{z-index:3}
.hero__title,.hero__eyebrow{-webkit-user-select:none;user-select:none}

/* split-flap */
.hero__for{display:inline-flex;align-items:center;gap:10px;margin-left:18px;padding-left:18px;border-left:1px solid var(--faint)}
.flap{display:inline-flex;gap:2px}
.flap__c{display:inline-grid;place-items:center;width:1.32em;height:1.75em;border-radius:3px;background:#1b1b1f;color:var(--bone);font-weight:500;position:relative;box-shadow:inset 0 -1px 0 rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.04);transform-style:preserve-3d}
.flap__c::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.65)}
.flap__c.is-blank{color:transparent;background:#151518}
.flap__c.is-flip{animation:flip .11s ease-in}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-88deg)}100%{transform:rotateX(0)}}

/* portal badge */
.hero__portal-label{display:block;width:92px;height:92px;right:auto;z-index:6}
.badge{width:100%;height:100%;animation:spin 14s linear infinite;filter:drop-shadow(0 10px 24px rgba(0,0,0,.4))}
.badge__t{font-family:var(--f-mono);font-size:8.6px;letter-spacing:.16em;fill:var(--bone)}
.badge__arrow{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;color:var(--ember);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}

/* ---------- directional buttons (mdx) ---------- */
.btn::before{inset:auto;left:var(--bx,50%);top:var(--by,120%);width:260%;aspect-ratio:1;height:auto;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .6s var(--ease)}
.btn:hover::before{transform:translate(-50%,-50%) scale(1)}

/* ---------- orbs (soft ember light, mdx) ---------- */
.mani,.stats{position:relative;overflow:hidden;isolation:isolate}
.mani>*:not(.orb),.stats>*:not(.orb){position:relative;z-index:1}
.orb{position:absolute;z-index:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,107,44,.55),rgba(255,138,84,.25) 40%,transparent 70%);filter:blur(30px);mix-blend-mode:multiply;animation:drift 18s ease-in-out infinite alternate}
.orb--1{width:46vw;aspect-ratio:1;right:-12vw;top:-14vw}
.orb--2{width:34vw;aspect-ratio:1;left:-10vw;bottom:-12vw;animation-duration:22s;animation-delay:-6s}
.orb--3{width:22vw;aspect-ratio:1;left:38vw;top:30%;animation-duration:26s;opacity:.6}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,4vw) scale(1.12)}100%{transform:translate(4vw,-3vw) scale(.94)}}

/* ---------- stats (odometer) ---------- */
.stats{background:var(--bone);color:var(--ink);padding:clamp(80px,10vw,140px) var(--gut);margin-top:-28px;border-radius:28px 28px 0 0;z-index:4}
.stats__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);border-top:1px solid rgba(13,13,15,.14);padding-top:clamp(28px,3vw,44px)}
.stats__list li{display:grid;gap:10px;align-content:start}
.odo{display:flex;font-size:clamp(3rem,7vw,7.4rem);line-height:1;letter-spacing:-.05em;font-weight:500;height:1em;overflow:hidden}
.odo__pre{display:inline-block}
.odo__col{display:inline-block;height:1em;overflow:hidden}
.odo__strip{display:flex;flex-direction:column}
.odo__strip i{font-style:normal;height:1em;line-height:1;display:block}
.stats__list span:not([class]){font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(13,13,15,.6);max-width:18ch}
.stats__note{margin-top:22px;color:rgba(13,13,15,.5);font-size:10.5px}

/* ---------- showroom filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{padding:9px 15px;border-radius:999px;font-size:13.5px;color:var(--dim);box-shadow:inset 0 0 0 1px var(--faint);transition:background .35s,color .35s,box-shadow .35s}
.filters button:hover{color:var(--bone);box-shadow:inset 0 0 0 1px rgba(239,234,225,.4)}
.filters button.is-on{background:var(--ember);color:var(--ink);box-shadow:none}
.work__progress{bottom:64px}

/* ---------- engine demo ---------- */
.eng{position:relative;background:var(--ink);padding:clamp(90px,11vw,170px) var(--gut);overflow:hidden}
.eng::before{content:"";position:absolute;right:-10vw;top:10%;width:60vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,107,44,.16),transparent 65%);pointer-events:none}
.eng__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:center}
.eng__copy{display:grid;gap:24px}
.eng__copy .h2{max-width:12ch}
.eng__copy .h2 em{color:var(--ember)}
.eng__list{display:grid;gap:12px;margin-top:6px}
.eng__list li{display:flex;gap:12px;align-items:center;font-size:clamp(1rem,1.2vw,1.12rem)}
.eng__tick{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(75,227,139,.14);color:#4be38b;font-size:12px}
.eng__note{color:rgba(239,234,225,.4);font-size:10.5px}
.eng__stage{--glow:0;position:relative;display:flex;justify-content:center;min-height:660px}
.phone{position:relative;width:330px;height:660px;border-radius:48px;background:#0a0a0c;box-shadow:0 0 0 10px #1a1a1e,0 0 0 11px #2a2a30,0 40px 120px rgba(0,0,0,.6),0 0 calc(var(--glow)*120px) rgba(255,107,44,calc(var(--glow)*.5));display:flex;flex-direction:column;overflow:hidden}
.phone__notch{position:absolute;left:50%;top:12px;width:96px;height:26px;border-radius:20px;background:#000;transform:translateX(-50%);z-index:3}
.phone__head{display:flex;gap:12px;align-items:center;padding:52px 18px 14px;border-bottom:1px solid var(--hair);background:#111114}
.phone__head b{display:block;font-size:15px}
.phone__head small{color:#4be38b;font-size:11.5px}
.phone__av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--ember),#ffb27a);color:var(--ink);display:grid;place-items:center;font-weight:600;font-size:13px}
.phone__chat{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px 14px;background:radial-gradient(120% 60% at 50% 0,rgba(255,107,44,.06),transparent)}
.bub{max-width:84%;padding:11px 14px;border-radius:18px;font-size:14px;line-height:1.4}
.bub--in{align-self:flex-start;background:#1f1f24;border-bottom-left-radius:6px}
.bub--out{align-self:flex-end;background:var(--ember);color:var(--ink);border-bottom-right-radius:6px;min-height:42px}
.bub--typing{align-self:flex-end;display:flex;gap:5px;padding:14px 16px;background:#2a2a30;border-bottom-right-radius:6px}
.bub--typing i{width:7px;height:7px;border-radius:50%;background:var(--bone);opacity:.5;animation:typing 1s infinite}
.bub--typing i:nth-child(2){animation-delay:.15s}.bub--typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{30%{transform:translateY(-4px);opacity:1}}
.phone__approve{align-self:flex-end;margin-top:4px;padding:10px 16px;border-radius:999px;background:var(--bone);color:var(--ink);font-size:13px;font-weight:500;transition:background .3s,color .3s;pointer-events:none}
.phone__approve.is-sent{background:#4be38b}
.phone__foot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);background:#111114}
.phone__foot div{padding:14px 16px;display:grid;gap:4px}
.phone__foot div+div{border-left:1px solid var(--hair)}
.phone__foot small{color:var(--dim);font-size:9.5px}
.phone__foot b{font-size:20px;font-weight:500;color:var(--bone);letter-spacing:0}
.notifs{position:absolute;z-index:4;left:-2%;top:6%;width:min(330px,82%);display:grid;gap:10px}
.notif{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(36,36,42,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 16px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06);font-size:13px}
.notif i{font-style:normal;color:var(--dim);font-size:11px}
.notif__ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#2f2f36;font-size:15px}
.notif__ic--ai{background:var(--ember);color:var(--ink);font-family:var(--f-mono);font-size:11px;font-weight:600}
.notif__ic--cal{background:var(--bone);color:#e2412b;font-weight:700;font-size:13px}
.notif__ic--ok{background:#4be38b;color:var(--ink);font-weight:700}

/* ---------- service pills (mdx) ---------- */
.pills{position:relative;height:min(76vh,700px);margin:0 var(--gut) clamp(50px,6vw,90px)}
.pills__core{position:absolute;left:50%;top:50%;width:min(44vw,640px);aspect-ratio:16/10;transform:translate(-50%,-50%);border-radius:26px;overflow:hidden;background:var(--ink);box-shadow:0 40px 90px -30px rgba(13,13,15,.55)}
.pills__core video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pills__k{position:absolute;left:16px;bottom:14px;color:var(--bone);background:rgba(13,13,15,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 12px;border-radius:999px;font-size:10.5px}
.pill{position:absolute;left:50%;top:50%;z-index:2;padding:15px 22px;border-radius:999px;background:var(--ink);color:var(--bone);font-size:clamp(14px,1.15vw,17px);font-weight:500;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 18px 40px -12px rgba(13,13,15,.55);cursor:pointer;transition:background .3s,color .3s}
.pill::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ember);margin-right:10px;vertical-align:1px}
.pill:hover{background:var(--ember);color:var(--ink)}
.pill:hover::before{background:var(--ink)}

/* ---------- process: stacking cards (jitter) ---------- */
.proc .proc__steps{display:block;padding:0 var(--gut)}
.proc .proc__steps li{position:sticky;top:calc(12vh + var(--i,0)*22px);display:grid;grid-template-columns:1fr 1.2fr;gap:20px 50px;align-items:end;min-height:min(56vh,520px);margin-bottom:8vh;padding:clamp(28px,4vw,64px);border-radius:30px;background:var(--ink-3);box-shadow:0 -20px 60px rgba(0,0,0,.35),inset 0 0 0 1px var(--hair);transform-origin:50% 0;will-change:transform}
.proc .proc__steps li::before{display:none}
.proc .proc__steps li:nth-child(2){background:var(--bone);color:var(--ink)}
.proc .proc__steps li:nth-child(3){background:var(--ember);color:var(--ink)}
.proc .proc__steps li:nth-child(4){background:#1f2a2b}
.proc .proc__steps li:nth-child(5){background:var(--bone-2);color:var(--ink)}
.proc .proc__steps li:nth-child(2) p,.proc .proc__steps li:nth-child(3) p,.proc .proc__steps li:nth-child(5) p{color:rgba(13,13,15,.7)}
.proc .proc__steps li:nth-child(3) .proc__n{color:var(--ink)}
.proc .proc__steps li:nth-child(4) .proc__n{color:var(--teal)}
.proc .proc__n{grid-row:1/3;align-self:start;font-size:clamp(6rem,16vw,15rem);line-height:.8}
.proc .proc__steps h3{font-size:clamp(2rem,4.4vw,4.6rem);letter-spacing:-.045em;line-height:.95}
.proc .proc__steps p{font-size:clamp(1rem,1.3vw,1.25rem);max-width:34ch}
.proc .proc__loop{top:clamp(28px,4vw,64px);right:clamp(28px,4vw,64px);font-size:28px}

/* ---------- section bars (mdx) ---------- */
.bars{position:fixed;z-index:80;left:50%;bottom:22px;transform:translate(-50%,30px);display:flex;align-items:flex-end;gap:7px;padding:8px 12px;border-radius:999px;background:rgba(13,13,15,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--hair);opacity:0;transition:opacity .6s,transform .8s var(--ease)}
.bars.is-ready{opacity:1;transform:translate(-50%,0)}
.bars button{width:3px;height:12px;border-radius:2px;background:rgba(239,234,225,.35);transition:height .5s var(--ease),background .3s;position:relative}
.bars button::after{content:"";position:absolute;inset:-10px -5px}
.bars button:hover{background:var(--bone)}
.bars button.is-on{height:24px;background:var(--ember)}

/* ---------- footer drop ---------- */
.foot__drop{display:inline-block}

/* ---------- responsive ---------- */
@media (max-width:1280px){ .hero__orbcap{display:none} }
@media (max-width:1100px){
  .stats__list{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .eng__grid{grid-template-columns:1fr}
  .eng__stage{min-height:640px}
}
@media (max-width:860px){
  .hero__orb{right:auto;left:0;top:50vh;width:100vw;height:var(--orbH);opacity:1;pointer-events:none}
  .hero::after{right:-10vw;top:6vh;width:90vw}
  .hero__orbcap{display:none}
  .hero__for{display:none}
  .hero__portal-label{width:68px;height:68px}
  .stats__list{grid-template-columns:repeat(2,1fr)}
  .stats__list li:last-child{grid-column:1/-1}
  .odo{font-size:clamp(3.4rem,17vw,5rem)}
  .orb{filter:blur(24px)}
  .eng__stage{min-height:600px;transform:scale(.9);transform-origin:50% 0;margin-bottom:-60px}
  .notifs{left:0;top:2%;width:84%}
  .pills{height:560px;margin:0 0 50px}
  .pills__core{width:78vw}
  .pill{padding:11px 15px;font-size:13px}
  .proc .proc__steps li{grid-template-columns:1fr;min-height:auto;top:calc(10vh + var(--i,0)*14px);padding:28px 24px 30px;gap:10px;margin-bottom:5vh}
  .proc .proc__n{grid-row:auto;font-size:5rem}
  .proc .proc__steps h3{font-size:2.1rem}
  .bars{display:none}
}
@media (prefers-reduced-motion:reduce){ .badge,.orb,.hero::after{animation:none} }

/* clip any transient horizontal overflow (scatter letters, floating pills, glows) */
main,.foot{overflow-x:hidden}
@supports (overflow:clip){main,.foot{overflow-x:clip}}
.hero{overflow-x:clip}

/* ---------- wide screens: sculpture dead-centre, text column on the left ---------- */
@media (min-width:1600px) and (min-aspect-ratio:3/2){
  .hero{justify-content:center;padding-top:90px;padding-bottom:40px}
  .hero__inner{max-width:31vw}
  .hero__title{font-size:clamp(3.1rem,min(5vw,9.6vh),10rem)}
  .hero__foot{max-width:min(30em,27vw)}
  .hero__orb{left:0;top:0;width:100vw;height:100vh;--fill-h:.76;--fill-w:.42}
  .hero__orbcap{left:50%;top:auto;bottom:84px;transform:translateX(-50%)}
  .hero::after{left:28vw;right:auto;top:calc(50vh - 22vw);width:44vw}
}

/* ---------- the pyramids joke ---------- */
.hero__quip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px}

.foot__credits{margin-top:18px;font-size:10px;line-height:1.6;color:rgba(239,234,225,.38)}
.foot__credits a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot__credits a:hover{color:var(--bone)}