:root{
  --bg:#030303;
  --ink:#f2f2f0;
  --muted:#9a9a9a;
  --line:rgba(255,255,255,.12);
  --red:#ff2b24;
  --red2:#9f0a08;
  --glow:rgba(255,32,24,.38);
  --pad:clamp(22px,4vw,64px);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
html{font-family:Arial,Helvetica,sans-serif;background:#000}
body{overflow:hidden}

body::selection{background:var(--red);color:#fff}

.site-shell{
  position:relative;
  width:100%;
  min-height:100svh;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,34,24,.06), transparent 36%),
    #050505;
}

.noise{
  position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.12;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.22) 0 .5px, transparent .7px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.16) 0 .45px, transparent .65px);
  background-size:4px 4px,5px 5px;
  mix-blend-mode:soft-light;
}
.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:28;
  box-shadow:inset 0 0 220px rgba(0,0,0,.95), inset 0 -100px 140px rgba(0,0,0,.7);
}
.scanline{
  position:fixed;left:0;right:0;top:-20%;height:18vh;z-index:27;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.018),transparent);
  animation:scan 9s linear infinite;
}

.topbar{
  position:fixed;z-index:40;top:0;left:0;right:0;height:78px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(to bottom,rgba(0,0,0,.75),rgba(0,0,0,.12));
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none}
.brand-mark{
  position:relative;width:34px;height:34px;display:grid;place-items:center;
}
.brand-ring{
  position:absolute;inset:4px;border:1px solid rgba(255,255,255,.75);border-radius:50%;
  box-shadow:0 0 18px rgba(255,42,34,.28);
}
.brand-ring::before,.brand-ring::after{
  content:"";position:absolute;background:var(--red);
}
.brand-ring::before{left:50%;top:-8px;width:1px;height:36px;transform:translateX(-50%)}
.brand-ring::after{top:50%;left:-8px;height:1px;width:36px;transform:translateY(-50%)}
.brand-core{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--red)}
.brand-word{font-size:12px;letter-spacing:.42em;white-space:nowrap}
.brand-word b{font-weight:400;color:var(--red)}
.status-chip{
  display:flex;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.24em;color:#b9b9b9;
}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);animation:pulse 1.8s ease-in-out infinite}

.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  isolation:isolate;overflow:hidden;padding:120px var(--pad) 90px;
}
.backdrop,.backdrop-image,.backdrop-wash{position:absolute;inset:0}
.backdrop{z-index:-6;overflow:hidden}
.backdrop-image{
  background-image:url("../img/obsidian-cover.png");
  background-size:cover;
  background-position:center;
  filter:grayscale(.28) contrast(1.18) brightness(.52) saturate(.72);
  transform:scale(1.12);
  transition:transform .25s ease-out;
}
.backdrop-image::after{content:"";position:absolute;inset:0}
.backdrop-wash{
  background:
    linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.10) 26%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.82) 100%),
    radial-gradient(circle at 50% 48%,transparent 0 19%,rgba(0,0,0,.12) 35%,rgba(0,0,0,.70) 80%);
}
.red-haze{
  position:absolute;width:42vw;height:42vw;border-radius:50%;
  filter:blur(90px);opacity:.22;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,34,24,.9),transparent 67%);
}
.red-haze--one{left:-14vw;bottom:-18vw}
.red-haze--two{right:-16vw;top:4vh;opacity:.14}

.axis{position:absolute;z-index:-1;pointer-events:none;opacity:.7}
.axis--vertical{
  top:78px;bottom:0;left:50%;width:1px;
  background:linear-gradient(to bottom,rgba(255,34,24,.92),rgba(255,34,24,.08) 20%,rgba(255,255,255,.15) 48%,rgba(255,34,24,.55) 70%,transparent);
  box-shadow:0 0 20px rgba(255,34,24,.25);
}
.axis--horizontal{
  left:7vw;right:7vw;top:50%;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.14) 20%,rgba(255,34,24,.65) 49%,rgba(255,255,255,.14) 80%,transparent);
}

.core-orbit{
  position:absolute;z-index:-2;left:50%;top:47%;width:min(58vw,760px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
}
.orbit{position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%;inset:0}
.orbit--one{animation:spin 28s linear infinite}
.orbit--two{inset:7%;border-color:rgba(255,45,38,.24);animation:spinReverse 21s linear infinite}
.orbit--three{inset:18%;border-style:dashed;border-color:rgba(255,255,255,.11);animation:spin 17s linear infinite}
.orbit::before,.orbit::after{
  content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 16px var(--red);
}
.orbit::before{left:14%;top:18%}
.orbit::after{right:9%;bottom:25%}
.core-flare{
  position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:#fff;box-shadow:0 0 18px 3px #fff,0 0 46px 12px rgba(255,33,26,.85),0 0 130px 25px rgba(255,33,26,.32);
}

.hero-content{
  width:min(1100px,92vw);text-align:center;display:flex;flex-direction:column;align-items:center;
  position:relative;z-index:4;
}
.eyebrow{
  display:flex;align-items:center;gap:14px;margin-bottom:24px;
  font-size:9px;letter-spacing:.38em;color:rgba(255,255,255,.58);
}
.eyebrow-line{display:block;width:70px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35))}
.eyebrow-line:last-child{transform:scaleX(-1)}

