/**
 * premium.css — Boundary-pushing visual enhancements for Trustinera AI.
 *
 * Design philosophy: Linear · Stripe · Vercel quality.
 * Every atom intentional. Every animation purposeful.
 * Loads AFTER site.css — overrides and augments.
 */

/* ═══════════════════════════════════════════════════════════
   1. ENHANCED DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Richer colour depth */
  --indigo-950:   #1e1b4b;
  --indigo-900:   #312e81;
  --indigo-700:   #4338ca;
  --indigo-600:   #4f46e5;
  --indigo-400:   #818cf8;
  --indigo-300:   #a5b4fc;
  --violet-700:   #6d28d9;
  --violet-500:   #7c3aed;
  --violet-300:   #c4b5fd;
  --cyan-500:     #06b6d4;
  --rose-500:     #f43f5e;
  --amber-400:    #fbbf24;

  /* Glass tokens */
  --glass-bg:          rgba(255,255,255,0.7);
  --glass-border:      rgba(255,255,255,0.5);
  --glass-shadow:      0 8px 32px rgba(79,70,229,0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
  --glass-blur:        saturate(180%) blur(16px);

  /* Glow tokens */
  --glow-indigo:  0 0 32px rgba(79,70,229,0.25), 0 0 64px rgba(79,70,229,0.1);
  --glow-violet:  0 0 32px rgba(124,58,237,0.25), 0 0 64px rgba(124,58,237,0.1);
  --glow-teal:    0 0 32px rgba(6,182,212,0.25);
  --glow-sm:      0 0 12px rgba(79,70,229,0.2);

  /* Refined shadows */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-2xl:   0 24px 64px rgba(0,0,0,0.16), 0 8px 24px rgba(0,0,0,0.08);

  /* Typography refinements */
  --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --tracking-tight: -0.03em;
  --tracking-tighter: -0.045em;

  /* Easing curves */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.645, 0.045, 0.355, 1);

  /* Radius */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
}

html[data-theme="dark"] {
  --glass-bg:     rgba(13,14,22,0.75);
  --glass-border: rgba(99,102,241,0.12);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 1px 0 rgba(99,102,241,0.08) inset;
  --glow-indigo:  0 0 32px rgba(99,102,241,0.3), 0 0 80px rgba(99,102,241,0.12);
  --glow-sm:      0 0 16px rgba(99,102,241,0.25);
}

/* ═══════════════════════════════════════════════════════════
   2. GLOBAL BASELINE REFINEMENTS
   ═══════════════════════════════════════════════════════════ */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Premium body baseline */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

/* Selection colour */
::selection {
  background: rgba(79,70,229,0.18);
  color: var(--indigo-600);
}

html[data-theme="dark"] ::selection {
  background: rgba(99,102,241,0.3);
  color: var(--indigo-300);
}

/* ═══════════════════════════════════════════════════════════
   3. NOISE TEXTURE OVERLAY (film grain premium feel)
   ═══════════════════════════════════════════════════════════ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ═══════════════════════════════════════════════════════════
   4. SITE HEADER — FROSTED GLASS REFINEMENT
   ═══════════════════════════════════════════════════════════ */

.site-header {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid rgba(79,70,229,0.08) !important;
  box-shadow: 0 1px 0 rgba(79,70,229,0.04), 0 4px 24px rgba(0,0,0,0.04) !important;
  transition: background 200ms ease, box-shadow 200ms ease !important;
}

html[data-theme="dark"] .site-header {
  background: rgba(9,10,19,0.88) !important;
  border-bottom-color: rgba(99,102,241,0.1) !important;
  box-shadow: 0 1px 0 rgba(99,102,241,0.06), 0 8px 32px rgba(0,0,0,0.3) !important;
}

/* Scrolled state — tighter glass */
.site-header.is-scrolled {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 1px 0 rgba(79,70,229,0.06), 0 8px 32px rgba(0,0,0,0.08) !important;
}

html[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(9,10,19,0.97) !important;
}

