:root { --bg:#050914; --ink:#f1f5ff; --muted:#8e9ab3; --line:rgba(177,204,255,.15); --cyan:#2795ff; --violet:#194cd8; --ease:cubic-bezier(.2,.75,.25,1); }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--bg); font-family:"DM Sans",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.teaser { min-height:100svh; background:radial-gradient(circle at 75% 53%,rgba(25,76,216,.23),transparent 29%),radial-gradient(circle at 21% 87%,rgba(39,149,255,.09),transparent 26%),var(--bg); }
.site-header { position:relative; z-index:3; width:min(1370px,100%); height:92px; margin:auto; padding:0 clamp(1.3rem,4.5vw,4.5rem); display:flex; align-items:center; justify-content:space-between; animation:header-enter .75s var(--ease) both; }
.brand { display:block; width:4.5rem; transform:translateY(7px); filter:brightness(0) saturate(100%) invert(56%) sepia(89%) saturate(3167%) hue-rotate(180deg) brightness(105%) contrast(103%) drop-shadow(0 0 14px rgba(39,149,255,.45)); }
.brand img { display:block; width:100%; height:auto; }
.status { display:flex; align-items:center; gap:.65rem; margin:0; color:var(--muted); font-size:.69rem; text-transform:uppercase; letter-spacing:.15em; }
.status i { width:.43rem; height:.43rem; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:pulse 2s infinite; }
.hero { position:relative; width:min(1370px,100%); min-height:calc(100svh - 92px); margin:auto; padding:clamp(4.5rem,9vh,7rem) clamp(1.3rem,4.5vw,4.5rem) 2rem; overflow:hidden; display:grid; grid-template-columns:minmax(0,48%) minmax(380px,52%); grid-template-rows:1fr auto; align-items:center; }
.hero__content { position:relative; z-index:2; max-width:690px; grid-column:1; grid-row:1; }
.hero__content > * { animation:enter .85s var(--ease) both; }
.hero__content > :nth-child(1) { animation-delay:.08s; }
.hero__content > :nth-child(2) { animation-delay:.16s; }
.hero__content > :nth-child(3) { animation-delay:.28s; }
.hero__content > :nth-child(4) { animation-delay:.4s; }
.eyebrow { margin:0 0 1.6rem; color:var(--muted); font-size:.68rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; }
.eyebrow::before { content:"✦"; color:var(--cyan); margin-right:.7rem; }
h1 { margin:0 0 1.8rem; max-width:680px; font:500 clamp(3.3rem,5.65vw,6.5rem)/.94 "Manrope",sans-serif; letter-spacing:-.072em; }
h1 em { font-style:normal; font-weight:400; color:var(--cyan); white-space:nowrap; }
.hero__copy { max-width:510px; margin:0 0 2.25rem; color:var(--muted); font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.65; }
.hero__footer { position:relative; z-index:2; grid-column:1 / -1; grid-row:2; display:flex; justify-content:space-between; gap:1rem; padding-top:3rem; color:var(--muted); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; animation:footer-enter .85s .55s var(--ease) both; }
.hero__footer p { margin:0; }
.orbital-scene { position:absolute; z-index:1; top:50%; right:clamp(-5.5rem,-1vw,0rem); width:clamp(530px,53vw,800px); aspect-ratio:1; transform:translateY(-50%); pointer-events:none; }
.hero__glow { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,rgba(25,76,216,.28),rgba(39,149,255,.06) 35%,transparent 67%); filter:blur(12px); }
.hero__model { position:absolute; inset:0; z-index:2; width:100%; height:100%; }
.orbit { position:absolute; z-index:3; top:50%; left:50%; width:100%; aspect-ratio:1; transform:translate(-50%,-50%) rotate(-13deg); border:1px solid rgba(171,190,255,.22); border-radius:50%; animation:drift 12s ease-in-out infinite alternate; }
.orbit::before { content:""; position:absolute; inset:14%; border:1px solid rgba(171,190,255,.18); border-radius:50%; }
.orbit--middle { width:81%; border-style:dashed; border-color:rgba(47,103,255,.45); transform:translate(-50%,-50%) rotate(12deg); animation-delay:-3s; }
.orbit--middle::before { inset:24%; }
.orbit--inner { width:57%; transform:translate(-50%,-50%) rotate(-27deg); border-color:rgba(92,226,238,.34); animation-delay:-6s; }
.orbit--inner::before { inset:35%; }
.orbital-markers { position:absolute; z-index:5; inset:0; border-radius:50%; animation:marker-orbit 28s linear infinite; }
.orbital-markers i { position:absolute; display:block; width:10px; height:10px; border-radius:50%; background:var(--cyan); box-shadow:0 0 17px 3px rgba(92,226,238,.58); }
.orbital-markers i:first-child { top:15%; left:72%; }
.orbital-markers i:last-child { right:17%; bottom:19%; width:8px; height:8px; background:#4a77ff; box-shadow:0 0 17px 3px rgba(74,119,255,.55); }
.scene-label { position:absolute; z-index:4; color:rgba(183,196,239,.48); font-size:.57rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.scene-label--top { top:7%; right:9%; }
.scene-label--bottom { bottom:7%; left:9%; writing-mode:vertical-rl; }
@keyframes enter { from { opacity:0; transform:translateY(25px); } to { opacity:1; transform:none; } }
@keyframes header-enter { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
@keyframes footer-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes marker-orbit { to { transform:rotate(360deg); } }
@keyframes drift { from { margin-top:-10px; } to { margin-top:12px; } }
@keyframes pulse { 50% { opacity:.45; box-shadow:0 0 4px var(--cyan); } }
@media (max-width:960px) { .site-header { height:82px; } .hero { min-height:0; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding-top:clamp(4rem,10vw,6rem); padding-bottom:2rem; } .hero__content { order:1; max-width:min(100%,680px); } h1 { max-width:760px; font-size:clamp(3.6rem,9vw,5.6rem); } .hero__copy { max-width:570px; margin-bottom:0; } .orbital-scene { position:relative; order:2; top:auto; right:auto; bottom:auto; width:min(82vw,610px); margin:clamp(2rem,6vw,4.5rem) -5% 0 auto; transform:none; opacity:.86; } .scene-label { display:none; } .hero__footer { order:3; margin-top:clamp(1rem,4vw,2.5rem); padding-top:1.25rem; } }
@media (max-width:680px) { .teaser { height:100svh; min-height:0; overflow:hidden; } .site-header { height:76px; padding:0 1.5rem; } .brand { width:3.9rem; } .status { max-width:none; color:#9ba9c3; font-size:.54rem; letter-spacing:.1em; line-height:1; white-space:nowrap; } .hero { height:calc(100svh - 76px); min-height:0; display:block; padding:0 1.5rem; overflow:hidden; } .hero__content { position:absolute; z-index:2; top:43%; right:1.5rem; left:1.5rem; max-width:none; transform:translateY(-50%); } .eyebrow { margin-bottom:1.15rem; font-size:.57rem; letter-spacing:.14em; } h1 { max-width:355px; margin-bottom:1.35rem; font-size:clamp(2.65rem,12vw,3.35rem); line-height:.93; letter-spacing:-.08em; } .hero__copy { max-width:340px; margin:0; color:#9caac4; font-size:.97rem; line-height:1.55; } .orbital-scene { position:absolute; z-index:1; top:auto; right:-1.75rem; bottom:1.65rem; width:18.5rem; margin:0; transform:none; opacity:.9; } .hero__model { opacity:1; } .hero__footer { position:absolute; z-index:5; right:1.5rem; bottom:1.35rem; left:1.5rem; display:flex; align-items:flex-end; padding:0; margin:0; color:#97a5bf; font-size:.49rem; letter-spacing:.12em; line-height:1.45; } .hero__footer p:first-child { max-width:145px; } }
@media (max-width:380px) { .site-header { padding-right:1.2rem; padding-left:1.2rem; } .hero { padding-right:1.2rem; padding-left:1.2rem; } h1 { font-size:2.6rem; } .hero__copy { font-size:.92rem; } .hero__footer { right:1.2rem; left:1.2rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }