/* ================================================================
   BUZZ NOW SOLUTIONS — CINEMATIC PREMIUM LAYER v4
   Full visual transformation — Apple / Linear / Vercel level
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

/* ── EXTENDED TOKENS ── */
:root {
  --display-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --glow-purple: 0 0 80px rgba(147,51,234,.4), 0 0 160px rgba(147,51,234,.15);
  --glow-purple-sm: 0 0 40px rgba(147,51,234,.35), 0 0 80px rgba(147,51,234,.12);
  --glass-dark: rgba(12, 11, 26, 0.78);
  --glass-border: rgba(255,255,255,0.09);
  --glass-glow-border: rgba(147,51,234,0.28);
  --glass-blur: blur(40px) saturate(180%);
}

/* ════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY UPGRADE
   ════════════════════════════════════════════════ */

body {
  font-family: var(--display-font);
}

.hero-headline {
  font-family: var(--display-font) !important;
  font-size: clamp(58px, 8.8vw, 118px) !important;
  font-weight: 900 !important;
  line-height: 0.97 !important;
  letter-spacing: -0.054em !important;
  margin-bottom: 28px !important;
}

.section-title {
  font-family: var(--display-font) !important;
  font-size: clamp(38px, 4.8vw, 68px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.042em !important;
  line-height: 1.06 !important;
}

.display-2 {
  font-family: var(--display-font) !important;
  font-size: clamp(42px, 5.8vw, 80px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.048em !important;
  line-height: 1.00 !important;
}

.h2 {
  font-family: var(--display-font) !important;
  font-size: clamp(34px, 4.2vw, 56px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

.h3 {
  font-family: var(--display-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* ════════════════════════════════════════════════
   NAVIGATION — PREMIUM FROSTED GLASS
   ════════════════════════════════════════════════ */

.nav {
  background: rgba(8,8,15,0.5) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  transition: all 0.3s ease !important;
}

.nav.scrolled {
  background: rgba(8,8,15,0.92) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,.5) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
  box-shadow: 0 0 20px rgba(147,51,234,.4), inset 0 1px 0 rgba(255,255,255,.15) !important;
  font-family: var(--display-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border-radius: 12px !important;
  transition: all 0.25s cubic-bezier(.4,0,.2,1) !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 32px rgba(147,51,234,.55), 0 8px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

.btn-outline {
  border-color: rgba(255,255,255,0.18) !important;
  font-family: var(--display-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  transition: all 0.25s ease !important;
}
.btn-outline:hover {
  border-color: rgba(147,51,234,.6) !important;
  background: rgba(147,51,234,.1) !important;
  transform: translateY(-2px) !important;
}

/* ════════════════════════════════════════════════
   HERO — FULL-SCREEN CINEMATIC COMPOSITION
   ════════════════════════════════════════════════ */

.hero {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Massive background mesh gradient */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(147,51,234,.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 30% 70%, rgba(109,40,217,.12) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 20%, rgba(168,85,247,.08) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* Cinematic grid background */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(147,51,234,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,51,234,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
  z-index: 0;
  animation: gridDrift 40s linear infinite;
}

.hero-inner {
  padding: 140px 0 100px !important;
  position: relative;
  z-index: 2;
}

/* Hero badge - premium pill */
.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px 7px 10px !important;
  background: rgba(147,51,234,.12) !important;
  border: 1px solid rgba(147,51,234,.3) !important;
  border-radius: 100px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #c084fc !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 32px !important;
  backdrop-filter: blur(12px) !important;
}

.hero-badge-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 10px #10b981, 0 0 20px rgba(16,185,129,.4) !important;
  animation: pulseDot 2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

.hero-sub {
  font-size: 19px !important;
  line-height: 1.65 !important;
  color: rgba(144, 140, 188, 0.9) !important;
  max-width: 500px !important;
  letter-spacing: -0.01em !important;
}

/* CTA row */
.hero-cta-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}

.hero-cta-row .btn-xl {
  font-size: 16px !important;
  padding: 15px 28px !important;
  font-family: var(--display-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

/* Hero stats */
.hero-trust {
  padding-top: 40px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}

.hero-trust-lbl {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--dark-dim) !important;
  margin-bottom: 20px !important;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.hero-stat-val {
  font-family: var(--display-font) !important;
  font-size: clamp(26px, 3.5vw, 40px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

.hero-stat-lbl {
  font-size: 12px !important;
  color: var(--dark-dim) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* ════════════════════════════════════════════════
   HERO DASHBOARD — PREMIUM 3D GLASS CARD
   ════════════════════════════════════════════════ */

.hero-dash {
  perspective: 1400px !important;
  position: relative !important;
}

/* Glow aura behind the dashboard */
.hero-dash::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at 60% 40%, rgba(147,51,234,.35) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: auraBreath 6s ease-in-out infinite alternate;
}

.dash-card {
  background: rgba(13, 12, 28, 0.88) !important;
  border: 1px solid rgba(147,51,234,.25) !important;
  border-radius: 24px !important;
  padding: 28px !important;
  box-shadow:
    0 0 0 1px rgba(147,51,234,.12),
    0 40px 100px rgba(0,0,0,.75),
    0 0 80px rgba(147,51,234,.2) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  transform: perspective(1200px) rotateY(-9deg) rotateX(5deg) translateZ(0) !important;
  transition: transform 0.6s cubic-bezier(.25,.46,.45,.94) !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

/* Top shimmer line */
.dash-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.8), rgba(147,51,234,.5), transparent);
  animation: shimmerLine 3s ease-in-out infinite;
}

/* Diagonal sheen */
.dash-card::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -60%;
  width: 60%;
  height: 300%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.025),
    transparent
  );
  transform: rotate(15deg);
  animation: dashSheen 5s ease-in-out infinite;
  pointer-events: none;
}

.dash-card:hover {
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg) translateZ(20px) !important;
  box-shadow:
    0 0 0 1px rgba(147,51,234,.22),
    0 50px 120px rgba(0,0,0,.8),
    0 0 100px rgba(147,51,234,.3) !important;
}

.dash-title {
  font-family: var(--display-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--dark-fg) !important;
}

.dash-metric-val {
  font-family: var(--display-font) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

/* Floating notification cards */
.notif-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: rgba(12, 11, 26, 0.90) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  min-width: 200px !important;
  backdrop-filter: blur(32px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(147,51,234,.1) !important;
}

.notif-title {
  font-family: var(--display-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--dark-fg) !important;
  letter-spacing: -0.01em !important;
}

.notif-sub {
  font-size: 11px !important;
  color: var(--dark-dim) !important;
  margin-top: 2px !important;
}

/* ════════════════════════════════════════════════
   SECTION BACKGROUNDS — PREMIUM DEPTH
   ════════════════════════════════════════════════ */

.section-dark3 {
  position: relative;
  overflow: hidden;
}

.section-dark3::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 0% 50%, rgba(147,51,234,.1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(109,40,217,.08) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Trusted by logo strip */
.logo-strip {
  overflow: hidden !important;
  position: relative !important;
  mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent) !important;
}

.logo-item {
  font-family: var(--display-font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  color: rgba(144, 140, 188, 0.6) !important;
  white-space: nowrap !important;
  padding: 0 32px !important;
  transition: color 0.2s ease !important;
}

/* ════════════════════════════════════════════════
   SECTION HEADERS
   ════════════════════════════════════════════════ */

.section-tag {
  font-family: var(--display-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--brand-light) !important;
  margin-bottom: 20px !important;
}

.tag-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--brand) !important;
  box-shadow: 0 0 8px rgba(147,51,234,.6) !important;
  animation: pulseDot 2.5s ease-in-out infinite !important;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 64px;
}

.section-sub {
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--dark-muted) !important;
  letter-spacing: -0.01em !important;
  margin-top: 16px !important;
}

/* ════════════════════════════════════════════════
   SERVICE CARDS — PREMIUM GLASS
   ════════════════════════════════════════════════ */

.svc-card {
  background: rgba(14, 13, 30, 0.7) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(.4,0,.2,1) !important;
}

.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(147,51,234,.06) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.svc-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(147,51,234,.3) !important;
  box-shadow:
    0 0 0 1px rgba(147,51,234,.15),
    0 24px 56px rgba(0,0,0,.5),
    0 0 40px rgba(147,51,234,.12) !important;
}

.svc-card:hover::before {
  opacity: 1;
}

.svc-card h3 {
  font-family: var(--display-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.svc-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}

.svc-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--brand-light) !important;
}

/* ════════════════════════════════════════════════
   WHY CHOOSE US — PREMIUM ITEMS
   ════════════════════════════════════════════════ */

.why-item {
  background: rgba(14, 13, 30, 0.6) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  position: relative !important;
}

.why-item:hover {
  border-color: rgba(147,51,234,.3) !important;
  background: rgba(21, 20, 42, 0.8) !important;
  transform: translateX(4px) !important;
}

.why-item:hover::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad-brand);
  border-radius: 0 2px 2px 0;
}

/* ════════════════════════════════════════════════
   RESULTS / STATS SECTION
   ════════════════════════════════════════════════ */

.result-item {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.result-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(147,51,234,.08) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.result-item:hover::before {
  opacity: 1;
}

.result-item:hover {
  background: rgba(21, 20, 42, 0.8) !important;
}

/* Big stat numbers */
.results-grid [data-counter] {
  font-family: var(--display-font) !important;
  letter-spacing: -0.05em !important;
}

/* ════════════════════════════════════════════════
   AI COMMAND CENTER — FUTURISTIC OS PANEL
   ════════════════════════════════════════════════ */

.ai-command-center {
  position: relative;
  background: rgba(10, 9, 22, 0.90) !important;
  border: 1px solid rgba(147,51,234,.22) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  overflow: hidden !important;
  box-shadow:
    0 0 0 1px rgba(147,51,234,.1),
    0 40px 80px rgba(0,0,0,.6),
    0 0 60px rgba(147,51,234,.15) !important;
  backdrop-filter: blur(32px) !important;
  border-top-color: rgba(168,85,247,.4) !important;
}

/* Grid background */
.ai-command-center::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(147,51,234,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,51,234,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
  animation: gridDrift 30s linear infinite;
}

/* Purple sweep line */
.ai-command-center::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(147,51,234,.04), transparent);
  animation: aiSweep 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Pipeline container */
.ai-pipeline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each pipeline step */
.ai-pipeline-step {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.ai-pipeline-step:hover {
  background: rgba(147,51,234,.08) !important;
  border-color: rgba(147,51,234,.25) !important;
  transform: translateX(4px) !important;
}

/* Active step glow */
.ai-pipeline-step.active-step {
  background: rgba(147,51,234,.1) !important;
  border-color: rgba(147,51,234,.3) !important;
  box-shadow: 0 0 0 1px rgba(147,51,234,.15), inset 0 0 20px rgba(147,51,234,.05) !important;
}

/* Step icon container */
.ai-step-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.ai-step-content {
  flex: 1;
}

.ai-step-title {
  font-family: var(--display-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--dark-fg) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 2px !important;
}

.ai-step-sub {
  font-size: 11px !important;
  color: var(--dark-muted) !important;
}

/* Status badges */
.ai-step-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.ai-step-badge.live {
  background: rgba(16,185,129,.15) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16,185,129,.25) !important;
}

.ai-step-badge.auto {
  background: rgba(147,51,234,.15) !important;
  color: #a855f7 !important;
  border: 1px solid rgba(147,51,234,.25) !important;
}

.ai-step-badge.smart {
  background: rgba(245,158,11,.15) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245,158,11,.25) !important;
}

