:root {
  --ink: #101113;
  --paper: #f3f3f0;
  --white: #fbfbf9;
  --mist: #dfe3e6;
  --steel: #9da6ae;
  --night: #111820;
  --blue: #ccecf6;
  --pale-blue: #e7f7fb;
  --accent: #76c6e0;
  --line: rgba(16, 17, 19, .16);
  --pad: clamp(24px, 5.2vw, 84px);
  --sans: "Satoshi", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Zen Kaku Gothic New", Meiryo, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body.home {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .015em;
}

body.home.menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.page-progress {
  position: fixed;
  right: 22px;
  top: 50%;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  mix-blend-mode: multiply;
  transform: translateY(-50%);
}

.page-progress span {
  font-size: 8px;
  letter-spacing: .1em;
}

.page-progress > i {
  display: block;
  width: 1px;
  height: 105px;
  overflow: hidden;
  background: rgba(16,17,19,.15);
}

.page-progress b {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleY(var(--page-progress, 0));
  transform-origin: top;
}

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

.home button {
  font: inherit;
}

.has-light-motion {
  --light-x: 72%;
  --light-y: 28%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.has-light-motion > *:not(.light-motion-field) {
  position: relative;
  z-index: 2;
}

.light-motion-field {
  position: absolute;
  inset: -10%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(75,139,160,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75,139,160,.06) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: .78;
  transform: translate3d(0, calc((var(--light-scroll, 0) - .5) * -90px), 0);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.light-motion-field::before {
  position: absolute;
  top: var(--light-y);
  left: var(--light-x);
  width: min(52vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(118,198,224,.2), rgba(204,236,246,.08) 37%, transparent 69%);
  content: "";
  filter: blur(4px);
  transform: translate(-50%, -50%);
  transition: top 1.1s cubic-bezier(.16,1,.3,1), left 1.1s cubic-bezier(.16,1,.3,1);
  animation: light-breathe 7s ease-in-out infinite alternate;
}

.light-motion-field::after {
  position: absolute;
  top: 0;
  left: -24%;
  width: 14%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), rgba(204,236,246,.22), transparent);
  content: "";
  filter: blur(10px);
  transform: skewX(-12deg);
  animation: light-scan-section 9s ease-in-out infinite;
}

.light-motion-field i {
  position: absolute;
  top: var(--py);
  left: var(--px);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(96,183,211,.74);
  box-shadow: 0 0 0 0 rgba(96,183,211,.35), 0 0 15px rgba(96,183,211,.5);
  animation: light-data-node 4.8s var(--delay) ease-in-out infinite;
}

.light-motion-field i::after {
  position: absolute;
  top: 50%;
  left: 100%;
  width: clamp(35px, 6vw, 100px);
  height: 1px;
  background: linear-gradient(90deg, rgba(96,183,211,.25), transparent);
  content: "";
}

@keyframes light-breathe {
  to { transform: translate(-50%, -50%) scale(1.22); opacity: .62; }
}

@keyframes light-scan-section {
  0%, 25% { left: -24%; opacity: 0; }
  35% { opacity: .7; }
  72% { opacity: .42; }
  82%, 100% { left: 112%; opacity: 0; }
}

@keyframes light-data-node {
  0%, 100% { transform: translateY(-8px) scale(.8); opacity: .3; }
  45% { transform: translateY(9px) scale(1); opacity: 1; box-shadow: 0 0 0 15px rgba(96,183,211,0), 0 0 18px rgba(96,183,211,.6); }
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  gap: 20px;
  background: var(--paper);
  transition: opacity .8s cubic-bezier(.76, 0, .24, 1), visibility .8s;
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-word {
  font-size: clamp(24px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: .24em;
}

.loader-line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform-origin: left;
  animation: loader 1.2s cubic-bezier(.76, 0, .24, 1) both;
}

@keyframes loader {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.home-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 30px var(--pad);
  transition: padding .35s, background .35s, backdrop-filter .35s;
}

.home-header.is-scrolled {
  padding-top: 18px;
  padding-bottom: 18px;
  background: rgba(243, 243, 240, .96);
  border-bottom: 1px solid rgba(16, 17, 19, .08);
  backdrop-filter: none;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1;
}

.wordmark .brand-mark {
  width: 38px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 auto;
}

.wordmark strong {
  font-size: 21px;
  letter-spacing: .16em;
}

.wordmark span {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
}

.home-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 44px);
}

.home-nav a {
  position: relative;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
}

.home-nav a:not(.nav-contact)::after {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s;
}

.home-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-contact {
  min-width: 148px;
  padding: 13px 28px;
  border: 1px solid var(--ink);
  text-align: center;
  transition: background .25s, color .25s;
}

.nav-contact:hover {
  background: var(--ink);
  color: var(--white);
}

.menu-toggle {
  display: none;
}

.home-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 66%, rgba(210, 220, 227, .88), transparent 23%),
    linear-gradient(135deg, #f7f6f2, #e6e8e8 72%, #d8dde0);
}

.home-hero::after {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 30%;
  background: linear-gradient(transparent, rgba(204, 236, 246, .26));
  content: "";
  opacity: calc(var(--hero-progress, 0) * .8);
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), rgba(16, 17, 19, .13) 1px),
    linear-gradient(to bottom, transparent calc(100% - 1px), rgba(16, 17, 19, .08) 1px);
  background-size: 12.5vw 100%, 100% 25vh;
}

.hero-scan {
  position: absolute;
  z-index: 1;
  top: 0;
  left: -18%;
  width: 16%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.88), rgba(204,236,246,.38), transparent);
  filter: blur(12px);
  transform: skewX(-11deg);
  animation: hero-scan 6.5s 1.1s cubic-bezier(.65,0,.35,1) infinite;
}

@keyframes hero-scan {
  0%, 18% { left: -22%; opacity: 0; }
  28% { opacity: .8; }
  72% { opacity: .55; }
  82%, 100% { left: 112%; opacity: 0; }
}

.hero-network {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-network i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 0 rgba(118,198,224,.65), 0 0 18px rgba(255,255,255,.9);
  animation: network-pulse 3.6s var(--d) ease-out infinite;
}

.hero-network i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(70px, 10vw, 180px);
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.7), transparent);
  content: "";
  transform: rotate(18deg) translateY(-50%);
  transform-origin: left;
}

@keyframes network-pulse {
  55%, 100% { box-shadow: 0 0 0 28px rgba(118,198,224,0), 0 0 18px rgba(255,255,255,.85); }
}

.hero-kinetic-rings {
  position: absolute;
  z-index: 1;
  top: -29vw;
  left: -24vw;
  width: 58vw;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  animation: kinetic-drift 10s ease-in-out infinite alternate;
}

.hero-kinetic-rings i {
  position: absolute;
  inset: calc(var(--n) * 12%);
  border: 1px solid rgba(16,17,19,calc(.13 - var(--n) * .025));
  border-radius: 50%;
  animation: orbit-spin calc(20s + var(--n) * 6s) linear infinite;
}

.hero-kinetic-rings i::after {
  position: absolute;
  top: 12%;
  left: 10%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
  content: "";
}

.hero-kinetic-rings i:nth-child(1) { --n: 1; }
.hero-kinetic-rings i:nth-child(2) { --n: 2; animation-direction: reverse; }
.hero-kinetic-rings i:nth-child(3) { --n: 3; }

@keyframes kinetic-drift {
  to { transform: translate(5vw, 4vw) rotate(5deg); }
}

.hero-3d-field {
  --hero-3d-x: 0px;
  --hero-3d-y: 0px;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  perspective: 1100px;
  transform: translate3d(var(--hero-3d-x), var(--hero-3d-y), 0);
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.hero-fly {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-fly-cube-a {
  top: 15%;
  right: 34%;
  animation: hero-fly-a 13s ease-in-out infinite alternate;
}

.hero-fly-cube-b {
  right: 8%;
  bottom: 12%;
  opacity: .58;
  transform: scale(.58);
  animation: hero-fly-b 16s -5s ease-in-out infinite alternate;
}

.hero-polycube {
  --cube: clamp(68px, 7.3vw, 124px);
  position: relative;
  display: block;
  width: var(--cube);
  height: var(--cube);
  filter: drop-shadow(0 34px 26px rgba(40, 96, 116, .24));
  transform-style: preserve-3d;
  animation: hero-cube-turn 14s linear infinite;
}

.hero-fly-cube-b .hero-polycube {
  animation-direction: reverse;
  animation-duration: 19s;
}

.hero-polycube .face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(77,164,192,.72);
  background:
    linear-gradient(135deg, rgba(255,255,255,.7), rgba(111,193,217,.3)),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(63,151,180,.17) 15px 16px);
  box-shadow: inset 0 0 28px rgba(78,183,215,.3), 0 0 18px rgba(90,190,220,.34);
  backdrop-filter: blur(4px);
}

