@charset "UTF-8";

:root {
  color-scheme: dark;
  --bg: #0b1220;
  --panel: #111b2b;
  --ink: #f3f6f4;
  --muted: #a9b5bd;
  --soft: #71818c;
  --line: rgba(210, 231, 231, .14);
  --mint: #b5efd8;
  --lilac: #afa7ea;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
.skip-link { position: absolute; top: -60px; left: 16px; z-index: 30; padding: 10px 15px; background: var(--mint); color: var(--bg); border-radius: 6px; }
.skip-link:focus { top: 16px; }
.page-shell { overflow: hidden; }
.site-header, .hero, .section, .site-footer { width: min(100% - 88px, 1320px); margin-inline: auto; }

.site-header {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; white-space: nowrap; }
.brand-symbol { width: 32px; height: 32px; position: relative; display: inline-block; }
.brand-symbol span { position: absolute; width: 23px; height: 2px; border-radius: 3px; background: var(--mint); transform: rotate(-35deg); transform-origin: center; }
.brand-symbol span:nth-child(1) { top: 9px; left: 0; }
.brand-symbol span:nth-child(2) { top: 16px; left: 4px; background: #eafaf2; }
.brand-symbol span:nth-child(3) { top: 23px; left: 8px; background: var(--lilac); }
.brand-name { font-size: 20px; font-weight: 650; letter-spacing: -.055em; }
.brand-name span { color: var(--mint); }
.site-nav { display: flex; align-items: center; gap: 38px; font-size: 13px; letter-spacing: .02em; }
.site-nav > a { text-decoration: none; color: #c4d0d1; transition: color .2s ease; }
.site-nav > a:hover { color: var(--mint); }
.status { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid rgba(181,239,216,.27); border-radius: 999px; color: #d2eee2; font-size: 12px; letter-spacing: .045em; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(181,239,216,.75); }

.hero { min-height: 690px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(370px, 520px); gap: clamp(50px, 6vw, 110px); align-items: center; padding-block: 70px 84px; }
.hero-copy { position: relative; z-index: 1; padding-top: 5px; }
.eyebrow, .section-kicker { margin: 0; color: var(--mint); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .20em; }
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow-line { width: 26px; height: 1px; background: var(--mint); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 26px 0 28px; max-width: 730px; font-size: clamp(62px, 6.3vw, 104px); line-height: 1.02; letter-spacing: -.07em; font-weight: 580; }
.hero h1 em, .not-found h1 em { color: var(--mint); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.055em; }
.hero-description { max-width: 490px; color: #bfcbcf; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.65; letter-spacing: -.015em; }
.text-link { display: inline-flex; align-items: center; gap: 22px; padding-block: 12px; border-bottom: 1px solid var(--mint); text-decoration: none; color: var(--mint); font-size: 14px; font-weight: 650; transition: gap .2s ease, color .2s ease; }
.text-link:hover { gap: 30px; color: #ecfff5; }
.text-link span { font-size: 20px; line-height: .75; }
.hero-note { display: flex; align-items: center; gap: 15px; margin-top: 88px; color: var(--soft); text-transform: uppercase; font-size: 10px; font-weight: 650; letter-spacing: .16em; white-space: nowrap; }
.note-rule { width: 20px; height: 1px; background: #52606d; }

.visual-panel { position: relative; isolation: isolate; width: 100%; height: 550px; overflow: hidden; border: 1px solid rgba(186,212,222,.18); border-radius: 24px; background: radial-gradient(ellipse at 57% 46%, rgba(80,88,157,.27), transparent 45%), linear-gradient(145deg, #172333 0%, #0d1728 43%, #101421 100%); box-shadow: 0 26px 100px rgba(0,0,0,.19), inset 0 0 50px rgba(206,235,255,.025); }
.visual-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(178,211,218,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(178,211,218,.14) 1px, transparent 1px); background-size: 39px 39px; mask-image: radial-gradient(ellipse at center, #000 5%, transparent 74%); }
.visual-panel::before { content: ""; position: absolute; z-index: -1; width: 96%; aspect-ratio: 1; left: 5%; top: 3%; border-radius: 50%; background: radial-gradient(circle, rgba(129,150,243,.22), transparent 66%); filter: blur(23px); }
.orbit { position: absolute; top: 49%; left: 50%; border: 1px solid rgba(191,224,232,.17); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
.orbit-outer { width: 88%; aspect-ratio: 1; border-style: dashed; border-color: rgba(194,216,225,.19); }
.orbit-middle { width: 67%; aspect-ratio: 1; border-color: rgba(180,240,221,.33); box-shadow: 0 0 45px rgba(157,229,208,.06), inset 0 0 50px rgba(177,227,216,.04); }
.orbit-inner { width: 48%; aspect-ratio: 1; border-color: rgba(186,197,252,.45); transform: translate(-50%, -50%) rotate(26deg); }
.orbit-outer::before, .orbit-middle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 104%; height: 32%; border-top: 1px solid rgba(180,240,221,.21); border-bottom: 1px solid rgba(180,240,221,.14); border-radius: 50%; transform: translate(-50%, -50%) rotate(38deg); }
.orbit-middle::after { width: 117%; height: 45%; transform: translate(-50%, -50%) rotate(-47deg); border-color: rgba(170,166,241,.30); }
.orb-glow { position: absolute; width: 49%; aspect-ratio: 1; top: 49%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(146,242,211,.47), rgba(107,119,232,.19) 36%, transparent 71%); filter: blur(29px); animation: glow 9s ease-in-out infinite; }
.orb-core { position: absolute; width: 35%; aspect-ratio: 1; top: 49%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 33% 28%, #d9fff0 0%, #9ce2d0 13%, #7bb7c9 35%, #6266ad 66%, #282e51 91%); box-shadow: inset -20px -21px 36px rgba(15,22,43,.56), 0 0 48px rgba(127,213,207,.36), 0 0 100px rgba(111,101,207,.19); }
.orb-core::after { content: ""; position: absolute; inset: 11%; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; transform: rotate(24deg) scaleX(.70); }
.visual-node { position: absolute; width: 7px; height: 7px; background: #e6fff5; border-radius: 50%; box-shadow: 0 0 15px 4px rgba(144,233,209,.45); }
.node-one { top: 20%; left: 56%; }.node-two { top: 55%; left: 15%; width: 5px; height: 5px; }.node-three { top: 75%; right: 19%; width: 5px; height: 5px; background: #c9c2ff; box-shadow: 0 0 13px 3px rgba(172,161,245,.5); }
.visual-top, .visual-bottom { position: absolute; left: 30px; right: 30px; display: flex; align-items: center; justify-content: space-between; color: #a5b2bb; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.visual-top { top: 27px; }.visual-bottom { bottom: 26px; }
.visual-index { color: var(--mint); font-size: 12px; letter-spacing: .09em; }
.visual-arrow { color: var(--mint); font-size: 18px; line-height: 1; }

.section { border-top: 1px solid var(--line); }
.approach { padding-block: 105px 116px; }
.section-intro { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(220px, 330px); align-items: start; gap: 32px; margin-bottom: 70px; }
.section-intro .section-kicker { padding-top: 10px; }
.section-intro h2 { max-width: 670px; margin-bottom: 0; font-size: clamp(36px, 4.2vw, 60px); font-weight: 550; line-height: 1.13; letter-spacing: -.056em; }
.section-intro > p:last-child { padding-top: 8px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.principle { position: relative; min-height: 258px; padding: 27px 30px 31px; overflow: hidden; border: 1px solid rgba(205,228,226,.11); border-radius: 14px; background: linear-gradient(143deg, rgba(37,53,70,.57), rgba(21,32,48,.70) 60%, rgba(26,31,50,.8)); }
.principle::after { content: ""; position: absolute; width: 260px; aspect-ratio: 1; right: -150px; top: -135px; border: 1px solid rgba(188,235,218,.10); border-radius: 50%; }
.principle-number { color: #7d9a9c; font-size: 11px; font-weight: 650; letter-spacing: .14em; }
.principle-icon { position: relative; width: 51px; height: 51px; margin: 27px 0 20px; border: 1px solid rgba(181,239,216,.24); border-radius: 12px; color: var(--mint); }
.signal-icon i { position: absolute; bottom: 12px; width: 3px; border-radius: 3px; background: var(--mint); }.signal-icon i:nth-child(1){height: 12px; left: 15px; opacity: .62;}.signal-icon i:nth-child(2){height: 24px; left: 24px;}.signal-icon i:nth-child(3){height: 17px; left: 33px; opacity: .78;}
.people-icon i { position: absolute; border: 1.5px solid var(--mint); border-radius: 50%; }.people-icon i:first-child { width: 17px; height: 17px; top: 10px; left: 10px; }.people-icon i:last-child { width: 17px; height: 17px; right: 10px; bottom: 10px; }
.trust-icon i { position: absolute; inset: 12px; border: 1.5px solid var(--mint); border-radius: 50%; }.trust-icon i::after { content: ""; position: absolute; width: 13px; height: 7px; left: 5px; top: 5px; border-left: 1.5px solid var(--mint); border-bottom: 1.5px solid var(--mint); transform: rotate(-45deg); }
.principle h3 { margin-bottom: 10px; font-size: 20px; font-weight: 590; letter-spacing: -.025em; }
.principle p { max-width: 300px; margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.outlook { position: relative; min-height: 330px; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: center; gap: 52px; padding-block: 76px 85px; border-bottom: 1px solid var(--line); }
.outlook-mark { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; border: 1px solid rgba(181,239,216,.16); border-radius: 50%; background: radial-gradient(circle at center, rgba(181,239,216,.12), transparent 68%); }
.outlook-mark span { display: block; width: 49px; height: 2px; margin: 0 -6px; border-radius: 3px; background: var(--mint); transform: rotate(-35deg); }.outlook-mark span:nth-child(2) { background: #e9fff5; }.outlook-mark span:nth-child(3) { background: var(--lilac); }
.outlook h2 { margin: 15px 0 14px; max-width: 680px; font-size: clamp(33px, 3.8vw, 55px); line-height: 1.13; font-weight: 550; letter-spacing: -.055em; }
.outlook-copy > p:last-child { max-width: 560px; margin-bottom: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.outlook-tag { align-self: end; display: inline-flex; align-items: center; gap: 17px; padding-bottom: 7px; color: var(--mint); font-size: 12px; font-weight: 650; white-space: nowrap; }
.outlook-tag span { font-size: 18px; }
.site-footer { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #82929d; font-size: 12px; letter-spacing: .01em; }

.not-found-shell { min-height: 100vh; display: flex; flex-direction: column; }
.not-found { width: min(100% - 88px, 1320px); flex: 1; margin: auto; padding-block: 110px; }
.not-found h1 { margin: 22px 0; font-size: clamp(62px, 8vw, 112px); line-height: 1.04; letter-spacing: -.065em; font-weight: 550; }
.not-found > p:not(.section-kicker) { color: var(--muted); font-size: 19px; line-height: 1.6; }

@keyframes glow { 0%, 100% { opacity: .86; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@media (max-width: 1120px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(330px, 440px); gap: 35px; }
  .hero h1 { font-size: clamp(56px, 6.4vw, 80px); }
  .visual-panel { height: 475px; }
  .section-intro { grid-template-columns: 170px minmax(0, 1fr); }
  .section-intro > p:last-child { grid-column: 2; max-width: 540px; padding-top: 0; }
}
@media (max-width: 760px) {
  .site-header, .hero, .section, .site-footer, .not-found { width: min(100% - 40px, 560px); }
  .site-header { height: 76px; }.brand-name { font-size: 19px; }
  .site-nav { gap: 0; }.site-nav > a { display: none; }.status { padding: 8px 11px; font-size: 10px; }
  .hero { min-height: 0; display: block; padding-block: 75px 75px; }
  .hero h1 { margin-block: 24px; font-size: clamp(54px, 12vw, 76px); }
  .hero-description { font-size: 17px; line-height: 1.62; }
  .hero-note { margin-top: 50px; font-size: 8px; gap: 10px; }
  .visual-panel { width: 100%; height: min(96vw, 470px); margin-top: 58px; }
  .approach { padding-block: 75px 80px; }.section-intro { display: block; margin-bottom: 42px; }
  .section-intro h2 { margin: 21px 0; font-size: clamp(38px, 9vw, 52px); }
  .section-intro > p:last-child { font-size: 15px; }
  .principles { grid-template-columns: 1fr; gap: 11px; }.principle { min-height: 215px; }
  .outlook { display: block; padding-block: 75px 78px; }.outlook-mark { width: 92px; height: 92px; margin-bottom: 38px; }.outlook-mark span { width: 31px; }
  .outlook h2 { font-size: clamp(40px, 9vw, 52px); }.outlook-tag { margin-top: 35px; }
  .site-footer { min-height: 110px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
  .not-found { padding-block: 100px; }
}
@media (max-width: 410px) {
  .brand { gap: 7px; }.brand-name { font-size: 17px; }.brand-symbol { transform: scale(.8); transform-origin: left center; width: 27px; }
  .status { font-size: 9px; }
  .hero-note { white-space: normal; }
  .visual-top, .visual-bottom { left: 18px; right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}