:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #091923;
  color: #eaf5f6;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #9dd5ea; outline-offset: 5px; }

.page { min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse 72% 70% at 81% 44%, #18384a 0%, transparent 70%), linear-gradient(150deg, #0d2330, #091923 54%, #09141d); }
.topbar, .stage, .footer { width: min(100%, 1440px); margin-inline: auto; }
.topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px clamp(24px, 5vw, 76px); border-bottom: 1px solid #d4f0f014; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand img { display: block; filter: drop-shadow(0 5px 17px #74bcde4d); }
.brand-wordmark { display: grid; gap: 2px; }
.brand-wordmark strong { font-size: 19px; line-height: 1; font-weight: 720; letter-spacing: -.05em; }
.brand-wordmark small { color: #9dbac5; font-size: 8px; font-weight: 680; letter-spacing: .17em; }
.status { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 13px; border: 1px solid #95d2df43; border-radius: 999px; color: #b9dfeb; background: #a2d8e40e; font-size: 10px; font-weight: 740; letter-spacing: .1em; white-space: nowrap; }
.status-light { width: 6px; height: 6px; border-radius: 50%; background: #9ad8e9; box-shadow: 0 0 0 4px #9ad8e918, 0 0 11px #9ad8e9bb; }

.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); align-items: center; gap: 30px; flex: 1; min-height: 660px; padding: 50px clamp(24px, 5vw, 76px) 72px; isolation: isolate; }
.stage-noise { position: absolute; inset: 0; z-index: -1; opacity: .21; background-image: linear-gradient(90deg, #c8e8ee0b 1px, transparent 1px), linear-gradient(#c8e8ee0b 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(90deg, transparent 8%, #000 70%); pointer-events: none; }
.story { position: relative; z-index: 2; max-width: 685px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; color: #91c6d5; font-size: 11px; font-weight: 760; letter-spacing: .19em; }
.eyebrow span { width: 22px; height: 1px; background: #8cc6d6; box-shadow: 0 0 10px #8cc6d6; }
h1 { margin: 0; font-size: clamp(51px, 5.65vw, 84px); line-height: 1.02; font-weight: 600; letter-spacing: -.075em; text-wrap: balance; }
h1 em { font-style: normal; color: #acdce8; text-shadow: 0 0 42px #71bfd447; }
.period { color: #88cbdc; }
.description { max-width: 590px; margin: 26px 0 0; color: #bad0d5; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.7; }
.notice { display: flex; gap: 16px; max-width: 565px; margin-top: 31px; padding: 17px 19px; border: 1px solid #92c8d733; border-radius: 13px; background: #b5d9de0b; backdrop-filter: blur(8px); }
.notice-line { flex: 0 0 2px; border-radius: 2px; background: linear-gradient(#9ad7e9, #496d8c); }
.notice p { margin: 0; color: #9db5bd; font-size: 13px; line-height: 1.62; }
.notice strong { color: #d7ebef; font-weight: 700; }
.back-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; padding: 4px 0 8px; border-bottom: 1px solid #8ecddd81; color: #e0f4f7; font-size: 14px; font-weight: 690; transition: color .2s ease, gap .2s ease; }
.back-link:hover { gap: 21px; color: #9bdcec; }
.back-link span { font-size: 19px; font-weight: 400; }
.discover-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 29px; color: #c9e8ee; font-size: 13px; font-weight: 650; letter-spacing: .02em; transition: gap .2s ease, color .2s ease; }
.discover-link:hover { gap: 18px; color: #fff; }
.discover-link span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #a7dce359; border-radius: 50%; }

.visual { position: relative; display: grid; place-items: center; width: min(100%, 620px); aspect-ratio: 1; justify-self: center; isolation: isolate; }
.visual-halo { position: absolute; inset: 10%; z-index: -2; border-radius: 50%; background: radial-gradient(circle, #5d9fbd31 0%, #58a2c619 34%, transparent 68%); filter: blur(25px); animation: glow 7s ease-in-out infinite; }
.orbit { position: absolute; border: 1px solid #a9d7e521; border-radius: 50%; animation: turn 58s linear infinite; }
.orbit::after { content: ""; position: absolute; inset: 10px; border: 1px dashed #9acbda12; border-radius: 50%; }
.orbit-outer { inset: 4%; }
.orbit-mid { inset: 18%; animation-direction: reverse; animation-duration: 46s; border-color: #9acddc38; }
.orbit-inner { inset: 34%; animation-duration: 33s; border-color: #98d4e034; }
.diamond { position: absolute; display: block; width: 9px; height: 9px; transform: rotate(45deg); background: #b0e3ec; box-shadow: 0 0 17px #8ccddd88; }
.orbit-outer .diamond:first-child { top: 13%; left: 13%; }
.orbit-outer .diamond:last-child { right: 12%; bottom: 13%; width: 5px; height: 5px; background: #86bed1; }
.orbit-mid .diamond:first-child { top: 1%; left: 53%; width: 6px; height: 6px; background: #74aac2; }
.orbit-mid .diamond:last-child { right: 0%; bottom: 40%; }
.orbit-inner .diamond { left: 13%; bottom: 10%; width: 5px; height: 5px; }
.visual-core { position: relative; display: grid; place-items: center; width: 44%; aspect-ratio: 1; border: 1px solid #9acfe23b; border-radius: 31%; background: linear-gradient(148deg, #1b3d51ab, #0c202dd8); box-shadow: inset 0 1px #e6fdff23, 0 30px 100px #040f1870, 0 0 80px #79bcd121; transform: rotate(-8deg); animation: float 8s ease-in-out infinite; }
.visual-core img { display: block; width: 71%; height: 71%; object-fit: contain; transform: rotate(8deg); filter: drop-shadow(0 9px 21px #a8dce96b); }
.core-glow { position: absolute; inset: -11%; z-index: -1; border-radius: 35%; background: #5da8bf24; filter: blur(28px); }
.visual-caption { position: absolute; bottom: 9%; color: #8cb1bf; font-size: 9px; font-weight: 720; letter-spacing: .24em; }

.vision, .domain, .principle, .closing { width: min(100%, 1440px); margin-inline: auto; padding-inline: clamp(24px, 5vw, 76px); }
.vision { padding-block: 97px 117px; border-top: 1px solid #d4f0f014; background: radial-gradient(ellipse 75% 65% at 5% 100%, #23455b40, transparent 75%); }
.section-kicker { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 0 26px; color: #a7d8e4; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.section-kicker span { color: #6d8e9a; font-variant-numeric: tabular-nums; }
.section-heading { max-width: 770px; }
h2 { margin: 0; font-size: clamp(38px, 4.2vw, 61px); font-weight: 580; line-height: 1.13; letter-spacing: -.065em; text-wrap: balance; }
h2 em { color: #a8d9e5; font-style: normal; }
.section-heading > p:last-child, .domain-intro > p:last-child, .principle > div > p:not(.section-kicker) { max-width: 680px; margin: 23px 0 0; color: #a9c1ca; font-size: 16px; line-height: 1.75; }
.capability-grid { display: grid; grid-template-columns: 1.22fr 1fr 1fr; gap: 14px; margin-top: 58px; }
.capability { position: relative; display: flex; flex-direction: column; min-height: 350px; padding: 30px; border: 1px solid #accfda26; border-radius: 18px; background: linear-gradient(145deg, #17303dbe, #10232ee8); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.capability:hover { transform: translateY(-5px); border-color: #9ed4e169; box-shadow: 0 22px 55px #0310186e; }
.capability-featured { background: radial-gradient(circle at 92% 12%, #32728d55, transparent 50%), linear-gradient(145deg, #1a3d50, #102632); }
.capability-index { color: #89b7c6; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.capability-symbol { display: grid; place-items: center; width: 58px; height: 58px; margin-top: 36px; border: 1px solid #9ed7e94a; border-radius: 16px; color: #a6deec; background: #c3e8eb0a; font-size: 32px; line-height: 1; text-shadow: 0 0 18px #8acddd88; }
.capability h3 { margin: 23px 0 0; font-size: 23px; line-height: 1.2; letter-spacing: -.035em; font-weight: 650; }
.capability p { margin: 15px 0 25px; color: #aac0c8; font-size: 14px; line-height: 1.7; }
.capability-note { margin-top: auto; padding-top: 16px; border-top: 1px solid #afdae522; color: #84b6c6; font-size: 11px; font-weight: 650; letter-spacing: .03em; }
.domain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8%; padding-block: 105px 120px; border-top: 1px solid #d4f0f014; }
.domain-intro { max-width: 560px; }
.domain-list { border-top: 1px solid #9dd2df40; }
.domain-list > div { display: grid; grid-template-columns: 35px 1fr; column-gap: 15px; padding: 23px 0; border-bottom: 1px solid #9dd2df30; }
.domain-list span { grid-row: span 2; padding-top: 4px; color: #88b4c3; font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.domain-list strong { font-size: 17px; font-weight: 620; letter-spacing: -.02em; }
.domain-list small { margin-top: 6px; color: #91acb6; font-size: 12px; line-height: 1.5; }
.principle { display: grid; grid-template-columns: 140px 1fr; gap: 53px; align-items: start; padding-block: 100px 117px; border-top: 1px solid #d4f0f014; background: radial-gradient(ellipse 70% 100% at 100% 50%, #1a445940, transparent 70%); }
.principle-mark { display: grid; place-items: center; width: 130px; height: 130px; border: 1px solid #a1d7e553; border-radius: 31px; background: linear-gradient(140deg, #245267, #112d3c); box-shadow: inset 0 1px #d5f6ff2c, 0 22px 70px #030f195e; transform: rotate(-7deg); }
.principle-mark img { filter: drop-shadow(0 8px 19px #9ed3e770); transform: rotate(7deg); }
.principle-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.principle-tags span { padding: 9px 12px; border: 1px solid #a3d1dc3c; border-radius: 999px; color: #b6d4dd; background: #badde50b; font-size: 11px; font-weight: 650; }
.closing { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding-block: 28px; border-top: 1px solid #afdae528; background: #b5d9de08; }
.closing p { max-width: 800px; margin: 0; color: #9fb6bf; font-size: 12px; line-height: 1.65; }
.closing strong { color: #e1f0f3; }
.closing a { white-space: nowrap; color: #d6edf2; font-size: 12px; font-weight: 740; border-bottom: 1px solid #9bd4e88a; padding-bottom: 4px; }

.footer { display: flex; justify-content: space-between; gap: 30px; padding: 20px clamp(24px, 5vw, 76px) 24px; border-top: 1px solid #d4f0f014; color: #8ba7b3; font-size: 10px; font-weight: 680; letter-spacing: .08em; }
.footer i { padding-inline: 7px; color: #5d8290; font-style: normal; }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-10px) rotate(-5deg); } }
@keyframes glow { 50% { opacity: .55; transform: scale(1.08); } }

@media (max-width: 1000px) {
  .stage { grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); gap: 0; }
  h1 { font-size: clamp(50px, 6vw, 70px); }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-featured { grid-column: span 2; min-height: 300px; }
}
@media (max-width: 760px) {
  .topbar { padding: 20px 24px; }
  .brand img { width: 39px; height: 39px; }
  .brand-wordmark strong { font-size: 17px; }
  .status { padding-inline: 10px; font-size: 9px; }
  .stage { display: block; min-height: unset; padding: 70px 24px 35px; }
  .story { max-width: 580px; }
  h1 { font-size: clamp(46px, 10vw, 72px); }
  .visual { width: min(100%, 460px); margin: 18px auto 0; }
  .visual-caption { bottom: 4%; }
  .footer { padding: 20px 24px 24px; }
  .footer span:last-child { max-width: 180px; text-align: right; line-height: 1.5; }
  .vision, .domain, .principle, .closing { padding-inline: 24px; }
  .vision, .domain, .principle { padding-block: 70px 78px; }
  .domain { display: block; }
  .domain-list { margin-top: 36px; }
  .principle { grid-template-columns: 1fr; gap: 36px; }
  .principle-mark { width: 104px; height: 104px; border-radius: 25px; }
  .principle-mark img { width: 68px; height: 68px; }
  .closing { display: block; }
  .closing a { display: inline-block; margin-top: 18px; }
}
@media (max-width: 480px) {
  .brand-wordmark small { font-size: 7px; }
  .status { letter-spacing: .03em; }
  .stage { padding-top: 58px; }
  .eyebrow { margin-bottom: 20px; }
  h1 { font-size: clamp(44px, 12vw, 59px); }
  .description { margin-top: 25px; }
  .notice { margin-top: 26px; }
  .visual { width: min(100%, 360px); }
  .capability-grid { grid-template-columns: 1fr; margin-top: 38px; }
  .capability-featured { grid-column: auto; }
  .capability { min-height: 315px; padding: 25px; }
  .capability-symbol { margin-top: 28px; }
  .domain-list > div { grid-template-columns: 29px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orbit, .visual-halo, .visual-core { animation: none; }
  .back-link, .discover-link, .capability { transition: none; }
}