/* ═══════════════════════════════════════════════════════
   PREMIUM LAYER — Marketing Clinic
   Scroll reveal · Card tilt · Cursor glow · Counters
   Ripple · Progress bar · Gradient text · Noise depth
   ═══════════════════════════════════════════════════════ */

/* ── Page entrance ──────────────────────────────────── */
body { animation: _page-in .35s ease-out both; }
@keyframes _page-in { from { opacity:0 } to { opacity:1 } }

/* ── Scroll progress bar ────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  z-index: 99999;
  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 60%, #a78bfa 100%);
  box-shadow: 0 0 10px rgba(56,189,248,.55), 0 0 20px rgba(37,99,235,.35);
  transition: width .1s linear;
  pointer-events: none;
}

/* ── Cursor glow (desktop) ──────────────────────────── */
#cursor-glow {
  position: fixed;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.055) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity .4s;
  will-change: left, top;
}
@media (pointer: coarse) { #cursor-glow { display: none; } }

/* ── Scroll reveal ──────────────────────────────────── */
.mc-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .65s cubic-bezier(.16,1,.3,1),
    transform .65s cubic-bezier(.16,1,.3,1);
}
.mc-reveal.mc-visible { opacity: 1; transform: translateY(0); }
.mc-reveal[data-d="1"] { transition-delay: .08s }
.mc-reveal[data-d="2"] { transition-delay: .16s }
.mc-reveal[data-d="3"] { transition-delay: .24s }
.mc-reveal[data-d="4"] { transition-delay: .32s }
.mc-reveal[data-d="5"] { transition-delay: .40s }
.mc-reveal[data-d="6"] { transition-delay: .48s }

/* ── Card hover — lift + shadow ─────────────────────── */
.service-card,
.market-card,
.svc-card,
.step-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    background .28s,
    transform .28s cubic-bezier(.16,1,.3,1),
    box-shadow .28s,
    border-color .28s !important;
}
.service-card:hover,
.market-card:hover {
  box-shadow:
    0 24px 64px rgba(0,0,0,.45),
    0 0 0 1px rgba(96,165,250,.14),
    0 0 32px rgba(37,99,235,.08) !important;
}
.svc-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 20px 52px rgba(0,0,0,.4),
    0 0 0 1px rgba(96,165,250,.18) !important;
}
.step-card:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 16px 44px rgba(0,0,0,.35),
    0 0 0 1px rgba(96,165,250,.14) !important;
  border-color: rgba(96,165,250,.25) !important;
}

/* ── Gradient border on card hover ─────────────────── */
.service-card {
  --_gb: linear-gradient(135deg, rgba(37,99,235,.4), rgba(56,189,248,.3));
  position: relative;
}
.service-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--_gb);
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
}
.service-card:hover::after { opacity: 1; }

/* ── Step card counter glow ─────────────────────────── */
.step-card::before {
  transition: color .3s !important;
}
.step-card:hover::before {
  color: rgba(96,165,250,.22) !important;
}

/* ── Button ripple ──────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-outline,
.form-submit, .nav-cta, .mob-cta {
  position: relative;
  overflow: hidden;
}
.mc-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  transform: scale(0);
  animation: _ripple .65s cubic-bezier(.25,.46,.45,.94) forwards;
  pointer-events: none;
}
@keyframes _ripple {
  to { transform: scale(4.5); opacity: 0; }
}

/* ── Animated gradient heading ──────────────────────── */
.mc-grad-text,
.hero-h1 em,
.page-hero-title em,
.page-hero-h1 em {
  background: linear-gradient(125deg, #60a5fa 0%, #38bdf8 40%, #a78bfa 80%, #60a5fa 100%);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: _grad-shift 5s ease infinite;
}
@keyframes _grad-shift {
  0%,100% { background-position: 0% 50% }
  50%      { background-position: 100% 50% }
}

/* ── Stat value shimmer on enter ────────────────────── */
@keyframes _counter-in {
  from { opacity:0; transform:translateY(8px) scale(.95) }
  to   { opacity:1; transform:translateY(0) scale(1) }
}
.mc-counted { animation: _counter-in .4s ease-out both; }

/* ── Service page hero stat ─────────────────────────── */
.hero-stat-n {
  display: block;
  transition: text-shadow .3s;
}
.hero-stats:hover .hero-stat-n {
  text-shadow: 0 0 20px rgba(56,189,248,.35);
}

/* ── Focus rings (WCAG AA) ──────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(96,165,250,.75) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* ── Form field hover ───────────────────────────────── */
.form-input, .form-select, .form-textarea {
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}
.form-input:hover:not(:focus),
.form-select:hover:not(:focus),
.form-textarea:hover:not(:focus) {
  border-color: rgba(96,165,250,.22) !important;
  background: rgba(255,255,255,.03) !important;
}

/* ── Sector item hover ──────────────────────────────── */
.sector-item { transition: padding-left .25s, background .2s !important; }
.sector-item:hover { background: rgba(96,165,250,.04); }

/* ── Step hover refinement ──────────────────────────── */
.step { transition: padding-left .25s, background .2s !important; }
.step:hover { background: rgba(96,165,250,.03); border-radius: 6px; }

/* ── Nav link underline animation ───────────────────── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--cyan, #38bdf8);
  transition: width .25s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover::after { width: 100%; }

/* ── Noise texture for depth ────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%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)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* ── Panel glassmorphism refinement ─────────────────── */
.hero-panel {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* ── CTA section glow ───────────────────────────────── */
.cta-section, [class*="cta"] section, section.cta {
  position: relative;
}

/* ── Scrollbar styling ──────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(96,165,250,.2);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(96,165,250,.4); }

/* ── Selection color ────────────────────────────────── */
::selection {
  background: rgba(37,99,235,.35);
  color: #eef2ff;
}

/* ── Smooth image loads ─────────────────────────────── */
img {
  transition: opacity .4s ease;
}
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].mc-img-loaded { opacity: 1; }