:root{
  --bg:#0b1120;
  --ink:#eaf2ff;
  --muted:#b9c7e6;
  --accent:#5be7c4;
  --accent-2:#ff4d8d;
  --primary:#5b86ff;
  --card:#121f3d;
  --border:rgba(255,255,255,.14);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 20% -20%, #1b2546 0%, transparent 60%),
    radial-gradient(1200px 800px at 80% -10%, #1f2d52 0%, transparent 60%),
    var(--bg);
  overflow-x:hidden;
}

#fireworks{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:0}

.header{position:relative; z-index:1; padding:clamp(24px, 6vw, 64px) 5vw 24px}
.header__inner{
  display:grid; gap:2rem; align-items:center;
  grid-template-columns: 1.1fr .9fr;
}
.brand h1{margin:0 0 .25rem; font-size:clamp(2rem, 5vw, 3.2rem)}
.brand .accent{color:var(--accent)}
.tagline{color:var(--muted); margin:.25rem 0 1rem}
.actions{display:flex; gap:.75rem; flex-wrap:wrap}

.btn{
  border:1px solid var(--border);
  background:transparent; color:var(--ink);
  padding:.6rem 1rem; border-radius:14px; cursor:pointer;
  transition:.2s transform, .2s border, .2s background;
  box-shadow:var(--shadow);
  text-decoration:none;
}
.btn:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.4)}
.btn-primary{background:var(--primary); border-color:transparent; color:#fff}
.btn-hero{
  display:inline-block; text-decoration:none; color:#0b0b0b;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none; padding:1rem 1.5rem; border-radius:16px; box-shadow:var(--shadow); font-weight:700;
}

.hero{
  justify-self:end; max-width:min(460px, 40vw); aspect-ratio:3/4;
  border-radius:22px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow);
}
.hero img{width:100%; height:100%; object-fit:cover}

.main{position:relative; z-index:1}
.panel{
  margin:0 auto; padding:clamp(28px, 5vw, 64px) 5vw;
  max-width:1100px;
}

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:1rem; box-shadow:var(--shadow);
}

.lead-intro p{margin:.35rem 0}
.closer p{margin:.35rem 0}

.grid-2{display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); margin-top:1rem}
.grid-3{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); margin:1rem 0}
.mini h4{margin:.25rem 0 .35rem; color:var(--accent)}

.checks{margin:.6rem 0 0 0; padding-left:1.1rem}
.checks li{margin:.25rem 0}
.checks li::marker{content:"✔️ "}

.callout{
  margin:1rem 0;
  border-left:4px solid var(--accent);
  padding:.75rem 1rem;
  background:rgba(255,255,255,.04);
  border-radius:8px;
  color:var(--ink);
}

.jokes{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-block:1px solid var(--border);
  text-align:center
}
.joke{
  background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
  padding:1rem 1.2rem; border-radius:14px; max-width:900px; margin:0 auto 1rem;
  font-size:1.2rem;
}
.joke-actions{display:flex; gap:.75rem; justify-content:center}
.hint{color:var(--muted); font-size:.95rem}

.vote{text-align:center}
.vote .lead{font-size:1.15rem}

.footer{padding:28px 5vw; text-align:center; color:var(--muted)}

@media (max-width: 980px){
  .header__inner{grid-template-columns:1fr; text-align:center}
  .hero{justify-self:center; max-width:min(420px, 70vw)}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}
/* keep existing styles… then add/adjust: */

.fun-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.fun-list li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .8rem 1rem;
  margin-bottom: .75rem;
  box-shadow: var(--shadow);
  transition: transform .2s;
}
.fun-list li:hover {
  transform: translateY(-3px);
}

.flip {
  perspective: 1000px;
}
.flip .front, .flip .back {
  backface-visibility: hidden;
  transition: transform .6s;
  border-radius: 12px;
  padding: 1rem;
}
.flip .front {
  background: var(--card);
  border: 1px solid var(--border);
}
.flip .back {
  background: var(--accent);
  color: #0b0b0b;
  border: 1px solid transparent;
  transform: rotateY(180deg);
  font-weight: 600;
}
.flip:hover .front {
  transform: rotateY(180deg);
}
.flip:hover .back {
  transform: rotateY(360deg);
}
/* ===== Crawling Bug ===== */
#bug{
  position: fixed;
  top: 50vh; left: 50vw;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 9999;
  pointer-events: none; /* don't block clicks */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  opacity: .95;
}

#bug svg{ display:block }

/* subtle leg wiggle “walk” */
#bug .legs path{
  animation: leg-walk .35s ease-in-out infinite alternate;
  transform-origin: center;
}
#bug .legs:nth-of-type(1) path:nth-child(odd){ animation-delay: .15s; }
#bug .legs:nth-of-type(2) path:nth-child(even){ animation-delay: .1s; }

@keyframes leg-walk{
  0%{ transform: rotate(-6deg); }
  100%{ transform: rotate(6deg); }
}

/* brief pause look */
#bug.paused{
  opacity: .9;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
}