/* ==========================================================================
   MedAchievers — Motion layer
   Components that only come alive with assets/js/motion.js
   (GSAP + ScrollTrigger + Lenis + three.js). Content stays readable without JS.
   ========================================================================== */

/* ---------- Lenis ---------- */
/* Native smooth scrolling must be off while GSAP/Lenis run: ScrollTrigger jumps
   to the top to measure on refresh, and a smooth jump makes every pinned section
   measure at the wrong offset. Lenis already animates anchor links. */
html.js-motion { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 400; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,3%); } 80% { transform: translate(3%,1%); } 100% { transform: translate(0,0); } }

/* ---------- Scroll progress ---------- */
.progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 150; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad-accent); pointer-events: none; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 1000; background: var(--navy-950); color: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.preloader .pl-inner { width: min(420px, 80vw); }
.preloader img { height: 56px; width: auto; margin-bottom: 40px; opacity: 0; transform: translateY(16px); }
.preloader .pl-row { display: flex; justify-content: space-between; align-items: flex-end; font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 14px; }
.preloader .pl-count { font: 300 clamp(3.5rem, 9vw, 6rem)/.9 var(--f-display); color: #fff; letter-spacing: -.05em; }
.preloader .pl-bar { height: 1px; background: var(--line-dark); position: relative; overflow: hidden; }
.preloader .pl-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-400), var(--teal-400)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Page transition ---------- */
.pt { position: fixed; inset: 0; z-index: 900; pointer-events: none; display: grid; grid-template-columns: repeat(5, 1fr); }
.pt i { background: var(--navy-950); transform: scaleY(0); transform-origin: 50% 100%; }
.pt i:nth-child(odd) { background: var(--navy-900); }

/* ---------- Split text ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi { display: inline-block; will-change: transform; }

/* ---------- Header behaviour ---------- */
.site-header { transition: background .35s, border-color .35s; }

/* ---------- Magnetic / roll buttons ---------- */
.btn, .roll { overflow: hidden; }
.roll-t { display: inline-flex; flex-direction: column; height: 1em; line-height: 1; overflow: hidden; }
.roll-t span { display: block; transition: transform .45s var(--ease); }
.btn:hover .roll-t span, .roll:hover .roll-t span { transform: translateY(-100%); }

/* ==========================================================================
   HOME HERO v3 — viewport-fitted, globe + orbit rings + stats bar
   Sizes use both vw and vh so the hero fits laptop screens (e.g. 1366x657).
   ========================================================================== */
