:root {
  --bg1: #0a1220;
  --bg2: #112a3f;
  --accent: #3dd6ff;
  --accent2: #7cff7a;
  --text: #eef5ff;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: var(--text); }
body { overflow: hidden; background: radial-gradient(circle at 20% 20%, #234664 0%, transparent 35%), radial-gradient(circle at 80% 70%, #1f5c4e 0%, transparent 28%), linear-gradient(140deg, var(--bg1), var(--bg2)); }
.bg { position: fixed; inset: 0; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 12px); opacity: .35; }
.hero {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 24px;
}
h1 { margin: 0 0 10px; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 1px; }
p { margin: 0 0 28px; opacity: .9; max-width: 680px; }
.cta {
  display: inline-block;
  text-decoration: none;
  color: #06202f;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  font-weight: 700;
  font-size: 1.1rem;
  padding: 15px 34px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(61,214,255,.35);
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(124,255,122,.35); filter: brightness(1.05); }
small { margin-top: 16px; opacity: .75; }