:root {
  --navy-950: #050d18;
  --navy-900: #07111f;
  --navy-800: #0c1b2c;
  --navy-700: #153149;
  --cyan: #39e7ff;
  --cyan-soft: #9ef3ff;
  --mist: #e9eef1;
  --mist-light: #f5f7f7;
  --ink: #0b1826;
  --slate: #536370;
  --white: #fafdff;
  --line-dark: rgba(255, 255, 255, 0.15);
  --line-light: rgba(11, 24, 38, 0.16);
  --page-pad: clamp(1.25rem, 4.8vw, 5.5rem);
  --display: "Avenir Next", "Century Gothic", "Futura", "PingFang SC", "Microsoft YaHei", sans-serif;
  --body: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--navy-900);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.8rem 1rem;
  color: var(--navy-950);
  background: var(--cyan);
  font-weight: 700;
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: var(--white);
  transition: background-color 240ms ease, backdrop-filter 240ms ease, border-color 240ms ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(5, 13, 24, 0.86);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px);
}

.nav-shell {
  min-height: 5.5rem;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--display);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-mark {
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-block;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
}

.brand-mark i {
  position: absolute;
  display: block;
  width: 0.34rem;
  background: var(--cyan);
  border-radius: 1rem;
  transform: rotate(32deg);
}

.brand-mark i:nth-child(1) { height: 0.7rem; left: 0.65rem; top: 0.75rem; }
.brand-mark i:nth-child(2) { height: 1.05rem; left: 1rem; top: 0.5rem; }
.brand-mark i:nth-child(3) { height: 0.48rem; left: 1.35rem; top: 0.86rem; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.8vw, 3rem);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
}

.site-nav a {
  position: relative;
  padding: 0.7rem 0;
  transition: color 180ms ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.3rem;
  width: 100%;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 240ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--white);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-action {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.84rem;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.nav-action:hover {
  color: var(--navy-950);
  background: var(--cyan);
  border-color: var(--cyan);
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(28rem, 0.96fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  padding: clamp(8.5rem, 13vh, 11rem) var(--page-pad) clamp(6rem, 9vh, 8rem);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(57, 231, 255, 0.025) 1px, transparent 1px) 0 0 / 7.5rem 7.5rem,
    linear-gradient(rgba(57, 231, 255, 0.025) 1px, transparent 1px) 0 0 / 7.5rem 7.5rem,
    radial-gradient(circle at 5% 95%, #143854 0, transparent 29%),
    var(--navy-900);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57, 231, 255, 0.55), transparent);
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.hero-glow-one {
  top: 13%;
  right: 30%;
  width: 20rem;
  height: 20rem;
  opacity: 0.17;
  background: radial-gradient(circle, var(--cyan), transparent 66%);
}

.hero-glow-two {
  bottom: -10rem;
  right: -5rem;
  width: 30rem;
  height: 30rem;
  opacity: 0.1;
  background: radial-gradient(circle, #627cff, transparent 70%);
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 2;
}

.eyebrow,
.section-number,
.contact-kicker {
  margin: 0 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.eyebrow {
  color: var(--cyan-soft);
}

.eyebrow span {
  width: 2.5rem;
  height: 1px;
  background: var(--cyan);
}

.hero-title {
  max-width: 11ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.7rem, 7.3vw, 8.2rem);
  line-height: 0.94;
  letter-spacing: -0.075em;
  font-weight: 700;
}

.title-line {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.08em 0.08em 0;
}

.kinetic-word {
  display: block;
  transform: translateY(110%);
  animation: title-rise 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

.title-line:nth-child(2) .kinetic-word {
  animation-delay: 140ms;
}

.title-line-accent {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cyan);
  text-shadow: 0 0 40px rgba(57, 231, 255, 0.12);
}

@keyframes title-rise {
  to { transform: translateY(0); }
}

.hero-intro {
  max-width: 37rem;
  margin: clamp(1.8rem, 4vw, 3rem) 0 0;
  color: rgba(250, 253, 255, 0.7);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.9;
}

.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.button {
  min-height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  padding: 0 1.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button-primary {
  color: var(--navy-950);
  background: var(--cyan);
  box-shadow: 0 12px 35px rgba(57, 231, 255, 0.18);
}

.button-primary:hover {
  box-shadow: 0 18px 45px rgba(57, 231, 255, 0.28);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255,255,255,.28);
  font-size: 0.9rem;
  transition: color 180ms ease, border-color 180ms ease;
}

.text-link:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

.hero-index {
  width: min(31rem, 100%);
  margin-top: clamp(3rem, 7vh, 5.5rem);
  padding-top: 1.1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--line-dark);
}

.hero-index div {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  color: rgba(255,255,255,.58);
}

.hero-index strong {
  color: var(--cyan);
  font-family: var(--display);
  font-size: 0.72rem;
}

.hero-visual {
  align-self: stretch;
  max-height: 48rem;
  min-height: 34rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.frame-label,
.frame-caption,
.art-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.55);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

.frame-label {
  margin-bottom: 0.8rem;
}

.visual-frame {
  position: relative;
  min-height: clamp(27rem, 54vh, 38rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  background:
    radial-gradient(circle at 69% 31%, rgba(57,231,255,.42), transparent 16%),
    radial-gradient(circle at 33% 67%, rgba(115,133,255,.25), transparent 27%),
    linear-gradient(145deg, #1a354c 0%, #0b1b2a 48%, #102c3c 100%);
  box-shadow: 0 45px 90px rgba(0,0,0,.38), inset 0 0 80px rgba(57,231,255,.04);
}

.visual-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.07) 42%, transparent 59%);
  transform: translateX(-100%);
  animation: frame-shine 7s ease-in-out 1.2s infinite;
}

