@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --text: #f5f5f5;
  --accent: #4c6fff;
  --reveal: 1;
  --aperture-min: clamp(116px, 9vw, 160px);
  --zoom: 1;
  --drift-x: 0px;
  --edge-energy: 0;
  --edge-left-core: .18;
  --edge-left-halo: .050;
  --edge-left-width: calc(var(--edge-right-width) * .84);
  --edge-right-core: .30;
  --edge-right-halo: .10;
  --edge-right-width: clamp(60px, 6vw, 104px);
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  background: #000;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #000; color: var(--text); }
html { scroll-behavior: auto; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.layout { padding-inline: clamp(24px, 4vw, 76px); }
.hero-scroll { position: relative; background: #000; }
.hero-sticky { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; isolation: isolate; background: #000; }
.motion-ready .hero-scroll { height: calc(100svh + 105svh); }
.site-header { position: absolute; z-index: 5; inset: 0 0 auto; height: 100px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-size: 24px; font-weight: 450; letter-spacing: -.035em; text-decoration: none; }
.header-action { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; text-decoration: none; }
.aperture {
  position: absolute; z-index: 1; inset: 0;
  clip-path: inset(0 calc((100% - var(--aperture-min)) * (1 - var(--reveal)) / 2));
  background: #000;
}
.aperture::before, .aperture::after {
  content: ""; position: absolute; z-index: 2; inset-block: 9%; width: var(--edge-width);
  background: radial-gradient(ellipse, rgb(180 207 231 / var(--edge-core)), rgb(144 181 209 / var(--edge-halo)) 34%, transparent 72%);
  opacity: var(--edge-energy); pointer-events: none;
}
.aperture::before { --edge-core: var(--edge-left-core); --edge-halo: var(--edge-left-halo); --edge-width: var(--edge-left-width); left: calc((100% - var(--aperture-min)) * (1 - var(--reveal)) / 2); transform: translateX(-50%); }
.aperture::after { --edge-core: var(--edge-right-core); --edge-halo: var(--edge-right-halo); --edge-width: var(--edge-right-width); right: calc((100% - var(--aperture-min)) * (1 - var(--reveal)) / 2); transform: translateX(50%); }
.universe-picture { display: block; }
.universe-image { display: block; width: 100%; height: auto; max-width: none; }
.universe-field {
  position: absolute; top: 50%; left: 52%; width: 100%; height: auto; max-width: none;
  transform: translate3d(calc(-50% + var(--drift-x)), -50%, 0) scale(var(--zoom));
  transform-origin: 60% 55%;
}
@media (min-width: 768px) {
  /* Blend the panorama's hard horizontal edges into the black stage. */
  .universe-image { mask-image: linear-gradient(transparent, #000 4%, #000 90%, transparent); }
}
.reading-shield {
  position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.99) 25%, rgba(0,0,0,.93) 36%, rgba(0,0,0,.28) 46%, transparent 55%);
}
.hero-copy { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; pointer-events: none; }
.eyebrow { margin: 12px 0 22px; color: #969696; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 500; }
.hero-copy h1 { width: min(39vw, 620px); margin: 0; font-size: clamp(52px, 4.55vw, 82px); line-height: 1.02; font-weight: 310; letter-spacing: -.042em; text-wrap: balance; }
.headline-emphasis { color: var(--accent); }
.hero-subhead { width: min(31vw, 455px); margin: 25px 0 0; color: #a9a9a9; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.5; }
.primary-action { pointer-events: auto; display: inline-flex; align-items: center; gap: 24px; min-height: 54px; margin-top: 30px; padding: 16px 20px; border-radius: 10px; background: var(--accent); color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; }
.primary-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.primary-action:hover { background: #5b7cff; }
.scroll-cue { position: absolute; z-index: 3; left: clamp(24px, 4vw, 76px); bottom: 26px; margin: 0; display: flex; gap: 12px; align-items: center; color: #a0a0a0; text-transform: uppercase; font-size: 11px; letter-spacing: .15em; opacity: clamp(0, calc((.75 - var(--reveal)) / .55), 1); }
.scroll-mouse { display: block; width: 15px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.scroll-mouse * { vector-effect: non-scaling-stroke; }
.hero-end-anchor { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; }
.semantic-layer { --leader-length: 20px; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.entity-frame { fill: none; stroke: #d7d7d2; stroke-width: 1.15; vector-effect: non-scaling-stroke; }
.entity-annotation { fill: #c8c8c3; font-family: inherit; font-size: 10.5px; font-weight: 475; letter-spacing: .025em; }
/* Tighten the existing 6px gap to 5px; lift the optical text center by half a pixel. */
.entity-annotation text { transform: translate(-1px, -.5px); }
/* Multiply the unchanged reveal opacity: terminal .52 × .7 = .364. */
.entity-connector { fill: none; stroke: #c8c8c3; stroke-width: .6; stroke-opacity: .7; vector-effect: non-scaling-stroke; }
.semantic-caption { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-copy h1 { font-size: 48px; width: 43vw; }
  .hero-subhead { width: 36vw; }
  .entity-annotation[data-annotation-concept="New regions"],
  .entity-annotation[data-annotation-concept="Emerging suppliers"] { display: none; }
}
@media (max-width: 767px) {
  :root { --aperture-min: 84px; --edge-left-core: .21; --edge-left-halo: .065; --edge-left-width: 54px; --edge-right-core: .28; --edge-right-halo: .085; --edge-right-width: 60px; }
  .entity-frame { stroke-width: 1.05; }
  .semantic-layer { --leader-length: 12px; }
  .entity-annotation { font-size: 10px; }
  .layout { padding-inline: 24px; }
  .hero-sticky { min-height: 740px; }
  .site-header { height: 78px; }
  .wordmark { font-size: 22px; }
  .header-action { font-size: 12px; }
  .hero-copy { justify-content: flex-start; padding-top: max(116px, 13svh); }
  .eyebrow { margin: 0 0 18px; font-size: 11px; }
  .hero-copy h1 { width: 100%; max-width: 470px; font-size: clamp(40px, 11.6vw, 59px); line-height: 1.04; letter-spacing: -.04em; }
  .hero-subhead { width: 100%; max-width: 410px; margin-top: 22px; font-size: 16px; }
  .primary-action { margin-top: 25px; font-size: 14px; min-height: 52px; gap: 18px; }
  .reading-shield { background: linear-gradient(#000 0%, #000 44%, rgba(0,0,0,.8) 52%, transparent 62%); }
  .universe-field { width: 132%; height: 132%; left: 44%; top: 44%; transform-origin: 70% 72%; }
  .universe-picture, .universe-image { width: 100%; height: 100%; }
  .universe-image { object-fit: contain; }
  .aperture::before, .aperture::after { inset-block: 55% 8%; }
  .scroll-cue { display: none; }
}
@media (max-height: 680px) and (min-width: 768px) {
  .hero-sticky { min-height: 560px; }
  .hero-copy h1 { font-size: 48px; }
  .site-header { height: 72px; }
  .hero-subhead { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --reveal: 1; --zoom: 1; --drift-x: 0px; }
  .motion-ready .hero-scroll { height: auto; }
  .aperture { clip-path: none; }
  .universe-field { transform: translate3d(-50%, -50%, 0); }
  .scroll-cue { display: none; }
}