.ai-step-badge.closed {
  background: rgba(16,185,129,.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16,185,129,.25) !important;
}

/* Animated connecting lines */
.ai-pipeline-connector {
  width: 2px !important;
  height: 20px !important;
  margin: 0 0 0 27px !important;
  background: linear-gradient(to bottom, rgba(147,51,234,.5), rgba(147,51,234,.15)) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ai-pipeline-connector::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(147,51,234,.8);
  animation: flowDot 2s ease-in-out infinite;
}

/* Stats footer */
.ai-cmd-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  position: relative !important;
  z-index: 1 !important;
}

.ai-cmd-stat {
  text-align: center;
  padding: 16px 12px;
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
}

.ai-cmd-stat-val {
  font-family: var(--display-font) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

.ai-cmd-stat-lbl {
  font-size: 11px !important;
  color: var(--dark-dim) !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════════
   CASE STUDY CARDS — PREMIUM
   ════════════════════════════════════════════════ */

.cs-card {
  transition: all 0.3s cubic-bezier(.4,0,.2,1) !important;
  overflow: hidden !important;
}

.cs-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(147,51,234,.25) !important;
  box-shadow: 0 32px 60px rgba(0,0,0,.5), 0 0 40px rgba(147,51,234,.1) !important;
}

.cs-mv {
  font-family: var(--display-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

/* ════════════════════════════════════════════════
   PRICING — APPLE-LEVEL PREMIUM CARDS
   ════════════════════════════════════════════════ */

.pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

.pricing-card {
  background: rgba(14, 13, 30, 0.85) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 28px !important;
  padding: 44px 38px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(.34,1.56,.64,1) !important;
}

.pricing-card:not(.featured)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(147,51,234,.05) 0%, transparent 60%);
  pointer-events: none;
}

.pricing-card:not(.featured):hover {
  transform: translateY(-8px) !important;
  border-color: rgba(147,51,234,.25) !important;
  box-shadow:
    0 0 0 1px rgba(147,51,234,.12),
    0 32px 60px rgba(0,0,0,.5) !important;
}

/* Featured card - HERO treatment */
.pricing-card.featured {
  background: rgba(10, 9, 24, 0.95) !important;
  border: 1px solid rgba(147,51,234,.55) !important;
  border-radius: 28px !important;
  padding: 44px 38px !important;
  transform: translateY(-20px) !important;
  box-shadow:
    0 0 0 1px rgba(147,51,234,.3),
    0 40px 80px rgba(0,0,0,.65),
    0 0 70px rgba(147,51,234,.22),
    0 0 140px rgba(147,51,234,.08) !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  transition: all 0.4s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Featured card background mesh */
.pricing-card.featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(147,51,234,.2) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 120%, rgba(109,40,217,.12) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Featured top accent line */
.pricing-card.featured::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a855f7, #7c3aed, #a855f7, transparent);
  animation: shimmerLine 4s ease-in-out infinite;
}

.pricing-card.featured:hover {
  transform: translateY(-28px) scale(1.015) !important;
  box-shadow:
    0 0 0 1px rgba(147,51,234,.4),
    0 50px 100px rgba(0,0,0,.7),
    0 0 90px rgba(147,51,234,.3),
    0 0 180px rgba(147,51,234,.1) !important;
}

.pricing-name {
  font-family: var(--display-font) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 8px !important;
  position: relative !important;
  z-index: 1 !important;
}

.pricing-popular {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, rgba(147,51,234,.25), rgba(109,40,217,.2)) !important;
  border: 1px solid rgba(147,51,234,.4) !important;
  color: #c084fc !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 100px !important;
  margin-bottom: 20px !important;
}

