:root{
  --ink:#fff; --muted:rgba(255,255,255,.78); --line:rgba(255,255,255,.22); --glass:rgba(255,255,255,.12);
  --indigo:#6366f1; --violet:#a855f7; --amber:#fbbf24; --teal:#2dd4bf; --coral:#fb7185; --blue:#3b82f6;
}
*{box-sizing:border-box;margin:0}
body{
  min-height:100vh; padding:28px 16px; color:var(--ink); overflow-x:hidden;
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(135deg,#312e81 0%,#5b21b6 45%,#be185d 100%);
}
.bg span{position:fixed;border-radius:50%;filter:blur(80px);z-index:0;animation:float 14s ease-in-out infinite}
.bg span:nth-child(1){width:380px;height:380px;background:var(--teal);opacity:.35;top:-120px;right:-80px}
.bg span:nth-child(2){width:340px;height:340px;background:var(--amber);opacity:.28;bottom:-140px;left:-90px;animation-delay:-5s}
.bg span:nth-child(3){width:260px;height:260px;background:var(--blue);opacity:.3;top:40%;left:-80px;animation-delay:-8s}
.bg span:nth-child(4){width:220px;height:220px;background:var(--coral);opacity:.3;bottom:10%;right:5%;animation-delay:-11s}
@keyframes float{50%{transform:translate(30px,-30px) scale(1.08)}}

.confetti{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:8px;height:14px;border-radius:2px;opacity:.8;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

.wrap{position:relative;z-index:1;max-width:1040px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.logo{width:44px;height:44px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3))}
.name{font-size:1.5rem;font-weight:800;letter-spacing:.02em}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;min-height:62vh}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--amber);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(251,191,36,.7)}70%,100%{box-shadow:0 0 0 10px transparent}}
h1{margin:18px 0 12px;font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.05;letter-spacing:-.02em;font-weight:800}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--amber),var(--coral),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);max-width:46ch;margin-bottom:28px;font-size:1.05rem}

.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px;max-width:480px}
.countdown div{padding:14px 4px;text-align:center;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.countdown .c1{background:linear-gradient(160deg,#818cf8,#6366f1)}
.countdown .c2{background:linear-gradient(160deg,#c084fc,#a855f7)}
.countdown .c3{background:linear-gradient(160deg,#2dd4bf,#0ea5e9)}
.countdown .c4{background:linear-gradient(160deg,#fbbf24,#f97316)}
.countdown b{display:block;font-size:clamp(1.5rem,5vw,2.2rem);font-variant-numeric:tabular-nums;line-height:1.3}
.countdown small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.92}

.progress{max-width:480px}
.progress-top{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);margin-bottom:6px}
.bar{height:10px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden}
.bar i{display:block;height:100%;width:85%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--amber),var(--coral));animation:grow 1.8s ease-out both}
@keyframes grow{from{width:0}}

.art svg{width:100%;height:auto;max-height:500px;overflow:visible;filter:drop-shadow(0 20px 30px rgba(0,0,0,.25))}
.book{animation:bob 5s ease-in-out infinite;transform-origin:220px 260px}
.bulb{animation:bulb 3s ease-in-out infinite;transform-origin:220px 105px}
.cap{animation:cap 4.5s ease-in-out infinite;transform-origin:340px 170px}
.orbit{transform-origin:220px 220px;animation:spin 16s linear infinite}
.orbit.o2{animation-duration:11s;animation-direction:reverse}
.ring{transform-origin:220px 220px;animation:spin 70s linear infinite}
.sp path{transform-box:fill-box;transform-origin:center;animation:twinkle 2.4s ease-in-out infinite}
.sp .s2{animation-delay:-.8s}.sp .s3{animation-delay:-1.6s}
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes bulb{50%{transform:scale(1.06)}}
@keyframes cap{50%{transform:translateY(-12px) rotate(-5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{50%{transform:scale(.4);opacity:.4}}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 30px}
.features article{
  padding:24px 22px;border-radius:20px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .2s;
}
.features article:hover{transform:translateY(-5px)}
.ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;margin-bottom:14px;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.f1 .ico{background:linear-gradient(135deg,#fbbf24,#f97316)}
.f2 .ico{background:linear-gradient(135deg,#2dd4bf,#3b82f6)}
.f3 .ico{background:linear-gradient(135deg,#fb7185,#a855f7)}
.ico svg{width:28px;height:28px}
.features h3{font-size:1.08rem;margin-bottom:4px}
.features p{color:var(--muted);font-size:.93rem}
footer{text-align:center;color:var(--muted);font-size:.82rem}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;min-height:0}
  .art{order:-1;max-width:320px;margin:0 auto}
  .features{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}