/* ============================================
   CTA — Call To Action Section
   ============================================ */
.cta-section { width: 100vw; min-height: 50vh; background: var(--yellow); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 5vw; box-sizing: border-box; z-index: 20; position: relative; }
.cta-section h2 { font-family: 'Bangers', cursive; font-size: max(40px, 5vw); letter-spacing: 2px; margin-bottom: 2vh; color: var(--black); text-transform: uppercase; line-height: 1; }
.cta-section p { font-family: sans-serif; font-size: max(16px, 1.2vw); font-weight: 600; color: #333; margin-bottom: 4vh; }
.cta-btn { padding: 1vw 3vw; background: var(--black); color: var(--white); font-size: max(16px, 1.5vw); font-family: 'Bangers', cursive; border: 4px solid var(--black); border-radius: 50px; text-decoration: none; box-shadow: 8px 8px 0px rgba(0,0,0,0.2); transition: all 0.3s; }
.cta-btn:hover { background: var(--white); color: var(--black); transform: translate(-4px, -4px); box-shadow: 12px 12px 0px rgba(0,0,0,1); }

@media (max-width: 768px) {
  .cta-section { padding: 12vw 6vw; min-height: 40vh; }
  .cta-section h2 { font-size: 10vw; letter-spacing: 1px; }
  .cta-section p { font-size: 16px; }
  .cta-btn { padding: 12px 30px; font-size: 18px; border: 3px solid var(--black); box-shadow: 5px 5px 0px rgba(0,0,0,0.2); }
}