:root { --ink:#eff5fb; --muted:#a1b0c0; --line:rgba(159,194,229,.17); --blue:#228ff3; --cyan:#58d5ff; --amber:#e4b166; --canvas:#06090f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--canvas); }
body { min-width:320px; margin:0; overflow-x:hidden; background:radial-gradient(70% 48% at 90% -7%, rgba(29,111,219,.24), transparent 68%), radial-gradient(38% 34% at 7% 48%, rgba(201,125,36,.07), transparent 74%), var(--canvas); color:var(--ink); font-family:Inter, Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.nav { display:flex; width:min(1230px, calc(100% - 48px)); height:80px; align-items:center; justify-content:space-between; margin:auto; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; }.brand-wordmark { display:block; width:92px; height:auto; }.brand i { width:1px; height:22px; background:#60748a; }.brand span { color:#a9bacb; font-size:10px; font-weight:700; letter-spacing:.23em; }
.nav-links { display:flex; align-items:center; gap:24px; color:#adbac8; font-size:12px; }.nav-links a:hover { color:#fff; }.nav-open { padding:9px 11px; border:1px solid rgba(65,154,244,.65); border-radius:5px; background:rgba(19,92,188,.23); color:#d8edff; box-shadow:inset 0 0 18px rgba(0,106,246,.12); }.nav-open b { margin-left:8px; color:#78c7ff; }
.hero { position:relative; display:flex; width:min(1230px, calc(100% - 48px)); min-height:650px; align-items:center; margin:22px auto 0; padding:58px 62px; overflow:hidden; border:1px solid rgba(96,161,241,.31); border-radius:16px; background:#05070c; box-shadow:0 26px 72px rgba(0,0,0,.4); }
.hero::before { position:absolute; z-index:1; inset:0; content:""; pointer-events:none; background:linear-gradient(90deg, rgba(3,6,11,.98) 0%, rgba(3,6,11,.91) 37%, rgba(3,6,11,.43) 64%, rgba(3,6,11,.08) 100%); }
.hero-copy { position:relative; z-index:2; max-width:565px; }.hero-visual { position:absolute; z-index:0; inset:0; }.hero-visual img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; filter:contrast(1.06) saturate(1.04); }
.eyebrow { margin:0; color:#9aacbd; font-size:10px; font-weight:800; letter-spacing:.14em; }.eyebrow i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px rgba(228,177,102,.75); }.hero h1 { margin:15px 0 20px; font-size:clamp(48px, 5.1vw, 75px); letter-spacing:-.065em; line-height:.96; }.hero h1 em { color:#75c4ff; font-style:normal; }.lead { max-width:520px; color:#bac7d2; font-size:17px; line-height:1.55; }
.hero-actions { display:flex; gap:10px; margin-top:30px; }.button { display:inline-flex; align-items:center; gap:20px; padding:13px 16px; border:1px solid var(--line); border-radius:6px; font-size:12px; font-weight:700; transition:transform .2s ease, border-color .2s ease; }.button:hover { transform:translateY(-2px); }.button.primary { border-color:#3d9fff; background:linear-gradient(135deg, #075dda, #1487f2); box-shadow:0 12px 32px rgba(0,75,230,.38), inset 0 1px 0 rgba(255,255,255,.15); color:#fff; }.button.primary span { font-size:18px; line-height:10px; }.button.secondary { border-color:rgba(139,184,236,.24); background:#0c131d; color:#c8d4df; }
.proof { display:flex; flex-wrap:wrap; gap:15px; margin-top:34px; color:#8392a0; font-size:10px; }.proof span { padding-right:15px; border-right:1px solid var(--line); }.proof b { color:#e3edf3; font-size:10px; letter-spacing:.07em; }
.feature-band { display:grid; grid-template-columns:repeat(3, 1fr); width:min(1230px, calc(100% - 48px)); margin:0 auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.feature-band article { min-height:225px; padding:30px 33px 30px 0; margin-right:28px; border-right:1px solid var(--line); }.feature-band article:last-child { margin:0; border:0; }.number { color:#67c3ff; font:11px ui-monospace, SFMono-Regular, Menlo, monospace; }.feature-band h2 { margin:15px 0 10px; font-size:19px; letter-spacing:-.035em; }.feature-band p { margin:0; color:#9eafbe; font-size:13px; line-height:1.55; }
.systems { display:grid; grid-template-columns:.78fr 1.22fr; gap:86px; width:min(1060px, calc(100% - 48px)); margin:0 auto; padding:110px 0; }.systems h2 { margin:10px 0 0; font-size:46px; letter-spacing:-.06em; line-height:.98; }.system-list { border-top:1px solid var(--line); }.system-list article { display:grid; grid-template-columns:65px 1fr; gap:17px; padding:20px 0; border-bottom:1px solid var(--line); }.system-list > article > span { align-self:start; color:#71c7ff; font:11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.05em; }.system-list h3 { margin:0 0 6px; font-size:16px; }.system-list p { max-width:470px; margin:0; color:#9eafbd; font-size:13px; line-height:1.5; }
.cta { display:flex; width:min(1230px, calc(100% - 48px)); align-items:center; justify-content:space-between; gap:35px; margin:0 auto 48px; padding:44px; border:1px solid rgba(58,145,246,.48); border-radius:10px; background:linear-gradient(105deg, rgba(0,78,230,.34), rgba(5,11,22,.96) 55%); box-shadow:inset 0 1px 0 rgba(117,179,255,.12), 0 22px 55px rgba(0,0,0,.25); }.cta h2 { margin:8px 0; font-size:31px; letter-spacing:-.05em; }.cta p:not(.eyebrow) { max-width:570px; margin:0; color:#b3c0cc; font-size:13px; line-height:1.5; }
footer { display:flex; width:min(1230px, calc(100% - 48px)); justify-content:space-between; margin:auto; padding:18px 0 30px; border-top:1px solid var(--line); color:#738292; font-size:10px; }
@media (max-width:760px) { .nav { width:calc(100% - 30px); height:68px; }.nav-links > a:not(.nav-open) { display:none; }.hero { display:block; width:calc(100% - 30px); min-height:610px; padding:302px 28px 36px; }.hero::before { background:linear-gradient(180deg, rgba(3,6,11,.04) 0%, rgba(3,6,11,.37) 40%, rgba(3,6,11,.98) 70%); }.hero h1 { font-size:48px; }.feature-band { grid-template-columns:1fr; width:calc(100% - 30px); }.feature-band article { min-height:0; padding:26px 0; margin:0; border-right:0; border-bottom:1px solid var(--line); }.feature-band article:last-child { border-bottom:0; }.systems { grid-template-columns:1fr; gap:35px; width:calc(100% - 30px); padding:70px 0; }.systems h2 { font-size:41px; }.cta { display:block; width:calc(100% - 30px); padding:30px; }.cta .button { margin-top:25px; } footer { width:calc(100% - 30px); } }