:root { color-scheme: dark; font-family: Inter, "Noto Sans SC", "PingFang SC", sans-serif; color: #f3f7f8; background: #03050a; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: radial-gradient(ellipse 80% 70% at 77% 20%, #123a5d 0, #091526 31%, #03050a 72%); } a { color: inherit; text-decoration: none; } #storm { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .84; mix-blend-mode: screen; } .noise { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); } .shell { width: min(1180px, calc(100% - 56px)); margin: auto; position: relative; z-index: 2; }
.nav { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff22; }.brand { display: flex; gap: 11px; align-items: center; font-size: 13px; letter-spacing: .19em; font-weight: 700; }.brand-mark { position: relative; width: 22px; height: 22px; }.brand-mark i { position: absolute; width: 12px; height: 12px; border: 1px solid #9acaff; transform: rotate(45deg); }.brand-mark i:nth-child(1) { left: 0; top: 5px; }.brand-mark i:nth-child(2) { left: 6px; top: 0; border-color: #bbffdc; }.brand-mark i:nth-child(3) { left: 10px; top: 9px; border-color: #5975ff; }.nav nav { display: flex; gap: 26px; color: #afbac8; font-size: 12px; }.nav nav a:hover { color: white; }.nav-cta { font-size: 12px; padding: 10px 15px; border: 1px solid #ffffff38; border-radius: 999px; }.nav-cta span, b { color: #9ff5cf; }
.hero { min-height: calc(100svh - 88px); padding: clamp(108px, 15vh, 165px) 0 42px; }.eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; color: #c2cddd; font-size: 10px; letter-spacing: .18em; font-weight: 700; }.eyebrow span { display: block; width: 27px; height: 1px; background: #83f6c4; box-shadow: 0 0 12px #83f6c4; }.hero h1, h2 { letter-spacing: -.065em; font-weight: 500; }.hero h1 { margin: 22px 0; font-size: clamp(66px, 10.2vw, 146px); line-height: .88; text-shadow: 0 15px 60px #020711; }.hero h1 em, h2 em { color: #b8d4ff; font-style: normal; text-shadow: 0 0 35px #6c83cf9c; }.hero-copy { max-width: 460px; color: #d3dde8; font-size: 16px; line-height: 1.75; text-shadow: 0 4px 22px #03050a; }.hero-actions { display: flex; gap: 12px; margin-top: 33px; }.button { display: inline-block; padding: 14px 20px; border-radius: 3px; font-size: 13px; transition: transform .2s; }.button:hover { transform: translateY(-2px); }.primary { color: #061019; background: #9ff5cf; box-shadow: 0 0 25px #76ffcd42; }.primary span { margin-left: 22px; }.quiet { color: #e4e9f0; border: 1px solid #ffffff40; background: #03060a33; }.hero-meta { display: flex; justify-content: space-between; margin-top: clamp(72px, 14vh, 150px); color: #8997a9; font: 10px monospace; letter-spacing: .1em; }.scroll { display: flex; gap: 9px; align-items: center; }.scroll b { width: 34px; height: 1px; background: #8290a2; }
.statement, .principles, .contact { padding: 130px 0; border-top: 1px solid #ffffff1e; }.statement { display: grid; grid-template-columns: .45fr 1.15fr 1fr; gap: 35px; }.statement-mark, .card-index, .case-tag { color: #91a0b4; font: 11px monospace; }.statement h2, .section-heading h2, .case h2, .principles h2, .contact h2 { margin: 20px 0 0; font-size: clamp(40px, 5.25vw, 76px); line-height: .99; }.statement-copy, .section-heading > p:last-child, .case-summary, .principle-grid > div { color: #aebac8; font-size: 15px; line-height: 1.85; align-self: end; }
.case-intro { margin: 18px 0 0; color: #aebac8; font-size: 15px; line-height: 1.85; max-width: 620px; }
.loop { padding: 0 0 135px; }.loop > .eyebrow { margin-bottom: 24px; }.loop-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #ffffff2b; border-bottom: 1px solid #ffffff2b; }.loop-grid article { min-height: 290px; padding: 22px 18px; border-right: 1px solid #ffffff20; background: linear-gradient(150deg, #12223a5e, #060a1155); }.loop-grid article:last-child { border-right: 0; }.loop-grid span { color: #92f8cd; font: 11px monospace; letter-spacing: -.01em; }.loop-grid h3 { margin: 38px 0 12px; font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.03em; }.loop-grid p { color: #a9b5c4; font-size: 12.5px; line-height: 1.65; }
.solutions { padding: 120px 0 145px; border-top: 1px solid #ffffff1e; }.section-heading { display: grid; grid-template-columns: .7fr 1.2fr .9fr; align-items: end; gap: 25px; }.section-heading h2 { margin: 0; }.solution-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; margin-top: 55px; }.solution-card { position: relative; min-height: 418px; overflow: hidden; padding: 24px; border: 1px solid #ffffff24; background: #0a1220a3; transition: transform .3s, border-color .3s; }.solution-card:hover { transform: translateY(-6px); border-color: #a2f7d3aa; }.card-index { position: relative; z-index: 2; }.card-body { position: absolute; z-index: 2; inset: auto 25px 27px; }.card-body h3 { margin: 0 0 12px; font-size: 34px; letter-spacing: -.05em; font-weight: 500; }.card-body p { max-width: 360px; color: #b5c0cf; font-size: 13px; line-height: 1.7; }.card-body a, .card-body span { display: block; margin-top: 21px; font-size: 12px; }.signal-lines { position: absolute; inset: 70px -55px auto; height: 150px; transform: rotate(-12deg); background: repeating-linear-gradient(7deg, transparent 0 18px, #71f5c230 19px 20px, transparent 21px 34px); }.signal-lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: #9ff5cf75; box-shadow: 0 0 18px #9ff5cf; }.signal-lines i:nth-child(1) { left: 29%; }.signal-lines i:nth-child(2) { left: 48%; }.signal-lines i:nth-child(3) { left: 66%; }.signal-lines i:nth-child(4) { left: 80%; }.card-orbit { position: absolute; width: 245px; height: 245px; border: 1px solid #87c6ec; border-radius: 50%; top: 44px; left: 50%; transform: translateX(-50%) rotate(-18deg); box-shadow: inset 0 0 55px #1a5f8245, 0 0 55px #225e8240; }.card-orbit:before, .card-orbit:after { content: ""; position: absolute; border-radius: 50%; border: 1px solid #7ee4bf; inset: 35px; }.card-orbit:after { inset: 72px; border-color: #7279d8; }.card-orbit i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #b9ffdf; box-shadow: 0 0 16px 5px #68ffc877; }.card-orbit i:nth-child(1) { top: 20px; left: 105px; }.card-orbit i:nth-child(2) { top: 130px; left: 226px; background: #9baaff; }.card-orbit i:nth-child(3) { top: 220px; left: 80px; }.terrain { position: absolute; inset: 0; opacity: .9; background: linear-gradient(150deg, transparent 15%, #31598f32 16%, transparent 17%), linear-gradient(30deg, transparent 42%, #52d6aa28 43%, transparent 44%); background-size: 48px 38px; transform: perspective(300px) rotateX(50deg) scale(1.65); transform-origin: center 40%; }
.case { padding: 122px 0 140px; border-top: 1px solid #ffffff1e; }.case-heading, .case-layout { display: flex; justify-content: space-between; }.case-layout { gap: 60px; align-items: end; margin-top: 30px; }.case-layout > div { flex: 1; }.case-kicker { color: #9ff5cf; font: 11px monospace; letter-spacing: .12em; }.case h2 { margin: 18px 0 0; }.case-summary { max-width: 445px; }.text-link { display: inline-block; margin-top: 22px; color: white; font-size: 13px; }.case-flow { display: flex; align-items: center; gap: 14px; margin-top: 65px; padding: 23px 0; color: #d1d9e2; font-size: 13px; border-top: 1px solid #ffffff2e; border-bottom: 1px solid #ffffff2e; }.case-flow i { flex: 1; height: 1px; background: linear-gradient(90deg, #9ff5cf, #7599ff); }.case-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; margin-top: 30px; }.case-values b { color: white; font-size: 16px; }.case-values p { color: #aeb9c9; font-size: 13px; line-height: 1.7; }
.principle-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; margin-top: 30px; }.principle-grid h2 { margin: 0; }.principle-grid p { margin: 0 0 25px; }.principle-grid b { display: block; margin-bottom: 4px; color: #eaf7f0; font-size: 14px; }.contact { text-align: center; }.contact .eyebrow { justify-content: center; }.contact h2 { margin: 24px 0 34px; } footer { display: flex; justify-content: space-between; padding: 23px 0 30px; border-top: 1px solid #ffffff1e; color: #718094; font: 10px monospace; letter-spacing: .1em; }
@media (max-width: 800px) { .shell { width: min(100% - 34px, 1180px); }.nav { height: 70px; }.nav nav { display: none; }.nav-cta { padding: 8px 11px; font-size: 11px; }.hero { min-height: calc(100svh - 70px); padding-top: 18vh; }.hero-copy br { display: none; }.hero-actions { flex-direction: column; align-items: flex-start; }.hero-meta .scroll { display: none; }.statement, .section-heading, .principle-grid { display: block; }.statement > * + *, .section-heading > * + *, .principle-grid > * + * { margin-top: 25px; }.statement, .solutions, .principles, .contact, .case { padding: 82px 0; }.loop { padding-bottom: 82px; }.loop-grid, .solution-grid, .case-values { grid-template-columns: 1fr; }.loop-grid article { min-height: 205px; border-right: 0; border-bottom: 1px solid #ffffff20; }.loop-grid article:last-child { border-bottom: 0; }.loop-grid h3 { margin-top: 25px; }.solution-card { min-height: 350px; }.case-layout { display: block; }.case-summary { margin-top: 28px; }.case-flow { display: grid; grid-template-columns: 1fr; gap: 12px; }.case-flow i { width: 1px; height: 22px; margin-left: 4px; }.case-values { gap: 16px; }.case-values article { padding-bottom: 12px; border-bottom: 1px solid #ffffff20; } }