/* =========================================================================
   MEDVIZ — UI ENHANCEMENT LAYER
   Loaded LAST (after styles.css, motion.css). Wins on tied specificity.
   Adds:
     · Glassmorphism surfaces (cards, testimonials, panels, forms, header)
     · Site-wide animated background (mesh + orbs + grid + aurora + grain)
     · Per-component dynamic reveal animations
     · Refined buttons (shimmer + glow), magnetic hover
     · Gradient text shimmer, animated number underlines
   Pure CSS — transform/opacity/backdrop-filter only. Respects prefers-reduced-motion.
   ========================================================================= */

/* ================================ TOKENS =================================== */
:root {
  /* Glass surfaces — built on existing teal palette */
  --glass-bg:        rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-soft:   rgba(255, 255, 255, 0.42);
  --glass-border:    rgba(255, 255, 255, 0.55);
  --glass-border-2:  rgba(0, 107, 107, 0.10);
  --glass-blur:      blur(22px) saturate(160%);
  --glass-blur-sm:   blur(14px) saturate(140%);

  /* Refined shadow stack with teal-tinted inner glow */
  --soft-1: 0 1px 0 rgba(255,255,255,0.7) inset, 0 0 0 1px rgba(0,107,107,0.06);
  --soft-2: 0 8px 24px rgba(0, 87, 92, 0.06), 0 1px 2px rgba(0, 87, 92, 0.04);
  --soft-3: 0 18px 50px rgba(0, 87, 92, 0.10), 0 6px 12px rgba(0, 87, 92, 0.05);
  --soft-glow: 0 0 0 1px rgba(20, 160, 159, 0.25), 0 12px 40px rgba(20, 160, 159, 0.16);

  /* Aurora hues sampled from brand teals (no off-brand colors) */
  --aurora-1: rgba(20, 160, 159, 0.35);
  --aurora-2: rgba(0, 128, 128, 0.28);
  --aurora-3: rgba(143, 215, 214, 0.40);
  --aurora-4: rgba(0, 84, 86, 0.20);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ============================ SITE BACKGROUND ============================== */
/*
  Single, fixed, full-viewport background painted once and reused across all pages.
  Built from 5 stacked layers: base wash · aurora orbs · radial pulse ·
  pixel grid · grain. All painting happens behind content; pointer-events none.
*/
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Base wash — extremely subtle teal-tinted gradient */
  background:
    radial-gradient(140% 100% at 50% -10%, rgba(226, 244, 244, 0.55) 0%, rgba(247, 249, 250, 0) 40%),
    linear-gradient(180deg, #fbfdfd 0%, #f5fafa 100%);
}

.site-bg__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* — Layer 1 · Aurora orbs (4 large drifting gradients) — */
.site-bg__aurora .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  mix-blend-mode: multiply;
}
.site-bg__aurora .orb-1 {
  width: 56vw; height: 56vw; max-width: 820px; max-height: 820px;
  top: -22vh; left: -12vw;
  background: radial-gradient(closest-side, var(--aurora-1), transparent 70%);
  animation: orb-drift-1 32s var(--ease-soft) infinite;
}
.site-bg__aurora .orb-2 {
  width: 48vw; height: 48vw; max-width: 700px; max-height: 700px;
  top: 25vh; right: -12vw;
  background: radial-gradient(closest-side, var(--aurora-3), transparent 70%);
  animation: orb-drift-2 38s var(--ease-soft) infinite;
}
.site-bg__aurora .orb-3 {
  width: 42vw; height: 42vw; max-width: 620px; max-height: 620px;
  top: 65vh; left: 30vw;
  background: radial-gradient(closest-side, var(--aurora-2), transparent 70%);
  animation: orb-drift-3 28s var(--ease-soft) infinite;
}
.site-bg__aurora .orb-4 {
  width: 38vw; height: 38vw; max-width: 560px; max-height: 560px;
  top: 110vh; left: -8vw;
  background: radial-gradient(closest-side, var(--aurora-4), transparent 70%);
  animation: orb-drift-4 44s var(--ease-soft) infinite;
}