.pricing-currency {
  font-family: var(--display-font) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

.pricing-price {
  font-family: var(--display-font) !important;
  font-size: clamp(40px, 4.5vw, 56px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
}

.pricing-period {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--dark-muted) !important;
}

.pricing-amount {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin-bottom: 4px !important;
}

.pricing-features {
  margin-bottom: 32px !important;
}

.pf {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.005em !important;
}

.pf:last-child {
  border-bottom: none !important;
}

.pf-check {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: rgba(147,51,234,.2) !important;
  border: 1px solid rgba(147,51,234,.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #a855f7 !important;
}

.pf-check svg {
  width: 10px !important;
  height: 10px !important;
  stroke-width: 3 !important;
}

/* ════════════════════════════════════════════════
   FORMS — PREMIUM CONVERSION PANELS
   ════════════════════════════════════════════════ */

.form-card {
  background: rgba(10, 9, 22, 0.92) !important;
  border: 1px solid rgba(147,51,234,.2) !important;
  border-top-color: rgba(168,85,247,.4) !important;
  border-radius: 28px !important;
  padding: 44px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 0 0 1px rgba(147,51,234,.1),
    0 40px 80px rgba(0,0,0,.55),
    0 0 60px rgba(147,51,234,.12) !important;
  backdrop-filter: blur(32px) !important;
}

.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a855f7, #7c3aed, transparent);
  animation: shimmerLine 5s ease-in-out infinite;
}

.form-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(147,51,234,.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.form-card > * {
  position: relative;
  z-index: 1;
}

.audit-form-card {
  background: rgba(10, 9, 22, 0.92) !important;
  border: 1px solid rgba(147,51,234,.22) !important;
  border-top-color: rgba(168,85,247,.4) !important;
  border-radius: 28px !important;
  padding: 44px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 0 0 1px rgba(147,51,234,.1),
    0 40px 80px rgba(0,0,0,.55),
    0 0 60px rgba(147,51,234,.12) !important;
  backdrop-filter: blur(32px) !important;
}

.audit-form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a855f7, #7c3aed, transparent);
  animation: shimmerLine 5s ease-in-out infinite;
}

.audit-form-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(147,51,234,.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.audit-form-card > * {
  position: relative;
  z-index: 1;
}

/* Form inputs - premium */
.form-input {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  color: var(--dark-fg) !important;
  font-family: var(--display-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 13px 16px !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.form-input:focus {
  outline: none !important;
  border-color: rgba(147,51,234,.6) !important;
  background: rgba(147,51,234,.06) !important;
  box-shadow: 0 0 0 3px rgba(147,51,234,.1), 0 0 20px rgba(147,51,234,.08) !important;
}

.form-label {
  font-family: var(--display-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: var(--dark-muted) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.form-group {
  margin-bottom: 20px !important;
}

.form-trust-row {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

.form-reassurance {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--dark-dim) !important;
  font-weight: 500 !important;
}

/* ════════════════════════════════════════════════
   TESTIMONIAL CARDS
   ════════════════════════════════════════════════ */

.testi-card {
  background: rgba(14, 13, 30, 0.8) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 24px !important;
  transition: all 0.3s ease !important;
}

.testi-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(147,51,234,.2) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,.4), 0 0 30px rgba(147,51,234,.08) !important;
}

/* ════════════════════════════════════════════════
   PAGE HERO — INNER PAGES
   ════════════════════════════════════════════════ */

.page-hero {
  padding: 140px 0 60px !important;
  position: relative !important;
  overflow: hidden !important;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(147,51,234,.15) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 30% 60%, rgba(109,40,217,.08) 0%, transparent 50%);
  pointer-events: none;
}

/* ════════════════════════════════════════════════
   PROCESS STEPS — NUMBERED CIRCLES
   ════════════════════════════════════════════════ */

.proc-num {
  font-family: var(--display-font) !important;
  font-weight: 900 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ════════════════════════════════════════════════
   PORTFOLIO / BLOG CARDS
   ════════════════════════════════════════════════ */

.port-inner {
  transition: all 0.3s ease !important;
}

.port-inner:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(147,51,234,.25) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,.4), 0 0 30px rgba(147,51,234,.1) !important;
}

.blog-inner {
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.blog-inner:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(147,51,234,.25) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,.4) !important;
}

/* ════════════════════════════════════════════════
   FOOTER — PREMIUM
   ════════════════════════════════════════════════ */

.footer {
  position: relative !important;
  overflow: hidden !important;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(147,51,234,.5), rgba(109,40,217,.3), transparent);
}

