:root { --navy:#06183b; --blue:#0758e8; --ice:#eef4ff; --line:#dce5f2; --muted:#607086; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--navy); background:#fbfdff; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.site-header { height:84px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(251,253,255,.88); backdrop-filter:blur(14px); position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--navy); font:700 17px/1 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.13em; }
.brand img { width:38px; height:38px; object-fit:cover; border-radius:6px; }
.brand span span { color:var(--blue); }
.status { font:500 11px/1 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px; }
.status i { width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px rgba(7,88,232,.1); animation:pulse 2s infinite; }
.hero { min-height:calc(100vh - 84px); padding:clamp(72px,9vw,130px) clamp(24px,8vw,124px); display:grid; grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); align-items:center; gap:7vw; position:relative; overflow:hidden; }
.grid-lines { position:absolute; inset:0; pointer-events:none; opacity:.45; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(90deg,transparent,black 35%,black); }
.hero-copy,.hero-visual { position:relative; z-index:1; }
.eyebrow { margin:0 0 28px; font:600 11px/1 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); display:flex; align-items:center; gap:14px; }
.eyebrow span { color:#8ea0b8; }
h1,h2 { margin:0; font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.05em; }
h1 { font-size:clamp(46px,6.1vw,92px); line-height:1.02; font-weight:500; }
h1 em { color:var(--blue); font-style:normal; }
.intro { max-width:650px; margin:34px 0 28px; font-size:clamp(17px,1.5vw,21px); line-height:1.7; color:var(--muted); }
.slogan-wrap { width:min(500px,100%); height:62px; overflow:hidden; }
.slogan-wrap img { display:block; width:100%; transform:translateY(-15%); }
.hero-visual { aspect-ratio:1; display:grid; place-items:center; }
.mark-card { width:58%; aspect-ratio:1; background:#fff; box-shadow:0 35px 90px rgba(2,26,72,.13); display:grid; place-items:center; position:relative; transform:rotate(-2deg); }
.mark-card img { width:69%; height:69%; object-fit:cover; }
.corner { position:absolute; width:18px; height:18px; border-color:var(--blue); border-style:solid; }
.tl { top:-7px;left:-7px;border-width:2px 0 0 2px}.tr{top:-7px;right:-7px;border-width:2px 2px 0 0}.bl{bottom:-7px;left:-7px;border-width:0 0 2px 2px}.br{bottom:-7px;right:-7px;border-width:0 2px 2px 0}
.orbit { position:absolute; border:1px solid rgba(7,88,232,.18); border-radius:50%; }
.orbit-one { width:85%; height:85%; animation:spin 22s linear infinite; border-top-color:var(--blue); }
.orbit-two { width:112%; height:112%; animation:spin 34s linear infinite reverse; border-right-color:var(--blue); }
.telemetry { position:absolute; right:0; bottom:4%; margin:0; color:#93a3b8; font:500 10px/1.7 monospace; letter-spacing:.12em; }
.telemetry span { color:var(--blue); }
.coming-soon { padding:clamp(80px,10vw,150px) clamp(24px,8vw,124px); background:var(--navy); color:white; display:grid; grid-template-columns:1fr 1fr; gap:42px 8vw; }
.coming-soon h2 { font-size:clamp(40px,5vw,74px); line-height:1.08; font-weight:500; }
.coming-soon > p { max-width:610px; margin:50px 0 0; color:#aebbd0; font-size:18px; line-height:1.75; }
.experience-note { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:38px; padding:22px 0; border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); }
.experience-note span { color:#548dff; font:600 13px/1 monospace; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.experience-note p { margin:0; color:#dbe5f4; font-size:clamp(16px,1.6vw,20px); letter-spacing:-.01em; text-align:right; }
.feature-list { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); margin-top:45px; border-top:1px solid rgba(255,255,255,.16); }
.feature-list article { padding:32px 8% 10px 0; border-right:1px solid rgba(255,255,255,.16); }
.feature-list article+article { padding-left:8%; }
.feature-list article:last-child { border:0; }
.feature-list b { color:#548dff; font:500 11px monospace; }
.feature-list h3 { margin:36px 0 10px; font:600 21px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.feature-list p { margin:0; color:#94a4bd; line-height:1.6; }
footer { min-height:116px; padding:30px clamp(24px,5vw,76px); display:flex; align-items:center; gap:30px; justify-content:space-between; border-top:1px solid var(--line); color:#78879a; font-size:12px; letter-spacing:.04em; }
.footer-brand img { width:30px; height:30px; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 50% { box-shadow:0 0 0 9px rgba(7,88,232,0); } }
@media (max-width:850px) { .hero { grid-template-columns:1fr; padding-top:70px; }.hero-visual{width:min(440px,85vw);margin:10px auto}.coming-soon{grid-template-columns:1fr}.coming-soon>p{margin:0}.feature-list{grid-template-columns:1fr}.feature-list article,.feature-list article+article{padding:26px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}.feature-list h3{margin:14px 0 8px} }
@media (max-width:600px) { .status{font-size:0}.status i{display:block}h1{font-size:44px}.slogan-wrap{height:45px}footer{align-items:flex-start;flex-direction:column;gap:12px}.hero{min-height:auto}.coming-soon{padding-top:90px}.experience-note{align-items:flex-start;flex-direction:column;gap:12px}.experience-note p{text-align:left} }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; scroll-behavior:auto!important; } }