:root { color-scheme: dark; font-family: Inter, "Noto Sans SC", "PingFang SC", sans-serif; background: #03050a; color: #f5f5f1; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: radial-gradient(ellipse 70% 90% at 79% 28%, #153563 0, #0a1222 28%, #050812 59%, #03050a 100%); } a { color: inherit; text-decoration: none; }
#storm { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .98; mix-blend-mode: screen; } .noise { position: fixed; inset: 0; pointer-events: none; opacity: .065; z-index: 1; 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: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.12); }.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; display: block; }.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: 30px; font-size: 13px; color: #a7afbc; }.nav nav a:hover { color: white; }.nav-cta { font-size: 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; padding: 10px 16px; }.nav-cta span { color: #aaffd7; margin-left: 8px; }
.hero { min-height: calc(100svh - 92px); padding: clamp(105px, 16vh, 170px) 0 42px; }.eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .19em; color: #c5d2e0; font-weight: 700; }.eyebrow span { width: 26px; height: 1px; background: #83f6c4; box-shadow: 0 0 10px #83f6c4; }.hero h1, h2 { letter-spacing: -.065em; font-weight: 500; margin: 22px 0; }.hero h1 { font-size: clamp(58px, 9.4vw, 136px); line-height: .94; text-shadow: 0 12px 60px rgba(2, 7, 19, .88); }.hero h1 em, h2 em { font-style: normal; color: #b9d3ff; text-shadow: 0 0 32px rgba(104,130,255,.55); }.hero-copy { color: #d0d8e5; line-height: 1.75; font-size: 16px; text-shadow: 0 3px 22px #03050a; }.hero-actions { display: flex; gap: 12px; margin-top: 34px; }.button { padding: 13px 20px; border-radius: 3px; font-size: 13px; transition: transform .2s, background .2s; }.button:hover { transform: translateY(-2px); }.primary { color: #061019; background: #9ff5cf; box-shadow: 0 0 26px rgba(118, 255, 205, .24); }.primary span { margin-left: 22px; }.quiet { border: 1px solid rgba(255,255,255,.22); color: #dce0e8; background: rgba(3, 6, 13, .16); }.hero-meta { margin-top: clamp(75px, 16vh, 170px); display: flex; justify-content: space-between; color: #8b97aa; font: 10px/1 monospace; letter-spacing: .12em; }.scroll { display: flex; align-items: center; gap: 9px; }.scroll b { display: block; width: 34px; height: 1px; background: #778090; }
.solutions { padding: 118px 0 150px; }.section-heading { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: end; gap: 24px; }.section-heading h2, .about h2 { font-size: clamp(42px, 5.5vw, 78px); line-height: .98; margin: 0; }.section-heading > p:last-child { color: #9ba5b5; font-size: 14px; line-height: 1.8; }.product-grid { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr; gap: 14px; margin-top: 55px; }.product-card { min-height: 400px; padding: 23px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(14,20,31,.58); transition: transform .35s, border-color .35s; }.product-card:hover { transform: translateY(-6px); border-color: rgba(171,244,215,.7); }.card-index { position: absolute; right: 20px; top: 5px; color: #657081; font: 12px monospace; }.card-body { position: absolute; inset: auto 25px 26px; z-index: 1; }.card-kicker { color: #9ff5cf; font: 10px monospace; letter-spacing: .12em; }.card-body h3 { font-size: 34px; letter-spacing: -.04em; margin: 11px 0; font-weight: 500; }.card-body > p:not(.card-kicker) { color: #aeb6c3; font-size: 13px; line-height: 1.65; max-width: 315px; }.card-link { display: block; margin-top: 22px; font-size: 12px; }.card-link b { margin-left: 8px; color: #aaffd7; }.card-orbit { position: absolute; width: 250px; height: 250px; border: 1px solid #87c6ec; border-radius: 50%; top: 35px; 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: 229px; background: #9baaff; }.card-orbit i:nth-child(3) { top: 220px; left: 80px; }.terrain { position: absolute; inset: 0; background: linear-gradient(150deg, transparent 15%, #31598f2c 16%, transparent 17%), linear-gradient(30deg, transparent 42%, #52d6aa22 43%, transparent 44%); background-size: 48px 38px; transform: perspective(300px) rotateX(50deg) scale(1.65); transform-origin: center 40%; opacity: .92; }.future { background: linear-gradient(145deg, #111827a8, #0c1019c0); }.signal { position: absolute; left: 26px; top: 65px; width: 100px; height: 100px; border: 1px solid #b1c5ff80; border-radius: 50%; animation: ping 3s ease-out infinite; }.signal i { position: absolute; inset: 20px; border: 1px solid #9ff5cfa1; border-radius: 50%; }.signal i:nth-child(2) { inset: 40px; background: #aaffd7; box-shadow: 0 0 22px #aaffd7; }.signal i:nth-child(3) { inset: -20px; border-color: #8497ff45; } @keyframes ping { 50% { transform: scale(1.08); opacity: .6; } }
.about { padding: 104px 0 120px; border-top: 1px solid rgba(255,255,255,.13); }.about > div { display: flex; justify-content: space-between; align-items: end; margin-top: 30px; }.about > div p { max-width: 360px; margin: 0 0 4px; color: #aab3c0; line-height: 1.8; font-size: 15px; } footer { display: flex; justify-content: space-between; padding: 23px 0 30px; border-top: 1px solid rgba(255,255,255,.13); color: #687282; font: 10px monospace; letter-spacing: .11em; }
@media (max-width: 760px) { .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 { font-size: 14px; }.hero-copy br { display: none; }.hero-actions { flex-direction: column; align-items: flex-start; }.section-heading { display: block; }.section-heading h2 { margin: 25px 0; }.section-heading > p:last-child { margin-top: 22px; }.product-grid { grid-template-columns: 1fr; margin-top: 38px; }.product-card { min-height: 350px; }.about { padding: 80px 0; }.about > div { display: block; }.about > div p { margin-top: 30px; }.hero-meta .scroll { display: none; } }