/* ── Logo: animated gradient on hover ─────────────────────── */
.site-logo-mark .brand-mark__core,
.site-logo-mark .brand-mark__rail,
.site-logo-mark .brand-mark__dot,
.site-logo-mark .brand-mark__frame {
  transition: filter 300ms var(--ease-smooth), opacity 300ms var(--ease-smooth), stroke 300ms var(--ease-smooth);
}
.site-brand:hover .site-logo-mark { filter: drop-shadow(0 0 10px rgba(79,70,229,0.45)); }

/* ── Nav triggers: refined ───────────────────────────────── */
.mega-nav__trigger,
.mega-nav__link {
  position: relative;
}

.mega-nav__trigger::after,
.mega-nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--indigo-600), var(--violet-500));
  border-radius: 999px;
  transition: transform 250ms var(--ease-spring);
}

.mega-nav__trigger:hover::after,
.mega-nav__link:hover::after,
.mega-nav__trigger[aria-expanded="true"]::after {
  transform: translateX(-50%) scaleX(1);
}

/* ── Header buttons: premium gloss ───────────────────────── */
.site-header .button {
  position: relative;
  overflow: hidden;
}

.site-header .button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transition: left 500ms ease;
}

.site-header .button:hover::before { left: 100%; }

/* ── Mega panel: proper glass ────────────────────────────── */
.mega-panel {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-top: 1px solid rgba(79,70,229,0.06) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.1) !important;
}

html[data-theme="dark"] .mega-panel {
  background: rgba(11,12,24,0.97) !important;
  border-color: rgba(99,102,241,0.08) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}

/* Mega link icon glow on hover */
.mega-link:hover .mega-link__icon--indigo { box-shadow: var(--glow-sm); }
.mega-link:hover .mega-link__icon--violet { box-shadow: 0 0 12px rgba(124,58,237,0.25); }
.mega-link:hover .mega-link__icon--teal   { box-shadow: 0 0 12px rgba(6,182,212,0.25); }

/* ═══════════════════════════════════════════════════════════
   5. HERO SECTIONS — MESH GRADIENT AURORA
   ═══════════════════════════════════════════════════════════ */

.page-hero,
.hero--has-orbs {
  position: relative;
  overflow: hidden;
}

/* Animated mesh gradient background */
.page-hero::before,
.hero--has-orbs::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(79,70,229,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 120%, rgba(124,58,237,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(6,182,212,0.04) 0%, transparent 70%);
  animation: aura-drift 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

html[data-theme="dark"] .page-hero::before,
html[data-theme="dark"] .hero--has-orbs::before {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(79,70,229,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 120%, rgba(124,58,237,0.16) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(6,182,212,0.06) 0%, transparent 70%);
}

.page-hero > *,
.hero--has-orbs > * {
  position: relative;
  z-index: 1;
}

/* Hero orbs must stay BELOW content — explicit override */
.hero--has-orbs > .hero-orb {
  z-index: 0 !important;
  position: absolute;
}

/* Hero content shell must be ABOVE orbs */
.hero--has-orbs > .site-shell,
.hero--has-orbs > .hero__layout {
  z-index: 4 !important;
  position: relative;
}

@keyframes aura-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(2%, -1%) scale(1.02); }
  66%  { transform: translate(-1%, 2%) scale(0.99); }
  100% { transform: translate(1%, -2%) scale(1.01); }
}

/* Hero orbs: upgraded size and animation */
.hero-orb {
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
}

.hero-orb--1 {
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(79,70,229,0.22) 0%, rgba(79,70,229,0.06) 50%, transparent 100%);
  animation: orb-float-1 18s ease-in-out infinite;
}

.hero-orb--2 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, rgba(124,58,237,0.05) 50%, transparent 100%);
  animation: orb-float-2 24s ease-in-out infinite;
}

@keyframes orb-float-1 {
  0%,100% { transform: translate(0, 0); }
  25%     { transform: translate(40px, -30px); }
  50%     { transform: translate(-20px, 40px); }
  75%     { transform: translate(30px, 20px); }
}