.footer::after {
  content: '';
  position: absolute;
  top: -100px; left: 50%; transform: translateX(-50%);
  width: 600px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(147,51,234,.06) 0%, transparent 65%);
  pointer-events: none;
}

.footer-link {
  font-family: var(--display-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.footer-link:hover {
  color: var(--brand-light) !important;
}

/* ════════════════════════════════════════════════
   FLOATING CTA BAR
   ════════════════════════════════════════════════ */

.floating-cta {
  position: fixed !important;
  bottom: 32px !important;
  right: 32px !important;
  z-index: 900 !important;
}

.float-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 24px !important;
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
  border-radius: 100px !important;
  color: #fff !important;
  font-family: var(--display-font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: 0 8px 32px rgba(147,51,234,.45), 0 0 60px rgba(147,51,234,.15) !important;
  transition: all 0.3s ease !important;
  letter-spacing: -0.01em !important;
}

.float-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(147,51,234,.55), 0 0 80px rgba(147,51,234,.2) !important;
}

/* ════════════════════════════════════════════════
   TEXT GRADIENT ENHANCEMENT
   ════════════════════════════════════════════════ */

.text-gradient {
  background: linear-gradient(135deg, #c084fc 0%, #9333ea 35%, #7c3aed 65%, #a855f7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% 200% !important;
  animation: gradientShift 7s ease infinite !important;
}

/* ════════════════════════════════════════════════
   BADGE + TAG OVERRIDES
   ════════════════════════════════════════════════ */

.badge {
  font-family: var(--display-font) !important;
  font-weight: 700 !important;
}

.badge-success {
  background: rgba(16,185,129,.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16,185,129,.25) !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
}

/* ════════════════════════════════════════════════
   CONTACT PAGE GRID
   ════════════════════════════════════════════════ */

.contact-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}

.contact-info-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease !important;
}

