:root {
  color-scheme: dark;
  --bg: #050507;
  --fg: #f5f7fb;
  --muted: rgba(245,247,251,.58);
  --line: rgba(255,255,255,.18);
  --glass: rgba(255,255,255,.07);
  --accent: #b8c7ff;
  --scroll: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(194,208,255,.26); color: #fff; }

.experience {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(78,92,144,.2), transparent 42%),
    #050507;
}
.experience__canvas { width: 100%; height: 100%; display: block; }
.experience__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,7,.06), rgba(5,5,7,.18) 55%, rgba(5,5,7,.46)),
    radial-gradient(circle at 50% 50%, transparent 34%, rgba(0,0,0,.34) 100%);
}
.experience__grain {
  position: absolute;
  inset: -50%;
  opacity: .16;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.12) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 73% 63%, rgba(255,255,255,.07) 0 1px, transparent 1px 5px);
  background-size: 7px 7px, 11px 11px;
  mix-blend-mode: soft-light;
  animation: grain 8s steps(8) infinite;
}
@keyframes grain {
  0% { transform: translate3d(-2%, 1%, 0); }
  25% { transform: translate3d(2%, -1%, 0); }
  50% { transform: translate3d(-1%, 2%, 0); }
  75% { transform: translate3d(1%, -2%, 0); }
  100% { transform: translate3d(-2%, 1%, 0); }
}

.topbar {
  position: fixed;
  z-index: 20;
  top: max(18px, env(safe-area-inset-top));
  left: clamp(18px, 3.2vw, 48px);
  right: clamp(18px, 3.2vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.topbar a { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(8,8,12,.35);
  backdrop-filter: blur(16px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand__text { color: rgba(255,255,255,.72); }
.topbar__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.48);
}
.signal {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c6d1ff;
  box-shadow: 0 0 18px rgba(198,209,255,.9);
}

.rail {
  position: fixed;
  z-index: 18;
  right: clamp(18px, 3.2vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
}
.rail__line {
  position: relative;
  width: 1px;
  height: 92px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.rail__line i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--scroll) * 100%);
  background: rgba(255,255,255,.8);
  transform-origin: top;
}

main { position: relative; z-index: 2; }
.scene { position: relative; min-height: 150svh; --local: 0; --reveal: 0; }
.scene--hero { min-height: 180svh; }
.scene--final { min-height: 135svh; }
.scene__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 110px clamp(24px, 7vw, 108px) 70px;
  overflow: hidden;
}
.scene__copy {
  width: min(1120px, 100%);
  margin: 0 auto;
  opacity: calc(.24 + var(--reveal) * .76);
  transform: translate3d(0, calc((.5 - var(--local)) * 8vh), 0) scale(calc(.97 + var(--reveal) * .03));
  transition: opacity .12s linear;
  will-change: transform, opacity;
}
.eyebrow {
  margin: 0 0 26px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}