.hero-polycube .front  { transform: translateZ(calc(var(--cube) / 2)); }
.hero-polycube .back   { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
.hero-polycube .right  { transform: rotateY(90deg) translateZ(calc(var(--cube) / 2)); }
.hero-polycube .left   { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); }
.hero-polycube .top    { transform: rotateX(90deg) translateZ(calc(var(--cube) / 2)); }
.hero-polycube .bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); }

.hero-fly-prism {
  top: 61%;
  left: 7%;
  animation: hero-fly-c 17s -4s ease-in-out infinite alternate;
}

.hero-prism {
  position: relative;
  display: block;
  width: clamp(80px, 9vw, 150px);
  aspect-ratio: 1;
  filter: drop-shadow(0 28px 30px rgba(56, 126, 150, .24));
  transform-style: preserve-3d;
  animation: hero-prism-turn 12s linear infinite;
}

.hero-prism b {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(102,191,219,.3) 65%, rgba(32,97,122,.28));
  box-shadow: inset 0 0 24px rgba(255,255,255,.6);
  transform-origin: 50% 68%;
}

.hero-prism b:nth-child(1) { transform: rotateY(0deg) translateZ(32px) rotateX(18deg); }
.hero-prism b:nth-child(2) { transform: rotateY(90deg) translateZ(32px) rotateX(18deg); }
.hero-prism b:nth-child(3) { transform: rotateY(180deg) translateZ(32px) rotateX(18deg); }
.hero-prism b:nth-child(4) { transform: rotateY(270deg) translateZ(32px) rotateX(18deg); }

.hero-fly-shard {
  top: 18%;
  left: 44%;
  animation: hero-fly-d 12s -2s ease-in-out infinite alternate;
}

.hero-shard {
  display: block;
  width: clamp(38px, 4vw, 70px);
  height: clamp(115px, 15vw, 245px);
  clip-path: polygon(50% 0, 100% 34%, 71% 100%, 12% 72%, 0 24%);
  border: 1px solid rgba(255,255,255,.85);
  background: linear-gradient(110deg, rgba(255,255,255,.78), rgba(145,214,233,.22) 48%, rgba(30,89,112,.18));
  box-shadow: inset -16px 0 26px rgba(54,130,157,.18), 0 28px 38px rgba(57,116,137,.2);
  opacity: .9;
  animation: hero-shard-turn 10s linear infinite;
}

.hero-fly-portal {
  top: 42%;
  right: 17%;
  animation: hero-fly-e 15s -3s ease-in-out infinite alternate;
}

.hero-portal {
  position: relative;
  display: block;
  width: clamp(150px, 18vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: drop-shadow(0 0 24px rgba(89,190,219,.35));
  transform-style: preserve-3d;
  animation: hero-portal-turn 16s linear infinite;
}

.hero-portal b {
  position: absolute;
  border: 1px solid rgba(78,174,204,.76);
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(104,200,228,.22), 0 0 18px rgba(104,200,228,.16);
}

.hero-portal b:nth-child(1) { inset: 3%; transform: rotateX(68deg); }
.hero-portal b:nth-child(2) { inset: 17%; border-width: 2px; transform: rotateY(68deg); }
.hero-portal b:nth-child(3) { inset: 31%; transform: rotateX(42deg) rotateY(63deg); }

.hero-portal em {
  position: absolute;
  inset: 43%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 12%, #bceef9 32%, #5fbcd8 64%, rgba(49,130,159,.32));
  box-shadow: 0 0 22px rgba(118,214,240,.9), 0 0 62px rgba(86,182,211,.58);
  animation: hero-core-pulse 2.4s ease-in-out infinite alternate;
}

@keyframes hero-cube-turn {
  from { transform: rotateX(-18deg) rotateY(0deg) rotateZ(8deg); }
  to { transform: rotateX(342deg) rotateY(540deg) rotateZ(368deg); }
}

@keyframes hero-prism-turn {
  to { transform: rotateX(360deg) rotateY(540deg) rotateZ(180deg); }
}

@keyframes hero-shard-turn {
  from { transform: rotateY(0deg) rotateX(-12deg) rotateZ(8deg); }
  to { transform: rotateY(720deg) rotateX(348deg) rotateZ(-18deg); }
}

@keyframes hero-portal-turn {
  to { transform: rotateX(360deg) rotateY(180deg) rotateZ(540deg); }
}

@keyframes hero-core-pulse {
  to { transform: translateZ(32px) scale(1.42); filter: brightness(1.18); }
}

@keyframes hero-fly-a {
  from { transform: translate3d(-12px, -18px, 80px) scale(.86); }
  to { transform: translate3d(58px, 68px, 230px) scale(1.12); }
}

@keyframes hero-fly-b {
  from { transform: translate3d(0, 30px, -80px) scale(.48); }
  to { transform: translate3d(-95px, -52px, 160px) scale(.72); }
}

@keyframes hero-fly-c {
  from { transform: translate3d(-30px, 44px, -20px) scale(.7); }
  to { transform: translate3d(78px, -65px, 190px) scale(1.02); }
}

@keyframes hero-fly-d {
  from { transform: translate3d(-15px, -40px, -110px) scale(.64); }
  to { transform: translate3d(84px, 54px, 150px) scale(1.06); }
}

@keyframes hero-fly-e {
  from { transform: translate3d(36px, 44px, -40px) scale(.72); }
  to { transform: translate3d(-64px, -55px, 170px) scale(1.08); }
}

.hero-copy {
  position: absolute;
  top: 28%;
  left: clamp(9vw, 15vw, 240px);
  z-index: 3;
  transform: translateY(calc(var(--hero-progress, 0) * -90px)) scale(calc(1 - var(--hero-progress, 0) * .08));
  transform-origin: left center;
  opacity: calc(1 - var(--hero-progress, 0) * .8);
}

.hero-kicker {
  margin-bottom: 25px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .27em;
}

.hero-title {
  font-size: clamp(58px, 8.2vw, 140px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .9;
}

.title-line {
  display: block;
  overflow: hidden;
}

.title-line > span {
  display: block;
  transform: translateY(115%);
  animation: title-in 1.25s cubic-bezier(.16, 1, .3, 1) forwards;
}

.title-line:nth-child(2) > span { animation-delay: .12s; }
.title-line:nth-child(3) > span { animation-delay: .24s; }

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

.hero-ja {
  position: absolute;
  top: 31%;
  right: clamp(8vw, 13vw, 210px);
  z-index: 3;
  font-size: clamp(18px, 2.2vw, 34px);
  font-weight: 500;
  line-height: 1.45;
  transform: translateY(calc(var(--hero-progress, 0) * -45px));
  opacity: calc(1 - var(--hero-progress, 0) * .65);
}

.hero-live {
  position: absolute;
  right: var(--pad);
  bottom: 29px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 28px;
  color: rgba(16,17,19,.72);
}

.hero-live > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  letter-spacing: .17em;
}

.hero-live > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #62bfdc;
  box-shadow: 0 0 0 0 rgba(98,191,220,.6);
  animation: live-pulse 1.8s ease-out infinite;
}

@keyframes live-pulse {
  70%, 100% { box-shadow: 0 0 0 11px rgba(98,191,220,0); }
}

.hero-live > div {
  position: relative;
  width: 105px;
  height: 17px;
  overflow: hidden;
}

.hero-live b {
  position: absolute;
  inset: 0;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .14em;
  opacity: 0;
  transform: translateY(100%);
  animation: live-words 6s ease-in-out infinite;
}

.hero-live b:nth-child(2) { animation-delay: 2s; }
.hero-live b:nth-child(3) { animation-delay: 4s; }

@keyframes live-words {
  0% { opacity: 0; transform: translateY(100%); }
  8%, 26% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-100%); }
}

.hero-ghost {
  position: absolute;
  right: -5vw;
  bottom: 6vh;
  z-index: 0;
  color: rgba(255,255,255,.32);
  font-size: clamp(72px, 14vw, 230px);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: 1;
  transform: translateX(calc(var(--hero-progress, 0) * -12vw));
  animation: ghost-breathe 7s ease-in-out infinite alternate;
}

@keyframes ghost-breathe {
  to { letter-spacing: -.035em; opacity: .72; }
}