.hx {
  /* Globe size: never taller than the space between the header and the stats bar,
     so arcs don't run behind the nav. Position is anchored to the content container
     (not the viewport edge) so wide screens keep the globe next to the copy. */
  --bar-h: 92px;
  /* --hf: hero title size; its first line is ~8.6em wide and the copy column matches it.
     --cw: container content width. The globe takes what is left beside the copy. */
  --hf: clamp(2.5rem, min(5.4vw, 10vh), 5.6rem);
  --cw: calc(min(100vw, var(--container)) - 2 * var(--gutter));
  --g: min(52vw, calc(100vh - var(--header-h)), calc(var(--container) * .62), calc((var(--cw) - var(--hf) * 8.6 - 24px) / .84));
  --gt: max(var(--header-h), calc(var(--header-h) + (100vh - var(--header-h) - var(--bar-h) - var(--g)) / 2));
  /* sphere (inset ~8% inside the canvas) lines up with the content edge of the container */
  --gr: max(calc(var(--gutter) - var(--g) * .08), calc((100vw - var(--container)) / 2 + var(--gutter) - var(--g) * .08));
  position: relative; min-height: max(600px, 100vh); min-height: max(600px, 100svh); overflow: hidden; isolation: isolate;
  background: var(--navy-950); color: var(--on-dark-2);
  display: flex; flex-direction: column;
  padding-top: var(--header-h);
}
.hx { background:
    radial-gradient(90% 80% at 80% 30%, #112561 0%, rgba(17, 37, 97, 0) 60%),
    radial-gradient(70% 60% at 10% 100%, #1A1650 0%, rgba(26, 22, 80, 0) 70%),
    linear-gradient(180deg, #060B24 0%, #050A1F 100%); }
.hx-aurora { position: absolute; inset: 0; z-index: -4; overflow: hidden; }
.hx-aurora span { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; mix-blend-mode: screen; }
.hx-aurora span:nth-child(1) { width: 46vw; height: 46vw; right: 2vw; top: -10vw; background: radial-gradient(circle, rgba(74, 107, 255, .38), transparent 65%); animation: drift1 16s ease-in-out infinite alternate; }
.hx-aurora span:nth-child(2) { width: 34vw; height: 34vw; right: 18vw; top: 26vh; background: radial-gradient(circle, rgba(61, 207, 245, .22), transparent 65%); animation: drift2 20s ease-in-out infinite alternate; }
.hx-aurora span:nth-child(3) { width: 40vw; height: 40vw; left: -14vw; bottom: -16vw; background: radial-gradient(circle, rgba(124, 92, 255, .3), transparent 65%); animation: drift2 24s ease-in-out infinite alternate-reverse; }
.hx-aurora span:nth-child(4) { width: 18vw; height: 18vw; left: 30vw; top: -6vw; background: radial-gradient(circle, rgba(217, 182, 94, .16), transparent 65%); animation: drift1 28s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(-7vw, 6vw) scale(1.15); } }
@keyframes drift2 { to { transform: translate(8vw, -5vw) scale(1.12); } }
.hx-beam {
  position: absolute; z-index: -3; pointer-events: none; width: calc(var(--g) * 1.9); aspect-ratio: 1;
  right: calc(var(--gr) - var(--g) * .45); top: calc(var(--gt) - var(--g) * .45); border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 14%, rgba(61, 207, 245, .13) 18%, transparent 24% 52%, rgba(124, 92, 255, .14) 58%, transparent 64% 82%, rgba(74, 107, 255, .12) 88%, transparent 94%);
  -webkit-mask-image: radial-gradient(circle, transparent 24%, #000 34%, transparent 70%); mask-image: radial-gradient(circle, transparent 24%, #000 34%, transparent 70%);
  animation: spin 60s linear infinite;
}
.hx-spot { position: absolute; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(520px circle at var(--sx, 30%) var(--sy, 40%), rgba(107, 140, 255, .12), transparent 60%); }
.hx::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1.4px);
  background-size: 26px 26px; -webkit-mask-image: radial-gradient(70% 70% at 25% 45%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 70% at 25% 45%, #000 0%, transparent 75%);
}
.hx::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5, 10, 31, .85));
}

/* Globe + orbit rings */
.globe-wrap {
  position: absolute; z-index: -1; width: var(--g); aspect-ratio: 1;
  right: var(--gr); top: var(--gt);
  perspective: 1400px;
}
.globe-wrap canvas { position: relative; z-index: 2; width: 100% !important; height: 100% !important; cursor: grab; opacity: 0; transition: opacity .9s var(--ease); }
.globe-wrap canvas:active { cursor: grabbing; }
.globe-wrap.ready canvas { opacity: 1; }
/* Static poster of the globe: visible instantly, cross-fades to the live WebGL globe */
.globe-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: opacity .9s var(--ease); }
.globe-wrap.ready .globe-poster { opacity: 0; }
.orbit { position: absolute; inset: 1%; border-radius: 50%; border: 1px solid rgba(127, 224, 255, .16); pointer-events: none; transform-style: preserve-3d; }
.orbit::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--teal-300); box-shadow: 0 0 14px 3px rgba(61, 207, 245,.6); }
.orbit.o1 { animation: orb1 26s linear infinite; }
.orbit.o2 { inset: -5%; border-color: rgba(164, 139, 255, .2); animation: orb2 38s linear infinite; }
.orbit.o2::before { background: var(--violet-400); box-shadow: 0 0 14px 3px rgba(124, 92, 255, .65); }
@keyframes orb1 { from { transform: rotateX(72deg) rotateY(-14deg) rotateZ(0); } to { transform: rotateX(72deg) rotateY(-14deg) rotateZ(360deg); } }
@keyframes orb2 { from { transform: rotateX(78deg) rotateY(18deg) rotateZ(360deg); } to { transform: rotateX(78deg) rotateY(18deg) rotateZ(0); } }

