/* Nabady Whisper — couche d'effets de la page d'accueil
   (inspirée des composants React Bits / 21st.dev, réécrits en CSS + JS natifs, sans dépendance).
   Tout est désactivé avec prefers-reduced-motion. */

@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --fx-teal: 0, 194, 179; --fx-blue: 0, 173, 238; --fx-mint: 110, 231, 220;
  --display: "Inter Display", "Inter", system-ui, sans-serif;
}
html[lang="ar"] { --display: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; }
h1, h2, .stat b, .price b { font-family: var(--display); }
h1 { letter-spacing: -.035em; }
h2 { letter-spacing: -.028em; }
html[lang="ar"] h1, html[lang="ar"] h2 { letter-spacing: 0; }

/* ------------------------------------------------------------------ Hero : aurore + faisceaux + grille */
.hero { overflow: hidden; isolation: isolate; background: #050d16; }
.hero::before { opacity: .55; }
.fx-aurora { position: absolute; inset: -20% -10% auto -10%; height: 120%; z-index: -1; pointer-events: none;
  filter: blur(70px) saturate(130%); opacity: .9; }
.fx-aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.fx-aurora i:nth-child(1) { width: 58vw; height: 46vw; left: -6vw; top: -12vw;
  background: radial-gradient(closest-side, rgba(var(--fx-teal), .55), transparent); animation: fx-drift1 18s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(2) { width: 50vw; height: 40vw; right: -10vw; top: 6vw;
  background: radial-gradient(closest-side, rgba(var(--fx-blue), .5), transparent); animation: fx-drift2 22s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(3) { width: 36vw; height: 30vw; left: 30vw; top: 18vw;
  background: radial-gradient(closest-side, rgba(var(--fx-mint), .28), transparent); animation: fx-drift3 26s ease-in-out infinite alternate; }
@keyframes fx-drift1 { to { transform: translate(8vw, 6vw) rotate(25deg) scale(1.1); } }
@keyframes fx-drift2 { to { transform: translate(-10vw, 4vw) rotate(-20deg) scale(1.15); } }
@keyframes fx-drift3 { to { transform: translate(-6vw, -8vw) scale(.9); } }

.fx-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.2px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%); }
.fx-beams { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); }
.fx-beams i { position: absolute; top: -40%; width: 1px; height: 60%;
  background: linear-gradient(180deg, transparent, rgba(var(--fx-mint), .9), transparent);
  animation: fx-beam 7s linear infinite; opacity: .55; }
.fx-beams i:nth-child(1) { left: 12%; animation-delay: -1s; }
.fx-beams i:nth-child(2) { left: 28%; animation-delay: -4.5s; animation-duration: 9s; }
.fx-beams i:nth-child(3) { left: 47%; animation-delay: -2.5s; animation-duration: 8s; }
.fx-beams i:nth-child(4) { left: 66%; animation-delay: -6s; }
.fx-beams i:nth-child(5) { left: 84%; animation-delay: -3s; animation-duration: 10s; }
@keyframes fx-beam { to { transform: translateY(260%); } }
/* lumière qui suit la souris */
.hero .fx-spotlight { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(600px circle at var(--hx, 70%) var(--hy, 30%), rgba(var(--fx-teal), .14), transparent 60%);
  transition: background .2s; }

/* Titre : mots qui apparaissent du flou (BlurText) + dégradé brillant (ShinyText) */
.fx-w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.35em);
  animation: fx-wordin .9s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes fx-wordin { to { opacity: 1; filter: blur(0); transform: none; } }
.hero h1 .grad { background: linear-gradient(100deg, #6ee7dc 0%, #a7f3ec 25%, #00ADEE 50%, #6ee7dc 75%, #a7f3ec 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-shine 6s linear infinite; }
.hero h1 .grad .fx-w { background: inherit; background-size: inherit; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: fx-wordin .9s cubic-bezier(.2, .8, .2, 1) forwards, fx-shine 6s linear infinite;
  animation-delay: calc(var(--i) * 70ms + 120ms), 0s; }
@keyframes fx-shine { to { background-position: -220% center; } }

/* Pastille « nouveautés » : bordure dégradée qui tourne */
.badge { position: relative; background: rgba(255, 255, 255, .05); border: 0; }
.badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--fx-angle), rgba(var(--fx-mint), .1), rgba(var(--fx-mint), .9), rgba(var(--fx-blue), .6), rgba(var(--fx-mint), .1) 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: fx-spin 5s linear infinite; pointer-events: none; }
@keyframes fx-spin { to { --fx-angle: 360deg; } }

/* Maquette : inclinaison 3D au survol + faisceau qui fait le tour de la fenêtre (BorderBeam) */
.hero-visual { perspective: 1400px; }
.mock { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.mock.fx-tilting { transition: transform .08s linear; }
.mock-win { position: relative; }
.mock-win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--fx-angle), transparent 0 75%, rgba(var(--fx-teal), 1) 85%, rgba(var(--fx-blue), .9) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: fx-spin 4.5s linear infinite; }
.float-card { animation: fx-float 6s ease-in-out infinite; }
.widget { animation: fx-float 7s ease-in-out -2s infinite; }
@keyframes fx-float { 50% { transform: translateY(-10px); } }

