/* =====================================================================
   NexEuro · PREMIUM LAYER  (v1)
   ---------------------------------------------------------------------
   A non-destructive "elevation" layer that refines the existing design
   without rewriting it. It adds: softer multi-layer shadows, animated
   mesh gradients on heroes, a subtle film grain, card glow/sheen,
   tactile buttons, optical typography and richer micro-states.

   Loaded AFTER nexeuro-enhance.css so it can gently override.
   Respects prefers-reduced-motion and prefers-color-scheme: dark.
   ===================================================================== */

:root {
  /* Refined elevation scale (cooler, softer, multi-layer) */
  --pe-sh-1: 0 1px 2px rgba(11, 37, 69, .04), 0 2px 6px rgba(11, 37, 69, .05);
  --pe-sh-2: 0 2px 4px rgba(11, 37, 69, .04), 0 10px 24px -8px rgba(11, 37, 69, .12);
  --pe-sh-3: 0 4px 10px rgba(11, 37, 69, .05), 0 24px 48px -16px rgba(11, 37, 69, .18);
  --pe-sh-4: 0 8px 18px rgba(11, 37, 69, .06), 0 40px 80px -24px rgba(11, 37, 69, .24);
  --pe-glow: 0 0 0 1px rgba(74, 158, 255, .12), 0 18px 50px -20px rgba(23, 105, 196, .35);
  --pe-ease: cubic-bezier(.22, .61, .36, 1);
  --pe-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------------
   1. FILM GRAIN  — a barely-there texture that makes flat colour feel
   premium (à la Stripe / Linear). Sits above the background, below UI.
   --------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  body::after { opacity: .05; mix-blend-mode: screen; }
}

/* Keep real interactive layers above the grain */
.nav, main, .footer, .mmenu, .mega, .trustbar { position: relative; z-index: 2; }

/* ---------------------------------------------------------------------
   2. HERO — animated mesh gradient + soft spotlight that follows cursor.
   The spotlight uses CSS vars --mx/--my set by nexeuro-premium.js.
   --------------------------------------------------------------------- */
.hero, .hero.split {
  --mx: 50%;
  --my: 30%;
  background:
    radial-gradient(60% 55% at var(--mx) var(--my), rgba(74, 158, 255, .16), transparent 60%),
    radial-gradient(45% 50% at 85% 8%, rgba(23, 105, 196, .12), transparent 55%),
    radial-gradient(50% 60% at 8% 18%, rgba(0, 184, 122, .07), transparent 60%),
    linear-gradient(180deg, var(--sky2) 0%, #fff 100%) !important;
}
.hero::before {
  background: conic-gradient(from 180deg at 50% 0%,
      rgba(23, 105, 196, .10), rgba(74, 158, 255, .05),
      rgba(0, 184, 122, .06), rgba(23, 105, 196, .10)) !important;
  filter: blur(60px);
  animation: pe-hue 22s linear infinite;
}
@keyframes pe-hue {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}
@media (prefers-color-scheme: dark) {
  .hero, .hero.split {
    background:
      radial-gradient(60% 55% at var(--mx) var(--my), rgba(74, 158, 255, .20), transparent 60%),
      radial-gradient(45% 50% at 85% 8%, rgba(23, 105, 196, .16), transparent 55%),
      linear-gradient(180deg, #0e1830 0%, #0B1220 100%) !important;
  }
}

/* ---------------------------------------------------------------------
   3. NAV — crisper glass, refined hairline, smoother scrolled state.
   --------------------------------------------------------------------- */
.nav {
  box-shadow:
    var(--pe-sh-2),
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 0 0 1px rgba(11, 37, 69, .04) !important;
  transition: background .4s var(--pe-ease), box-shadow .4s var(--pe-ease),
              top .4s var(--pe-ease), transform .4s var(--pe-ease) !important;
}
.nav.scrolled {
  box-shadow: var(--pe-sh-3), 0 1px 0 rgba(255, 255, 255, .5) inset !important;
}
.nlinks a { transition: color .2s var(--pe-ease), background .25s var(--pe-ease); }

/* ---------------------------------------------------------------------
   4. BUTTONS — tactile, with sheen sweep + magnetic-ready transforms.
   --------------------------------------------------------------------- */
.btn, .bp, .bs, .ndl, .btn-w {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--pe-ease-out), box-shadow .35s var(--pe-ease-out),
              background .3s var(--pe-ease), border-color .3s var(--pe-ease) !important;
  will-change: transform;
}
/* Light sweep that crosses the button on hover */
.bp::after, .ndl::after, .btn-w::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--pe-ease-out);
  pointer-events: none;
}
.bp:hover::after, .ndl:hover::after, .btn-w:hover::after { left: 130%; }
.bp:hover, .ndl:hover { transform: translateY(-2px) scale(1.015); box-shadow: var(--pe-glow) !important; }
.bs:hover { transform: translateY(-2px); }
.bp:active, .bs:active, .ndl:active, .btn-w:active { transform: translateY(0) scale(.985); }

