:root{
  --bg1:#070A1A;
  --bg2:#0B2B4C;
  --neon1:#7c3aed;
  --neon2:#22d3ee;
  --text:#e8eefc;
}

body{
  min-height: 100vh;
  color: var(--text);
  overflow-x: hidden;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 500px at 50% 90%, rgba(34,211,238,.12), transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
}

/* subtle animated “shine” */
.shine{
  position: fixed;
  inset: -40%;
  background: conic-gradient(from 200deg,
    rgba(34,211,238,.0),
    rgba(34,211,238,.10),
    rgba(124,58,237,.12),
    rgba(34,211,238,.0)
  );
  filter: blur(40px);
  animation: drift 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes drift{
  from{ transform: translate3d(-3%, -2%, 0) rotate(-6deg) scale(1.05); }
  to  { transform: translate3d(3%,  2%, 0) rotate( 6deg) scale(1.08); }
}

.hero-wrap{
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2.25rem 1rem;
}

.glass-card{
  width: min(740px, 100%);
  border-radius: 1.25rem;
  background: rgba(10, 14, 30, 0.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(124,58,237,.10) inset;
  transform: translateY(6px);
  animation: popIn .65s ease-out both;
}
@keyframes popIn{
  from{ opacity: 0; transform: translateY(18px) scale(.98); }
  to  { opacity: 1; transform: translateY(6px)  scale(1); }
}

.kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .85rem;
  color: rgba(232,238,252,.75);
}

.headline{
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  margin: .35rem 0 1rem;
  background: linear-gradient(90deg, #ffffff, #bfe9ff, #d6c8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subcopy{
  font-size: 1.05rem;
  color: rgba(232,238,252,.82);
}

.neon-btn{
  position: relative;
  border: 0;
  color: #061018;
  font-weight: 700;
  padding: .85rem 1.05rem;
  border-radius: .95rem;
  background: linear-gradient(90deg, var(--neon2), var(--neon1));
  box-shadow:
    0 14px 30px rgba(34,211,238,.18),
    0 14px 40px rgba(124,58,237,.14);
  transition: transform .15s ease, filter .15s ease;
}
.neon-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.neon-btn:active{
  transform: translateY(0px) scale(.99);
}

.pulse-dot{
  display:inline-block;
  width: .6rem; height: .6rem;
  border-radius: 999px;
  background: var(--neon2);
  box-shadow: 0 0 0 0 rgba(34,211,238,.45);
  animation: pulse 1.6s ease-out infinite;
  vertical-align: middle;
  margin-left: .35rem;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(34,211,238,.45); }
  70%{ box-shadow: 0 0 0 14px rgba(34,211,238,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

.collapse-card{
  background: rgba(255,255,255,.06);
  color: rgba(232,238,252,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1rem;
}

.hint{
  font-size: .95rem;
  color: rgba(232,238,252,.70);
}