@keyframes orb-drift-1 {
  0%,100% { transform: translate3d(0,0,0)        scale(1); }
  33%     { transform: translate3d(8vw, 4vh, 0)  scale(1.08); }
  66%     { transform: translate3d(-3vw, 8vh, 0) scale(.94); }
}
@keyframes orb-drift-2 {
  0%,100% { transform: translate3d(0,0,0)        scale(1); }
  50%     { transform: translate3d(-9vw, -6vh, 0) scale(1.1); }
}
@keyframes orb-drift-3 {
  0%,100% { transform: translate3d(0,0,0)        scale(1); }
  40%     { transform: translate3d(-6vw, -10vh, 0) scale(1.06); }
  80%     { transform: translate3d(7vw, 4vh, 0)   scale(.95); }
}
@keyframes orb-drift-4 {
  0%,100% { transform: translate3d(0,0,0)        scale(1); }
  50%     { transform: translate3d(10vw, -7vh, 0) scale(1.12); }
}


/* — Layer 3 · Pixel grid with radial mask — */
.site-bg__grid {
  background-image:
    linear-gradient(rgba(0, 107, 107, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 107, 107, 0.05) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  background-position: -1px -1px, -1px -1px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 35%, transparent 80%);
  opacity: 0.55;
}

/* — Layer 4 · Floating dots that drift upward (very subtle) — */
.site-bg__dots {
  background-image: radial-gradient(rgba(0, 107, 107, 0.20) 1.2px, transparent 1.4px);
  background-size: 38px 38px;
  background-position: 0 0;
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
  opacity: .35;
  animation: dots-drift 60s linear infinite;
  will-change: transform;
}
@keyframes dots-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-380px); }
}

/* — Layer 5 · Subtle grain (already present in motion.css body::after,
     but we tune opacity here when on glass bg) — */
body::after { opacity: 0.025 !important; }

/* — Mobile: drop the most expensive layers on touch devices — */
@media (max-width: 768px) {
  .site-bg__aurora .orb { filter: blur(60px); }
  .site-bg__aurora .orb-3, .site-bg__aurora .orb-4 { display: none; }
  .site-bg__dots { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .site-bg__aurora .orb,
  .site-bg__dots { animation: none !important; }
}

/* Body sits transparent so the fixed bg shows through everywhere */
body { background: transparent !important; }

/* Sections that previously used solid backgrounds become semi-transparent
   so the site bg can breathe through. */
section[style*="ink-50"],
section[style*="background: var(--ink-50)"] {
  background: rgba(247, 249, 250, 0.88) !important;
}

/* The trusted-by strip uses an inline white bg — make it glass instead */
.trusted-by[style*="background: white"],
section[style*="background: white"],
section[style*="background:white"] {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-top-color: rgba(0, 107, 107, 0.08) !important;
  border-bottom-color: rgba(0, 107, 107, 0.08) !important;
}

/* Fix the existing hero-mesh blobs: they use mix-blend-mode: multiply which
   needs an opaque backdrop to render colors. We've made the hero transparent,
   so switch the blend mode off and bump opacity. */
.hero-mesh__blob {
  mix-blend-mode: normal !important;
}
.hero-mesh__blob--a { opacity: .42 !important; }
.hero-mesh__blob--b { opacity: .50 !important; }
.hero-mesh__blob--c { opacity: .25 !important; }

/* ============================ GLASS HEADER ================================= */
.site-header {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 4px 24px rgba(0, 87, 92, 0.04);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.72) !important;
  border-bottom-color: rgba(0, 107, 107, 0.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 22px rgba(0, 87, 92, 0.08);
}

/* Nav link hover */
.main-nav > li > a:hover,
.main-nav > li > button:hover {
  background: rgba(20, 160, 159, 0.10) !important;
}

/* Dropdown becomes glass */
.dropdown {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 24px 60px rgba(0, 87, 92, 0.16) !important;
}

/* ============================ CARDS · GLASS ================================ */
/* Stronger, more refined card surface — frosted glass with gradient edge & glow.
   We layer a ::after for the gradient border so we can animate it on hover. */
.card,
.testimonial,
.contact-form,
.hero-visual .panel,
.two-col .panel {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--soft-1), var(--soft-2) !important;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

/* Dark panel override — skip glass treatment */
.panel--dark,
.panel--dark.panel {
  background: linear-gradient(155deg, #003F40 0%, #006B6B 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Soft animated gradient border (visible on hover) */
.card::after,
.testimonial::after,
.hero-visual .panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(20,160,159,0.55), rgba(143,215,214,0.10) 30%, transparent 60%, rgba(20,160,159,0.45) 100%);
  -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 .45s var(--ease-out);
  pointer-events: none;
}

/* Hover: lift, gradient edge fades in, soft teal halo */
.card:hover,
.testimonial:hover {
  transform: translate3d(0, -6px, 0) !important;
  background: var(--glass-bg-strong) !important;
  border-color: rgba(20, 160, 159, 0.20) !important;
  box-shadow: var(--soft-1), var(--soft-3), var(--soft-glow) !important;
}
.card:hover::after,
.testimonial:hover::after { opacity: 1; }

/* The cursor-tracking radial highlight (from motion.css) gets a brighter, teal-tinted
   gradient that pops more against the glass. */
.card::before,
.testimonial::before,
.b-stat::before,
.blog-card::before {
  background: radial-gradient(280px circle at var(--mouse-x) var(--mouse-y),
              rgba(20, 160, 159, 0.22),
              rgba(143, 215, 214, 0.10) 35%,
              transparent 70%) !important;
}

/* Card icon — gradient fill, glow on hover */
.card .ic {
  background: linear-gradient(135deg, rgba(20,160,159,0.14), rgba(143,215,214,0.20)) !important;
  color: var(--teal-700) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 14px rgba(0, 107, 107, 0.10);
  transition: transform .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.card:hover .ic {
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500)) !important;
  color: white !important;
  box-shadow: 0 8px 22px rgba(20, 160, 159, 0.40);
  transform: translateY(-2px) rotate(-3deg);
}