@keyframes frame-shine {
  0%, 55% { transform: translateX(-110%); }
  82%, 100% { transform: translateX(115%); }
}

.frame-grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 100% 25%;
}

.product-shadow {
  position: absolute;
  left: 10%;
  right: 8%;
  bottom: 7%;
  height: 18%;
  background: radial-gradient(ellipse, rgba(0,0,0,.72), transparent 67%);
  filter: blur(10px);
}

.product-tall {
  position: absolute;
  left: 47%;
  bottom: 14%;
  width: 25%;
  height: 61%;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 13rem 13rem 1rem 1rem;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.18) 49%, transparent 53%),
    linear-gradient(155deg, #13293e, #31bdd0 45%, #0a5d72 72%, #06121c);
  box-shadow: inset -1.5rem -1rem 2.4rem rgba(0,0,0,.24), 1.5rem 2rem 3rem rgba(0,0,0,.3);
  transform: rotate(5deg);
}

.product-tall::before {
  content: "";
  position: absolute;
  top: -7%;
  left: 37%;
  width: 28%;
  height: 11%;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: .4rem .4rem 0 0;
  background: linear-gradient(90deg, #5fefff, #0f5668);
}

.product-line {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 56%;
  height: 1px;
  background: rgba(255,255,255,.6);
}

.product-dot {
  position: absolute;
  width: 1rem;
  height: 1rem;
  left: calc(50% - .5rem);
  top: 48%;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
}

.product-round {
  position: absolute;
  left: 18%;
  bottom: 15%;
  width: 32%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background:
    radial-gradient(circle at 37% 31%, #bff9ff 0%, #48d8ec 8%, #0a708a 32%, #0c2437 66%, #030810 100%);
  box-shadow: inset -2rem -2rem 3rem rgba(0,0,0,.4), 1rem 2rem 3rem rgba(0,0,0,.38);
}

.product-block {
  position: absolute;
  right: 7%;
  bottom: 12%;
  width: 22%;
  height: 30%;
  padding: 18% 14% 0;
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(145deg, rgba(143,162,179,.48), rgba(20,41,57,.87));
  box-shadow: inset .6rem .6rem 1.5rem rgba(255,255,255,.07), 1.5rem 1.5rem 2.2rem rgba(0,0,0,.34);
  transform: rotate(-6deg);
}

.product-block i {
  display: block;
  height: 1px;
  margin-bottom: .6rem;
  background: rgba(255,255,255,.48);
}

.product-block i:nth-child(2) { width: 70%; }
.product-block i:nth-child(3) { width: 40%; }

.product-ring {
  position: absolute;
  right: 13%;
  top: 13%;
  width: 29%;
  aspect-ratio: 1;
  border: clamp(.6rem, 1vw, 1rem) solid rgba(57,231,255,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(57,231,255,.5), inset 0 0 28px rgba(57,231,255,.25), 0 0 35px rgba(57,231,255,.18);
}

.float-card {
  position: absolute;
  left: 5%;
  top: 14%;
  width: 6.8rem;
  aspect-ratio: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--navy-950);
  background: rgba(206,248,255,.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.23);
  transform: rotate(-7deg);
}

.float-card span { font-size: .63rem; letter-spacing: .16em; }
.float-card strong { font-size: 1.1rem; }

.frame-caption {
  gap: 1rem;
  margin-top: .9rem;
  color: rgba(255,255,255,.45);
}

.caption-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.15);
}

