/* ============================================================================
   ShieldX — Premium Visual Overlay  (additive design-system layer)
   ----------------------------------------------------------------------------
   Loaded AFTER each page's inline <style> and mobile-optimizations.css, so it
   REFINES the existing look without rewriting it. Fully reversible: delete the
   <link> to premium.css (+ the premium.js <script>) and the site returns to its
   prior state.

   Rules of this layer:
   • Never redefines brand colors — it inherits --bg/--blue/--teal/etc. from each
     page's :root and only adds new --pmx-* tokens.
   • Never hides existing content without JS. Reveal/stagger effects are gated
     behind html.pmx-ready (added by premium.js) so a no-JS / failed-load visitor
     always sees everything.
   • Respects prefers-reduced-motion (all motion neutralised at the bottom).
   ========================================================================== */

:root {
  --pmx-ease: cubic-bezier(.22, .61, .36, 1);
  --pmx-ease-out: cubic-bezier(.16, 1, .3, 1);
  --pmx-glass: rgba(255, 255, 255, .045);
  --pmx-glass-strong: rgba(255, 255, 255, .07);
  --pmx-glass-brd: rgba(255, 255, 255, .12);
  --pmx-hairline: rgba(255, 255, 255, .06);
  --pmx-shadow-1: 0 8px 24px rgba(0, 0, 0, .28);
  --pmx-shadow-2: 0 28px 70px rgba(0, 0, 0, .42);
  --pmx-glow-blue: 0 0 40px rgba(59, 130, 246, .22);
  --pmx-glow-teal: 0 0 40px rgba(20, 184, 166, .18);
  --font-display-premium: 'Sora', 'Inter', system-ui, sans-serif;
}

/* ── 1. Typography ─ sharpen display headings + give the accent word the
      "method of letter write" italic treatment from the reference. ───────── */
.section-heading {
  font-family: var(--font-display-premium);
  letter-spacing: -.032em;
  font-weight: 800;
  text-wrap: balance;
}

/* Accent word inside section headings — distinct italic, brand gradient.
   The parent clips its own gradient to the text; we re-establish the fill on
   the accent so it reads as a separate, italic highlight (not a flat color). */
.section-heading em,
.section-heading .text-blue {
  font-style: italic;
  font-weight: 800;
  background: linear-gradient(120deg, #7cc0ff 0%, #3b82f6 48%, #22d3ee 105%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-right: .04em;
}

/* Hero headline accent → italic to match the editorial reference look. */
.hero h1 em {
  font-style: italic;
}

/* Slightly airier, more readable section sub-copy. */
.section-sub {
  letter-spacing: .002em;
}

/* ── 2. Section rhythm + soft top/bottom seams between dark bands ───────── */
@media (min-width: 1100px) {
  section {
    padding-block: 116px;
  }
}

.section-tag {
  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ── 3. Cards & panels — layered glass, refined depth, premium hover lift ── */
.card,
.rm-box,
.ea-milestone,
.ea-stat,
.comm-card,
.faq-item {
  transition:
    transform .5s var(--pmx-ease-out),
    box-shadow .5s var(--pmx-ease-out),
    border-color .4s ease,
    background .4s ease;
  will-change: transform;
}

/* A whisper-thin top highlight gives glass its "lit from above" depth. */
.card::after,
.rm-box::after,
.ea-milestone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 22%);
  opacity: .7;
  z-index: 0;
}

html.pmx-ready .card:hover,
html.pmx-ready .ea-milestone:hover,
html.pmx-ready .comm-card:hover {
  transform: translateY(-6px);
  border-color: rgba(96, 165, 250, .30);
  box-shadow: var(--pmx-shadow-2), 0 0 0 1px rgba(96, 165, 250, .10), var(--pmx-glow-blue);
}

html.pmx-ready .rm-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--pmx-shadow-2), 0 0 0 1px rgba(96, 165, 250, .10);
}

/* Card icon gets a subtle springy pop in sync with the card lift. */
.card-icon {
  transition: transform .5s var(--pmx-ease-out), box-shadow .5s var(--pmx-ease-out);
}
html.pmx-ready .card:hover .card-icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 28px rgba(59, 130, 246, .22);
}

/* Pointer-driven 3D tilt (JS sets --pmx-rx/--pmx-ry/--pmx-tz). Defaults are
   no-ops so the rule is inert until premium.js opts an element in. */