.hero-orbit {
  position: absolute;
  right: 7vw;
  bottom: -16vw;
  width: clamp(390px, 52vw, 850px);
  aspect-ratio: 1;
  transform: translate3d(var(--mx, 0), calc(var(--my, 0) - var(--hero-progress, 0) * 130px), 0) scale(calc(1 + var(--hero-progress, 0) * .22));
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.orbit-core {
  position: absolute;
  inset: 24%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.96), rgba(200, 212, 220, .58) 32%, rgba(64, 79, 90, .36) 78%),
    #dfe6ea;
  box-shadow:
    inset -40px -60px 80px rgba(69, 82, 91, .2),
    0 40px 80px rgba(39, 52, 61, .16);
  backdrop-filter: blur(8px);
}

.orbit-core::before {
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(16,17,19,.25);
  border-radius: inherit;
  content: "";
}

.orbit-core span {
  font-size: clamp(40px, 7vw, 105px);
  font-weight: 500;
  letter-spacing: -.08em;
}

.orbit-ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
}

.ring-one {
  inset: 9%;
  animation: orbit-spin 18s linear infinite;
}

.ring-two {
  inset: 0;
  border-color: rgba(16,17,19,.15);
  animation: orbit-spin 28s linear infinite reverse;
}

.orbit-ring::after {
  position: absolute;
  top: 16%;
  left: 7%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 20px rgba(255,255,255,.9);
  content: "";
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

.orbit-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 14px rgba(255, 255, 255, .9);
}

.dot-one { top: 17%; right: 18%; }
.dot-two { bottom: 24%; left: 7%; }

.scroll-cue {
  position: absolute;
  bottom: 30px;
  left: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scroll-cue span {
  font-size: 8px;
  letter-spacing: .24em;
  writing-mode: vertical-rl;
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 50px;
  overflow: hidden;
  background: rgba(16,17,19,.18);
}

.scroll-cue i::after {
  display: block;
  width: 100%;
  height: 50%;
  background: var(--ink);
  content: "";
  animation: scroll-line 2s ease-in-out infinite;
}

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

.section-pad {
  padding: clamp(110px, 14vw, 220px) var(--pad);
}

.section-index {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(70px, 8vw, 120px);
}

.section-index span {
  font-size: 11px;
}

.section-index p {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
}

.section-index p::before {
  display: inline-block;
  width: 45px;
  height: 1px;
  margin: 0 18px 3px 0;
  background: currentColor;
  content: "";
}

.display-copy {
  font-size: clamp(42px, 6vw, 95px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.2;
}

.vision {
  position: relative;
  background: var(--white);
}

.vision::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 44%;
  height: 44%;
  background: radial-gradient(circle at 60% 30%, rgba(204,236,246,.7), transparent 68%);
  content: "";
}

.vision-layout {
  display: grid;
  grid-template-columns: 1.1fr .75fr;
  gap: clamp(60px, 10vw, 180px);
  max-width: 1320px;
  margin: 0 auto;
}

.vision-body {
  padding-top: 20px;
}

.vision-body .lead {
  margin-bottom: 34px;
  font-size: clamp(18px, 1.65vw, 25px);
  font-weight: 500;
  line-height: 1.9;
}

.vision-body > p:not(.lead) {
  max-width: 570px;
  color: #4d5256;
}

.circle-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 145px;
  height: 145px;
  margin-top: 55px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .13em;
  transition: background .3s, color .3s;
}

.circle-link i {
  position: absolute;
  top: 25px;
  right: 28px;
  font-style: normal;
  font-size: 18px;
}

.circle-link:hover {
  background: var(--ink);
  color: var(--white);
}

.vision-stage {
  display: grid;
  grid-template-columns: 1fr .55fr 1fr;
  min-height: 580px;
  max-width: 1450px;
  margin: clamp(100px, 14vw, 220px) auto 0;
}

.stage-panel {
  position: relative;
  overflow: hidden;
  background: #e2e5e6;
  transform: translateY(var(--stage-shift, 0));
  transition: transform .12s linear;
}

.stage-panel > span {
  position: absolute;
  top: 28px;
  left: 34px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: .2em;
}

.stage-human {
  background:
    radial-gradient(circle at 42% 30%, rgba(255,255,255,.9), transparent 24%),
    linear-gradient(145deg, #f3f2ef, #bdc4c7);
}

.human-silhouette {
  position: absolute;
  bottom: -30%;
  left: 18%;
  width: 66%;
  aspect-ratio: .78;
  border-radius: 48% 48% 18% 18%;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(127,139,146,.65));
  box-shadow: 0 0 80px rgba(255,255,255,.7);
}

.human-silhouette::before {
  position: absolute;
  top: -25%;
  left: 27%;
  width: 47%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
  content: "";
}

.stage-ai {
  background:
    radial-gradient(circle at center, #eef5f8 0 14%, transparent 15%),
    repeating-radial-gradient(circle at center, transparent 0 35px, rgba(255,255,255,.55) 36px 37px),
    linear-gradient(135deg, #9eabb2, #e9edef);
}

.ai-sphere {
  position: absolute;
  top: 20%;
  left: 19%;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #fff, rgba(166,180,188,.45) 50%, rgba(35,48,57,.6));
  box-shadow: 0 30px 60px rgba(26,37,44,.28);
  animation: sphere-float 6s ease-in-out infinite;
}

@keyframes sphere-float {
  50% { transform: translateY(-18px); }
}

.stage-bridge {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

.stage-bridge strong {
  position: relative;
  z-index: 3;
  font-size: 10px;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
}

.stage-bridge i {
  position: absolute;
  left: 50%;
  width: 180%;
  height: 1px;
  background: rgba(255,255,255,.28);
  transform: translateX(-50%) rotate(var(--r));
  transform-origin: center;
}

.stage-bridge i:nth-child(1) { --r: -23deg; top: 22%; }
.stage-bridge i:nth-child(2) { --r: 14deg; top: 38%; }
.stage-bridge i:nth-child(3) { --r: -9deg; top: 52%; }
.stage-bridge i:nth-child(4) { --r: 25deg; top: 66%; }
.stage-bridge i:nth-child(5) { --r: -17deg; top: 80%; }

.transformation-map {
  position: relative;
  max-width: 1450px;
  margin: clamp(100px, 14vw, 220px) auto 0;
  border: 1px solid rgba(16,17,19,.18);
  background:
    linear-gradient(rgba(16,17,19,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,17,19,.045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(231,247,251,.68));
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: 0 45px 110px rgba(51,77,90,.12);
  overflow: hidden;
}

.transformation-map::before {
  position: absolute;
  top: -30%;
  left: 33%;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118,198,224,.2), transparent 68%);
  content: "";
  animation: map-aura 8s ease-in-out infinite alternate;
}

@keyframes map-aura {
  to { transform: translate(16%, 12%) scale(1.18); }
}

.map-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 96px;
  padding: 25px clamp(24px, 3.2vw, 50px);
  border-bottom: 1px solid rgba(16,17,19,.15);
}

.map-heading p {
  font-size: clamp(15px, 1.4vw, 21px);
  font-weight: 500;
}

.map-heading p span {
  display: block;
  margin-bottom: 3px;
  color: #5f696e;
  font-size: 8px;
  letter-spacing: .2em;
}

.map-heading > small {
  font-size: 8px;
  letter-spacing: .2em;
}

.map-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.1fr) 90px minmax(0, 1fr);
  align-items: stretch;
  min-height: 470px;
  padding: clamp(32px, 4vw, 64px);
}

.map-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 350px;
  padding: clamp(24px, 2.5vw, 38px);
  border: 1px solid rgba(16,17,19,.2);
  background: rgba(251,251,249,.78);
  backdrop-filter: blur(12px);
  transition: transform .55s cubic-bezier(.16,1,.3,1), background .35s, box-shadow .35s;
}

.map-node:hover {
  z-index: 3;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 70px rgba(51,77,90,.17);
  transform: translateY(-10px);
}

.map-node-top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(16,17,19,.14);
  color: #59646a;
  font-size: 8px;
  letter-spacing: .16em;
}

.map-node h3 {
  margin-top: auto;
  font-size: clamp(25px, 2.5vw, 39px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.35;
}

.map-node > p {
  min-height: 83px;
  margin-top: 15px;
  color: #596268;
  font-size: 12px;
  line-height: 1.9;
}

.map-node ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
  list-style: none;
}

.map-node li {
  padding: 7px 10px;
  border: 1px solid rgba(16,17,19,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  font-size: 9px;
  white-space: nowrap;
}

.map-input::after,
.map-value::after {
  position: absolute;
  top: 28px;
  right: 30px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(118,198,224,.55);
  content: "";
  animation: map-signal 2.4s ease-out infinite;
}

@keyframes map-signal {
  65%, 100% { box-shadow: 0 0 0 16px rgba(118,198,224,0); }
}

.map-engine {
  background: rgba(17,24,32,.94);
  color: var(--white);
}

.map-engine:hover {
  background: rgba(17,24,32,.98);
}

.map-engine .map-node-top,
.map-engine > p {
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.62);
}

