@media (max-width:960px){.hero{padding:100px 0 40px}}
/* ============ PAGE ACCENT SYSTEM: lavender ============ */
:root{--accent:var(--lavender);--accent-deep:#9750E6;--accent-ink:#C79BFF;--accent-soft:rgba(181,108,255,.22);--acc:181,108,255;--acc-lit:199,141,255}

/* full-stack glow lines in the page accent */
/* page accent for the remaining interactive elements */
.seg .chip.on{background:rgba(181,108,255,.22);border-color:var(--lavender);box-shadow:inset 0 0 0 1px rgba(181,108,255,.5)}
.mm-tools #ddUser .iconbtn{border-color:var(--lavender);background:rgba(181,108,255,.12)}
.cta-form::before{background:linear-gradient(140deg,rgba(199,141,255,.7),transparent 45%,transparent 60%,rgba(181,108,255,.4))}
*::-webkit-scrollbar-thumb{background:rgba(181,108,255,.55);background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(181,108,255,.85);background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:rgba(181,108,255,.6) var(--abyss-deep)}
}
/* light section: the accent lines glow softer on white */
/* section rhythm: split heads open these sections, so no mid-section top offset */

.shell > .eco-caps:last-child{margin-bottom:0}
.method .ltop.hl-accent{color:#9750E6}
/* hero without mascot: single centered column */
.hl2{max-width:72ch}
/* hero text centered on desktop as well (mobile already centers via its media rules) */
.hl2{margin-inline:auto;text-align:center}
.hero-lead{margin-inline:auto}
/* custom hero background art */
.sbg-photo{background:url(../img/hero/one.webp) center/cover no-repeat #060D1A}
/* accent: entrance plus the endless fill sweep in one declaration; animation is a single property, otherwise hBtn overwrites ctaFill */

/* static-bg model: page background rides on a scrolling wrapper and covers the fixed hero art;
   layers re-based from doc-space to wrapper-space (body keeps its copy as a safety net) */

/* page-accent fx: ghost ring / orbit / glows follow the page palette */
:root{--fx-deep:181,108,255;--fx-mid:203,150,255;--fx-hi:232,206,255}
.shared-bg .sbg-photo{transform-origin:100% 100%;will-change:transform;animation:sbgImgIn 1.35s .12s cubic-bezier(.22,.8,.3,1) backwards}

/* ===== glass-fx-css ===== */
/* WebGL ribbed glass hero background: the canvas sits next to the poster over the
   static webp, which stays as the poster before the first frame, without WebGL
   and on context loss. The canvas crossfades in after the first frame. */

/* ===== mobile-bg-pos ===== */
/* phones: anchor the hero art by its dark side to keep the copy readable */
@media (max-width:768px){.shared-bg .sbg-photo{background-position:68% 50%}}  /* shift right so the warm ray enters the mobile frame */

/* ===== one-sections-css ===== */
#services{overflow-x:clip}
#services > .shell:first-child .sec-head{margin-bottom:34px}
.pmar{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;margin-bottom:clamp(64px,8vw,120px)}
.pmar-track{display:flex;align-items:center;width:max-content;
  animation:pmarScroll 72s linear infinite;will-change:transform}
.pmar-track2{display:none}
@media (max-width:600px){
  .pmar-track{animation-duration:120s}
  .pmar-track2{display:flex;align-items:center;width:max-content;margin-top:12px;
    animation:pmarScroll 120s linear infinite reverse;will-change:transform}
}
.pcardx{flex:0 0 auto;display:flex;align-items:center;height:64px;padding:0 30px;margin-right:14px;
  border:1px solid rgba(150,180,255,.22);border-radius:16px;background:none}
.pcardx span{font-weight:800;font-size:17px;letter-spacing:.02em;color:#fff;opacity:.9;white-space:nowrap}
@keyframes pmarScroll{to{transform:translateX(-50%)}}
@media (max-width:600px){.pcardx{height:54px;padding:0 22px}.pcardx span{font-size:15px}}
@media (prefers-reduced-motion:reduce){.pmar-track{animation:none}}
.steps-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,6vw,96px)}
.steps-pin{position:sticky;top:clamp(96px,16vh,150px);z-index:1}
.steps-mark{position:absolute;left:0;bottom:0;height:clamp(250px,32vw,470px);aspect-ratio:1;
  background:url("../img/marks/steps.webp") left center/contain no-repeat;
  opacity:.30;transform:rotate(12deg);pointer-events:none;}
.stepin-idx{font-size:clamp(2rem,3.2vw,3rem);font-weight:800;line-height:1;
  color:var(--lavender,#B56CFF);letter-spacing:-.02em;min-width:1.6em}
@media (orientation:portrait),(max-width:900px){
  .steps-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .steps-pin{position:relative;top:auto;z-index:1}
  .steps-mark{position:absolute;left:auto;right:-10vw;top:-6px;bottom:auto;
    height:min(58vw,320px);opacity:.07;z-index:0}
    .stepin-idx{font-size:1.6rem}
}
#operators{overflow-x:clip}
.srows{display:grid;gap:18px}
.srow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;will-change:transform,opacity}
.scard{position:relative;border:1px solid rgba(9,20,39,.14);border-radius:20px;padding:24px 22px 22px;
  background:none;transition:transform .45s cubic-bezier(.22,.8,.3,1),border-color .6s ease}
.scard:hover{transform:translateY(-4px);border-color:rgba(181,108,255,.55)}
.scard-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;
  color:var(--lavender,#B56CFF);border:1px solid rgba(181,108,255,.4);background:rgba(181,108,255,.08)}
.scard-ic svg{width:23px;height:23px}
.scard-t{margin:15px 0 8px;font-size:clamp(1.08rem,1.32vw,1.32rem);line-height:1.16;letter-spacing:-.01em}
.scard-p{margin:0;font-size:14.5px;line-height:1.58}
@media(min-width:961px){
  .scard-t{margin:32px 0 10px;font-size:clamp(1.5rem,2vw,2rem)}
  .scard-p{font-size:16px}
}
@media (max-width:1020px) and (min-width:641px){
  .srows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .srow{display:contents}
}
@media (max-width:640px){
  .srows{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
  .srow{display:contents}
}

/* ===== one-metrics-stack-css ===== */
/* metric band under the hero: counters in outlined glass-less cards */
.sec.metrics{position:relative;padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(48px,6vw,88px)}
.sec.metrics::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 90% at 50% -8%,rgba(60,99,255,.12),rgba(60,99,255,.04) 46%,transparent 74%)}
.sec.metrics .shell{position:relative}
.sec.metrics .sec-head{margin-bottom:40px}
/* The counter cards moved to shared.css: the role briefs use the same
   component, and two copies would drift apart. */

/* ===== one-slayers-css ===== */
/* full-bleed curtain layers: each rises from below and covers the previous */
#advantage{background:var(--bg,#F4F8FC);
  padding-bottom:calc(clamp(80px,10vw,132px) - clamp(26px,3.6vh,42px))}
#advantage.method::before{z-index:3}
#advantage .adv-head{position:sticky;top:var(--advtop,64px);z-index:2;
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--bg,#F4F8FC);margin-bottom:16px;padding:36px 0 16px}
#advantage .adv-head .fill{width:var(--shell);max-width:none;margin-inline:auto}
.slayers{margin-top:clamp(10px,2vw,26px)}
/* in-flow tail spacer = the last card's hold window (sticky range is the content box) */
.slayer{position:sticky;top:var(--advpin,240px);z-index:1;width:100vw;margin-left:calc(50% - 50vw);
  background:var(--bg,#F4F8FC);border-top:1px solid rgba(9,20,39,.16);
  min-height:var(--advcard,290px);display:flex;align-items:center;
  padding:clamp(26px,3.6vh,42px) 0}
.slayer-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,5vw,90px);align-items:center}
.slayer-l{display:flex;flex-direction:column;gap:14px}
.slayer-idx{font-size:.82rem;letter-spacing:.26em;font-weight:700;color:var(--lavender,#B56CFF)}
.slayer-t{margin:0;font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.06;letter-spacing:-.015em}
.slayer-p{margin:0;font-size:clamp(15px,1.25vw,18px);line-height:1.7;max-width:56ch}
@media (max-width:820px){
  .slayer{min-height:var(--advcard,260px);align-items:flex-start;
    padding:22px 0 30px}
  .slayer-in{grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
  .slayer-t{font-size:clamp(1.35rem,5.6vw,1.8rem)}
}

/* ===== marquee-absorb ===== */

/* ===== curtain-touch-off ===== */
/* stacked overlapping sticky layers shimmer on iOS: plain flow on touch, curtain stays on desktop */
@media (hover:none), (pointer:coarse), (max-width:820px){
  #advantage .adv-head{position:static;width:var(--shell);margin-left:auto;margin-right:auto;padding:0 0 6px;min-height:0}
  #advantage .adv-head .fill{width:auto;margin-inline:0}
  .slayer{position:static;min-height:0;padding:24px 0 26px;align-items:flex-start}
  .slayers{margin-top:6px}
  .slayer-in{align-items:start}
}

/* ===== curtain-stability ===== */
/* sticky band: transform-free, out of reveal/fill drivers, statically completed headline.
   no will-change here: WebKit jitters sticky elements carrying will-change:transform */
#advantage .adv-head,#advantage .adv-head .fill{transform:none !important;transition:none !important}
#advantage .adv-head .ltop{clip-path:none}
#advantage .adv-head .lbase{visibility:hidden}