/* Main copy */
.hx-main { flex: 1; display: flex; align-items: center; padding: clamp(20px, 4vh, 56px) 0; }
.hx-inner { position: relative; z-index: 2; max-width: 880px; }
.hx-kicker {
  display: inline-flex; align-items: center; gap: 12px; padding: 7px 16px 7px 10px; margin-bottom: clamp(18px, 3.4vh, 32px);
  border: 1px solid var(--line-dark); border-radius: 999px; background: rgba(255,255,255,.04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 11.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2);
}
.hx-kicker .live { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-400); animation: livepulse 2s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(61, 207, 245,.6); } 100% { box-shadow: 0 0 0 12px rgba(61, 207, 245,0); } }
.rotator { position: relative; display: inline-grid; height: 1.3em; overflow: hidden; color: var(--teal-300); min-width: 8.5em; }
.rotator span { grid-area: 1 / 1; }
.rotator span + span { visibility: hidden; }
.js-motion .rotator span + span { visibility: visible; }
/* Always two lines ("Shaping the future of" / "global healthcare", split by a <br>).
   The first line is ~8.5em wide, so the size is capped to keep it from wrapping. */
.hx-title {
  font: 600 var(--hf)/.98 var(--f-display); letter-spacing: -.05em; color: #fff;
  margin: 0 0 clamp(20px, 3.6vh, 32px);
}
.hx-title em { font-style: normal; color: var(--teal-300); }
/* room for descenders (g, p) under the word-reveal mask on the tight .98 line-height */
.hx-title .w { padding-bottom: .16em; margin-bottom: -.16em; }
/* gradient text only paints inside the box, so extend it below the descenders */
.hx-title em .wi { padding-bottom: .16em; margin-bottom: -.16em; }
.hx-title em, .hx-title em .wi { background: var(--grad-text); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-lead { font-size: clamp(1rem, min(1.3vw, 2.4vh), 1.2rem); line-height: 1.62; color: var(--on-dark-2); max-width: min(580px, calc(var(--hf) * 8.6)); margin: 0 0 clamp(22px, 4.2vh, 40px); }
.hx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hx-actions .btn { height: 56px; padding: 0 26px; }

/* Watch-the-film badge */
.hx-watch { display: inline-flex; align-items: center; gap: 14px; color: #fff; }
.hx-watch .ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; display: grid; place-items: center; }
.hx-watch .ring svg.txt { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 14s linear infinite; }
.hx-watch .ring svg.txt text { font: 500 9.6px var(--f-mono); letter-spacing: 1px; fill: rgba(255,255,255,.7); text-transform: uppercase; }
.hx-watch .ring .pl { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--navy-950); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; }
.hx-watch .ring .pl svg { width: 14px; height: 14px; margin-left: 2px; }
.hx-watch:hover .ring .pl { transform: scale(1.12); background: var(--teal-400); }
.hx-watch b { display: block; font: 600 15px var(--f-display); letter-spacing: -.01em; }
.hx-watch small { font: 500 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Floating glass chips */
.hx-chip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px; color: #fff;
  background: rgba(14, 26, 64, .55); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); font-size: 13px; line-height: 1.3;
}
.hx-chip b { display: block; font: 600 14px var(--f-display); letter-spacing: -.01em; }
.hx-chip small { font: 500 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-300); }
.hx-chip .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(61, 207, 245,.14); color: var(--teal-300); flex-shrink: 0; }
.hx-chip .ic svg { width: 17px; height: 17px; }
.hx-chip.k2 { right: max(24px, calc(var(--gr) + var(--g) * .04)); top: calc(var(--gt) + var(--g) * .08); }
.hx-chip.k3 { right: calc(var(--gr) + var(--g) * .5); top: calc(var(--gt) + var(--g) * .76); }

/* Bottom stats bar */
.hx-bar { position: relative; z-index: 2; border-top: 1px solid rgba(127, 224, 255, .14); background: linear-gradient(180deg, rgba(10, 19, 51, .35), rgba(5, 10, 31, .85)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hx-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(61, 207, 245, .7), rgba(124, 92, 255, .7), transparent); }
.hx-bar .container { display: grid; grid-template-columns: repeat(4, auto) 1fr; align-items: center; gap: 0; }
.hx-stat { padding: clamp(14px, 2.4vh, 24px) clamp(20px, 3vw, 44px) clamp(14px, 2.4vh, 24px) 0; display: flex; align-items: baseline; gap: 12px; }
.hx-stat + .hx-stat { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--line-dark); }
.hx-stat b { font: 500 clamp(1.4rem, min(2.2vw, 3.6vh), 2rem)/1 var(--f-display); letter-spacing: -.04em; color: #fff; }
.hx-stat b sup { font-size: .55em; color: var(--violet-400); }
.hx-stat > span { font: 500 10.5px/1.35 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); max-width: 120px; }
.scroll-cue2 { justify-self: end; display: flex; align-items: center; gap: 14px; font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }
.scroll-cue2 i { width: 1px; height: 40px; background: var(--line-dark); position: relative; overflow: hidden; }
.scroll-cue2 i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--teal-400); animation: drip 1.8s var(--ease) infinite; }
@keyframes drip { to { top: 100%; } }