.engine-core {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(92px, 9vw, 135px);
  aspect-ratio: 1;
  margin: auto;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, rgba(231,247,251,.85), rgba(118,198,224,.2) 28%, rgba(255,255,255,.02) 66%);
  box-shadow: inset 0 0 45px rgba(118,198,224,.16), 0 0 55px rgba(118,198,224,.16);
}

.engine-core b {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
}

.engine-core i {
  position: absolute;
  inset: calc(var(--n) * -13px);
  border: 1px solid rgba(204,236,246,calc(.38 - var(--n) * .08));
  border-radius: 50%;
  animation: engine-orbit calc(8s + var(--n) * 3s) linear infinite;
}

.engine-core i::before {
  position: absolute;
  top: 11%;
  left: 12%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue);
  content: "";
}

.engine-core i:nth-of-type(1) { --n: 1; }
.engine-core i:nth-of-type(2) { --n: 2; animation-direction: reverse; }
.engine-core i:nth-of-type(3) { --n: 3; }

@keyframes engine-orbit {
  to { transform: rotate(1turn); }
}

.map-transfer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.map-transfer small {
  position: absolute;
  top: 50%;
  font-size: 7px;
  letter-spacing: .16em;
  transform: translateY(18px);
}

.transfer-line {
  width: 100%;
  height: 1px;
  background: rgba(16,17,19,.34);
}

.map-transfer i {
  position: absolute;
  left: -8px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(16,17,19,.2);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(118,198,224,.75);
  animation: transfer-dot 3s cubic-bezier(.42,0,.58,1) infinite;
}

.map-transfer i:nth-of-type(2) { animation-delay: 1s; }
.map-transfer i:nth-of-type(3) { animation-delay: 2s; }

@keyframes transfer-dot {
  0% { left: -8px; opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { left: calc(100% + 2px); opacity: 0; }
}

.map-result {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr 40px;
  align-items: center;
  gap: 20px;
  min-height: 88px;
  padding: 20px clamp(24px, 3.2vw, 50px);
  border-top: 1px solid rgba(16,17,19,.15);
  background: rgba(204,236,246,.52);
}

.map-result span {
  font-size: 8px;
  letter-spacing: .2em;
}

.map-result p {
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 500;
}

.map-result i {
  font-style: normal;
  font-size: 22px;
}

.business {
  position: relative;
  overflow: hidden;
  min-height: 1300px;
  background: var(--night);
  color: var(--white);
}

.business-aura {
  position: absolute;
  inset: 15% -20% -20%;
  opacity: .48;
  background:
    radial-gradient(circle at 50% 44%, rgba(163,196,214,.28), transparent 34%),
    repeating-radial-gradient(ellipse at 50% 45%, transparent 0 95px, rgba(255,255,255,.12) 96px 97px);
  transform: scale(calc(1 + var(--business-progress, 0) * .16)) rotate(calc(var(--business-progress, 0) * 3deg));
  animation: aura 12s ease-in-out infinite alternate;
}

.business::after {
  position: absolute;
  right: -10vw;
  bottom: -18vw;
  width: 55vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(231,247,251,.75), rgba(118,198,224,.16) 35%, transparent 68%);
  content: "";
  opacity: .75;
}

@keyframes aura {
  to { transform: scale(1.08) rotate(2deg); }
}

.section-index.light {
  position: relative;
  z-index: 2;
}

.business-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.business-heading > p {
  max-width: 420px;
  padding-bottom: 14px;
  color: #c6cdd1;
}

.business-system {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 260px 1fr;
  align-items: center;
  min-height: 720px;
  max-width: 1450px;
  margin: 70px auto 0;
}

.service-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 50%;
}

.service-orbit::before,
.service-orbit::after {
  position: absolute;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: inherit;
  content: "";
}

.service-orbit::before { inset: 10%; }
.service-orbit::after { inset: 20%; }

.orbit-label {
  position: relative;
  z-index: 2;
  max-width: 330px;
}

.orbit-label > span {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--blue);
}

.orbit-label h3 {
  margin: 15px 0 24px;
  font-size: clamp(25px, 2.3vw, 38px);
  font-weight: 500;
}

.orbit-label p {
  color: #bac2c7;
}

.orbit-label a {
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.3);
  font-size: 10px;
  letter-spacing: .14em;
}

.orbit-label i {
  font-style: normal;
  transition: transform .25s;
}

.orbit-label a:hover i {
  transform: translateX(8px);
}

.business-center {
  position: relative;
  z-index: 4;
  display: grid;
  place-content: center;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 27%, #eefaff, #758590 48%, #1a242b 75%);
  color: var(--white);
  text-align: center;
  box-shadow: 0 0 70px rgba(168,211,233,.15);
}

.business-center span,
.business-center small {
  font-size: 8px;
  letter-spacing: .16em;
}

.business-center strong {
  display: block;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.15;
}

.principles {
  background: var(--paper);
}

.impact {
  position: relative;
  height: 360vh;
  background: #a7b3bd;
}

.impact-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(231,247,251,.26), transparent 45%),
    #a7b3bd;
  color: var(--white);
}

.impact-generated-image {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.72) contrast(1.06) brightness(.9);
  transform:
    scale(calc(1.06 + var(--impact-progress, 0) * .12))
    translateX(calc(var(--impact-progress, 0) * -3%));
  will-change: transform;
  backface-visibility: hidden;
}

.impact-image-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7,14,20,.06) 0 37%, rgba(7,14,20,.42) 70%, rgba(7,14,20,.74)),
    linear-gradient(180deg, rgba(6,13,19,.12), transparent 40%, rgba(6,13,19,.5));
}

.impact-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: .28;
  mix-blend-mode: screen;
}

.impact-orb {
  position: absolute;
  top: 50%;
  left: 31%;
  z-index: 3;
  width: min(57vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204,236,246,.1), transparent 68%);
  box-shadow: inset 0 0 80px rgba(204,236,246,.08), 0 0 60px rgba(204,236,246,.08);
  transform: translate(-50%, -50%) scale(calc(.74 + var(--impact-progress, 0) * .42)) rotate(calc(var(--impact-progress, 0) * 22deg));
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1100px;
  transform-style: preserve-3d;
  isolation: isolate;
}

.impact-orb::before {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid rgba(218,247,255,.38);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 12%, rgba(209,245,255,.2) 18%, transparent 27% 53%, rgba(139,218,239,.16) 61%, transparent 70%),
    radial-gradient(circle at 28% 30%, rgba(224,249,255,.13), transparent 45%);
  box-shadow: inset -30px -10px 80px rgba(6,22,31,.2), 0 0 48px rgba(185,238,251,.12);
  content: "";
  animation: impact-globe-shell 16s linear infinite;
}

.impact-orb::after {
  position: absolute;
  inset: 4%;
  z-index: 2;
  border: 1px solid rgba(219,248,255,.18);
  border-radius: 50%;
  background: linear-gradient(105deg, transparent 29%, rgba(226,249,255,.12) 48%, transparent 65%);
  content: "";
  pointer-events: none;
  animation: impact-atmosphere 4.8s ease-in-out infinite alternate;
}

.impact-hud {
  position: absolute;
  right: 25px;
  bottom: 80px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 22px;
  color: rgba(255,255,255,.66);
  font-size: 7px;
  letter-spacing: .15em;
  writing-mode: vertical-rl;
}

.impact-hud i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 4px;
  border-radius: 50%;
  background: #bcecff;
  box-shadow: 0 0 12px #bcecff;
  animation: live-pulse 1.8s ease-out infinite;
}

.orb-longitude,
.orb-latitude {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.orb-longitude { animation: impact-meridian-turn 9s linear infinite; }
.orb-longitude.l1 { animation-delay: -1.2s; }
.orb-longitude.l2 { inset: 13%; animation-delay: -3.45s; animation-duration: 9s; }
.orb-longitude.l3 { inset: 18%; animation-delay: -5.7s; animation-duration: 9s; }
.orb-longitude.l4 { inset: 4%; animation-delay: -7.95s; animation-duration: 9s; }

.orb-latitude { animation: impact-latitude-turn 12s linear infinite; }
.orb-latitude.a1 { inset: 18% 7%; animation-delay: -1.5s; }
.orb-latitude.a2 { inset: 31% 5%; animation-delay: -5.5s; }
.orb-latitude.a3 { inset: 42% 4%; animation-delay: -9.5s; }

@keyframes impact-meridian-turn {
  0% { transform: rotateZ(-12deg) rotateY(0deg); opacity: .3; }
  25% { opacity: .68; }
  50% { transform: rotateZ(-12deg) rotateY(180deg); opacity: .3; }
  75% { opacity: .68; }
  100% { transform: rotateZ(-12deg) rotateY(360deg); opacity: .3; }
}

@keyframes impact-latitude-turn {
  from { transform: rotateX(68deg) rotateZ(0deg); opacity: .3; }
  50% { opacity: .62; }
  to { transform: rotateX(68deg) rotateZ(360deg); opacity: .3; }
}

@keyframes impact-globe-shell {
  to { transform: rotate(360deg); }
}

@keyframes impact-atmosphere {
  to { opacity: .74; transform: scale(1.025) rotate(4deg); filter: brightness(1.2); }
}

.orb-pulse {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pale-blue);
  box-shadow: 0 0 0 0 rgba(231,247,251,.6);
  animation: node-pulse 2.6s ease-out infinite;
}

