/* ==========================================================================
   ppc-audit.php — page stylesheet
   Everything that used to be written inside the page (<style> blocks and
   style="" attributes) lives here, in the original cascade order:
     1. Page styles — formerly the <style> block in <head>
     2. DD-RESPONSIVE-FIX (<style id="dd-responsive-fix">)
     3. Page styles — formerly the <style> block in <body> (line 2168)
     4. Components — formerly inline style="" attributes and style-changing hover/focus handlers
   ========================================================================== */

/* ==========================================================================
   1. Page styles — formerly the <style> block in <head>
   ========================================================================== */
/* ============================================
   ROOT VARIABLES
   ============================================ */
:root {
  --primary: #2E2AFF;
  --accent: #C8FF00;
  --text-dark: #111111;
  --text-light: #555555;

  --bg: #f7f8ff;
  --bg2: #eef0ff;
  --surface: rgba(46,42,255,0.04);
  --surface2: rgba(46,42,255,0.06);
  --border: rgba(46,42,255,0.10);
  --lime: #2E2AFF;
  --lime2: #5b58ff;
  --lime-glow: rgba(46,42,255,0.12);
  --blue: #1877f2;
  --blue2: #42a5f5;
  --pink: #e040fb;
  --green: #0aa65e;
  --yellow: #f5a623;
  --text: #111111;
  --muted: #888888;
  --muted2: #555555;
  --header-h: 72px;
}

/* ============================================
   BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Manrope', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.65;
}

/* Homepage-style noise + grid texture */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .04; pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(46,42,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,42,255,.015) 1px, transparent 1px);
  background-size: 68px 68px;
  pointer-events: none; z-index: 0;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }

/* ══════════════════════════════════
   HEADER
   ══════════════════════════════════ */
#hdr {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: #2E2AFF;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(46,42,255,0.08);
  /* border-bottom: 1px solid rgba(46,42,255,0.12); */
  z-index: 2000;
  transition: box-shadow 0.3s, border-color 0.3s;
}
#hdr.scrolled { box-shadow: 0 4px 40px rgba(46,42,255,0.08), 0 0 0 1px rgba(46,42,255,0.06); }
.hdr-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 52px;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.logo {
  font-size: 17px; font-weight: 900; letter-spacing: 0.1em;
  color: var(--lime); text-transform: uppercase; text-decoration: none; flex-shrink: 0;
}

.nav { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.nav a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(46,42,255,0.13); color: white;
  font-size: 13px; font-weight: 500; text-decoration: none;
  background: #f2f3ff50; backdrop-filter: blur(8px);
  transition: background .2s, color .2s, border-color .2s; white-space: nowrap;
}
.nav a:hover { background: rgba(46,42,255,.06); color: var(--accent); border-color: rgba(46,42,255,.25); }
.nav a.active { color: var(--accent); border-color: rgba(46,42,255,.35); background: rgba(46,42,255,.07); }

.hdr-btns { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 26px; border-radius: 999px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: all 0.25s; cursor: pointer; border: none;
  font-family: 'Manrope', sans-serif; white-space: nowrap; letter-spacing: 0.02em;
}
.btn-ghost {
  background: transparent; color: rgba(17,17,17,.7);
  border: 1.5px solid rgba(17,17,17,.35);
}
.btn-ghost:hover { background: rgba(46,42,255,.06); color: #2E2AFF; border-color: #2E2AFF; }
.btn-lime {
  background: var(--primary); color: #fff; font-weight: 800;
}
.btn-lime:hover { background: #4440ff; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(46,42,255,0.35); }
.btn-lg { padding: 14px 36px; font-size: 15px; }
.btn-outline {
  background: transparent; color: rgba(17,17,17,.8);
  border: 1.5px solid rgba(46,42,255,.25);
}
.btn-outline:hover { background: rgba(46,42,255,.06); border-color: #2E2AFF; color: #2E2AFF; }

.mob-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: transparent; }
.mob-btn span { display: block; width: 22px; height: 2px; background: rgba(17,17,17,.6); border-radius: 2px; transition: all 0.3s; }

.mob-nav {
  display: none; position: fixed; top: var(--header-h); left: 0; right: 0;
  background: rgba(247,248,255,.97); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(46,42,255,.15); z-index: 1999;
  padding: 20px 32px 28px; flex-direction: column; gap: 4px;
}
.mob-nav.open { display: flex; }
.mob-nav a { color: rgba(17,17,17,.7); text-decoration: none; font-size: 14px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid rgba(46,42,255,.07); transition: color 0.2s; }
.mob-nav a:hover { color: var(--lime); }
.mob-nav a:last-child { border-bottom: none; }
.mob-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mob-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mob-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   REVEAL ANIMATION
   ============================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s cubic-bezier(.22,.68,0,1.2), transform .65s cubic-bezier(.22,.68,0,1.2); }
.reveal.visible, .reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================
   SECTION BASE
   ============================================ */
section { padding: 110px 0; border-top: 1px solid rgba(46,42,255,0.07); position: relative; }
section:first-of-type { border-top: none; }
.sec-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700;
  color: var(--lime); letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 16px;
}
.sec-label::before, .sec-label::after {
  content: ''; display: block; height: 1px; width: 36px;
  background: linear-gradient(90deg, transparent, var(--lime));
}
.sec-label::after { background: linear-gradient(90deg, var(--lime), transparent); }
.sec-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(36px, 5.5vw, 68px);
  font-weight: 900; line-height: 1.02; letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.sec-title span { color: var(--lime); }
.sec-title em { color: var(--accent); font-style: normal; }
.sec-sub { color: var(--muted2); font-size: 16px; max-width: 580px; margin-bottom: 56px; line-height: 1.75; }

/* CARDS */
.card {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 20px; padding: 28px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--lime), var(--lime2));
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s;
}
.card:hover { border-color: rgba(46,42,255,0.25); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(46,42,255,0.10); }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.card p { font-size: 13.5px; color: var(--muted2); line-height: 1.65; }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 16px; background: rgba(46,42,255,0.1); border: 1px solid rgba(46,42,255,0.2);
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

.tag {
  display: inline-block; font-family: 'Manrope', sans-serif; font-size: 10.5px;
  padding: 3px 9px; border-radius: 5px;
  background: rgba(255,255,255,0.9); color: var(--muted2); border: 1px solid var(--border);
}
.tag-orange { background: rgba(46,42,255,0.1); color: var(--lime); border-color: rgba(46,42,255,0.2); }
.tag-blue { background: rgba(24,119,242,0.1); color: var(--blue2); border-color: rgba(24,119,242,0.2); }
.tag-green { background: rgba(0,230,118,0.1); color: var(--green); border-color: rgba(0,230,118,0.2); }
.tag-yellow { background: rgba(255,215,64,0.1); color: var(--yellow); border-color: rgba(255,215,64,0.2); }
.tag-pink { background: rgba(224,64,251,0.1); color: var(--pink); border-color: rgba(224,64,251,0.2); }

/* ============================================
   HERO
   ============================================ */
#hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 60px) 0 80px;
  border-top: none; overflow: hidden; position: relative;background:#2E2AFF;
}
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: pulse 8s ease-in-out infinite;
}
.hero-orb1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(46,42,255,0.09) 0%, transparent 65%);
  top: 50%; left: -10%; transform: translateY(-50%);
}
.hero-orb2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(46,42,255,0.05) 0%, transparent 65%);
  top: 20%; right: 10%; animation-delay: 3s;
}
@keyframes pulse { 0%,100%{transform:translateY(-50%) scale(1)} 50%{transform:translateY(-50%) scale(1.15)} }

.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
@media(max-width:960px){ .hero-inner{grid-template-columns:1fr} }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(46,42,255,0.25);
  border-radius: 100px; padding: 7px 18px;
  font-family: 'Manrope', sans-serif; font-size: 11px; color: var(--lime); letter-spacing: 0.12em;
  margin-bottom: 24px;
}
.eye-dot { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

.hero h1 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(48px, 7vw, 90px);
  font-weight: 800; line-height: 0.98; letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.hero h1 .l1 { display: block; }
.hero h1 .l2 { display: block; color: var(--lime); }
.hero h1 .l3 { display: block; }
.hero-sub { font-size: 17px; color: var(--muted2); max-width: 500px; line-height: 1.75; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 50px; }
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.hs-item { display: flex; flex-direction: column; }
.hs-num {
  font-family: 'Manrope', sans-serif; font-size: 36px; font-weight: 800;
  color: var(--text); line-height: 1;
}
.hs-num sup { font-size: 18px; color: var(--lime); }
.hs-lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; }

/* Hero Visual — Ads Dashboard Mockup */
.hero-vis { position: relative; }
.vis-main {
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border);
  border-radius: 24px; padding: 24px;
  position: relative; overflow: hidden;
}
.vis-main::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--lime), transparent);
}
.vis-header { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; }
.vis-dot { width: 10px; height: 10px; border-radius: 50%; }
.vis-dot:nth-child(1){background:rgba(46,42,255,0.6)}
.vis-dot:nth-child(2){background:rgba(255,215,64,0.6)}
.vis-dot:nth-child(3){background:rgba(0,230,118,0.6)}
.vis-title { font-family: 'Manrope', sans-serif; font-size: 11px; color: var(--muted); margin-left: 8px; }

/* Mini chart bars */
.vis-chart { display: flex; align-items: flex-end; gap: 5px; height: 80px; margin-bottom: 18px; }
.vc-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, var(--lime), rgba(46,42,255,0.3));
  position: relative; overflow: hidden;
  transition: height 2s ease;
}
.vc-bar::after { content: ''; position: absolute; top: 0; width: 100%; height: 30%; background: rgba(255,255,255,0.15); }

/* Metric cards in vis */
.vis-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.vm-card {
  background: rgba(255,255,255,0.85); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px;
}
.vm-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; font-family: 'Manrope', sans-serif; }
.vm-val { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; }
.vm-change { font-size: 11px; margin-top: 3px; }
.vm-up { color: var(--green); }
.vm-down { color: var(--lime); }

.vis-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: rgba(255,255,255,0.7); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; font-size: 12.5px; }
.vis-row-label { color: var(--muted2); }
.vis-row-val { font-weight: 600; color: var(--text); }