@keyframes orb-float-2 {
  0%,100% { transform: translate(0, 0) rotate(0deg); }
  33%     { transform: translate(-30px, 20px) rotate(5deg); }
  66%     { transform: translate(20px, -30px) rotate(-3deg); }
}

/* ── Hero typography: tighter, bolder ────────────────────── */
.page-hero h1,
.art-hero__title {
  font-family: var(--font-heading) !important;
  letter-spacing: var(--tracking-tighter) !important;
  font-weight: 900 !important;
}

/* ═══════════════════════════════════════════════════════════
   6. GRADIENT TEXT — RICHER, ANIMATED
   ═══════════════════════════════════════════════════════════ */

.gradient-text {
  background: linear-gradient(
    135deg,
    var(--indigo-600) 0%,
    var(--violet-500) 40%,
    var(--cyan-500) 100%
  ) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradient-shift 6s ease-in-out infinite !important;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ═══════════════════════════════════════════════════════════
   7. BUTTONS — PREMIUM INTERACTION LAYER
   ═══════════════════════════════════════════════════════════ */

/* Primary button: animated gradient + lift */
.button:not(.button--secondary):not(.button--ghost):not(.button--small) {
  background: linear-gradient(135deg, var(--indigo-600), var(--violet-500)) !important;
  background-size: 200% 200% !important;
  box-shadow: 0 4px 14px rgba(79,70,229,0.35), 0 1px 0 rgba(255,255,255,0.1) inset !important;
  transition: transform 200ms var(--ease-spring), box-shadow 200ms ease, background-position 300ms ease !important;
  will-change: transform;
  letter-spacing: -0.01em;
}

.button:not(.button--secondary):not(.button--ghost):not(.button--small):hover {
  box-shadow: 0 8px 24px rgba(79,70,229,0.45), 0 1px 0 rgba(255,255,255,0.15) inset !important;
  transform: translateY(-2px) !important;
  background-position: right center !important;
}

.button:not(.button--secondary):not(.button--ghost):not(.button--small):active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(79,70,229,0.3) !important;
}

/* Glow button: extra pulse effect */
.button--glow {
  box-shadow: 0 0 0 0 rgba(79,70,229,0.4), 0 4px 14px rgba(79,70,229,0.35) !important;
  animation: button-pulse 3s ease-in-out infinite;
}

@keyframes button-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,70,229,0.3), 0 4px 14px rgba(79,70,229,0.35); }
  50%       { box-shadow: 0 0 0 8px rgba(79,70,229,0), 0 8px 24px rgba(79,70,229,0.45); }
}

/* Secondary button: solid border with subtle gradient */
.button--secondary {
  border: 1.5px solid rgba(79,70,229,0.25) !important;
  backdrop-filter: blur(4px) !important;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms var(--ease-spring) !important;
}

.button--secondary:hover {
  border-color: rgba(79,70,229,0.5) !important;
  background: rgba(79,70,229,0.06) !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════
   8. CARDS — GLASS MORPHISM + HOVER LIFT
   ═══════════════════════════════════════════════════════════ */

/* Glass card mixin applied to key card types */
.feature-card,
.module-card,
.ins-featured-card,
.ins-article-card,
.compare-card,
.sol-card,
.pricing-card,
.case-study-card,
.glossary-term,
.art-related-card {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(79,70,229,0.08) !important;
  transition:
    transform 250ms var(--ease-spring),
    box-shadow 250ms ease,
    border-color 250ms ease !important;
  will-change: transform;
}

html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .ins-featured-card,
html[data-theme="dark"] .ins-article-card,
html[data-theme="dark"] .compare-card,
html[data-theme="dark"] .sol-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .glossary-term,
html[data-theme="dark"] .art-related-card {
  border-color: rgba(99,102,241,0.1) !important;
  background: rgba(13,14,28,0.7) !important;
}

/* Hover lift */

.feature-card:hover,
.module-card:hover,
.ins-article-card:hover,
.sol-card:hover,
.compare-card:hover,
.glossary-term:hover,
.art-related-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(79,70,229,0.12) !important;
  border-color: rgba(79,70,229,0.2) !important;
}