.contact-info-item:hover {
  border-color: rgba(147,51,234,.25) !important;
  background: rgba(147,51,234,.06) !important;
}

.cii-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(147,51,234,.12) !important;
  border: 1px solid rgba(147,51,234,.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--brand-light) !important;
}

.cii-label {
  font-size: 11px !important;
  color: var(--dark-dim) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 3px !important;
}

.cii-value {
  font-family: var(--display-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--dark-fg) !important;
  letter-spacing: -0.01em !important;
}

.cii-sub {
  font-size: 12px !important;
  color: var(--dark-dim) !important;
  margin-top: 2px !important;
}

/* ════════════════════════════════════════════════
   ROI CALCULATOR
   ════════════════════════════════════════════════ */

#roi-calc {
  background: #ffffff !important;
  border: 1px solid #e8e6f0 !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.08) !important;
}

/* ════════════════════════════════════════════════
   FINAL CTA SECTION
   ════════════════════════════════════════════════ */

.final-cta {
  position: relative !important;
  overflow: hidden !important;
}

.final-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(147,51,234,.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 120%, rgba(109,40,217,.12) 0%, transparent 55%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.final-cta > .container {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════
   SCROLL REVEAL SYSTEM
   ════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(.25,.46,.45,.94), transform 0.7s cubic-bezier(.25,.46,.45,.94);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal.rd2 {
  transition-delay: 0.15s;
}

.reveal.rd3 {
  transition-delay: 0.3s;
}

/* ════════════════════════════════════════════════
   CURSOR GLOW SYSTEM
   ════════════════════════════════════════════════ */

.cin-cursor-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(147,51,234,.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
  will-change: transform;
}

/* ════════════════════════════════════════════════
   PARTNER BADGE PREMIUM
   ════════════════════════════════════════════════ */

.partner-badge {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  padding: 10px 20px !important;
  transition: all 0.2s ease !important;
}

.partner-badge:hover {
  border-color: rgba(147,51,234,.25) !important;
  background: rgba(147,51,234,.06) !important;
}

/* ════════════════════════════════════════════════
   SCROLL PROGRESS
   ════════════════════════════════════════════════ */

.scroll-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #a855f7, #7c3aed, #6d28d9) !important;
  z-index: 9999 !important;
  transition: width 0.05s linear !important;
  box-shadow: 0 0 8px rgba(147,51,234,.6) !important;
}

/* ════════════════════════════════════════════════
   ORB SYSTEM
   ════════════════════════════════════════════════ */

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orbFloat 12s ease-in-out infinite alternate;
}

.orb-brand {
  background: radial-gradient(ellipse, rgba(147,51,234,.35) 0%, transparent 70%);
}

.orb-blue {
  background: radial-gradient(ellipse, rgba(59,130,246,.25) 0%, transparent 70%);
}

.orb-cyan {
  background: radial-gradient(ellipse, rgba(6,182,212,.2) 0%, transparent 70%);
}

/* ════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ════════════════════════════════════════════════ */

@keyframes gridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 72px 72px; }
}

@keyframes shimmerLine {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes dashSheen {
  0% { transform: rotate(15deg) translateX(-100%); }
  100% { transform: rotate(15deg) translateX(250%); }
}

@keyframes auraBreath {
  0% { opacity: 0.6; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.05); }
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, -30px) scale(1.05); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes aiSweep {
  0% { left: -60%; }
  100% { left: 120%; }
}