.hero-copy { align-self: center; }
.hero-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: clamp(76px, 14.1vw, 220px);
  line-height: .73;
  letter-spacing: -.078em;
  font-weight: 680;
  text-transform: uppercase;
  max-width: 10ch;
}
.hero-title span { display: block; }
.hero-title span:nth-child(2) { margin-left: .65em; }
.hero-title__outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.8);
  text-stroke: 1px rgba(255,255,255,.8);
  opacity: calc(.62 + var(--reveal) * .38);
}
.hero-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-top: clamp(42px, 8vh, 88px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: rgba(255,255,255,.61);
  font-size: 13px;
  line-height: 1.45;
}
.hero-foot p { margin: 0; }
.scroll-cue { text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.scroll-cue i { display: inline-block; margin-left: 8px; font-style: normal; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

.statement { max-width: 1030px; }
.statement__lead {
  margin: 0 0 28px;
  font-size: clamp(18px, 2.2vw, 32px);
  color: rgba(255,255,255,.52);
  letter-spacing: -.025em;
}
.statement__big {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(54px, 8vw, 128px);
  line-height: .94;
  letter-spacing: -.065em;
  font-weight: 590;
}

.split {
  display: grid;
  grid-template-columns: minmax(160px, .72fr) minmax(0, 1.4fr);
  gap: clamp(36px, 8vw, 128px);
  align-items: center;
}
.split__number {
  font-size: clamp(150px, 26vw, 390px);
  line-height: .75;
  letter-spacing: -.08em;
  font-weight: 200;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.34);
  filter: drop-shadow(0 0 45px rgba(159,180,255,.13));
}
.split__content h2 {
  margin: 0 0 26px;
  font-size: clamp(52px, 7.2vw, 112px);
  line-height: .93;
  letter-spacing: -.06em;
  font-weight: 620;
  max-width: 8ch;
}
.split__content > p:last-child {
  margin: 0;
  max-width: 43ch;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.55;
  color: rgba(255,255,255,.58);
}

.cards { max-width: 1180px; }
.cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  perspective: 1200px;
}
.glass-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 90px rgba(0,0,0,.18);
  backdrop-filter: blur(18px) saturate(125%);
  transform: translate3d(0, calc((1 - var(--reveal)) * 60px), 0) rotateX(calc((1 - var(--reveal)) * 8deg));
  transition: border-color .3s ease, background .3s ease;
}
.glass-card:nth-child(2) { transform: translate3d(0, calc((1 - var(--reveal)) * 95px), 0) rotateX(calc((1 - var(--reveal)) * 10deg)); }
.glass-card:nth-child(3) { transform: translate3d(0, calc((1 - var(--reveal)) * 130px), 0) rotateX(calc((1 - var(--reveal)) * 12deg)); }
.glass-card:hover { border-color: rgba(255,255,255,.3); background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }
.glass-card span { margin-bottom: auto; font-size: 11px; color: rgba(255,255,255,.46); letter-spacing: .14em; }
.glass-card h3 { margin: 0 0 13px; font-size: clamp(24px, 2.2vw, 35px); line-height: 1; letter-spacing: -.04em; font-weight: 560; }
.glass-card p { margin: 0; color: rgba(255,255,255,.52); font-size: 14px; line-height: 1.55; }