/* Floating badges */
.vis-float {
  position: absolute; background: rgba(255,255,255,0.95); border: 1px solid rgba(46,42,255,0.3);
  border-radius: 12px; padding: 10px 14px; font-size: 12px;
  animation: float 6s ease-in-out infinite;
}
.vis-float.f1 { bottom: -20px; left: -30px; animation-delay: 0s; }
.vis-float.f2 { top: -20px; right: -20px; animation-delay: 2s; }
.vf-icon { font-size: 16px; margin-bottom: 3px; }
.vf-val { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 18px; color: var(--text); }
.vf-lbl { font-size: 10px; color: var(--muted); }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ============================================
   STAT BANNER SECTION
   ============================================ */
.platform-banner {
  background: linear-gradient(135deg, rgba(46,42,255,0.07) 0%, rgba(46,42,255,0.03) 100%);
  border: 1px solid rgba(46,42,255,0.15);
  border-radius: 20px; padding: 40px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin-bottom: 56px;
}
.pb-text h3 { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.pb-text p { color: var(--muted2); font-size: 14.5px; max-width: 540px; line-height: 1.7; }
.pb-stats { display: flex; gap: 32px; flex-wrap: wrap; flex-shrink: 0; }
.pbs { text-align: center; }
.pbs-num { font-family: 'Manrope', sans-serif; font-size: 32px; font-weight: 900; color: var(--lime); display: block; }
.pbs-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

/* ============================================
   WHY-CARDS SECTION
   ============================================ */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.why-card {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; transition: all 0.3s;
  display: flex; flex-direction: column; gap: 12px;
}
.why-card:hover { border-color: rgba(46,42,255,0.2); transform: translateY(-3px); }
.wc-num { font-family: 'Manrope', sans-serif; font-size: 11px; color: var(--lime); letter-spacing: 0.12em; }
.wc-icon { font-size: 28px; }
.wc-title { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; }
.wc-desc { font-size: 13px; color: var(--muted2); line-height: 1.65; }

/* ============================================
   AD TYPES SECTION
   ============================================ */
.adtype-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.adtype-card {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; transition: all 0.35s;
}
.adtype-card:hover { border-color: rgba(46,42,255,0.25); transform: translateY(-5px); box-shadow: 0 24px 50px rgba(46,42,255,0.10); }
.atc-preview {
  height: 160px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.atc-preview::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.6));
}
.atc-mockup {
  width: 85%; background: rgba(255,255,255,0.95); border: 1px solid rgba(46,42,255,0.12);
  border-radius: 10px; padding: 10px; z-index: 1;
}
.atm-bar { height: 7px; background: rgba(255,255,255,0.08); border-radius: 4px; margin-bottom: 6px; }
.atm-bar.accent { background: var(--lime); width: 60%; }
.atm-bar.w80 { width: 80%; }
.atm-bar.w60 { width: 60%; }
.atm-bar.w40 { width: 40%; }
.atm-img { height: 60px; background: rgba(46,42,255,0.12); border-radius: 6px; margin: 8px 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.atm-btn { height: 22px; background: rgba(24,119,242,0.3); border-radius: 4px; }

.atc-body { padding: 20px 22px; }
.atc-type { font-family: 'Manrope', sans-serif; font-size: 10px; color: var(--lime); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.atc-name { font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.atc-desc { font-size: 13px; color: var(--muted2); line-height: 1.6; margin-bottom: 14px; }
.atc-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Video ad mockup */
.atm-video { height: 80px; background: rgba(46,42,255,0.08); border-radius: 8px; margin: 8px 0; display: flex; align-items: center; justify-content: center; position: relative; }
.play-btn { width: 28px; height: 28px; background: rgba(46,42,255,0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; }

/* Carousel mockup */
.atm-carousel { display: flex; gap: 4px; margin: 8px 0; }
.atm-slide { flex: 1; height: 55px; border-radius: 5px; }
.atm-slide:nth-child(1){background:rgba(46,42,255,0.2)}
.atm-slide:nth-child(2){background:rgba(24,119,242,0.2)}
.atm-slide:nth-child(3){background:rgba(224,64,251,0.2)}
.atm-slide:nth-child(4){background:rgba(255,215,64,0.2)}

/* Story mockup - tall */
.atm-story { height: 100px; background: linear-gradient(135deg,rgba(46,42,255,0.15),rgba(224,64,251,0.15)); border-radius: 6px; margin: 8px 0; display:flex;align-items:center;justify-content:center;font-size:28px; }

/* ============================================
   TARGETING SECTION
   ============================================ */
.targeting-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; }
@media(max-width:900px){.targeting-layout{grid-template-columns:1fr}}

.target-cats { display: flex; flex-direction: column; gap: 10px; }
.target-cat {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; cursor: pointer; transition: all 0.2s;
}
.target-cat.active { border-color: white; background: rgb(255, 255, 255); }
.target-cat:hover { border-color: rgba(46,42,255,0.2); }
.tc-head { display: flex; align-items: center; gap: 12px; }
.tc-icon { font-size: 22px; flex-shrink: 0; }
.tc-title { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; }
.tc-desc { font-size: 12.5px; color: var(--muted2); margin-top: 6px; line-height: 1.55; display: none; }
.target-cat.active .tc-desc { display: block; }

.targeting-detail {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px;
}
.td-title { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.td-options { display: flex; flex-direction: column; gap: 8px; }
.td-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; background: rgba(255,255,255,0.7); border: 1px solid var(--border);
  border-radius: 10px; transition: border-color 0.2s;
}
.td-opt:hover { border-color: rgba(46,42,255,0.2); }
.td-bullet { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex-shrink: 0; margin-top: 6px; }
.td-text strong { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.td-text span { font-size: 12.5px; color: var(--muted2); }

/* ============================================
   FUNNEL / CAMPAIGN OBJECTIVES
   ============================================ */
.funnel-wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; align-items: start; }
@media(max-width:900px){.funnel-wrap{grid-template-columns:1fr}}

.funnel-stages { display: flex; flex-direction: column; gap: 0; }
.funnel-stage {
  display: flex; align-items: stretch;
  position: relative;
}
.funnel-stage::after {
  content: '↓'; position: absolute; left: 27px; bottom: -22px;
  color: var(--lime); font-size: 16px; z-index: 2;
}
.funnel-stage:last-child::after { display: none; }
.fs-left {
  width: 54px; display: flex; flex-direction: column; align-items: center; padding: 6px 0;
  flex-shrink: 0;
}
.fs-circle {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px;
  flex-shrink: 0;
}
.fs-line { flex: 1; width: 2px; background: var(--border); margin: 6px 0; }
.fs-body {
  flex: 1; padding: 12px 0 12px 20px; padding-bottom: 28px;
}
.fs-label { font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.fs-title { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.fs-desc { font-size: 13px; color: var(--muted2); line-height: 1.6; }
.fs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.funnel-objectives { display: flex; flex-direction: column; gap: 12px; }
.obj-card {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; transition: all 0.25s;
}
.obj-card:hover { border-color: rgba(46,42,255,0.25); transform: translateX(4px); }
.oc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.oc-icon { font-size: 22px; flex-shrink: 0; }
.oc-title { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; }
.oc-stage { font-size: 10px; padding: 2px 8px; border-radius: 4px; margin-left: auto; font-family: 'Manrope', sans-serif; letter-spacing: 0.08em; }
.oc-desc { font-size: 13px; color: var(--muted2); line-height: 1.6; }

/* ============================================
   BUDGET & BIDDING
   ============================================ */
.budget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.budget-card {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; transition: all 0.25s;
}
.budget-card:hover { border-color: rgba(46,42,255,0.22); transform: translateY(-3px); }
.bc-label { font-family: 'Manrope', sans-serif; font-size: 10px; color: var(--lime); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.bc-title { font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.bc-desc { font-size: 13px; color: var(--muted2); line-height: 1.65; margin-bottom: 16px; }
.bc-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.bc-list li { font-size: 13px; color: var(--muted2); display: flex; gap: 8px; align-items: flex-start; }
.bc-list li::before { content: '→'; color: var(--lime); flex-shrink: 0; font-size: 11px; margin-top: 2px; }

/* ============================================
   AI / AUTOMATION SECTION
   ============================================ */
#ai-ads { background: transparent; }
.ai-intro-box {
  background: rgba(46,42,255,0.05); border: 1px solid rgba(46,42,255,0.18);
  border-radius: 20px; padding: 36px 40px; margin-bottom: 48px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
}
@media(max-width:800px){.ai-intro-box{grid-template-columns:1fr}}
.aib-text h3 { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; margin-bottom: 12px; }
.aib-text p { font-size: 14.5px; color: var(--muted2); line-height: 1.75; margin-bottom: 12px; }
.aib-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.aibs { background: rgba(255,255,255,0.85); border: 1px solid var(--border); border-radius: 12px; padding: 18px; text-align: center; }
.aibs-num { font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 800; color: var(--lime); display: block; line-height: 1.1; }
.aibs-lbl { font-size: 11px; color: var(--muted2); margin-top: 4px; line-height: 1.4; }

.ai-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 40px; }
.ai-feat-card {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; transition: all 0.3s; position: relative;
}
.ai-feat-card.featured { border-color: rgba(46,42,255,0.3); background: rgba(46,42,255,0.04); }
.ai-feat-card:hover { border-color: rgba(46,42,255,0.25); transform: translateY(-3px); }
.afc-badge {
  position: absolute; top: -10px; right: 16px;
  background: var(--lime); color: #fff;
  font-family: 'Manrope', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.1em;
  padding: 3px 10px; border-radius: 100px; text-transform: uppercase;
}
.afc-icon { font-size: 28px; margin-bottom: 14px; }
.afc-title { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.afc-desc { font-size: 13px; color: var(--muted2); line-height: 1.65; }
.afc-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* AI Tools table */
.ai-tools-table { width: 100%; border-collapse: collapse; }
.ai-tools-table th {
  text-align: left; padding: 12px 16px;
  background: rgba(255,255,255,0.95);
  font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.ai-tools-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
.ai-tools-table tr:hover td { background: rgba(255,255,255,0.015); }
.att-name { font-weight: 600; color: var(--text); }
.att-type { font-family: 'Manrope', sans-serif; font-size: 11px; }
.att-rating { color: var(--yellow); font-size: 12px; }

/* ============================================
   PACKAGES
   ============================================ */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; align-items: start; }
.pkg-card {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 24px; padding: 36px; transition: all 0.3s; position: relative;
}
.pkg-card.featured {
  border-color: rgba(46,42,255,0.4);
  background: linear-gradient(160deg, rgba(46,42,255,0.09) 0%, rgba(255,255,255,0.03) 100%);
}
.pkg-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--lime); color: #fff;
  font-family: 'Manrope', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.12em;
  padding: 4px 16px; border-radius: 100px;
}
.pkg-tier { font-family: 'Manrope', sans-serif; font-size: 11px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.pkg-name { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.pkg-price { font-family: 'Manrope', sans-serif; font-size: 54px; font-weight: 900; color: var(--lime); line-height: 1; margin-bottom: 4px; }
.pkg-price .cur { font-size: 22px; color: var(--muted2); font-family: 'Manrope', sans-serif; font-weight: 400; vertical-align: top; margin-top: 8px; display: inline-block; }
.pkg-price .per { font-size: 15px; color: var(--muted); font-family: 'Manrope', sans-serif; font-weight: 400; }
.pkg-ad-spend { font-size: 13px; color: var(--muted2); margin-bottom: 18px; }
.pkg-ad-spend strong { color: var(--lime); }
.pkg-desc { font-size: 14px; color: var(--muted2); line-height: 1.65; margin-bottom: 26px; border-bottom: 1px solid var(--border); padding-bottom: 22px; }
.pkg-features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 30px; }
.pkg-features li { font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }
.pkg-features li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.pkg-features li.na { color: var(--muted); }
.pkg-features li.na::before { content: '—'; color: var(--muted); }
.pkg-cta { width: 100%; padding: 14px; text-align: center; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.25s; border: none; font-family: 'Manrope', sans-serif; }

/* ============================================
   PROCESS
   ============================================ */
.process-timeline { display: flex; flex-direction: column; gap: 0; max-width: 900px; margin: 0 auto; }
.proc-step {
  display: flex; gap: 28px; align-items: flex-start;
  padding-bottom: 40px; position: relative;
}
.proc-step::after {
  content: ''; position: absolute; left: 26px; top: 54px; bottom: 0;
  width: 2px; background: linear-gradient(to bottom, var(--lime), transparent);
}
.proc-step:last-child::after { display: none; }
.ps-num-wrap { flex-shrink: 0; position: relative; z-index: 1; }
.ps-num {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(46,42,255,0.12); border: 2px solid rgba(46,42,255,0.35);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; color: var(--lime);
}
.ps-body { flex: 1; padding-top: 10px; }
.ps-phase { font-family: 'Manrope', sans-serif; font-size: 10px; color: var(--lime); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 5px; }
.ps-title { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.ps-desc { font-size: 14px; color: var(--muted2); line-height: 1.7; margin-bottom: 14px; }
.ps-points { display: flex; flex-direction: column; gap: 5px; }
.ps-point { font-size: 13px; color: var(--muted2); display: flex; gap: 10px; }
.ps-point::before { content: '▸'; color: var(--lime); font-size: 10px; flex-shrink: 0; margin-top: 3px; }
.ps-time { display: inline-flex; align-items: center; gap: 6px; font-family: 'Manrope', sans-serif; font-size: 11px; color: var(--yellow); background: rgba(255,215,64,0.08); border: 1px solid rgba(255,215,64,0.2); padding: 3px 10px; border-radius: 5px; margin-top: 12px; }

/* ============================================
   METRICS & KPIs
   ============================================ */
.metrics-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; }
@media(max-width:900px){.metrics-layout{grid-template-columns:1fr}}
.kpi-list { display: flex; flex-direction: column; gap: 10px; }
.kpi-item {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; transition: all 0.2s;
}
.kpi-item:hover { border-color: rgba(46,42,255,0.2); }
.kpi-icon { font-size: 22px; flex-shrink: 0; }
.kpi-name { font-size: 14px; font-weight: 600; }
.kpi-desc { font-size: 12px; color: var(--muted2); margin-top: 2px; }
.kpi-target { font-family: 'Manrope', sans-serif; font-size: 12px; color: var(--green); background: rgba(0,230,118,0.08); border: 1px solid rgba(0,230,118,0.2); padding: 3px 10px; border-radius: 5px; margin-left: auto; white-space: nowrap; flex-shrink: 0; }

/* Campaign dashboard vis */
.campaign-dash {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 18px; padding: 24px; overflow: hidden;
}
.cd-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cd-title { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; }
.cd-live { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--green); font-family: 'Manrope', sans-serif; }
.cd-live-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: blink 1.5s ease-in-out infinite; }
.cd-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.cdm { background: rgba(255,255,255,0.7); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.cdm-l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-family: 'Manrope', sans-serif; margin-bottom: 5px; }
.cdm-v { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; }
.cdm-c { font-size: 11px; margin-top: 2px; }
.cd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cd-table th { text-align: left; padding: 8px 10px; background: rgba(255,255,255,0.85); color: var(--muted); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--border); }
.cd-table td { padding: 9px 10px; border-bottom: 1px solid rgba(46,42,255,0.04); }
.cd-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.status-active::before { content: '●'; color: var(--green); }
.status-paused::before { content: '●'; color: var(--yellow); }

/* ============================================
   CREATIVE STRATEGY
   ============================================ */
.creative-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.creative-card {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px; transition: all 0.25s;
}
.creative-card:hover { border-color: rgba(46,42,255,0.2); transform: translateY(-3px); }
.cc-phase { font-family: 'Manrope', sans-serif; font-size: 10px; color: var(--muted2); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.cc-icon { font-size: 26px; margin-bottom: 10px; }
.cc-title { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.cc-desc { font-size: 13px; color: var(--muted2); line-height: 1.65; }
.cc-list { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.cc-list li { font-size: 12.5px; color: var(--muted2); display: flex; gap: 7px; }
.cc-list li::before { content: '·'; color: var(--lime); font-size: 18px; line-height: 1.1; flex-shrink: 0; }

/* ============================================
   COMPARE TABLE
   ============================================ */
.compare-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.compare-table th {
  text-align: left; padding: 14px 16px;
  background: rgba(255,255,255,0.95);
  font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.compare-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); }
.compare-table tr:hover td { background: rgba(255,255,255,0.015); }
.ct-yes { color: var(--green); font-weight: 600; }
.ct-no { color: var(--muted); }
.ct-mid { color: var(--yellow); }
.ct-bad { color: var(--lime); }

/* ============================================
   RETARGETING
   ============================================ */
.retarget-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; align-items: center; }
.rf-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 16px; position: relative; }
.rf-step::after { content: '→'; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--lime); z-index: 1; }
.rf-step:last-child::after { display: none; }
.rf-circle { width: 70px; height: 70px; border-radius: 50%; border: 2px solid rgba(46,42,255,0.3); background: rgba(46,42,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.rf-title { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; }
.rf-desc { font-size: 12px; color: var(--muted2); line-height: 1.5; }

/* ============================================
   PIXEL / TRACKING
   ============================================ */
.pixel-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pixel-step {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px; transition: all 0.25s;
}
.pixel-step:hover { border-color: rgba(46,42,255,0.2); }
.pxs-num { font-family: 'Manrope', sans-serif; font-size: 11px; color: var(--lime); letter-spacing: 0.12em; margin-bottom: 10px; }
.pxs-title { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.pxs-desc { font-size: 13px; color: var(--muted2); line-height: 1.6; }

/* ============================================
   AB TESTING SECTION
   ============================================ */
.abtest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.ab-card {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px; transition: all 0.25s;
}
.ab-card:hover { border-color: rgba(46,42,255,0.2); transform: translateY(-2px); }
.ab-letter {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 800;
  margin-bottom: 14px;
}
.ab-title { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.ab-desc { font-size: 13px; color: var(--muted2); line-height: 1.65; }
.ab-variables { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.ab-var { font-size: 12.5px; color: var(--muted2); display: flex; gap: 8px; }
.ab-var::before { content: '▸'; color: var(--lime); font-size: 10px; flex-shrink: 0; margin-top: 3px; }

/* ============================================
   RESULTS / CASE STUDIES
   ============================================ */
.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.result-card {
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden; transition: all 0.35s;
}
.result-card:hover { border-color: rgba(46,42,255,0.25); transform: translateY(-5px); box-shadow: 0 25px 55px rgba(46,42,255,0.08); }
.rc-top { padding: 24px 24px 18px; border-bottom: 1px solid var(--border); }
.rc-industry { font-family: 'Manrope', sans-serif; font-size: 10px; color: var(--lime); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.rc-client { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.rc-challenge { font-size: 13px; color: var(--muted2); line-height: 1.55; }
.rc-metrics { padding: 18px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-bottom: 1px solid var(--border); }
.rcm { text-align: center; }
.rcm-val { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; color: var(--lime); display: block; line-height: 1.1; }
.rcm-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }
.rc-footer { padding: 14px 24px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================
   FAQ
   ============================================ */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: border-color 0.2s; }
.faq-item.open { border-color: rgba(46,42,255,0.35); background: rgba(46,42,255,0.02); }
.faq-btn { width: 100%; text-align: left; padding: 18px 22px; background: rgba(255,255,255,0.9); border: none; color: var(--text); font-size: 14.5px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: 'Manrope', sans-serif; transition: background 0.2s; gap: 12px; }
.faq-btn:hover { background: rgba(255,255,255,0.95); }
.faq-icon { color: var(--lime); font-size: 20px; transition: transform 0.3s; flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.open .faq-body { max-height: 400px; }
.faq-body p { padding: 0 22px 18px; font-size: 13.5px; color: var(--muted2); line-height: 1.75; }

/* ============================================
   CONTACT
   ============================================ */
#contact { background: #f2f3ff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-info-items { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.ci-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: rgba(255,255,255,0.9); border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.2s; }
.ci-item:hover { border-color: rgba(46,42,255,0.3); transform: translateX(4px); }
.ci-emoji { font-size: 22px; flex-shrink: 0; }
.ci-label { font-size: 13px; font-weight: 600; }
.ci-val { font-size: 13px; color: var(--lime); }
.contact-form-box { background: rgba(255,255,255,0.85); border: 1px solid rgba(46,42,255,0.12); border-radius: 22px; padding: 38px; }
.cf-head { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media(max-width:500px){.form-row{grid-template-columns:1fr}}
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--muted2); text-transform: uppercase; letter-spacing: 0.08em; }
.form-inp { background: rgba(255,255,255,0.85); border: 1px solid var(--border); border-radius: 10px; padding: 12px 15px; color: var(--text); font-family: 'Manrope', sans-serif; font-size: 14px; transition: border-color 0.2s; outline: none; width: 100%; border-radius: 12px; }
.form-inp:focus { border-color: rgba(46,42,255,0.45); background: rgba(46,42,255,0.04); }
.form-inp option { background: #f0f1ff; }
.budget-sel { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-opt { padding: 7px 15px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted2); font-size: 12.5px; cursor: pointer; transition: all 0.2s; font-family: 'Manrope', sans-serif; }
.bs-opt:hover { border-color: rgba(46,42,255,0.35); color: var(--text); }
.bs-opt.sel { background: rgba(46,42,255,0.12); border-color: rgba(46,42,255,0.45); color: var(--lime); font-weight: 600; }
#f-success { display: none; text-align: center; padding: 16px; color: var(--green); font-weight: 600; margin-top: 12px; font-size: 15px; }

/* CTA BAR */
.cta-strip { background: linear-gradient(90deg, rgba(46,42,255,0.08) 0%, rgba(46,42,255,0.03) 100%); border-top: 1px solid rgba(46,42,255,0.12); border-bottom: 1px solid rgba(46,42,255,0.12); padding: 40px 32px; }
.cta-strip-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-main { font-family: 'Manrope', sans-serif; font-size: clamp(22px,3.5vw,40px); font-weight: 800; line-height: 1.1; }
.cta-sub { font-size: 14px; color: var(--muted2); margin-top: 6px; }
.cta-btns { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* FOOTER */
footer { padding: 60px 32px 36px; border-top: 1px solid rgba(46,42,255,0.1); }
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.fb-logo { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 900; color: var(--lime); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.fb-desc { font-size: 13px; color: var(--muted2); line-height: 1.7; max-width: 240px; }
.fc-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: white; font-family: 'Manrope', sans-serif; margin-bottom: 14px; }
.fc-links { display: flex; flex-direction: column; gap: 9px; }
.fc-links a { color: var(--muted2); text-decoration: none; font-size: 13.5px; transition: color 0.2s; }
.fc-links a:hover { color: var(--lime); }
.footer-bottom { border-top: 1px solid rgba(46,42,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 12.5px; color: var(--muted); }

/* ════════════════════════════════════════════
   RESPONSIVE — Full breakpoints
   ════════════════════════════════════════════ */

/* ── 1200px: nav starts to get tight ── */
@media(max-width:1200px) {
  .hdr-inner { padding: 0 32px; }
  .nav a { padding: 6px 12px; font-size: 12.5px; }
  .hero h1 { font-size: clamp(42px, 6vw, 78px); }
}

/* ── 1024px: tablet landscape / hide desktop nav ── */
@media(max-width:1024px) {
  .nav { display: none; }
  .mob-btn { display: flex; }
  .hdr-btns { display: none; }
  .hero-vis { display: none; }
  .hero-inner { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto; }
  .hero-inner > div:first-child { text-align: center; }
  .hero-eyebrow { margin: 0 auto 24px; }
  .hero h1 .l1, .hero h1 .l2, .hero h1 .l3 { text-align: center; }
  .hero-sub { max-width: 560px; margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; gap: 32px; }

  /* Platform banner */
  .platform-banner { flex-direction: column; gap: 28px; }
  .pb-stats { justify-content: flex-start; gap: 24px; }

  /* Sections */
  .targeting-layout { grid-template-columns: 1fr; }
  .funnel-wrap { grid-template-columns: 1fr; }
  .ai-intro-box { grid-template-columns: 1fr; }
  .metrics-layout { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }

  /* Process steps */
  .proc-step { gap: 20px; }

  /* Compare table: allow horizontal scroll */
  .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Package grid */
  .pkg-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

  /* Results */
  .results-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* ── 900px: tablet portrait ── */
@media(max-width:900px) {
  section { padding: 90px 0; }
  .container { padding: 0 24px; }

  /* Hero */
  #hero { padding: calc(var(--header-h) + 40px) 0 60px; }
  .hero h1 { font-size: clamp(38px, 8vw, 64px); }
  .hero-stats { gap: 24px; }
  .hs-num { font-size: 28px; }

  /* Why grid */
  .why-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

  /* Ad types */
  .adtype-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

  /* Funnel */
  .funnel-wrap { gap: 32px; }

  /* Budget */
  .budget-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

  /* AI tools table: scroll */
  .ai-tools-table-wrap { overflow-x: auto; }

  /* Process */
  .proc-step { padding: 20px; }

  /* Results */
  .results-grid { grid-template-columns: 1fr; }

  /* FAQ */
  .faq-list { max-width: 100%; }

  /* Contact */
  .contact-grid { gap: 36px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* CTA */
  .cta-strip-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cta-btns { width: 100%; }
  .cta-btns .btn { flex: 1; justify-content: center; }

  /* Pixel steps */
  .pixel-steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

  /* AB testing grid */
  .abtest-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

  /* Retargeting grid */
  .retargeting-grid { grid-template-columns: 1fr; }
}

/* ── 768px: large mobile / small tablet ── */
@media(max-width:768px) {
  :root { --header-h: 64px; }
  section { padding: 80px 0; }
  .container { padding: 0 20px; }

  /* Hero */
  .hero h1 { font-size: clamp(34px, 9vw, 56px); }
  .hero-sub { font-size: 15px; }
  .hero-actions { flex-direction: column; align-items: center; gap: 12px; }
  .hero-actions .btn { width: 100%; max-width: 320px; justify-content: center; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .hs-num { font-size: 26px; }

  /* Eyebrow / sec-label */
  .sec-label { font-size: 10px; }
  .sec-title { font-size: clamp(28px, 7vw, 48px); letter-spacing: -0.025em; }
  .sec-sub { font-size: 14.5px; margin-bottom: 40px; }

  /* Platform banner */
  .pb-text h3 { font-size: 20px; }
  .pb-text p { font-size: 13.5px; }
  .pb-stats { flex-wrap: wrap; gap: 16px; }
  .pbs-num { font-size: 26px; }

  /* Why cards */
  .why-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .why-card { padding: 18px; }

  /* Ad type grid */
  .adtype-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  /* Targeting */
  .target-cat { padding: 14px 16px; }
  .tc-title { font-size: 14px; }

  /* Funnel */
  .funnel-objectives { gap: 10px; }
  .obj-card { padding: 14px 16px; }

  /* Budget */
  .budget-grid { grid-template-columns: 1fr; }

  /* AI */
  .ai-intro-box { padding: 24px; }
  .ai-features-grid { grid-template-columns: 1fr; }
  .aib-stats { grid-template-columns: 1fr 1fr; }

  /* Packages */
  .pkg-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .pkg-card { padding: 28px 24px; }
  .pkg-price { font-size: 44px; }

  /* Pixel steps */
  .pixel-steps { grid-template-columns: 1fr; }

  /* Creative */
  .creative-grid { grid-template-columns: 1fr; }

  /* AB testing */
  .abtest-grid { grid-template-columns: 1fr; }

  /* Results */
  .rc-metrics { grid-template-columns: repeat(3, 1fr); }

  /* Contact form */
  .form-row { grid-template-columns: 1fr; }
  .contact-form-box { padding: 24px; }
  .cf-head { font-size: 18px; }

  /* Budget selector */
  .budget-sel { gap: 6px; }
  .bs-opt { padding: 6px 12px; font-size: 12px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .fb-desc { max-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }

  /* CTA strip */
  .cta-main { font-size: clamp(20px, 5vw, 32px); }

  /* Campaign dash */
  .campaign-dash { padding: 18px; }
  .cd-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Compare table */
  .ct-mid { display: none; }

  /* Cards */
  .card { padding: 20px; }
  .card-icon { width: 40px; height: 40px; font-size: 18px; }

  /* Tags */
  .tag { font-size: 10px; padding: 2px 7px; }

  /* grid overrides for auto-fit with large min */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ── 480px: mobile ── */
@media(max-width:480px) {
  :root { --header-h: 60px; }
  section { padding: 70px 0; }
  .container { padding: 0 16px; }

  /* Logo */
  .logo { font-size: 15px; }

  /* Hero */
  .hero h1 { font-size: clamp(30px, 10vw, 46px); }
  .hero-eyebrow { font-size: 9px; letter-spacing: 0.12em; padding: 6px 14px; }
  .hero-sub { font-size: 14px; }
  .hero-stats { gap: 16px; }
  .hs-num { font-size: 22px; }
  .hs-lbl { font-size: 10px; }
  #hero { padding: calc(var(--header-h) + 32px) 0 48px; }

  /* Section labels */
  .sec-title { font-size: clamp(24px, 8vw, 38px); }
  .sec-sub { font-size: 14px; margin-bottom: 32px; }

  /* Why cards: full width */
  .why-grid { grid-template-columns: 1fr; }

  /* grids */
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  /* Platform banner */
  .platform-banner { padding: 22px 18px; }
  .pb-stats { gap: 14px; }

  /* Target cats */
  .targeting-detail { padding: 20px 16px; }

  /* AI intro stats */
  .aib-stats { grid-template-columns: 1fr; }
  .aibs-num { font-size: 24px; }

  /* AI feat cards */
  .ai-features-grid { grid-template-columns: 1fr; }

  /* Packages */
  .pkg-card { padding: 22px 18px; }
  .pkg-price { font-size: 38px; }
  .pkg-features li { font-size: 13px; }

  /* Process steps */
  .proc-step { flex-direction: column; padding: 18px 16px; gap: 12px; }
  .proc-step::after { display: none; }
  .ps-num { font-size: 12px; }
  .ps-title { font-size: 17px; }

  /* Results */
  .rc-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rcm-val { font-size: 20px; }

  /* FAQ */
  .faq-btn { font-size: 13.5px; padding: 15px 16px; }
  .faq-body p { padding: 0 16px 14px; }

  /* Contact */
  .contact-form-box { padding: 18px; }
  .ci-item { padding: 12px 14px; }

  /* mob-nav */
  .mob-nav { padding: 16px 20px 22px; }

  /* CTA */
  .cta-strip { padding: 28px 16px; }
  .cta-btns { flex-direction: column; gap: 8px; }
  .cta-btns .btn { width: 100%; }

  /* Footer */
  footer { padding: 48px 16px 28px; }
  .footer-grid { gap: 24px; }

  /* Funnel stage */
  .funnel-stage { gap: 12px; }
  .fs-circle { width: 44px; height: 44px; font-size: 14px; }

  /* Campaign dash */
  .cd-metrics { grid-template-columns: 1fr; }

  /* Table scroll hint */
  .compare-table th, .compare-table td { font-size: 12px; padding: 10px 12px; }

  /* Pixel steps */
  .pixel-step { padding: 16px; }

  /* Creative */
  .creative-card { padding: 18px; }

  /* Retargeting */
  .obj-card { padding: 14px; }
  .oc-title { font-size: 14px; }

  /* Targeting detail */
  .td-opt { padding: 10px 12px; }
  .td-text strong { font-size: 13px; }
}

/* ── 360px: very small phones ── */
@media(max-width:360px) {
  .container { padding: 0 14px; }
  .hero h1 { font-size: 28px; }
  .sec-title { font-size: 24px; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero-actions .btn { font-size: 14px; padding: 12px 24px; }
  .pkg-price { font-size: 34px; }
  .rc-metrics { grid-template-columns: 1fr; }
  .rcm-val { font-size: 22px; }
}

/* ═══════════════════════════════════════════════
   LOCATIONS SECTION
   ═══════════════════════════════════════════════ */
.sloc-section {
  position: relative;
  padding: 70px 52px 130px;
  overflow: hidden;
}
.sloc-section::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.03;
}
.sloc-section::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(46,42,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,42,255,.018) 1px, transparent 1px);
  background-size:72px 72px;
}
.sloc-orb-a {
  position:absolute; z-index:0; pointer-events:none;
  width:700px; height:700px; border-radius:50%;
  top:-200px; left:-200px;
  background:radial-gradient(circle, rgba(46,42,255,.065) 0%, transparent 62%);
}
.sloc-orb-b {
  position:absolute; z-index:0; pointer-events:none;
  width:500px; height:500px; border-radius:50%;
  bottom:-120px; right:-120px;
  background:radial-gradient(circle, rgba(46,42,255,.055) 0%, transparent 62%);
}
.sloc-inner { position:relative; z-index:2; max-width:1180px; margin:0 auto; }
.sloc-header {
  display:grid; grid-template-columns:1fr 1fr;
  align-items:end; gap:48px; margin-bottom:80px;
}
.sloc-header-left .eyebrow { margin-bottom:16px; }
.sloc-heading {
  font-size:clamp(34px,4.8vw,62px); font-weight:900; color:#fff;
  letter-spacing:-.035em; line-height:1.06;
}
.sloc-heading-lime { color:var(--lime); }
.sloc-header-right { display:flex; flex-direction:column; gap:16px; }
.sloc-header-desc { font-size:15px; color:var(--text-muted); line-height:1.72; }
.sloc-stats-mini { display:flex; gap:24px; flex-wrap:wrap; }
.sloc-stat-mini { display:flex; flex-direction:column; }
.sloc-stat-mini-num { font-size:26px; font-weight:900; color:#fff; letter-spacing:-.03em; line-height:1; }
.sloc-stat-mini-num span { color:var(--lime); }
.sloc-stat-mini-lbl { font-size:11px; color: rgba(17,17,17,0.4); font-weight:600; margin-top:3px; }
.sloc-body {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:28px;
  align-items:start;
}
.sloc-services-sidebar {
  position:sticky; top:80px;
  display:flex; flex-direction:column; gap:8px;
  align-self:start;
}
.sloc-svc-btn {
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; border-radius:18px; cursor:pointer;
  background:rgba(255,255,255,.03); border: 1px solid rgba(46,42,255,.07);
  transition:background .3s, border-color .3s, transform .3s;
  position:relative; overflow:hidden; text-align:left;
}
.sloc-svc-btn::before {
  content:''; position:absolute; left:0; top:15%; bottom:15%; width:3px;
  border-radius:999px; background:transparent;
  transition:background .3s, top .3s, bottom .3s;
}
.sloc-svc-btn:hover { background:rgba(255,255,255,0.95); border-color:rgba(46,42,255,.15); transform:translateX(3px); }
.sloc-svc-btn.active { background:rgba(46,42,255,.09); border-color:rgba(46,42,255,.3); transform:translateX(4px); }
.sloc-svc-btn.active::before { background:var(--lime); top:8%; bottom:8%; }
.sloc-svc-icon {
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:rgba(255,255,255,0.9); border: 1px solid rgba(46,42,255,.08);
  transition:background .3s, border-color .3s, transform .3s;
}
.sloc-svc-btn:hover .sloc-svc-icon { background:rgba(46,42,255,.1); border-color:rgba(46,42,255,.2); }
.sloc-svc-btn.active .sloc-svc-icon { background:rgba(46,42,255,.15); border-color:rgba(46,42,255,.3); transform:rotate(-5deg) scale(1.05); }
.sloc-svc-label { font-size:13.5px; font-weight:800; color: rgba(17,17,17,0.7); flex:1; transition:color .3s; }
.sloc-svc-btn.active .sloc-svc-label { color:#fff; }
.sloc-svc-count {
  font-size:10px; font-weight:800; color:rgba(46,42,255,.5);
  background:rgba(46,42,255,.08); border:1px solid rgba(46,42,255,.15);
  padding:2px 8px; border-radius:999px; letter-spacing:.05em; flex-shrink:0;
  transition:background .3s, color .3s;
}
.sloc-svc-btn.active .sloc-svc-count { background:rgba(46,42,255,.15); color:var(--lime); }
.sloc-locations-panel { min-height:520px; }
.sloc-svc-selected-display {
  background:rgba(46,42,255,.07); border:1px solid rgba(46,42,255,.2);
  border-radius:16px; padding:14px 18px; margin-bottom:4px;
  display:flex; align-items:center; gap:10px;
}
.sloc-svc-selected-label { font-size:10px; font-weight:700; color: #fff; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:3px; }
.sloc-svc-selected-name { font-size:14px; font-weight:900; color:#fff; display:block; }
.sloc-svc-selected-icon { font-size:20px; flex-shrink:0; }
.sloc-svc-desc-block {
  margin-bottom:24px; border-radius:18px;
  background:rgb(255, 255, 255); border: 1px solid rgba(46,42,255,.07);
  padding:24px 28px; position:relative; overflow:hidden; transition:border-color .3s;
}
.sloc-svc-desc-block::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--lime), transparent);
  border-radius:18px 18px 0 0;
}
.sloc-svc-desc-block:hover { border-color:rgba(46,42,255,.18); }
.sloc-svc-desc-header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.sloc-svc-desc-eyebrow { font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(46,42,255,.6); margin-bottom:6px; }
.sloc-svc-desc-name { font-size:20px; font-weight:900; color:#2E2AFF; letter-spacing:-.02em; }
.sloc-svc-desc-para {
  font-size:14px; color:var(--text-muted); line-height:1.75;
  margin-top:14px; max-height:calc(1.75em * 10); overflow:hidden;
  transition:max-height .55s cubic-bezier(.4,0,.2,1);
  opacity:1; position:relative;
}
.sloc-svc-desc-para.expanded { max-height:600px; }
.sloc-para-fade {
  position:absolute; bottom:0; left:0; right:0; height:40px;
  pointer-events:none; transition:opacity .4s;
}
.sloc-svc-desc-para.expanded .sloc-para-fade { opacity:0; }
.sloc-para-toggle {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; padding:6px 14px; border-radius:999px; cursor:pointer;
  font-family:'Manrope',sans-serif; font-size:12px; font-weight:800; letter-spacing:.04em;
  background:rgba(46,42,255,.08); border:1.5px solid rgba(46,42,255,.25); color:var(--lime);
  transition:background .2s, transform .2s;
}
.sloc-para-toggle:hover { background:rgba(46,42,255,.15); transform:scale(1.04); }
.sloc-para-toggle svg { width:11px; height:11px; fill:none; stroke:var(--lime); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s; }
.sloc-para-toggle.expanded svg { transform:rotate(180deg); }
.sloc-search-wrap { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.sloc-search-svc-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lime); background:rgba(46,42,255,.1);
  border:1px solid rgba(46,42,255,.22); padding:4px 12px; border-radius:999px; white-space:nowrap;
}
.sloc-search-svc-dot { width:5px; height:5px; background:var(--lime); border-radius:50%; animation:pulse 1.8s ease-in-out infinite; }
.sloc-search-bar {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.9); border: 1px solid rgba(46,42,255,.1);
  border-radius:999px; padding:8px 16px; transition:border-color .3s;
}
.sloc-search-bar:focus-within { border-color:rgba(46,42,255,.35); }
.sloc-search-bar svg { width:14px; height:14px; fill:none; stroke:rgba(255,255,255,.3); stroke-width:2; stroke-linecap:round; }
.sloc-search-bar input {
  background:none; border:none; outline:none;
  font-family:'Manrope',sans-serif; font-size:13px; color:#fff; font-weight:500; width:150px;
}
.sloc-search-bar input::placeholder { color:rgba(255,255,255,.25); }
.sloc-regions { display:flex; flex-direction:column; gap:32px; }
.sloc-region { transition:opacity .4s; }
.sloc-region.hidden { display:none; }
.sloc-region-label {
  display:flex; align-items:center; gap:10px;
  font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.25); margin-bottom:14px;
}
.sloc-region-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.07), transparent); }
.sloc-link-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; }
.sloc-link {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:14px; text-decoration:none;
  background:rgba(255,255,255,.03); border: 1px solid rgba(46,42,255,.07);
  transition:background .28s, border-color .28s, transform .28s, box-shadow .28s;
  position:relative; overflow:hidden; cursor:pointer;
}
.sloc-link::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% -10%, rgba(46,42,255,.07), transparent);
  opacity:0; transition:opacity .3s;
}
.sloc-link:hover { background:rgba(46,42,255,.07); border-color:rgba(46,42,255,.28); transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.3), 0 0 0 1px rgba(46,42,255,.08); }
.sloc-link:hover::before { opacity:1; }
.sloc-link-flag { font-size:18px; flex-shrink:0; line-height:1; transition:transform .3s; }
.sloc-link:hover .sloc-link-flag { transform:scale(1.2); }
.sloc-link-info { flex:1; min-width:0; }
.sloc-link-city { font-size:13px; font-weight:800; color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .3s; }
.sloc-link:hover .sloc-link-city { color:#fff; }
.sloc-link-country { font-size:10.5px; color: #888888; font-weight:600; margin-top:1px; transition:color .3s; }
.sloc-link:hover .sloc-link-country { color:rgba(46,42,255,.6); }
.sloc-link-arrow {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,0.9); border: 1px solid rgba(46,42,255,.08);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s, transform .3s;
}
.sloc-link-arrow svg { width:9px; height:9px; fill:none; stroke:rgba(255,255,255,.3); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s; }
.sloc-link:hover .sloc-link-arrow { background:var(--lime); border-color:var(--lime); transform:rotate(45deg) scale(1.1); }
.sloc-link:hover .sloc-link-arrow svg { stroke:#fff; }
.sloc-locations-content { max-height:none; overflow:visible; opacity:1; }
.sloc-no-results { display:none; text-align:center; padding:60px 20px; color:rgba(255,255,255,.3); font-size:14px; }
.sloc-no-results.show { display:block; }
.sloc-no-results-icon { font-size:40px; display:block; margin-bottom:12px; }
.sloc-world-strip {
  margin-top:40px;
  background:rgb(255 255 255 / 19%); border: 1px solid rgba(46,42,255,.07);
  border-radius:24px; padding:32px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  flex-wrap:wrap; overflow:hidden; position:relative;
}
.sloc-world-strip::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 0% 50%, rgba(46,42,255,.04), transparent);
  pointer-events:none;
}
.sloc-world-left { position:relative; z-index:1; }
.sloc-world-title { font-size:18px; font-weight:900; color:#fff; margin-bottom:6px; }
.sloc-world-sub { font-size:13.5px; color:white; line-height:1.6; max-width:380px; }
.sloc-world-right { display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:relative; z-index:1; }
.sloc-world-flags { display:flex; flex-wrap:wrap; gap:6px; max-width:200px; }
.sloc-world-flag-chip {
  font-size:20px; width:36px; height:36px; border-radius:10px;
  background:rgba(255,255,255,0.9); border: 1px solid rgba(46,42,255,.08);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, transform .25s; cursor:default;
}
.sloc-world-flag-chip:hover { background:rgba(46,42,255,.1); transform:scale(1.12); }
.sloc-world-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:999px; cursor:pointer; text-decoration:none;
  font-family:'Manrope',sans-serif; font-size:13px; font-weight:800;
  background:var(--lime); color:#fff; border:none;
  box-shadow:0 4px 20px rgba(46,42,255,.25);
  transition:transform .25s cubic-bezier(.22,.68,0,1.2), box-shadow .25s; white-space:nowrap;
}
.sloc-world-cta:hover { transform:scale(1.05); box-shadow:0 8px 32px rgba(46,42,255,.38); }
.sloc-world-cta svg { width:13px; height:13px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.sloc-r1{transition-delay:.05s} .sloc-r2{transition-delay:.15s}
.sloc-r3{transition-delay:.22s} .sloc-r4{transition-delay:.30s}
@media(max-width:900px){
  .sloc-section { padding:60px 28px 80px; }
  .sloc-header { grid-template-columns:1fr; gap:28px; margin-bottom:48px; }
  .sloc-body { grid-template-columns:1fr; }
  .sloc-services-sidebar { position:relative; top:0; flex-direction:row; flex-wrap:wrap; gap:8px; }
  .sloc-svc-btn { flex:1 1 calc(50% - 4px); min-width:160px; }
}
@media(max-width:600px){
  .sloc-section { padding:60px 20px 80px; }
  .sloc-svc-btn { flex:1 1 100%; }
  .sloc-link-grid { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); }
  .sloc-world-strip { padding:24px 20px; flex-direction:column; align-items:flex-start; }
}

/* ── SECTION ALTERNATION ─────────────────────── */
section:nth-of-type(even) {
  background: var(--bg2);
}

/* ── CARDS ─────────────────────────────────────── */
.why-card, .adtype-card, .budget-card, .ai-feat-card, .obj-card,
.pkg-card, .proc-step, .result-card, .faq-item, .ab-card,
.creative-card, .pixel-step {
  background: #fff !important;
  box-shadow: 0 2px 16px rgba(46,42,255,0.06);
}
.why-card:hover, .adtype-card:hover, .budget-card:hover, .ai-feat-card:hover,
.obj-card:hover { 
  box-shadow: 0 8px 32px rgba(46,42,255,0.12);
}

/* ── PLATFORM BANNER ──────────────────────────── */
.platform-banner {
  background: linear-gradient(135deg, rgba(46,42,255,0.05) 0%, rgba(200,255,0,0.05) 100%) !important;
  border-color: rgba(46,42,255,0.18) !important;
}

/* ── AI INTRO BOX ─────────────────────────────── */
.ai-intro-box {
  background: linear-gradient(135deg, rgba(46,42,255,0.04) 0%, rgba(200,255,0,0.04) 100%) !important;
  border-color: rgba(46,42,255,0.15) !important;
}

/* ── PKG CARD FEATURED ───────────────────────── */
.pkg-card.featured {
  border-color: rgba(46,42,255,0.4) !important;
  background: linear-gradient(160deg, rgba(46,42,255,0.06) 0%, rgba(200,255,0,0.04) 100%) !important;
  box-shadow: 0 12px 40px rgba(46,42,255,0.14) !important;
}
.pkg-card.featured::before {
  background: var(--primary) !important;
  color: #fff !important;
}

/* ── PKG CTA ─────────────────────────────────── */
.pkg-cta {
  background: var(--primary) !important;
  color: #fff !important;
}
.pkg-card.featured .pkg-cta {
  background: var(--primary) !important;
}

/* ── TARGETING / FUNNEL DETAIL ───────────────── */
.targeting-detail, .funnel-objectives, .campaign-dash {
  background: #f2f3ff !important;
  box-shadow: 0 4px 24px rgba(46,42,255,0.07);
  border-radius:2%;
}

/* ── TABLE STYLES ─────────────────────────────── */
.compare-table, .ai-tools-table, .cd-table {
  background: #fff;
}
.compare-table th, .ai-tools-table th, .cd-table th {
  background: rgba(46,42,255,0.06) !important;
  color: #555 !important;
}
.compare-table tr:hover td, .ai-tools-table tr:hover td {
  background: rgba(46,42,255,0.02) !important;
}

/* ── CTA STRIP ────────────────────────────────── */
.cta-strip {
  background: #f2f3ff !important;
  border-color: rgba(46,42,255,0.12) !important;
}

/* ── FOOTER ───────────────────────────────────── */
footer {
  background: #2E2AFF;
  border-color: rgba(46,42,255,0.1) !important;
}
.footer-bottom {
  border-color: rgba(46,42,255,0.08) !important;
}

/* ── SLOC SIDEBAR BUTTONS ─────────────────────── */
.sloc-svc-btn {
  background: rgba(255,255,255,0.7) !important;
  border-color: rgba(46,42,255,0.10) !important;
  color: #111 !important;
}
.sloc-svc-btn:hover { background: rgba(46,42,255,0.06) !important; }
.sloc-svc-btn.active { background: rgba(46,42,255,0.08) !important; border-color: rgba(46,42,255,0.3) !important; }
.sloc-link { background: #fff !important; border: 1px solid rgba(46,42,255,0.10) !important; }
.sloc-link:hover { border-color: rgba(46,42,255,0.3) !important; }

/* ── ACCENT BUTTON VARIANT ───────────────────── */
.btn-accent {
  background: var(--accent);
  color: #111;
  font-weight: 800;
}
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(200,255,0,0.4); }

/* ── TAGS ─────────────────────────────────────── */
.tag { background: rgba(46,42,255,0.06) !important; color: #2E2AFF !important; border-color: rgba(46,42,255,0.15) !important; }
.tag-orange { background: rgba(245,166,35,0.1) !important; color: #c27a00 !important; border-color: rgba(245,166,35,0.2) !important; }
.tag-green { background: rgba(10,166,94,0.08) !important; color: #0aa65e !important; border-color: rgba(10,166,94,0.2) !important; }

/* ── TEXT OVERRIDES ───────────────────────────── */
.fb-desc, .fc-links a { color: #ffffff !important; }
.fc-links a:hover { color: var(--accent) !important; }

/* ── CARD TEXT FIX ────────────────────────────── */
.card p, .card h3 { color: #555 !important; }
.card h3 { color: #111 !important; font-weight: 700; }
.wc-desc, .atc-desc, .bc-desc, .afc-desc, .oc-desc, .fs-desc,
.td-text span, .bc-list li, .pkg-desc, .pkg-features li { color: #555 !important; }

/* ══════════════════════════════════════════════════════
   FINAL LIGHT THEME POLISH — AdPulse
   ══════════════════════════════════════════════════════ */

/* Hero h1 dark text */
.hero h1 { color: var(--text); }
.hero h1 .l2 { color: var(--primary); }
.hero-sub { color: #555; }

/* Hero vis mockup gets white bg + blue accent */
.vis-main {
  background: #ffffff;
  border: 1px solid rgba(46,42,255,0.12);
  box-shadow: 0 20px 60px rgba(46,42,255,0.10);
}
.vm-card { background: #f7f8ff !important; border-color: rgba(46,42,255,0.08) !important; }
.vm-label { color: #888 !important; }
.vis-row { background: #f7f8ff !important; border-color: rgba(46,42,255,0.06) !important; }
.vis-row-label { color: #555 !important; }
.vis-row-val { color: #111 !important; }
.vc-bar { background: linear-gradient(to top, #2E2AFF, rgba(46,42,255,0.3)) !important; }

/* Floating badges */
.vis-float {
  background: #ffffff;
  border: 1px solid rgba(46,42,255,0.20);
  box-shadow: 0 8px 24px rgba(46,42,255,0.10);
}
.vf-val { color: #111 !important; }
.vf-lbl { color: #888 !important; }

/* Hero stats */
.hs-num { color: #ffffff !important; }
.hs-lbl { color: #fff !important; }

/* Accent #C8FF00 use — btn for CTA */
.btn-lime {
    background: var(--accent) !important;
    color: var(--text-dark) !important;
}

/* Logo */
.logo { color: white !important; }
.fb-logo { color: white !important; }

/* Sloc world cta */
.sloc-world-cta { background: var(--accent) !important; color: #000 !important; }
.sloc-world-cta svg { stroke: #fff !important; }

/* AFC badge */
.afc-badge { background: var(--primary) !important; color: #fff !important; }

/* PKG featured badge */
.pkg-card.featured::before { background: var(--primary) !important; color: #fff !important; }

/* Process step numbers */
.ps-num { color: var(--primary) !important; border-color: rgba(46,42,255,0.2) !important; background: rgba(46,42,255,0.06) !important; }
.proc-step::after { background: rgba(46,42,255,0.15) !important; }
.proc-step { background: transparent !important; border-color: rgba(46,42,255,0.1) !important; }
.proc-step:hover { border-color: rgba(46,42,255,0.3) !important; }

/* Funnel stages */
.fs-circle { border: 2px solid rgba(46,42,255,0.2) !important; }
.funnel-stage::after { color: var(--primary) !important; }
.fs-line { background: rgba(46,42,255,0.12) !important; }

/* Result cards */
.result-card, .rc-card { background: #fff !important; border-color: rgba(46,42,255,0.10) !important; }
.rc-industry { color: var(--primary) !important; }
.rcm-val { color: var(--primary) !important; }

/* FAQ */
.faq-btn { background: #fff !important; border-color: rgba(46,42,255,0.10) !important; color: #111 !important; }
.faq-btn:hover { border-color: rgba(46,42,255,0.3) !important; }
.faq-item.open .faq-btn { border-color: rgba(46,42,255,0.3) !important; background: rgba(46,42,255,0.03) !important; }
.faq-icon { color: var(--primary) !important; }
.faq-body p { color: #555 !important; }

/* Contact info items */
.ci-item { background: #fff !important; border-color: rgba(46,42,255,0.10) !important; }
.ci-icon { background: rgba(46,42,255,0.08) !important; border-color: rgba(46,42,255,0.15) !important; color: var(--primary) !important; }

/* Retargeting cards */
.rt-card, .ret-card { background: #fff !important; }

/* Marquee strip background */
.page-box {
  background: rgba(46,42,255,0.02) !important;
}

/* Accent color usage — pkg price highlight */
.pkg-price { color: var(--primary) !important; }
.pbs-num { color: var(--primary) !important; }
.aibs-num { color: var(--primary) !important; }
.bc-label { color: var(--primary) !important; }
.atc-type { color: var(--primary) !important; }
.wc-num { color: var(--primary) !important; }

/* Accent C8FF00 green for success metrics */
.vm-up { color: #0aa65e !important; }
.cd-live { color: #0aa65e !important; }
.cd-live-dot { background: #0aa65e !important; }
.status-active::before { color: #0aa65e !important; }

/* Sloc link cards */
.sloc-link-city { color: #111 !important; }
.sloc-link-country { color: #555 !important; }
.sloc-region-label { color: white !important; }

/* Contact form */
.contact-grid .ci-label { color: #555 !important; }
.form-label { color: #333 !important; }
.form-inp { background: #fff !important; color: #111 !important; border-color: rgba(46,42,255,0.15) !important; }

/* CTA strip text */
.cta-main { color: #111 !important; }
.cta-sub { color: #555 !important; }

/* Footer text */
.footer-bottom p { color: #ffffff !important; }
.fb-desc { color: #ffffff !important; }

/* C8FF00 Accent highlight for featured elements */
.eye-dot { background: var(--primary) !important; }
.hero-eyebrow { color: var(--primary) !important;
 border-color: rgba(46,42,255,0.25) !important;
  background: rgb(253, 253, 253) !important; }

/* Sloc heading */
.sloc-heading-lime { color: var(--primary) !important; }
.sloc-heading { color: #111 !important; }
.sloc-header-desc { color: #555 !important; }
.sloc-stat-mini-num { color: #111 !important; }
.sloc-stat-mini-num span { color: var(--primary) !important; }
.sloc-stat-mini-lbl { color: #888 !important; }

/* General text fixes */
.sec-title { color: #111; }
.sec-sub { color: #555; }
.tc-title { color: #111 !important; }
.tc-desc { color: #555 !important; }
.oc-title, .fs-title, .bc-title, .aib-text h3, .pb-text h3, .td-title { color: #111 !important; }
.oc-desc, .fs-desc, .bc-desc, .aib-text p, .pb-text p { color: #555 !important; }

/* Section alternate bg fix for sloc */
.sloc-section { background: #2E2AFF !important; }

/* Fix targeting detail box */
.targeting-detail { background: #fff !important; }
.td-opt { background: #f7f8ff !important; border-color: rgba(46,42,255,0.08) !important; }
.td-text strong { color: #111 !important; }
.td-text span { color: #555 !important; }
.td-bullet { background: var(--primary) !important; }

/* AI tools table */
.ai-tools-table-wrap { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid rgba(46,42,255,0.10); }
.att-name { color: #111 !important; }
.att-type { color: #555 !important; }

/* Pixel steps */
.pixel-step { background: #fff !important; border-color: rgba(46,42,255,0.10) !important; }
.pixel-step-num { color: var(--primary) !important; }

/* AB test cards */
.ab-card { background: #fff !important; border-color: rgba(46,42,255,0.10) !important; }
.ab-title { color: #111 !important; }
.ab-desc { color: #555 !important; }
.ab-var { background: #f7f8ff !important; border-color: rgba(46,42,255,0.08) !important; color: #555 !important; }

/* Creative cards */
.creative-card { background: #fff !important; }
.creative-title { color: #111 !important; }
.creative-desc { color: #555 !important; }

/* Retargeting grid */
.ret-stage { color: var(--primary) !important; }

/* Compare table */
.compare-table { border-radius: 16px; overflow: hidden; border: 1px solid rgba(46,42,255,0.10); }
.compare-table tbody tr:nth-child(even) td { background: rgba(46,42,255,0.02) !important; }
.ct-yes { color: #0aa65e !important; font-weight: 600; }
.ct-no { color: #e04040 !important; }
.ct-mid { color: var(--primary) !important; }

/* Body bg with a very subtle gradient */
body { background: linear-gradient(160deg, #f7f8ff 0%, #f0f2ff 50%, #f7fff0 100%) !important; }

/* ==========================================================================
   2. DD-RESPONSIVE-FIX:START — mobile/tablet only (max-width: 900px); desktop layout is untouched
   Every declaration is !important.
   ========================================================================== */
/* Readability: minimum text sizes */
@media (max-width: 600px) {
  html body span.hs-lbl,
  html body div.sec-label,
  html body div.atc-type,
  html body span.tag,
  html body span.tag.tag-pink,
  html body div.fs-label,
  html body span.oc-stage,
  html body div.bc-label,
  html body div.afc-badge,
  html body table.ai-tools-table > thead > tr > th,
  html body div.cc-phase,
  html body div.cdm-l,
  html body table.cd-table > thead > tr > th,
  html body div.ps-phase,
  html body div.rc-industry,
  html body span.rcm-lbl,
  html body span.sloc-svc-selected-label,
  html body div.sloc-svc-desc-eyebrow,
  html body div.sloc-region-label { font-size: 11px !important; }
  html body div.hero-eyebrow { font-size: 13px !important; }
  html body span.vis-title,
  html body div.vf-lbl,
  html body span.tag.tag-orange,
  html body span.tag.tag-blue,
  html body span.tag.tag-green,
  html body span.tag.tag-yellow,
  html body span.aibs-lbl,
  html body div.cdm-c,
  html body span.cd-status.status-active,
  html body span.cd-status.status-paused,
  html body div.ps-time,
  html body div.sloc-stat-mini-lbl,
  html body div.sloc-link-country,
  html body div.footer-grid > div > div > span { font-size: 11.5px !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  html body div.sec-label,
  html body table.compare-table > thead > tr > th,
  html body div.atc-type,
  html body span.tag,
  html body span.tag.tag-pink,
  html body div.fs-label,
  html body span.oc-stage,
  html body div.bc-label,
  html body div.afc-badge,
  html body table.ai-tools-table > thead > tr > th,
  html body div.cc-phase,
  html body div.cdm-l,
  html body table.cd-table > thead > tr > th,
  html body div.ps-phase,
  html body div.rc-industry,
  html body span.rcm-lbl,
  html body span.sloc-svc-selected-label,
  html body div.sloc-svc-desc-eyebrow,
  html body div.sloc-region-label { font-size: 11px !important; }
  html body div.hero-eyebrow { font-size: 13px !important; }
  html body span.vis-title,
  html body div.vf-lbl,
  html body span.tag.tag-orange,
  html body span.tag.tag-blue,
  html body span.tag.tag-green,
  html body span.tag.tag-yellow,
  html body span.aibs-lbl,
  html body div.cdm-c,
  html body span.cd-status.status-active,
  html body span.cd-status.status-paused,
  html body div.ps-time,
  html body div.sloc-stat-mini-lbl,
  html body div.sloc-link-country,
  html body div.footer-grid > div > div > span { font-size: 11.5px !important; }
}

/* ==========================================================================
   3. Page styles — formerly the <style> block in <body> (line 2168)
   ========================================================================== */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   4. COMPONENTS — formerly inline style="" attributes (and hover/focus
   handlers that changed styles), grouped by page section. Kept last so they
   win exactly where the inline styles did; the extra ids/classes in some
   selectors match the specificity of the page rules they have to beat.
   ========================================================================== */

/* ── #mobnav ── */
.mobnav-row{margin-top:12px;display:flex;gap:10px}
.mobnav-btn{flex:1;justify-content:center}

/* ── #hero ── */
.d-none{display:none}
.btn.hero-btn{color:white;border-color:rgb(255, 255, 255)}
.h-70pct{height:70%}
.h-35pct{height:35%}
.h-50pct{height:50%}
.h-28pct{height:28%}
.h-62pct{height:62%}
.h-40pct{height:40%}
.h-85pct{height:85%}
.h-55pct{height:55%}
.h-90pct{height:90%}

/* ── Page-level ── */
.page-box{padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;position:relative}
.page-layer{position:absolute;top:0;left:0;bottom:0;width:100px;background:linear-gradient(to right,var(--bg),transparent);z-index:1}
.page-layer-2{position:absolute;top:0;right:0;bottom:0;width:100px;background:linear-gradient(to left,var(--bg),transparent);z-index:1}
.page-row{display:flex;gap:14px;width:max-content;animation:marquee 30s linear infinite}
.page-row-2{display:flex;align-items:center;gap:7px;padding:8px 18px;background:rgba(255,255,255,0.9);border:1px solid rgba(46,42,255,.12);border-radius:100px;font-size:12.5px;white-space:nowrap;color:rgba(17,17,17,0.6)}
.bg-2e2aff{background:#2E2AFF}
section.page-gradient{background:linear-gradient(180deg,var(--bg) 0%,rgba(46,42,255,0.03) 50%,var(--bg) 100%)}
.page-section{background:#f2f3ff;padding:80px 0;border-top:1px solid rgba(46,42,255,0.07)}

/* ── #why ── */
.why-title{font-family:'Manrope',sans-serif;font-size:26px;font-weight:800;margin:56px 0 20px;letter-spacing:-0.025em}

/* ── Shared (used in several sections) ── */
.box{overflow-x:auto;-webkit-overflow-scrolling:touch}
.title-2{font-family:'Manrope',sans-serif;font-size:26px;font-weight:800;margin:48px 0 20px;letter-spacing:-0.025em}

/* ── #audit-scope ── */
.audit-scope-gradient{background:linear-gradient(135deg,#1a0d00,#3d1a00)}
.opacity-0-5{opacity:.5}
.audit-scope-gradient-2{background:linear-gradient(135deg,#00101a,#001f3d)}
.bg-rgb-46-42-255-3{background:rgba(46,42,255,0.3)}
.audit-scope-gradient-3{background:linear-gradient(135deg,#0a0020,#1a0040)}
.bg-rgb-183-0-255-25{background:rgba(183,0,255,0.25)}
.audit-scope-gradient-4{background:linear-gradient(135deg,#1a000a,#3d0018)}
.w-55pct{width:55%}
.bg-rgb-224-64-251-3{background:rgba(224,64,251,0.3)}
.audit-scope-gradient-5{background:linear-gradient(135deg,#001a0a,#003318)}
.h-50{height:50px}
.fs-16{font-size:16px}
.h-35{height:35px}
.atm-slide.bg-rgb-0-230-118-15{background:rgba(0,230,118,0.15)}
.atm-slide.bg-rgb-0-230-118-1{background:rgba(0,230,118,0.1)}
.bg-rgb-0-230-118-25{background:rgba(0,230,118,0.25)}
.audit-scope-gradient-6{background:linear-gradient(135deg,#1a1500,#3d3300)}
.bg-rgb-255-215-64-12{background:rgba(255,215,64,0.12)}
.p-8-0{padding:8px 0}
.audit-scope-box{height:18px;background:rgba(255,255,255,0.06);border-radius:4px;margin-bottom:5px}
.audit-scope-box-2{height:18px;background:rgba(255,215,64,0.15);border-radius:4px}
.bg-rgb-255-215-64-25{background:rgba(255,215,64,0.25)}
.audit-scope-gradient-7{background:linear-gradient(135deg,#001520,#002a40)}
.atm-slide.audit-scope-box-3{background:rgba(24,119,242,0.2);position:relative}
.audit-scope-row{font-size:16px;display:flex;align-items:center;justify-content:center;height:100%}
.atm-slide.bg-rgb-24-119-242-15{background:rgba(24,119,242,0.15)}
.atm-slide.bg-rgb-24-119-242-1{background:rgba(24,119,242,0.1)}
.bg-rgb-24-119-242-3{background:rgba(24,119,242,0.3)}
.audit-scope-gradient-8{background:linear-gradient(135deg,#0d001a,#200040)}
.audit-scope-stack{padding:8px 0;display:flex;flex-direction:column;gap:5px}
.audit-scope-card{align-self:flex-end;background:rgba(183,0,255,0.2);border-radius:10px 2px 10px 10px;padding:5px 9px;font-size:9px;color:rgba(255,255,255,0.5)}
.audit-scope-card-2{align-self:flex-start;background:rgba(255,255,255,0.07);border-radius:2px 10px 10px 10px;padding:5px 9px;font-size:9px;color:rgba(255,255,255,0.5)}
.bg-rgb-183-0-255-2{background:rgba(183,0,255,0.2)}
.audit-scope-gradient-9{background:linear-gradient(135deg,#001a15,#003326)}
.bg-rgb-0-230-118-12{background:rgba(0,230,118,0.12)}

/* ── #stage ── */
.stage-box{background:rgba(46,42,255,0.15);border-color:rgba(46,42,255,0.4);color:var(--lime)}
.stage-box-2{background:rgba(255,215,64,0.15);border-color:rgba(255,215,64,0.4);color:var(--yellow)}
.stage-box-3{background:rgba(0,230,118,0.15);border-color:rgba(0,230,118,0.4);color:var(--green)}
.pb-0{padding-bottom:0}
.stage-title{font-family:'Manrope',sans-serif;font-size:18px;font-weight:700;margin-bottom:0px;padding:15px}
.stage-label{background:rgba(46,42,255,0.1);color:var(--lime)}
.stage-label-2{background:rgba(255,215,64,0.1);color:var(--yellow)}
.stage-label-3{background:rgba(24,119,242,0.1);color:var(--blue2)}
.stage-label-4{background:rgba(0,230,118,0.1);color:var(--green)}

/* ── #budget ── */
.mt-12{margin-top:12px}

/* ── #tracking ── */
.card.tracking-box{margin-top:32px;padding:32px;border-color:rgba(255,215,64,0.25)}
h3.tracking-title{font-size:20px;font-family:'Manrope',sans-serif;font-weight:800;margin-bottom:12px}
p.tracking-text{font-size:14px;color:var(--muted2);line-height:1.75;margin-bottom:16px}
.gap-14{gap:14px}
.tracking-card{padding:14px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:10px}
.tracking-text-2{font-size:13px;font-weight:600;margin-bottom:6px}
.tracking-text-3{font-size:12.5px;color:var(--muted2)}

/* ── #automation ── */
.minw-520{min-width:520px}

/* ── #remarketing ── */
.mt-36{margin-top:36px}

/* ── #testing ── */
.testing-box{background:rgba(46,42,255,0.12);color:var(--lime)}
.testing-box-2{background:rgba(24,119,242,0.12);color:var(--blue2)}
.testing-box-3{background:rgba(0,230,118,0.12);color:var(--green)}
.testing-box-4{background:rgba(255,215,64,0.12);color:var(--yellow)}
.testing-box-5{background:rgba(224,64,251,0.12);color:var(--pink)}

/* ── #metrics ── */
.text-muted{color:var(--muted)}

/* ── #packages ── */
.pkg-card.bg-white-imp{background:#fff !important}
.packages-btn{background:var(--lime);color:#fff}
.packages-title{font-family:'Manrope',sans-serif;font-size:26px;font-weight:800;margin:52px 0 20px;letter-spacing:-0.025em;color:white}
.p-22{padding:22px}
h3.fs-14{font-size:14px}
.packages-text{margin-top:10px;font-family:'Manrope',sans-serif;font-size:13px;color:var(--lime)}

/* ── #locations ── */
.text-white-imp{color:white !important}
.text-accent-imp{color:var(--accent) !important}
.locations-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── #contact ── */
.fs-clamp36px4-5vw60px{font-size:clamp(36px,4.5vw,60px)}
.contact-text{color:var(--muted2);font-size:15px;max-width:380px;line-height:1.75;margin-bottom:8px}
.mt-24{margin-top:24px}
.contact-eyebrow{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}
.contact-row{display:flex;gap:8px;flex-wrap:wrap}
.contact-label{background:rgba(224,64,251,0.1);color:var(--pink);border-color:rgba(224,64,251,0.2)}
.contact-btn{width:100%;justify-content:center}
.contact-text-2{font-size:12px;color:var(--muted);text-align:center;margin-top:12px}

/* ── #section ── */
.fs-clamp28px3-5vw48px{font-size:clamp(28px,3.5vw,48px)}
.section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:40px;margin-top:40px}
.section-title{font-size:20px;font-weight:800;margin-bottom:14px;font-family:'Manrope',sans-serif}
.section-text{font-size:14px;color:var(--muted2);line-height:1.8;margin-bottom:16px}
.section-text-2{font-size:14px;color:var(--muted2);line-height:1.8}
.section-card{margin-top:56px;padding:32px;background:rgba(255,255,255,0.03);border:1px solid rgba(46,42,255,0.1);border-radius:20px}
.section-title-2{font-size:16px;font-weight:800;margin-bottom:18px;font-family:'Manrope',sans-serif;color:var(--lime)}
.section-row{display:flex;flex-wrap:wrap;gap:10px}
.section-row-2{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid rgba(46,42,255,0.1);border-radius:999px;font-size:13px;color:rgba(17,17,17,0.7);text-decoration:none;background:rgba(255,255,255,0.04);transition:all 0.2s}
.section-row-2:hover{border-color:rgba(46,42,255,0.4);color:#fff}
.section-row-3{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid rgba(46,42,255,0.3);border-radius:999px;font-size:13px;color:var(--lime);text-decoration:none;background:rgba(46,42,255,0.07);font-weight:700;transition:all 0.2s}

/* ── #footer ── */
.footer-stack{margin-top:16px;display:flex;flex-direction:column;gap:5px}
.footer-text{font-size:11px;color:white}

/* ── Utilities (single-property, used across sections) ── */
.fs-18{font-size:18px}
.minw-600{min-width:600px}
span.text-accent{color:var(--accent)}
.text-green{color:var(--green)}
.text-lime{color:var(--lime)}
.text-white,span.text-white{color:white}
.text-yellow{color:var(--yellow)}