/* ------------------------------------------------------------------ Boutons : reflet + magnétisme */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); animation: fx-sweep 3.8s ease-in-out infinite; }
@keyframes fx-sweep { 55%, 100% { transform: translateX(120%); } }
.fx-mag { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }

/* ------------------------------------------------------------------ Chiffres clés : verre + compteur */
.stats .stat { position: relative; overflow: hidden; background: #fff;
  border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 20px 60px rgba(2, 30, 50, .14); }
.stats .stat::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(var(--fx-teal), .9), rgba(var(--fx-blue), .8), transparent); opacity: .7; }
.stat b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Cartes « projecteur » (SpotlightCard) */
.fx-spot { position: relative; overflow: hidden; isolation: isolate; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.fx-spot::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--fx-teal), .14), transparent 45%); }
.fx-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity .35s; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--fx-teal), .9), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.fx-spot:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(2, 30, 50, .12); }
.fx-spot:hover::before, .fx-spot:hover::after { opacity: 1; }
.section.dark .fx-spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--fx-teal), .18), transparent 45%); }
.card .ico { position: relative; width: 54px; height: 54px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--fx-teal), .14), rgba(var(--fx-blue), .1)); box-shadow: inset 0 0 0 1px rgba(var(--fx-teal), .18); }

/* ------------------------------------------------------------------ Fonctionnalités en bento */
.fx-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); gap: 18px; }
.fx-bento .card { display: flex; flex-direction: column; }
.fx-bento .card:nth-child(1) { grid-column: span 2; grid-row: span 2; justify-content: flex-end;
  background: radial-gradient(500px 300px at 20% 0%, rgba(var(--fx-teal), .16), transparent 60%),
              linear-gradient(160deg, #0b1b2b, #0a2a36); color: #e8f1f7; border-color: rgba(255, 255, 255, .06); }
.fx-bento .card:nth-child(1) h3 { font-size: 1.7rem; }
.fx-bento .card:nth-child(1) p { color: #a9bccb; font-size: 1.05rem; max-width: 460px; }
.fx-bento .card:nth-child(1) .ico { width: 72px; height: 72px; font-size: 2rem; margin-bottom: auto; }
.fx-bento .card:nth-child(1) .fx-wave { display: flex; gap: 5px; align-items: center; height: 60px; margin: 18px 0 22px; }
.fx-bento .card:nth-child(1) .fx-wave b { width: 6px; border-radius: 3px; background: linear-gradient(180deg, #6ee7dc, #00ADEE);
  animation: fx-eq 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -90ms); height: 20%; }
@keyframes fx-eq { 50% { height: 100%; } }
.fx-bento .card:nth-child(6) { grid-column: span 2; }
@media (max-width: 1000px) { .fx-bento { grid-template-columns: repeat(2, 1fr); } .fx-bento .card:nth-child(1) { grid-row: span 1; } }
@media (max-width: 640px) { .fx-bento { grid-template-columns: 1fr; } .fx-bento .card:nth-child(n) { grid-column: auto; } }

/* ------------------------------------------------------------------ Défilement infini (LogoLoop) */
.fx-marquee { position: relative; overflow: hidden; margin: 30px auto 70px; max-width: 1180px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.fx-marquee .fx-track { display: flex; gap: 12px; width: max-content; animation: fx-marq 50s linear infinite; padding: 6px 0; }
.fx-marquee .fx-track.r { animation-direction: reverse; animation-duration: 60s; }
.fx-marquee:hover .fx-track { animation-play-state: paused; }
.fx-marquee span { flex: none; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600;
  color: var(--ink); box-shadow: 0 4px 14px rgba(15, 23, 42, .04); white-space: nowrap; }
.fx-marquee span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 9px;
  background: linear-gradient(135deg, var(--teal), #00ADEE); vertical-align: middle; }
@keyframes fx-marq { to { transform: translateX(-50%); } }
html[dir="rtl"] .fx-marquee .fx-track { animation-name: fx-marq-r; }
@keyframes fx-marq-r { to { transform: translateX(50%); } }

/* ------------------------------------------------------------------ Tarifs : carte principale lumineuse */
.plan.main { border: 2px solid transparent; animation: fx-spin 6s linear infinite;
  background: linear-gradient(#fff, #fff) padding-box,
              conic-gradient(from var(--fx-angle), var(--teal), #00ADEE, #6ee7dc, var(--teal)) border-box;
  box-shadow: 0 30px 80px rgba(0, 168, 156, .22), 0 10px 30px rgba(0,173,238, .12); }

/* ------------------------------------------------------------------ Sections : apparition avec flou et décalage */
.reveal { filter: blur(6px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s;
  transition-delay: calc(var(--stagger, 0) * 80ms); }
.reveal.in { filter: none; }
.eyebrow { padding: 6px 14px; border-radius: 999px; background: rgba(var(--fx-teal), .08); box-shadow: inset 0 0 0 1px rgba(var(--fx-teal), .22); }
.section.dark .eyebrow { background: rgba(var(--fx-mint), .08); color: var(--teal-3); }
.section.dark { overflow: hidden; }
.section.dark::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent 70%); }
.section.dark > .container { position: relative; z-index: 1; }

/* Vidéo promotionnelle : cadre lumineux */
.video-hero { position: relative; isolation: isolate; }
.video-hero::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--fx-angle), rgba(var(--fx-teal), .9), rgba(var(--fx-blue), .7), transparent 40%, rgba(var(--fx-teal), .9));
  animation: fx-spin 6s linear infinite; }

@media (hover: none) { .fx-spot:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fx-w { opacity: 1; filter: none; transform: none; animation: none; }
  .fx-aurora i, .fx-beams i, .fx-marquee .fx-track, .btn-primary::after, .badge::before, .mock-win::after,
  .plan.main, .video-hero::before, .float-card, .widget, .hero h1 .grad { animation: none !important; }
  .reveal { filter: none; }
}

@media (max-width: 760px) {
  .fx-beams { display: none; }
  .fx-aurora { filter: blur(50px); }
}

/* ------------------------------------------------------------------ Haut de page allégé */
.hero-pills { margin-bottom: 22px; gap: 10px; align-items: center; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #d5e3ee;
  font-size: .82rem; font-weight: 600; line-height: 1; transition: background .2s, box-shadow .2s; }
.hero-chip:hover { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(var(--fx-mint), .5); }
.hero-chip .geo { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; }
.hero-chip .geo-flag { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.hero-chip .geo-cur { font-weight: 700; color: #fff; letter-spacing: .02em; }
.hero-chip .chip-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .22); }
.hero-chip b { background: linear-gradient(135deg, #00A89C, #00ADEE); color: #fff; border-radius: 999px; padding: 4px 9px; font-size: .75rem; }
.hero-chip .chip-arr { opacity: .6; transition: transform .2s; }
.hero-chip:hover .chip-arr { transform: translateX(3px); }
html[dir="rtl"] .hero-chip .chip-arr { transform: scaleX(-1); }
.hero-pills .geo-lang { font-size: .82rem; }

/* Boutons d'action : hiérarchie nette */
.hero-ctas { gap: 12px; margin-top: 6px; }
.cta-main { padding-inline: 26px 22px; }
.cta-main .cta-arr { transition: transform .2s; font-weight: 800; }
.cta-main:hover .cta-arr { transform: translateX(4px); }
html[dir="rtl"] .cta-main .cta-arr { transform: scaleX(-1); }
.hero-ctas .btn-ghost { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .22); }
.hero-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 18px; }
.hero-sub .hero-play { margin: 0; }

/* Réduction : une ligne discrète, plus de grand encadré */
.hero .promo-hero { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .86rem; font-weight: 500; color: #c8d6e2; }
.hero .promo-hero .promo-code { border: 1px solid rgba(245, 185, 66, .45); background: rgba(245, 185, 66, .08); padding: 3px 4px 3px 9px;
  border-radius: 8px; color: #ffd27a; font-size: .8rem; gap: 6px; }
.hero .promo-hero .promo-code b { letter-spacing: .05em; }
.hero .promo-hero .pc-act { font-size: .7rem; padding: 2px 6px; border-radius: 5px; }

.hero-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 20px 0 22px; color: #9fb3c3; font-size: .88rem; }
.hero-checks li { display: inline-flex; align-items: center; gap: 7px; }
.hero-checks li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: rgba(0, 168, 156, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7dc' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat; }
.hero .hero-note { display: none; }

/* ------------------------------------------------------------------ Barre du haut sur mobile */
.nav-links .nav-langs { display: none; }
@media (max-width: 760px) {
  .nav { background: rgba(5, 13, 22, .88); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
  .nav.scrolled { background: rgba(255, 255, 255, .94); }
  .nav-inner { height: 60px; gap: 8px; }
  .brand img { height: 24px; }
  .nav-actions { gap: 4px; margin-inline-start: auto; }
  .nav-actions .lang-switch, .nav-actions .nav-login { display: none; }
  .nav-actions .btn-primary { padding: 8px 14px; font-size: .84rem; box-shadow: none; }
  .burger { width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.35rem; border-radius: 10px; }
  .nav-links { top: 60px; max-height: calc(100vh - 60px); overflow-y: auto; padding: 10px 18px 20px; gap: 2px; border-radius: 0 0 18px 18px; }
  .nav-links a { padding: 12px 6px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav-links .nav-langs { display: flex; gap: 8px; padding-top: 12px; flex-wrap: wrap; }
  .nav-links .nav-langs a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .88rem; }
  .nav-links .nav-langs a.on { background: var(--teal-soft); border-color: var(--teal); color: var(--teal) !important; }
  .hero { padding-top: 96px; }
  .hero-sub { gap: 12px; }
  .hero .promo-hero { flex-wrap: wrap; }
}

/* Code de réduction : hors de la première section, discret dans la barre collante et la carte tarif */
.promo-code.pc-mini { border-width: 1px; padding: 1px 8px; font-size: .8rem; vertical-align: baseline; border-radius: 6px; }
.promo-code.pc-mini b { font-weight: 700; }