/* ============================================================
   BIZNAPAGES DESIGN ENHANCEMENTS — fancy.css
   Premium visual upgrades: glassmorphism, animations, particles
   ============================================================ */

/* ---------- Custom Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D4A017, #0055FF);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #F5D060, #6ea8ff); }
html { scroll-behavior: smooth; scrollbar-color: #D4A017 rgba(0,0,0,.2); }

/* ---------- Smooth Page Load ---------- */
body {
  animation: fadeInPage .6s ease-out;
}
@keyframes fadeInPage {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* ---------- Glassmorphism Header ---------- */
.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  background: rgba(10, 12, 24, .88) !important;
  border-bottom: 1px solid rgba(212,160,23,.08) !important;
  transition: background .35s, box-shadow .35s, border-color .35s;
}
/* Offset body for fixed header height */
body {
  padding-top: 70px !important;
}
.header.header--scrolled {
  background: rgba(10, 12, 24, .88) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 0 80px rgba(212,160,23,.04);
  border-bottom-color: rgba(212,160,23,.15) !important;
}

/* ---------- Logo Pulse ---------- */
.logoMark {
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(212,160,23,.3)); }
  50%      { filter: drop-shadow(0 0 12px rgba(212,160,23,.6)); }
}

/* ---------- Nav Link Animated Underline ---------- */
.nav__link {
  position: relative;
  overflow: visible;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #D4A017, #F5D060);
  border-radius: 2px;
  transition: width .3s ease, left .3s ease;
}
.nav__link:hover::after,
.nav__link:focus::after {
  width: 100%;
  left: 0;
}

/* ---------- Hero Animated Background ---------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,85,255,.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(212,160,23,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(245,208,96,.05) 0%, transparent 50%);
  animation: heroShift 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes heroShift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-3%, -3%) rotate(3deg); }
}
.hero > * { position: relative; z-index: 1; }

/* ---------- Floating Orbs / Ambient Particles ---------- */
.hero::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  top: 10%;
  right: -5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,.12), transparent 70%);
  filter: blur(70px);
  animation: orbFloat 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes orbFloat {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-30px) scale(1.08); }
}

/* ---------- Hero Title Shimmer ---------- */
.hero__title,
.gradient-text {
  background: linear-gradient(135deg, #F5D060, #D4A017, #6ea8ff, #0055FF, #F5D060) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: shimmerGold 5s linear infinite;
}
@keyframes shimmerGold {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* ---------- Badge Glow ---------- */
.badge {
  position: relative;
  animation: badgeFade 2s ease-out;
  border-color: rgba(212,160,23,.3) !important;
  background: rgba(212,160,23,.08) !important;
}
.badge .badge__dot {
  background: linear-gradient(135deg, #F5D060, #D4A017) !important;
  box-shadow: 0 0 10px rgba(212,160,23,.5) !important;
}
.badge::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(212,160,23,.35), rgba(0,85,255,.25));
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
}
.badge:hover::before { opacity: 1; }

/* ---------- Buttons — Glow & Shine ---------- */
.hero__cta .btn--primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #D4A017, #C8963E) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 24px rgba(212,160,23,.35);
  transition: transform .25s, box-shadow .25s !important;
}
.hero__cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(212,160,23,.5), 0 0 60px rgba(212,160,23,.15);
}
.btn--primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,85,255,.25);
  transition: transform .25s, box-shadow .25s !important;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(0,85,255,.4), 0 0 60px rgba(0,85,255,.15);
}
.btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition: none;
  animation: btnShine 3s ease-in-out infinite;
}
@keyframes btnShine {
  0%   { left: -100%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}

.hero__cta .btn--ghost {
  border-color: rgba(212,160,23,.35) !important;
  color: #F5D060 !important;
  transition: transform .25s, box-shadow .25s, border-color .25s !important;
}
.hero__cta .btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(212,160,23,.2);
  border-color: rgba(212,160,23,.6) !important;
  background: rgba(212,160,23,.08) !important;
}
.btn--ghost {
  transition: transform .25s, box-shadow .25s, border-color .25s !important;
}
.btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,85,255,.2);
  border-color: rgba(0,85,255,.5) !important;
}

/* ---------- Scroll Reveal Animations ---------- */
.fancy-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.fancy-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fancy-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.fancy-reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.fancy-reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.fancy-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.fancy-reveal-scale {
  opacity: 0;
  transform: scale(.9);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.fancy-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Staggered Children ---------- */
.fancy-stagger > *:nth-child(1)  { transition-delay: .05s; }
.fancy-stagger > *:nth-child(2)  { transition-delay: .1s;  }
.fancy-stagger > *:nth-child(3)  { transition-delay: .15s; }
.fancy-stagger > *:nth-child(4)  { transition-delay: .2s;  }
.fancy-stagger > *:nth-child(5)  { transition-delay: .25s; }
.fancy-stagger > *:nth-child(6)  { transition-delay: .3s;  }
.fancy-stagger > *:nth-child(7)  { transition-delay: .35s; }
.fancy-stagger > *:nth-child(8)  { transition-delay: .4s;  }
.fancy-stagger > *:nth-child(9)  { transition-delay: .45s; }
.fancy-stagger > *:nth-child(10) { transition-delay: .5s;  }
.fancy-stagger > *:nth-child(11) { transition-delay: .55s; }
.fancy-stagger > *:nth-child(12) { transition-delay: .6s;  }
.fancy-stagger > *:nth-child(13) { transition-delay: .65s; }
.fancy-stagger > *:nth-child(14) { transition-delay: .7s;  }
.fancy-stagger > *:nth-child(15) { transition-delay: .75s; }

/* ---------- Card — Lift & Glow ---------- */
.card,
.card--feature,
.card--service,
.solution-card,
.industry-card,
.quoteCard {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s !important;
}
.card:hover,
.card--feature:hover,
.card--service:hover,
.solution-card:hover,
.industry-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.25), 0 0 40px rgba(212,160,23,.08) !important;
  border-color: rgba(212,160,23,.2) !important;
}
.quoteCard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.2), 0 0 30px rgba(212,160,23,.08) !important;
  border-color: rgba(212,160,23,.2) !important;
}

