:root {
  --night: #07021a;
  --pink: #ff2bd6;
  --hot: #ff3d7f;
  --cyan: #29f4ff;
  --orange: #ff9a3c;
  --yellow: #ffe45c;
  --violet: #9b5cff;
  --ink: #f6e9ff;
  --dim: #a98fd1;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--night); color: var(--ink); font-family: 'Orbitron', system-ui, sans-serif; overflow-x: hidden; }

.site { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 0 16px; }

.sky { position: fixed; inset: 0; z-index: 0; background: linear-gradient(180deg, #05011a 0%, #1b0546 38%, #5c0c6e 52%, #ff3d7f 58%, #2a0657 58.2%, #07021a 100%); overflow: hidden; }
.sun {
  position: absolute; left: 50%; top: 58%; width: min(48vw, 480px); transform: translate(-50%, -100%); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  aspect-ratio: 2 / 1;
  background: linear-gradient(180deg, #ffe45c 0%, #ff9a3c 45%, #ff3d7f 80%, #c21bd8 100%);
  box-shadow: 0 0 80px #ff2bd6, 0 0 160px rgba(255, 43, 214, 0.45);
  -webkit-mask: linear-gradient(180deg, #000 0 52%, transparent 52% 57%, #000 57% 68%, transparent 68% 75%, #000 75% 84%, transparent 84% 92%, #000 92% 100%);
          mask: linear-gradient(180deg, #000 0 52%, transparent 52% 57%, #000 57% 68%, transparent 68% 75%, #000 75% 84%, transparent 84% 92%, #000 92% 100%);
}
.grid {
  position: absolute; left: -50%; right: -50%; top: 58%; bottom: -20%; transform: perspective(300px) rotateX(62deg); transform-origin: top;
  background-image: linear-gradient(rgba(255, 43, 214, 0.75) 2px, transparent 2px), linear-gradient(90deg, rgba(41, 244, 255, 0.55) 2px, transparent 2px);
  background-size: 64px 64px; animation: drive 1.6s linear infinite; filter: drop-shadow(0 0 6px #ff2bd6);
}
@keyframes drive { to { background-position: 0 64px; } }
@media (prefers-reduced-motion: reduce) { .grid { animation: none; } }

.hero { position: relative; z-index: 1; text-align: center; max-width: 760px; padding: 9vh 0 4vh; }
.logo { margin: 0; display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: center; }
.logo-main {
  font-family: 'Monoton', cursive; font-weight: 400; font-size: clamp(48px, 11vw, 110px); line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #ffe9fb 30%, var(--pink) 55%, #5a12a8 56%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 43, 214, 0.85)) drop-shadow(0 0 36px rgba(155, 92, 255, 0.5));
}
.logo-script { font-family: 'Pacifico', cursive; font-size: clamp(30px, 6vw, 60px); color: var(--yellow); transform: rotate(-8deg); display: inline-block; text-shadow: 0 0 8px var(--orange), 0 0 24px var(--hot); }
.tag { font-family: 'VT323', monospace; font-size: clamp(20px, 3.4vw, 28px); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 6px var(--cyan), 0 0 18px rgba(41, 244, 255, 0.6), 0 2px 10px #000; margin: 10px 0 18px; }
.lede { font-family: 'VT323', monospace; font-size: clamp(20px, 3vw, 26px); line-height: 1.25; color: var(--ink); text-shadow: 0 2px 12px #000; margin: 0 auto 30px; max-width: 620px; }
.cta {
  display: inline-block; font: 900 clamp(14px, 2.4vw, 18px) 'Orbitron', sans-serif; letter-spacing: 0.2em; color: #160026; text-decoration: none;
  padding: 18px 38px; border-radius: 12px; background: linear-gradient(90deg, var(--pink), var(--orange));
  box-shadow: 0 0 8px var(--pink), 0 0 24px rgba(255, 43, 214, 0.75), 0 0 60px rgba(255, 43, 214, 0.4); transition: transform 0.1s, box-shadow 0.2s;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 0 10px var(--cyan), 0 0 30px rgba(41, 244, 255, 0.7), 0 0 70px rgba(41, 244, 255, 0.35); }
.cta:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.free { font-family: 'VT323', monospace; font-size: 19px; color: var(--ink); margin-top: 14px; text-shadow: 0 0 4px #000, 0 0 10px #000, 0 2px 8px #000; }

.features { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; width: min(1100px, 100%); margin: 6vh 0 40px; }
.feature { padding: 20px; border-radius: 14px; background: rgba(20, 6, 48, 0.72); border: 1px solid rgba(255, 43, 214, 0.55); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(41, 244, 255, 0.12) inset, 0 0 24px rgba(255, 43, 214, 0.25); }
.feature h2 { margin: 0 0 10px; font-size: 14px; letter-spacing: 0.25em; color: var(--pink); text-shadow: 0 0 6px var(--pink), 0 0 18px rgba(255, 43, 214, 0.7); }
.feature p { margin: 0; font-family: 'VT323', monospace; font-size: 20px; line-height: 1.2; color: var(--ink); }

.foot { position: relative; z-index: 1; margin-top: auto; padding: 24px 0 28px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-family: 'VT323', monospace; font-size: 17px; color: var(--dim); }