:root { --bg:#161a1d; --panel:#1c2125; --text:#dee2e6; --muted:#8a9299; --orange:#f59c1a; --blue:#85bcee; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:var(--bg); color:var(--text); font-family:"Open Sans",Arial,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 82%); }
.page { position:relative; width:min(1180px,calc(100% - 48px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; }
.brand { height:112px; display:flex; align-items:center; gap:14px; color:#fff; }
.brand__mark { width:50px; height:auto; object-fit:contain; }
.brand__name { font-size:20px; font-weight:300; letter-spacing:.02em; }
.brand__name strong { font-weight:600; }
.hero { flex:1; display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:80px; padding:40px 0 100px; }
.hero__content { max-width:710px; }
.eyebrow { margin:0 0 25px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow span { display:inline-block; width:34px; height:2px; margin:0 12px 3px 0; background:var(--orange); }
h1 { margin:0; color:#fff; font-size:clamp(50px,7vw,88px); font-weight:300; line-height:1.02; letter-spacing:-.045em; }
h1 em { color:var(--orange); font-style:normal; }
.intro { max-width:610px; margin:34px 0 42px; color:rgba(222,226,230,.62); font-size:17px; line-height:1.8; }
.status { display:inline-grid; grid-template-columns:auto auto; align-items:center; gap:3px 11px; padding:14px 20px; border:1px solid rgba(255,255,255,.1); border-radius:4px; background:rgba(255,255,255,.025); font-size:14px; }
.status__dot { grid-row:1/3; width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 18px var(--orange); animation:pulse 2s infinite; }
.status small { color:var(--muted); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.orb { position:relative; width:min(31vw,350px); aspect-ratio:1; justify-self:center; }
.orb::before,.orb::after { content:""; position:absolute; border-radius:50%; }
.orb::before { inset:0; border:1px solid rgba(133,188,238,.2); box-shadow:inset 0 0 90px rgba(133,188,238,.05); }
.orb::after { inset:14%; border:1px dashed rgba(245,156,26,.35); animation:spin 24s linear infinite; }
.orb__ring { position:absolute; inset:31%; border:2px solid rgba(255,255,255,.42); border-radius:50%; box-shadow:0 0 45px rgba(133,188,238,.12); }
.orb__core { position:absolute; inset:43%; border-radius:50%; background:var(--orange); box-shadow:0 0 42px rgba(245,156,26,.65); }
.orb__line { position:absolute; top:50%; left:-10%; width:120%; height:1px; background:linear-gradient(90deg,transparent,rgba(133,188,238,.55),transparent); transform:rotate(-18deg); }
.orb__line--two { transform:rotate(38deg); opacity:.45; }
footer { display:flex; justify-content:space-between; gap:25px; padding:25px 0 34px; border-top:1px solid rgba(255,255,255,.08); color:#687179; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 50% { opacity:.5; transform:scale(.8); } }
@media (max-width:760px) { .page{width:min(100% - 32px,1180px)} .brand{height:88px} .hero{grid-template-columns:1fr;gap:45px;padding:30px 0 70px}.orb{grid-row:1;width:min(65vw,260px)} h1{font-size:clamp(43px,14vw,66px)} .intro{font-size:15px}.status{display:grid} footer{flex-direction:column} }
@media (prefers-reduced-motion:reduce) { .orb::after,.status__dot{animation:none} }