/* AskLien.ai — richting "Signaal" (bold & energiek) */
html { scroll-behavior: smooth; }
body { margin: 0; background: #f6f1e7; font-family: 'Schibsted Grotesk', sans-serif; color: #1c1a1f; overflow-x: hidden; }
a { color: #1c1a1f; text-decoration: none; }
a:hover { color: #ff4d24; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* Knoppen (hover overschrijft inline styles) */
.btn-primary:hover { background: #1c1a1f !important; color: #fff !important; }
.btn-dark:hover { background: #ff4d24 !important; color: #fff !important; }
.btn-outline:hover { border-color: #ff4d24 !important; color: #ff4d24 !important; }
.btn-white:hover { background: #1c1a1f !important; color: #fff !important; }
.btn-white-orange:hover { background: #1c1a1f !important; color: #fff !important; }
.btn-dark-to-white:hover { background: #fff !important; color: #1c1a1f !important; }
.logo:hover { color: #1c1a1f !important; }

/* Foto-placeholders: vervang door <img> zodra de foto's er zijn */
.img-slot { background: #ede5d3; border: 2px dashed #d8cdb4; border-radius: 20px; display: flex; align-items: center; justify-content: center; text-align: center; color: #8a8378; font-size: 14px; font-weight: 500; padding: 16px; box-sizing: border-box; max-width: 100%; }
.img-slot img, .img-slot video { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.img-slot.img-filled { background: none; border: none; padding: 0; }

/* Responsief: mockups zijn desktop-first, alles klapt hier netjes samen */
@media (max-width: 960px) {
  nav .nav-links a:not(.btn-primary) { display: none; }
  header [style*="grid-template-columns"],
  section [style*="grid-template-columns"],
  div[data-reveal][style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  section h2 { font-size: clamp(32px, 9vw, 44px) !important; letter-spacing: -1.5px !important; }
  section [style*="padding:64px"], section [style*="padding:72px"], section [style*="padding: 72px"],
  section [style*="padding:56px 64px"], section [style*="padding:48px 56px"] { padding: 36px 28px !important; }
  header [style*="padding:80px 64px"] { padding: 48px 28px !important; }
  .img-slot { width: 100% !important; }
  .outline-marquee { font-size: 64px !important; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row a { text-align: center; }

  /* Draaiende badges/ringen: op desktop hangen ze bewust net buiten de foto,
     maar op mobiel is er geen ruimte — dan blijven ze binnen de foto hangen. */
  .decor-badge--hero { left: auto !important; right: 10px !important; bottom: 10px !important; width: 84px !important; height: 84px !important; }
  .decor-badge--challenge { right: 10px !important; top: 10px !important; width: 78px !important; height: 78px !important; }
  .decor-ring { top: -8px !important; left: -8px !important; }
}