/* CotePilotFr.com — supplemental static styles (Tailwind CDN handles utility classes) */

html {
  scroll-behavior: smooth;
}

html.overflow-hidden,
html.overflow-hidden body {
  overflow: hidden;
}

body {
  min-height: 100vh;
  background-color: #050810;
  background-image:
    radial-gradient(60% 42% at 18% 0%, rgba(2, 132, 199, 0.22) 0%, rgba(2, 132, 199, 0) 62%),
    radial-gradient(50% 38% at 88% 6%, rgba(251, 191, 36, 0.10) 0%, rgba(251, 191, 36, 0) 65%),
    linear-gradient(180deg, #0c1220 0%, #06080f 45%, #050810 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

section[id],
main[id] {
  scroll-margin-top: 96px;
}

/* ---------------------------------------------------------------------
 * Age gate modal
 * ------------------------------------------------------------------- */
#age-gate {
  transition: opacity 0.2s ease;
}

#age-gate.is-closing {
  opacity: 0;
}

.age-gate-panel {
  animation: age-gate-in 0.35s ease;
  background: linear-gradient(180deg, #0c1220 0%, #06080f 55%, #050810 100%);
}

@keyframes age-gate-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.age-gate-cta {
  background-image: linear-gradient(90deg, #0369a1 0%, #0284c7 55%, #fbbf24 100%);
}

.age-gate-cta:hover {
  filter: brightness(1.1);
}

/* ---------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------- */
.hero-glow {
  background:
    radial-gradient(55% 60% at 50% 0%, rgba(2, 132, 199, 0.25) 0%, rgba(2, 132, 199, 0) 65%),
    radial-gradient(35% 40% at 85% 10%, rgba(251, 191, 36, 0.12) 0%, rgba(251, 191, 36, 0) 70%);
}

/* ---------------------------------------------------------------------
 * Ranking rows
 * ------------------------------------------------------------------- */
.rank-row {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rank-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -18px rgba(2, 132, 199, 0.45);
}

.rank-row--top {
  border-color: rgba(2, 132, 199, 0.55) !important;
}

.rank-cta {
  background-image: linear-gradient(90deg, #0369a1 0%, #0284c7 55%, #0ea5e9 100%);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.rank-cta:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
 * Feature / methodology cards
 * ------------------------------------------------------------------- */
.glass-card {
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.glass-card:hover {
  border-color: rgba(34, 211, 238, 0.35);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
 * FAQ accordion
 * ------------------------------------------------------------------- */
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-chevron {
  transition: transform 0.25s ease;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

.faq-trigger:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: -2px;
  border-radius: 1rem;
}

/* ---------------------------------------------------------------------
 * Misc
 * ------------------------------------------------------------------- */
.text-balance {
  text-wrap: balance;
}

::selection {
  background: rgba(34, 211, 238, 0.3);
  color: #ffffff;
}

.badge-logo {
  filter: grayscale(1) opacity(0.75);
  transition: filter 0.2s ease;
}

.badge-logo:hover {
  filter: grayscale(0) opacity(1);
}