/* Page width lock: nothing (including soft glows and decorative layers) may widen the page past the screen.
   clip, unlike hidden, does not turn html/body into a scroll box, so sticky sections and smooth scrolling keep working. */
html, body { overflow-x: clip; }
/* H3: Marqly-inspired composition. Centered statement, one sweeping light form (three engine strands), pill navigation. */
.hero { position: relative; min-height: min(100svh, 900px); overflow: hidden; display: flex; flex-direction: column; isolation: isolate; }
.ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.ribbon--glow { will-change: transform; }
.ribbon #fibers path { vector-effect: non-scaling-stroke; }
.haze { opacity: 0.07; }
.glow-wide { opacity: 0.9; }
.glow-near { opacity: 1; }
.grain { opacity: 0.06; mix-blend-mode: overlay; pointer-events: none; }
.vignette { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 40% at 50% 50%, rgba(11, 11, 12, 0.72), rgba(11, 11, 12, 0) 72%), linear-gradient(180deg, rgba(11, 11, 12, 0.5) 0, rgba(11, 11, 12, 0) 18%, rgba(11, 11, 12, 0) 78%, var(--obsidian) 100%); }

/* Header: wordmark, centered pill navigation, pill action */
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px var(--gutter); }
.pill-nav { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(250, 250, 248, 0.045); box-shadow: inset 0 0 0 1px rgba(250, 250, 248, 0.14), inset 0 1px 0 rgba(250, 250, 248, 0.08); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.pill-nav a { font-size: 14.5px; color: var(--ink-2); padding: 9px 18px; border-radius: 999px; transition: color .2s, background .2s; }
.pill-nav a:hover { color: var(--milk); background: rgba(250, 250, 248, 0.08); }
.pill-cta { justify-self: end; font-size: 14.5px; font-weight: 500; padding: 10px 20px; border-radius: 999px; background: rgba(250, 250, 248, 0.045); box-shadow: inset 0 0 0 1px rgba(250, 250, 248, 0.18), inset 0 1px 0 rgba(250, 250, 248, 0.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pill-cta:hover { box-shadow: inset 0 0 0 1px var(--milk); }

/* Centered statement */
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gutter) 40px; }
.title { font-family: var(--display); font-stretch: 100%; font-weight: 500; text-transform: uppercase; font-size: clamp(40px, 6.9vw, 108px); line-height: 0.96; letter-spacing: -0.028em; color: var(--milk); text-shadow: 0 1px 30px rgba(11, 11, 12, 0.45); }
.title span { display: block; }
.title em { font-style: normal; }
.sub { color: rgba(250, 250, 248, 0.78); text-shadow: 0 1px 18px rgba(11, 11, 12, 0.8); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; max-width: 34em; margin-top: 30px; text-wrap: balance; }
/* lines only break between sentences */
.sub span { display: inline-block; }
.pill-btn { box-shadow: 0 0 0 1px rgba(250, 250, 248, 0.2), 0 10px 40px rgba(250, 250, 248, 0.12); display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; padding: 8px 8px 8px 24px; border-radius: 999px; background: var(--milk); color: var(--obsidian); font-size: 15px; font-weight: 500; transition: transform .25s; }
.pill-btn .arrow { width: 32px; height: 32px; border-radius: 50%; background: var(--obsidian); color: var(--milk); display: grid; place-items: center; transition: transform .25s; }
.pill-btn .arrow svg { width: 16px; height: 16px; }
.pill-btn:hover .arrow { transform: translateX(3px); }

/* Bottom strip: the three businesses, in place of a logo row */
.engines-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--gutter) 28px; }
.strip-label { font-size: 14px; color: var(--ink-3); }
.engines-strip ul { display: flex; gap: clamp(24px, 4vw, 56px); }
.engines-strip li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--milk); }
.engines-strip .v { color: var(--ink-3); }
.d { width: 7px; height: 7px; border-radius: 50%; }
.d--s { background: var(--studios); } .d--g { background: var(--growth); } .d--a { background: var(--acq); }

.next-frame { height: 380px; }

