:root {
  --bg:#020402;
  --green:#94c83d;
  --green-soft:#b5dc63;
  --text:#f1f4ec;
  --muted:#718069;
}

* { box-sizing:border-box; }

html,
body {
  width:100%;
  min-height:100%;
}

html { background:var(--bg); }

body {
  margin:0;
  min-height:100svh;
  overflow:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 42%,rgba(96,140,27,.16),transparent 28rem),
    radial-gradient(circle at 50% 50%,#071006 0%,#020402 58%,#010201 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

#particles {
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.hero {
  position:relative;
  z-index:1;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:
    max(18px,env(safe-area-inset-top))
    max(18px,env(safe-area-inset-right))
    max(18px,env(safe-area-inset-bottom))
    max(18px,env(safe-area-inset-left));
}

.hero::before {
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-4;
  background:
    conic-gradient(from 90deg at 50% 50%,transparent 0 25%,rgba(128,182,46,.04) 31%,transparent 39% 100%);
  animation:ambientRotate 28s linear infinite;
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  background:radial-gradient(circle at center,transparent 42%,rgba(0,0,0,.62) 100%);
}

.noise {
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:.06;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 4px);
  mix-blend-mode:soft-light;
}

.grid-floor {
  position:absolute;
  left:-20%;
  right:-20%;
  bottom:-38%;
  height:62%;
  z-index:-2;
  transform:perspective(700px) rotateX(66deg);
  transform-origin:center top;
  background:
    linear-gradient(rgba(148,200,61,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,200,61,.13) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 92%);
  opacity:.28;
  animation:gridMove 14s linear infinite;
}

.energy {
  position:absolute;
  top:50%;
  width:22rem;
  height:30rem;
  transform:translateY(-50%);
  border-radius:50%;
  filter:blur(58px);
  opacity:.15;
  background:rgba(148,200,61,.42);
  animation:energyPulse 6s ease-in-out infinite;
}

.energy-left { left:-12rem; }
.energy-right { right:-12rem; animation-delay:-3s; }

.brand {
  position:relative;
  z-index:3;
  width:min(92vw,940px);
  min-height:min(86svh,820px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.radar {
  position:absolute;
  width:min(80vw,740px);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  opacity:.96;
}

.ring {
  position:absolute;
  inset:50%;
  border:1px solid rgba(148,200,61,.17);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.r1 { width:100%; height:100%; animation:spin 38s linear infinite; }
.r2 { width:82%; height:82%; border-style:dashed; animation:spinReverse 24s linear infinite; }
.r3 { width:64%; height:64%; animation:spin 16s linear infinite; }
.r4 { width:47%; height:47%; border-color:rgba(181,220,99,.26); animation:pulse 4s ease-in-out infinite; }
.r5 { width:28%; height:28%; border-style:dotted; animation:spinReverse 10s linear infinite; }

.axis {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(148,200,61,.25),transparent);
}

.axis-x { width:112%; height:1px; }
.axis-y {
  width:1px;
  height:112%;
  background:linear-gradient(180deg,transparent,rgba(148,200,61,.22),transparent);
}

.sweep {
  position:absolute;
  left:50%;
  top:50%;
  width:50%;
  height:50%;
  transform-origin:0 0;
  background:linear-gradient(25deg,rgba(148,200,61,.16),transparent 65%);
  clip-path:polygon(0 0,100% 0,0 100%);
  animation:sweep 7s linear infinite;
}

.pulse-node {
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green-soft);
  box-shadow:0 0 18px var(--green-soft);
  animation:node 2.4s ease-in-out infinite;
}

.n1 { top:14%; left:35%; }
.n2 { top:62%; right:5%; animation-delay:-.8s; }
.n3 { bottom:10%; left:24%; animation-delay:-1.6s; }

.emblem-wrap {
  position:relative;
  z-index:3;
  width:clamp(230px,35vw,410px);
  margin-bottom:1.35rem;
  animation:float 5s ease-in-out infinite;
}

.emblem {
  display:block;
  width:100%;
  height:auto;
  filter:
    drop-shadow(0 24px 40px rgba(0,0,0,.66))
    drop-shadow(0 0 17px rgba(148,200,61,.24));
  animation:emblemPulse 4.2s ease-in-out infinite;
}

.emblem-glow {
  position:absolute;
  inset:28% 5% 8%;
  z-index:-1;
  border-radius:50%;
  background:rgba(148,200,61,.18);
  filter:blur(48px);
  animation:glow 4.2s ease-in-out infinite;
}

.laser-line {
  position:absolute;
  left:-18%;
  right:-18%;
  top:54%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--green-soft),transparent);
  box-shadow:0 0 24px rgba(181,220,99,.85);
  animation:laser 3.6s ease-in-out infinite;
}