.final { max-width: 1120px; }
.final h2 {
  margin: 0;
  font-size: clamp(56px, 9.6vw, 150px);
  line-height: .86;
  letter-spacing: -.07em;
  font-weight: 610;
}
.final h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.75); }
.final__footer {
  margin-top: clamp(50px, 10vh, 110px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.final__footer a { transition: color .2s ease; }
.final__footer a:hover { color: #fff; }

.noscript {
  position: fixed;
  z-index: 99;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(5,5,7,.88);
  backdrop-filter: blur(18px);
  font-size: 13px;
}

@media (max-width: 820px) {
  .topbar__meta, .brand__text { display: none; }
  .rail { right: 14px; }
  .scene__sticky { padding-left: 24px; padding-right: 38px; }
  .hero-title { font-size: clamp(65px, 20vw, 126px); line-height: .78; }
  .hero-title span:nth-child(2) { margin-left: .2em; }
  .hero-foot { align-items: flex-start; flex-direction: column; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split__number { font-size: clamp(120px, 48vw, 220px); }
  .cards__grid { grid-template-columns: 1fr; }
  .glass-card { min-height: 230px; }
  .scene--cards { min-height: 225svh; }
  .cards .scene__copy { padding-top: 72px; padding-bottom: 48px; }
  .final__footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .experience__grain, .scroll-cue i { animation: none; }
  .scene__copy, .glass-card { transform: none !important; transition: none !important; }
}

/* Compatibility overrides: JS supplies resolved values so transforms remain reliable across Safari/Chromium versions. */
.scene__copy {
  opacity: var(--fade, 1);
  transform: translate3d(0, var(--shift, 0px), 0) scale(var(--scale, 1));
}
.hero-title__outline { opacity: var(--outline-opacity, 1); }
.glass-card { transform: translate3d(0, var(--card-shift-1, 0px), 0) rotateX(var(--card-tilt-1, 0deg)); }
.glass-card:nth-child(2) { transform: translate3d(0, var(--card-shift-2, 0px), 0) rotateX(var(--card-tilt-2, 0deg)); }
.glass-card:nth-child(3) { transform: translate3d(0, var(--card-shift-3, 0px), 0) rotateX(var(--card-tilt-3, 0deg)); }
.no-webgl .experience__canvas { display: none; }

/* V2 — physical boundary / fracture layer */
.boundary-cage {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  opacity: .94;
  mix-blend-mode: screen;
}
.cage-edge {
  position: absolute;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(220,229,255,.84) 14%, #fff 50%, rgba(190,209,255,.84) 86%, transparent);
  box-shadow: 0 0 22px rgba(160,185,255,.32), 0 0 54px rgba(116,147,255,.16);
  will-change: transform, opacity;
}
.cage-edge--top,
.cage-edge--bottom {
  left: 11vw;
  right: 11vw;
  height: 1px;
}
.cage-edge--top { top: 15vh; }
.cage-edge--bottom { bottom: 15vh; }
.cage-edge--left,
.cage-edge--right {
  top: 15vh;
  bottom: 15vh;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(220,229,255,.8) 14%, #fff 50%, rgba(190,209,255,.8) 86%, transparent);
}
.cage-edge--left { left: 11vw; }
.cage-edge--right { right: 11vw; }
.cage-seam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, 1120px);
  height: 1px;
  transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent 4%, rgba(210,224,255,.09) 25%, rgba(255,255,255,.54) 50%, rgba(210,224,255,.09) 75%, transparent 96%);
  filter: drop-shadow(0 0 8px rgba(172,195,255,.45));
  opacity: .58;
  will-change: transform, opacity;
}
.cage-seam--a { transform: translate(-50%,-50%) rotate(24deg); }
.cage-seam--b { transform: translate(-50%,-50%) rotate(-31deg); }
.cage-shard {
  position: absolute;
  width: clamp(64px, 8vw, 140px);
  aspect-ratio: 1.5;
  border: 1px solid rgba(225,234,255,.24);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(105,137,255,.015));
  backdrop-filter: blur(5px);
  opacity: 0;
  will-change: transform, opacity;
}
.shard-1 { left: 10vw; top: 14vh; clip-path: polygon(0 0,100% 0,28% 100%); }
.shard-2 { right: 10vw; top: 18vh; clip-path: polygon(10% 0,100% 18%,68% 100%,0 72%); }
.shard-3 { left: 17vw; bottom: 12vh; clip-path: polygon(0 28%,72% 0,100% 100%,22% 82%); }
.shard-4 { right: 16vw; bottom: 13vh; clip-path: polygon(12% 0,100% 30%,58% 100%,0 72%); }
.scroll-cue b { color: rgba(255,255,255,.92); font-weight: 600; }
.hero-title span { will-change: transform, filter; }
body.is-rupturing .brand__mark {
  border-color: rgba(210,224,255,.46);
  box-shadow: 0 0 28px rgba(142,171,255,.16);
}

@media (max-width: 820px) {
  .cage-edge--top, .cage-edge--bottom { left: 7vw; right: 7vw; }
  .cage-edge--left { left: 7vw; }
  .cage-edge--right { right: 7vw; }
  .cage-edge--top { top: 12vh; }
  .cage-edge--bottom { bottom: 12vh; }
  .cage-edge--left, .cage-edge--right { top: 12vh; bottom: 12vh; }
}

@media (prefers-reduced-motion: reduce) {
  .boundary-cage { opacity: .28; }
  .cage-seam, .cage-shard { display: none; }
}