/* Mobile */
@media (max-width: 860px) {
  .hero { min-height: 720px; }
  .bar { grid-template-columns: 1fr auto; }
  .pill-nav { display: none; }
  .center { padding-bottom: 20px; }
  .title { font-size: clamp(36px, 10.6vw, 46px); line-height: 1.02; }
  .sub { font-size: 16px; margin-top: 22px; }
  .pill-btn { margin-top: 26px; }
  .engines-strip { flex-direction: column; align-items: flex-start; gap: 12px; }
  .engines-strip ul { flex-direction: column; gap: 10px; }
  .ribbon { width: 250%; left: -110%; }
}

/* SG monogram. Pressing it unfolds the letters into the full SPECTRE GROUP wordmark. */
.monogram { justify-self: start; display: inline-flex; align-items: baseline; padding: 6px 0; font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: var(--milk); cursor: pointer; white-space: nowrap; }
.m-x { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; vertical-align: bottom; transition: max-width .7s cubic-bezier(.2,.7,.2,1), opacity .45s ease; }
.monogram[aria-expanded="true"] .m-x { max-width: 7em; opacity: 1; transition: max-width .7s cubic-bezier(.2,.7,.2,1), opacity .5s ease .12s; }
.monogram[aria-expanded="true"] { letter-spacing: 0.01em; }
.monogram { transition: letter-spacing .6s ease; }
@media (prefers-reduced-motion: reduce) { .m-x, .monogram { transition: none; } }

/* ---------- Credibility: partnerships, group numbers, trusted brands ---------- */
.proof { padding: clamp(56px, 6vw, 96px) 0 clamp(64px, 7vw, 112px); }
.proof-label { font-size: 14px; color: var(--ink-2); margin-bottom: 22px; }
/* Partnerships: the lit panel. A lean glass strip with the hero's fibres behind it and a slow sheen across the logos. */
.lit { position: relative; isolation: isolate; }
.lit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(250,250,248,.32), rgba(250,250,248,.08) 40%, rgba(250,250,248,.03));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.sheen { -webkit-mask: linear-gradient(100deg, rgba(0,0,0,.62) 40%, #000 50%, rgba(0,0,0,.62) 60%) 100% 0 / 300% 100% no-repeat;
         mask: linear-gradient(100deg, rgba(0,0,0,.62) 40%, #000 50%, rgba(0,0,0,.62) 60%) 100% 0 / 300% 100% no-repeat;
         animation: sheen 7s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes sheen { 0%, 35% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 85%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
.pp { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 48px); margin: 0 var(--gutter); border-radius: 22px; overflow: hidden; padding: 18px clamp(24px, 3vw, 40px);
      background: radial-gradient(120% 90% at 50% -20%, rgba(250,250,248,.07), rgba(250,250,248,0) 60%), rgba(250,250,248,.015); }
/* the fibres brighten as the panel nears the middle of the screen (--fv, set on scroll) and fully under the pointer */
.pp-fibres { position: absolute; inset: -10% -4%; width: 108%; height: 120%; z-index: -1; opacity: var(--fv, .6); transform: translateX(var(--fx, 0px)); transition: opacity .5s; }
.pp::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(250,250,248,.045), rgba(250,250,248,0) 70%); }
.pp::after { transition: opacity .45s; }
.pp.is-lit::before { opacity: 1; }
.pp.is-lit .pp-fibres { opacity: calc(var(--fv, .6) + .1); }
.pp.is-lit::after { background: linear-gradient(180deg, rgba(250,250,248,.4), rgba(250,250,248,.11) 45%, rgba(250,250,248,.04)); }
.pp.is-lit { box-shadow: 0 0 70px -24px rgba(250,250,248,.06); }
.pp { transition: box-shadow .8s; }
.pp.is-lit .pp-row img { opacity: 1; }
.pp-head { padding-right: clamp(24px, 3vw, 48px); box-shadow: inset -1px 0 0 rgba(250,250,248,.12); }
.pp-title { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.6vw, 24px); white-space: nowrap; letter-spacing: -0.03em; }
.pp-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; }
.pp-row li { display: flex; justify-content: center; align-items: center; height: 64px; position: relative; }
.pp-row li + li::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(180deg, transparent, rgba(250,250,248,.16), transparent); }
.pp-row img { height: 30px; width: auto; max-width: 78%; object-fit: contain; opacity: .9; transition: opacity .4s; }
.pp-row img[alt="Chainz Solutions"] { height: 34px; }
.pp-row img[alt="Ecommerce HQ"] { height: 26px; }
.pp-row li:hover img { opacity: 1; }
@media (max-width: 860px) {
  .pp { grid-template-columns: 1fr; gap: 12px; border-radius: 18px; padding: 22px 16px 10px; }
  .pp-head { padding: 0 4px; box-shadow: none; }
  .pp-row { grid-template-columns: 1fr 1fr; }
  .pp-row li { height: 58px; }
  .pp-row li + li::before { display: none; }
  .pp-row li:nth-child(even)::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, transparent, rgba(250,250,248,.16), transparent); }
  .pp-row li:last-child { grid-column: 1 / -1; }
  .pp-row img { height: 24px; } .pp-row img[alt="Chainz Solutions"] { height: 27px; } .pp-row img[alt="Ecommerce HQ"] { height: 21px; }
}
@media (prefers-reduced-motion: reduce) { .sheen { animation: none; -webkit-mask: none; mask: none; } }