.title{
  margin:0;display:flex;align-items:center;justify-content:center;gap:.22em;flex-wrap:wrap;
  font-size:clamp(52px,8.6vw,152px);line-height:.82;font-weight:200;
  letter-spacing:.12em;text-transform:uppercase;
  opacity: 0.6;
  text-shadow:0 2px 18px rgba(0,0,0,.65);
}
.title span{font-weight:200}
.title-core{color:#fff;position:relative}
.title-core::after{
  content:"";position:absolute;left:4%;right:8%;bottom:-14px;height:1px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  box-shadow:0 0 14px var(--red);
}

.reticle{
  margin:38px 0 24px;width:34px;height:34px;border:1px solid rgba(255,255,255,.55);border-radius:50%;
  position:relative;display:grid;place-items:center;
}
.reticle::before,.reticle::after{
  content:"";position:absolute;background:rgba(255,255,255,.55)
}
.reticle::before{width:54px;height:1px}
.reticle::after{height:54px;width:1px}
.reticle span{width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 14px var(--red)}

.development{
  margin:0;color:#ff514b;font-size:clamp(16px,1.65vw,28px);
  letter-spacing:.46em;text-indent:.46em;font-weight:400;
}
.lead{
  margin:21px auto 0;max-width:760px;color:rgba(255,255,255,.72);
  font-size:clamp(13px,1.05vw,17px);line-height:1.9;letter-spacing:.08em;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}

.signal{
  width:min(560px,78vw);margin-top:38px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  font-size:8px;letter-spacing:.22em;color:rgba(255,255,255,.48)
}
.signal-track{
  position:relative;height:1px;background:rgba(255,255,255,.12);overflow:visible
}
.signal-fill{
  position:absolute;left:0;top:0;height:1px;width:67%;
  background:linear-gradient(90deg,var(--red2),var(--red),#fff);
  box-shadow:0 0 12px var(--red);
}
.signal-fill::after{
  content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;
  background:#fff;box-shadow:0 0 14px var(--red)
}

.coming{margin-top:26px;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.42em;color:#bcbcbc}
.coming i{width:5px;height:5px;border:1px solid var(--red);transform:rotate(45deg);box-shadow:0 0 8px var(--red)}

.side-meta{
  position:absolute;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;text-orientation:mixed;
  display:flex;gap:28px;font-size:8px;letter-spacing:.32em;color:rgba(255,255,255,.34);
  z-index:4;
}
.side-meta--left{left:18px;transform:translateY(-50%) rotate(180deg)}
.side-meta--right{right:18px}

.footer{
  position:fixed;z-index:40;bottom:0;left:0;right:0;height:56px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--pad);border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.1));
  backdrop-filter:blur(8px);
  font-size:8px;letter-spacing:.25em;color:rgba(255,255,255,.42);
}
.footer span:last-child{text-align:right}
.footer-center{color:rgba(255,255,255,.25)}

.shards{position:absolute;inset:0;z-index:1;pointer-events:none}
.shard{
  position:absolute;width:var(--s);height:calc(var(--s)*1.45);
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),transparent 35%),
    linear-gradient(210deg,rgba(255,48,40,.26),rgba(8,8,8,.88) 35%,#000 80%);
  clip-path:polygon(52% 0,100% 72%,61% 58%,45% 100%,0 42%);
  opacity:var(--o);filter:drop-shadow(0 0 10px rgba(255,25,18,.18));
  transform:translate3d(0,0,0) rotate(var(--r));
  animation:float var(--d) ease-in-out infinite alternate;
}
.shard::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 10%,rgba(255,45,35,.62) 55%,transparent 58%);
  opacity:.55
}

@keyframes pulse{50%{opacity:.35;box-shadow:0 0 4px var(--red)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinReverse{to{transform:rotate(-360deg)}}
@keyframes float{to{transform:translate3d(var(--x),var(--y),0) rotate(calc(var(--r) + 11deg))}}
@keyframes scan{to{transform:translateY(135vh)}}

@media (max-width:900px){
  body{overflow:auto}
  .topbar{height:68px}
  .brand-word{font-size:10px;letter-spacing:.30em}
  .hero{min-height:100svh;padding-top:108px;padding-bottom:84px}
  .backdrop-image{background-position:54% center;transform:scale(1.2)}
  .title{font-size:clamp(48px,13vw,94px);gap:.1em;letter-spacing:.08em}
  .development{letter-spacing:.28em;text-indent:.28em}
  .lead{max-width:560px;padding:0 8px}
  .core-orbit{width:82vw}
  .side-meta{display:none}
  .footer{grid-template-columns:1fr auto;height:50px}
  .footer-center{display:none}
}
@media (max-width:560px){
  :root{--pad:18px}
  .topbar{height:62px}
  .status-chip{font-size:8px;letter-spacing:.16em}
  .brand-mark{width:28px;height:28px}
  .brand-word{font-size:9px;letter-spacing:.22em}
  .hero{padding-top:92px;padding-bottom:78px}
  .eyebrow{font-size:7px;letter-spacing:.25em;gap:9px}
  .eyebrow-line{width:34px}
  .title{font-size:clamp(42px,16vw,72px);line-height:.88;max-width:100%;gap:0}
  .title span{width:100%}
  .title-core{margin-top:8px}
  .reticle{margin:30px 0 22px}
  .development{font-size:14px;line-height:1.5}
  .lead{font-size:12px;line-height:1.75}
  .desktop-only{display:none}
  .signal{grid-template-columns:auto 1fr;margin-top:30px}
  .signal-value{display:none}
  .coming{font-size:8px}
  .footer{font-size:7px;letter-spacing:.16em}
  .footer span:last-child{display:none}
  .footer{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .backdrop-image{transition:none}
}