:root {
  --navy: #121a2b;
  --navy-soft: #1a2438;
  --ink: #172033;
  --paper: #f5f6f8;
  --white: #ffffff;
  --coral: #e65050;
  --coral-bright: #f16862;
  --coral-dark: #bd3c43;
  --cyan: #00c5d8;
  --cyan-bright: #58e5f3;
  --cyan-dark: #0095aa;
  --line: rgba(255, 255, 255, 0.14);
  --muted: #a8b0c0;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--navy); color: var(--white); font-family: var(--body); font-size: 1rem; line-height: 1.55; overflow-x: hidden; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--white); color: var(--ink); padding: .75rem 1rem; border-radius: .3rem; }
.skip-link:focus { top: 1rem; }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.25rem, 5vw, 5rem); border-bottom: 1px solid var(--line); background: rgba(18, 26, 43, .82); backdrop-filter: blur(18px); transition: height .25s ease, background .25s ease; }
.site-header.scrolled { height: 70px; background: rgba(18, 26, 43, .95); }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; flex: 0 0 auto; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cube-top { fill: var(--cube-top, var(--cyan-bright)); }
.cube-left { fill: var(--cube-left, var(--cyan)); }
.cube-right { fill: var(--cube-right, var(--cyan-dark)); }
.brand-type { font-family: var(--display); font-size: 1.05rem; letter-spacing: -.03em; }
.brand-type b { font-weight: 700; }
nav { display: flex; align-items: center; gap: 2rem; }
nav a { color: #d5d9e2; text-decoration: none; font-size: .92rem; font-weight: 600; }
nav a:hover, nav a:focus-visible { color: var(--white); }
.nav-cta { border: 1px solid rgba(255,255,255,.28); padding: .7rem 1rem; border-radius: 999px; }
.nav-cta span { color: var(--cyan-bright); padding-left: .35rem; }
.menu-button, .mobile-menu { display: none; }

.hero { position: relative; min-height: 100svh; padding: clamp(8.5rem, 14vw, 12rem) clamp(1.25rem, 5vw, 5rem) 3rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr); grid-template-rows: 1fr auto; gap: 2rem; isolation: isolate; overflow: clip; }
.hero-grid { position: absolute; inset: 84px 0 0; z-index: -2; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, black 0%, transparent 95%); }
.hero::after { content: ""; position: absolute; z-index: -1; width: 44vw; height: 44vw; right: -18vw; top: 8rem; border-radius: 50%; background: rgba(0,197,216,.16); filter: blur(90px); }
.hero-copy { align-self: center; max-width: 850px; }
.eyebrow { display: flex; gap: 1.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 700; margin: 0 0 2rem; }
.eyebrow span + span::before { content: "•"; color: var(--coral); margin-right: 1.6rem; }
h1, h2, h3 { font-family: var(--display); margin: 0; }
h1 { font-size: clamp(4.5rem, 10.5vw, 9.5rem); line-height: .82; letter-spacing: -.075em; font-weight: 600; max-width: 940px; }
h1 em { color: var(--cyan-bright); font-style: normal; }
.hero-intro { margin: 2.4rem 0 0; font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.025em; color: #d9dee8; }
.hero-cube { width: min(38vw, 470px); aspect-ratio: 1; align-self: center; justify-self: center; position: relative; display: grid; place-items: center; }
.hero-cube svg { width: 77%; filter: drop-shadow(0 35px 45px rgba(0,0,0,.3)); animation: float 7s ease-in-out infinite; }
.orbit { position: absolute; inset: 8%; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; transform: rotate(-20deg) scaleY(.42); }
.orbit-two { inset: 1%; transform: rotate(40deg) scaleY(.37); border-color: rgba(88,229,243,.38); }
.cube-note { position: absolute; text-transform: uppercase; letter-spacing: .14em; font-size: .65rem; font-weight: 700; color: var(--muted); }
.note-one { top: 15%; right: -2%; }
.note-two { left: -1%; bottom: 13%; }
.hero-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.hero-footer p { max-width: 530px; font-size: 1.05rem; color: #c8ced9; margin: 0; }
.text-link { font-weight: 700; text-decoration: none; white-space: nowrap; }
.text-link span { display: inline-grid; place-items: center; margin-left: .6rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cyan); transition: transform .2s ease; }
.text-link:hover span { transform: translateY(4px); }

.manifesto { background: var(--paper); color: var(--ink); padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 5vw, 5rem); }
.section-label { margin: 0; color: #777f8f; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.manifesto-copy { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: clamp(2rem, 7vw, 8rem); align-items: end; margin: 3rem 0 clamp(4rem, 8vw, 8rem); }
.manifesto h2, .platform-heading h2, .closing h2 { font-size: clamp(3rem, 6.3vw, 6.8rem); line-height: .94; letter-spacing: -.065em; font-weight: 600; }
.manifesto h2 span { color: var(--cyan-dark); }
.manifesto-copy > p { margin: 0 0 .4rem; font-size: clamp(1.1rem, 1.8vw, 1.45rem); color: #50596a; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #cfd3da; }
.principles article { padding: 1.5rem clamp(1rem, 3vw, 3rem) 0 0; }
.principles article + article { border-left: 1px solid #cfd3da; padding-left: clamp(1.5rem, 3vw, 3rem); }
.principle-number { color: var(--cyan-dark); font: 700 .75rem var(--display); letter-spacing: .08em; }
.principles h3 { margin: 4.5rem 0 .8rem; font-size: clamp(1.45rem, 2vw, 2rem); letter-spacing: -.035em; }
.principles p { margin: 0; color: #5f6776; max-width: 340px; }

.platforms { background: var(--navy); padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 5vw, 5rem); }
.platform-heading { display: grid; grid-template-columns: .7fr 1.4fr .7fr; gap: 2rem; align-items: end; margin-bottom: clamp(4rem, 7vw, 7rem); }
.platform-heading h2 { grid-column: 2; }
.platform-heading > p:last-child { color: var(--muted); margin: 0; max-width: 300px; }
.platform-list { border-top: 1px solid var(--line); }
.platform-card { --card-accent: var(--coral); --card-bright: var(--coral-bright); min-height: 275px; display: grid; grid-template-columns: .28fr 1.4fr .42fr; gap: 2rem; align-items: center; padding: 2.7rem 1rem; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; isolation: isolate; overflow: hidden; transition: color .3s ease; }
.platform-card::before { content: ""; position: absolute; inset: 100% 0 0; background: var(--card-accent); z-index: -1; transition: inset .4s cubic-bezier(.2,.75,.25,1); }
.platform-card:hover::before, .platform-card:focus-visible::before { inset: 0; }
.platform-card:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.platform-scribe { --card-accent: #1fa0d0; --card-bright: #3ab6e0; }
.platform-service { --card-accent: #e65050; --card-bright: #f06a6a; }
.platform-b2b { --card-accent: #009a66; --card-bright: #00b37a; }
.card-index { align-self: start; font: 700 .8rem var(--display); color: var(--card-bright); transition: color .25s ease; }
.platform-card:hover .card-index, .platform-card:focus-visible .card-index { color: var(--white); }
.card-kicker { margin: 0 0 .75rem; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; transition: color .25s ease; }
.platform-card:hover .card-kicker, .platform-card:focus-visible .card-kicker { color: rgba(255,255,255,.76); }
.card-main h3 { font-size: clamp(2.6rem, 5vw, 5rem); line-height: .95; letter-spacing: -.06em; }
.card-main h3 span { color: var(--card-bright); transition: color .25s ease; }
.platform-card:hover h3 span, .platform-card:focus-visible h3 span { color: var(--white); }
.card-main > p:last-child { color: #aeb6c5; margin: 1.2rem 0 0; max-width: 660px; font-size: 1.05rem; transition: color .25s ease; }
.platform-card:hover .card-main > p:last-child, .platform-card:focus-visible .card-main > p:last-child { color: rgba(255,255,255,.88); }
.card-action { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 1.6rem; font-size: .85rem; font-weight: 700; }
.card-action b { width: 4rem; height: 4rem; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; transition: transform .3s ease, background .3s ease; }
.platform-card:hover .card-action b, .platform-card:focus-visible .card-action b { transform: rotate(45deg); background: var(--white); color: var(--card-accent); }

.closing { position: relative; background: var(--cyan-dark); min-height: 72vh; padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 5vw, 5rem); color: var(--white); overflow: hidden; }
.closing .section-label { color: rgba(255,255,255,.7); }
.closing h2 { max-width: 1000px; margin: 2.5rem 0 2rem; }
.closing > p:not(.section-label) { max-width: 560px; font-size: 1.2rem; color: rgba(255,255,255,.82); }
.closing-link { display: inline-flex; gap: .8rem; align-items: center; margin-top: 2rem; padding: 1rem 1.25rem; background: var(--navy); border-radius: 999px; text-decoration: none; font-weight: 700; }
.closing-link span { color: var(--cyan-bright); }
.closing-mark { position: absolute; width: min(38vw, 480px); right: 4vw; bottom: -10%; opacity: .2; transform: rotate(-12deg); }
.closing-mark svg { width: 100%; }
.closing-mark .cube-top, .closing-mark .cube-left, .closing-mark .cube-right { fill: var(--white); }

footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 1rem; padding: 2rem clamp(1.25rem, 5vw, 5rem); background: #0c1321; color: #929bab; font-size: .8rem; }
footer p { margin: 0; text-align: center; }
footer p:last-child { text-align: right; }
footer a { color: var(--white); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--cyan-bright); }

.legal-page { background: var(--paper); color: var(--ink); }
.legal { max-width: 760px; margin: 0 auto; padding: 8.5rem clamp(1.25rem, 5vw, 5rem) 5rem; }
.legal .section-label { color: var(--cyan-dark); }
.legal h1 { margin: 1rem 0 1rem; font-size: clamp(3.2rem, 7vw, 5.4rem); line-height: .92; letter-spacing: -.06em; color: var(--navy); }
.legal-updated { margin: 0 0 2.5rem; color: #6b7382; font-size: .95rem; }
.legal h2 { margin: 2.4rem 0 .7rem; font-size: 1.35rem; letter-spacing: -.03em; color: var(--navy); }
.legal p, .legal li { color: #3e4656; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal li { margin: .35rem 0; }
.legal a { color: var(--cyan-dark); font-weight: 600; }
.legal-platforms { display: grid; gap: .75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.legal-platforms a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid #d5d9e1; border-radius: .7rem; text-decoration: none; background: var(--white); }
.legal-platforms a:hover, .legal-platforms a:focus-visible { border-color: var(--cyan-dark); }
.legal-platforms span { color: #6b7382; font-weight: 500; }
.footer-brand .brand-mark { width: 30px; height: 30px; }
.footer-brand .brand-type { color: var(--white); font-size: .9rem; }

@keyframes float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (max-width: 900px) {
  nav { display: none; }
  .menu-button { display: grid; gap: 5px; width: 44px; height: 44px; place-content: center; border: 0; background: transparent; color: var(--white); }
  .menu-button span:not(.sr-only) { width: 22px; height: 2px; background: currentColor; transition: transform .2s ease; }
  .mobile-menu { position: absolute; left: 1rem; right: 1rem; top: calc(100% + .5rem); background: var(--white); color: var(--ink); padding: .7rem; border-radius: .65rem; box-shadow: 0 18px 60px rgba(0,0,0,.3); }
  .mobile-menu:not([hidden]) { display: grid; }
  .mobile-menu a { padding: .85rem 1rem; text-decoration: none; font-weight: 700; }
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: auto; }
  .hero-copy { padding-top: 2rem; }
  .hero-cube { width: min(78vw, 430px); }
  .hero-footer { grid-column: 1; }
  .manifesto-copy { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .principles article { padding: 1.5rem 0 2.5rem; }
  .principles article + article { border-left: 0; border-top: 1px solid #cfd3da; padding-left: 0; }
  .principles h3 { margin-top: 2.5rem; }
  .platform-heading { grid-template-columns: 1fr; }
  .platform-heading h2 { grid-column: auto; }
  .platform-card { grid-template-columns: .18fr 1fr; }
  .card-action { grid-column: 2; justify-self: start; flex-direction: row; align-items: center; }
}

@media (max-width: 620px) {
  .site-header { height: 72px; }
  .brand-mark { width: 36px; height: 36px; }
  .hero { padding-top: 8rem; }
  .hero-grid { inset: 72px 0 0; background-size: 54px 54px; }
  h1 { font-size: clamp(3.7rem, 19vw, 5.2rem); }
  .eyebrow { flex-direction: column; gap: .35rem; }
  .eyebrow span + span::before { display: none; }
  .hero-footer { align-items: flex-start; flex-direction: column; }
  .platform-card { grid-template-columns: 1fr; padding: 2.2rem .2rem; }
  .card-action { grid-column: 1; }
  .card-action b { width: 3rem; height: 3rem; }
  .closing-mark { width: 65vw; right: -12vw; }
  footer { grid-template-columns: 1fr; justify-items: start; }
  footer p, footer p:last-child { text-align: left; }
  .legal { padding-top: 7.5rem; }
}