:root { --ink: #080d10; --steel: #142028; --line: rgba(185, 212, 219, .18); --paper: #eef5f5; --muted: #9eb0b6; --cyan: #8eeef4; color: var(--paper); background: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
body::before { position: fixed; z-index: 10; inset: 0; content: ""; pointer-events: none; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 90px 90px; mask-image: linear-gradient(to bottom, black, transparent 72%); }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
.site-header { position: fixed; z-index: 20; top: 0; left: 50%; display: flex; width: min(1440px, calc(100% - 64px)); height: 88px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(8,13,16,.93), rgba(8,13,16,.72)); backdrop-filter: blur(14px); transform: translateX(-50%); }
.wordmark, .footer-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--paper); font-size: .76rem; font-weight: 800; letter-spacing: 0; }
.brand-mark { display: block; width: 21px; height: 21px; filter: drop-shadow(0 0 8px rgba(142,238,244,.28)); }
.section-progress { display: flex; align-items: center; gap: 13px; color: #b5c6cb; font-size: .62rem; font-weight: 760; letter-spacing: 0; }
.progress-rail { display: flex; gap: 5px; }
.progress-rail i { display: block; width: 18px; height: 2px; background: rgba(207,231,235,.25); transition: background .35s ease, box-shadow .35s ease; }
.progress-rail i.is-active { background: var(--cyan); box-shadow: 0 0 12px rgba(142,238,244,.6); }
.hero { position: relative; min-height: max(760px, 100svh); overflow: hidden; isolation: isolate; background: #070b0e; }
.hero-image { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(calc(1.035 + var(--hero-progress, 0) * -.035)) translateX(calc(var(--hero-progress, 0) * -2%)); will-change: transform; }
.hero-grid, .stage-grid { position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(179,220,229,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(179,220,229,.12) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, transparent, black 26%, transparent 82%); opacity: .34; }
.hero-vignette { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(5,9,12,.98) 0%, rgba(5,9,12,.8) 28%, rgba(5,9,12,.13) 68%), linear-gradient(0deg, rgba(5,9,12,.82), transparent 48%); }
.hero-frame { position: absolute; z-index: -1; top: 14%; bottom: -12%; width: min(16vw, 260px); border: 1px solid rgba(166,218,226,.22); transform: skewX(-13deg); }
.hero-frame-left { left: -7%; border-left: 0; }
.hero-frame-right { right: -7%; border-right: 0; }
.hero-content { position: relative; width: min(1440px, calc(100% - 64px)); padding: clamp(195px, 24vh, 300px) 0 142px; margin: auto; }
.eyebrow { margin-bottom: 19px; color: #9cced4; font-size: .66rem; font-weight: 780; letter-spacing: 0; text-transform: uppercase; }
h1 { max-width: 900px; margin-bottom: 30px; color: #f1f6f7; font-size: clamp(4rem, 8vw, 9.3rem); font-weight: 700; line-height: .82; letter-spacing: 0; text-shadow: 0 12px 45px rgba(0,0,0,.45); }
.hero-lead { max-width: 550px; margin: 0; color: #c8d6d9; font-size: clamp(1rem, 1.35vw, 1.17rem); line-height: 1.72; }
.hero-coordinates { position: absolute; right: max(32px, calc((100vw - 1440px) / 2)); bottom: 42px; display: grid; gap: 8px; color: rgba(210,232,235,.7); font-size: .61rem; font-weight: 720; letter-spacing: 0; text-align: right; }
.scroll-trigger { position: absolute; right: max(32px, calc((100vw - 1440px) / 2)); bottom: 94px; width: 42px; height: 42px; border: 1px solid rgba(184,226,234,.5); color: #d9f7f8; cursor: pointer; background: rgba(6,15,18,.35); transition: background .25s ease, transform .25s ease; }
.scroll-trigger:hover { background: rgba(105,213,224,.16); transform: translateY(3px); }.scroll-trigger span::before { content: ""; position: absolute; width: 8px; height: 8px; top: 13px; left: 16px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.systems-intro { display: grid; width: min(1240px, calc(100% - 64px)); grid-template-columns: 1.2fr .8fr; gap: 48px; padding: clamp(100px, 13vw, 190px) 0 clamp(80px, 10vw, 140px); margin: auto; }
.systems-intro .eyebrow { grid-column: 1 / -1; margin: 0; }.systems-intro h2, .approach h2 { margin: 0; color: #ebf2f2; font-size: clamp(2.8rem, 5vw, 5.8rem); line-height: .88; letter-spacing: 0; }.systems-intro > p:last-child { max-width: 420px; align-self: end; margin: 0; color: #aebec3; line-height: 1.72; }
.stages { overflow: clip; }
.stage { --accent: #8eeef4; --accent-rgb: 142,238,244; position: relative; min-height: min(920px, 100svh); overflow: hidden; isolation: isolate; background: #0a1115; }
.stage-tracefade { --accent: #99ded0; --accent-rgb: 153,222,208; background: #0b1516; }.stage-aether { --accent: #e3bb78; --accent-rgb: 227,187,120; background: #17130d; }.stage-echolotl { --accent: #88f0df; --accent-rgb: 136,240,223; background: #07151d; }.stage-cube { --accent: #f0a06a; --accent-rgb: 240,160,106; background: #18110e; }
.stage-atmosphere { position: absolute; z-index: -4; inset: -8%; opacity: .8; background: radial-gradient(circle at 65% 48%, rgba(var(--accent-rgb), .18), transparent 26%), url("assets/ravenimbus-signal-field.png") center / cover; transform: scale(calc(1.02 + var(--stage-progress, .5) * .08)) translateY(calc((var(--stage-progress, .5) - .5) * -5%)); filter: hue-rotate(var(--hue, 0deg)); }
.stage-tracefade .stage-atmosphere { --hue: 20deg; }.stage-aether .stage-atmosphere { --hue: 135deg; }.stage-echolotl .stage-atmosphere { opacity: .92; background: radial-gradient(circle at 70% 43%, rgba(79, 231, 209, .28), transparent 27%), radial-gradient(circle at 25% 66%, rgba(170, 115, 255, .15), transparent 30%), linear-gradient(110deg, #06121a, #102b39); filter: none; }.stage-cube .stage-atmosphere { --hue: 165deg; }
.stage::after { position: absolute; z-index: -3; inset: 0; content: ""; background: linear-gradient(90deg, rgba(6,11,14,.93), rgba(6,11,14,.42) 48%, rgba(6,11,14,.78)), linear-gradient(0deg, rgba(6,11,14,.78), transparent 40%, rgba(6,11,14,.16)); }.stage-aether::after, .stage-cube::after { background: linear-gradient(90deg, rgba(15,12,8,.91), rgba(15,12,8,.38) 48%, rgba(15,12,8,.8)), linear-gradient(0deg, rgba(15,12,8,.75), transparent 42%); }.stage-echolotl::after { background: linear-gradient(90deg, rgba(3,14,21,.94), rgba(3,14,21,.4) 49%, rgba(3,14,21,.78)), linear-gradient(0deg, rgba(3,14,21,.8), transparent 44%); }
.stage-grid { z-index: -2; opacity: .18; background-size: 68px 68px; mask-image: linear-gradient(90deg, transparent 7%, black 45%, transparent 93%); }
.stage-shell { position: relative; display: grid; width: min(1320px, calc(100% - 64px)); min-height: min(920px, 100svh); grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr); gap: clamp(35px, 7vw, 120px); align-items: center; padding: 120px 0 78px; margin: auto; }.stage-shell-reverse { grid-template-columns: minmax(300px, .7fr) minmax(0, 1.45fr); }.stage-shell-reverse .stage-media { order: 2; }.stage-shell-reverse .stage-copy { order: 1; }
.stage-index { position: absolute; top: 72px; left: 0; color: rgba(213,235,238,.16); font-size: clamp(5rem, 12vw, 12rem); font-weight: 760; line-height: .7; letter-spacing: 0; }
.stage-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid rgba(216,240,243,.24); box-shadow: 18px 26px 0 rgba(0,0,0,.16), 0 30px 70px rgba(0,0,0,.35); transform: translateY(calc((var(--stage-progress, .5) - .5) * -22px)); will-change: transform; }
.stage-media::before { position: absolute; z-index: 2; inset: 11px; content: ""; border: 1px solid rgba(225,248,249,.18); pointer-events: none; }.stage-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease; }.stage:hover .stage-media img { transform: scale(1.04); filter: saturate(1.08) contrast(1.04); }.media-sheen { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.14), transparent 26%, transparent 69%, rgba(var(--accent-rgb),.22)); mix-blend-mode: screen; }.media-corner { position: absolute; z-index: 3; width: 24px; height: 24px; border-color: var(--accent); pointer-events: none; }.corner-top { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }.corner-bottom { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.stage-copy { position: relative; max-width: 420px; }.stage-kicker { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; color: var(--accent); font-size: .68rem; font-weight: 780; letter-spacing: 0; text-transform: uppercase; }.stage-kicker span { color: #d1dde0; }.stage h3 { margin-bottom: 23px; color: #f1f5f5; font-size: clamp(3rem, 5.3vw, 5.8rem); font-weight: 680; line-height: .82; letter-spacing: 0; }.stage-copy > p:not(.stage-kicker) { margin-bottom: 28px; color: #becacd; line-height: 1.73; }
ul { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; list-style: none; }li { padding: 7px 9px; border: 1px solid rgba(var(--accent-rgb), .38); color: #d4e1e2; font-size: .61rem; font-weight: 740; letter-spacing: 0; text-transform: uppercase; }.stage-coordinate { position: absolute; right: 0; bottom: 37px; color: rgba(218,237,239,.65); font-size: .6rem; font-weight: 760; line-height: 1.55; letter-spacing: 0; text-align: right; }
.approach { position: relative; min-height: 680px; overflow: hidden; isolation: isolate; display: grid; place-items: center; background: #091115; }.approach > img { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .66; }.approach::after { position: absolute; z-index: -2; inset: 0; content: ""; background: radial-gradient(circle at center, transparent, rgba(5,10,13,.86) 72%); }.approach-content { position: relative; width: min(920px, calc(100% - 64px)); text-align: center; }.approach-content .eyebrow { color: #a9dce0; }.approach h2 { margin-bottom: 30px; }.approach-content > p:last-child { max-width: 570px; margin: auto; color: #b8c8ca; line-height: 1.72; }.approach-mark { position: absolute; top: 14%; left: 50%; width: 110px; height: 110px; transform: translateX(-50%); opacity: .5; }.approach-mark img { width: 100%; height: 100%; filter: drop-shadow(0 0 25px rgba(142,238,244,.3)); }
footer { display: flex; width: min(1440px, calc(100% - 64px)); padding: 34px 0 46px; align-items: flex-end; justify-content: space-between; margin: auto; border-top: 1px solid var(--line); }.footer-contact { display: grid; gap: 6px; color: #8fa2a8; font-size: .74rem; line-height: 1.4; text-align: right; }.footer-contact span:last-child { color: #e4edef; }
@media (max-width: 780px) { body::before { background-size: 60px 60px; }.site-header, .hero-content, .systems-intro, .stage-shell, .approach-content, footer { width: min(100% - 32px, 650px); }.site-header { height: 70px; }.progress-label, .hero-coordinates, .stage-coordinate { display: none; }.hero { min-height: 730px; }.hero-image { object-position: 61% center; }.hero-vignette { background: linear-gradient(0deg, rgba(5,9,12,.92), rgba(5,9,12,.12) 76%), linear-gradient(90deg, rgba(5,9,12,.72), transparent); }.hero-content { padding-top: 180px; }.hero-frame { top: 7%; bottom: 5%; width: 31vw; }.hero-frame-left { left: -20%; }.hero-frame-right { right: -20%; }.scroll-trigger { right: 16px; bottom: 30px; }.systems-intro { grid-template-columns: 1fr; gap: 28px; padding: 100px 0 80px; }.systems-intro h2, .approach h2 { font-size: clamp(2.7rem, 13vw, 4.7rem); }.stage { min-height: 820px; }.stage-shell, .stage-shell-reverse { min-height: 820px; grid-template-columns: 1fr; gap: 34px; align-content: center; padding: 96px 0 72px; }.stage-shell-reverse .stage-media, .stage-shell-reverse .stage-copy { order: initial; }.stage-index { top: 62px; font-size: 6.8rem; }.stage-media { aspect-ratio: 4 / 3; }.stage h3 { font-size: clamp(3rem, 14vw, 4.7rem); }.stage-copy { max-width: none; }.stage-atmosphere { transform: none; }.approach { min-height: 580px; }footer { align-items: flex-start; flex-direction: column; gap: 24px; }.footer-contact { text-align: left; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.hero-image, .stage-atmosphere, .stage-media { transform: none !important; }.stage-media img { transition: none; }.stage:hover .stage-media img { transform: none; filter: none; }.scroll-trigger { transition: none; } }