/* "Feature" card (the highlighted teal one) */
.card-feature {
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-800) 60%, var(--teal-900) 100%) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 24px 48px rgba(0, 64, 64, 0.30) !important;
  position: relative;
  overflow: hidden;
}
.card-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 80% 20%, rgba(143,215,214,0.22) 0%, transparent 60%),
    radial-gradient(60% 50% at 10% 100%, rgba(20,160,159,0.30) 0%, transparent 55%);
  opacity: 1 !important;
  pointer-events: none;
}
.card-feature .ic { background: rgba(255, 255, 255, 0.18) !important; color: white !important; }
.card-feature:hover .ic { background: white !important; color: var(--teal-700) !important; }

/* All-services tile (uses inline gradient) — wrap in glass */
a.card[style*="linear-gradient(150deg, var(--teal-50)"] {
  background: linear-gradient(135deg, rgba(143,215,214,0.45), rgba(226,244,244,0.55)) !important;
  border-color: rgba(20, 160, 159, 0.18) !important;
}

/* ============================ HERO VISUAL ================================== */
.hero-visual .panel {
  background:
    linear-gradient(150deg, rgba(255,255,255,0.55), rgba(226,244,244,0.45)) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 30px 80px rgba(0, 87, 92, 0.18),
    0 8px 24px rgba(0, 87, 92, 0.08) !important;
}

/* Float pills — full glass with halo */
.hero-visual .float,
.float.hv-float {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 14px 30px rgba(0, 87, 92, 0.12) !important;
}

/* Inner chart card sits on glass too */
.hv-chart-card {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 18px rgba(0, 87, 92, 0.08) !important;
}

/* Live activity rows on glass */
.hv-feed-item {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 107, 107, 0.06);
}

/* =============================== HERO ====================================== */
/* The hero already has its own mesh. We layer a brighter accent + parallax tilt. */
.hero.hero--mesh {
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(20,160,159,0.10) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(226,244,244,0.30) 100%) !important;
}

/* Hero h1 gradient accent — animated sweep */
.hero h1 em,
.page-hero h1 em {
  background: linear-gradient(110deg, var(--teal-700) 0%, var(--teal-400) 30%, var(--teal-600) 60%, var(--teal-700) 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: text-sweep 8s linear infinite;
}
@keyframes text-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: -220% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 em, .page-hero h1 em { animation: none !important; }
}

/* Hero stats — gradient numerals + animated underline on view */
.hero-stats .stat .num,
.b-stat .num,
.t-stat .num {
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

/* ============================ STAT BAND · GLASS DARK ======================= */
.stat-band {
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(143,215,214,0.18) 0%, transparent 60%),
    linear-gradient(135deg, var(--teal-800) 0%, var(--teal-900) 100%) !important;
  border: 1px solid rgba(143, 215, 214, 0.18) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 30px 70px rgba(0, 64, 64, 0.30) !important;
  position: relative;
  overflow: hidden;
}
.stat-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
}
.stat-band .b-stat .num {
  -webkit-text-fill-color: white !important;
  color: white !important;
  background: none;
}

