:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", sans-serif;
  --ink: #152238; --muted: #66758b; --faint: #91a0b3; --canvas: #f3f6fa; --paper: #fff; --paper-soft: #f7f9fc; --line: #dce5ef; --line-strong: #c5d2e1;
  --accent: #1479f6; --accent-strong: #0d61cc; --accent-soft: #e9f2ff; --radius: 18px; --shadow: 0 2px 4px rgb(31 68 112 / 4%), 0 24px 72px rgb(31 68 112 / 12%);
  color: var(--ink); background: var(--canvas); font-synthesis: none; text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(circle at 82% 0%, rgb(20 121 246 / 9%), transparent 34rem), var(--canvas); color: var(--ink); font-size: 16px; line-height: 1.5; letter-spacing: -.008em; }
a { color: inherit; text-underline-offset: 3px; } img { display: block; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 9px 12px; border-radius: 8px; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); } :focus-visible { outline: 3px solid rgb(20 121 246 / 30%); outline-offset: 3px; }
.site-header { width: min(1160px, calc(100% - 48px)); min-height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .brand img { width: 30px; height: 30px; border-radius: 8px; } .brand span { font-size: 15px; font-weight: 720; letter-spacing: -.025em; }
.site-header nav, footer nav { display: flex; align-items: center; gap: 26px; } .site-header nav a, footer nav a { color: var(--muted); font-size: 13px; font-weight: 560; text-decoration: none; } .site-header nav a:hover, footer nav a:hover { color: var(--ink); }
.site-header nav .nav-action { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgb(255 255 255 / 76%); color: var(--accent-strong); font-weight: 680; box-shadow: 0 1px 2px rgb(31 68 112 / 5%); }
main { overflow: hidden; }
.hero { width: min(1080px, calc(100% - 48px)); min-height: 660px; margin: 0 auto; padding: 94px 0 104px; display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(340px, .86fr); align-items: center; gap: 82px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 17px; color: var(--accent-strong); font-size: 11px; font-weight: 760; letter-spacing: .085em; text-transform: uppercase; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hero h1 { max-width: 680px; margin: 0 0 26px; font-size: clamp(43px, 5.25vw, 65px); line-height: 1.02; font-weight: 750; letter-spacing: -.055em; } .hero h1 em { color: var(--accent-strong); font-style: normal; font-weight: inherit; }
.hero-copy > p { max-width: 590px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.72; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 18px; } .hero-actions > span { color: var(--faint); font-size: 12px; }
.button { min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 11px; font-size: 14px; font-weight: 690; text-decoration: none; transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.button.primary { background: var(--accent); color: white; box-shadow: 0 12px 28px rgb(20 121 246 / 20%); } .button.primary:hover { background: var(--accent-strong); box-shadow: 0 14px 34px rgb(20 121 246 / 25%); transform: translateY(-1px); }
.relay-visual { min-height: 420px; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgb(126 178 232 / 18%); border-radius: 26px; background: radial-gradient(circle at 50% 45%, rgb(38 121 214 / 20%), transparent 34%), radial-gradient(circle at 11% 15%, rgb(64 167 255 / 13%), transparent 27%), linear-gradient(145deg, #07111f, #0a1c31 54%, #08131f); box-shadow: var(--shadow); }
.visual-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgb(126 178 232 / 10%) 1px, transparent 1px), linear-gradient(90deg, rgb(126 178 232 / 10%) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle, black, transparent 76%); }
.orbit { position: absolute; left: 50%; top: 47%; border: 1px solid rgb(128 183 235 / 24%); border-radius: 50%; transform: translate(-50%, -50%) rotate(-12deg); } .orbit-one { width: 245px; height: 150px; } .orbit-two { width: 350px; height: 225px; transform: translate(-50%, -50%) rotate(19deg); }
.signal { width: 8px; height: 8px; position: absolute; z-index: 2; border: 1px solid rgb(255 255 255 / 75%); border-radius: 50%; background: #58adff; box-shadow: 0 0 18px rgb(88 173 255 / 80%); } .signal-one { left: 20%; top: 30%; } .signal-two { right: 17%; top: 43%; width: 6px; height: 6px; } .signal-three { left: 29%; bottom: 20%; width: 5px; height: 5px; }
.visual-core { width: 92px; height: 92px; position: absolute; left: 50%; top: 47%; z-index: 3; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 13%); border-radius: 28px; background: rgb(255 255 255 / 7%); box-shadow: 0 18px 55px rgb(0 0 0 / 34%), 0 0 0 12px rgb(255 255 255 / 3%); transform: translate(-50%, -50%); backdrop-filter: blur(8px); } .visual-core img { width: 64px; height: 64px; border-radius: 17px; }
.relay-visual > p { position: absolute; left: 22px; right: 22px; bottom: 18px; margin: 0; padding-top: 15px; display: flex; align-items: center; gap: 8px; border-top: 1px solid rgb(126 178 232 / 15%); color: rgb(218 232 248 / 62%); font-size: 11px; letter-spacing: .02em; } .relay-visual > p span { width: 6px; height: 6px; border-radius: 50%; background: #62a8ff; box-shadow: 0 0 0 4px rgb(98 168 255 / 12%); }
.principles { padding: 96px max(24px, calc((100% - 1080px) / 2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.section-intro { max-width: 760px; } .section-intro .eyebrow { margin-bottom: 14px; } .section-intro h2, .access-note h2 { margin: 0; font-size: clamp(30px, 3.2vw, 43px); line-height: 1.13; font-weight: 720; letter-spacing: -.04em; }
.principle-grid { margin-top: 58px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); } .principle-grid article { min-height: 205px; padding: 27px 30px 26px 0; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); } .principle-grid article + article { padding-left: 30px; } .principle-grid article:last-child { border-right: 0; }
.principle-grid article > span { color: var(--accent-strong); font-size: 11px; font-weight: 760; } .principle-grid h3 { margin: 0 0 8px; font-size: 18px; font-weight: 690; letter-spacing: -.025em; } .principle-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.access-note { width: min(1080px, calc(100% - 48px)); margin: 92px auto 96px; padding: 34px; display: grid; grid-template-columns: .9fr 1.1fr auto; align-items: center; gap: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(135deg, var(--paper), var(--paper-soft)); box-shadow: 0 12px 38px rgb(31 68 112 / 6%); } .access-note .eyebrow { margin-bottom: 8px; } .access-note h2 { font-size: 26px; } .access-note > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.68; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--accent-strong); font-size: 13px; font-weight: 680; text-decoration: none; white-space: nowrap; } .text-link:hover { color: var(--accent); }
footer { width: min(1160px, calc(100% - 48px)); min-height: 154px; margin: 0 auto; padding: 32px 0; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 24px 42px; border-top: 1px solid var(--line); } footer > div > p { margin: 8px 0 0 40px; color: var(--faint); font-size: 12px; } .disclaimer { grid-column: 1 / -1; max-width: 710px; margin: 0; color: var(--faint); font-size: 11px; line-height: 1.6; }
.document-page { width: min(720px, calc(100% - 48px)); margin: 0 auto; padding: 78px 0 108px; } .document-page h1 { margin: 0 0 18px; font-size: clamp(38px, 5vw, 52px); line-height: 1.06; font-weight: 740; letter-spacing: -.048em; } .document-page .lede { margin: 0 0 46px; color: var(--muted); font-size: 16px; line-height: 1.72; } .document-page section { padding: 27px 0; border-top: 1px solid var(--line); } .document-page h2 { margin: 0 0 10px; font-size: 19px; font-weight: 690; letter-spacing: -.02em; } .document-page p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.74; }
@media (max-width: 850px) { .hero { grid-template-columns: 1fr; gap: 56px; padding-top: 74px; } .relay-visual { width: min(100%, 540px); min-height: 340px; } .access-note { grid-template-columns: 1fr 1fr; } .access-note .text-link { justify-self: start; } }
@media (max-width: 650px) {
  .site-header { width: calc(100% - 30px); min-height: 68px; } .site-header nav { gap: 0; } .site-header nav > a:not(.nav-action) { display: none; } .brand img { width: 28px; height: 28px; } .site-header nav .nav-action { min-height: 40px; padding: 0 13px; }
  .hero { width: calc(100% - 30px); min-height: 0; padding: 62px 0 72px; gap: 46px; } .hero h1 { font-size: clamp(40px, 12vw, 51px); } .hero-copy > p { font-size: 15px; line-height: 1.68; } .hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; } .button { width: 100%; }
  .relay-visual { min-height: 286px; border-radius: 21px; } .orbit-one { width: 190px; height: 118px; } .orbit-two { width: 275px; height: 175px; } .visual-core { width: 78px; height: 78px; border-radius: 23px; } .visual-core img { width: 54px; height: 54px; }
  .principles { padding: 70px 15px; } .principle-grid { margin-top: 43px; grid-template-columns: 1fr; } .principle-grid article, .principle-grid article + article { min-height: 0; padding: 24px 0 27px; gap: 25px; border-right: 0; border-bottom: 1px solid var(--line); }
  .access-note { width: calc(100% - 30px); margin: 70px auto 74px; padding: 25px; grid-template-columns: 1fr; gap: 22px; } footer { width: calc(100% - 30px); grid-template-columns: 1fr; } footer nav { margin-left: 40px; } .disclaimer { grid-column: 1; } .document-page { width: calc(100% - 30px); padding: 58px 0 82px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }