/* ApexQuant landing — PAGE sections only.
   Depends on ../../colors_and_type.css + ../../components.css + shell.css (load those first).
   Contains only the landing page's content sections: hero, chip band, why, how-it-works,
   featured strip, globe, mission & vision, testimonials, and the closer / straddle CTA. */

/* ===== Chip band (security core) ===== */
.section--chip .chip-band { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.head--left { text-align: left; max-width: 520px; justify-self: end; }
.head--left .t-lede { margin-left: 0; margin-right: 0; }
.section--chip .chip-holder { width: 100%; max-width: 440px; margin: 0; justify-self: start; }
.chip-holder apexquant-chip-core { display: block; width: 100%; }
@media (max-width: 900px){
  .section--chip .chip-band { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .head--left { text-align: center; max-width: 560px; margin: 0 auto; }
  .head--left .t-lede { margin-left: auto; margin-right: auto; }
  .section--chip .chip-holder { justify-self: center; margin: 0 auto; }
}

/* ===== Why ApexQuant — premium capability cards ===== */
.section--why .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.why-card { position: relative; border-radius: 22px; overflow: hidden; isolation: isolate; background: linear-gradient(168deg, #16213C 0%, #121B33 60%, #0F1830 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 24px 50px -28px rgba(2,4,12,0.6); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.why-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.4; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); }
.why-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, var(--apex-blue), var(--plasma) 120%); transform: scaleX(0.36); transform-origin: left; transition: transform .45s var(--ease); }
.why-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); background: radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(120,150,255,0.18), transparent 60%); }
.why-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(120,150,255,0.34), 0 40px 70px -30px rgba(2,4,12,0.7); }
.why-card:hover .why-bar { transform: scaleX(1); }
.why-card:hover .why-spot { opacity: 1; }
.why-card-inner { position: relative; z-index: 2; padding: 30px 28px 32px; display: flex; flex-direction: column; }
.why-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.why-disc { position: relative; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(150deg, #2A63FF, #1A4ED8); color: #fff; box-shadow: 0 10px 26px -8px rgba(30,91,255,0.7), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform .4s var(--ease); }
.why-disc svg { width: 22px; height: 22px; }
.why-disc-ring { position: absolute; inset: -5px; border-radius: 18px; border: 1px solid rgba(120,150,255,0.28); transition: transform .5s var(--ease), border-color .4s var(--ease); }
.why-card:hover .why-disc { transform: translateY(-2px) scale(1.04); }
.why-card:hover .why-disc-ring { transform: scale(1.1); border-color: rgba(120,150,255,0.5); }
.why-tag { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(200,212,255,0.55); }
.why-title { font-family: var(--font); font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; color: var(--bone); margin: 0 0 12px; }
.why-body { font-size: 15px; line-height: 1.55; color: var(--soft-grey); margin: 0; }
@media (max-width: 900px){ .section--why .why-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ===== How it works — connected stepper ===== */
.section--how .flow { position: relative; margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.flow-line { position: absolute; top: 32px; left: 8%; right: 8%; height: 2px; z-index: 0; background: rgba(255,255,255,0.10); border-radius: 2px; overflow: hidden; }
.flow-line-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--apex-blue), rgba(30,91,255,0.15)); transform-origin: left; animation: flowFill 3.6s ease-in-out infinite; }
@keyframes flowFill { 0% { transform: scaleX(0); opacity: 0.9; } 55% { transform: scaleX(1); opacity: 0.9; } 80%,100% { transform: scaleX(1); opacity: 0; } }
.flow-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.flow-node { position: relative; width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #1A2742, #111B31); box-shadow: inset 0 0 0 1px rgba(120,150,255,0.30), 0 14px 30px -10px rgba(2,4,12,0.7); margin-bottom: 24px; }
.flow-node-ring { position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(30,91,255,0.45); }
.flow-step:first-child .flow-node { box-shadow: inset 0 0 0 1px rgba(35,229,196,0.5), 0 14px 30px -10px rgba(2,4,12,0.7); }
.flow-step:first-child .flow-node-ring { animation: flowPulse 2.2s ease-out infinite; }
@keyframes flowPulse { 0% { box-shadow: 0 0 0 0 rgba(35,229,196,0.4); } 70% { box-shadow: 0 0 0 12px rgba(35,229,196,0); } 100% { box-shadow: 0 0 0 0 rgba(35,229,196,0); } }
.flow-num { font-family: var(--mono); font-size: 19px; font-weight: 500; letter-spacing: .02em; color: var(--bone); }
.flow-step:first-child .flow-num { color: var(--plasma); }
.flow-title { font-family: var(--font); font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; color: var(--bone); margin: 0 0 10px; }
.flow-text { font-size: 15px; line-height: 1.55; color: var(--soft-grey); margin: 0; max-width: 34ch; }
@media (max-width: 760px){
  .section--how .flow { grid-template-columns: 1fr; gap: 14px; }
  .flow-line { top: 0; bottom: 0; left: 31px; right: auto; width: 2px; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); }
  .flow-line-fill { animation: flowFillV 3.6s ease-in-out infinite; }
  @keyframes flowFillV { 0% { transform: scaleY(0); opacity: 0.9; } 55% { transform: scaleY(1); opacity: 0.9; } 80%,100% { transform: scaleY(1); opacity: 0; } }
  .flow-line-fill { transform-origin: top; }
  .flow-step { flex-direction: row; align-items: flex-start; gap: 22px; padding-bottom: 14px; }
  .flow-node { margin-bottom: 0; flex: 0 0 64px; }
  .flow-body { padding-top: 8px; }
}


/* ===== Featured at — scrolling press strip (1:1 with canonical spec, inside hero) ===== */
@keyframes aqFeatScroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.aq-feat { margin-top: 64px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.aq-feat__label { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(200,218,231,.55); }
.aq-feat__track { position: relative; width: 100%; max-width: 100%; overflow: hidden; contain: layout paint; isolation: isolate; transform: translateZ(0); }
.aq-feat__track::before, .aq-feat__track::after { content: ""; position: absolute; top: 0; bottom: 0; width: 13%; pointer-events: none; z-index: 2; }
.aq-feat__track::before { left: 0; background: linear-gradient(90deg, var(--apex-night,#0C1428) 0%, rgba(12,20,40,0) 100%); }
.aq-feat__track::after { right: 0; background: linear-gradient(270deg, var(--apex-night,#0C1428) 0%, rgba(12,20,40,0) 100%); }
.aq-feat__row { display: flex; align-items: center; width: max-content; animation: aqFeatScroll 38s linear infinite; will-change: transform; backface-visibility: hidden; contain: layout paint style; }
.aq-feat__set { display: flex; align-items: center; gap: 60px; padding-right: 60px; flex: 0 0 auto; }
.aq-feat__track:hover .aq-feat__row { animation-play-state: paused; }
.aq-feat__row img { height: calc(var(--feat-scale,1) * var(--h,28px)); width: auto; object-fit: contain; display: block; flex-shrink: 0; opacity: .62; backface-visibility: hidden; }
@media (max-width: 767px){ .aq-feat { margin-top: 44px; gap: 13px; } .aq-feat__set { gap: 44px; padding-right: 44px; } .aq-feat__row { --feat-scale: .84; animation-duration: 32s; } }
@media (max-width: 480px){ .aq-feat { margin-top: 32px; gap: 11px; } .aq-feat__label { font-size: 9px; letter-spacing: .2em; } .aq-feat__set { gap: 30px; padding-right: 30px; } .aq-feat__row { --feat-scale: .79; animation-duration: 24s; } .aq-feat__track::before, .aq-feat__track::after { width: 9%; } }
@media (prefers-reduced-motion: reduce){ .aq-feat__row { animation: none; } }

/* ===== Globe band (global operations) ===== */
.section--globe { position: relative; overflow: hidden; }
.section--globe .globe-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 64px; align-items: center; position: relative; z-index: 1;
}
.globe-col { display: flex; align-items: center; justify-content: center; }
.globe-orb { width: 100%; max-width: 432px; aspect-ratio: 1/1; }
.globe-orb .globe-fade-overlay { display: none; }
.globe-copy { display: flex; flex-direction: column; }
.globe-copy .t-h2 { margin-top: 18px; }
.globe-copy .t-lede { margin-top: 22px; max-width: 52ch; }
.globe-stats {
  margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.14);
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}
.globe-stat__value { font-family: var(--font); font-weight: 500; font-size: 32px; letter-spacing: -0.025em; color: var(--bone); line-height: 1; }
.globe-stat__label { margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(242,244,248,0.55); }
.globe-halo { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(8px); }
.globe-halo--a { width: 460px; height: 460px; left: 4%; top: 6%; background: radial-gradient(circle, rgba(30,91,255,0.16), transparent 62%); }
.globe-halo--b { width: 300px; height: 300px; left: 0; bottom: 4%; background: radial-gradient(circle, rgba(30,91,255,0.10), transparent 60%); }
@media (max-width: 980px){
  .section--globe .globe-grid { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .globe-col { position: relative; z-index: 1; }
  .globe-copy { align-items: center; position: relative; z-index: 2; }
  .globe-copy .t-lede { margin-left: auto; margin-right: auto; }
  /* Show the top HALF of the globe, melting into the page bg with a long gradual fade.
     Robust sizing: definite square (aspect-ratio + width); the canvas is absolute-filled in
     Globe.jsx so it can NEVER collapse on iOS Safari (no percentage-height chain). */
  .globe-orb { width: min(440px, 86vw); max-width: 440px; aspect-ratio: 1 / 1; margin: 0 auto max(-132px, -25.8vw); position: relative; }
  .globe-orb canvas { pointer-events: none; touch-action: auto !important; cursor: default !important; }
  .globe-orb .globe-fade-overlay {
    display: block; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(12,20,40,0) 0%, rgba(12,20,40,0) 38%,
      rgba(12,20,40,0.40) 50%, rgba(12,20,40,0.78) 59%,
      rgba(12,20,40,0.96) 66%, #0C1428 70%, #0C1428 100%);
  }
  .globe-stats { max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px){
  .globe-orb { max-width: none; width: 92vw; margin: 0 auto -27.6vw; }
  .globe-stats { gap: 12px; }
  .globe-stat__value { font-size: clamp(22px, 6.4vw, 30px); }
}

/* ===== Mission & Vision band ===== */
.section--mvc .mvc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.section--mvc .mvc-head-text { flex: 1; min-width: 0; max-width: 760px; }
.section--mvc .mvc-head-text .t-h2 { margin-top: 18px; }
.section--mvc .mvc-head-text .t-lede { margin-top: 20px; max-width: 560px; }
/* prev/next arrows removed: desktop shows all 3 cards as a grid; mobile uses native finger-swipe. */
/* DESKTOP: static 3-up grid — all three cards visible, no scroll, no arrows.
   MOBILE (≤900): the strip becomes a native horizontal finger-swipe scroller (CSS only — no JS,
   no mask, because a mask on a scroll container breaks iOS touch scrolling; text is non-selectable
   so a finger-drag on the text scrolls instead of selecting). */
.section--mvc .mvc-cards-rail { position: relative; z-index: 1; }
.section--mvc .mvc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: end; }
.section--mvc .mvc-card { position: relative; min-height: 372px; border-radius: 28px; overflow: hidden; isolation: isolate; display: flex; transition: box-shadow .4s var(--ease); }
@media (max-width: 900px){
  .section--mvc .mvc-cards-rail {
    margin-left: -24px; margin-right: -24px; padding: 6px 24px 24px 24px;
    overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-left: 24px;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  }
  .section--mvc .mvc-cards-rail::-webkit-scrollbar { display: none; }
  .section--mvc .mvc-cards { display: flex; width: max-content; }
  .section--mvc .mvc-card { flex: 0 0 84vw; width: 84vw; max-width: 360px; scroll-snap-align: start; }
}
.section--mvc .mvc-card--dark {
  background:
    radial-gradient(72% 40% at 50% 103%, rgba(92,130,255,0.32) 0%, rgba(30,91,255,0.13) 40%, transparent 74%),
    radial-gradient(140% 120% at 50% 100%, rgba(30,91,255,0.12) 0%, #1B2742 50%, #141F38 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 30px 60px -20px rgba(2,4,12,0.5);
}
.section--mvc .mvc-card--light {
  background:
    radial-gradient(58% 56% at 100% 0%, rgba(120,150,255,0.40) 0%, rgba(30,91,255,0.15) 42%, transparent 76%),
    radial-gradient(120% 100% at 50% 0%, rgba(30,91,255,0.22) 0%, #15203D 55%, #111A35 100%);
  box-shadow: inset 0 0 0 1px rgba(92,130,255,0.30), 0 30px 60px -20px rgba(4,8,22,0.5);
}
/* featured center card — breaks the symmetry: brighter blue field, raised, accent ring */
.section--mvc .mvc-card--featured {
  background:
    radial-gradient(70% 60% at 50% -8%, rgba(150,180,255,0.5) 0%, rgba(46,107,255,0.34) 38%, transparent 72%),
    linear-gradient(168deg, #2A5BE6 0%, #1E4ED0 46%, #163CAd 100%);
  box-shadow: inset 0 0 0 1px rgba(150,180,255,0.5), 0 40px 80px -24px rgba(20,52,150,0.7);
}
.section--mvc .mvc-cards { align-items: end; }
.section--mvc .mvc-card--featured { min-height: 404px; z-index: 2; }
.section--mvc .mvc-card--featured .mvc-card-inner h3 { color: #fff; }
.section--mvc .mvc-card--featured ul.mvc-values li { color: rgba(255,255,255,0.86); }
.section--mvc .mvc-card--featured ul.mvc-values strong { color: #fff; }
.section--mvc .mvc-card--featured ul.mvc-values .mvc-sep { color: rgba(255,255,255,0.5); }
.section--mvc .mvc-card--featured ul.mvc-values .mvc-check { background: #fff; color: #1E4ED0; }
.section--mvc .mvc-card--featured .mvc-index { color: rgba(255,255,255,0.5); }
.section--mvc .mvc-card--featured .mvc-foot { color: rgba(255,255,255,0.66); }
.section--mvc .mvc-card--featured .mvc-foot::before { background: linear-gradient(90deg, rgba(255,255,255,0.9), transparent); }
.section--mvc .mvc-disc--accent { background: linear-gradient(150deg, #fff, #E4ECFF 70%, #CBD8FF); color: #1E4ED0; box-shadow: 0 12px 30px -8px rgba(10,20,60,0.5), inset 0 1px 0 rgba(255,255,255,0.9); }
.section--mvc .mvc-card--featured .mvc-disc-ring { border-color: rgba(255,255,255,0.5); }
@media (max-width: 900px){
  .section--mvc .mvc-card--featured { min-height: 372px; }
}
/* fine grain texture for material richness */
.section--mvc .mvc-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
/* cursor-follow spotlight */
.section--mvc .mvc-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(120,150,255,0.22), transparent 60%); }
/* Hover lift + cursor-follow glow removed by request: cards stay static so scrolling is smooth (desktop + mobile). */
.section--mvc .mvc-card-inner { position: relative; z-index: 2; flex: 1; padding: 32px 32px 60px; display: flex; flex-direction: column; box-sizing: border-box; }
/* card top row: disc + editorial index */
.section--mvc .mvc-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; }
.section--mvc .mvc-index { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .18em; color: rgba(242,244,248,0.34); padding-top: 6px; }
/* refined icon disc with concentric ring + glow */
.section--mvc .mvc-disc { position: relative; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; transition: transform .4s var(--ease); }
.section--mvc .mvc-disc-ring { position: absolute; inset: -5px; border-radius: 999px; border: 1px solid rgba(120,150,255,0.30); transition: transform .5s var(--ease), border-color .4s var(--ease); }
.section--mvc .mvc-disc--blue { background: linear-gradient(150deg, #3D74FF, #1E5BFF 60%, #1748D6); color: #fff; box-shadow: 0 10px 30px -8px rgba(30,91,255,0.7), inset 0 1px 0 rgba(255,255,255,0.35); }
.section--mvc .mvc-disc--dark { background: linear-gradient(150deg, #131F3B, #0A1124); color: #C8D4FF; box-shadow: inset 0 0 0 1px rgba(165,173,196,0.22), inset 0 1px 0 rgba(255,255,255,0.10); }
/* Hover micro-motion on the icon disc removed by request (static cards). */
.section--mvc .mvc-card h3 { font-family: var(--font); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; color: #F2F4F8; margin: 0 0 16px; }
/* footer micro-label, pinned to a fixed offset from card bottom so all three align */
.section--mvc .mvc-foot { position: absolute; left: 32px; bottom: 30px; padding-top: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,244,248,0.42); }
.section--mvc .mvc-foot::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 1px; background: linear-gradient(90deg, rgba(120,150,255,0.7), transparent); }
.section--mvc .mvc-card--dark p { color: #C2C9D9; font-size: 15px; line-height: 1.45; letter-spacing: -0.005em; margin: 0; max-width: 270px; }
.section--mvc ul.mvc-values { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.section--mvc ul.mvc-values li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.4; letter-spacing: -0.005em; color: #C2C9D9; }
.section--mvc ul.mvc-values .mvc-check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 999px; background: #F2F4F8; display: grid; place-items: center; color: #0A1124; margin-top: 2px; }
.section--mvc ul.mvc-values strong { font-weight: 600; color: #F2F4F8; }
.section--mvc ul.mvc-values .mvc-sep { color: #68708A; }
@media (max-width: 980px){
  /* the rail is already a native scroll-snap carousel from the base rule above; here we just
     stack the header above the arrows and widen the cards a touch for the narrower viewport. */
  .section--mvc .mvc-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .section--mvc .mvc-card { flex-basis: 430px; width: 430px; }
}
/* Touch / coarse-pointer (phones, tablets): drop the edge-fade mask on the scroll container.
   A CSS mask on an overflow scroller can interfere with momentum scrolling on iOS Safari, so on
   finger devices we trade the cosmetic fade for guaranteed native swipe (desktop keeps the fade). */
@media (hover: none) and (pointer: coarse){
  .section--mvc .mvc-cards-rail { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 560px){
  .section--mvc .mvc-card { flex-basis: 300px; width: 300px; min-height: 360px; }
}

/* ===== Closer ===== */
.section--cta { background: var(--light-bone); margin-top: -1px; padding-top: calc(48px + 1px); }
.section--testimonials { margin-bottom: -1px; padding-bottom: calc(48px + 1px); }
/* home only (kit.css is loaded only on the landing): halve the gap below the video reviews before the final CTA */
.section--testimonials .tt-scroller { padding-bottom: 32px; }
.closer-box .t-closer { color: var(--bone); }
.closer-box .closer-lede { color: var(--soft-grey); }
.closer-box { border-radius: var(--r-box); background: var(--navy-cta); box-shadow: inset 0 0 0 1px var(--card-line); padding: 52px 56px; position: relative; overflow: hidden; margin-top: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 56px; text-align: left; }
.closer-box--solo { grid-template-columns: 1fr; text-align: center; padding: 64px 56px; }
.closer-box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 0%, var(--accent-halo, rgba(30,91,255,0.20)), transparent 55%); }
.closer-box > * { position: relative; z-index: 1; }
.closer-main { min-width: 0; }
.closer-box .t-closer { margin-top: 14px; }
.closer-box--solo .closer-main { margin: 0 auto; }
.closer-box .closer-lede { margin: 20px 0 0; max-width: 46ch; }
.closer-box--solo .closer-lede { margin-left: auto; margin-right: auto; text-align: center; }
.closer-box .ctarow { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.closer-box--solo .ctarow { justify-content: center; }

/* ===== Straddle CTA — the box bridges the light band and the dark footer ===== */
/* Desktop only: the footer rises, the contained navy box overlaps the seam so the
   final call-to-action becomes the page's focal jewel. Box and footer are both navy,
   so the box gets a brighter blue rim + a soft ambient lift to read as a distinct
   plane instead of melting into the footer. */
@media (min-width: 861px) {
  .section--cta { z-index: auto; padding-bottom: 0; }
  .section--cta .wrap { position: relative; z-index: 5; }
  .section--cta .closer-box {
    max-width: 1040px; margin-left: auto; margin-right: auto;
    padding: 76px 64px;
    background: linear-gradient(180deg, #15244E 0%, #101C42 52%, #0D1838 100%);
    box-shadow:
      inset 0 0 0 1px rgba(110,150,255,0.30),
      inset 0 1px 0 0 rgba(255,255,255,0.07),
      0 2px 10px -2px rgba(3,8,24,0.5),
      0 48px 110px -34px rgba(2,8,30,0.94);
  }
  /* brand-blue \"jewel\" glow, lit from the top-centre of the elevated panel */
  .section--cta .closer-box::before {
    background:
      radial-gradient(130% 90% at 50% -16%, rgba(46,92,255,0.26), transparent 58%),
      radial-gradient(80% 60% at 50% 120%, rgba(30,91,255,0.10), transparent 60%);
  }
  .section--cta .closer-lede { max-width: 720px; }
  .footer.footer { margin-top: -204px; padding-top: 300px; z-index: 2; }
}
/* Mobile: straddle the footer too (same ~44% overlap as desktop) */
@media (max-width: 860px) {
  .section--cta { padding-bottom: 0; }
  .section--cta .wrap { position: relative; z-index: 5; }
  .footer.footer { margin-top: -243px; padding-top: 307px; z-index: 2; }
}
/* scarcity dial */
.cta-dial { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta-dial__ring { --pct: 77; position: relative; width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--apex-blue) 0, var(--apex-blue) calc((var(--pct) - 1.5) * 1%), var(--plasma) calc((var(--pct) - 1.5) * 1%), var(--plasma) calc(var(--pct) * 1%), rgba(255,255,255,0.10) calc(var(--pct) * 1%), rgba(255,255,255,0.10) 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 60px, #000 61px); mask: radial-gradient(circle, transparent 0 60px, #000 61px); }
.cta-dial__core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cta-dial__num { font-family: var(--font); font-weight: 500; font-size: 56px; line-height: 0.9; letter-spacing: -0.04em; color: var(--bone); }
.cta-dial__unit { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--plasma); margin-top: 4px; }
.cta-dial__meta { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cta-dial__claimed { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cta-dial__claimed strong { color: var(--bone); font-weight: 600; }
.cta-dial__period { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft-grey); }
.cta-dial__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--plasma); box-shadow: 0 0 0 0 rgba(35,229,196,0.5); animation: ctaMeterPulse 1.8s ease-out infinite; }
@keyframes ctaMeterPulse { 0% { box-shadow: 0 0 0 0 rgba(35,229,196,0.45); } 70% { box-shadow: 0 0 0 7px rgba(35,229,196,0); } 100% { box-shadow: 0 0 0 0 rgba(35,229,196,0); } }
@media (max-width: 860px){
  .closer-box { grid-template-columns: 1fr; text-align: center; gap: 40px; padding: 52px 28px; }
  .closer-main { margin: 0 auto; }
  .closer-box .closer-lede { margin-left: auto; margin-right: auto; text-align: center; }
  .closer-box .ctarow { justify-content: center; }
  .cta-dial { order: -1; }
}