.wordmark {
  position:relative;
  z-index:4;
  padding:0 1rem;
}

.wordmark h1 {
  margin:0;
  color:var(--text);
  font-size:clamp(2.45rem,7.5vw,7rem);
  line-height:.9;
  letter-spacing:.035em;
  font-weight:900;
  text-transform:uppercase;
  text-shadow:
    0 2px 0 #697064,
    0 8px 24px rgba(0,0,0,.62);
}

.wordmark h1 span {
  color:var(--green);
  display:inline-block;
  padding:0 .08em;
  text-shadow:0 0 18px rgba(148,200,61,.46);
}

.wordmark p {
  margin:1.15rem 0 0;
  color:var(--green-soft);
  font-size:clamp(.75rem,1.9vw,1.15rem);
  font-weight:700;
  letter-spacing:.27em;
  text-transform:uppercase;
}

.wordmark p b {
  color:rgba(181,220,99,.58);
  padding:0 .25em;
}

.metrics {
  position:absolute;
  bottom:11%;
  display:grid;
  grid-template-columns:repeat(3,minmax(110px,1fr));
  gap:1px;
  width:min(78vw,620px);
  border:1px solid rgba(148,200,61,.15);
  background:rgba(4,8,4,.42);
  backdrop-filter:blur(8px);
}

.metrics div {
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:.7rem .9rem;
  border-right:1px solid rgba(148,200,61,.12);
}

.metrics div:last-child { border-right:0; }

.metrics span {
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.55rem;
  letter-spacing:.16em;
}

.metrics strong {
  color:var(--green-soft);
  font-size:.72rem;
  letter-spacing:.12em;
}

.status {
  position:absolute;
  bottom:4.2%;
  display:flex;
  align-items:center;
  gap:.65rem;
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.18em;
}

.status-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green-soft);
  box-shadow:0 0 14px var(--green-soft);
  animation:status 1.8s ease-in-out infinite;
}

.hud {
  position:fixed;
  z-index:6;
  color:rgba(181,220,99,.58);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.5;
}

.hud strong,
.hud span { display:block; }

.hud span {
  color:rgba(113,128,105,.72);
  font-size:.54rem;
}

.hud-tl { top:22px; left:26px; }
.hud-tr { top:22px; right:26px; text-align:right; }
.hud-bl { bottom:22px; left:26px; }
.hud-br { bottom:22px; right:26px; text-align:right; }

.side-data {
  position:fixed;
  z-index:5;
  top:50%;
  display:flex;
  gap:.8rem;
  color:rgba(181,220,99,.24);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.5rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  transform:translateY(-50%);
}

.left-data { left:18px; }
.right-data { right:18px; }

.boot {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background:#020402;
  transition:opacity .9s ease,visibility .9s ease;
}

.boot.hidden {
  opacity:0;
  visibility:hidden;
}

.boot-grid {
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(148,200,61,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,200,61,.05) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle,#000 0%,transparent 76%);
}

.boot-content {
  position:relative;
  width:min(84vw,520px);
  text-align:center;
}

.boot-label {
  color:var(--green-soft);
  font-size:.7rem;
  letter-spacing:.25em;
}

.boot-word {
  margin:.5rem 0;
  font-size:clamp(3rem,10vw,7rem);
  font-weight:900;
  letter-spacing:.08em;
}