/* ============================= CTA SECTION ================================= */
.cta-section {
  background:
    radial-gradient(50% 60% at 80% 30%, rgba(20,160,159,0.45) 0%, transparent 60%),
    radial-gradient(40% 50% at 10% 90%, rgba(143,215,214,0.25) 0%, transparent 55%),
    linear-gradient(135deg, #001f24 0%, var(--teal-900) 50%, var(--teal-800) 100%) !important;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 75%);
  pointer-events: none;
}
.cta-section::after {
  content: '';
  position: absolute;
  width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
  border-radius: 50%;
  top: -25%; right: -15%;
  background: radial-gradient(closest-side, rgba(20,160,159,0.35), transparent 70%);
  filter: blur(80px);
  animation: orb-drift-1 24s var(--ease-soft) infinite;
  pointer-events: none;
}

/* =============================== BUTTONS =================================== */
.btn-primary {
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-600) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 6px 18px rgba(0, 128, 128, 0.32),
    0 0 0 0 rgba(20, 160, 159, 0.45) !important;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-500) 100%) !important;
  transform: translate3d(0, -2px, 0) scale(1.015) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 14px 32px rgba(0, 128, 128, 0.40),
    0 0 0 6px rgba(20, 160, 159, 0.16) !important;
}

/* Secondary button */
.btn-secondary {
  background: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid rgba(0, 107, 107, 0.18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 14px rgba(0, 87, 92, 0.06) !important;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(20, 160, 159, 0.40) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 12px 26px rgba(0, 107, 107, 0.16) !important;
}

/* CTA section's white button */
.cta-section .btn-primary {
  background: white !important;
  color: var(--teal-800) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(0,0,0,0.20) !important;
}
.cta-section .btn-primary:hover {
  background: var(--teal-50) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 14px 32px rgba(0,0,0,0.30) !important;
}
.cta-section .btn-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  color: white !important;
}
.cta-section .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

/* =============================== TAGS ====================================== */
.tag {
  background: rgba(20, 160, 159, 0.10) !important;
  border-color: rgba(20, 160, 159, 0.20) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* ============================= FORMS · GLASS =============================== */
.contact-form {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 24px 60px rgba(0, 87, 92, 0.12) !important;
}
.form-row input,
.form-row textarea,
.form-row select {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(0, 107, 107, 0.10) !important;
  transition: border-color .25s, background .25s, box-shadow .25s, transform .25s var(--ease-out) !important;
}
.form-row input:hover,
.form-row textarea:hover,
.form-row select:hover {
  border-color: rgba(20, 160, 159, 0.30) !important;
  background: rgba(255, 255, 255, 0.75) !important;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  background: white !important;
  border-color: var(--teal-500) !important;
  box-shadow: 0 0 0 4px rgba(20, 160, 159, 0.18) !important;
}

/* ============================= TIMELINE STEPS ============================== */
.steps .step .n {
  background: linear-gradient(135deg, white, rgba(255,255,255,0.92)) !important;
  border-color: rgba(20, 160, 159, 0.40) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 16px rgba(0, 107, 107, 0.16);
}
.steps .step:hover .n {
  background: linear-gradient(135deg, var(--teal-600), var(--teal-700)) !important;
  color: white !important;
  transform: scale(1.06) rotate(-4deg);
  box-shadow: 0 12px 24px rgba(0, 128, 128, 0.30);
}

/* =========================== FOOTER POLISH ================================= */
.site-footer {
  background:
    radial-gradient(50% 70% at 80% 0%, rgba(20,160,159,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #07151b 0%, #0A1B25 100%) !important;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 80%);
  pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }
.footer-bottom .social a {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.06);
}
.footer-bottom .social a:hover {
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500)) !important;
  border-color: rgba(20, 160, 159, 0.50);
  transform: translate3d(0, -3px, 0) scale(1.06);
  box-shadow: 0 10px 24px rgba(0, 128, 128, 0.40);
}

