:root{
  --bg:#07080a;
  --bg-alt:#0b0d0a;
  --green:#9dff5c;
  --green-dim:#9dff5c66;
  --amber:#ffb020;
  --amber-dim:#ffb02055;
  --khaki:#c9c17a;
  --text:#e8e6d6;
  --text-dim:#8d9078;
  --border:#33361f;
  --font-display:'Black Ops One', 'Share Tech Mono', monospace;
  --font-tactical:'Rajdhani', 'Share Tech Mono', sans-serif;
  --font-mono:'Share Tech Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; font-size:112.5%;}

body{
  margin:0;
  background:
    radial-gradient(ellipse at 50% -10%, #161a0c 0%, var(--bg) 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-mono);
  overflow-x:hidden;
  position:relative;
}

/* ---------- ambient overlays ---------- */
.scanlines{
  pointer-events:none;
  position:fixed; inset:0; z-index:50;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode:overlay;
}

.noise{
  pointer-events:none;
  position:fixed; inset:0; z-index:49;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noiseshift 1s steps(2) infinite;
}
@keyframes noiseshift{
  0%{transform:translate(0,0);}
  50%{transform:translate(-2%,-1%);}
  100%{transform:translate(1%,2%);}
}

.crt-vignette{
  pointer-events:none;
  position:fixed; inset:0; z-index:48;
  box-shadow: inset 0 0 18vw 2vw rgba(0,0,0,0.85);
}

/* ---------- header wrapper ---------- */
.site-header{
  position:sticky; top:0; z-index:61;
}

/* ---------- language bar ---------- */
.lang-bar{
  display:flex; justify-content:center; gap:.4rem;
  padding:.5rem .5rem;
  background:#02050670;
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.lang-btn{
  display:flex; align-items:center; gap:.35rem;
  background:transparent;
  border:1px solid transparent;
  border-radius:2px;
  padding:.28rem .55rem;
  cursor:pointer;
  color:var(--text-dim);
  font-family:var(--font-tactical);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.06em;
  transition:.2s;
  line-height:1;
}
.lang-btn .flag{
  font-size:1rem;
  filter:grayscale(65%) brightness(.9);
  transition:.2s;
}
.lang-btn:hover{
  border-color:var(--green-dim);
  color:var(--green);
}
.lang-btn:hover .flag{ filter:none; }
.lang-btn.active{
  border-color:var(--green);
  color:var(--green);
  box-shadow:0 0 10px #9dff5c33;
}
.lang-btn.active .flag{ filter:none; }

/* ---------- topbar ---------- */
.topbar{
  z-index:60;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem 2rem;
  background:rgba(4,7,10,0.75);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.brand{
  font-family:var(--font-display);
  font-size:1.55rem;
  letter-spacing:.08em;
  color:var(--green);
  text-shadow:0 0 8px var(--green-dim);
}
.brand .dot{color:var(--amber);}
nav a{
  color:var(--text-dim);
  text-decoration:none;
  margin-left:1.8rem;
  font-family:var(--font-tactical);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.14em;
  transition:color .2s, text-shadow .2s;
}
nav a:hover{color:var(--khaki); text-shadow:0 0 8px var(--khaki);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:4rem 1.5rem 3rem;
  overflow:hidden;
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, #3a3d1f4d 1px, transparent 1px),
    linear-gradient(to bottom, #3a3d1f4d 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%, black 10%, transparent 70%);
          mask-image:radial-gradient(ellipse at 50% 30%, black 10%, transparent 70%);
  animation:gridpan 30s linear infinite;
}
@keyframes gridpan{
  0%{background-position:0 0;}
  100%{background-position:0 440px;}
}

.logo-frame{
  position:relative;
  width:220px; height:220px;
  margin:0 auto 2rem;
}
.logo-frame::before{
  content:"";
  position:absolute; inset:-22px;
  background:
    linear-gradient(var(--amber), var(--amber)) top left / 22px 3px no-repeat,
    linear-gradient(var(--amber), var(--amber)) top left / 3px 22px no-repeat,
    linear-gradient(var(--amber), var(--amber)) top right / 22px 3px no-repeat,
    linear-gradient(var(--amber), var(--amber)) top right / 3px 22px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom left / 22px 3px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom left / 3px 22px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom right / 22px 3px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom right / 3px 22px no-repeat;
  filter:drop-shadow(0 0 6px var(--amber-dim));
  z-index:3;
}
.logo-gif{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  filter:drop-shadow(0 0 18px var(--green)) drop-shadow(0 0 40px var(--amber-dim));
  border:2px solid var(--green);
  position:relative; z-index:2;
}
.logo-ring{
  position:absolute; inset:-11px;
  border:1px dashed var(--khaki);
  border-radius:50%;
  animation:spin 14s linear infinite;
  opacity:.55;
  z-index:1;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

h1.glitch{
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 4.6vw, 3.3rem);
  letter-spacing:.02em;
  margin:.2rem 0 .8rem;
  color:var(--text);
  position:relative;
  text-shadow:0 0 12px var(--green-dim);
  line-height:1.15;
  max-width:94vw;
  overflow-wrap:break-word;
}
h1.glitch::before, h1.glitch::after{
  content:attr(data-text);
  position:absolute; left:0; top:0; width:100%;
  overflow-wrap:break-word;
}
h1.glitch::before{
  color:var(--amber);
  clip-path:inset(0 0 55% 0);
  transform:translate(-2px,-1px);
  animation:glitchTop 3.4s infinite linear alternate-reverse;
}
h1.glitch::after{
  color:var(--khaki);
  clip-path:inset(55% 0 0 0);
  transform:translate(2px,1px);
  animation:glitchBottom 2.6s infinite linear alternate-reverse;
}
@keyframes glitchTop{
  0%,100%{transform:translate(-2px,-1px);}
  20%{transform:translate(2px,-2px);}
  40%{transform:translate(-3px,1px);}
  60%{transform:translate(3px,0);}
  80%{transform:translate(-1px,2px);}
}
@keyframes glitchBottom{
  0%,100%{transform:translate(2px,1px);}
  25%{transform:translate(-2px,2px);}
  50%{transform:translate(3px,-1px);}
  75%{transform:translate(-3px,-2px);}
}

h2.glitch.small{
  font-size:clamp(1.8rem, 5.5vw, 2.9rem);
  line-height:1.2;
  max-width:94vw;
  overflow-wrap:break-word;
  margin-left:auto; margin-right:auto;
}

.subtitle{
  color:var(--green);
  font-family:var(--font-tactical);
  font-weight:600;
  letter-spacing:.14em;
  font-size:1rem;
  max-width:680px;
  margin:0 auto 2.2rem;
  text-shadow:0 0 6px var(--green-dim);
}

.prompt-line{
  font-size:1.1rem;
  color:var(--text-dim);
  margin-bottom:2.6rem;
}
.prompt{color:var(--amber); margin-right:.5rem;}
.typed{color:var(--green);}
.cursor{color:var(--green); animation:blink 1s step-start infinite;}
@keyframes blink{50%{opacity:0;}}

.scroll-cta{
  color:var(--khaki);
  text-decoration:none;
  border:1px solid var(--khaki);
  padding:.7rem 1.3rem;
  font-family:var(--font-tactical);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.15em;
  border-radius:2px;
  transition:.2s;
  animation:pulseGlow 2.4s ease-in-out infinite;
}
.scroll-cta:hover{background:var(--khaki); color:#00151a;}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0px var(--khaki);}
  50%{box-shadow:0 0 14px var(--khaki);}
}

/* ---------- shared section styling ---------- */
section{
  position:relative;
  z-index:1;
  padding:6rem 1.5rem;
  max-width:980px;
  margin:0 auto;
}
.section-label{
  color:var(--amber);
  font-family:var(--font-tactical);
  font-weight:700;
  letter-spacing:.2em;
  font-size:.9rem;
  margin-bottom:1.6rem;
  text-shadow:0 0 6px #ffb02066;
}

/* ---------- manifesto ---------- */
.manifesto-text p{
  font-size:1.15rem;
  line-height:1.85;
  color:var(--text);
  margin:0 0 1.3rem;
  max-width:780px;
}
.manifesto-text em{color:var(--green); font-style:normal;}
.manifesto-text .emphasis{
  color:var(--khaki);
  border-left:3px solid var(--khaki);
  padding-left:1rem;
  font-size:1.2rem;
}

/* ---------- pillars ---------- */
.pillar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.4rem;
}
.pillar-card{
  border:1px solid var(--border);
  background:linear-gradient(180deg, #0c0e08, #080905);
  padding:1.8rem 1.5rem;
  border-radius:2px;
  transition:.25s;
  position:relative;
  overflow:hidden;
}
.pillar-card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent, #9dff5c14, transparent);
  transform:translateX(-100%);
  transition:.5s;
}
.pillar-card::after{
  content:"";
  position:absolute; inset:8px;
  pointer-events:none;
  background:
    linear-gradient(var(--amber-dim), var(--amber-dim)) top left / 12px 2px no-repeat,
    linear-gradient(var(--amber-dim), var(--amber-dim)) top left / 2px 12px no-repeat,
    linear-gradient(var(--amber-dim), var(--amber-dim)) bottom right / 12px 2px no-repeat,
    linear-gradient(var(--amber-dim), var(--amber-dim)) bottom right / 2px 12px no-repeat;
  opacity:0;
  transition:opacity .25s;
}
.pillar-card:hover{
  border-color:var(--green);
  box-shadow:0 0 22px #9dff5c22;
  transform:translateY(-3px);
}
.pillar-card:hover::before{transform:translateX(100%);}
.pillar-card:hover::after{opacity:1;}
.pillar-icon{
  font-family:var(--font-display);
  color:var(--amber);
  font-size:1.35rem;
  margin-bottom:.6rem;
}
.pillar-card h3{
  font-family:var(--font-tactical);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.06em;
  color:var(--green);
  margin:0 0 .7rem;
}
.pillar-card p{
  font-size:1rem;
  line-height:1.6;
  color:var(--text-dim);
  margin:0;
}

/* ---------- join ---------- */
.join{ text-align:center; }
.join-copy{
  max-width:680px;
  margin:0 auto 2.2rem;
  color:var(--text-dim);
  font-size:1.08rem;
  line-height:1.8;
}

.nostr-rationale{
  max-width:720px;
  margin:0 auto 2.4rem;
  text-align:left;
  border-left:2px solid var(--amber-dim);
  padding:.2rem 0 .2rem 1.4rem;
}
.nostr-rationale h3{
  font-family:var(--font-tactical);
  font-weight:700;
  color:var(--amber);
  letter-spacing:.1em;
  font-size:1.05rem;
  margin:0 0 .8rem;
}
.nostr-rationale p{
  color:var(--text-dim);
  font-size:1rem;
  line-height:1.75;
  margin:0 0 1rem;
}
.nostr-rationale p:last-child{ margin-bottom:0; }

.pubkey-block{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.6rem 1rem;
  max-width:720px;
  margin:0 auto 2.2rem;
  padding:.9rem 1.2rem;
  border:1px solid var(--border);
  background:#0a0b07;
  border-radius:2px;
}
.pubkey-label{
  font-family:var(--font-tactical);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  color:var(--amber);
  flex:0 0 100%;
}
.pubkey-value{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--green);
  word-break:break-all;
  flex:1 1 auto;
  text-align:left;
}
.copy-btn{
  font-family:var(--font-tactical);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--khaki);
  background:transparent;
  border:1px solid var(--khaki);
  border-radius:2px;
  padding:.4rem .8rem;
  cursor:pointer;
  transition:.2s;
  flex:0 0 auto;
}
.copy-btn:hover{ background:var(--khaki); color:#1a1a08; }
.copy-btn.copied{
  color:var(--green);
  border-color:var(--green);
}

.join-actions{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-bottom:1rem;
}
.btn{
  text-decoration:none;
  padding:.9rem 2rem;
  font-size:1rem;
  font-family:var(--font-tactical);
  font-weight:700;
  letter-spacing:.14em;
  border-radius:2px;
  transition:.2s;
}
.btn-primary{
  background:var(--green);
  color:#04120c;
  box-shadow:0 0 18px #9dff5c55;
}
.btn-primary:hover{background:var(--khaki); box-shadow:0 0 22px #c9c17a77;}
.btn-ghost{
  border:1px solid var(--amber);
  color:var(--amber);
}
.btn-ghost:hover{background:var(--amber); color:#1a0012;}
.join-hint{
  font-size:.82rem;
  color:var(--text-dim);
  letter-spacing:.03em;
  margin:0 0 1.2rem;
}
.join-note{
  font-size:.7rem;
  color:#4d6a60;
  letter-spacing:.05em;
}

/* ---------- footer ---------- */
.outro{
  text-align:center;
  padding:5rem 1.5rem 4rem;
  border-top:1px solid var(--border);
  margin-top:2rem;
}
.legion-line{
  font-family:var(--font-display);
  font-size:1.3rem;
  letter-spacing:.03em;
  color:var(--text);
  margin:.4rem 0;
  line-height:1.5;
}
.legion-line.accent{
  color:var(--amber);
  text-shadow:0 0 10px #ffb02088;
}
.fine-print{
  max-width:660px;
  margin:2rem auto 0;
  font-size:.82rem;
  line-height:1.7;
  color:#6b6f4a;
}
.analytics-note{
  margin-top:.8rem;
  font-size:.72rem;
  color:#4d5136;
}
.copyright{
  margin-top:1.4rem;
  font-size:.8rem;
  font-family:var(--font-tactical);
  color:#565a3a;
  letter-spacing:.1em;
}

@media (max-width:600px){
  .topbar{
    padding:.9rem 1.1rem;
    flex-wrap:wrap;
    justify-content:center;
    gap:.6rem;
    row-gap:.5rem;
  }
  nav{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    width:100%;
  }
  nav a{margin-left:0; margin:0 .6rem; font-size:.78rem;}
  .legion-line{font-size:1.05rem;}
}

/* ---------- audio control ---------- */
.audio-control{
  position:fixed;
  right:1.2rem;
  bottom:1.2rem;
  z-index:70;
}
.audio-toggle-btn{
  display:flex; align-items:center; gap:.55rem;
  background:#07080590;
  backdrop-filter:blur(6px);
  border:1px solid var(--khaki);
  border-radius:2px;
  padding:.65rem 1rem;
  cursor:pointer;
  font-family:var(--font-tactical);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--khaki);
  transition:.2s;
}
.audio-toggle-btn:hover{
  border-color:var(--amber);
  color:var(--amber);
  box-shadow:0 0 14px var(--amber-dim);
}
.audio-icon{
  font-size:.6rem;
  color:var(--text-dim);
  transition:.2s;
}
.audio-control.playing .audio-toggle-btn{
  border-color:var(--green);
  color:var(--green);
}
.audio-control.playing .audio-icon{
  color:var(--green);
  animation:audioPulse 1.4s ease-in-out infinite;
}
.audio-control.muted .audio-toggle-btn{
  border-color:var(--text-dim);
  color:var(--text-dim);
}
@keyframes audioPulse{
  0%,100%{opacity:1; text-shadow:0 0 4px var(--green);}
  50%{opacity:.35; text-shadow:none;}
}

@media (max-width:600px){
  .audio-control{ right:.8rem; bottom:.8rem; }
  .audio-toggle-btn{ padding:.55rem .8rem; font-size:.7rem; }
}