/* ---------- Card Icon Bounce on Card Hover ---------- */
.card__iconWrap,
.card__icon {
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.card:hover .card__iconWrap,
.card:hover .card__icon,
.industry-card:hover .card__icon,
.solution-card:hover .card__icon {
  transform: scale(1.18) rotate(-5deg);
}

/* ---------- Service Card Number Glow ---------- */
.card__serviceNum {
  transition: text-shadow .3s;
}
.card--service:hover .card__serviceNum {
  text-shadow: 0 0 20px rgba(212,160,23,.6), 0 0 40px rgba(212,160,23,.3);
}

/* ---------- Stats Bar — Animated Gradient ---------- */
.statsBar {
  position: relative;
  overflow: hidden;
}
.statsBar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(212,160,23,.05), rgba(0,85,255,.08), rgba(212,160,23,.05));
  background-size: 300% 100%;
  animation: statsGradient 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes statsGradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.stat__number {
  transition: text-shadow .35s;
}
.stat:hover .stat__number {
  text-shadow: 0 0 20px rgba(212,160,23,.4);
}

/* ---------- Steps — Connector Line Pulse ---------- */
.steps {
  position: relative;
}
.step__num {
  transition: transform .3s, box-shadow .3s;
}
.step:hover .step__num {
  transform: scale(1.15);
  box-shadow: 0 0 25px rgba(212,160,23,.35), 0 0 50px rgba(212,160,23,.15);
}

/* ---------- Pipeline Steps Pulse ---------- */
.pipeline__step--active .pipeline__circle {
  animation: pipelinePulse 2s ease-in-out infinite;
}
@keyframes pipelinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,23,.4); }
  50%      { box-shadow: 0 0 0 10px rgba(212,160,23,0); }
}

/* ---------- Art Card Tilt ---------- */
.artCard {
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s !important;
}
.artCard:hover {
  transform: translateY(-5px) rotate(-1deg) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.3) !important;
}

/* ---------- Art Pill Hover ---------- */
.artPill {
  transition: transform .25s, background .25s;
}
.artPill:hover {
  transform: scale(1.08);
}

/* ============================================================
   FANCY DASHBOARD CARD — Hero Art Redesign
   ============================================================ */

.fancyDash {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  perspective: 1200px;
}

/* Ambient glow behind the card */
.fancyDash__glow {
  position: absolute;
  inset: -30px;
  border-radius: 32px;
  background: radial-gradient(ellipse at 50% 40%, rgba(212,160,23,.18) 0%, transparent 65%),
              radial-gradient(ellipse at 80% 80%, rgba(0,85,255,.12) 0%, transparent 55%);
  filter: blur(40px);
  z-index: 0;
  animation: dashGlow 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes dashGlow {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 1;  transform: scale(1.05); }
}

/* Main card container */
.fancyDash__inner {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(18,22,40,.92) 0%, rgba(12,14,30,.96) 100%);
  border: 1px solid rgba(212,160,23,.12);
  box-shadow:
    0 4px 6px rgba(0,0,0,.15),
    0 20px 50px rgba(0,0,0,.3),
    0 0 80px rgba(212,160,23,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
  animation: dashFloat 6s ease-in-out infinite;
}
@keyframes dashFloat {
  0%, 100% { transform: translateY(0) rotateX(0); }
  50%      { transform: translateY(-8px) rotateX(1deg); }
}
.fancyDash:hover .fancyDash__inner {
  transform: translateY(-6px) rotateX(2deg) rotateY(-1deg);
  box-shadow:
    0 30px 70px rgba(0,0,0,.4),
    0 0 100px rgba(212,160,23,.1),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Shine overlay effect */
.fancyDash__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%);
  z-index: 10;
  pointer-events: none;
  animation: dashShine 5s ease-in-out infinite;
}
@keyframes dashShine {
  0%, 70% { left: -100%; }
  100%    { left: 200%; }
}

/* Top window bar */
.fancyDash__topBar {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.fancyDash__dots {
  display: flex;
  gap: 6px;
  margin-right: 12px;
}
.fancyDash__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}
.fancyDash__dots span:nth-child(1) { background: #ff5f57; box-shadow: 0 0 6px rgba(255,95,87,.4); }
.fancyDash__dots span:nth-child(2) { background: #ffbd2e; box-shadow: 0 0 6px rgba(255,189,46,.4); }
.fancyDash__dots span:nth-child(3) { background: #28c840; box-shadow: 0 0 6px rgba(40,200,64,.4); }

.fancyDash__topTitle {
  flex: 1;
  text-align: center;
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  letter-spacing: .03em;
}
.fancyDash__live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  color: #28c840;
  letter-spacing: .02em;
}
.fancyDash__liveDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28c840;
  display: block;
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(40,200,64,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(40,200,64,0); }
}

/* Revenue row */
.fancyDash__revenueRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  gap: 16px;
}
.fancyDash__revenueMain {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fancyDash__revenueLabel {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}
.fancyDash__revenueAmount {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #fff 30%, #F5D060);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fancyDash__revenueBadge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 600;
  color: #28c840;
  background: rgba(40,200,64,.1);
  border: 1px solid rgba(40,200,64,.2);
  border-radius: 20px;
  letter-spacing: .02em;
}

/* Sparkline mini-chart */
.fancyDash__miniChart {
  width: 120px;
  height: 40px;
  flex-shrink: 0;
}
.fancyDash__sparkline {
  width: 100%;
  height: 100%;
}
.fancyDash__sparkLine {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawSparkline 2s ease-out forwards;
  animation-delay: .5s;
}
.fancyDash__sparkArea {
  opacity: 0;
  animation: fadeInSparkArea 1s ease-out forwards;
  animation-delay: 1.5s;
}
.fancyDash__sparkDot {
  opacity: 0;
  animation: fadeInDot .5s ease-out forwards, sparkDotPulse 2s ease-in-out infinite;
  animation-delay: 2s, 2.5s;
}
@keyframes drawSparkline {
  to { stroke-dashoffset: 0; }
}
@keyframes fadeInSparkArea {
  to { opacity: 1; }
}
@keyframes fadeInDot {
  to { opacity: 1; }
}
@keyframes sparkDotPulse {
  0%, 100% { r: 3; filter: drop-shadow(0 0 2px rgba(212,160,23,.4)); }
  50%      { r: 4.5; filter: drop-shadow(0 0 6px rgba(212,160,23,.7)); }
}

/* Pill tabs row */
.fancyDash__pillRow {
  display: flex;
  gap: 8px;
  padding: 0 20px 14px;
  flex-wrap: wrap;
}
.fancyDash__pill {
  padding: 5px 14px;
  font-size: .75rem;
  font-weight: 500;
  border-radius: 20px;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  cursor: default;
  transition: all .25s;
  letter-spacing: .01em;
}
.fancyDash__pill:hover {
  color: rgba(255,255,255,.8);
  background: rgba(212,160,23,.08);
  border-color: rgba(212,160,23,.2);
  transform: translateY(-1px);
}
.fancyDash__pill--active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(212,160,23,.25), rgba(0,85,255,.2)) !important;
  border-color: rgba(212,160,23,.35) !important;
  box-shadow: 0 2px 12px rgba(212,160,23,.15);
}

