:root {
  --bg: #070712;
  --acid: #b8ff35;
  --cyan: #00f5ff;
  --pink: #ff2d78;
  --white: #f0f0f8;
  --glass: rgba(255,255,255,0.04);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; min-height: 100%; overflow-x: hidden; overflow-y: auto;
  background: var(--bg);
  font-family: 'Syne', sans-serif;
  color: var(--white);
  cursor: none;
}

/* ── CUSTOM CURSOR ── */
#cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; }
.cur-dot {
  width: 8px; height: 8px; background: var(--acid);
  border-radius: 50%; position: absolute; transform: translate(-50%,-50%);
  transition: transform .1s;
}
.cur-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(184,255,53,.45);
  border-radius: 50%; position: absolute; transform: translate(-50%,-50%);
  transition: all .18s cubic-bezier(.25,.46,.45,.94);
}

/* ── NOISE OVERLAY ── */
#noise {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px;
  mix-blend-mode: overlay;
}

/* ── CANVAS ── */
#bg-canvas { position: fixed; inset: 0; z-index: 0; }

/* ── LAYOUT ── */
.scene {
  position: relative; z-index: 2;
  width: 100vw; min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  padding: 100px 20px 90px;
}

/* ── TOP BAR ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 40px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  background: rgba(7,7,18,.55);
  z-index: 10;
  animation: slideDown .8s cubic-bezier(.22,1,.36,1) forwards;
}
.logo { font-weight: 800; font-size: 1.1rem; letter-spacing: .08em; color: var(--white); }
.logo-thin { font-weight: 400; }
.logo span { color: var(--acid); }
.status-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 999px;
  border: 1px solid rgba(184,255,53,.3);
  background: rgba(184,255,53,.07);
  font-family: 'Space Mono', monospace;
  font-size: .72rem; letter-spacing: .06em;
  color: var(--acid);
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acid);
  animation: pulseDot 1.4s ease-in-out infinite;
}

/* ── HERO ── */
.hero {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 0;
  animation: fadeUp 1s .35s cubic-bezier(.22,1,.36,1) both;
}

/* PLUG ANIMATION */
.plug-wrap {
  position: relative;
  width: 280px; height: 110px;
  margin-bottom: 28px;
  display: flex; align-items: center; justify-content: center;
}
.plug-left, .plug-right { position: absolute; display: flex; align-items: center; }
.plug-left { right: 50%; padding-right: 6px; animation: plugLeft 2.8s ease-in-out infinite; }
.plug-right { left: 50%; padding-left: 6px; animation: plugRight 2.8s ease-in-out infinite; }