/* ====================== DYNAMIC PER-COMPONENT REVEALS ====================== */
/*
  We extend the existing .fade-up system used by motion.js with several
  specialized variants. motion.js auto-tags h1/h2/h3/p/cards/etc with .fade-up,
  so to get richer reveals we override .fade-up's animation per-context using
  the surrounding selector or specific tag classes.
*/

/* --- Cards: scale-in (GPU-friendly — no filter: blur) --- */
.fade-up.card,
.fade-up.testimonial,
.fade-up.b-stat,
.fade-up.blog-card,
.fade-up.step,
.grid > .fade-up,
.feature-list > .fade-up {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.96);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out) !important;
}
.fade-up.card.is-visible,
.fade-up.testimonial.is-visible,
.fade-up.b-stat.is-visible,
.fade-up.blog-card.is-visible,
.fade-up.step.is-visible,
.grid > .fade-up.is-visible,
.feature-list > .fade-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Solutions showcase heading — always visible, never hidden by fade-up */
.sol-hero-heading,
main h2.sol-hero-heading,
main h2.sol-hero-heading.fade-up {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* --- Headings: gentle slide + reveal mask (as if the line is "drawn") --- */
main h2.fade-up:not(.sol-hero-heading),
main h3.fade-up:not(.blog-section-title) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity .85s var(--ease-out),
    transform .85s var(--ease-out),
    clip-path .9s var(--ease-out) !important;
}
main h2.fade-up.is-visible:not(.sol-hero-heading),
main h3.fade-up.is-visible:not(.blog-section-title) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0 0 0);
}

/* --- Kicker/eyebrow: slides in from the left with width grow --- */
main .kicker.fade-up {
  opacity: 0;
  transform: translate3d(-18px, 0, 0);
  transition:
    opacity .7s var(--ease-out),
    transform .7s var(--ease-out) !important;
}
main .kicker.fade-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --- Lead paragraphs: smooth fade-in (no filter for performance) --- */
main .lead.fade-up {
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out) !important;
}

/* --- Section headers: stronger stagger --- */
.section-header.fade-up,
.section-header.fade-up > .fade-up { transition-duration: .8s !important; }

/* --- Testimonials: rotate-in for a touch of personality --- */
.fade-up.testimonial {
  transform: translate3d(0, 36px, 0) rotate(-1.5deg) scale(0.96);
}
.fade-up.testimonial.is-visible {
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
}

/* --- CTA content slides in with split-direction (text left, btns right) --- */
.cta-content.fade-up { opacity: 1 !important; transform: none !important; filter: none !important; }
.cta-content > .text {
  opacity: 0;
  transform: translate3d(-40px, 0, 0);
  transition: opacity .9s var(--ease-out) .1s, transform .9s var(--ease-out) .1s;
}
.cta-content > div:not(.text) {
  opacity: 0;
  transform: translate3d(40px, 0, 0);
  transition: opacity .9s var(--ease-out) .25s, transform .9s var(--ease-out) .25s;
}
.cta-content.fade-up.is-visible > .text,
.cta-content.fade-up.is-visible > div:not(.text) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --- Stats / numbers grow up from baseline --- */
.fade-up.stat,
.fade-up.b-stat {
  transform-origin: bottom center;
}

/* --- Stagger faster for grids of 3-6 items, slower for big feature rows --- */
.fade-stagger.is-visible > .fade-up:nth-child(1) { transition-delay:  40ms; }
.fade-stagger.is-visible > .fade-up:nth-child(2) { transition-delay: 110ms; }
.fade-stagger.is-visible > .fade-up:nth-child(3) { transition-delay: 180ms; }
.fade-stagger.is-visible > .fade-up:nth-child(4) { transition-delay: 250ms; }
.fade-stagger.is-visible > .fade-up:nth-child(5) { transition-delay: 320ms; }
.fade-stagger.is-visible > .fade-up:nth-child(6) { transition-delay: 390ms; }

/* ============================ MAGNETIC CTAs ================================ */
.btn-primary, .btn-secondary, .btn {
  --mx: 0px; --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
}
.btn-primary:hover, .btn-secondary:hover, .btn:hover {
  /* The base hover transform from above already handles lift; magnetic JS adds offset */
}

/* ===================== SHIMMER SWEEP ON PRIMARY BUTTON ===================== */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.30), transparent);
  transform: skewX(-22deg);
  transition: left .85s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::after { left: 160%; }