.boot-progress {
  height:2px;
  margin:1.2rem 0 1rem;
  overflow:hidden;
  background:rgba(148,200,61,.14);
}

.boot-progress span {
  display:block;
  width:28%;
  height:100%;
  background:linear-gradient(90deg,transparent,var(--green-soft),transparent);
  box-shadow:0 0 14px var(--green-soft);
  animation:load 1.25s ease-in-out infinite;
}

.boot-status {
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.18em;
}

@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes spinReverse { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes sweep { to { transform:rotate(360deg); } }
@keyframes ambientRotate { to { transform:rotate(360deg); } }

@keyframes pulse {
  0%,100% { transform:translate(-50%,-50%) scale(.96); opacity:.4; }
  50% { transform:translate(-50%,-50%) scale(1.05); opacity:.9; }
}

@keyframes float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-10px); }
}

@keyframes emblemPulse {
  0%,100% { filter:drop-shadow(0 22px 35px rgba(0,0,0,.62)) brightness(.98); }
  50% { filter:drop-shadow(0 24px 42px rgba(0,0,0,.66)) drop-shadow(0 0 16px rgba(148,200,61,.28)) brightness(1.06); }
}

@keyframes glow {
  0%,100% { opacity:.45; transform:scale(.92); }
  50% { opacity:.9; transform:scale(1.08); }
}

@keyframes status {
  0%,100% { opacity:.35; }
  50% { opacity:1; }
}

@keyframes load {
  from { transform:translateX(-120%); }
  to { transform:translateX(430%); }
}

@keyframes gridMove {
  from { background-position:0 0; }
  to { background-position:0 58px; }
}

@keyframes energyPulse {
  0%,100% { opacity:.08; transform:translateY(-50%) scale(.92); }
  50% { opacity:.2; transform:translateY(-50%) scale(1.08); }
}

@keyframes laser {
  0%,100% { opacity:.25; transform:scaleX(.7); }
  50% { opacity:1; transform:scaleX(1); }
}

@keyframes node {
  0%,100% { opacity:.25; transform:scale(.75); }
  50% { opacity:1; transform:scale(1.35); }
}

@media (max-width:700px) {
  .hero {
    padding:
      max(12px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left));
  }

  .brand {
    width:100%;
    min-height:90svh;
  }

  .radar {
    width:126vw;
    max-width:none;
  }

  .emblem-wrap {
    width:clamp(190px,64vw,315px);
    margin-bottom:.85rem;
  }

  .wordmark h1 {
    font-size:clamp(2.2rem,13vw,4.3rem);
    letter-spacing:0;
  }

  .wordmark p {
    width:min(94vw,520px);
    margin:1rem auto 0;
    font-size:clamp(.6rem,3.1vw,.86rem);
    line-height:1.7;
    letter-spacing:.16em;
  }

  .metrics {
    bottom:13%;
    width:min(92vw,520px);
  }

  .metrics div {
    padding:.55rem .35rem;
  }

  .metrics span {
    font-size:.45rem;
    letter-spacing:.1em;
  }

  .metrics strong {
    font-size:.62rem;
  }

  .status {
    bottom:7%;
    font-size:.52rem;
    letter-spacing:.1em;
  }

  .hud {
    font-size:.48rem;
    letter-spacing:.1em;
  }

  .hud span {
    font-size:.42rem;
  }

  .hud-tl { top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); }
  .hud-tr { top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); }
  .hud-bl { bottom:max(12px,env(safe-area-inset-bottom)); left:max(12px,env(safe-area-inset-left)); }
  .hud-br { bottom:max(12px,env(safe-area-inset-bottom)); right:max(12px,env(safe-area-inset-right)); }

  .side-data {
    display:none;
  }

  .grid-floor {
    bottom:-28%;
    height:50%;
  }
}

@media (max-height:620px) and (orientation:landscape) {
  .brand {
    min-height:94svh;
    transform:scale(.82);
  }

  .metrics {
    bottom:7%;
  }

  .status {
    display:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation:none!important;
  }

  .boot {
    display:none;
  }
}