@keyframes flowDot {
  0% { top: -4px; opacity: 1; }
  100% { top: calc(100% + 4px); opacity: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ════════════════════════════════════════════════
   MOBILE SAFETY — Reduce effects on small screens
   ════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .hero-dash { display: none !important; }
  .hero-inner { grid-template-columns: 1fr !important; padding: 120px 0 80px !important; }
  .hero-headline { font-size: clamp(52px, 10vw, 80px) !important; }
  .pricing-card.featured { transform: none !important; }
  .pricing-grid { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .ai-command-center::after { display: none; }
}

@media (max-width: 768px) {
  .hero { min-height: auto !important; }
  .hero-inner { padding: 100px 0 60px !important; }
  .hero-headline { font-size: clamp(42px, 12vw, 64px) !important; line-height: 1.02 !important; }
  .section-title { font-size: clamp(30px, 8vw, 48px) !important; }
  .display-2 { font-size: clamp(34px, 9vw, 56px) !important; }
  .h2 { font-size: clamp(28px, 7vw, 40px) !important; }
  .form-card, .audit-form-card { padding: 28px 24px !important; border-radius: 20px !important; }
  .pricing-card { padding: 32px 24px !important; border-radius: 20px !important; }
  .ai-command-center { padding: 24px !important; }
  .ai-command-center::before, .ai-command-center::after { display: none; }
  .cin-cursor-glow { display: none; }
  .orb { display: none; }
  .float-notif { display: none; }
  .hero::after { display: none; }
  .pricing-card.featured { box-shadow: 0 0 0 1px rgba(147,51,234,.4), 0 20px 40px rgba(0,0,0,.4) !important; }
  .floating-cta { bottom: 80px !important; right: 16px !important; }
}

@media (max-width: 480px) {
  .hero-headline { font-size: clamp(36px, 11vw, 52px) !important; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .hero-stat-val { font-size: 26px !important; }
  .form-card, .audit-form-card { padding: 24px 20px !important; }
  .pricing-card { padding: 28px 20px !important; }
  .float-btn span { display: none; }
  .float-btn { padding: 14px !important; border-radius: 50% !important; }
  .ai-cmd-stats { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================
   LAYOUT QA FIXES — v5
   Fix: hero height, section spacing, service card contrast,
        FAQ styling, pricing clipping, sticky CTA dominance
   ================================================================ */

/* ── 1. HERO HEIGHT — laptop screens (≤820px tall) ──────────── */
/* 1366×768 laptop: hero had 140px+100px padding + 118px headline = overflow */
@media (max-height: 820px) and (min-width: 1025px) {
  .hero-inner {
    padding: 84px 0 56px !important;
  }
  .hero-headline {
    font-size: clamp(42px, 5.8vw, 84px) !important;
    margin-bottom: 20px !important;
  }
  .hero-cta-row {
    margin-top: 22px !important;
    margin-bottom: 28px !important;
  }
  .hero-trust {
    padding-top: 22px !important;
  }
  .hero-stat-val {
    font-size: clamp(22px, 2.8vw, 36px) !important;
  }
}

@media (max-height: 700px) and (min-width: 1025px) {
  .hero-inner {
    padding: 72px 0 44px !important;
  }
  .hero-headline {
    font-size: clamp(36px, 4.8vw, 68px) !important;
    margin-bottom: 16px !important;
  }
  .hero-sub {
    font-size: 16px !important;
    max-width: 440px !important;
  }
  .hero-cta-row {
    margin-top: 16px !important;
    margin-bottom: 20px !important;
  }
}

/* ── 2. GLOBAL SECTION SPACING — tighten on large screens ───── */
/* Was clamp(64px, 8vw, 120px) = 115px at 1440px. Now ~96px max. */
.section {
  padding: clamp(56px, 6.8vw, 96px) 0 !important;
}
.section-lg {
  padding: clamp(72px, 8.5vw, 116px) 0 !important;
}

/* ── 3. SERVICE CARDS — fix dark-glass on light sections ──────── */
/* cinematic.css applied rgba(14,13,30,.7) which is wrong on white bg */
.section-light .svc-card,
.section-light2 .svc-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.section-light .svc-card:hover,
.section-light2 .svc-card:hover {
  background: #ffffff !important;
  border-color: rgba(147, 51, 234, 0.28) !important;
  box-shadow:
    0 8px 32px rgba(147, 51, 234, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-6px) !important;
}

.section-light .svc-card h3,
.section-light2 .svc-card h3 {
  color: #141413 !important;
}

.section-light .svc-card p,
.section-light2 .svc-card p {
  color: #5e5d59 !important;
}

.section-light .svc-card .svc-link,
.section-light2 .svc-card .svc-link {
  color: #7c3aed !important;
}

/* ── 4. FAQ — premium accordion cards on light sections ──────── */
/* Items had class="faq-item section-light2" with just a border-bottom */
.faq-item.section-light2 {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important; /* override dark-border bottom */
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
}

.faq-item.section-light2:hover {
  border-color: rgba(147, 51, 234, 0.22) !important;
  box-shadow:
    0 4px 20px rgba(147, 51, 234, 0.08),
    0 0 0 1px rgba(147, 51, 234, 0.14) !important;
}

.faq-item.section-light2.open {
  border-color: rgba(147, 51, 234, 0.3) !important;
  box-shadow:
    0 4px 24px rgba(147, 51, 234, 0.1),
    0 0 0 1px rgba(147, 51, 234, 0.2) !important;
}

.faq-item.section-light2 .faq-q {
  padding: 20px 24px !important;
  color: #1a1a2e !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.faq-item.section-light2 .faq-ans {
  padding-left: 24px !important;
  padding-right: 24px !important;
  color: #5e5d59 !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}

.faq-item.section-light2.open .faq-ans {
  padding-bottom: 22px !important;
}

/* ── 5. PRICING — fix featured card overflow/overlap ─────────── */
/* Toggle margin-bottom 56px minus 36px upward movement = only 20px gap.
   padding-top pushes items down so there's room for the upward transform. */
.pricing-grid {
  padding-top: 28px !important;
}

/* Reduce upward movement slightly — 20px total (was 36px combined) */
.pricing-card.featured {
  transform: translateY(-12px) !important;
}

/* Hover still elevates more, but from the new baseline */
.pricing-card.featured:hover {
  transform: translateY(-22px) scale(1.015) !important;
}

/* Remove the inline margin-top:-16px effect via CSS override */
.pricing-grid .pricing-card.featured {
  margin-top: 0 !important;
}

/* ── 6. STICKY CTA — less dominant on desktop ───────────────── */
@media (min-width: 1025px) {
  .float-btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
    opacity: 0.82 !important;
    box-shadow: 0 4px 20px rgba(147, 51, 234, 0.38) !important;
  }
  .float-btn:hover {
    opacity: 1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(147, 51, 234, 0.55) !important;
  }
  .float-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ── 7. PAGE HERO — inner pages: reduce top padding slightly ─── */
/* Was 140px, felt too tall before pricing content began */
.page-hero {
  padding: 110px 0 52px !important;
}

@media (max-height: 820px) {
  .page-hero {
    padding: 90px 0 44px !important;
  }
}

/* ── 8. PRICING MOBILE — restore flat layout (cascade fix) ────── */
/* The global transform:translateY(-12px) above overrides the existing
   @media(max-width:1024px){ transform: none } since it comes later.
   Re-declare here so tablet/mobile stay flat. */
@media (max-width: 1024px) {
  .pricing-card.featured {
    transform: none !important;
    margin-top: 0 !important;
  }
  .pricing-grid {
    padding-top: 0 !important;
  }
}

/* ================================================================
   QA FIX BATCH v6 — hero overlap, contrast, FAQ, blog, spacing
   ================================================================ */

/* ── 1. Float-notif z-index — floating cards above dash-card ─── */
/* dash-card has z-index:1; notifs were z-index:auto (=0) = hidden behind */
.float-notif {
  z-index: 3 !important;
  position: absolute !important;
}

/* ── 2. Hero headline — shrink at laptop widths (1025–1440px) ─── */
@media (max-width: 1440px) and (min-width: 1025px) {
  .hero-headline {
    font-size: clamp(42px, 5.4vw, 72px) !important;
    margin-bottom: 22px !important;
  }
}
@media (max-width: 1280px) and (min-width: 1025px) {
  .hero-headline {
    font-size: clamp(38px, 4.8vw, 62px) !important;
  }
  .hero-inner {
    gap: 44px !important;
  }
  .dash-card {
    padding: 20px !important;
  }
}

/* ── 3. Services section-title — cap at 50px so "Every Growth Channel" */
/*    fits 2 lines without taking up the whole viewport */
.section-light .section-title,
.section-light2 .section-title {
  font-size: clamp(30px, 3.4vw, 50px) !important;
}

/* ── 4. Industry cards — fix dark card + dark text = invisible ── */
/* ind-card has background:var(--dark-surf), ind-name had color:var(--light-fg)
   (#0D0C1A = near black) — dark text on very dark background = invisible */
.section-light .ind-card .ind-name {
  color: #E8E5FF !important;
}
.section-light .ind-card:hover .ind-name {
  color: #ffffff !important;
}
.section-light .ind-card {
  border-color: rgba(147,51,234,.15) !important;
  transition: all 0.25s ease !important;
}
.section-light .ind-card:hover {
  background: rgba(30, 28, 60, 0.94) !important;
  border-color: rgba(147,51,234,.4) !important;
  box-shadow: 0 8px 28px rgba(147,51,234,.18), 0 0 0 1px rgba(147,51,234,.25) !important;
  transform: translateY(-4px) !important;
}

/* ── 5. FAQ on dark sections — premium accordion cards ───────── */
.section-dark .faq-item,
.section-dark2 .faq-item,
.section-dark3 .faq-item {
  background: rgba(14,13,30,.75) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}
.section-dark .faq-item:hover,
.section-dark2 .faq-item:hover,
.section-dark3 .faq-item:hover {
  border-color: rgba(147,51,234,.25) !important;
  box-shadow: 0 4px 20px rgba(147,51,234,.08), 0 0 0 1px rgba(147,51,234,.14) !important;
}
.section-dark .faq-item.open,
.section-dark2 .faq-item.open,
.section-dark3 .faq-item.open {
  border-color: rgba(147,51,234,.38) !important;
  background: rgba(21,20,42,.92) !important;
  box-shadow: 0 4px 24px rgba(147,51,234,.12), 0 0 0 1px rgba(147,51,234,.24) !important;
}
.section-dark .faq-q,
.section-dark2 .faq-q,
.section-dark3 .faq-q {
  padding: 18px 22px !important;
  font-weight: 600 !important;
  color: var(--dark-fg) !important;
}
.section-dark .faq-ans,
.section-dark2 .faq-ans,
.section-dark3 .faq-ans {
  padding-left: 22px !important;
  padding-right: 22px !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}
.section-dark .faq-item.open .faq-ans,
.section-dark2 .faq-item.open .faq-ans,
.section-dark3 .faq-item.open .faq-ans {
  padding-bottom: 20px !important;
}

/* ── 6. Sticky CTA — hidden on desktop, visible on mobile ────── */
@media (min-width: 1025px) {
  .floating-cta {
    display: none !important;
  }
}

/* ── 7. Blog card thumbnails — hide raw emoji, show CSS pattern ─ */
.blog-bg {
  position: relative !important;
  overflow: hidden !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}
/* Pattern overlay */
.blog-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(147,51,234,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,51,234,.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 1;
}
/* Bottom gradient for readability */
.blog-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent);
  pointer-events: none;
  z-index: 1;
}
/* Hide the raw text emoji but keep SVG if any */
.blog-bg > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── 8. Port screen mockups — more realistic preview bars ─────── */
.port-screen {
  position: relative !important;
  overflow: hidden !important;
}
/* Fake browser nav bar */
.port-screen::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.07);
  z-index: 2;
}
/* 3 traffic light dots */
.port-screen::after {
  content: '';
  position: absolute;
  top: 8px; left: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,99,99,.5);
  box-shadow: 10px 0 0 rgba(255,190,80,.5), 20px 0 0 rgba(90,200,90,.5);
  z-index: 3;
}
/* Style the existing bar elements inside port-screen-bg */
.port-bar {
  height: 8px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.08) !important;
}
.port-bar.accent {
  background: linear-gradient(90deg, #9333ea, #7c3aed) !important;
  width: 55% !important;
  opacity: .7 !important;
}
/* Port screen background padding to clear the fake nav bar */
.port-screen-bg {
  padding-top: 36px !important;
}

/* ── 9. Pricing page — extra top space to prevent glow clip ───── */
/* This complements the HTML overflow:hidden removal on the section */
.pricing-grid {
  padding-top: 36px !important;
}
/* Also increase page-hero bottom padding on pricing to avoid tight entry */
.pricing-page-spacer {
  height: 20px;
}

/* ── 10. ROI calculator — premium dark styling ────────────────── */
#roi-calc {
  background: rgba(10,9,22,.9) !important;
  border: 1px solid rgba(147,51,234,.2) !important;
  border-top-color: rgba(168,85,247,.4) !important;
  border-radius: 24px !important;
  box-shadow: 0 0 60px rgba(147,51,234,.12), 0 40px 80px rgba(0,0,0,.5) !important;
  color: var(--dark-fg) !important;
}
#roi-calc .form-label {
  color: var(--dark-muted) !important;
}
.roi-slider {
  accent-color: #a855f7 !important;
}
.roi-result-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
}