/* ---------------------------------------------------------------------
   5. CARDS — unified elevation, soft glow & top sheen on hover.
   --------------------------------------------------------------------- */
.card {
  box-shadow: var(--pe-sh-1);
  transition: transform .4s var(--pe-ease-out), box-shadow .4s var(--pe-ease-out),
              border-color .4s var(--pe-ease) !important;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(74, 158, 255, .5), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s var(--pe-ease);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pe-sh-4) !important;
}
.card:hover::before { opacity: 1; }
.card.feat { box-shadow: var(--pe-sh-3); }
.card.feat:hover { box-shadow: 0 30px 60px -24px rgba(23, 105, 196, .55) !important; }

/* Stat tiles & FAQ get the soft elevation too */
.stat { box-shadow: var(--pe-sh-1); transition: transform .35s var(--pe-ease-out), box-shadow .35s var(--pe-ease-out); }
.stat:hover { transform: translateY(-3px); box-shadow: var(--pe-sh-3); }
details.faq-q { box-shadow: var(--pe-sh-1); }

/* ---------------------------------------------------------------------
   6. CTA BANDS / comparison table — deeper, richer shadows.
   --------------------------------------------------------------------- */
.cta-band { box-shadow: var(--pe-sh-4); }
.cmp { box-shadow: var(--pe-sh-3) !important; }

/* ---------------------------------------------------------------------
   7. TYPOGRAPHY — optical refinements (kerning + balanced wrapping).
   --------------------------------------------------------------------- */
.h1, .h2, .h3 { text-wrap: balance; font-kerning: normal; }
.lead, .card-d, p { text-wrap: pretty; }
.h1 { text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }

/* ---------------------------------------------------------------------
   8. MEGA MENU — softer, deeper float.
   --------------------------------------------------------------------- */
.mega { box-shadow: var(--pe-sh-4) !important; }
.mega .mi { transition: background .25s var(--pe-ease), transform .25s var(--pe-ease-out); }
.mega .mi:hover { transform: translateX(2px); }

/* ---------------------------------------------------------------------
   9. SCROLL REVEAL — slightly richer entrance (used by enhance + premium)
   --------------------------------------------------------------------- */
.sr { transition: opacity .8s var(--pe-ease-out), transform .8s var(--pe-ease-out); }

/* Premium reveal variants applied by JS (.pe-reveal) */
.pe-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--pe-ease-out), transform .9s var(--pe-ease-out); }
.pe-reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   10. SELECTION + scrollbar — small details that signal craft.
   --------------------------------------------------------------------- */
::selection { background: rgba(74, 158, 255, .28); color: var(--n); }
@media (prefers-color-scheme: dark) { ::selection { color: #fff; } }

* { scrollbar-width: thin; scrollbar-color: rgba(23, 105, 196, .4) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--b), var(--bs));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--b); background-clip: padding-box; }

/* Thin animated gradient progress bar at the very top of the page */
#pe-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 1200;
  background: linear-gradient(90deg, var(--b), var(--bs), var(--green));
  box-shadow: 0 0 12px rgba(74, 158, 255, .6);
  transition: width .1s linear;
  border-radius: 0 3px 3px 0;
}

/* ---------------------------------------------------------------------
   11. REDUCED MOTION — disable all the lively bits.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none !important; }
  .bp::after, .ndl::after, .btn-w::after { display: none; }
  .pe-reveal { opacity: 1 !important; transform: none !important; }
  #pe-progress { display: none; }
  body::after { display: none; }
}