.orb-pulse.p1 { top: 22%; left: 18%; animation: node-pulse 2.6s ease-out infinite, impact-node-orbit-one 10s linear infinite; }
.orb-pulse.p2 { top: 38%; right: 10%; animation: node-pulse 2.6s .8s ease-out infinite, impact-node-orbit-two 13s -4s linear infinite; }
.orb-pulse.p3 { bottom: 18%; left: 42%; animation: node-pulse 2.6s 1.5s ease-out infinite, impact-node-orbit-three 16s -7s linear infinite; }

@keyframes impact-node-orbit-one {
  0%, 100% { transform: translate3d(-12px, 0, 40px); }
  25% { transform: translate3d(145px, -52px, 0) scale(.72); }
  50% { transform: translate3d(295px, 24px, -40px) scale(.48); opacity: .32; }
  75% { transform: translate3d(135px, 74px, 0) scale(.75); }
}

@keyframes impact-node-orbit-two {
  0%, 100% { transform: translate3d(0, -80px, 20px); }
  50% { transform: translate3d(-270px, 130px, -35px) scale(.55); opacity: .38; }
}

@keyframes impact-node-orbit-three {
  0%, 100% { transform: translate3d(-150px, 12px, -20px) scale(.62); }
  50% { transform: translate3d(160px, -145px, 35px); opacity: .9; }
}

@keyframes node-pulse {
  70%, 100% { box-shadow: 0 0 0 28px rgba(231,247,251,0); }
}

.impact-title {
  position: absolute;
  top: 7vh;
  left: var(--pad);
  z-index: 4;
  font-size: clamp(54px, 9vw, 145px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .88;
  transform: translateX(calc(var(--impact-progress, 0) * -12vw));
  opacity: calc(1 - var(--impact-progress, 0) * .7);
  text-shadow: 0 4px 45px rgba(5,12,18,.25);
}

.impact-slides {
  position: absolute;
  top: 50%;
  right: var(--pad);
  z-index: 5;
  width: min(42vw, 580px);
  min-height: 510px;
  transform: translateY(-50%);
}

.impact-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(45px);
  transition: opacity .6s, transform .7s cubic-bezier(.16,1,.3,1);
}

.impact-slide.is-active {
  opacity: 1;
  transform: translateY(0);
}

.impact-slide > span {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255,255,255,.5);
  font-size: 9px;
  letter-spacing: .17em;
}

.impact-slide strong {
  margin: 25px 0;
  font-size: clamp(62px, 8vw, 125px);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .78;
}

.impact-slide h3 {
  margin: 12px 0 18px;
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 500;
}

.impact-slide p {
  max-width: 480px;
  color: rgba(255,255,255,.74);
}

.impact-dots {
  position: absolute;
  right: 24px;
  bottom: 28px;
  display: flex;
  gap: 8px;
}

.impact-dots i {
  display: block;
  width: 36px;
  height: 2px;
  background: rgba(255,255,255,.28);
}

.impact-dots i.is-active {
  background: var(--white);
}

/* Keep this chapter calm: one stable scene, one message, no scroll-scrubbing. */
.impact {
  height: auto;
  min-height: 100svh;
  background: #8f9ba5;
  contain: paint;
}

.impact > .depth-scene {
  display: none;
}

.impact-sticky {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
  min-height: 100svh;
  height: auto;
  padding: clamp(130px, 15vh, 190px) var(--pad) clamp(90px, 11vh, 140px);
  isolation: isolate;
}

.impact-generated-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center;
  filter: saturate(.7) contrast(1.04) brightness(.84);
  transform: none;
  will-change: auto;
}

.impact-image-shade {
  background:
    linear-gradient(90deg, rgba(7,14,20,.06) 0 38%, rgba(7,14,20,.38) 68%, rgba(7,14,20,.72)),
    linear-gradient(180deg, rgba(6,13,19,.1), transparent 48%, rgba(6,13,19,.42));
}

.impact-orb {
  top: 54%;
  left: 29%;
  width: min(45vw, 680px);
  opacity: .56;
  transform: translate(-50%, -50%);
  will-change: auto;
}

.impact-orb::before {
  inset: 14%;
  animation: none;
}

.impact-orb::after {
  display: none;
}

.impact-orb > i {
  position: absolute;
  inset: 28% 7%;
  border: 1px solid rgba(231,247,251,.34);
  border-radius: 50%;
  transform: rotateX(66deg);
}

.impact-orb > i:last-child {
  inset: 7% 35%;
  transform: rotateY(68deg);
}

.impact-title {
  top: clamp(70px, 8vh, 110px);
  max-width: 66vw;
  font-size: clamp(56px, 8.2vw, 126px);
  transform: none;
  opacity: .82;
}

.impact-summary {
  position: relative;
  z-index: 5;
  grid-column: 2;
  width: min(100%, 570px);
  justify-self: end;
  padding: clamp(30px, 4vw, 58px);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(8,18,25,.58);
  box-shadow: 0 30px 80px rgba(3,10,15,.17);
}

.impact-summary > span {
  display: block;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.36);
  color: rgba(255,255,255,.7);
  font-size: 9px;
  letter-spacing: .18em;
}

.impact-summary strong {
  display: block;
  margin: 30px 0 24px;
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.impact-summary p {
  max-width: 440px;
  color: rgba(255,255,255,.76);
  line-height: 2;
}

.impact-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 34px;
  border-top: 1px solid rgba(255,255,255,.28);
}

.impact-flow i {
  position: relative;
  padding-top: 14px;
  color: rgba(255,255,255,.64);
  font-size: 8px;
  font-style: normal;
  letter-spacing: .16em;
}

.impact-flow i:not(:last-child)::after {
  position: absolute;
  top: 16px;
  right: 12px;
  content: "→";
}

.principle-list {
  border-top: 1px solid var(--line);
}