.wire-left, .wire-right { height: 4px; width: 80px; border-radius: 4px; }
.wire-left { background: linear-gradient(90deg, #00f5ff, #0088aa); }
.wire-right { background: linear-gradient(90deg, #b8ff35 , #66aa10); }

.plug-body-left {
  width: 34px; height: 44px; border-radius: 6px;
  background: linear-gradient(160deg,#00d4e8,#006b78);
  box-shadow: 0 0 18px rgba(0,245,255,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6px; gap: 4px;
}
.plug-body-right {
  width: 34px; height: 44px; border-radius: 6px;
  background: linear-gradient(160deg,#c8ff50,#5a9900);
  box-shadow: 0 0 18px rgba(184,255,53,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px; gap: 4px;
}
.pin { width: 5px; height: 14px; border-radius: 2px; background: rgba(0,0,0,.4); }

/* spark burst at center */
.sparks {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 0; height: 0;
  pointer-events: none;
}
.spark {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--acid);
  border-radius: 50%;
  animation: sparkFly 2.8s ease-in-out infinite;
}
.spark:nth-child(1){ animation-delay:0s; --tx:18px; --ty:-22px; }
.spark:nth-child(2){ animation-delay:.07s; --tx:-20px; --ty:-18px; background:var(--cyan); }
.spark:nth-child(3){ animation-delay:.14s; --tx:14px; --ty:20px; background:var(--pink); }
.spark:nth-child(4){ animation-delay:.05s; --tx:-16px; --ty:22px; }
.spark:nth-child(5){ animation-delay:.1s; --tx:24px; --ty:8px; background:var(--cyan); }
.spark:nth-child(6){ animation-delay:.18s; --tx:-22px; --ty:4px; background:var(--pink); }

/* ── HEADLINE ── */
.headline {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
  margin-bottom: 14px;
}
.headline .line1 { display: block; color: var(--white); }
.headline .line2 {
  display: block;
  background: linear-gradient(90deg, var(--acid), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hueShift 4s linear infinite;
}
.sub {
  font-family: 'Space Mono', monospace;
  font-size: .88rem; color: rgba(240,240,248,.45);
  letter-spacing: .04em; margin-bottom: 36px;
  max-width: 420px; line-height: 1.65;
}

/* ── PROGRESS BAR ── */
.progress-wrap { width: min(420px, 90vw); margin-bottom: 36px; }
.progress-label {
  display: flex; justify-content: space-between;
  font-family: 'Space Mono', monospace;
  font-size: .7rem; color: rgba(240,240,248,.35);
  margin-bottom: 10px;
}
.progress-track {
  height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--acid), var(--cyan));
  width: 0%;
  animation: fillBar 6s cubic-bezier(.25,.1,.25,1) 1.5s forwards;
  box-shadow: 0 0 12px var(--acid);
}

/* ── COUNTDOWN ── */
.countdown { display: flex; gap: 20px; margin-bottom: 36px; }
.time-block {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 14px 20px;
  backdrop-filter: blur(8px);
  min-width: 72px;
  transition: border-color .3s, box-shadow .3s;
}
.time-block:hover {
  border-color: rgba(184,255,53,.4);
  box-shadow: 0 0 24px rgba(184,255,53,.12);
}
.time-num {
  font-size: 1.8rem; font-weight: 800;
  background: linear-gradient(160deg,var(--white),rgba(240,240,248,.5));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.time-lbl {
  font-family: 'Space Mono', monospace;
  font-size: .58rem; letter-spacing: .08em;
  color: rgba(240,240,248,.3);
}

/* ── NOTIFY FORM ── */
.notify-row { display: flex; gap: 10px; width: min(420px, 90vw); }
.notify-input {
  flex: 1; padding: 13px 18px;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; color: var(--white);
  font-family: 'Space Mono', monospace;
  font-size: .8rem; outline: none;
  transition: border-color .25s, box-shadow .25s;
  backdrop-filter: blur(8px);
}
.notify-input::placeholder { color: rgba(240,240,248,.25); }
.notify-input:focus {
  border-color: rgba(184,255,53,.5);
  box-shadow: 0 0 20px rgba(184,255,53,.12);
}
.notify-btn {
  padding: 13px 22px; border-radius: 10px; border: none;
  background: var(--acid); color: #070712;
  font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: .82rem; cursor: none;
  transition: transform .2s, box-shadow .2s, background .2s;
  white-space: nowrap;
}
.notify-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 0 28px rgba(184,255,53,.5);
  background: #ccff55;
}
.notify-btn:active { transform: scale(.97); }

/* ── BOTTOM BAR ── */
.bottombar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 40px;
  border-top: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  background: rgba(7,7,18,.55);
  z-index: 10;
  font-family: 'Space Mono', monospace;
  font-size: .65rem; color: rgba(240,240,248,.3);
  animation: slideUp .8s cubic-bezier(.22,1,.36,1) forwards;
}
.social-links { display: flex; gap: 16px; }
.social-links a {
  color: rgba(240,240,248,.3); text-decoration: none;
  transition: color .2s;
}
.social-links a:hover { color: var(--acid); }

/* ── FLOATING TAGS ── */
.tag {
  position: fixed; border-radius: 999px;
  border: 1px solid rgba(184,255,53,.25);
  background: rgba(184,255,53,.08);
  backdrop-filter: blur(8px);
  font-family: 'Space Mono', monospace;
  font-size: .7rem; color: rgba(184,255,53,.75);
  padding: 6px 14px; pointer-events: none;
  animation: floatTag 12s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(184,255,53,.4);
  box-shadow: 0 0 15px rgba(184,255,53,.15);
}
.tag:nth-child(1){ top:18%; left:6%; animation-duration:11s; }
.tag:nth-child(2){ top:25%; right:7%; animation-duration:13s; animation-delay:-4s; }
.tag:nth-child(3){ top:65%; left:5%; animation-duration:10s; animation-delay:-2s; }
.tag:nth-child(4){ top:72%; right:6%; animation-duration:14s; animation-delay:-6s; }
.tag:nth-child(5){ top:42%; left:3%; animation-duration:9s; animation-delay:-1s; }
.tag:nth-child(6){ top:55%; right:4%; animation-duration:12s; animation-delay:-8s; }

/* ── KEYFRAMES ── */
@keyframes slideDown { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:none} }
@keyframes slideUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes fadeUp    { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:none} }
@keyframes pulseDot  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)} }

@keyframes plugLeft {
  0%,100%{ transform:translateX(0) }
  40%{ transform:translateX(-18px) }
  60%{ transform:translateX(-18px) }
}
@keyframes plugRight {
  0%,100%{ transform:translateX(0) }
  40%{ transform:translateX(18px) }
  60%{ transform:translateX(18px) }
}
@keyframes sparkFly {
  0%,35%,100%{ opacity:0; transform:translate(0,0) scale(0) }
  45%{ opacity:1; transform:translate(var(--tx),var(--ty)) scale(1.5) }
  55%{ opacity:0; transform:translate(calc(var(--tx)*2),calc(var(--ty)*2)) scale(0) }
}

@keyframes fillBar { from{width:0} to{width:73%} }
@keyframes hueShift { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(40deg)} }

@keyframes floatTag {
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-18px) rotate(1deg)}
}