/* ============================= LOGO MARQUEE ================================ */
.logo-marquee {
  background: rgba(255,255,255,0.60);
}
.logo-text { transition: color .3s var(--ease-out), transform .3s var(--ease-out) !important; }
.logo-text:hover {
  color: var(--teal-700) !important;
  transform: translateY(-2px) scale(1.04);
}

/* ============================= PAGE HERO =================================== */
.page-hero {
  background:
    radial-gradient(60% 50% at 80% 20%, rgba(20,160,159,0.12) 0%, transparent 60%),
    transparent !important;
  position: relative;
}
.page-hero::before {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,160,159,0.30), transparent);
}

/* ============================ BLOG CARDS · GLASS =========================== */
.blog-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--soft-1), var(--soft-2);
  overflow: hidden;
}
.blog-card:hover {
  box-shadow: var(--soft-1), var(--soft-3), var(--soft-glow) !important;
  border-color: rgba(20, 160, 159, 0.20) !important;
}

/* ============================ SCROLL PROGRESS ============================== */
.scroll-progress__bar {
  background: linear-gradient(90deg, var(--teal-400) 0%, var(--teal-600) 50%, var(--teal-700) 100%) !important;
  box-shadow: 0 0 12px rgba(20, 160, 159, 0.55), 0 0 4px rgba(20, 160, 159, 0.85);
  height: 100%;
}

/* ============================ COOKIE BANNER ================================ */
.cookie-banner {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 18px 50px rgba(0, 87, 92, 0.18) !important;
}
.btn-cookie-primary {
  background: linear-gradient(135deg, var(--teal-700), var(--teal-600)) !important;
  box-shadow: 0 4px 12px rgba(0, 128, 128, 0.30);
}

/* ========================= SOLUTIONS SHOWCASE GLASS ======================== */
.sol-panel-visual {
  background:
    linear-gradient(150deg, rgba(226,244,244,0.45), rgba(255,255,255,0.35)) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: var(--soft-1), var(--soft-2);
}
.sol-sel {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-color: var(--glass-border) !important;
  box-shadow: var(--soft-1), var(--soft-2);
}
.sol-sel:hover {
  background: var(--glass-bg-strong) !important;
  border-color: rgba(20, 160, 159, 0.25) !important;
  box-shadow: var(--soft-1), var(--soft-3);
}
.sol-sel.active {
  background: var(--glass-bg-strong) !important;
  border-color: rgba(20, 160, 159, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(20,160,159,0.10), var(--soft-1), var(--soft-3), var(--soft-glow);
}
/* Gradient border on active — animated edge highlight */
.sol-sel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(20,160,159,0.50), rgba(143,215,214,0.10) 30%, transparent 60%, rgba(20,160,159,0.40) 100%);
  -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 .45s var(--ease-out);
  pointer-events: none;
}
.sol-sel.active::after { opacity: 1; }
.samaat-app {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-color: var(--glass-border) !important;
  box-shadow: var(--soft-1), var(--soft-3);
}
.sol-flow-step {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
.sol-flow-step:hover {
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: var(--soft-1), 0 8px 20px rgba(0, 107, 107, 0.10);
}

/* ============================ SECTION DIVIDERS ============================= */
section { isolation: isolate; }

/* Soft top edge gradient so adjacent glass sections don't feel flat-stacked */
section + section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 107, 107, 0.12), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

/* ===================== MOTION SAFETY · REDUCED MOTION ====================== */
@media (prefers-reduced-motion: reduce) {
  .fade-up.card, .fade-up.testimonial, .fade-up.b-stat,
  .fade-up.blog-card, .fade-up.step,
  .grid > .fade-up, .feature-list > .fade-up,
  main h2.fade-up, main h3.fade-up,
  main .kicker.fade-up, main .lead.fade-up,
  .cta-content > .text, .cta-content > div:not(.text) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .btn-primary::after { display: none; }
}

/* ===================== MOBILE TUNING (perf savings) ======================== */
@media (max-width: 768px) {
  /* Strip backdrop-filter on mobile — use opaque backgrounds instead */
  .card, .testimonial, .blog-card, .contact-form, .hero-visual .panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }
  .site-header {
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  }
  /* Reduce aurora orb blur on mobile */
  .site-bg__aurora .orb {
    filter: blur(50px);
  }
}