/* KPI mini-cards row */
.fancyDash__kpiRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 20px 16px;
}
.fancyDash__kpi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: all .3s;
}
.fancyDash__kpi:hover {
  background: rgba(212,160,23,.06);
  border-color: rgba(212,160,23,.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.fancyDash__kpiIcon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.fancyDash__kpiIcon--blue {
  background: linear-gradient(135deg, rgba(212,160,23,.2), rgba(212,160,23,.08));
  color: #D4A017;
  border: 1px solid rgba(212,160,23,.15);
}
.fancyDash__kpiIcon--purple {
  background: linear-gradient(135deg, rgba(0,85,255,.2), rgba(0,85,255,.08));
  color: #6ea8ff;
  border: 1px solid rgba(0,85,255,.15);
}
.fancyDash__kpiIcon--green {
  background: linear-gradient(135deg, rgba(40,200,64,.2), rgba(40,200,64,.08));
  color: #28c840;
  border: 1px solid rgba(40,200,64,.15);
}
.fancyDash__kpiData {
  display: flex;
  flex-direction: column;
}
.fancyDash__kpiVal {
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.fancyDash__kpiLabel {
  font-size: .66rem;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
}

/* Pipeline section */
.fancyDash__pipeline {
  margin: 0 20px 18px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}
.fancyDash__pipeHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.fancyDash__pipeTitle {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
}
.fancyDash__pipeStatus {
  font-size: .72rem;
  font-weight: 600;
  color: #D4A017;
  letter-spacing: .02em;
}

/* Track bar */
.fancyDash__pipeTrack {
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  margin-bottom: 16px;
  overflow: hidden;
}
.fancyDash__pipeFill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #D4A017, #F5D060, #0055FF);
  background-size: 200% 100%;
  animation: pipeFillAnim 2s ease-out forwards, pipeGradientShift 3s ease-in-out infinite;
  animation-delay: .8s, 2.8s;
}
@keyframes pipeFillAnim {
  to { width: 82%; }
}
@keyframes pipeGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Pipeline steps */
.fancyDash__pipeSteps {
  display: flex;
  justify-content: space-between;
}
.fancyDash__pipeStep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.fancyDash__pipeStep span {
  font-size: .7rem;
  font-weight: 500;
  color: rgba(255,255,255,.35);
  letter-spacing: .01em;
}
.fancyDash__pipeCircle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.3);
  transition: all .3s;
}

/* Done steps */
.fancyDash__pipeStep--done .fancyDash__pipeCircle {
  background: linear-gradient(135deg, rgba(212,160,23,.2), rgba(0,85,255,.15));
  border-color: rgba(212,160,23,.4);
  color: #D4A017;
  box-shadow: 0 0 12px rgba(212,160,23,.15);
}
.fancyDash__pipeStep--done span {
  color: rgba(212,160,23,.7);
}

/* Active step */
.fancyDash__pipeStep--active .fancyDash__pipeCircle {
  background: linear-gradient(135deg, rgba(40,200,64,.15), rgba(110,168,255,.1));
  border-color: rgba(40,200,64,.4);
  color: #28c840;
  box-shadow: 0 0 15px rgba(40,200,64,.15);
  position: relative;
}
.fancyDash__pipeStep--active span {
  color: #28c840;
  font-weight: 600;
}
.fancyDash__pipePulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28c840;
  display: block;
  animation: pipeDotPulse 1.5s ease-in-out infinite;
}
@keyframes pipeDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(40,200,64,.5); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(40,200,64,0); transform: scale(1.15); }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .fancyDash { max-width: 100%; }
  .fancyDash__revenueRow { flex-direction: column; gap: 12px; }
  .fancyDash__miniChart { width: 100%; height: 32px; }
  .fancyDash__kpiRow { grid-template-columns: 1fr; }
  .fancyDash__revenueAmount { font-size: 1.2rem; }
}

/* ---------- CTA Band — Animated BG ---------- */
.ctaBand {
  position: relative;
  overflow: hidden;
}
.ctaBand::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(ellipse at 30% 50%, rgba(212,160,23,.1), transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(0,85,255,.08), transparent 60%);
  animation: ctaFloat 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes ctaFloat {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-5%, 5%); }
}
.ctaBand > * { position: relative; z-index: 1; }

/* ---------- Quote Card — Star Glow ---------- */
.quoteCard__stars {
  transition: text-shadow .3s;
}
.quoteCard:hover .quoteCard__stars {
  text-shadow: 0 0 12px rgba(255, 200, 50, .5);
}

/* ---------- Form Inputs — Glow Focus ---------- */
.field__input {
  transition: border-color .3s, box-shadow .3s !important;
}
.field__input:focus {
  border-color: rgba(212,160,23,.5) !important;
  box-shadow: 0 0 0 3px rgba(212,160,23,.12), 0 0 20px rgba(212,160,23,.08) !important;
}

/* ---------- Footer — Subtle Top Glow ---------- */
.footer {
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.3), rgba(0,85,255,.3), transparent);
}

