@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root{
  --bg:#070607;
  --accent:#ff3355;
  --muted:#9aa0a6;
  --mono: 'Courier New', Courier, monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#000 0%, #071018 60%);
  color:#e6eef6;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, var(--mono);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

/* Page container */
.screen{
  width:100%;
  max-width:980px;
  text-align:center;
  padding:16px;
}

/* Card */
.card{
  margin:14px auto;
  padding:28px;
  border-radius:10px;
  background:rgba(0,0,0,0.45);
  box-shadow:0 10px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
}

/* Headline + glitch */
.headline{font-size:36px; margin:6px 0 2px; letter-spacing:2px;}
.headline .glitch{
  position:relative;
  display:inline-block;
  color:#3aa0ff; /* changed: make PROJECT FALCON text blue */
  font-weight:700;
}
.headline .glitch::before,
.headline .glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  opacity:0.85;
  clip-path:polygon(0 0,100% 0,100% 33%,0 33%);
}
.headline .glitch::before{
  transform:translate(-2px,-1px);
  color:#ff77a0;
  mix-blend-mode:screen;
  animation:glitch-1 1.8s infinite linear alternate-reverse;
}
.headline .glitch::after{
  transform:translate(2px,1px);
  color:#66ffdd;
  mix-blend-mode:screen;
  animation:glitch-2 2.2s infinite linear alternate-reverse;
}

@keyframes glitch-1{
  0%{clip-path:polygon(0 0,100% 0,100% 20%,0 20%); transform:translate(-2px,-1px) skewX(-1deg)}
  50%{clip-path:polygon(0 40%,100% 40%,100% 60%,0 60%); transform:translate(-6px,0) skewX(2deg)}
  100%{clip-path:polygon(0 80%,100% 80%,100% 100%,0 100%); transform:translate(0,2px) skewX(-1deg)}
}
@keyframes glitch-2{
  0%{clip-path:polygon(0 10%,100% 10%,100% 30%,0 30%); transform:translate(2px,1px) skewX(1deg)}
  50%{clip-path:polygon(0 50%,100% 50%,100% 70%,0 70%); transform:translate(5px,-1px) skewX(-2deg)}
  100%{clip-path:polygon(0 90%,100% 90%,100% 100%,0 100%); transform:translate(-1px,0) skewX(1deg)}
}

/* Terminal */
.terminal{
  text-align:left;
  background:rgba(0,0,0,0.65);
  padding:18px;
  border-radius:6px;
  color:#7CFC00; /* changed: make terminal text green */
  font-family:var(--mono);
  font-size:13px;
  line-height:1.5;
  margin:0 auto 18px;
  max-width:820px;
  min-height:120px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* Hidden utility */
.hidden{display:none}

/* Main content */
.main-content .welcome{color:var(--muted); margin:10px 0 18px}

/* Centered button */
.button-container{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:8px 0 18px;
}
.btn{
  background:#111;
  color:var(--accent);
  border:1px solid rgba(255,255,255,0.06);
  padding:12px 20px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:1px;
}
.btn.flash{filter:brightness(1.25)}

/* Stage text - moving arrow / glitch */
.stage-text{
  color:var(--accent);
  font-weight:700;
  margin-top:12px;
  font-family:var(--mono);
  letter-spacing:1px;
  display:inline-block;
}
.stage-glitch{
  animation:slideUp 900ms ease-in-out forwards, flicker 1100ms steps(6) 1;
}
@keyframes slideUp{
  0%{opacity:0; transform:translateY(12px) scale(0.98)}
  60%{opacity:1; transform:translateY(-6px) scale(1.02)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
@keyframes flicker{
  0%{opacity:0.95}
  10%{opacity:0.3}
  20%{opacity:1}
  30%{opacity:0.4}
  60%{opacity:1}
  100%{opacity:1}
}

/* Footer note */
.note{color:#7f8a93;font-size:12px;margin-top:8px}

/* Responsive */
@media (max-width:520px){
  .headline{font-size:24px}
  .terminal{font-size:12px; min-height:90px}
}