/* ==========================================================================
   Omen — styles complémentaires à Tailwind
   ========================================================================== */

:root {
  --accent: 139 92 246;      /* violet-500 */
  --accent-2: 34 211 238;    /* cyan-400 */
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgb(var(--accent) / .35); color: #fff; }

/* Grain + grille de fond --------------------------------------------------- */
.bg-grid {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / .04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
}

.glow {
  background: radial-gradient(closest-side, rgb(var(--accent) / .35), transparent);
  filter: blur(40px);
}

/* Texte dégradé ----------------------------------------------------------- */
.text-gradient {
  background: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / .55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-accent-gradient {
  background: linear-gradient(90deg, #a78bfa 0%, #c084fc 45%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Carte "glass" avec bordure lumineuse ------------------------------------ */
.glass {
  background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(255 255 255 / .01));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glow-border { position: relative; isolation: isolate; }
.glow-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / 0) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
.glow-border-accent::before {
  background: linear-gradient(180deg, rgb(var(--accent) / .9), rgb(var(--accent) / .1) 50%, rgb(var(--accent-2) / .35));
}

/* Spotlight qui suit la souris (cartes features) ------------------------- */
.spotlight {
  --x: 50%;
  --y: 50%;
}
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(400px circle at var(--x) var(--y), rgb(var(--accent) / .10), transparent 40%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.spotlight:hover::after { opacity: 1; }

/* Ligne lumineuse horizontale -------------------------------------------- */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .12), transparent);
}

/* Marquee logos ----------------------------------------------------------- */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.marquee-track { animation: marquee 40s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Apparition au scroll --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Flottement doux du téléphone ------------------------------------------- */
.float { animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* Barres du graphique ---------------------------------------------------- */
.bar { transform-origin: bottom; animation: grow 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes grow { from { transform: scaleY(0); } }

/* Pastille "live" -------------------------------------------------------- */
.ping { animation: ping 2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }

/* FAQ -------------------------------------------------------------------- */
.faq-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq-item.open .faq-content { grid-template-rows: 1fr; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* Scrollbar discrète ----------------------------------------------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 10px; border: 2px solid #09090b; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Header au scroll -------------------------------------------------------- */
#header.is-scrolled {
  background: rgb(9 9 11 / .72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 rgb(255 255 255 / .06);
}