/* ── Mobile cascade resets ───────────────────────────────────── */
@media (max-width: 768px) {
  .section-light .section-title,
  .section-light2 .section-title {
    font-size: clamp(26px, 8vw, 40px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HERO COMPOSITION REFINEMENT — v7
   Focused pass: nav compactness, hero proportions, float-notif
   z-index fix (they rendered behind dash-card), better 2.5D
   dashboard tilt, overflow-safe hero-dash
   ═══════════════════════════════════════════════════════════════ */

/* 1. Nav — tighter and more premium */
.nav-inner {
  height: 58px !important;
}
.nav-logo img {
  height: 32px !important;
}

/* 2. Cap hero height so it never feels overwhelming on large screens */
.hero {
  min-height: min(100vh, 860px) !important;
}

/* 3. Hero inner — tighter vertical padding */
.hero-inner {
  padding: 100px 0 64px !important;
  gap: 56px !important;
}

/* 4. Headline — controlled scale for visual hierarchy, fully visible on laptop */
.hero-headline {
  font-size: clamp(42px, 5.8vw, 92px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.05em !important;
  margin-bottom: 18px !important;
}

/* 5. Badge — tighter bottom margin */
.hero-badge {
  margin-bottom: 20px !important;
}

/* 6. CTA row — tighter */
.hero-cta-row {
  margin-top: 26px !important;
  margin-bottom: 28px !important;
}

/* 7. Trust section — tighter top separator */
.hero-trust {
  padding-top: 22px !important;
}

/* 8. CRITICAL z-index fix — float-notifs render ABOVE dash-card (z-index:1) */
.float-notif {
  z-index: 4 !important;
}

/* 9. hero-dash must NOT clip its absolute children (float-notifs extend past edges) */
.hero-dash {
  overflow: visible !important;
}

/* 10. Dashboard — refined 2.5D tilt (was -9°/-5° — too aggressive) */
.dash-card {
  transform: perspective(1200px) rotateY(-6deg) rotateX(2.5deg) translateZ(0) !important;
  transition: transform 0.7s cubic-bezier(.25,.46,.45,.94) !important;
}
.dash-card:hover {
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) translateZ(22px) !important;
}

/* 11. Reposition float-notifs to cleanly orbit the dashboard */
.fn-1 {
  top: -22px !important;
  right: -14px !important;
  left: auto !important;
  bottom: auto !important;
}
.fn-2 {
  bottom: 64px !important;
  right: -38px !important;
  top: auto !important;
  left: auto !important;
}
.fn-3 {
  bottom: -22px !important;
  left: -12px !important;
  top: auto !important;
  right: auto !important;
}

/* 12. Notif cards — richer glass depth */
.notif-card {
  box-shadow:
    0 24px 64px rgba(0,0,0,.8),
    0 0 0 1px rgba(147,51,234,.2),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* 13. Laptop height — more aggressive compression at 820px viewport height */
@media (max-height: 820px) and (min-width: 1025px) {
  .hero { min-height: 0 !important; }
  .hero-inner { padding: 66px 0 40px !important; }
  .hero-headline {
    font-size: clamp(34px, 4.8vw, 68px) !important;
    margin-bottom: 12px !important;
  }
  .hero-badge { margin-bottom: 14px !important; }
  .hero-sub { font-size: 16px !important; }
  .hero-cta-row { margin-top: 18px !important; margin-bottom: 20px !important; }
  .hero-trust { padding-top: 16px !important; }
  .hero-stat-val { font-size: clamp(18px, 2.4vw, 30px) !important; }
}

/* 14. Very short screens */
@media (max-height: 700px) and (min-width: 1025px) {
  .hero-inner { padding: 52px 0 28px !important; }
  .hero-headline { font-size: clamp(28px, 3.8vw, 56px) !important; margin-bottom: 8px !important; }
  .hero-sub { font-size: 15px !important; }
  .hero-cta-row { margin-top: 14px !important; margin-bottom: 14px !important; }
  .hero-trust { display: none !important; }
}

/* 15. Tablet — float notifs hidden (already was, ensure this cascade applies) */
@media (max-width: 1024px) {
  .float-notif { display: none !important; }
}