/* Featured cards: top accent gradient line */
.ins-featured-card {
  border-top: 3px solid transparent !important;
  background-image: linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)),
                    linear-gradient(135deg, var(--indigo-600), var(--violet-500)) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

html[data-theme="dark"] .ins-featured-card {
  --card-bg: #0d0e1c;
  background-image: linear-gradient(var(--card-bg), var(--card-bg)),
                    linear-gradient(135deg, var(--indigo-600), var(--violet-500)) !important;
}

.ins-featured-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-2xl) !important;
}

/* Pricing card: featured tier gets glow treatment */
.pricing-card--featured {
  box-shadow: var(--glow-indigo), var(--shadow-xl) !important;
  border-color: rgba(79,70,229,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════
   9. STAT / METRIC BLOCKS — ANIMATED COUNTER STYLING
   ═══════════════════════════════════════════════════════════ */

.metric-value,
.stat__value,
.hero-stat__number,
.roi-result-value {
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tighter);
}

/* Counter animation data attribute */
[data-counter] {
  display: inline-block;
  transition: transform 100ms ease;
}

/* ═══════════════════════════════════════════════════════════
   10. SECTION BACKGROUNDS — ALTERNATING DEPTH
   ═══════════════════════════════════════════════════════════ */

/* Subtle grid overlay on feature sections */
.section--alt,
.section--grid {
  position: relative;
  isolation: isolate;
}

.section--alt::before,
.section--grid::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(79,70,229,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,70,229,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 100%);
}

/* Keep children above the grid */
.section--alt > *,
.section--grid > * {
  position: relative;
  z-index: 1;
}


/* Dot grid — only on explicitly labelled contrast sections */
.section--contrast {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section--contrast::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(99,102,241,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Ensure children sit above the dot background */
.section--contrast > * {
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════
   11. ANNOUNCE BAR — ANIMATED GRADIENT BORDER
   ═══════════════════════════════════════════════════════════ */

.announce-bar {
  background: linear-gradient(
    90deg,
    rgba(79,70,229,0.08),
    rgba(124,58,237,0.08),
    rgba(6,182,212,0.06),
    rgba(79,70,229,0.08)
  ) !important;
  background-size: 300% 100% !important;
  animation: bar-shimmer 8s linear infinite !important;
  border-bottom: 1px solid rgba(79,70,229,0.12) !important;
}

@keyframes bar-shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

.announce-bar__badge {
  background: linear-gradient(135deg, var(--indigo-600), var(--violet-500));
  box-shadow: 0 0 12px rgba(79,70,229,0.4);
  animation: badge-pulse 3s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(79,70,229,0.4); }
  50%       { box-shadow: 0 0 20px rgba(79,70,229,0.7); }
}

/* ═══════════════════════════════════════════════════════════
   12. COMPARISON TABLE — PREMIUM HOVER ROWS
   ═══════════════════════════════════════════════════════════ */

.compare-table tbody tr {
  transition: background 150ms ease;
  position: relative;
}

.compare-table tbody tr:hover {
  background: rgba(79,70,229,0.04) !important;
}

.compare-table thead th:not(:first-child) {
  position: relative;
}

.compare-table thead th.col-us::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--indigo-600), var(--violet-500));
  border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════
   13. FORM INPUTS — GLOW FOCUS STATES
   ═══════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea {
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  background: rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(4px) !important;
}

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(13,14,28,0.8) !important;
  border-color: rgba(99,102,241,0.15) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--indigo-600) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12), 0 1px 4px rgba(79,70,229,0.08) !important;
}

/* ═══════════════════════════════════════════════════════════
   14. FLOATING ELEMENTS — ELEVATED DESIGN
   ═══════════════════════════════════════════════════════════ */

/* Back to top: glass pill */
.back-to-top {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: 999px !important;
  width: 44px !important;
  height: 44px !important;
  transition: transform 200ms var(--ease-spring), box-shadow 200ms ease !important;
}

