:root { --ink:#04091b; --navy:#020a1b; --cyan:#58cfff; --blue:#057bf7; --white:#f8faff; --muted:#d1d8e6; }
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:95px }
body { margin:0; font-family:Arial,Helvetica,sans-serif; background:var(--ink); color:var(--white) }
.site-header { background:#040a1b; border-bottom:1px solid rgba(121,165,215,.17); position:relative; z-index:2; }
.header-inner { max-width:1550px; min-height:85px; padding:8px 4.8%; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:20px }
.brand { display:block; width:clamp(184px,20.4vw,322px); flex:none; line-height:0 }
.brand img { width:100%; height:auto; display:block; mix-blend-mode:screen }
.site-nav { display:flex; gap:clamp(22px,5.1vw,82px); align-items:center }
.site-nav a { color:#f7f8fd; text-decoration:none; font-size:clamp(15px,1.25vw,19px); padding:20px 4px 19px; border-bottom:2px solid transparent }
.site-nav a:hover,.site-nav a:focus-visible { border-bottom-color:var(--cyan) }
.splash { position:relative; overflow:hidden; background:radial-gradient(ellipse 60% 55% at 73% 46%,#071e40 0%,#04112a 55%,transparent 100%), linear-gradient(105deg,#02071a 10%,#030b20 65%,#071d3b); min-height:790px; }
.splash::after { content:''; position:absolute; inset:auto 0 0; height:27%; background:linear-gradient(to bottom,transparent,#030a1b 94%); pointer-events:none }
.hero-wave { pointer-events:none; position:absolute; width:min(66vw,1020px); height:min(44vw,640px); right:0; top:3%; background-image:url('assets/hero_wave_clean_cropped.jpg'); background-position:right center; background-repeat:no-repeat; background-size:cover; -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 10%,#000 40%); mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 10%,#000 40%); opacity:.98 }
.shell { position:relative; z-index:1; max-width:1500px; margin:0 auto; padding:54px clamp(22px,5.5vw,88px) 56px; }
.hero-copy { position:relative; max-width:980px; }
h1 { font-size:clamp(38px,3.75vw,64px); font-weight:750; line-height:1.14; letter-spacing:-.03em; margin:0 0 16px; text-wrap:balance; text-shadow:0 2px 3px #071124 }
.frost { color:#77cbff; background:linear-gradient(180deg,#d5f0ff,#64c4fe 60%,#5ba8e9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none }
.intro { font-size:clamp(16px,1.2vw,19px); line-height:1.56; max-width:680px; color:#e5eaf3; margin:0 0 18px; text-shadow:0 1px 6px #050c1f }
.tagline { border-left:3px solid #09aeff; padding-left:14px; font-size:clamp(17px,1.32vw,20px); line-height:1.55; color:#50ceff; margin:0 0 26px }
.ctas { display:flex; gap:20px; flex-wrap:wrap; margin:0 0 25px }
.button { display:inline-flex; min-height:60px; min-width:255px; justify-content:space-between; align-items:center; gap:24px; padding:15px 25px; border-radius:8px; font-weight:700; text-decoration:none; font-size:17px; transition:transform .15s ease,filter .15s ease }
.button:hover { transform:translateY(-2px); filter:brightness(1.15) }
.button-primary { color:white; background:linear-gradient(140deg,#0c9efa,#0161e9); box-shadow:0 1px 7px rgba(11,91,220,.45); border:1px solid #198cff }
.button-secondary { color:#fff; border:2px solid #00aeed; background:rgba(3,9,27,.67) }
.button span { font-size:27px; line-height:0; font-weight:400 }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; max-width:1188px; margin:0 auto; scroll-margin-top:22px }
.product { margin:0; min-width:0; line-height:0; border-radius:17px; overflow:hidden; box-shadow:0 9px 30px rgba(0,0,0,.3) }
.product img { width:100%; height:auto; display:block }
.below { padding:76px 8%; border-top:1px solid rgba(99,165,250,.15); background:linear-gradient(115deg,#06132d,#030a1b 65%); }
.below.alternate { background:linear-gradient(110deg,#071e3d,#06112b 65%) }
.section-inner { max-width:1110px; margin:auto; }
.eyebrow { color:#53ceff; letter-spacing:.17em; text-transform:uppercase; font-size:13px; font-weight:700; margin:0 0 12px }
.below h2 { margin:0 0 16px; font-size:clamp(30px,3vw,46px); line-height:1.12 }
.below p:not(.eyebrow) { color:#d8e2ee; font-size:clamp(17px,1.4vw,20px); line-height:1.65; max-width:810px }
.contact-placeholder { margin-top:26px; display:inline-block; border:1px solid rgba(76,181,248,.28); border-radius:10px; padding:18px 23px; color:#a9b4c7 }
.contact-form { margin-top:30px; max-width:520px; display:grid; gap:18px }
.contact-field { display:grid; gap:7px }
.contact-field label { font-size:14px; font-weight:700; letter-spacing:.04em; color:#bfe4ff }
.contact-field input { min-height:48px; padding:11px 15px; font-size:16px; font-family:inherit; color:var(--white); background:rgba(5,16,40,.75); border:1px solid rgba(76,181,248,.35); border-radius:8px }
.contact-field input::placeholder { color:#6b7b96 }
.contact-field input:focus { border-color:var(--cyan) }
.contact-submit { justify-content:center; border:1px solid #198cff; cursor:pointer; font-family:inherit }
.contact-submit:disabled { opacity:.6; cursor:default; transform:none; filter:none }
.contact-status { margin:0; font-size:15px; line-height:1.5; min-height:1em }
.contact-status.is-success { color:#7fe3a8 }
.contact-status.is-error { color:#ff9d9d }
.footer { padding:28px 24px; background:#030715; text-align:center; text-transform:uppercase; letter-spacing:.17em; font-size:11px; color:#aab8cb }
.footer strong { color:#53cbff; font-weight:600 }
.footer span { padding:0 12px; color:#62718d }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip-link { position:absolute; left:12px; top:-100px; z-index:10; background:white; color:#05102b; padding:12px }
.skip-link:focus { top:12px }
:focus-visible { outline:3px solid #70d5ff; outline-offset:4px }
@media (max-width:900px) { .hero-wave { width:84vw; height:55vw; top:11%; opacity:.75 } .shell { padding-top:45px } .hero-copy { max-width:760px } .desktop-br { display:none } .product-grid { gap:20px } }
@media (max-width:640px) { .header-inner { padding:10px 20px 0; display:block; min-height:0 } .brand { width:205px; margin:0 0 6px } .site-nav { justify-content:space-between; gap:10px; } .site-nav a { font-size:13px; padding:13px 0 14px } .splash { min-height:0 } .hero-wave { width:100vw; height:420px; top:70px; opacity:.3; -webkit-mask-image:linear-gradient(to bottom,#000,transparent); mask-image:linear-gradient(to bottom,#000,transparent) } .shell { padding:45px 20px 38px } h1 { font-size:clamp(34px,8.4vw,48px) } .intro { font-size:16px } .tagline { font-size:17px } .ctas { gap:11px } .button { min-width:0; width:100%; min-height:53px; padding:12px 17px; font-size:16px } .product-grid { grid-template-columns:1fr; gap:16px } .below { padding:56px 22px } .footer { line-height:2.4; letter-spacing:.09em; font-size:10px } }
@media (prefers-reduced-motion: reduce) { html {scroll-behavior:auto} .button {transition:none} }