/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Share Tech Mono',monospace;
  background:#050505;color:#e5e2e1;
  min-height:100vh;overflow-x:hidden;
}
::selection{background:#3aaa55;color:#050505}

/* ===== Fixed Canvas Background ===== */
#map-canvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;display:block;
}

/* ===== CRT Overlay ===== */
.crt-scanlines{
  position:fixed;inset:0;z-index:200;pointer-events:none;
  background:
    linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,0.2) 50%),
    linear-gradient(90deg,rgba(255,0,0,0.02),rgba(0,255,0,0.008),rgba(0,0,255,0.02));
  background-size:100% 3px,3px 100%;
  opacity:0.2;
}

/* ===== Content layer ===== */
.content{position:relative;z-index:10}

/* ===== Header ===== */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:90;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 1.5rem;height:56px;
  background:rgba(5,5,5,0.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(58,170,85,0.12);
}
.logo{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.3rem;
  letter-spacing:0.2em;color:#55cc6a;
}
.nav-menu{display:flex;gap:2rem}
.nav-menu a{
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;
  color:rgba(85,204,106,0.45);transition:color .15s;
}
.nav-menu a:hover,.nav-menu a.active{color:#55cc6a}
.nav-menu a.active{border-bottom:2px solid #55cc6a;padding-bottom:2px}
.header-right{display:flex;align-items:center;gap:1rem}
.utc-display{font-size:11px;color:#55cc6a;letter-spacing:0.1em}
.status-dot{
  width:7px;height:7px;background:#55cc6a;border-radius:50%;
  box-shadow:0 0 6px #55cc6a;
  animation:pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 4px #55cc6a;opacity:0.7}
  50%{box-shadow:0 0 12px #55cc6a,0 0 20px rgba(85,204,106,0.25);opacity:1}
}

/* ===== Hero ===== */
.hero{
  min-height:100vh;width:100%;
  display:flex;align-items:flex-end;justify-content:center;
  padding-top:56px;
}
.hero-overlay{
  width:100%;max-width:1200px;padding:0 2rem 4rem;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;
}
.hero-left{flex:1;min-width:300px;margin-bottom:1rem}
.system-badge{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.25rem 0.75rem;margin-bottom:1.5rem;
  background:rgba(85,204,106,0.06);border-left:3px solid #55cc6a;
}
.system-badge .ping{
  width:7px;height:7px;background:#55cc6a;border-radius:50%;
  animation:ping-dot 1.5s ease-in-out infinite;
}
@keyframes ping-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.3;transform:scale(0.5)}
}
.system-badge span{font-size:10px;letter-spacing:0.25em;font-weight:700;color:#55cc6a}
.hero h1{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(2rem,5vw,3.5rem);
  letter-spacing:0.1em;line-height:1.15;color:#fff;margin-bottom:0.75rem;
}
.hero-tagline{
  font-size:clamp(0.8rem,1.4vw,0.95rem);color:#bdcaba;
  line-height:1.7;margin-bottom:2rem;max-width:520px;
}
.btn-primary{
  display:inline-block;padding:0.9rem 2.2rem;
  background:#55cc6a;color:#050505;border:none;
  font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:0.18em;cursor:pointer;transition:box-shadow .2s;
}
.btn-primary:hover{box-shadow:0 0 25px rgba(85,204,106,0.4)}
.btn-primary:active{transform:scale(0.97)}
.btn-ghost{
  display:inline-block;padding:0.9rem 1.8rem;margin-left:0.75rem;
  background:transparent;color:#55cc6a;
  border:1px solid rgba(85,204,106,0.35);
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.12em;cursor:pointer;transition:background .2s;
}
.btn-ghost:hover{background:rgba(85,204,106,0.06)}

/* ===== Telemetry readout ===== */
.telemetry-readout{
  width:300px;padding:1.25rem;position:relative;
  background:rgba(5,5,5,0.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(58,170,85,0.18);
}
.corner-bracket{position:absolute;width:8px;height:8px;border-color:#55cc6a}
.bracket-tl{top:0;left:0;border-top:2px solid;border-left:2px solid}
.bracket-br{bottom:0;right:0;border-bottom:2px solid;border-right:2px solid}
.readout-row{margin-bottom:1rem}
.readout-row:last-child{margin-bottom:0}
.readout-label{font-size:9px;color:rgba(85,204,106,0.45);letter-spacing:0.12em;margin-bottom:0.15rem}
.readout-value{font-size:1.25rem;color:#55cc6a;letter-spacing:0.06em;font-variant-numeric:tabular-nums}
.readout-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.readout-grid .readout-value{font-size:1rem}

/* ===== Section backgrounds ===== */
.section-bg{background:rgba(5,5,5,0.88)}

/* ===== What ===== */
.what{padding:4.5rem 2rem 1.5rem;text-align:center}
.what-inner{max-width:720px;margin:0 auto}
.what h2{
  font-family:'Orbitron',sans-serif;font-size:clamp(1rem,2vw,1.3rem);
  letter-spacing:0.18em;color:#55cc6a;margin-bottom:1rem;
}
.what p{font-size:0.9rem;color:#bdcaba;line-height:1.8;opacity:0.85}

/* ===== Feature Cards ===== */
.features{padding:2.5rem 2rem 3.5rem;max-width:1200px;margin:0 auto;width:100%}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.card{
  padding:1.75rem;background:rgba(32,31,31,0.85);position:relative;
  border:1px solid transparent;transition:background .3s,border-color .3s;
}
.card:hover{background:rgba(42,42,42,0.9);border-color:rgba(85,204,106,0.12)}
.card:hover .bracket-tl,.card:hover .bracket-br{opacity:1}
.card .bracket-tl,.card .bracket-br{opacity:0;transition:opacity .3s}
.card-top{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem}
.card-icon{font-size:1.3rem;color:#55cc6a}
.card-line{flex:1;height:1px;background:rgba(85,204,106,0.12)}
.card-id{font-size:9px;color:rgba(85,204,106,0.3);font-weight:700}
.card h3{
  font-family:'Orbitron',sans-serif;font-size:0.9rem;
  letter-spacing:0.12em;color:#55cc6a;margin-bottom:0.6rem;
}
.card p{font-size:0.82rem;color:#bdcaba;line-height:1.7;opacity:0.75}

/* ===== Data Sources ===== */
.sources{padding:3.5rem 2rem;max-width:1200px;margin:0 auto;width:100%}
.sources-heading{display:flex;align-items:center;gap:0.75rem;margin-bottom:2rem}
.sources-heading .bar{width:2.5rem;height:2px;background:#55cc6a}
.sources-heading h2{
  font-family:'Orbitron',sans-serif;font-size:clamp(1rem,2vw,1.3rem);
  letter-spacing:0.18em;color:#fff;
}
.sources-intro{font-size:0.88rem;color:#bdcaba;line-height:1.7;opacity:0.8;max-width:700px;margin-bottom:2rem}
.sources-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem}
.source{
  padding:1.25rem;background:rgba(28,27,27,0.85);
  border-left:2px solid rgba(85,204,106,0.2);transition:border-color .2s;
}
.source:hover{border-color:#55cc6a}
.source h4{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:0.1em;color:#55cc6a;margin-bottom:0.4rem}
.source .source-url{font-size:10px;color:rgba(85,204,106,0.35);margin-bottom:0.5rem}
.source p{font-size:0.8rem;color:#bdcaba;line-height:1.6;opacity:0.7}

/* ===== How It Works ===== */
.how{padding:3.5rem 2rem;max-width:1200px;margin:0 auto;width:100%;border-top:1px solid rgba(58,170,85,0.06)}
.how-heading{display:flex;align-items:center;gap:0.75rem;margin-bottom:2.5rem}
.how-heading .bar{width:2.5rem;height:2px;background:#55cc6a}
.how-heading h2{font-family:'Orbitron',sans-serif;font-size:clamp(1rem,2vw,1.3rem);letter-spacing:0.18em;color:#fff}
.how-layout{display:flex;flex-wrap:wrap;gap:2.5rem}
.how-steps{flex:1;min-width:280px}
.step{display:flex;gap:1.25rem;border-left:2px solid rgba(85,204,106,0.12);padding:0 0 1.75rem 1.25rem}
.step-num{font-size:1rem;font-weight:700;color:#55cc6a;padding-top:0.1rem}
.step h4{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:0.12em;color:#55cc6a;margin-bottom:0.4rem}
.step p{font-size:0.82rem;color:#bdcaba;line-height:1.6;opacity:0.7}
.how-visual{
  width:100%;max-width:400px;aspect-ratio:1;position:relative;
  background:#000;border:1px solid rgba(85,204,106,0.06);overflow:hidden;
}
.how-visual img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(0.5) contrast(1.5)}
.how-visual .overlay{position:absolute;inset:0;background:rgba(85,204,106,0.03)}
.how-visual .tag{
  position:absolute;font-size:9px;font-weight:700;color:#55cc6a;
  background:rgba(0,0,0,0.8);padding:0.2rem 0.5rem;border:1px solid rgba(85,204,106,0.12);
}
.how-visual .tag-tl{top:0.6rem;left:0.6rem}
.how-visual .tag-tr{top:0.6rem;right:0.6rem}
.how-visual .bar-wrap{position:absolute;bottom:0.6rem;left:0.6rem;right:0.6rem}
.how-visual .bar-bg{width:100%;height:3px;background:rgba(85,204,106,0.12);margin-bottom:0.25rem}
.how-visual .bar-fill{height:100%;width:66%;background:#55cc6a}
.how-visual .bar-labels{display:flex;justify-content:space-between;font-size:9px;color:#55cc6a}

/* ===== CTA ===== */
.cta{padding:4.5rem 2rem;text-align:center;border-top:1px solid rgba(58,170,85,0.06)}
.cta h2{font-family:'Orbitron',sans-serif;font-size:clamp(1.1rem,2.5vw,1.6rem);letter-spacing:0.12em;color:#fff;margin-bottom:0.6rem}
.cta p{font-size:0.88rem;color:#bdcaba;margin-bottom:1.75rem;opacity:0.7}
.cta-note{margin-top:1.25rem;font-size:10px;color:rgba(85,204,106,0.25);letter-spacing:0.2em;text-transform:uppercase}

/* ===== Footer ===== */
.site-footer{
  padding:1rem 2rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
  background:rgba(5,5,5,0.95);border-top:1px solid rgba(58,170,85,0.06);
}
.footer-copy{font-size:10px;color:#55cc6a;letter-spacing:0.08em;text-transform:uppercase}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-size:10px;color:rgba(58,170,85,0.3);text-decoration:none;letter-spacing:0.08em;text-transform:uppercase;transition:color .15s}
.footer-links a:hover{color:#55cc6a}

/* ===== Responsive ===== */
@media(max-width:768px){
  .nav-menu{display:none}
  .hero-overlay{flex-direction:column;align-items:stretch}
  .telemetry-readout{width:100%}
  .how-layout{flex-direction:column}
  .how-visual{max-width:100%}
  .btn-ghost{margin-left:0;margin-top:0.5rem;display:block;text-align:center}
  .site-footer{flex-direction:column;text-align:center}
  .sources-grid{grid-template-columns:1fr}
}