@media (max-width:960px){.hero{padding:100px 0 40px}}
/* ============ PAGE ACCENT SYSTEM: coral ============ */
:root{--accent:var(--coral);--accent-deep:#E2543B;--accent-ink:#FF9576;--accent-soft:rgba(255,122,92,.22);--acc:255,122,92;--acc-lit:255,150,118}

/* hero headline sized to land in 3 lines like the homepage hero */
/* full-stack glow lines in the page accent */
/* page accent for the remaining interactive elements */
.seg .chip.on{background:rgba(255,122,92,.22);border-color:var(--coral);box-shadow:inset 0 0 0 1px rgba(255,122,92,.5)}
.mm-tools #ddUser .iconbtn{border-color:var(--coral);background:rgba(255,122,92,.12)}
.cta-form::before{background:linear-gradient(140deg,rgba(255,150,118,.7),transparent 45%,transparent 60%,rgba(255,122,92,.4))}
*::-webkit-scrollbar-thumb{background:rgba(255,122,92,.55);background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,122,92,.85);background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:rgba(255,122,92,.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 */
/* 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/core.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:255,122,92;--fx-mid:255,158,132;--fx-hi:255,208,192}
.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:60% 50%}}

/* ===== core-pcar-css ===== */
/* platform feature slider: coral-outlined rounded shell, no fill */
.pcar{position:relative;border:1px solid rgba(255,122,92,.34);border-radius:28px;background:none;
  padding:clamp(30px,4.5vw,58px) 0 clamp(62px,6vw,76px)}
.pcar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(42% 58% at 5% 102%,rgba(255,122,92,.10),transparent 70%)}
.pcar-vp{overflow:hidden}
.pcar-slide{flex:0 0 100%;min-width:0;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(26px,4vw,58px);
  align-items:center;padding:0 clamp(26px,4.5vw,62px);min-height:clamp(210px,22vw,290px)}
.pcar-idx{display:block;font-size:.8rem;letter-spacing:.24em;color:var(--accent-ink,#FF9576);font-weight:700}
.pcar-idx::after{content:"";display:block;width:46px;height:2px;margin-top:10px;border-radius:2px;
  background:linear-gradient(90deg,var(--coral,#FF7A5C),transparent)}
.pcar-title{margin:14px 0 0;font-size:clamp(1.8rem,3.3vw,3rem);line-height:1.05;letter-spacing:-.01em}
.pcar-right{position:relative;padding-left:clamp(24px,3vw,42px);border-left:1px solid var(--border)}
.pcar-right p{margin:0;font-size:clamp(14.5px,1.18vw,17.5px);line-height:1.68}
.pcar-dots{position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:center;gap:9px}
.pcar-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,149,118,.30);transition:background .45s,width .45s,border-radius .45s}
.pcar-dot.on{width:26px;border-radius:100px;background:var(--coral,#FF7A5C)}
.pcar.grabbing .pcar-track{cursor:grabbing;transition:none}
@media (max-width:820px){
  .pcar{border-radius:22px;padding:24px 0 58px}
  .pcar-slide{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;min-height:0;padding:0 22px}
  .pcar-title{font-size:clamp(1.5rem,6.4vw,2rem)}
  .pcar-right{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:18px}
}

/* ===== srows-css ===== */
/* dual card rows gliding in from the sides, scroll-linked */
#services,#connected{overflow-x:clip}
.srows{display:grid;gap:22px}
.srow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;will-change:transform,opacity}
.scard{position:relative;border:1px solid rgba(9,20,39,.14);border-radius:20px;padding:26px 26px 24px;
  background:none;transition:transform .45s cubic-bezier(.22,.8,.3,1),border-color .6s ease}
.scard:hover{transform:translateY(-4px);border-color:rgba(255,122,92,.55)}
.scard-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;
  color:var(--coral,#FF7A5C);border:1px solid rgba(255,122,92,.4);background:rgba(255,122,92,.08)}
.scard-ic svg{width:24px;height:24px}
.scard-t{margin:16px 0 8px;font-size:clamp(1.25rem,1.75vw,1.6rem);line-height:1.12;letter-spacing:-.01em}
.scard-p{margin:0;font-size:15px;line-height:1.6}
@media(min-width:961px){
  .scard-t{margin:32px 0 10px;font-size:clamp(1.5rem,2vw,2rem)}
  .scard-p{font-size:16px}
}
/* the same rows on the dark section */
#connected .scard{border-color:rgba(150,180,255,.2);background:rgba(8,16,34,.55);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
#connected .scard:hover{border-color:rgba(255,122,92,.6)}
#connected .scard-ic{background:rgba(255,122,92,.12)}
@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}
}

/* ===== core-offer-faq-css ===== */
/* sticky offerings: the headline rides down the section as you scroll */
.offer-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(40px,6vw,96px)}
.offer-pin{position:sticky;top:clamp(96px,16vh,150px)}
.ostep{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.6vw,34px);
  padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid rgba(9,20,39,.14)}
.offer-r .ostep:first-child{border-top:0;padding-top:6px}
.ostep-idx{font-size:clamp(2rem,3.2vw,3rem);font-weight:800;line-height:1;
  color:var(--coral,#FF7A5C);letter-spacing:-.02em;min-width:1.6em}
.ostep-t{margin:2px 0 10px;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.12;letter-spacing:-.01em}
.ostep-p{margin:0;font-size:15.5px;line-height:1.66;max-width:58ch}
@media (orientation:portrait),(max-width:900px){
  .offer-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .offer-pin{position:static}
  .ostep{grid-template-columns:auto minmax(0,1fr);padding:22px 0}
  .ostep-idx{font-size:1.6rem}
}

/* ===== connected-mark-css ===== */
/* the brand mark peeking from the bottom-right, plain background matter */
#connected{position:relative}
#connected .shell{position:relative;z-index:1}
#connected .conn-mark{position:absolute;z-index:0;pointer-events:none;
  bottom:2%;right:calc(-1 * clamp(160px,16vw,300px));height:92%;aspect-ratio:1;
  background:url("../img/marks/connected.webp") center/contain no-repeat;
  opacity:.30;transform:rotate(12deg);}
@media (max-width:640px){#connected .conn-mark{height:min(128vw,560px);bottom:auto;top:6%;
  right:calc(-1 * min(48vw,230px))}  /* mobile: larger, higher, half off the right edge */}