/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');

/* ===== ANIMATIONS ===== */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes floatYb {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-18px) rotate(-8deg); }
}
@keyframes floatYc {
  0%, 100% { transform: translateY(0) rotate(7deg); }
  50%      { transform: translateY(-12px) rotate(7deg); }
}
@keyframes bobtilt {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-14px) rotate(-4deg); }
}
@keyframes sparkle-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 100px;
}

/* ===== SCROLL REVEAL ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.2, .8, .3, 1), transform .7s cubic-bezier(.2, .8, .3, 1);
}
[data-reveal].rv-in {
  opacity: 1;
  transform: none;
}

/* ===== CONFETTI / DECOR BASE ===== */
.confetti-item { position: absolute; pointer-events: none; user-select: none; }
.confetti-img { width: 80px; height: auto; display: block; }
.confetti-star-1 { top: 8%; left: 6%; font-size: 72px; color: #BBA9DA; animation: floatY 5s ease-in-out infinite; }
.confetti-game { top: 62%; left: 3%; font-size: 28px; animation: floatYb 6s ease-in-out infinite; }
.confetti-circle-gold { top: 14%; right: 7%; width: 26px; height: 26px; border-radius: 50%; background: #FFC93C; animation: floatYc 7s ease-in-out infinite; }
.confetti-robot { bottom: 12%; right: 5%; font-size: 30px; animation: floatY 5.5s ease-in-out infinite; }
.confetti-circle-purple { top: 40%; left: 48%; width: 16px; height: 16px; border-radius: 50%; background: #9B6DFF; animation: floatYb 6.5s ease-in-out infinite; }

/* ===== PIXEL BLOCKS ===== */
.px-block { border-radius: 4px; position: absolute; pointer-events: none; }
.px-b--1  { width:36px; height:36px; background:#9B7FD4; top:8%;    left:18%;  opacity:0.45; transform:rotate(12deg);  animation:floatY  6s   ease-in-out infinite; }
.px-b--2  { width:14px; height:14px; background:#EF9F27; top:12%;   left:55%;  opacity:0.40; transform:rotate(-8deg);  animation:floatYb 7s   ease-in-out infinite; }
.px-b--3  { width:48px; height:48px; background:#1D9E75; top:25%;   left:8%;   opacity:0.35; transform:rotate(18deg);  animation:floatYc 5s   ease-in-out infinite; }
.px-b--4  { width:12px; height:12px; background:#E24B4A; top:18%;   right:18%; opacity:0.40; transform:rotate(-14deg); animation:floatY  8s   ease-in-out infinite; }
.px-b--5  { width:40px; height:40px; background:#378ADD; top:45%;   left:6%;   opacity:0.30; transform:rotate(6deg);   animation:floatYb 6.5s ease-in-out infinite; }
.px-b--6  { width:22px; height:22px; background:#EF9F27; top:55%;   right:8%;  opacity:0.35; transform:rotate(-10deg); animation:floatYc 7.5s ease-in-out infinite; }
.px-b--7  { width:14px; height:14px; background:#9B7FD4; top:70%;   left:20%;  opacity:0.30; transform:rotate(20deg);  animation:floatY  5.5s ease-in-out infinite; }
.px-b--8  { width:52px; height:52px; background:#1D9E75; top:75%;   right:22%; opacity:0.35; transform:rotate(-5deg);  animation:floatYb 9s   ease-in-out infinite; }
.px-b--9  { width:12px; height:12px; background:#E24B4A; top:35%;   right:5%;  opacity:0.25; transform:rotate(15deg);  animation:floatYc 6s   ease-in-out infinite; }
.px-b--10 { width:44px; height:44px; background:#378ADD; bottom:10%; left:40%; opacity:0.30; transform:rotate(-18deg); animation:floatY  7s   ease-in-out infinite; }

.cta-confetti-layer { position: absolute; inset: 0; pointer-events: none; }
.cta-confetti-star { position: absolute; top: 14%; left: 8%; font-size: 30px; animation: floatY 5s ease-in-out infinite; }
.cta-confetti-circle-red { position: absolute; bottom: 16%; left: 14%; width: 20px; height: 20px; border-radius: 50%; background: #FF6B5E; animation: floatYb 6s ease-in-out infinite; }
.cta-confetti-game { position: absolute; top: 20%; right: 12%; font-size: 28px; animation: floatYc 6.5s ease-in-out infinite; }
.cta-confetti-square-blue { position: absolute; bottom: 22%; right: 9%; width: 24px; height: 24px; border-radius: 7px; background: #4D7CFF; transform: rotate(20deg); animation: floatY 5.5s ease-in-out infinite; }
.cta-confetti-spark { position: absolute; top: 60%; left: 46%; font-size: 24px; animation: floatYb 7s ease-in-out infinite; }
.code-symbol { font-family: monospace; font-weight: 700; color: #5540A8; opacity: 0.2; user-select: none; pointer-events: none; position: absolute; }
.code-symbol--1 { top: 15%; left: 8%; font-size: 18px; transform: rotate(-10deg); animation: floatY 5s ease-in-out infinite; }
.code-symbol--3 { top: 20%; right: 12%; font-size: 16px; transform: rotate(12deg); animation: floatYc 7s ease-in-out infinite; }
.code-symbol--4 { bottom: 20%; right: 6%; font-size: 13px; transform: rotate(-6deg); animation: floatY 5.5s ease-in-out infinite; }

/* ===== HAMBURGER ===== */
.nav-menu-btn { display: none !important; }
@media (max-width: 768px) {
  .nav-menu-btn { display: flex !important; }
  .nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255,251,244,.97);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid #F0E7D6;
    flex-direction: column;
    width: 100%;
    padding: 12px 20px 20px;
    gap: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
  }
  .nav-links.open { display: flex !important; }
  .nav-links a:not([href="#trial"]) {
    width: 100%;
    text-align: center;
    padding: 12px 14px !important;
    font-size: 15px !important;
  }
  .nav-links a[href="#trial"] {
    margin: 6px 0 0 0 !important;
    width: 100%;
    text-align: center;
    padding: 13px 20px !important;
    font-size: 16px !important;
    box-shadow: 0 4px 0 #0E9A78 !important;
  }
  .px-b--3, .px-b--5, .px-b--7, .px-b--9 { display: none; }
  .px-block { opacity: 0.2 !important; }
  .code-symbol { opacity: 0.1; }
  .hero-float-card { font-size: 11px; padding: 8px 14px; gap: 6px; }
  .hero-float-card--top { top: 4%; right: 0%; }
  .hero-float-card--bottom { bottom: 10%; left: 0%; }
}
@media (max-width: 480px) {
  .hero-float-card { display: none; }
}