.principle {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr 1fr 100px;
  align-items: center;
  gap: 30px;
  min-height: 190px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.principle::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-top: 1px solid rgba(118,198,224,.46);
  border-bottom: 1px solid rgba(118,198,224,.46);
  background:
    radial-gradient(circle at 76% 50%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(90deg, rgba(204,236,246,.92), rgba(231,247,251,.78));
  box-shadow: inset 0 0 55px rgba(118,198,224,.12), 0 16px 45px rgba(75,139,160,.08);
  content: "";
  transform: translateY(102%);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.principle:hover::before {
  transform: translateY(0);
}

.principle > * {
  position: relative;
  z-index: 1;
  transition: color .3s;
}

.principle:hover > * {
  color: #193746;
}

.principle:hover p {
  color: #46616c;
}

.principle:hover h3 {
  color: #315d70;
  text-shadow: 0 0 28px rgba(118,198,224,.3);
}

.principle-no {
  font-size: 11px;
}

.principle h3 {
  font-size: clamp(28px, 4vw, 60px);
  font-weight: 500;
  letter-spacing: -.045em;
}

.principle p {
  max-width: 480px;
  color: #5e6468;
}

.principle i {
  font-style: normal;
  font-size: 11px;
}

.approach {
  overflow: hidden;
  background: var(--white);
}

.insights {
  background:
    radial-gradient(circle at 85% 15%, rgba(204,236,246,.82), transparent 24%),
    linear-gradient(135deg, var(--white), #edf7fa);
}

.insights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 80px;
}

.insights-head > p {
  padding-bottom: 12px;
}

.insight-list {
  border-top: 1px solid var(--line);
}

.insight-row {
  position: relative;
  display: grid;
  grid-template-columns: 140px 140px 1fr 40px;
  align-items: center;
  gap: 25px;
  min-height: 145px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.insight-row::before {
  position: absolute;
  inset: 0;
  background: rgba(204,236,246,.58);
  content: "";
  transform: translateX(-101%);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}

.insight-row:hover::before {
  transform: translateX(0);
}

.insight-row > * {
  position: relative;
  z-index: 1;
}

.insight-row > span,
.insight-row time {
  font-size: 9px;
  letter-spacing: .12em;
}

.insight-row h3 {
  font-size: clamp(15px, 1.45vw, 21px);
  font-weight: 500;
}

.insight-row i {
  font-style: normal;
  font-size: 21px;
  transition: transform .25s;
}

.insight-row:hover i {
  transform: translate(5px, -5px);
}

.faq {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 6% 52%, rgba(118,198,224,.18), transparent 24%),
    linear-gradient(145deg, #f7f8f6, #e9f4f7);
}

.faq::before {
  position: absolute;
  top: 5%;
  right: -12%;
  width: 42vw;
  aspect-ratio: 1;
  border: 1px solid rgba(16,17,19,.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(16,17,19,.025),
    0 0 0 140px rgba(16,17,19,.018);
  content: "";
}

.faq-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(540px, 1.3fr);
  gap: clamp(55px, 9vw, 150px);
  max-width: 1450px;
  margin: 0 auto;
}

.faq-intro {
  align-self: start;
  position: sticky;
  top: 150px;
}

.faq-kicker {
  margin-bottom: 22px;
  color: #5e6b71;
  font-size: 9px;
  letter-spacing: .22em;
}

.faq-intro h2 span {
  color: #8ebdcb;
}

.faq-intro > p:not(.faq-kicker) {
  max-width: 390px;
  margin-top: 34px;
  color: #596268;
}

.faq-intro .circle-link {
  background: rgba(255,255,255,.42);
}

.faq-list {
  border-top: 1px solid rgba(16,17,19,.3);
}

.faq-item {
  position: relative;
  border-bottom: 1px solid rgba(16,17,19,.22);
  transition: background .4s, padding .4s;
}

.faq-item::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(204,236,246,.7), rgba(255,255,255,.48));
  content: "";
  opacity: 0;
  transform: scaleX(.96);
  transition: opacity .4s, transform .55s cubic-bezier(.16,1,.3,1);
}

.faq-item:hover::before,
.faq-item.is-open::before {
  opacity: 1;
  transform: scaleX(1);
}

.faq-item h3 {
  position: relative;
  z-index: 1;
}

.faq-question {
  display: grid;
  grid-template-columns: 58px 1fr 32px;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 118px;
  padding: 28px clamp(15px, 2vw, 30px);
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.faq-question > span:nth-child(2) {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.7;
}

.faq-no {
  align-self: start;
  padding-top: 6px;
  color: #69818b;
  font-size: 9px;
  letter-spacing: .14em;
}

.faq-question i {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(16,17,19,.4);
  border-radius: 50%;
  transition: background .3s, transform .45s cubic-bezier(.16,1,.3,1);
}

.faq-question i::before,
.faq-question i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.faq-question i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-question i {
  background: var(--ink);
  color: var(--white);
  transform: rotate(45deg);
}

.faq-answer-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.16,1,.3,1);
}

.faq-item.is-open .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.faq-answer-wrap > div {
  overflow: hidden;
}

.faq-answer-wrap p {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  padding: 0 clamp(15px, 2vw, 30px) 38px;
  color: #4e595f;
  font-size: 13px;
  line-height: 2;
}

.faq-answer-wrap p > span {
  color: #4a9ab5;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
}

.faq-question:focus-visible {
  outline: 2px solid #4a9ab5;
  outline-offset: -3px;
}

.join-scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #dfe7eb;
}

.join-visual {
  position: absolute;
  inset: 0 0 22%;
  overflow: hidden;
  background: #cbdde5;
}

.join-generated-image {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center 52%;
  filter: saturate(.78) contrast(1.05) brightness(.92);
  transform: scale(1.02);
  animation: join-image-drift 13s ease-in-out infinite alternate;
}

@keyframes join-image-drift {
  to { transform: scale(1.08) translate(-1.5%, -1%); }
}

.join-image-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,21,31,.56), rgba(12,35,48,.18) 44%, rgba(231,247,251,.02)),
    linear-gradient(180deg, rgba(8,26,36,.08), transparent 45%, rgba(7,22,31,.38));
}

.join-energy {
  position: absolute;
  top: 48%;
  right: 16%;
  width: min(31vw, 460px);
  aspect-ratio: 1;
  transform: translate(50%, -50%);
}

.join-energy i {
  position: absolute;
  inset: calc(var(--n) * 10%);
  border: 1px solid rgba(213,246,255,calc(.58 - var(--n) * .1));
  border-radius: 50%;
  box-shadow: inset 0 0 35px rgba(118,198,224,.07), 0 0 25px rgba(118,198,224,.08);
  animation: join-energy-spin calc(12s + var(--n) * 5s) linear infinite;
}

.join-energy i::before {
  position: absolute;
  top: 11%;
  left: 10%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dff8ff;
  box-shadow: 0 0 18px #aeeaff;
  content: "";
}

.join-energy i:nth-child(1) { --n: 1; }
.join-energy i:nth-child(2) { --n: 2; animation-direction: reverse; }
.join-energy i:nth-child(3) { --n: 3; }

.join-energy b {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,252,255,.94), rgba(118,198,224,.28) 40%, transparent 72%);
  box-shadow: 0 0 70px rgba(174,234,255,.45);
  animation: join-energy-core 2.8s ease-in-out infinite alternate;
}

@keyframes join-energy-spin {
  to { transform: rotate(1turn); }
}

@keyframes join-energy-core {
  to { transform: scale(1.22); opacity: .56; }
}

.join-screen {
  position: absolute;
  top: 15%;
  right: 8%;
  width: 48%;
  height: 60%;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(225,245,251,.08);
  box-shadow: 0 40px 90px rgba(14,28,36,.24);
  backdrop-filter: blur(3px);
  transform: perspective(900px) rotateY(-10deg);
  animation: screen-float 7s ease-in-out infinite;
}

@keyframes screen-float {
  50% { transform: perspective(900px) rotateY(-7deg) translateY(-15px); }
}

.join-screen span {
  display: block;
  width: 68%;
  height: 1px;
  margin: 12% auto -8%;
  background: rgba(16,17,19,.18);
}

.join-lines i {
  position: absolute;
  top: calc(25% + var(--n) * 12%);
  left: -5%;
  width: 115%;
  height: 1px;
  background: rgba(255,255,255,.65);
  transform: rotate(calc(-6deg + var(--n) * 4deg));
  animation: join-line 8s ease-in-out infinite alternate;
}

.join-hud {
  position: absolute;
  top: 12%;
  left: var(--pad);
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(255,255,255,.86);
  font-size: 8px;
  letter-spacing: .2em;
}

.join-hud i {
  display: block;
  width: 65px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.35);
}

.join-hud i::after {
  display: block;
  width: 38%;
  height: 100%;
  background: white;
  content: "";
  animation: hud-scan 2.6s ease-in-out infinite;
}

@keyframes hud-scan {
  from { transform: translateX(-120%); }
  to { transform: translateX(340%); }
}

.join-lines i:nth-child(1) { --n: 0; }
.join-lines i:nth-child(2) { --n: 1; animation-delay: .5s; }
.join-lines i:nth-child(3) { --n: 2; animation-delay: 1s; }
.join-lines i:nth-child(4) { --n: 3; animation-delay: 1.5s; }

@keyframes join-line {
  to { transform: translateX(7%) rotate(calc(-6deg + var(--n) * 4deg)); }
}

.join-title {
  position: absolute;
  top: 14%;
  left: var(--pad);
  z-index: 2;
  font-size: clamp(76px, 12vw, 190px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .82;
  color: #d9f2f8;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 10px 35px rgba(5,24,34,.34),
    0 0 42px rgba(153,223,241,.16);
}

.join-bottom {
  position: absolute;
  right: var(--pad);
  bottom: 6%;
  left: var(--pad);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.join-bottom p {
  font-size: clamp(17px, 1.8vw, 26px);
  font-weight: 500;
}

.join-bottom p span {
  display: block;
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .16em;
}

.pill-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(360px, 32vw);
  padding: 22px 24px 22px 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 18px 45px rgba(53,69,78,.1);
}

.pill-link i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-style: normal;
}

.approach {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 20%, rgba(167,224,239,.32), transparent 25%),
    radial-gradient(circle at 12% 62%, rgba(118,198,224,.18), transparent 27%),
    linear-gradient(145deg, #f7faf9 0%, #edf7f9 48%, #f5f8f7 100%);
}

.approach::before {
  position: absolute;
  top: 7%;
  right: -12vw;
  z-index: 0;
  width: min(58vw, 900px);
  aspect-ratio: 1;
  border: 1px solid rgba(75,139,160,.15);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(118,198,224,.035),
    0 0 0 140px rgba(118,198,224,.026),
    inset 0 0 90px rgba(118,198,224,.07);
  content: "";
  animation: approach-orbit 18s ease-in-out infinite alternate;
}

