/* ProLicense — Hacking Style Coming Soon Page */
:root{
  --bg:#050505;
  --green:#00ff9c;
  --green-dim:#00c77a;
  --text:#c8f3e1;
  --muted:#5e7f72;
  --scan: rgba(255,255,255,.03);
}

*{ box-sizing: border-box; }

html,body{
  height:100%;
  margin:0;
  background: radial-gradient(1200px 600px at 70% 20%, #0b1f18 0%, #060909 40%, #050505 60%, #030303 100%);
  color: var(--text);
  font-family: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  overflow:hidden;
}

#matrix{
  position:fixed;
  inset:0;
  z-index:0;
  background:transparent;
}

.overlay.scanlines{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    var(--scan) 3px,
    var(--scan) 4px
  );
  mix-blend-mode: overlay;
  z-index:2;
}

.shell{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem;
  text-align:center;
}

.brand h1{
  margin:0;
  font-size: clamp(2rem, 8vw, 5rem);
  letter-spacing:.08em;
  color: var(--green);
  text-shadow: 0 0 16px color-mix(in oklab, var(--green) 60%, white 0%);
}

.subtitle{
  margin:.5rem 0 0;
  color: var(--muted);
  font-size: clamp(.9rem, 2.2vw, 1.1rem);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}

.subtitle .dot{
  width:.5rem;height:.5rem;border-radius:50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  display:inline-block;
}

.terminal{
  width:min(900px, 92vw);
  background: #07110d;
  border:1px solid #11382a;
  box-shadow: 0 0 40px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.35);
  border-radius: 20px;
  padding:1.2rem 1rem 1.4rem;
  text-align:left;
  position:relative;
}

.prompt{
  color: var(--green);
  text-shadow: 0 0 10px color-mix(in oklab, var(--green) 70%, white 0%);
  margin-bottom:.6rem;
  font-size:1rem;
  letter-spacing:.03em;
}
.prompt .path{ color: var(--green); }
.prompt .tilde{ color: var(--green-dim); }
.prompt .cmd{ color: var(--text); }

.output{
  margin:0;
  white-space: pre-wrap;
  line-height:1.5;
  color:#c9ffe8;
  min-height: 5.5rem;
}

.cta{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.9rem 1.3rem;
  border-radius:999px;
  background: radial-gradient(200px 80px at 50% 30%, var(--green) 0%, var(--green-dim) 40%, #07995e 100%);
  border: 1px solid #0d5a3b;
  color:#032317;
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 6px 28px rgba(0, 255, 156, .15);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 36px rgba(0,255,156,.24); }
.btn:active{ transform: translateY(0); filter: brightness(.95); }

.btn.outline{
  background: transparent;
  color: var(--green);
  border: 1px solid #0d5a3b;
  box-shadow: inset 0 0 0 1px rgba(0,255,156,.2);
}

.foot{
  position:absolute;
  bottom:1rem;
  left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
}

.glitch{
  position:relative;
  display:inline-block;
}
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position:absolute;
  inset:0;
  clip-path: polygon(0 2%, 100% 2%, 100% 45%, 0 45%);
  opacity:.8;
}
.glitch::before{ left:1px; text-shadow:-2px 0 color-mix(in oklab,var(--green) 60%, white 0%); animation: glitch1 3s infinite linear alternate-reverse; }
.glitch::after{ left:-1px; text-shadow:2px 0 color-mix(in oklab,var(--green) 60%, white 0%); animation: glitch2 2.2s infinite linear alternate-reverse; }

@keyframes glitch1{
  0%{ clip-path: polygon(0 2%,100% 2%,100% 18%,0 18%); }
  20%{ clip-path: polygon(0 8%,100% 8%,100% 22%,0 22%); }
  40%{ clip-path: polygon(0 12%,100% 12%,100% 26%,0 26%); }
  60%{ clip-path: polygon(0 20%,100% 20%,100% 30%,0 30%); }
  80%{ clip-path: polygon(0 10%,100% 10%,100% 24%,0 24%); }
  100%{ clip-path: polygon(0 4%,100% 4%,100% 16%,0 16%); }
}
@keyframes glitch2{
  0%{ clip-path: polygon(0 48%,100% 48%,100% 70%,0 70%); }
  25%{ clip-path: polygon(0 52%,100% 52%,100% 74%,0 74%); }
  50%{ clip-path: polygon(0 60%,100% 60%,100% 78%,0 78%); }
  75%{ clip-path: polygon(0 64%,100% 64%,100% 82%,0 82%); }
  100%{ clip-path: polygon(0 58%,100% 58%,100% 72%,0 72%); }
}

/* Responsive tweaks */
@media (max-width: 560px){
  .terminal{ border-radius: 14px; }
  .btn{ padding:.8rem 1.1rem; }
}