/* ── PHASE 6: VISUAL DEPTH ── */

:root {
  --shadow-1: 0 1px 1px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.07);
  --shadow-2: 0 1px 1px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08), 0 24px 48px rgba(0,0,0,.06);
  --shadow-3: 0 1px 1px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08), 0 32px 64px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,0.06);
}

/* ── HERO: radial light source ── */
.hero {
  position: relative;
  background-image: radial-gradient(
    ellipse 70% 50% at 50% 0%,
    rgba(199, 146, 58, 0.06) 0%,
    rgba(163, 56, 40, 0.03) 50%,
    transparent 75%
  );
}

/* Hero noise texture */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

/* Hero content above noise */
.hero-inner { position: relative; z-index: 1; }

/* ── SECTION ALTERNATION: 3% lighter overlay on Client Results · Pricing · FAQ ── */
.cp-savings-proof,
.cp-pricing,
.cp-faq { position: relative; }

.cp-savings-proof::before,
.cp-pricing::before,
.cp-faq::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.015);
  pointer-events: none;
  z-index: 0;
}

/* Section content above overlay */
.cp-savings-proof-inner,
.cp-pricing-inner,
.cp-faq-inner { position: relative; z-index: 1; }

/* ── LEVEL 1: FAQ items · audit checklist items ── */
.cp-faq-extra,
.cp-audit-acc { box-shadow: var(--shadow-1); }

/* ── LEVEL 2: pricing panels · client result cards ── */
.cp-proof-card { box-shadow: var(--shadow-2); }
.cp-setup-data { box-shadow: var(--shadow-2); }

/* ── LEVEL 3: receipt card · calculator modal · final CTA ── */
.receipt { box-shadow: var(--shadow-3); }

/* Preserve the deep existing shadow on receipt; add the ring highlight */
.features .receipt {
  box-shadow: 0 12px 64px rgba(15,9,4,.55), 0 3px 14px rgba(15,9,4,.30), 0 0 0 1px rgba(255,255,255,0.06);
}

.modal-container { box-shadow: var(--shadow-3); }

.final-cta { box-shadow: var(--shadow-3); }

/* Final CTA noise texture */
.final-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

/* Final CTA content above noise */
.final-cta-inner { position: relative; z-index: 1; }