.approach::after {
  position: absolute;
  top: -20%;
  left: -35%;
  z-index: 1;
  width: 18%;
  height: 150%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.88), rgba(164,222,238,.22), transparent);
  content: "";
  filter: blur(12px);
  pointer-events: none;
  transform: rotate(9deg);
  animation: approach-scan 10s ease-in-out infinite;
}

.approach > *:not(.light-motion-field) {
  position: relative;
  z-index: 2;
}

@keyframes approach-orbit {
  to { transform: translate(-8%, 10%) scale(1.12) rotate(12deg); opacity: .62; }
}

@keyframes approach-scan {
  0%, 23% { left: -35%; opacity: 0; }
  34% { opacity: .8; }
  72% { opacity: .45; }
  84%, 100% { left: 122%; opacity: 0; }
}

.approach-marquee {
  display: flex;
  width: max-content;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  animation: marquee 25s linear infinite;
}

.approach-marquee div {
  padding: 18px 22px;
  font-size: clamp(26px, 4vw, 60px);
  font-weight: 500;
  letter-spacing: -.03em;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.approach-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 110px;
}

.approach-intro p {
  max-width: 400px;
}

.process-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.process-list li {
  position: relative;
  display: grid;
  grid-template-columns: 90px .8fr 1.2fr;
  align-items: center;
  gap: 40px;
  padding: 46px 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: padding .45s cubic-bezier(.16,1,.3,1), background .4s;
}

.process-list li::before {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74,177,208,.78), transparent);
  content: "";
  transform: translateX(-105%);
  animation: process-signal 7s calc(var(--process-delay, 0) * -1s) ease-in-out infinite;
}

.process-list li::after {
  position: absolute;
  top: 50%;
  left: 62%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8fd6e9;
  box-shadow: 0 0 0 9px rgba(143,214,233,.12), 0 0 24px rgba(76,178,207,.55);
  content: "";
  opacity: .42;
  animation: process-node 4.6s calc(var(--process-delay, 0) * -.8s) ease-in-out infinite;
}

.process-list li:nth-child(1) { --process-delay: 0; }
.process-list li:nth-child(2) { --process-delay: 1; }
.process-list li:nth-child(3) { --process-delay: 2; }
.process-list li:nth-child(4) { --process-delay: 3; }

.process-list li:hover {
  padding-right: 24px;
  padding-left: 24px;
  background: linear-gradient(90deg, rgba(204,236,246,.48), rgba(255,255,255,.28));
}

@keyframes process-signal {
  0%, 18% { transform: translateX(-105%); opacity: 0; }
  28%, 76% { opacity: 1; }
  88%, 100% { transform: translateX(105%); opacity: 0; }
}

@keyframes process-node {
  0%, 100% { transform: translateY(-50%) scale(.7); opacity: .24; }
  50% { transform: translateY(-50%) scale(1.25); opacity: .78; }
}

.process-list li > span {
  font-size: 12px;
}

.process-list small {
  font-size: 9px;
  letter-spacing: .16em;
  color: #6e757a;
}

.process-list h3 {
  margin-top: 5px;
  font-size: clamp(21px, 2.1vw, 32px);
  font-weight: 500;
}

.process-list p {
  max-width: 580px;
  color: #60666a;
}

.home-contact {
  background: var(--paper);
}

.contact-label {
  margin-bottom: 65px;
  font-size: 10px;
  letter-spacing: .18em;
}

.contact-label::before {
  display: inline-block;
  width: 50px;
  height: 1px;
  margin: 0 18px 3px 0;
  background: var(--ink);
  content: "";
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.contact-row h2 {
  font-size: clamp(48px, 7vw, 110px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.15;
}

.contact-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: clamp(290px, 31vw, 480px);
  min-height: 120px;
  padding: 30px 44px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white) !important;
  font-size: 18px;
  transition: border-radius .4s;
}

.contact-button:hover {
  border-radius: 70px;
}

.contact-button i {
  font-style: normal;
  font-size: 28px;
}

.home-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: 60px;
  padding: 55px var(--pad);
  background: var(--ink);
  color: var(--white);
}

.footer-wordmark strong {
  display: block;
  font-size: 26px;
  letter-spacing: .14em;
}

.footer-wordmark .footer-logo-mark {
  width: 58px;
  height: 64px;
  margin-bottom: 10px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  object-fit: contain;
}

.footer-wordmark span,
.home-footer p {
  font-size: 9px;
  letter-spacing: .1em;
  color: #9ea4a8;
}

.home-footer nav {
  display: flex;
  gap: 25px;
}

.home-footer nav a {
  font-size: 9px;
  letter-spacing: .13em;
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .62s ease,
    transform .68s cubic-bezier(.22, 1, .36, 1);
}

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