html.pmx-ready .pmx-tilt {
  transform:
    perspective(900px)
    rotateX(var(--pmx-rx, 0deg))
    rotateY(var(--pmx-ry, 0deg))
    translateZ(var(--pmx-tz, 0));
  transition: transform .18s var(--pmx-ease-out), box-shadow .5s var(--pmx-ease-out);
}

/* ── 4. Buttons — richer primary glow + sheen on the existing .btn engine ── */
.btn-primary {
  box-shadow: 0 18px 40px rgba(37, 99, 235, .28), inset 0 1px 0 rgba(255, 255, 255, .12), var(--pmx-glow-blue);
}
html.pmx-ready .btn-lg:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.015);
}

/* ── 5. Navigation — condenses + deepens its blur once the page scrolls ──── */
nav {
  transition: height .35s var(--pmx-ease), background .35s var(--pmx-ease), box-shadow .35s var(--pmx-ease), backdrop-filter .35s var(--pmx-ease);
}
nav.pmx-scrolled {
  height: 58px;
  background: rgba(6, 12, 20, .94);
  box-shadow: 0 1px 0 0 rgba(59, 130, 246, .10), 0 18px 50px rgba(0, 0, 0, .45);
}

/* ── 6. Scroll progress bar (element injected by premium.js) ─────────────── */
.pmx-scrollbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 200;
  background: linear-gradient(90deg, #3b82f6, #22d3ee 55%, #14b8a6);
  box-shadow: 0 0 14px rgba(59, 130, 246, .55);
  pointer-events: none;
}

/* ── 7. Hero 3D layer — a contained canvas behind the hero copy, plus the
      crisp SVG fallback shown when WebGL/motion is unavailable. ──────────── */
.pmx-hero-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.pmx-hero-3d canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
}
.pmx-hero-3d.pmx-on canvas {
  opacity: .6;
}
.pmx-hero-3d__fallback {
  position: absolute;
  top: 42%;
  right: 6%;
  transform: translateY(-50%);
  width: min(21vw, 232px);
  aspect-ratio: 1;
  /* Hidden by DEFAULT — a true fallback. WebGL users go straight to the 3D
     canvas and never see this poster (no "image before 3D"). premium.js adds
     .pmx-fallback to reveal it only when 3D won't run (no WebGL / reduced
     motion / three.js load failure). */
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0 30px 60px rgba(34, 211, 238, .18));
  animation: pmxFloat 7s var(--pmx-ease) infinite;
  transition: opacity .3s ease;
}
.pmx-hero-3d.pmx-fallback .pmx-hero-3d__fallback {
  opacity: .9;
  visibility: visible;
}
@media (max-width: 900px) {
  .pmx-hero-3d__fallback { opacity: .35; right: -8%; }
}

@keyframes pmxFloat {
  0%, 100% { transform: translateY(-50%) translateZ(0); }
  50% { transform: translateY(calc(-50% - 16px)) translateZ(0); }
}

/* ── 8. Parallax + scroll-stagger (gated behind .pmx-ready so no-JS = visible) */
html.pmx-ready .pmx-parallax {
  will-change: transform;
  transition: transform .1s linear;
}

html.pmx-ready .pmx-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--pmx-ease-out), transform .7s var(--pmx-ease-out);
}
html.pmx-ready .pmx-stagger > .pmx-in {
  opacity: 1;
  transform: none;
}

/* ── 9. Decorative section glow blobs (opt-in via .pmx-glow-wrap) ────────── */
.pmx-glow-wrap { position: relative; }
.pmx-glow-wrap > .pmx-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  /* Calmer ambient glow — premium sites use restrained, subtle section glows
     rather than strong blobs (toned .22 → .14). */
  opacity: .14;
  pointer-events: none;
  z-index: 0;
}
.pmx-blob--blue { background: radial-gradient(circle, rgba(59, 130, 246, .55), transparent 70%); }
.pmx-blob--teal { background: radial-gradient(circle, rgba(20, 184, 166, .45), transparent 70%); }

/* ── 10. Reduced motion — neutralise every premium animation/transition ─── */
@media (prefers-reduced-motion: reduce) {
  html.pmx-ready .pmx-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pmx-hero-3d__fallback { animation: none; }
  html.pmx-ready .card,
  html.pmx-ready .rm-box,
  html.pmx-ready .ea-milestone,
  html.pmx-ready .comm-card,
  html.pmx-ready .pmx-tilt,
  html.pmx-ready .pmx-parallax {
    transition: none !important;
    transform: none !important;
  }
  .pmx-scrollbar { display: none; }
}