.back-to-top:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: var(--glow-sm), var(--shadow-xl) !important;
}

/* Float CTA: glass card */
.float-cta {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-xl), var(--glow-sm) !important;
  border-radius: var(--radius-lg) !important;
}

/* ═══════════════════════════════════════════════════════════
   15. CURSOR GLOW (desktop only)
   ═══════════════════════════════════════════════════════════ */

#cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9990;
  transform: translate(-50%, -50%);
  transition: opacity 300ms ease;
  will-change: left, top;
}

html[data-theme="dark"] #cursor-glow {
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
}

/* ═══════════════════════════════════════════════════════════
   16. REVEAL ANIMATIONS — UPGRADED
   Only hides elements once JS has confirmed it is running.
   Without .js-loaded on <body>, all content stays visible.
   ═══════════════════════════════════════════════════════════ */

/* Reveal: hidden only when JS is active */
body.js-loaded [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-smooth),
    transform 700ms var(--ease-smooth);
}

body.js-loaded [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: children hidden only when JS is active */
body.js-loaded [data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms var(--ease-smooth),
    transform 600ms var(--ease-smooth);
}

body.js-loaded [data-stagger].is-visible > * { opacity: 1; transform: translateY(0); }
body.js-loaded [data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
body.js-loaded [data-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
body.js-loaded [data-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
body.js-loaded [data-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
body.js-loaded [data-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
body.js-loaded [data-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }

/* ═══════════════════════════════════════════════════════════
   17. SCROLLBAR — MINIMAL STYLED
   ═══════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(79,70,229,0.2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(79,70,229,0.4); }

/* ═══════════════════════════════════════════════════════════
   18. EYEBROW LABELS — PREMIUM TREATMENT
   ═══════════════════════════════════════════════════════════ */

.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  background: linear-gradient(135deg, var(--indigo-600), var(--violet-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════════
   19. COMMAND PALETTE — GLASS UPGRADED
   ═══════════════════════════════════════════════════════════ */

.cmd-palette {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
  border: 1px solid rgba(79,70,229,0.1) !important;
  box-shadow: var(--shadow-2xl), 0 0 48px rgba(79,70,229,0.1) !important;
  border-radius: var(--radius-xl) !important;
}

html[data-theme="dark"] .cmd-palette {
  background: rgba(9,10,19,0.97) !important;
  border-color: rgba(99,102,241,0.12) !important;
  box-shadow: var(--shadow-2xl), 0 0 64px rgba(79,70,229,0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   20. DATA TICKER — UPGRADED GRADIENT
   ═══════════════════════════════════════════════════════════ */

.data-ticker {
  background: linear-gradient(
    135deg,
    rgba(79,70,229,0.06),
    rgba(124,58,237,0.06),
    rgba(6,182,212,0.04)
  ) !important;
  border-top: 1px solid rgba(79,70,229,0.08) !important;
  border-bottom: 1px solid rgba(79,70,229,0.08) !important;
}

.data-ticker__item strong {
  background: linear-gradient(135deg, var(--indigo-600), var(--violet-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════════
   21. FOOTER — DEPTH TREATMENT
   ═══════════════════════════════════════════════════════════ */

.site-footer {
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,70,229,0.2), rgba(124,58,237,0.2), transparent);
}

/* ═══════════════════════════════════════════════════════════
   22. TESTIMONIALS — QUOTE MARK UPGRADE
   ═══════════════════════════════════════════════════════════ */

.testimonial-card,
.case-study-quote {
  position: relative;
}

.testimonial-card::before,
.case-study-quote::before {
  content: '"';
  position: absolute;
  top: -12px;
  left: 16px;
  font-size: 5rem;
  line-height: 1;
  font-family: var(--font-heading);
  font-weight: 900;
  background: linear-gradient(135deg, var(--indigo-600), var(--violet-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.15;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   23. INTEGRATION BADGES — HOVER FLOAT
   ═══════════════════════════════════════════════════════════ */

.integration-logo,
.partner-badge {
  transition: transform 250ms var(--ease-spring), box-shadow 250ms ease !important;
}

.integration-logo:hover,
.partner-badge:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ═══════════════════════════════════════════════════════════
   24. MODULE CARDS — GRADIENT TOP ACCENT
   ═══════════════════════════════════════════════════════════ */

.module-card {
  border-top: 3px solid transparent !important;
  position: relative;
}

.module-card--categorise { border-top-color: var(--indigo-600) !important; }
.module-card--trustflow  { border-top-color: var(--violet-500) !important; }
.module-card--reconcile  { border-top-color: #059669 !important; }
.module-card--opsiq      { border-top-color: var(--amber-400) !important; }
.module-card--sentrise   { border-top-color: var(--rose-500) !important; }

/* ═══════════════════════════════════════════════════════════
   25. PRICING CARDS — FEATURED BADGE SHIMMER
   ═══════════════════════════════════════════════════════════ */

.pricing-badge,
.pricing-card__popular {
  background: linear-gradient(135deg, var(--indigo-600), var(--violet-500));
  background-size: 200% 100%;
  animation: badge-shimmer 3s linear infinite;
}

@keyframes badge-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ═══════════════════════════════════════════════════════════
   26. REDUCED MOTION SUPPORT
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body.js-loaded [data-reveal],
  body.js-loaded [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gradient-text { animation: none !important; }
  .announce-bar  { animation: none !important; }
  .hero-orb      { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   27. HEADER HIDE-ON-SCROLL — SMOOTH TRANSITION
   ═══════════════════════════════════════════════════════════ */

.site-header {
  transition: transform 300ms var(--ease-smooth), background 200ms ease, box-shadow 200ms ease !important;
}

.site-header.is-hidden-scroll {
  transform: translateY(-110%) !important;
}

/* ═══════════════════════════════════════════════════════════
   28. COPY CODE BUTTON — DEVELOPER EXPERIENCE
   ═══════════════════════════════════════════════════════════ */

.copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, background 200ms ease, color 200ms ease;
}

pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); }

/* ═══════════════════════════════════════════════════════════
   29. FOCUS VISIBLE — KEYBOARD ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid var(--indigo-600) !important;
  outline-offset: 3px !important;
  border-radius: var(--radius-xs) !important;
}

/* ═══════════════════════════════════════════════════════════
   30. LINK HOVER UNDERLINE GROW
   ═══════════════════════════════════════════════════════════ */

.art-content a,
.site-footer a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 150ms ease;
}

/* ═══════════════════════════════════════════════════════════
   31. DARK MODE: SURFACE LEVELS
   ═══════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  /* Subtle blue-tinted dark (not pure black — avoids harsh contrast) */
  --page-bg: hsl(234, 25%, 5%);
  --surface-1: hsl(234, 22%, 8%);
  --surface-2: hsl(234, 20%, 11%);
  --surface-3: hsl(234, 18%, 14%);
}

html[data-theme="dark"] body {
  background: var(--page-bg);
}

html[data-theme="dark"] .section--alt {
  background: var(--surface-1) !important;
}

html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .compare-card,
html[data-theme="dark"] .sol-card {
  background: var(--surface-2) !important;
}

/* ═══════════════════════════════════════════════════════════
   32. MICRO-TYPOGRAPHY POLISH
   ═══════════════════════════════════════════════════════════ */

/* Section headings: tighter tracking on larger sizes */
.section-title,
h2,
h3 {
  font-family: var(--font-heading);
  letter-spacing: var(--tracking-tight);
}

/* Eyebrow — reset for elements where gradient text breaks layout */
.pricing-card .eyebrow,
.cta-panel .eyebrow {
  display: inline-block;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════
   33. PERFORMANCE: GPU LAYERS & WILL-CHANGE
   ═══════════════════════════════════════════════════════════ */

.site-header,
.float-cta,
.back-to-top,
.mega-panel {
  will-change: transform;
}

/* Contain paint for card sections to avoid repaint cascade */
.ins-article-grid,
.ins-featured-grid,
.features-grid,
.module-grid {
  contain: layout style;
}