/* ---------- Floating Action Buttons Pulse ---------- */
div[style*="position:fixed"][style*="bottom"] > a {
  animation: fabPulse 3s ease-in-out infinite;
}
div[style*="position:fixed"][style*="bottom"] > a:nth-child(1) {
  animation-delay: 0s;
}
div[style*="position:fixed"][style*="bottom"] > a:nth-child(2) {
  animation-delay: 1.5s;
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,.25); }
  50%      { box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 20px rgba(212,160,23,.2); }
}

/* ---------- Manage Grid Items ---------- */
.manage-item {
  transition: transform .25s, background .25s;
}
.manage-item:hover {
  transform: translateX(4px);
  background: rgba(212,160,23,.06);
  border-radius: 8px;
}

/* ---------- Highlight chips animate ---------- */
.highlight {
  transition: transform .25s, box-shadow .25s, border-color .25s;
  border-color: rgba(212,160,23,.15) !important;
  background: rgba(212,160,23,.06) !important;
}
.highlight:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(212,160,23,.15);
  border-color: rgba(212,160,23,.3) !important;
}
.highlight svg {
  color: #D4A017 !important;
}

/* ---------- Section Tag — Animated Border ---------- */
.sectionTag {
  position: relative;
  overflow: hidden;
}
.sectionTag::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #D4A017, #F5D060, #0055FF, #D4A017);
  background-size: 300% 300%;
  animation: tagBorder 4s ease infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
}
.sectionTag:hover::before { opacity: 1; }

/* ---------- Mega Menu Glass ---------- */
.nav__mega {
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.nav__megaItem {
  transition: transform .2s, background .2s !important;
}
.nav__megaItem:hover {
  transform: translateX(4px);
}

/* ---------- Selection Color ---------- */
::selection {
  background: rgba(212,160,23,.3);
  color: #fff;
}

/* ---------- Animated Background Grid (subtle) ---------- */
#fancy-grid-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .4;
}

/* ---------- Responsive Cleanup ---------- */
@media (max-width: 768px) {
  .fancy-reveal,
  .fancy-reveal-left,
  .fancy-reveal-right {
    transform: translateY(20px) !important;
  }
  .fancy-reveal.is-visible,
  .fancy-reveal-left.is-visible,
  .fancy-reveal-right.is-visible {
    transform: translateY(0) !important;
  }
}

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

/* ============================================================
   COMPACT CONTACT DROPDOWN
   ============================================================ */
.nav__mega--compact .nav__megaGrid {
  grid-template-columns: 1fr !important;
  max-width: 280px;
}
.nav__mega--compact .nav__megaItem:first-child {
  font-weight: 600;
}

/* ============================================================
   NAV CTA BUTTON — "Get Started"
   ============================================================ */
a.btn.btn--primary.nav__cta,
.nav__cta {
  margin-left: 12px;
  padding: 8px 22px !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  letter-spacing: .01em;
  white-space: nowrap;
  background: #0055FF !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 2px 14px rgba(0,85,255,.4) !important;
  transition: background .2s, box-shadow .2s, transform .2s;
}
a.btn.btn--primary.nav__cta:hover,
.nav__cta:hover {
  background: #003BCC !important;
  background-image: none !important;
  box-shadow: 0 4px 20px rgba(0,85,255,.55) !important;
  transform: translateY(-1px);
}
.nav__cta::after { display: none !important; }

@media (max-width: 768px) {
  .nav__cta {
    margin-left: 0;
    margin-top: 8px;
    text-align: center;
    width: 100%;
  }
}

/* ============================================================
   INTERACTIVE CONTACT CARDS
   ============================================================ */
.contactCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
@media (max-width: 768px) {
  .contactCards { grid-template-columns: 1fr; gap: 16px; }
}

.contactCard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px 32px;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s, background .4s;
  cursor: pointer;
}
.contactCard:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  background: rgba(255,255,255,.05);
}

/* Icon circle */
.contactCard__iconWrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
}
.contactCard:hover .contactCard__iconWrap {
  transform: scale(1.1) rotate(-5deg);
}

/* WhatsApp variant */
.contactCard--whatsapp .contactCard__iconWrap {
  background: linear-gradient(135deg, rgba(37,211,102,.18), rgba(37,211,102,.06));
  border: 1px solid rgba(37,211,102,.2);
  color: #25D366;
}
.contactCard--whatsapp:hover {
  border-color: rgba(37,211,102,.3);
}
.contactCard--whatsapp:hover .contactCard__iconWrap {
  box-shadow: 0 0 30px rgba(37,211,102,.2), 0 0 60px rgba(37,211,102,.08);
}

/* Call variant */
.contactCard--call .contactCard__iconWrap {
  background: linear-gradient(135deg, rgba(0,102,255,.18), rgba(0,102,255,.06));
  border: 1px solid rgba(0,102,255,.2);
  color: #0066FF;
}
.contactCard--call:hover {
  border-color: rgba(0,102,255,.3);
}
.contactCard--call:hover .contactCard__iconWrap {
  box-shadow: 0 0 30px rgba(0,102,255,.2), 0 0 60px rgba(0,102,255,.08);
}

/* Email variant */
.contactCard--email .contactCard__iconWrap {
  background: linear-gradient(135deg, rgba(212,160,23,.18), rgba(0,85,255,.06));
  border: 1px solid rgba(212,160,23,.2);
  color: #D4A017;
}
.contactCard--email:hover {
  border-color: rgba(212,160,23,.3);
}
.contactCard--email:hover .contactCard__iconWrap {
  box-shadow: 0 0 30px rgba(212,160,23,.2), 0 0 60px rgba(212,160,23,.08);
}