@media (max-width: 980px) {
  .page-progress {
    display: none;
  }
  .home-header {
    align-items: center;
  }

  .home-header .wordmark {
    position: relative;
    z-index: 102;
  }

  .menu-toggle {
    position: relative;
    z-index: 102;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle span {
    font-size: 9px;
    letter-spacing: .15em;
  }

  .menu-toggle i,
  .menu-toggle i::after {
    display: block;
    width: 28px;
    height: 1px;
    background: currentColor;
    content: "";
    transition: transform .3s;
  }

  .menu-toggle i::after {
    transform: translateY(6px);
  }

  .menu-toggle[aria-expanded="true"] i {
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] i::after {
    transform: rotate(-90deg);
  }

  .home-nav {
    position: fixed;
    inset: 0;
    z-index: 101;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(112px, calc(92px + env(safe-area-inset-top))) var(--pad) max(38px, calc(26px + env(safe-area-inset-bottom)));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #f3f3f0;
    box-shadow: 0 24px 80px rgba(16, 17, 19, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    pointer-events: none;
    transition: opacity .35s, visibility .35s, transform .35s;
  }

  .home-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .home-nav a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 64px;
    padding: 12px 2px;
    border-bottom: 1px solid rgba(16, 17, 19, .14);
    font-size: clamp(23px, 7vw, 34px);
    line-height: 1.15;
  }

  .nav-contact {
    justify-content: space-between;
    min-width: 0;
    margin-top: 22px;
    padding: 18px 22px;
    background: var(--ink);
    color: var(--white) !important;
  }

  .nav-contact::after {
    content: "→";
    font-size: 22px;
  }

  body.menu-open .depth-cursor-geometry {
    opacity: 0 !important;
  }

  .hero-copy {
    top: 26%;
    left: var(--pad);
  }

  .hero-title {
    font-size: clamp(50px, 12vw, 100px);
  }

  .hero-ja {
    top: auto;
    right: auto;
    bottom: 14%;
    left: var(--pad);
  }

  .hero-orbit {
    right: -20vw;
    bottom: -5vw;
    width: 70vw;
    opacity: .7;
  }

  .vision-layout,
  .business-heading,
  .approach-intro,
  .contact-row,
  .insights-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .vision-stage {
    grid-template-columns: 1fr;
    min-height: 1000px;
  }

  .stage-bridge {
    min-height: 140px;
  }

  .map-flow {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 36px;
  }

  .map-node {
    min-height: 310px;
  }

  .map-transfer {
    min-height: 95px;
  }

  .transfer-line {
    width: 1px;
    height: 100%;
  }

  .map-transfer i {
    top: -8px;
    left: 50%;
    animation-name: transfer-dot-vertical;
  }

  .map-transfer small {
    top: 50%;
    left: calc(50% + 17px);
    transform: translateY(-50%);
  }

  @keyframes transfer-dot-vertical {
    0% { top: -8px; opacity: 0; }
    12%, 88% { opacity: 1; }
    100% { top: calc(100% + 2px); opacity: 0; }
  }

  .faq-layout {
    grid-template-columns: 1fr;
  }

  .faq-intro {
    position: relative;
    top: auto;
  }

  .business-system {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .service-orbit {
    max-width: 620px;
    margin: 0 auto;
  }

  .business-center {
    width: 210px;
    height: 210px;
    margin: -60px auto;
  }

  .principle {
    grid-template-columns: 55px 1fr;
    padding: 40px 0;
  }

  .principle p,
  .principle i {
    grid-column: 2;
  }

  .process-list li {
    grid-template-columns: 55px 1fr;
  }

  .process-list li p {
    grid-column: 2;
  }

  .home-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .impact-title {
    top: 9vh;
    max-width: 80vw;
    font-size: 11vw;
  }

  .impact-orb {
    top: 47%;
    left: 28%;
    width: 72vw;
  }

  .impact-generated-image {
    object-position: 36% center;
  }

  .impact-image-shade {
    background:
      linear-gradient(180deg, rgba(7,14,20,.12), rgba(7,14,20,.28) 56%, rgba(7,14,20,.76)),
      linear-gradient(90deg, transparent, rgba(7,14,20,.32));
  }

  .impact-sticky {
    grid-template-columns: 1fr;
    min-height: 920px;
  }

  .impact-summary {
    grid-column: 1;
    width: min(58vw, 520px);
    align-self: end;
    margin-left: auto;
  }

  .insight-row {
    grid-template-columns: 100px 1fr 36px;
    padding: 25px 0;
  }

  .insight-row time {
    display: none;
  }

  .join-title {
    font-size: 15vw;
  }

  .join-generated-image {
    object-position: center 35%;
  }

  .join-energy {
    right: 10%;
    width: min(46vw, 410px);
    opacity: .82;
  }
}

@media (max-width: 620px) {
  .wordmark span {
    display: none;
  }

  .wordmark strong {
    font-size: 17px;
  }

  .home-hero {
    min-height: 820px;
  }

  .hero-copy {
    top: 23%;
  }

  .hero-kicker {
    font-size: 8px;
  }

  .hero-title {
    font-size: 15vw;
  }

  .hero-ja {
    bottom: 12%;
    font-size: 22px;
  }

  .hero-orbit {
    right: -42vw;
    bottom: 5%;
    width: 105vw;
  }

  .hero-live {
    right: auto;
    bottom: 45px;
    left: var(--pad);
  }

  .hero-kinetic-rings {
    top: -35vw;
    left: -50vw;
    width: 110vw;
  }

  .hero-fly-cube-a { top: 14%; right: 10%; }
  .hero-fly-cube-b { display: none; }
  .hero-fly-prism { top: 58%; left: -3%; opacity: .55; }
  .hero-fly-shard { top: 28%; left: 71%; opacity: .48; }
  .hero-fly-portal { top: 48%; right: -18%; opacity: .58; }

  .hero-polycube { --cube: 70px; }
  .hero-prism { width: 82px; }
  .hero-shard { width: 34px; height: 112px; }
  .hero-portal { width: 155px; }

  .hero-network i:nth-child(even) {
    display: none;
  }

  .scroll-cue {
    display: none;
  }

  .section-pad {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .section-index {
    margin-bottom: 60px;
  }

  .display-copy {
    font-size: 41px;
  }

  .vision-stage {
    min-height: 800px;
  }

  .map-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .map-flow {
    padding: 22px;
  }

  .map-node {
    min-height: 330px;
  }

  .map-result {
    grid-template-columns: 1fr 28px;
  }

  .map-result span {
    grid-column: 1 / -1;
  }

  .map-result i {
    grid-column: 2;
    grid-row: 2;
  }

  .faq-question {
    grid-template-columns: 42px 1fr 30px;
    gap: 10px;
    min-height: 105px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .faq-answer-wrap p {
    grid-template-columns: 42px 1fr;
    gap: 10px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .service-orbit {
    min-height: 410px;
    aspect-ratio: auto;
    padding: 45px;
  }

  .impact {
    height: auto;
    min-height: 860px;
  }

  .impact-orb {
    top: 38%;
    left: 50%;
    width: 112vw;
    opacity: .42;
  }

  .impact-generated-image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 30% center;
  }

  .impact-title {
    top: 9%;
    left: var(--pad);
    max-width: 90vw;
    font-size: 14vw;
  }

  .impact-sticky {
    display: flex;
    align-items: flex-end;
    min-height: 860px;
    padding: 180px var(--pad) 48px;
  }

  .impact-summary {
    width: 100%;
    margin: 0;
    padding: 28px 24px;
  }

  .impact-summary strong {
    margin: 24px 0 18px;
    font-size: 44px;
  }

  .impact-summary p {
    font-size: 14px;
    line-height: 1.85;
  }

  .impact-flow {
    margin-top: 26px;
  }

  .insight-row {
    grid-template-columns: 1fr 30px;
  }

  .insight-row > span {
    grid-column: 1;
  }

  .insight-row h3 {
    grid-column: 1;
  }

  .insight-row i {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .join-scene {
    min-height: 820px;
  }

  .join-visual {
    bottom: 31%;
  }

  .join-title {
    top: 9%;
    font-size: 16vw;
  }

  .join-person {
    left: 18%;
    width: 45%;
  }

  .join-screen {
    right: -16%;
    width: 75%;
  }

  .join-generated-image {
    object-position: 43% center;
  }

  .join-energy {
    top: 46%;
    right: 7%;
    width: 72vw;
    opacity: .68;
  }

  .join-hud {
    top: 10%;
    gap: 10px;
    font-size: 6px;
  }

  .join-bottom {
    align-items: stretch;
    flex-direction: column;
    right: 14px;
    bottom: 3%;
    left: 14px;
    gap: 24px;
    padding: 22px 10px 10px;
    background: linear-gradient(180deg, rgba(231,247,251,.92), rgba(231,247,251,.72));
    backdrop-filter: blur(8px);
  }

  .pill-link {
    width: 100%;
  }

  .business-center {
    width: 150px;
    height: 150px;
  }

  .business-center strong {
    font-size: 42px;
  }

  .principle h3 {
    font-size: 29px;
  }

  .approach-marquee div {
    font-size: 28px;
  }

  .process-list li {
    gap: 20px;
  }

  .contact-button {
    width: 100%;
  }

  .home-footer nav {
    flex-wrap: wrap;
  }
}

/* Motion budget: retain a few signature transforms and pause everything offscreen. */
.light-motion-field,
.hero-scan,
.hero-network,
.hero-kinetic-rings,
.hero-fly-cube-b,
.hero-fly-prism,
.hero-fly-shard {
  display: none !important;
}

.hero-fly-cube-a,
.hero-fly-portal,
.hero-ghost,
.hero-live > span i,
.hero-live b,
.scroll-cue i::after,
.ai-sphere,
.transformation-map::before,
.map-input::after,
.map-value::after,
.engine-core i,
.map-transfer i,
.business::before,
.business-aura,
.join-generated-image,
.join-screen,
.join-lines i,
.join-hud i::after,
.join-energy b,
.approach::before,
.approach::after,
.process-list li::before,
.process-list li::after {
  animation: none !important;
}

.hero-polycube,
.hero-portal,
.hero-portal em,
.join-energy i,
.ring-two {
  animation: none !important;
}

.ring-one,
.approach-marquee {
  animation: none !important;
}

.orbit-core,
.map-node,
.join-screen {
  backdrop-filter: none;
}

.impact-generated-image,
.join-generated-image {
  filter: none;
}

.join-screen {
  display: none;
}

main > section:not(.is-in-view) *,
main > section:not(.is-in-view)::before,
main > section:not(.is-in-view)::after {
  animation-play-state: paused !important;
}

@media (min-width: 981px) {
  .hero-title.pksha-type .title-line {
    overflow: visible;
  }

  .hero-title.pksha-type .title-line > span {
    animation: none;
    transform: none;
  }

  .pksha-hero-char {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateZ(0);
    transition:
      opacity .68s cubic-bezier(.45, 0, .55, 1),
      filter .68s cubic-bezier(.45, 0, .55, 1);
    transition-delay: calc(var(--char-order, 0) * 25ms);
  }

  .hero-title.is-type-visible .pksha-hero-char {
    opacity: 1;
    filter: blur(0);
  }

  .section-index.pksha-type.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .section-index.pksha-type > span,
  .pksha-section-char {
    opacity: 0;
    transition: opacity .56s cubic-bezier(.22, 1, .36, 1);
  }

  .pksha-section-char {
    display: inline-block;
    transition-delay: calc(var(--char-order, 0) * 24ms);
  }

  .section-index.pksha-type.is-visible > span,
  .section-index.pksha-type.is-visible .pksha-section-char {
    opacity: 1;
  }
}

@media (max-width: 980px) {
  html { scroll-behavior: auto; }

  .home-header.is-scrolled {
    background: rgba(243,243,240,.97);
    backdrop-filter: none;
  }

  .home-nav {
    overflow-x: hidden;
  }

  .stage-panel {
    transform: none !important;
    transition: none;
  }

  .hero-fly,
  .hero-polycube,
  .hero-prism,
  .hero-shard,
  .hero-portal,
  .hero-portal em,
  .orbit-ring,
  .join-energy i,
  .approach-marquee,
  main > section *,
  main > section *::before,
  main > section *::after {
    animation: none !important;
  }

  .title-line > span {
    transform: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  .hero-fly,
  .hero-polycube {
    will-change: auto;
  }

  .join-bottom {
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fly,
  .hero-polycube,
  .hero-prism,
  .hero-shard,
  .hero-portal,
  .hero-portal em {
    animation: none !important;
  }

  .hero-3d-field {
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}