.scroll-cue {
  position: absolute;
  z-index: 4;
  right: var(--page-pad);
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255,255,255,.55);
  font-size: .68rem;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
}

.scroll-cue i {
  position: relative;
  width: 1px;
  height: 3.5rem;
  overflow: hidden;
  background: rgba(255,255,255,.2);
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cyan);
  transform: translateY(-100%);
  animation: scroll-line 2s ease-in-out infinite;
}

@keyframes scroll-line {
  0% { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

.story-section {
  min-height: 48rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.story-copy,
.story-art {
  min-width: 0;
}

.story-copy {
  padding: clamp(5.5rem, 9vw, 9.5rem) var(--page-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-light {
  background: var(--mist-light);
}

.story-mist {
  background: var(--mist);
}

.story-dark {
  color: var(--white);
  background: var(--navy-950);
}

.story-reverse .story-copy {
  grid-column: 2;
}

.story-reverse .story-art {
  grid-column: 1;
  grid-row: 1;
}

.section-number {
  color: #486172;
}

.story-dark .section-number {
  color: var(--cyan);
}

.section-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.065em;
  font-weight: 700;
}

.section-title em,
.contact-title em {
  color: #147c8e;
  font-style: normal;
}

.story-dark .section-title em {
  color: var(--cyan);
}

.section-lead {
  max-width: 38rem;
  margin: 2rem 0 0;
  color: #586a77;
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.9;
}

.story-dark .section-lead {
  color: rgba(255,255,255,.61);
}

.feature-list {
  margin-top: clamp(2.8rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line-light);
}

.feature-list article {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: .8rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line-light);
}

.feature-list article > span {
  padding-top: .2rem;
  color: #168ba0;
  font-family: var(--display);
  font-size: .73rem;
  font-weight: 700;
}

.feature-list h3,
.process-list h3,
.value-grid h3 {
  margin: 0;
  font-size: 1rem;
}

.feature-list p,
.process-list p,
.value-grid p {
  margin: .4rem 0 0;
  color: #647681;
  font-size: .86rem;
  line-height: 1.75;
}

.story-art {
  position: relative;
  min-height: 46rem;
  overflow: hidden;
}

.story-art-cyan {
  padding: clamp(2rem, 4vw, 4.2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--white);
  background:
    radial-gradient(circle at 48% 46%, rgba(86,241,255,.62) 0, rgba(18,134,156,.22) 19%, transparent 40%),
    linear-gradient(145deg, #0d2b3c, #07121e 68%);
}

.art-stage {
  position: absolute;
  inset: 13% 8% 12%;
  perspective: 1000px;
}

.art-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px solid rgba(148,242,255,.27);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotateX(63deg) rotateZ(-12deg);
}

.orbit-one { width: 87%; aspect-ratio: 1; }
.orbit-two { width: 62%; aspect-ratio: 1; }

.art-sphere {
  position: absolute;
  top: 13%;
  left: 7%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #e4fdff, #38d8e8 19%, #086c80 48%, #071722 75%);
  box-shadow: 0 2rem 4rem rgba(0,0,0,.37), 0 0 3rem rgba(57,231,255,.2);
}

.art-card {
  position: absolute;
  width: 48%;
  aspect-ratio: .73;
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 1.4rem 2rem 4rem rgba(0,0,0,.32);
}

.art-card-back {
  right: 10%;
  top: 13%;
  background: linear-gradient(145deg, rgba(39,86,106,.82), rgba(6,17,28,.96));
  transform: rotate(9deg) translateZ(-4rem);
}

.art-card-back::before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255,255,255,.12);
}

.art-card-back span {
  position: absolute;
  left: 17%;
  right: 17%;
  top: 20%;
  height: 35%;
  border-radius: 50%;
  background: radial-gradient(circle at 39% 35%, #9ef3ff, #1599ae 28%, #081722 70%);
}

.art-card-front {
  left: 20%;
  bottom: 1%;
  padding: 9%;
  background: rgba(225,242,245,.94);
  transform: rotate(-7deg) translateZ(2rem);
}

.mock-top {
  display: flex;
  justify-content: space-between;
}

.mock-top i:first-child { width: 2.5rem; height: .3rem; background: #173044; }
.mock-top i:last-child { width: .35rem; height: .35rem; border-radius: 50%; background: #1ac9dc; }

.mock-title {
  width: 72%;
  height: 18%;
  margin-top: 32%;
  background: linear-gradient(#163145 0 28%, transparent 28% 45%, #163145 45% 73%, transparent 73%);
}

.mock-line {
  width: 100%;
  height: .25rem;
  margin-top: 12%;
  background: #9aaeb6;
}

.mock-line.short { width: 64%; margin-top: 5%; }

.mock-button {
  width: 45%;
  height: 8%;
  margin-top: 18%;
  background: #16c6dc;
}

.art-note {
  z-index: 2;
  align-self: flex-end;
  margin: 0;
  color: rgba(255,255,255,.57);
  font-size: .72rem;
  letter-spacing: .12em;
}

.process-list {
  margin: clamp(2.8rem, 5vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}

.process-list li {
  display: grid;
  grid-template-columns: 3.7rem 1fr;
  gap: 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line-dark);
}

.process-marker {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57,231,255,.43);
  border-radius: 50%;
  color: var(--cyan);
  font-family: var(--display);
  font-size: .7rem;
}

.process-list p {
  color: rgba(255,255,255,.53);
}

.story-art-data {
  padding: clamp(2rem, 4.5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  background:
    radial-gradient(circle at 13% 88%, rgba(57,231,255,.19), transparent 28%),
    linear-gradient(135deg, #122b42, #08121f);
}

.story-art-data::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(4,13,23,.36);
  backdrop-filter: blur(15px);
}

.data-header,
.data-focus,
.data-chart,
.data-footer {
  position: relative;
  z-index: 1;
}

.data-header {
  display: flex;
  align-items: center;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line-dark);
  color: rgba(255,255,255,.62);
  font-size: .72rem;
  letter-spacing: .14em;
}

.data-header span { margin-right: auto; }
.data-header i { width: .37rem; height: .37rem; margin-left: .42rem; border-radius: 50%; background: rgba(255,255,255,.2); }
.data-header i:last-child { background: var(--cyan); }

.data-focus {
  padding: clamp(2rem, 5vw, 4rem) 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.focus-copy {
  display: flex;
  flex-direction: column;
}

.focus-copy small {
  margin-bottom: .6rem;
  color: rgba(255,255,255,.48);
  font-size: .7rem;
}

.focus-copy strong {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  letter-spacing: -.07em;
}

.focus-dial {
  width: clamp(4rem, 7vw, 6rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: .4rem solid rgba(255,255,255,.11);
  border-top-color: var(--cyan);
  border-right-color: var(--cyan);
  border-radius: 50%;
  transform: rotate(20deg);
}

.focus-dial i {
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 1.6rem var(--cyan);
}

.data-chart {
  height: clamp(11rem, 24vw, 17rem);
  margin: 1.5rem 0;
}

.chart-grid {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.09) 0 1px, transparent 1px 25%);
}

.data-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-area { fill: url(#chart-fill); }
.chart-line { fill: none; stroke: var(--cyan); stroke-width: 3; vector-effect: non-scaling-stroke; }
.data-chart circle { fill: var(--cyan); stroke: rgba(57,231,255,.24); stroke-width: 12; }

.data-footer {
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.44);
  font-size: .66rem;
  letter-spacing: .12em;
}

.experience-path {
  margin-top: clamp(2.8rem, 5vw, 4.2rem);
  padding: 1.2rem 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}

.experience-path div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  color: #2c4859;
  font-size: .84rem;
  font-weight: 700;
}

.experience-path i {
  height: 1px;
  flex: 1;
  background: #9cabb4;
}

.quote {
  margin: 2.5rem 0 0;
  padding: 0;
  border: 0;
  color: #64747f;
  font-size: .85rem;
}

.quote p { margin: 0; }

.story-art-experience {
  background:
    radial-gradient(circle at 22% 24%, rgba(57,231,255,.65) 0, rgba(57,231,255,.13) 14%, transparent 32%),
    radial-gradient(circle at 80% 78%, rgba(123,111,255,.32), transparent 31%),
    linear-gradient(142deg, #142f46, #07121e 75%);
}

.story-art-experience::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px) 0 0 / 12.5% 100%,
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px) 0 0 / 100% 12.5%;
}

.experience-window {
  position: absolute;
  left: 12%;
  right: 15%;
  top: 17%;
  bottom: 19%;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(233,244,245,.9);
  box-shadow: 2rem 3rem 6rem rgba(0,0,0,.35);
  transform: perspective(1200px) rotateY(-8deg) rotateX(3deg);
}

.window-bar {
  height: 9%;
  padding: 0 4%;
  display: flex;
  align-items: center;
  gap: .4rem;
  border-bottom: 1px solid rgba(11,24,38,.12);
}

.window-bar span {
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: #83949d;
}

.window-bar span:first-child { background: #1acde3; }

.window-body {
  height: 91%;
  padding: 8%;
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: 8%;
}

.window-product {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #c9e8ec, #6e9dab);
}

.window-product::before {
  content: "";
  width: 52%;
  height: 65%;
  border-radius: 5rem 5rem .7rem .7rem;
  background: linear-gradient(145deg, #18465c, #2bd9e9 50%, #092234);
  box-shadow: 1rem 1.3rem 2rem rgba(0,0,0,.28);
}

.window-product i {
  position: absolute;
  width: 48%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
}

.window-copy {
  padding-top: 10%;
}

.window-copy span,
.window-copy strong,
.window-copy i,
.window-copy button {
  display: block;
  border: 0;
}

.window-copy span { width: 35%; height: .25rem; background: #16bcd1; }
.window-copy strong { width: 83%; height: 16%; margin-top: 16%; background: linear-gradient(#203a4b 0 30%, transparent 30% 50%, #203a4b 50% 80%, transparent 80%); }
.window-copy i { width: 100%; height: .2rem; margin-top: 10%; background: #a4b4ba; }
.window-copy i + i { width: 69%; margin-top: 5%; }
.window-copy button { width: 66%; height: 10%; margin-top: 25%; background: #112d40; }

.signal-card {
  position: absolute;
  z-index: 2;
  padding: 1.1rem;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(7,24,36,.76);
  backdrop-filter: blur(12px);
  box-shadow: 1rem 1.5rem 3rem rgba(0,0,0,.28);
}

.signal-one {
  left: 6%;
  bottom: 9%;
  width: 8rem;
  aspect-ratio: 1.4;
}

.signal-one i {
  display: block;
  width: 1.8rem;
  aspect-ratio: 1;
  margin-bottom: .9rem;
  border: .28rem solid var(--cyan);
  border-left-color: rgba(57,231,255,.2);
  border-radius: 50%;
}

.signal-one span { display: block; width: 75%; height: .25rem; background: rgba(255,255,255,.44); }

.signal-two {
  right: 7%;
  top: 11%;
  width: 9rem;
}

.signal-two strong { display: block; width: 55%; height: .3rem; margin-bottom: .9rem; background: var(--cyan); }
.signal-two i { display: block; height: .22rem; margin-top: .45rem; background: rgba(255,255,255,.35); }
.signal-two i:last-child { width: 67%; }

.touch-ring {
  position: absolute;
  z-index: 2;
  right: 10%;
  bottom: 8%;
  width: 5rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57,231,255,.5);
  border-radius: 50%;
  box-shadow: 0 0 0 1.3rem rgba(57,231,255,.05), 0 0 0 2.5rem rgba(57,231,255,.03);
}

.touch-ring i { width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 1rem var(--cyan); }

.about-section {
  padding: clamp(6rem, 10vw, 10rem) var(--page-pad);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
  gap: clamp(3rem, 8vw, 10rem);
  background: var(--mist-light);
}

.about-title {
  max-width: 13ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 5.5vw, 6rem);
  line-height: 1.08;
  letter-spacing: -.065em;
}

.about-content {
  align-self: end;
  max-width: 35rem;
}

.about-content p {
  margin: 0 0 1.3rem;
  color: #586b77;
  font-size: 1rem;
  line-height: 1.95;
}

.text-link-dark {
  margin-top: 1.1rem;
  border-color: rgba(11,24,38,.28);
  color: var(--ink);
}

.value-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(1rem, 3vw, 3rem);
  border-top: 1px solid var(--line-light);
}

.value-grid article {
  min-height: 13rem;
  padding: 1.7rem 2.4rem 1.7rem 0;
  border-right: 1px solid var(--line-light);
}

.value-grid article + article {
  padding-left: 2.4rem;
}

.value-grid article:last-child { border-right: 0; }

.value-grid article > span {
  display: block;
  margin-bottom: 3.2rem;
  color: #168aa0;
  font-family: var(--display);
  font-size: .75rem;
}

.value-grid h3 { font-size: 1.14rem; }

.contact-section {
  position: relative;
  min-height: clamp(37rem, 78vh, 50rem);
  overflow: hidden;
  padding: clamp(6rem, 11vw, 10rem) var(--page-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(57,231,255,.035) 1px, transparent 1px) 0 0 / 6rem 6rem,
    linear-gradient(rgba(57,231,255,.035) 1px, transparent 1px) 0 0 / 6rem 6rem,
    radial-gradient(circle at 50% 55%, #133e54, #07111f 52%);
}

.contact-kicker {
  color: var(--cyan-soft);
}

.contact-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.1rem, 7vw, 7.7rem);
  line-height: .98;
  letter-spacing: -.075em;
}

.contact-title em {
  color: var(--cyan);
}

.button-light {
  position: relative;
  z-index: 2;
  min-width: 13rem;
  margin-top: 3rem;
  color: var(--navy-950);
  background: var(--white);
}

.button-light:hover { background: var(--cyan); }

.contact-note {
  position: relative;
  z-index: 2;
  margin: 1.5rem 0 0;
  color: rgba(255,255,255,.5);
  font-size: .78rem;
}

.contact-orbit {
  position: absolute;
  border: 1px solid rgba(57,231,255,.2);
  border-radius: 50%;
}

.contact-orbit-one {
  width: min(66vw, 60rem);
  aspect-ratio: 1;
}

.contact-orbit-two {
  width: min(92vw, 82rem);
  aspect-ratio: 1;
  border-color: rgba(57,231,255,.08);
}

.reveal {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (max-width: 1080px) {
  .nav-shell {
    grid-template-columns: 1fr auto;
  }

  .site-nav {
    display: none;
  }

  .no-js .nav-shell {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: .7rem;
    padding-bottom: .7rem;
  }

  .no-js .site-nav {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1.2rem;
    margin-top: .35rem;
    font-size: .76rem;
  }

  .no-js .hero {
    padding-top: 10.5rem;
  }

  .nav-action {
    display: none;
  }

  .menu-toggle {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 0 .7rem .7rem;
    border: 0;
    color: var(--white);
    background: transparent;
    cursor: pointer;
  }

  .no-js .menu-toggle {
    display: none;
  }

  .menu-toggle-label {
    font-size: .8rem;
  }

  .menu-lines {
    width: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: .38rem;
  }

  .menu-lines i {
    display: block;
    height: 1px;
    background: currentColor;
    transition: transform 200ms ease;
  }

  .menu-toggle[aria-expanded="true"] .menu-lines i:first-child { transform: translateY(.22rem) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines i:last-child { transform: translateY(-.22rem) rotate(-45deg); }

  .site-nav.is-open {
    position: fixed;
    inset: 5.5rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 2rem var(--page-pad);
    color: var(--white);
    background: rgba(5,13,24,.98);
  }

  .site-nav.is-open a {
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(255,255,255,.13);
    font-family: var(--display);
    font-size: clamp(1.6rem, 5vw, 2.4rem);
  }

  .hero {
    grid-template-columns: 1fr 0.85fr;
  }

  .hero-title {
    font-size: clamp(3.8rem, 7vw, 6.2rem);
  }

  .story-copy {
    padding-left: clamp(2rem, 5vw, 4rem);
    padding-right: clamp(2rem, 5vw, 4rem);
  }
}

@media (max-width: 820px) {
  .nav-shell { min-height: 4.8rem; }
  .site-nav.is-open { inset: 4.8rem 0 0; }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 8.7rem;
  }

  .hero-copy {
    padding-bottom: 1rem;
  }

  .hero-title {
    font-size: clamp(3.5rem, 12vw, 6.3rem);
  }

  .hero-visual {
    min-height: 34rem;
    max-height: none;
  }

  .visual-frame {
    min-height: 31rem;
  }

  .scroll-cue {
    display: none;
  }

  .story-section,
  .story-reverse {
    grid-template-columns: 1fr;
  }

  .story-copy,
  .story-reverse .story-copy {
    grid-column: 1;
    grid-row: auto;
  }

  .story-art,
  .story-reverse .story-art {
    grid-column: 1;
    grid-row: auto;
    min-height: 39rem;
  }

  .story-reverse .story-art {
    grid-row: 2;
  }

  .about-section {
    grid-template-columns: 1fr;
  }

  .about-content {
    max-width: 42rem;
  }

  .value-grid {
    grid-template-columns: 1fr;
  }

  .value-grid article,
  .value-grid article + article {
    min-height: auto;
    padding: 1.8rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-light);
  }

  .value-grid article:last-child { border-bottom: 0; }
  .value-grid article > span { margin-bottom: 1.6rem; }
}

@media (max-width: 560px) {
  :root {
    --page-pad: 1.2rem;
  }

  .brand-name {
    font-size: .84rem;
    letter-spacing: .04em;
  }

  .brand-mark {
    width: 1.9rem;
    height: 1.9rem;
  }

  .brand-mark i:nth-child(1) { left: .53rem; top: .65rem; }
  .brand-mark i:nth-child(2) { left: .84rem; top: .38rem; }
  .brand-mark i:nth-child(3) { left: 1.15rem; top: .73rem; }

  .menu-toggle-label { display: none; }

  .hero {
    padding-top: 7.7rem;
    padding-bottom: 4.5rem;
  }

  .eyebrow {
    font-size: .64rem;
    letter-spacing: .14em;
  }

  .hero-title {
    font-size: clamp(3.1rem, 16vw, 5rem);
    line-height: .98;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .button-primary {
    width: 100%;
  }

  .hero-index {
    gap: .5rem;
  }

  .hero-index div {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-visual {
    min-height: 27rem;
  }

  .visual-frame {
    min-height: 25rem;
  }

  .float-card {
    width: 5.4rem;
    padding: .75rem;
  }

  .frame-caption {
    font-size: .57rem;
  }

  .story-copy {
    padding: 5.2rem var(--page-pad);
  }

  .section-title {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .story-art {
    min-height: 31rem;
  }

  .story-art-cyan,
  .story-art-data {
    padding: 1.4rem;
  }

  .art-stage {
    inset: 13% 3% 11%;
  }

  .art-card { width: 56%; }
  .art-card-front { left: 11%; }
  .art-card-back { right: 4%; }

  .story-art-data::before {
    inset: 5%;
  }

  .data-focus {
    padding-top: 2.6rem;
  }

  .focus-copy strong {
    font-size: 2.5rem;
  }

  .data-chart {
    height: 10rem;
  }

  .experience-path {
    grid-template-columns: 1fr 1fr;
    row-gap: 1.2rem;
  }

  .experience-path div:nth-child(2) i { display: none; }

  .experience-window {
    left: 6%;
    right: 8%;
    top: 16%;
    bottom: 19%;
  }

  .window-body {
    grid-template-columns: 1fr .8fr;
    gap: 5%;
  }

  .signal-one { left: 3%; bottom: 7%; width: 6.5rem; }
  .signal-two { right: 3%; top: 8%; width: 7rem; }
  .touch-ring { width: 3.8rem; }

  .about-section {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
    gap: 2.5rem;
  }

  .about-title {
    font-size: clamp(2.8rem, 13vw, 4.2rem);
  }

  .contact-section {
    min-height: 38rem;
  }

  .contact-title {
    font-size: clamp(3rem, 14vw, 5rem);
  }

  .contact-note {
    max-width: 18rem;
    line-height: 1.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .kinetic-word,
  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .hero-intro,
  .story-dark .section-lead,
  .process-list p,
  .contact-note {
    color: #fff;
  }
}