/* Content */
.contactCard__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contactCard__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
}
.contactCard__desc {
  font-size: .88rem;
  line-height: 1.55;
  color: rgba(255,255,255,.55);
  margin: 0;
}
.contactCard__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: gap .3s;
}
.contactCard:hover .contactCard__action {
  gap: 8px;
}
.contactCard--whatsapp .contactCard__action { color: #25D366; }
.contactCard--call .contactCard__action { color: #0066FF; }
.contactCard--email .contactCard__action { color: #D4A017; }

/* Pulse ring on hover */
.contactCard__pulse {
  position: absolute;
  top: 36px;
  left: 50%;
  width: 68px;
  height: 68px;
  margin-left: -34px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.contactCard:hover .contactCard__pulse {
  opacity: 1;
  animation: contactPulseRing 1.5s ease-out infinite;
}
.contactCard--whatsapp .contactCard__pulse { border: 2px solid rgba(37,211,102,.3); }
.contactCard--call .contactCard__pulse { border: 2px solid rgba(0,102,255,.3); }
.contactCard--email .contactCard__pulse { border: 2px solid rgba(212,160,23,.3); }

@keyframes contactPulseRing {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Ambient shine */
.contactCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.03) 50%, transparent 70%);
  pointer-events: none;
  transition: left .6s;
}
.contactCard:hover::before {
  left: 150%;
}

/* ============================================================
   CONTACT INFO CARDS (contact page only)
   ============================================================ */
.contactInfo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .contactInfo { grid-template-columns: 1fr; }
}
.contactInfo__card {
  text-align: center;
  padding: 28px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .3s, border-color .3s;
}
.contactInfo__card:hover {
  transform: translateY(-4px);
  border-color: rgba(212,160,23,.15);
}
.contactInfo__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, rgba(212,160,23,.12), rgba(0,85,255,.08));
  border: 1px solid rgba(212,160,23,.12);
  color: #D4A017;
}
.contactInfo__card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: #fff;
}
.contactInfo__card p {
  font-size: .85rem;
  line-height: 1.55;
  color: rgba(255,255,255,.5);
  margin: 0;
}

