:root {
     --bg1: #0f172a;
     /* deep navy */
     --bg2: #0b1020;
     /* darker */
     --accent: #2fffa8;
     /* neon mint */
     --accent-2: #8a7bff;
     /* neon purple */
     --glass: rgba(255, 255, 255, 0.04);
     --mono: 'SFMono-Regular', Consolas, 'Roboto Mono', monospace;
 }

 html,
 body {
     height: 100%;
     margin: 0;
     font-family: var(--mono);
     background: linear-gradient(120deg, var(--bg1), var(--bg2));
     overflow: hidden;
     color: var(--accent);
 }

 /* centered hero */
 .wrap {
     height: 100vh;
     display: grid;
     place-items: center;
     gap: 12px
 }

 .card {
     width: min(980px, 95%);
     padding: 28px;
     border-radius: 20px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
     box-shadow: 0 10px 40px rgba(2, 6, 23, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02);
     position: relative;
     overflow: visible;
     border: 1px solid rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(6px);
 }

 h1 {
     font-size: 48px;
     margin: 6px 0;
     letter-spacing: 1px;
     color: transparent;
     -webkit-background-clip: text;
     background: linear-gradient(90deg, var(--accent), var(--accent-2));
 }

 p.lead {
     margin: 0;
     color: rgba(255, 255, 255, 0.6)
 }

 /* neon underline */
 .hline {
     height: 6px;
     width: 220px;
     border-radius: 999px;
     margin-top: 10px;
     background: linear-gradient(90deg, rgba(47, 255, 168, 0.12), rgba(138, 123, 255, 0.12));
     box-shadow: 0 0 28px rgba(47, 255, 168, 0.06);
 }

 /* animated particles using box-shadow on tiny dots (split across classes) */
 .dot {
     position: absolute;
     width: 6px;
     height: 6px;
     border-radius: 2px;
     background: var(--accent);
     opacity: 0.06;
     transform: rotate(180deg)
 }

 /* part A: scattered stars */
 .dot.a {
     left: 6px;
     top: 6px;
     box-shadow:
         40px 20px var(--accent), 120px 40px var(--accent), 320px 10px var(--accent),
         600px 80px var(--accent), 820px 30px var(--accent)
 }

 /* part B: more stars (placed elsewhere) */
 .dot.b {
     left: 0;
     top: 0;
     box-shadow:
         16px 120px var(--accent-2), 200px 96px var(--accent-2), 440px 140px var(--accent-2),
         760px 40px var(--accent-2)
 }

 /* part C: nearer glow */
 .dot.c {
     left: 4px;
     top: 40px;
     opacity: 0.08;
     box-shadow:
         200px 16px var(--accent), 280px 60px var(--accent), 520px 28px var(--accent)
 }

 /* floating shapes (pseudo-3D) */
 .float {
     position: absolute;
     right: -120px;
     top: 20px;
     width: 240px;
     height: 240px;
     border-radius: 26px;
     background: linear-gradient(135deg, rgba(138, 123, 255, 0.06), rgba(47, 255, 168, 0.06));
     filter: blur(36px);
     transform: rotate(8deg);
     pointer-events: none
 }

 /* subtle animated scanline */
 .scan {
     position: absolute;
     inset: 0;
     pointer-events: none;
     background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%);
     mix-blend-mode: screen;
     animation: scan 6s linear infinite
 }

 @keyframes scan {
     0% {
         transform: translateY(-25%)
     }

     50% {
         transform: translateY(25%)
     }

     100% {
         transform: translateY(-25%)
     }
 }

 /* glassy button just for show */
 .btn {
     display: inline-block;
     padding: 10px 16px;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.06);
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
     color: var(--accent);
     cursor: default;
     font-weight: 600
 }

 footer {
     margin-top: 18px;
     color: rgba(255, 255, 255, 0.18);
     font-size: 13px
 }