@media (max-height: 700px) and (min-width: 981px) {
  .hx-chip.k3 { display: none; }
  .hx-actions .btn { height: 50px; }
}

/* ---------- Big marquee ---------- */
.marq { overflow: hidden; padding: clamp(28px, 4vw, 52px) 0; background: var(--navy-950); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.marq.light { background: #fff; border-color: var(--line); }
.marq-track { display: flex; width: max-content; will-change: transform; }
.marq-track span {
  display: inline-flex; align-items: center; gap: clamp(24px, 3vw, 48px); padding-right: clamp(24px, 3vw, 48px);
  font: 600 clamp(2.6rem, 7vw, 6.4rem)/1 var(--f-display); letter-spacing: -.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.28);
}
.marq-track span b { color: #fff; -webkit-text-stroke: 0; font-weight: 600; }
.marq-track span i { width: clamp(14px, 1.6vw, 24px); height: clamp(14px, 1.6vw, 24px); background: var(--grad-accent); transform: rotate(45deg); flex-shrink: 0; }
.marq.light .marq-track span { -webkit-text-stroke-color: rgba(10,26,48,.25); }
.marq.light .marq-track span b { color: var(--ink); }

/* ---------- Statement (scroll-lit words) ---------- */
.statement { padding: calc(var(--section-y) * 1.2) 0; }
.statement p {
  font: 500 clamp(1.9rem, 4.2vw, 3.9rem)/1.16 var(--f-display); letter-spacing: -.035em; color: var(--ink); margin: 0; max-width: 1180px;
}
.statement p .sw { display: inline-block; opacity: .14; transition: none; }
.statement p .sw.hl { color: var(--teal-600); }
.statement .meta { display: flex; gap: 48px; flex-wrap: wrap; margin-top: 56px; }
.statement .meta div { font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.statement .meta b { display: block; font: 500 1.5rem var(--f-display); letter-spacing: -.02em; color: var(--ink); text-transform: none; margin-top: 6px; }

/* ---------- Horizontal ecosystem ----------
   The pinned view is exactly one viewport tall; panels flex to fill what is
   left under the heading, so nothing is cut off on short laptop screens. */
.hs { position: relative; background: var(--soft); overflow: hidden; }
.hs-wrap {
  height: 100vh; height: 100svh; min-height: 560px; display: flex; flex-direction: column;
  padding: calc(var(--header-h) + clamp(8px, 2vh, 24px)) 0 clamp(20px, 4vh, 48px);
}
.hs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(16px, 3.4vh, 40px); flex-shrink: 0; }
.hs-head .label { margin-bottom: clamp(10px, 1.6vh, 22px); }
.hs-head .h2 { margin: 0; max-width: 820px; font-size: clamp(1.7rem, min(3.4vw, 5.6vh), 3.2rem); }
.hs-count { font: 500 12px var(--f-mono); letter-spacing: .12em; color: var(--muted); display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.hs-count .bar { width: 160px; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.hs-count .bar i { position: absolute; inset: 0; background: var(--teal-600); transform-origin: 0 50%; transform: scaleX(0); }
.hs-track {
  flex: 1; min-height: 0; display: flex; gap: 20px; width: max-content; will-change: transform;
  padding: 0 var(--gutter); padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.hs-panel {
  position: relative; flex-shrink: 0; height: 100%; width: min(74vw, 1000px, calc((100vh - 230px) * 1.9)); width: min(74vw, 1000px, calc((100svh - 230px) * 1.9));
  display: grid; grid-template-columns: 1.05fr 1fr; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line);
}
.hs-panel .media { position: relative; overflow: hidden; }
.hs-panel .media img { position: absolute; inset: -6% -12%; width: 124%; height: 112%; object-fit: cover; }
.hs-panel .body { padding: clamp(22px, 4vh, 48px) clamp(24px, 3vw, 48px); display: flex; flex-direction: column; min-height: 0; }
.hs-panel .num { font: 200 clamp(3.2rem, min(8vw, 13vh), 8rem)/.8 var(--f-display); letter-spacing: -.06em; color: var(--teal-600); }
.hs-panel h3 { font-size: clamp(1.4rem, min(2.6vw, 4.6vh), 2.4rem); margin: auto 0 clamp(8px, 1.6vh, 14px); letter-spacing: -.03em; }
.hs-panel p { color: var(--muted); font-size: clamp(14px, 2.2vh, 15.5px); margin: 0 0 clamp(14px, 3vh, 26px); max-width: 420px; }
.hs-panel .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(14px, 3vh, 28px); }
.hs-panel.dark { background: var(--navy-900); border-color: var(--navy-900); }
.hs-panel.dark h3 { color: #fff; }
.hs-panel.dark p { color: var(--on-dark-2); }
.hs-panel.dark .num { color: var(--teal-300); }
.hs-panel.dark .more { color: #fff; }
.hs-panel.end { width: min(46vw, 560px); grid-template-columns: 1fr; background: var(--navy-950); border-color: var(--navy-950); }
.hs-panel.end .body { justify-content: space-between; }
.hs-panel.end h3 { color: #fff; margin: 0; font-size: clamp(1.8rem, min(3.6vw, 6vh), 3.2rem); }
@media (max-height: 720px) and (min-width: 981px) {
  .hs-panel .tags { display: none; }
}
@media (max-height: 600px) and (min-width: 981px) {
  .hs-panel p { display: none; }
}

/* ---------- Spotlight + tilt ---------- */
.spot { position: relative; }
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 207, 245, .14), transparent 45%);
}
.spot:hover::before { opacity: 1; }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* ---------- Solutions: list + sticky preview ---------- */
.hl { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.hl-list { border-top: 1px solid var(--line); }
.hl-row {
  position: relative; display: grid; grid-template-columns: 56px 1fr 44px; align-items: center; gap: 18px;
  padding: clamp(18px, 2.4vh, 26px) 20px clamp(18px, 2.4vh, 26px) 18px; border-bottom: 1px solid var(--line);
  color: var(--ink); border-radius: 12px; transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.hl-row::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px;
  background: var(--grad-accent); transform: scaleY(0); transition: transform .45s var(--ease);
}
.hl-row .n { font: 500 12px var(--f-mono); color: var(--muted-2); transition: color .3s; }
.hl-row h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -.025em; margin: 0 0 4px; transition: color .3s; }
.hl-row p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.hl-row .go { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); transition: all .4s var(--ease); }
.hl-row .go svg { width: 17px; height: 17px; transform: rotate(-45deg); transition: transform .4s var(--ease); }
.hl-row.is-active, .hl-row:hover, .hl-row:focus-visible { background: #fff; box-shadow: 0 18px 40px -26px rgba(10, 19, 51, .35); border-bottom-color: transparent; }
.hl-row.is-active::before, .hl-row:hover::before, .hl-row:focus-visible::before { transform: scaleY(1); }
.hl-row.is-active .n, .hl-row:hover .n { color: var(--teal-700); }
.hl-row.is-active .go, .hl-row:hover .go { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.hl-row.is-active .go svg, .hl-row:hover .go svg { transform: rotate(0); }
.hl-row .thumb { display: none; }
.hl-preview {
  position: sticky; top: calc(var(--header-h) + 24px); aspect-ratio: 4 / 4.4; max-height: calc(100vh - var(--header-h) - 60px);
  width: 100%; border-radius: 18px; overflow: hidden; background: var(--navy-900); isolation: isolate;
  box-shadow: 0 40px 80px -40px rgba(10, 19, 51, .45);
}
.hl-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.hl-preview img.on { opacity: 1; transform: scale(1); }
.hl-preview::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 10, 31, 0) 45%, rgba(5, 10, 31, .85)); }
.hl-cap { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; color: #fff; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.hl-cap b { font: 600 clamp(1.2rem, 1.8vw, 1.6rem)/1.2 var(--f-display); letter-spacing: -.02em; }
.hl-cap span { font: 500 11px var(--f-mono); letter-spacing: .12em; color: var(--teal-300); white-space: nowrap; }
@media (max-width: 980px) {
  .hl { grid-template-columns: 1fr; }
  .hl-preview { display: none; }
  .hl-row { grid-template-columns: 1fr 44px; gap: 14px; padding: 18px 0; border-radius: 0; }
  .hl-row.is-active, .hl-row:hover { background: transparent; box-shadow: none; border-bottom-color: var(--line); }
  .hl-row::before { display: none; }
  .hl-row .thumb { display: block; grid-column: 1 / -1; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
  .hl-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .hl-row .n { display: none; }
}

/* ---------- Final CTA ---------- */
.fx { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-950); color: var(--on-dark-2); padding: calc(var(--section-y) * 1.15) 0 0; }
.fx .bg { position: absolute; inset: 0; z-index: -2; }
.fx .bg img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; opacity: .35; }
.fx::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 80% at 50% 40%, rgba(5,10,31,.55), rgba(5,10,31,.97)); }
.fx-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.fx h2 { color: #fff; font: 600 clamp(2.6rem, 6vw, 5.6rem)/1 var(--f-display); letter-spacing: -.045em; margin: 0 0 28px; max-width: 900px; }
.fx p { max-width: 620px; font-size: 1.12rem; color: var(--on-dark-2); }
.orb {
  position: relative; width: clamp(160px, 16vw, 220px); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff;
  background: radial-gradient(circle at 30% 25%, rgba(107, 140, 255, .28), rgba(14, 26, 64, .9) 70%); border: 1px solid rgba(127, 224, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .5s var(--ease), border-color .4s;
  font: 600 15px/1.3 var(--f-display); letter-spacing: -.01em; padding: 20px;
}
.orb svg { width: 22px; height: 22px; margin: 8px auto 0; }
.orb:hover { background: var(--grad-cta); border-color: transparent; }
.orb::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(127, 224, 255, .14); animation: orbit 3.6s ease-in-out infinite; }
@keyframes orbit { 50% { transform: scale(1.08); opacity: .4; } }
.fx .marq { margin-top: var(--section-y); background: transparent; }

/* ---------- Image parallax helpers ---------- */
[data-parallax] { overflow: hidden; }
[data-parallax] > img { transform: scale(1.18); will-change: transform; }

/* ---------- Footer wordmark ---------- */
.footer-mark { overflow: hidden; padding-top: 40px; }
.footer-mark div { font: 600 clamp(3.4rem, 15vw, 12.5rem)/.82 var(--f-display); letter-spacing: -.065em; text-align: center; white-space: nowrap; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .hx-chip.k3, .scroll-cue2 { display: none; }
  .hx-bar .container { grid-template-columns: repeat(4, auto); }
}
@media (max-width: 980px) {
  .hx { min-height: auto; }
  /* Mobile/tablet: globe first, then the copy */
  .globe-wrap { position: relative; right: auto; top: auto; width: min(100%, 540px); margin: 0 auto -32px; order: 1; z-index: 0; }
  .hx-main { order: 2; padding: 8px 0 36px; }
  .hx-chip { display: none; }
  .hx-bar { order: 3; }
  .hx-title { font-size: clamp(2rem, calc((100vw - 2 * var(--gutter)) / 8.8), 4.4rem); }
  .hx-bar .container { grid-template-columns: 1fr 1fr; }
  .hx-stat { padding: 16px 12px 16px 0 !important; border-left: 0 !important; flex-direction: column; gap: 6px; }
  .hx-stat:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .hs-wrap { height: auto; min-height: 0; padding: clamp(80px, 10vw, 120px) 0; }
  .hs-track { flex: none; }
  .hs-head { flex-direction: column; align-items: flex-start; }
  .hs-count { display: none; }
  .hs-track { flex-direction: column; width: auto; padding: 0 var(--gutter); }
  .hs-panel, .hs-panel.end { width: 100%; height: auto; min-height: 0; grid-template-columns: 1fr; }
  .hs-panel .media { aspect-ratio: 16 / 9; }
  .hs-panel h3 { margin-top: 24px; }
  .fx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hx-actions .btn { flex: 1 1 100%; }
  .hx-kicker { font-size: 10.5px; letter-spacing: .08em; }
  .statement .meta { gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .grain, .hx-aurora span { animation: none; }
  .statement p .sw { opacity: 1; }
}
.fx .label { color: var(--teal-300); }
.fx .label::before { background: var(--teal-400); }