.numbers-head { text-align: center; margin: clamp(80px, 7.5vw, 120px) var(--gutter) clamp(36px, 3.6vw, 56px); }
.numbers-kicker { font-size: 14px; color: var(--ink-3); margin-bottom: 10px; }
.numbers-title { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.numbers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 var(--gutter); }
.numbers > div { text-align: center; padding: 8px 12px; }
.numbers > div + div { box-shadow: inset 1px 0 0 var(--rule-2); }
.numbers dt { font-family: var(--display); font-stretch: 104%; font-weight: 400; font-size: clamp(36px, 3.8vw, 60px); line-height: 1.05; letter-spacing: -0.03em; color: var(--milk); font-variant-numeric: tabular-nums; }
.numbers dd { font-size: 15px; color: var(--ink-2); margin-top: 10px; }
.numbers-note { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 22px; padding: 0 var(--gutter); }

.trusted { margin-top: clamp(80px, 8vw, 128px); }
.trusted-title { text-align: center; font-size: 16px; font-weight: 500; margin-bottom: 36px; }
.marquee { display: grid; gap: 22px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.lane { overflow: hidden; }
.lane-track { display: flex; width: max-content; gap: 56px; align-items: center; animation: lane-left 60s linear infinite; }
.lane--right .lane-track { animation-name: lane-right; animation-duration: 70s; }
.lane--slow .lane-track { animation-duration: 80s; }
.marquee:hover .lane-track { animation-play-state: paused; }
@keyframes lane-left { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 28px)); } }
@keyframes lane-right { from { transform: translateX(calc(-50% - 28px)); } to { transform: translateX(0); } }
.logo { flex: none; height: 56px; width: 110px; display: grid; place-items: center; }
.logo img { max-height: 56px; max-width: 110px; object-fit: contain; opacity: 0.72; transition: opacity .3s; }
.logo img:hover { opacity: 1; }
.trusted-note { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 30px; padding: 0 var(--gutter); }
@media (prefers-reduced-motion: reduce) { .lane-track { animation: none; } .lane { overflow-x: auto; } }

@media (max-width: 860px) {
  .numbers { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .numbers > div + div { box-shadow: none; }
  .numbers > div:nth-child(even) { box-shadow: inset 1px 0 0 var(--rule-2); }
  .numbers > div:last-child { grid-column: 1 / -1; }
  .numbers dt { font-size: 34px; }
  .numbers dd { font-size: 14px; }
  .marquee { gap: 16px; }
  .lane-track { gap: 36px; }
  .logo { width: 88px; height: 44px; }
  .logo img { max-height: 44px; max-width: 88px; }
}