/* ── Supported Business Pages ── responsive grid override ── */
@media (max-width: 1024px) {
  .container > section > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .container > section > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FANCY "WHAT WE OFFER" SECTION
   ═══════════════════════════════════════════════════════════ */
.offerSection {
  position: relative;
  padding: 110px 0 90px;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(8,12,28,.5) 30%, rgba(8,12,28,.5) 70%, transparent 100%);
}
.offerSection::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(212,160,23,.1) 0%, transparent 70%),
    radial-gradient(ellipse 50% 70% at 80% 80%, rgba(0,85,255,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Floating orbs behind the grid ── */
.offerSection__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .3;
  pointer-events: none;
  animation: orbFloat 8s ease-in-out infinite alternate;
}
.offerSection__orb--1 {
  width: 360px; height: 360px;
  background: rgba(212,160,23,.2);
  top: -80px;  left: -100px;
}
.offerSection__orb--2 {
  width: 300px; height: 300px;
  background: rgba(0,85,255,.18);
  bottom: -60px; right: -80px;
  animation-delay: -4s;
}
.offerSection__orb--3 {
  width: 200px; height: 200px;
  background: rgba(212,160,23,.1);
  top: 40%; left: 50%;
  animation-delay: -2s;
}
@keyframes orbFloat {
  to { transform: translate(30px, -20px) scale(1.12); }
}

/* ── Offer carousel ── */
.offerCarousel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 1 !important;
  transform: none !important;
}
.offerCarousel__viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  border-radius: 20px;
  padding: 8px 0;
}
.offerCarousel__track {
  display: flex;
  gap: 24px;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.offerCarousel__track .offerCard {
  flex: 0 0 calc((100% - 48px) / 3);   /* 3 visible, 2 gaps */
  min-width: 0;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
}

/* ── Arrows ── */
.offerCarousel__arrow {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(212,160,23,.25);
  background: linear-gradient(135deg, rgba(212,160,23,.12), rgba(0,85,255,.08));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position: relative;
  z-index: 2;
  align-self: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.offerCarousel__arrow:hover {
  background: linear-gradient(135deg, rgba(212,160,23,.3), rgba(0,85,255,.2));
  border-color: rgba(212,160,23,.5);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 4px 20px rgba(212,160,23,.25);
}
.offerCarousel__arrow:active {
  transform: scale(.95);
}
.offerCarousel__arrow--prev { margin-right: 18px; }
.offerCarousel__arrow--next { margin-left: 18px; }
.offerCarousel__arrow:disabled {
  opacity: .2;
  pointer-events: none;
}

/* ── Dots ── */
.offerCarousel__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
  position: relative;
  z-index: 1;
}
.offerCarousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  cursor: pointer;
  padding: 0;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.offerCarousel__dot:hover {
  background: rgba(212,160,23,.5);
  transform: scale(1.3);
}
.offerCarousel__dot--active {
  background: #D4A017;
  width: 28px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(212,160,23,.5);
}

/* ── Individual card ── */
.offerCard {
  position: relative !important;
  border-radius: 20px;
  padding: 36px 30px 32px;
  width: 100%;
  background: linear-gradient(165deg, rgba(20,28,50,.95) 0%, rgba(12,16,32,.92) 100%);
  border: 1px solid rgba(212,160,23,.12);
  transition: transform .4s cubic-bezier(.4,0,.2,1),
              box-shadow .4s ease,
              border-color .4s ease;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  top: auto !important;
  left: auto !important;
  min-width: auto !important;
  max-width: none !important;
  pointer-events: auto !important;
}
/* ── Gradient accent top bar ── */
.offerCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #D4A017, #F5D060);
  border-radius: 20px 20px 0 0;
  opacity: .6;
  transition: opacity .35s ease, height .35s ease;
}
/* ── Glow halo ── */
.offerCard::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 30%, rgba(212,160,23,.06), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.offerCard:hover {
  transform: translateY(-8px);
  border-color: rgba(212,160,23,.35);
  box-shadow:
    0 12px 40px rgba(0,0,0,.4),
    0 0 30px rgba(212,160,23,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.offerCard:hover::before {
  opacity: 1;
  height: 4px;
}
.offerCard:hover::after {
  opacity: 1;
}

/* ── Color-coded accent bars by icon color ── */
.offerCard:has(.offerCard__icon--blue)::before  { background: linear-gradient(90deg, #6ea8ff, #4d94ff); }
.offerCard:has(.offerCard__icon--purple)::before { background: linear-gradient(90deg, #D4A017, #F5D060); }
.offerCard:has(.offerCard__icon--green)::before  { background: linear-gradient(90deg, #25d366, #34d399); }
.offerCard:has(.offerCard__icon--orange)::before { background: linear-gradient(90deg, #ff9f43, #fbbf24); }
.offerCard:has(.offerCard__icon--cyan)::before   { background: linear-gradient(90deg, #00ced1, #22d3ee); }
.offerCard:has(.offerCard__icon--pink)::before   { background: linear-gradient(90deg, #ff6987, #f472b6); }

/* ── Icon wrapper ── */
.offerCard__icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
  transition: transform .35s ease, box-shadow .35s ease;
}
.offerCard:hover .offerCard__icon {
  transform: scale(1.1) translateY(-2px);
}
.offerCard__icon--blue {
  background: linear-gradient(135deg, rgba(110,168,255,.22), rgba(110,168,255,.08));
  border: 1px solid rgba(110,168,255,.25);
  color: #6ea8ff;
  box-shadow: 0 4px 20px rgba(110,168,255,.12);
}
.offerCard:hover .offerCard__icon--blue {
  box-shadow: 0 6px 28px rgba(110,168,255,.3);
}
.offerCard__icon--purple {
  background: linear-gradient(135deg, rgba(212,160,23,.22), rgba(212,160,23,.08));
  border: 1px solid rgba(212,160,23,.25);
  color: #D4A017;
  box-shadow: 0 4px 20px rgba(212,160,23,.12);
}
.offerCard:hover .offerCard__icon--purple {
  box-shadow: 0 6px 28px rgba(212,160,23,.3);
}
.offerCard__icon--green {
  background: linear-gradient(135deg, rgba(37,211,102,.22), rgba(37,211,102,.08));
  border: 1px solid rgba(37,211,102,.25);
  color: #25d366;
  box-shadow: 0 4px 20px rgba(37,211,102,.12);
}
.offerCard:hover .offerCard__icon--green {
  box-shadow: 0 6px 28px rgba(37,211,102,.3);
}
.offerCard__icon--orange {
  background: linear-gradient(135deg, rgba(255,159,67,.22), rgba(255,159,67,.08));
  border: 1px solid rgba(255,159,67,.25);
  color: #ff9f43;
  box-shadow: 0 4px 20px rgba(255,159,67,.12);
}
.offerCard:hover .offerCard__icon--orange {
  box-shadow: 0 6px 28px rgba(255,159,67,.3);
}
.offerCard__icon--cyan {
  background: linear-gradient(135deg, rgba(0,206,209,.22), rgba(0,206,209,.08));
  border: 1px solid rgba(0,206,209,.25);
  color: #00ced1;
  box-shadow: 0 4px 20px rgba(0,206,209,.12);
}
.offerCard:hover .offerCard__icon--cyan {
  box-shadow: 0 6px 28px rgba(0,206,209,.3);
}
.offerCard__icon--pink {
  background: linear-gradient(135deg, rgba(255,105,135,.22), rgba(255,105,135,.08));
  border: 1px solid rgba(255,105,135,.25);
  color: #ff6987;
  box-shadow: 0 4px 20px rgba(255,105,135,.12);
}
.offerCard:hover .offerCard__icon--pink {
  box-shadow: 0 6px 28px rgba(255,105,135,.3);
}

/* ── Title ── */
.offerCard__title {
  font-size: 1.18rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  position: relative;
  z-index: 1;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.offerCard:hover .offerCard__title {
  background: linear-gradient(90deg, #fff 30%, #F5D060);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Description ── */
.offerCard__desc {
  font-size: .9rem;
  line-height: 1.65;
  color: rgba(255,255,255,.55);
  margin: 0 0 22px;
  flex: 1;
  position: relative;
  z-index: 1;
}
.offerCard:hover .offerCard__desc {
  color: rgba(255,255,255,.7);
}

/* ── Learn more link ── */
.offerCard__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 600;
  color: #D4A017;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: gap .3s ease, color .3s ease;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(212,160,23,.06);
  border: 1px solid rgba(212,160,23,.1);
  margin-top: auto;
  width: fit-content;
}
.offerCard:hover .offerCard__link {
  gap: 10px;
  color: #F5D060;
  background: rgba(212,160,23,.15);
  border-color: rgba(212,160,23,.3);
}
.offerCard__link svg {
  transition: transform .3s ease;
}
.offerCard:hover .offerCard__link svg {
  transform: translateX(3px);
}

/* ── Shine sweep on hover ── */
.offerCard__shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
  pointer-events: none;
  z-index: 0;
}
.offerCard:hover .offerCard__shine {
  left: 160%;
}

/* ── Offer section badge / tag numbering ── */
.offerCard__num {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: rgba(255,255,255,.08);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}

/* ── CTA row beneath grid ── */
.offerSection__cta {
  text-align: center;
  margin-top: 48px;
  position: relative;
  z-index: 1;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .offerCarousel__track .offerCard {
    flex: 0 0 calc((100% - 24px) / 2);  /* 2 visible */
  }
  .offerCarousel__arrow { width: 42px; height: 42px; }
  .offerCarousel__arrow--prev { margin-right: 12px; }
  .offerCarousel__arrow--next { margin-left: 12px; }
}
@media (max-width: 600px) {
  .offerCarousel__track .offerCard {
    flex: 0 0 100%;  /* 1 visible */
  }
  .offerSection {
    padding: 60px 0 50px;
  }
  .offerCarousel__arrow { display: none; }
  .offerCarousel__viewport { border-radius: 16px; }
  .offerCard { padding: 28px 22px 26px; }
  .offerCard__title { font-size: 1.1rem; }
}


/* ═══════════════════════════════════════════════════════════
   INDUSTRY MARQUEE SECTION
   ═══════════════════════════════════════════════════════════ */
.industrySection {
  position: relative;
  padding: 100px 0 80px;
  overflow: hidden;
}
.industrySection__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .25;
  pointer-events: none;
  animation: orbFloat 8s ease-in-out infinite alternate;
}
.industrySection__orb--1 {
  width: 300px; height: 300px;
  background: rgba(212,160,23,.2);
  top: -60px; right: -80px;
}
.industrySection__orb--2 {
  width: 250px; height: 250px;
  background: rgba(0,85,255,.18);
  bottom: -50px; left: -60px;
  animation-delay: -3s;
}

/* ── Marquee wrapper ── */
.indMarquee {
  overflow: hidden;
  position: relative;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.indMarquee + .indMarquee {
  margin-top: 16px;
}

/* ── Track: continuous scroll ── */
.indMarquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: indScroll 35s linear infinite;
}
.indMarquee--reverse .indMarquee__track {
  animation: indScrollReverse 35s linear infinite;
}
.indMarquee:hover .indMarquee__track {
  animation-play-state: paused;
}

@keyframes indScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes indScrollReverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ── Individual pill ── */
.indPill {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 60px;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, rgba(20,28,50,.9), rgba(15,20,40,.95));
  border: 1px solid rgba(255,255,255,.08);
  transition: all .35s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  position: relative !important;
  overflow: hidden;
  opacity: 1 !important;
  visibility: visible !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  min-width: auto !important;
  max-width: none !important;
  pointer-events: auto !important;
  flex-shrink: 0;
}
.indPill::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.indPill:hover::before { opacity: 1; }

.indPill:hover {
  transform: translateY(-3px) scale(1.04) !important;
  border-color: rgba(212,160,23,.3);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 20px var(--pill-glow, rgba(212,160,23,.15));
}
.indPill svg {
  flex-shrink: 0;
  transition: transform .3s ease;
}
.indPill:hover svg {
  transform: scale(1.15) rotate(-5deg);
}

/* ── Color variants ── */
.indPill--blue {
  --pill-glow: rgba(110,168,255,.2);
  border-color: rgba(110,168,255,.15);
}
.indPill--blue svg { color: #6ea8ff; }
.indPill--blue:hover { border-color: rgba(110,168,255,.4); background: linear-gradient(135deg, rgba(110,168,255,.12), rgba(15,20,40,.95)); }

.indPill--purple {
  --pill-glow: rgba(212,160,23,.2);
  border-color: rgba(212,160,23,.15);
}
.indPill--purple svg { color: #D4A017; }
.indPill--purple:hover { border-color: rgba(212,160,23,.4); background: linear-gradient(135deg, rgba(212,160,23,.12), rgba(15,20,40,.95)); }

.indPill--green {
  --pill-glow: rgba(37,211,102,.2);
  border-color: rgba(37,211,102,.12);
}
.indPill--green svg { color: #25d366; }
.indPill--green:hover { border-color: rgba(37,211,102,.4); background: linear-gradient(135deg, rgba(37,211,102,.1), rgba(15,20,40,.95)); }

.indPill--orange {
  --pill-glow: rgba(255,159,67,.2);
  border-color: rgba(255,159,67,.12);
}
.indPill--orange svg { color: #ff9f43; }
.indPill--orange:hover { border-color: rgba(255,159,67,.4); background: linear-gradient(135deg, rgba(255,159,67,.1), rgba(15,20,40,.95)); }

.indPill--cyan {
  --pill-glow: rgba(0,206,209,.2);
  border-color: rgba(0,206,209,.12);
}
.indPill--cyan svg { color: #00ced1; }
.indPill--cyan:hover { border-color: rgba(0,206,209,.4); background: linear-gradient(135deg, rgba(0,206,209,.1), rgba(15,20,40,.95)); }

.indPill--pink {
  --pill-glow: rgba(255,105,135,.2);
  border-color: rgba(255,105,135,.12);
}
.indPill--pink svg { color: #ff6987; }
.indPill--pink:hover { border-color: rgba(255,105,135,.4); background: linear-gradient(135deg, rgba(255,105,135,.1), rgba(15,20,40,.95)); }

/* ── CTA ── */
.industrySection__cta {
  text-align: center;
  margin-top: 48px;
  position: relative;
  z-index: 1;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .industrySection { padding: 70px 0 60px; }
  .indPill { padding: 11px 20px; font-size: .85rem; }
  .indMarquee__track { gap: 12px; }
  .indMarquee + .indMarquee { margin-top: 12px; }
}

/* ============================================================
   MOBILE NAVIGATION — Hamburger + Slide-Out Drawer
   ============================================================ */

/* Override base CSS .nav{display:none} at 980px */
@media (max-width: 980px) {
  .nav { display: flex !important; }
  .header__menuBtn { display: none !important; }
}

/* Hamburger Button */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  cursor: pointer;
  z-index: 10001;
  position: relative;
  transition: background .2s, border-color .2s;
}
.nav__hamburger:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(212,160,23,.3);
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav__hamburger span + span { margin-top: 5px; }

/* Hamburger → X animation */
.nav__hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile overlay */
.nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9998;
  opacity: 0;
  transition: opacity .3s ease;
}
.nav__overlay.is-visible {
  display: block;
  opacity: 1;
}

@media (max-width: 980px) {
  .nav__hamburger { display: flex; }

  /* CRITICAL: base CSS sets .nav{display:none} at 980px — override it */
  .nav {
    display: flex !important;
  }

  /* Slide-out drawer */
  .nav {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 300px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 80px 20px 32px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-left: 1px solid rgba(212,160,23,.15) !important;
    background: rgba(10, 12, 24, .98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: -8px 0 40px rgba(0,0,0,.5) !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    transition: right .35s cubic-bezier(.4,0,.2,1) !important;
    gap: 4px !important;
  }
  .nav.is-open {
    right: 0 !important;
  }

  /* ALL nav children must be visible and properly styled */
  .nav > * {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    color: #fff !important;
  }

  /* Nav links */
  .nav > a.nav__link {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;
    color: rgba(255,255,255,.9) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    background: transparent !important;
  }
  .nav > a.nav__link:hover,
  .nav > a.nav__link:active {
    background: rgba(212,160,23,.1) !important;
    color: #F5D060 !important;
  }

  /* Dropdown containers */
  .nav > .nav__dropdown {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
  }

  /* Dropdown toggle buttons */
  .nav__dropdown > .nav__dropdownLabel {
    display: flex !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;
    color: rgba(255,255,255,.9) !important;
    text-align: left !important;
    border-radius: 10px !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }
  .nav__dropdown > .nav__dropdownLabel:hover,
  .nav__dropdown > .nav__dropdownLabel:active {
    background: rgba(212,160,23,.1) !important;
    color: #F5D060 !important;
  }

  /* ---------- MEGA MENU: accordion (collapsed by default) ---------- */
  .nav__mega,
  .nav__dropdown .nav__mega,
  .nav__dropdown:hover .nav__mega,
  .nav__dropdown:focus-within .nav__mega {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .35s ease !important;
    padding: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  /* Expanded state */
  .nav__dropdown.is-expanded > .nav__mega,
  .nav__dropdown.is-expanded > .nav__mega {
    max-height: 80vh !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
  }

  .nav__megaInner {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 8px !important;
  }

  .nav__megaHeader {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav__megaTitle {
    display: flex !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #D4A017 !important;
    text-decoration: none !important;
    font-size: .85rem !important;
  }

  /* Hide pseudo bridge used for desktop hover */
  .nav__dropdown::after { display: none !important; }

  /* Chevron rotation */
  .nav__chevron { transition: transform .3s ease; }
  .nav__dropdown.is-expanded .nav__chevron { transform: rotate(180deg) !important; }

  /* Mega grid single column */
  .nav__megaGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    max-height: none !important;
  }

  /* ALL mega items must be visible */
  .nav__megaItem,
  .nav .nav__megaItem,
  a.nav__megaItem {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    padding: 11px 14px !important;
    font-size: .9rem !important;
    color: rgba(255,255,255,.85) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    gap: 10px !important;
  }
  .nav__megaItem:hover,
  .nav__megaItem:active {
    background: rgba(212,160,23,.1) !important;
    color: #F5D060 !important;
  }

  .nav__megaDot {
    display: inline-block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav__megaLabel {
    display: inline !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
  }

  /* CTA button at bottom */
  a.btn.btn--primary.nav__cta,
  .nav__cta,
  .nav > .nav__cta {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 16px !important;
    margin-left: 0 !important;
    text-align: center !important;
    width: 100% !important;
    color: #fff !important;
  }

  /* Prevent body scroll when menu is open */
  body.nav-open {
    overflow: hidden !important;
  }
}


/* ============================================================
   Responsive + full-width enhancements (appended 2026-07)
   ============================================================ */

/* --- Full-width layout (was 1120px, then 1440px) --- */
:root { --container: 100%; }

/* --- Prevent any horizontal scrolling on phones --- */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }

/* --- Inline 4-col feature grids -> 2 cols, then 1 col --- */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
}

/* --- Homepage dashboard mockup: drop the blurred sidebar on small screens so content is full width --- */
@media (max-width: 760px) {
  [style*="width:210px"] { display: none !important; }
}

/* --- OneAccessApp: stack the two columns on tablet/phone --- */
@media (max-width: 820px) {
  .oneAccess__grid { grid-template-columns: 1fr !important; gap: 2.25rem !important; }
}

/* --- Tighter side gutters on small phones so content uses more width --- */
@media (max-width: 480px) {
  .container { width: min(var(--container), calc(100% - 24px)) !important; }
}


/* ============================================================
   Inner-page mobile pass (appended 2026-08)

   The solution / supported-business pages are authored with inline
   styles, which no normal rule can outrank. These overrides reach
   them via attribute selectors on the inline style itself, so they
   need !important. Match the inline value exactly (no spaces) if
   you add more — e.g. style*="padding:3rem".
   ============================================================ */

/* --- Vertical rhythm: inner-page sections are padded for desktop --- */
@media (max-width: 640px) {
  main.container > section[style*="padding:3rem 0"] {
    padding-top: 2rem !important;
    padding-bottom: 2.25rem !important;
  }
  main.container > section[style*="padding:2rem 0 1rem"] {
    padding-top: 1.25rem !important;
  }
}

/* --- Headings: 2.2rem/1.8rem overflow long titles on a 360px screen --- */
@media (max-width: 640px) {
  main.container h1[style*="font-size:2.2rem"] {
    font-size: 1.6rem !important;
    line-height: 1.22 !important;
  }
  main.container h2[style*="font-size:1.8rem"] {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
  }
  main.container p[style*="font-size:1.05rem"] {
    font-size: .97rem !important;
  }
}

/* --- Feature cards: trim desktop padding so copy keeps its width --- */
@media (max-width: 480px) {
  main.container div[style*="grid-template-columns:repeat(4,1fr)"] > div[style*="padding:24px"] {
    padding: 20px 18px !important;
  }
}

/* --- Testimonial carousel: 3rem slide padding leaves ~260px of copy --- */
@media (max-width: 768px) {
  #carouselTrack > div[style*="padding:3rem"] { padding: 2.25rem 1.25rem !important; }
  #carouselTrack blockquote { font-size: 1rem !important; }
}
@media (max-width: 480px) {
  #carouselTrack > div[style*="padding:3rem"] { padding: 1.75rem 1rem !important; }
  #carouselTrack blockquote { font-size: .95rem !important; line-height: 1.6 !important; }
}

/* Side arrows sit on top of the quote once the slide narrows —
   drop them to the bottom corners and let the dots sit between. */
@media (max-width: 560px) {
  button[onclick*="moveSlide"] {
    top: auto !important;
    bottom: 8px !important;
    transform: none !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }
  #carouselDots {
    padding: 0 58px 1.35rem !important;
    flex-wrap: wrap !important;
  }
  /* 10px dots are below the 24px minimum tap target */
  #carouselDots > button { width: 14px !important; height: 14px !important; }
}

/* --- CTA button: let it span the column instead of overflowing --- */
@media (max-width: 420px) {
  main.container a[style*="padding:14px 32px"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================
   FOOTER — ACCEPTED PAYMENT METHODS
   Sits in .footer__bottom next to the copyright. That row is
   already flex + space-between + wrap, so this drops to its own
   line on narrow screens without any extra media query.
   ============================================================ */
.footerPay {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-end;
}
.footerPay__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.footerPay__label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}
.footerPay__list {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footerPay__item {
  display: inline-flex;
  border-radius: 5px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .2s;
}
.footerPay__item:hover { transform: translateY(-2px); }
.footerPay__item svg { display: block; width: 44px; height: 29px; }
.footerPay__note {
  font-size: .76rem;
  color: rgba(255,255,255,.42);
  line-height: 1.4;
}

/* Phones: left-align with the copyright and shrink the badges a little */
@media (max-width: 640px) {
  .footerPay { align-items: flex-start; width: 100%; }
  .footerPay__item svg { width: 40px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .footerPay__item, .footerPay__item:hover { transition: none; transform: none; }
}