/* style.css — personnalisations & animations */

/* body font fallback if Inter not available */
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

/* Mockup phone decoration */
.mockup-phone { width: 260px; }
.phone-screen { width: 220px; height: 420px; border-radius: 26px; box-shadow: 0 20px 50px rgba(2,6,23,0.18), inset 0 -6px 12px rgba(0,0,0,0.06); }

/* CTA buttons - Play & Telegram styles */
.play-btn { background-position: 0% 0%; }
.play-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(4,120,87,0.18); }

.telegram-btn { background-position: 50% 0%; }
.telegram-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(14,165,233,0.12); }

/* Animated pulse on Telegram small header (optional) */
#telegramHeader svg { transition: transform .25s ease; }
#telegramHeader:hover svg { transform: translateX(-3px) scale(1.02); }

/* Dropdown menu styling */
#dropdownMenu a { display:block; padding:10px 12px; color:#0f172a; text-decoration:none; }
#dropdownMenu a:hover { background:#f8fafc; }

/* subtle card shadows */
.shadow-sm { box-shadow: 0 6px 16px rgba(2,6,23,0.06); }

/* Responsive fixes for hero */
@media (max-width: 1024px) {
  .mockup-phone { display:flex; justify-content:center; margin-top:12px; }
}

@font-face {
  font-family: 'Aquire';
  src: url('/fonts/Aquire-BW0ox.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.custom-title {
  font-family: 'Aquire', sans-serif;
  letter-spacing: 1px;  /* léger espacement pour l’élégance */
  text-transform: uppercase; /* optionnel, style futuriste */
}