:root { --navy:#031329; --blue:#08a9f4; --cyan:#13d9dc; --mint:#56d2ad; --white:#f5f9ff; --muted:#9badc5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--navy); color:var(--white); font-family:'DM Sans',sans-serif; }
.page-shell { min-height:100vh; display:flex; flex-direction:column; overflow:hidden; position:relative; background:radial-gradient(circle at 77% 42%,rgba(6,91,143,.2),transparent 31%),var(--navy); }
.topbar,.footer { width:min(1200px,calc(100% - 80px)); margin:auto; }
.topbar { height:112px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.brand img { width:235px; height:auto; display:block; mix-blend-mode:screen; }
.status { color:#a8bfd5; font-size:12px; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.status i { display:block; width:7px; height:7px; background:var(--cyan); border-radius:50%; box-shadow:0 0 12px var(--cyan); }
.hero { width:min(1200px,calc(100% - 80px)); margin:auto; flex:1; min-height:620px; display:flex; align-items:center; position:relative; }
.hero-copy { width:55%; position:relative; z-index:1; padding:30px 0 65px; }
.eyebrow { color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin:0 0 26px; display:flex; gap:11px; align-items:center; }
.eyebrow span { width:30px; height:1px; background:var(--blue); }
h1 { font:600 clamp(43px,5.5vw,78px)/1.05 'Space Grotesk',sans-serif; letter-spacing:-.055em; margin:0; }
h1 em { color:transparent; font-style:normal; background:linear-gradient(100deg,var(--blue),var(--cyan) 56%,var(--mint)); -webkit-background-clip:text; background-clip:text; }
.intro { max-width:465px; color:var(--muted); font-size:17px; line-height:1.65; margin:29px 0 28px; }
.hero-art { width:48%; height:560px; position:absolute; right:-3%; top:50%; transform:translateY(-50%); }
.orb { position:absolute; border-radius:50%; filter:blur(50px); opacity:.25; }.orb-one { width:300px;height:300px;right:7%;top:15%;background:#087edc; }.orb-two { width:190px;height:190px;right:28%;bottom:10%;background:var(--mint);opacity:.12; }
.ring { position:absolute; border:1px solid rgba(30,183,237,.28); border-radius:50%; }.ring-large { width:450px;height:450px;right:2%;top:53px; }.ring-small { width:300px;height:300px;right:18%;top:128px;border-color:rgba(81,211,185,.2); }
.drop { position:absolute; width:170px;height:212px; right:31%;top:166px; transform:rotate(45deg); border-radius:100% 0 100% 100%; background:linear-gradient(145deg,#e7fbff 5%,#82def8 34%,#078ed5 67%,#55d4ac); box-shadow:-25px 25px 55px rgba(0,169,244,.27); }
.drop span { position:absolute; width:66px;height:108px; left:48px;top:46px; border-radius:100% 0 100% 100%; background:var(--navy); opacity:.82; }
.dot-grid { position:absolute; right:15%;top:98px;width:125px;height:160px; background-image:radial-gradient(circle,#12b3ee 0 4px,transparent 5px); background-size:26px 26px; opacity:.65; mask-image:linear-gradient(135deg,black,transparent 75%); }
.wave { position:absolute; width:360px;height:95px; border:11px solid transparent; border-top-color:var(--blue); border-radius:50%; transform:rotate(13deg); right:14%;bottom:110px; opacity:.85; }.wave-front { right:8%;bottom:78px;border-top-color:var(--mint);opacity:.7; }
.watermark { position:absolute; right:0; bottom:-80px; font:700 430px/.8 'Space Grotesk'; color:rgba(255,255,255,.018); }
.footer { padding:24px 0 30px; border-top:1px solid rgba(139,180,208,.16); color:#6d849e; display:flex; justify-content:space-between; font-size:11px; letter-spacing:.03em; position:relative; z-index:1; }.footer p { margin:0; }.footer-tag span { color:var(--blue); margin:0 8px; }
@media (max-width:700px) { .topbar,.footer,.hero { width:calc(100% - 40px); }.topbar { height:90px; }.brand img { width:175px; }.status { font-size:9px; letter-spacing:.06em; }.hero { min-height:700px; align-items:flex-start; }.hero-copy { width:100%; padding-top:55px; }.intro { font-size:15px; }.hero-art { opacity:.3; width:100%; height:410px; right:-42%; top:43%; }.footer { display:block; line-height:1.8; }.footer-tag { margin-top:5px!important; } }