:root{
  --bg:#0b0f14;
  --fg:#e6f1ff;
  --muted:#9fb3c8;
  --accent:#29ffc6;
  --accent2:#00c2ff;
  --glow: rgba(0, 194, 255, 0.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--fg);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,194,255,0.10), transparent 60%),
    radial-gradient(1200px 600px at -10% 110%, rgba(41,255,198,0.08), transparent 60%),
    var(--bg);
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* Subtle tech grid */
.grid{
  position:fixed; inset:0; pointer-events:none; opacity:.12;
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, #0f1623 30px),
    repeating-linear-gradient(90deg, transparent 0 29px, #0f1623 30px);
}

/* Card */
.card{
  position:relative;
  padding:2.8rem 2.2rem;
  width:min(680px, 92vw);
  background:rgba(9,13,20,.55);
  backdrop-filter:saturate(120%) blur(6px);
  border:1px solid #132033;
  border-radius:16px;
  box-shadow: 0 0 0 1px #0e1b2b inset, 0 20px 60px -20px var(--glow);
  animation: float 10s ease-in-out infinite;
}
@keyframes float { 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-6px)} }

h1{
  margin:0 0 .6rem; line-height:1.1; font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight:800; letter-spacing:.5px;
  text-shadow: 0 0 18px rgba(0,194,255,.25), 0 0 2px rgba(0,0,0,.6);
}
h1 .accent{ color: var(--accent2) }
.cursor{ animation: blink 1.1s steps(1) infinite }
@keyframes blink { 50% { opacity:0 } }

.tagline{
  margin:.2rem 0 1.2rem; color:var(--muted); font-size: clamp(.95rem, 2.2vw, 1.05rem);
}

.meta{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.2rem }
.chip{
  padding:.35rem .6rem; border:1px solid #19324a; border-radius:999px;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.0));
  color:#cbd8e6; font-size:.8rem
}

.links{ display:flex; gap:.6rem; flex-wrap:wrap }
.btn{
  padding:.7rem 1rem; border-radius:10px; text-decoration:none; font-weight:600;
  color:#001018; background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 30px -10px var(--glow);
  border:1px solid rgba(0,0,0,.2);
}
.btn:hover{ transform: translateY(-1px); transition: .15s ease-out }
.btn.ghost{
  color:var(--fg); background:transparent; border:1px solid #1a2b42
}

footer{
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  color:#6f879f; font-size:.8rem; opacity:.8
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card{ animation:none }
  .cursor{ animation:none }
}