/* ==========================================================================
   copywriting.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. Components — formerly inline style="" attributes and style-changing hover/focus handlers
     4. Fixes — deliberate corrections of pre-existing bugs (listed there)
   ========================================================================== */

/* ==========================================================================
   1. Page styles — formerly the <style> block in <head>
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --lime: #C8FF00;
  --dark: #2E2AFF;
  --text-muted: rgba(255,255,255,0.62);
  --border: rgba(255,255,255,0.07);
  --card-bg: rgba(255, 255, 255, 0);
  --card-bg2: rgba(255,255,255,0.052);
  --green: #10b981;
  --gold: #f59e0b;
  --blue: #3b82f6;
  --red: #ef4444;
}

html { scroll-behavior: smooth; }
html, body {
  font-family: 'Manrope', sans-serif;
  overflow-x: hidden;
  background: rgb(255, 255, 255);
  max-width: 100%; margin: 0 auto;
  color: #fff; line-height: 1.65;
  font-size: 15px;
}

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:.10; pointer-events:none; z-index:0;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #00033D; }
::-webkit-scrollbar-thumb { background: var(--lime); border-radius: 2px; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── LAYOUT ── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ── TYPOGRAPHY ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; color: var(--lime);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px;
}
.eyebrow::before { content: '✦'; font-size: 9px; }

.section-title {
  font-size: clamp(28px, 5vw, 52px); font-weight: 900;
  line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 16px; color: #fff;
}
.section-title .lime { color: var(--lime); }
.section-title .g { color: var(--lime); }
.section-title .t { color: var(--lime); }

.section-sub { color: var(--text-muted); font-size: 15px; line-height: 1.75; margin-bottom: 40px; max-width: 560px; }
.section-desc { color: var(--text-muted); font-size: 15px; line-height: 1.72; max-width: 600px; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px;
  padding: 0 22px; height: 48px; border-radius: 12px;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  white-space: nowrap; position: relative; z-index: 1;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--lime); color: #030303; font-weight: 900;
  box-shadow: 0 6px 28px rgba(46,42,255,0.38);
}
.btn-primary:hover { box-shadow: 0 10px 40px rgba(46,42,255,0.55); transform: translateY(-2px); background: #9FCC00; }
.btn-outline {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.2);
}
.btn-outline:hover { border-color: rgba(46,42,255,0.5); background: rgba(46,42,255,0.06); color: var(--lime); }
.btn-lg { height: 54px; font-size: 15px; padding: 0 30px; border-radius: 14px; }
.btn-full { width: 100%; justify-content: center; }

/* ── CARDS ── */
.card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px;
  padding: 24px; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  position: relative; overflow: hidden;
}
.card:hover { border-color: rgba(46,42,255,0.25); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.card-top-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,transparent,var(--lime),transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s; }
.card:hover .card-top-line { transform: scaleX(1); }
.card-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(46,42,255,0.1); border: 1px solid rgba(46,42,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.card h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; color: #fff; }
.card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.65; }

/* ── TAGS ── */
.tag { display: inline-block; font-size: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); border: 1px solid var(--border); font-weight: 600; }
.tag-p { background: rgba(46,42,255,0.07); color: var(--lime); border-color: rgba(46,42,255,0.2); }
.tag-pk { background: rgba(46,42,255,0.07); color: var(--lime); border-color: rgba(46,42,255,0.2); }
.tag-t { background: rgba(16,185,129,0.1); color: var(--green); border-color: rgba(16,185,129,0.2); }
.tag-g { background: rgba(16,185,129,0.1); color: var(--green); border-color: rgba(16,185,129,0.2); }
.tag-b { background: rgba(59,130,246,0.1); color: var(--blue); border-color: rgba(59,130,246,0.2); }
.tag-gold { background: rgba(245,158,11,0.1); color: var(--gold); border-color: rgba(245,158,11,0.2); }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.v { opacity: 1; transform: none; }

/* ── SECTIONS ── */
section { padding: 80px 0; border-top: 1px solid var(--border); position: relative; z-index: 1; }
section:first-of-type { border-top: none; }
@media(min-width:768px) { section { padding: 100px 0; } }
@media(min-width:1100px) { section { padding: 120px 0; } }
.section-alt { background: #2E2AFF; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 48px;
  background: #2E2AFF; backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(46,42,255,0.08);
}
.nav-logo { font-size: 18px; font-weight: 900; letter-spacing: 0.06em; color: var(--lime); text-transform: uppercase; text-decoration: none; }
.nav-links { display: flex; gap: 4px; list-style: none; flex-wrap: wrap; }
.nav-links a {
  display: inline-block; padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75);
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px);
  transition: background 0.2s, color 0.2s;
}
.nav-links a:hover { background: rgba(255,255,255,0.09); color: #fff; }
.nav-links a.nav-cta { background: var(--lime); color: #030303; font-weight: 800; border-color: var(--lime); }
.nav-links a.nav-cta:hover { background: #9FCC00; }

/* Hamburger */
.ham { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.ham span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,0.7); border-radius: 2px; transition: all 0.3s; }
.ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; }
.ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mob-nav {
  position: fixed; top: 60px; left: 0; right: 0; bottom: 0;
  background: rgba(0,3,61,0.98); backdrop-filter: blur(20px);
  z-index: 998; padding: 24px 24px 32px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateX(100%); transition: transform 0.3s ease;
  overflow-y: auto;
}
.mob-nav.open { transform: translateX(0); }
.mob-nav a {
  display: flex; align-items: center; height: 52px;
  color: rgba(255,255,255,0.7); text-decoration: none; font-size: 16px; font-weight: 600;
  padding: 0 4px; border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.mob-nav a:hover { color: var(--lime); }
.mob-nav a:last-child { border-bottom: none; }
.mob-nav .mob-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.mob-nav .mob-cta .btn { width: 100%; justify-content: center; }

@media(max-width:1024px) {
  .ham { display: flex; }
  .nav-links { display: none; }
  nav { padding: 14px 20px; }
}

/* ── HERO ── */
#hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: calc(60px + 48px) 0 60px;
  overflow: hidden;background: #2E2AFF; position: relative;
  border-top: none;
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 700px 500px at 50% 10%, rgba(46,42,255,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 400px 300px at 15% 80%, rgba(46,42,255,0.06) 0%, transparent 55%);
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(46,42,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,42,255,.022) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media(min-width:960px) { .hero-inner { grid-template-columns: 1fr 1fr; gap: 60px; } }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(46,42,255,0.12); border: 1px solid rgba(46,42,255,0.38);
  border-radius: 999px; padding: 8px 20px;
  font-size: 12px; font-weight: 700; color: var(--lime);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 24px;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }

.hero-h1 {
  font-size: clamp(38px, 8vw, 80px); font-weight: 900; line-height: 0.98;
  letter-spacing: -0.04em; margin-bottom: 22px; color: #fff;
}
.hero-h1 .line1 { display: block; }
.hero-h1 .line2 { display: block; color: var(--lime); }
.hero-h1 .line3 { display: block; }

.hero-sub { font-size: 15px; color: var(--text-muted); line-height: 1.75; margin-bottom: 28px; max-width: 480px; }
@media(min-width:768px) { .hero-sub { font-size: 17px; } }

.hero-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
@media(min-width:480px) { .hero-btns { flex-direction: row; flex-wrap: wrap; } }

.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hstat { display: flex; flex-direction: column; }
.hstat-n { font-size: clamp(22px, 4.5vw, 34px); font-weight: 900; line-height: 1; color: #fff; }
.hstat-n .sup { font-size: 0.45em; color: var(--lime); }
.hstat-l { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 3px; }

/* Hero dashboard card */
.hero-vis { margin-top: 48px; }
@media(min-width:960px) { .hero-vis { margin-top: 0; } }

.dashboard-card {
  background: var(--card-bg); border: 1px solid rgba(46,42,255,0.14); border-radius: 20px;
  overflow: hidden; position: relative;
}
.dashboard-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--lime), rgba(46,42,255,0.3), transparent); }
.dash-header { padding: 16px 18px 0; display: flex; justify-content: space-between; align-items: center; }
.dash-dots { display: flex; gap: 6px; }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; }
.dash-title { font-size: 10px; color: rgba(255,255,255,0.35); letter-spacing: 1px; }
.dash-live { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--lime); }
.dm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: pulse-dot 2s infinite; }

.plat-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px 0; }
.plat-pill { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px solid; }
.plat-dot { width: 5px; height: 5px; border-radius: 50%; animation: pulse-dot 1.8s ease-in-out infinite; }

.metrics-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 18px; }
.metric { background: rgba(46,42,255,0.04); border: 1px solid rgba(46,42,255,0.1); border-radius: 12px; padding: 12px; }
.metric-label { font-size: 9px; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; }
.metric-val { font-size: 22px; font-weight: 900; line-height: 1; color: var(--lime); }
.metric-chg { font-size: 10px; color: #10b981; margin-top: 2px; }

.data-rows { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.data-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; }
.data-row .label { color: var(--text-muted); }
.data-row .val { font-weight: 700; color: #fff; }

/* ── MARQUEE ── */
.marquee-section { padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; position: relative; z-index: 1; }
.marquee-fade-l { position: absolute; top: 0; left: 0; bottom: 0; width: 80px; background: linear-gradient(to right, rgba(0,3,61,0.97), transparent); z-index: 2; pointer-events: none; }
.marquee-fade-r { position: absolute; top: 0; right: 0; bottom: 0; width: 80px; background: linear-gradient(to left, rgba(0,3,61,0.97), transparent); z-index: 2; pointer-events: none; }
.marquee-track { display: flex; gap: 10px; width: max-content; animation: marquee 28s linear infinite; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mchip { display: flex; align-items: center; gap: 6px; padding: 7px 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: rgba(255,255,255,0.55); white-space: nowrap; font-weight: 600; }

/* ── STAT BANNER ── */
.stat-banner {
  display: grid; grid-template-columns: 1fr;
  gap: 24px; padding: 28px; margin-bottom: 44px;
  background: rgba(46,42,255,0.04);
  border: 1px solid rgba(46,42,255,0.14); border-radius: 20px;
}
@media(min-width:768px) { .stat-banner { grid-template-columns: 1.2fr 1fr; gap: 40px; padding: 36px; } }

.stat-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.snum { text-align: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 18px 10px; }
.snum-v { font-size: clamp(22px, 5vw, 30px); font-weight: 900; display: block; line-height: 1; color: var(--lime); }
.snum-l { font-size: 11px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; }

/* ── COMPARISON TABLE ── */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-scroll::-webkit-scrollbar { height: 3px; }
.cmp-scroll::-webkit-scrollbar-thumb { background: var(--lime); border-radius: 3px; }
.cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 12.5px; }
.cmp-table th { text-align: left; padding: 10px 12px; background: var(--card-bg2); color: rgba(255,255,255,0.4); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--border); white-space: nowrap; font-weight: 700; }
.cmp-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); color: rgba(255,255,255,0.7); }
.cmp-table tr:hover td { background: rgba(46,42,255,0.02); }
.cy { color: var(--lime) !important; font-weight: 600; }
.cn { color: rgba(255,255,255,0.3) !important; }
.cm { color: var(--gold) !important; }

/* ── PLATFORMS ── */
.plat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media(min-width:540px) { .plat-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:900px) { .plat-grid { grid-template-columns: repeat(3, 1fr); } }

.plat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.plat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,0.4); border-color: rgba(46,42,255,0.22); }
.plat-stripe { height: 3px; }
.plat-body { padding: 22px; }
.plat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.plat-logo { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.plat-name { font-size: 17px; font-weight: 800; color: #fff; }
.plat-users { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.plat-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin-bottom: 12px; }
.plat-best strong { display: block; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85); margin-bottom: 3px; }
.plat-best span { font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.plat-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }

/* ── SERVICES ── */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media(min-width:600px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 26px; transition: all 0.25s; position: relative; overflow: hidden; }
.svc-card:hover { border-color: rgba(46,42,255,0.28); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.svc-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--lime),transparent); transform:scaleX(0); transform-origin:left; transition:transform 0.35s; }
.svc-card:hover::after { transform:scaleX(1); }
.svc-num { font-size: 10px; color: rgba(46,42,255,0.6); letter-spacing: 2px; margin-bottom: 8px; font-weight: 700; text-transform: uppercase; }
.svc-icon { font-size: 28px; margin-bottom: 12px; }
.svc-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; color: #fff; }
.svc-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin-bottom: 14px; }
.svc-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.svc-list li { font-size: 12.5px; color: var(--text-muted); display: flex; gap: 8px; align-items: flex-start; }
.svc-list li::before { content: '✦'; color: var(--lime); font-size: 8px; flex-shrink: 0; margin-top: 4px; }

/* ── CONTENT STRATEGY ── */
.tabs-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 28px; }
.tab-btn { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: all 0.2s; background: transparent; font-family: 'Manrope', sans-serif; }
.tab-btn.on { background: rgba(46,42,255,0.1); border-color: rgba(46,42,255,0.38); color: var(--lime); }
.tab-btn:hover:not(.on) { border-color: rgba(255,255,255,0.2); color: #fff; }
.tab-panel { display: none; }
.tab-panel.on { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media(min-width:540px) { .tab-panel.on { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:900px) { .tab-panel.on { grid-template-columns: repeat(3, 1fr); } }
.tab-card { background: var(--card-bg2); border: 1px solid var(--border); border-radius: 14px; padding: 20px; transition: all 0.22s; }
.tab-card:hover { border-color: rgba(46,42,255,0.2); transform: translateY(-2px); }
.tc-icon { font-size: 22px; margin-bottom: 8px; }
.tc-title { font-size: 14px; font-weight: 800; margin-bottom: 6px; color: #fff; }
.tc-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

.cal-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-top: 32px; }
.cal-head-bar { padding: 16px 18px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 800; color: #fff; }
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-scroll::-webkit-scrollbar { height: 3px; }
.cal-scroll::-webkit-scrollbar-thumb { background: var(--lime); border-radius: 3px; }
.cal-table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 12px; }
.cal-table th { text-align: left; padding: 10px 14px; background: var(--card-bg2); color: rgba(255,255,255,0.4); font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--border); font-weight: 700; }
.cal-table td { padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text-muted); }
.cal-table td:first-child { color: #fff; font-weight: 700; white-space: nowrap; }

/* ── COMMUNITY MANAGEMENT (fbads-* classes) ── */
.fbads-inner { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media(min-width:960px) { .fbads-inner { grid-template-columns: 1fr 1fr; } }

.fbads-h { font-size: clamp(28px, 7vw, 52px); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 16px; color: #fff; }
.fbads-h .lime { color: var(--lime); }

.fb-stats { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.fbs { display: flex; flex-direction: column; }
.fbs-n { font-size: 26px; font-weight: 900; color: var(--lime); line-height: 1; letter-spacing: -0.03em; }
.fbs-l { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 2px; }

.fb-feats { display: flex; flex-direction: column; gap: 14px; }
.fbf { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
 background: #f2f3ff50; border: 1px solid var(--border); border-radius: 14px; transition: border-color 0.2s; }
.fbf:hover { border-color: rgba(46,42,255,0.2); }
.fbf-icon { font-size: 22px; flex-shrink: 0; }
.fbf-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.fbf-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

.mock-ads { display: flex; flex-direction: column; gap: 14px; }
.ad-mock { background: #f2f3ff5c; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color 0.2s; }
.ad-mock:hover { border-color: rgba(46,42,255,0.2); }
.adm-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.adm-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.adm-name { font-size: 12.5px; font-weight: 800; color: #fff; }
.adm-type { font-size: 10.5px; color: var(--text-muted); }
.adm-img { padding: 14px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.7); text-align: center; margin: 0 14px; border-radius: 10px; }
.adm-text { padding: 8px 14px; font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.adm-footer { padding: 8px 14px 12px; display: flex; justify-content: space-between; align-items: center; }
.adm-roas { font-size: 11px; font-weight: 700; }
.adm-cta { padding: 6px 14px; border-radius: 8px; border: none; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Manrope', sans-serif; }
.fb-formats { padding: 14px; border-top: 1px solid var(--border); margin-top: 4px; }
.fb-formats-label { font-size: 10.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.fb-formats-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* ── ANALYTICS ── */
.analytics-inner { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media(min-width:900px) { .analytics-inner { grid-template-columns: 1fr 1.2fr; } }

.kpi-list { display: flex; flex-direction: column; gap: 10px; }
.kpi-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; transition: border-color 0.2s; }
.kpi-item:hover { border-color: rgba(46,42,255,0.2); }
.kpi-ico { font-size: 20px; flex-shrink: 0; }
.kpi-info { flex: 1; }
.kpi-name { font-size: 13.5px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.kpi-d { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.kpi-tgt { font-size: 10.5px; font-weight: 800; color: var(--lime); background: rgba(46,42,255,0.08); border: 1px solid rgba(46,42,255,0.18); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

.dash-mock { background: var(--card-bg); border: 1px solid rgba(46,42,255,0.14); border-radius: 20px; overflow: hidden; }
.dm-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.dm-title { font-size: 13px; font-weight: 800; color: #fff; }
.bars { display: flex; align-items: flex-end; gap: 6px; padding: 20px 18px 12px; height: 100px; }
.bar { flex: 1; border-radius: 4px 4px 0 0; transition: opacity 0.2s; }
.bar:hover { opacity: 0.8; }
.dm-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--border); }
.dmm { padding: 12px 10px; text-align: center; border-right: 1px solid var(--border); }
.dmm:last-child { border-right: none; }
.dmm-l { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.dmm-v { font-size: 15px; font-weight: 900; }
.dmm-c { font-size: 9px; color: var(--lime); }
.dm-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.dm-table th { padding: 8px 12px; background: var(--card-bg2); color: rgba(255,255,255,0.4); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid var(--border); text-align: left; }
.dm-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); color: rgba(255,255,255,0.75); }
.sta-a { background: rgba(46,42,255,0.1); color: var(--lime); padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.sta-g { background: rgba(245,158,11,0.1); color: var(--gold); padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }

/* ── PACKAGES ── */
.pkg-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 0; }
@media(min-width:600px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1100px) { .pkg-grid { grid-template-columns: repeat(4, 1fr); } }

.pkg { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; position: relative; transition: border-color 0.3s, transform 0.3s; }
.pkg:hover { border-color: rgba(46,42,255,0.25); transform: translateY(-4px); }
.pkg.featured { border-color: rgba(46,42,255,0.35); background: rgba(46,42,255,0.03); }
.pkg-pop { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--lime); color: #030303; font-size: 8.5px; font-weight: 800; letter-spacing: 1.5px; padding: 3px 14px; border-radius: 100px; white-space: nowrap; }
.pkg-tier { font-size: 9.5px; color: rgba(255,255,255,0.35); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; font-weight: 700; }
.pkg-name { font-size: 22px; font-weight: 900; margin-bottom: 6px; color: #fff; }
.pkg-price { font-size: 44px; font-weight: 900; line-height: 1; margin-bottom: 4px; color: #fff; }
.pkg-price .cur { font-size: 16px; color: var(--text-muted); font-weight: 500; vertical-align: super; margin-top: 6px; display: inline-block; }
.pkg-price .per { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.pkg-plats { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }
.pkg-plats strong { color: var(--lime); }
.pkg-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.65; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.pkg-feats { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.pkg-feats li { font-size: 13px; display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; color: rgba(255,255,255,0.8); }
.pkg-feats li::before { content: '✓'; color: var(--lime); font-weight: 700; flex-shrink: 0; }
.pkg-feats li.na { color: rgba(255,255,255,0.28); }
.pkg-feats li.na::before { content: '—'; color: rgba(255,255,255,0.18); }
.pkg-btn { width: 100%; height: 46px; border-radius: 12px; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: all 0.22s; border: 1.5px solid rgba(255,255,255,0.18); background: transparent; color: #fff; font-family: 'Manrope', sans-serif; }
.pkg-btn:hover { border-color: rgba(46,42,255,0.5); color: var(--lime); }
.pkg-btn-lime { background: var(--lime) !important; color: #030303 !important; border-color: var(--lime) !important; font-weight: 900 !important; }
.pkg-btn-lime:hover { background: #9FCC00 !important; }

.addons { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
@media(min-width:540px) { .addons { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:900px) { .addons { grid-template-columns: repeat(4, 1fr); } }

/* ── PROCESS ── */
.process-steps { display: flex; flex-direction: column; gap: 0; max-width: 860px; position: relative; }
.process-steps::before { content: ''; position: absolute; left: 23px; top: 24px; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--lime), rgba(46,42,255,0.05)); }
.pstep { display: flex; gap: 22px; padding-bottom: 40px; position: relative; z-index: 1; }
.pstep:last-child { padding-bottom: 0; }
.pnum-wrap { flex-shrink: 0; }
.pnum { width: 48px; height: 48px; border-radius: 50%; background: rgba(8,15,0,0.9); border: 2px solid rgba(46,42,255,0.4); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: var(--lime); flex-shrink: 0; box-shadow: 0 0 20px rgba(46,42,255,0.15); }
.pstep-body { flex: 1; padding-top: 8px; }
.pstep-phase { font-size: 9.5px; color: rgba(46,42,255,0.7); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; font-weight: 700; }
.pstep-title { font-size: 18px; font-weight: 800; margin-bottom: 7px; color: #fff; }
.pstep-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 10px; }
.pstep-pts { display: flex; flex-direction: column; gap: 4px; }
.pstep-pt { font-size: 12.5px; color: var(--text-muted); display: flex; gap: 8px; }
.pstep-pt::before { content: '✦'; color: var(--lime); font-size: 8px; flex-shrink: 0; margin-top: 3px; }
.ptime { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--lime); background: rgba(46,42,255,0.08); border: 1px solid rgba(46,42,255,0.2); padding: 3px 9px; border-radius: 999px; margin-top: 10px; font-weight: 700; }

/* ── RESULTS ── */
.results-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media(min-width:540px) { .results-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:900px) { .results-grid { grid-template-columns: repeat(3, 1fr); } }

.result-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; transition: all 0.28s; }
.result-card:hover { border-color: rgba(46,42,255,0.25); transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,0.45); }
.rc-top { padding: 20px 20px 14px; border-bottom: 1px solid var(--border); }
.rc-ind { font-size: 9.5px; color: rgba(46,42,255,0.6); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 5px; font-weight: 700; }
.rc-client { font-size: 18px; font-weight: 900; margin-bottom: 6px; color: #fff; }
.rc-challenge { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.rc-nums { padding: 14px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-bottom: 1px solid var(--border); }
.rcn { text-align: center; }
.rcn-v { font-size: clamp(18px, 4vw, 22px); font-weight: 900; display: block; line-height: 1.1; color: var(--lime); }
.rcn-l { font-size: 9.5px; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 2px; font-weight: 700; }
.rc-tags { padding: 12px 20px; display: flex; gap: 5px; flex-wrap: wrap; }

/* ── TESTIMONIALS ── */
.testi-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media(min-width:540px) { .testi-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:900px) { .testi-grid { grid-template-columns: repeat(4, 1fr); } }

.testi { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 24px; transition: all 0.25s; }
.testi:hover { border-color: rgba(46,42,255,0.2); transform: translateY(-3px); }
.testi-stars { color: #ffd700; font-size: 12px; letter-spacing: 1.5px; margin-bottom: 10px; }
.testi-result { display: inline-block; font-size: 10.5px; color: var(--lime); background: rgba(46,42,255,0.08); border: 1px solid rgba(46,42,255,0.18); padding: 3px 9px; border-radius: 999px; margin-bottom: 12px; font-weight: 700; }
.testi-text { font-size: 13px; color: var(--text-muted); line-height: 1.72; font-style: italic; margin-bottom: 16px; }
.testi-person { display: flex; align-items: center; gap: 10px; }
.tp-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.tp-name { font-size: 13px; font-weight: 800; color: #fff; }
.tp-role { font-size: 11px; color: var(--text-muted); }

/* ── FAQ ── */
.faq-list { max-width: 1200px; display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color 0.2s; }
.faq-item.open { border-color: rgba(46,42,255,0.28); }
.faq-q { width: 100%; text-align: left; padding: 18px 20px; background: var(--card-bg); border: none; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: 'Manrope', sans-serif; transition: background 0.2s; min-height: 56px; }
.faq-q:hover { background: var(--card-bg2); }
.faq-arrow { color: var(--lime); font-size: 18px; transition: transform 0.3s; flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.38s ease; }
.faq-item.open .faq-a { max-height: 400px; }
.faq-a p { padding: 0 20px 18px; font-size: 13.5px; color: var(--text-muted); line-height: 1.78; }

/* ══════════════════════════════════════════
   SERVICES & LOCATION SECTION
   ══════════════════════════════════════════ */
.sloc-section {
  position: relative; padding: 80px 52px 120px; 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:.09;
}
.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:72px; }
.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(255,255,255,.38); 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(255,255,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,.30); border-color:rgba(46,42,255,.15); transform:translateX(3px); }
.sloc-svc-btn.active { background:rgba(255,255,255,.30); 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,.05); border:1px solid rgba(255,255,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(255,255,255,.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; 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-svc-selected-display { background:rgba(255,255,255,.30); 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:rgb(255, 255, 255); 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-locations-panel { min-height:520px; }
.sloc-svc-desc-block { margin-bottom:24px; border-radius:18px; background:rgba(255, 255, 255, 0.27); border:1px solid rgba(255,255,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:#fff; 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); 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-dot 1.8s ease-in-out infinite; }
.sloc-search-bar { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,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:rgb(255, 255, 255); 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(255,255,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); }
.sloc-link:hover::before { opacity:1; }
.sloc-link-flag { font-size:18px; flex-shrink:0; line-height:1; transition:transform .3s;color:#fff; }
.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:rgba(255,255,255,.35); 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,.05); border:1px solid rgba(255,255,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:#051628; }
.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:rgba(255,255,255,20%); border:1px solid rgba(255,255,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:var(--text-muted); 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,.05); border:1px solid rgba(255,255,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:#051628; border:none; box-shadow:0 4px 20px rgba(46,42,255,.25); transition:transform .25s, 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:#051628; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

@media(max-width:900px){
  .sloc-section { padding:60px 24px 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 16px 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; }
}

/* ── CONTACT ── */
.contact-inner { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media(min-width:900px) { .contact-inner { grid-template-columns: 1fr 1.2fr; } }
.ci-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; transition: border-color 0.2s; }
.ci-item:hover { border-color: rgba(46,42,255,0.2); }
.ci-ico { font-size: 20px; flex-shrink: 0; }
.ci-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: rgba(255,255,255,0.35); }
.ci-val { font-size: 13.5px; color: var(--lime); font-weight: 700; }
.contact-info-items { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

.form-box { background: var(--card-bg); border: 1px solid rgba(46,42,255,0.14); border-radius: 20px; padding: 32px; }
@media(min-width:480px) { .form-box { padding: 38px; } }
.form-title { font-size: 22px; font-weight: 900; margin-bottom: 24px; color: #fff; }
.fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fg label { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.9px; }
.fi { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 13px 16px; color: #fff; font-family: 'Manrope', sans-serif; font-size: 14px; transition: border-color 0.2s; outline: none; width: 100%; -webkit-appearance: none; }
.fi:focus { border-color: rgba(46,42,255,0.4); background: rgba(46,42,255,0.03); }
.fi option { background: #0f1800; }
textarea.fi { resize: vertical; min-height: 90px; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 0; }
@media(min-width:480px) { .two-col { grid-template-columns: 1fr 1fr; gap: 12px; } }
.btn-group { display: flex; flex-wrap: wrap; gap: 7px; }
.bopt { padding: 7px 13px; height: 36px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.18s; font-family: 'Manrope', sans-serif; }
.bopt:hover { border-color: rgba(46,42,255,0.3); color: #fff; }
.bopt.sel { background: rgba(46,42,255,0.1); border-color: rgba(46,42,255,0.4); color: var(--lime); }
.form-ok { display: none; text-align: center; padding: 14px; color: var(--lime); font-weight: 700; font-size: 15px; }

/* ── CTA STRIP ── */
.cta-strip {
  padding: 56px 24px;
  background: rgba(46,42,255,0.04);
  border-top: 1px solid rgba(46,42,255,0.12);
  border-bottom: 1px solid rgba(46,42,255,0.08);
  position: relative; z-index: 1;
}
.cta-strip-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
@media(min-width:768px) { .cta-strip-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } }
.cta-h { font-size: clamp(22px, 5vw, 40px); font-weight: 900; line-height: 1.08; letter-spacing: -0.03em; color: #fff; }
.cta-sub { font-size: 14px; color: var(--text-muted); margin-top: 6px; }
.cta-btns { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
@media(min-width:480px) { .cta-btns { flex-direction: row; } }

/* ── FOOTER ── */
footer { padding: 60px 0 32px; border-top: 1px solid var(--border); position: relative; z-index: 1; }
.foot-inner { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
@media(min-width:540px) { .foot-inner { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:900px) { .foot-inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot-logo { font-size: 20px; font-weight: 900; color: var(--lime); margin-bottom: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.foot-desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 220px; }
.foot-col-title { font-size: 10px; color: rgba(255,255,255,0.28); text-transform: uppercase; letter-spacing: 1.8px; margin-bottom: 14px; font-weight: 700; }
.foot-links { display: flex; flex-direction: column; gap: 9px; }
.foot-links a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 13.5px; transition: color 0.2s; }
.foot-links a:hover { color: var(--lime); }
.foot-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; flex-direction: column; gap: 8px; }
@media(min-width:640px) { .foot-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.foot-bottom p { font-size: 12px; color: rgba(255,255,255,0.28); }

/* ── FLOATING CTA ── */
.float-audit { position:fixed; bottom:28px; right:28px; z-index:9999; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.float-audit-btn { display:inline-flex; align-items:center; gap:10px; background:var(--lime); color:#030303; font-family:'Manrope',sans-serif; font-size:14px; font-weight:900; border:none; border-radius:999px; padding:14px 26px; cursor:pointer; box-shadow:0 8px 36px rgba(46,42,255,.45); animation:float-bob 3s ease-in-out infinite; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.float-audit-btn:hover { transform:scale(1.07); box-shadow:0 12px 44px rgba(46,42,255,.6); }
@keyframes float-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.float-badge { background:rgba(46,42,255,.18); border:1px solid rgba(46,42,255,.4); color:var(--lime); font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px; backdrop-filter:blur(8px); }

/* ── AUDIT MODAL ── */
.audit-modal-overlay { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.82); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
.audit-modal-overlay.open { opacity:1; pointer-events:all; }
.audit-modal { background:#0a1200; border:1px solid rgba(46,42,255,.3); border-radius:28px; padding:48px; max-width:520px; width:90%; position:relative; box-shadow:0 32px 80px rgba(0,0,0,.6); transform:translateY(30px) scale(.97); transition:transform .3s; }
.audit-modal-overlay.open .audit-modal { transform:translateY(0) scale(1); }
.audit-close { position:absolute; top:18px; right:22px; background:none; border:none; color:rgba(255,255,255,.5); font-size:22px; cursor:pointer; font-family:'Manrope',sans-serif; transition:color .2s; }
.audit-close:hover { color:#fff; }
.audit-modal h3 { font-size:28px; font-weight:900; color:#fff; margin-bottom:8px; line-height:1.15; }
.audit-modal h3 span { color:var(--lime); }
.audit-modal p { color:var(--text-muted); font-size:14px; margin-bottom:28px; line-height:1.6; }
.audit-form-group { margin-bottom:16px; }
.audit-form-group input, .audit-form-group select { width:100%; padding:14px 18px; background:#00033D; border:1px solid rgba(255,255,255,.12); border-radius:12px; color:#fff; font-family:'Manrope',sans-serif; font-size:14px; outline:none; transition:border-color .2s; }
.audit-form-group input::placeholder { color:rgba(255,255,255,.35); }
.audit-form-group input:focus, .audit-form-group select:focus { border-color:rgba(46,42,255,.5); }
.audit-form-group select { color:rgba(255,255,255,.7); appearance:none; cursor:pointer; }
.audit-submit { width:100%; padding:16px; background:var(--lime); color:#030303; font-family:'Manrope',sans-serif; font-size:15px; font-weight:900; border:none; border-radius:12px; cursor:pointer; margin-top:8px; transition:background .2s,transform .2s; }
.audit-submit:hover { background:#9FCC00; transform:scale(1.02); }
.audit-perks { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.audit-perk { font-size:11.5px; color:var(--lime); font-weight:700; }

/* ── TRANSITION DELAYS ── */
.d1{transition-delay:.05s}.d2{transition-delay:.12s}.d3{transition-delay:.19s}.d4{transition-delay:.26s}.d5{transition-delay:.33s}.d6{transition-delay:.40s}

/* ── MOBILE RESPONSIVE ── */
@media(max-width:768px) {
  .hero-stats { grid-template-columns: repeat(3,1fr); gap:10px; }
  .hstat-n { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   VISIBILITY FIX — White Background Sections
   Goal: All content clearly visible & readable on white/light bg
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Override root variables for light/white default ── */
:root {
  --text-muted: #555555;
  --border: rgba(0, 0, 0, 0.1);
  --card-bg: #ffffff;
  --card-bg2: #f5f6fa;
}

/* ── 2. Body base: dark text on white background ── */
html, body {
  color: #111111;
}

/* ── 3. Add explicit dark backgrounds to sections missing them
        These are styled for dark but have no background set ── */
.marquee-section {
  background: #00033D;
  border-top-color: rgba(255,255,255,0.06);
  border-bottom-color: rgba(255,255,255,0.06);
}
.sloc-section {
  background: #00033D;
}
.cta-strip {
  background: #00033D;
  border-top-color: rgba(255,255,255,0.08);
  border-bottom-color: rgba(255,255,255,0.05);
}
footer {
  background: #00033D;
  border-top-color: rgba(255,255,255,0.07);
}

/* ── 4. Restore dark-mode variables inside dark sections ── */
nav,
#hero,
.section-alt,
.mob-nav,
.sloc-section,
.marquee-section,
.cta-strip,
footer,
.float-audit,
.audit-modal-overlay {
  --text-muted: rgba(255,255,255,0.62);
  --border: rgba(255,255,255,0.07);
  --card-bg: rgba(255,255,255,0.02);
  --card-bg2: rgba(255,255,255,0.05);
  color: #ffffff;
}

/* ── 5. Typography — white sections ── */

/* Eyebrow: lime (#C8FF00) invisible on white → primary blue */
.eyebrow {
  color: #2E2AFF;
}
/* Restore lime eyebrow in dark sections */
.section-alt .eyebrow,
#hero .eyebrow,
.sloc-section .eyebrow {
  color: var(--lime);
}

/* Section titles */
.section-title {
  color: #111111;
}
.section-alt .section-title {
  color: #ffffff;
}

/* Accent spans inside titles: lime → primary blue on white */
.section-title .lime,
.section-title .g,
.section-title .t {
  color: #2E2AFF;
}
.section-alt .section-title .lime,
.section-alt .section-title .g,
.section-alt .section-title .t {
  color: var(--lime);
}

/* Sub / desc */
.section-sub,
.section-desc {
  color: #555555;
}

/* ── 6. Links ── */
a {
  color: #2E2AFF;
}
a:hover {
  color: #0a0070;
}
/* Restore link colors in dark sections */
nav a,
#hero a,
.section-alt a,
.mob-nav a,
.sloc-section a,
.cta-strip a,
footer a {
  color: #000000;
}
.nav-logo { color: var(--lime) !important; }
.nav-links a { color: rgba(255,255,255,0.75); }
.nav-links a:hover { color: #ffffff; }
.nav-links a.nav-cta { color: #030303 !important; }
.mob-nav a { color: rgba(255,255,255,0.7); }
.mob-nav a:hover { color: var(--lime); }
.foot-links a { color: rgba(255,255,255,0.5); }
.foot-links a:hover { color: var(--lime); }

/* ── 7. Buttons ── */
/* btn-primary: lime bg + dark text — already good */
/* btn-outline: needs dark text on white bg */
.btn-outline {
  color: #111111;
  border-color: rgba(0,0,0,0.18);
  background: transparent;
}
.btn-outline:hover {
  color: #2E2AFF;
  border-color: rgba(46,42,255,0.4);
  background: rgba(46,42,255,0.04);
}
/* Restore white outline buttons in dark sections */
nav .btn-outline,
#hero .btn-outline,
.section-alt .btn-outline,
.mob-nav .btn-outline,
.sloc-section .btn-outline,
.cta-strip .btn-outline,
footer .btn-outline {
  color: #ffffff;
  border-color: rgba(255,255,255,0.2);
}
nav .btn-outline:hover,
#hero .btn-outline:hover,
.section-alt .btn-outline:hover,
.mob-nav .btn-outline:hover,
.sloc-section .btn-outline:hover {
  color: var(--lime);
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.06);
}

/* ── 8. Cards & boxes ── */
.card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  border-color: rgba(46,42,255,0.22);
}
.card h3 { color: #111111; }
.card p  { color: #555555; }
.card-icon {
  background: rgba(46,42,255,0.07);
  border-color: rgba(46,42,255,0.15);
}

/* ── 9. Service cards ── */
.svc-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.svc-card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
  border-color: rgba(46,42,255,0.25);
}
.svc-num   { color: rgba(46,42,255,0.55); }
.svc-title { color: #111111; }
.svc-desc  { color: #555555; }
.svc-list li { color: #555555; }

/* ── 10. Platform cards ── */
.plat-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.plat-name            { color: #111111; }
.plat-users           { color: #777777; }
.plat-desc            { color: #555555; }
.plat-best strong     { color: #111111; }
.plat-best span       { color: #555555; }

/* ── 11. Tags ── */
.tag {
  background: #edf0f7;
  color: #555555;
  border-color: rgba(0,0,0,0.1);
}
/* Coloured tag variants: text already has colour, just fix bg/border */
.tag-p, .tag-pk { background: #f2f3ff; border-color: rgba(46,42,255,0.2); }
.tag-t, .tag-g  { background: #f2f3ff; border-color: rgba(16,185,129,0.2); }
.tag-b          { background: #f2f3ff;  border-color: rgba(59,130,246,0.2); }
.tag-gold       { background: #f2f3ff;  border-color: rgba(245,158,11,0.2); }

/* ── 12. Content tabs ── */
.tab-btn {
  color: #555555;
  border-color: rgba(0,0,0,0.1);
  background: transparent;
}
.tab-btn:hover:not(.on) {
  color: #111111;
  border-color: rgba(0,0,0,0.2);
}
.tab-btn.on {
  background: rgba(46,42,255,0.07);
  border-color: rgba(46,42,255,0.35);
  color: #2E2AFF;
}
.tab-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.tc-title { color: #111111; }
.tc-desc  { color: #555555; }

/* Content calendar */
.cal-wrap { background: #ffffff; border-color: rgba(0,0,0,0.1); }
.cal-head-bar {
  color: #111111;
  border-bottom-color: rgba(0,0,0,0.1);
}
.cal-table th {
  background: #f5f6fa;
  color: #777777;
  border-bottom-color: rgba(0,0,0,0.1);
}
.cal-table td {
  color: #555555;
  border-bottom-color: rgba(0,0,0,0.05);
}
.cal-table td:first-child { color: #111111; }

/* ── 13. Analytics ── */
.kpi-item {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.kpi-name { color: #111111; }
.kpi-d    { color: #555555; }

.dash-mock {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.dm-header     { border-bottom-color: rgba(0,0,0,0.1); }
.dm-title      { color: #111111; }
.dm-metrics    { border-top-color: rgba(0,0,0,0.08); }
.dmm           { border-right-color: rgba(0,0,0,0.08); }
.dmm-l         { color: #888888; }
.dm-table th {
  background: #f5f6fa;
  color: #777777;
  border-bottom-color: rgba(0,0,0,0.1);
}
.dm-table td {
  color: #444444;
  border-bottom-color: rgba(0,0,0,0.05);
}

/* Stat banner */
.stat-banner {
  background: #f5f6fa;
  border-color: rgba(46,42,255,0.1);
}
.snum {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
}
.snum-l { color: #555555; }

/* Comparison table */
.cmp-table th {
  background: #f5f6fa;
  color: #777777;
  border-bottom-color: rgba(0,0,0,0.1);
}
.cmp-table td {
  color: #444444;
  border-bottom-color: rgba(0,0,0,0.05);
}
.cn { color: #bbbbbb !important; }

/* ── 14. Process steps ── */
.pstep-phase   { color: rgba(46,42,255,0.65); }
.pstep-title   { color: #111111; }
.pstep-desc    { color: #555555; }
.pstep-pt      { color: #555555; }
.pnum {
  background: #ffffff;
  border-color: rgba(46,42,255,0.4);
  color: #2E2AFF;
  box-shadow: 0 0 20px rgba(46,42,255,0.1);
}
.process-steps::before {
  background: linear-gradient(to bottom, #2E2AFF, rgba(46,42,255,0.06));
}

/* ── 15. Results / case study cards ── */
.result-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.result-card:hover { box-shadow: 0 20px 44px rgba(0,0,0,0.12); }
.rc-ind           { color: rgba(46,42,255,0.6); }
.rc-client        { color: #111111; }
.rc-challenge     { color: #555555; }
.rc-top           { border-bottom-color: rgba(0,0,0,0.08); }
.rc-nums          { border-bottom-color: rgba(0,0,0,0.08); }
.rcn-l            { color: #888888; }

/* ── 16. Testimonials ── */
.testi {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.testi-text { color: #555555; }
.tp-name    { color: #111111; }
.tp-role    { color: #777777; }

/* ── 17. Contact form ── */
.form-box {
  background: #ffffff;
  border-color: rgba(46,42,255,0.15);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.form-title { color: #111111; }
.fg label   { color: #666666; }
.fi {
  background: #f5f6fa;
  border-color: rgba(0,0,0,0.12);
  color: #111111;
}
.fi:focus {
  border-color: rgba(46,42,255,0.4);
  background: rgba(46,42,255,0.02);
}
.fi option { background: #ffffff; color: #111111; }
.bopt {
  color: #555555;
  border-color: rgba(0,0,0,0.12);
}
.bopt:hover {
  color: #2E2AFF;
  border-color: rgba(46,42,255,0.3);
}
.bopt.sel {
  color: #2E2AFF;
  background: rgba(46,42,255,0.08);
  border-color: rgba(46,42,255,0.3);
}
.ci-item {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
}
.ci-item:hover { border-color: rgba(46,42,255,0.2); }
.ci-label { color: #888888; }
.ci-val   { color: #2E2AFF; }

/* ── 18. FAQ (section-alt — dark bg, vars restored above) ── */
/* .faq-q & .faq-a use --card-bg & --text-muted — both restored for section-alt ✓ */

/* ── 19. Section borders ── */
section { border-top-color: rgba(0,0,0,0.08); }
/* Restore border color in dark sections */
.section-alt,
.sloc-section,
.marquee-section { border-top-color: rgba(255,255,255,0.07); }

/* ── 20. Hero dashboard card (dark section — vars already restored) ── */
/* metric labels, data-rows: use --text-muted var → white in hero ✓ */

/* ── 21. CTA strip text ── */
.cta-h   { color: #ffffff; }
.cta-sub { color: var(--text-muted); } /* var resolves to white in .cta-strip ✓ */

/* ── 22. Footer text ── */
.foot-logo  { color: var(--lime); }
.foot-desc  { color: var(--text-muted); }
.foot-col-title { color: rgba(255,255,255,0.28); }
.foot-bottom p  { color: rgba(255,255,255,0.28); }

/* ── 23. SEO intro & other white sections: override hardcoded dark text ── */
/* Inline-styled headings inside white bg sections inherit #111111 from body ✓ */
/* strong elements in white sections (explicit white inline style overrides) */
#seo-intro strong,
#why strong,
#platforms strong,
#services strong,
#content strong,
#analytics strong,
#process strong,
#results strong,
#testimonials strong,
#contact strong {
  color: #111111;
}
/* But keep colored strongs intact (they use explicit colors like green/lime) */
#seo-intro strong.text-111,
#why strong.text-2e2aff {
  /* inline style wins — handled by JS fix below */
}

/* ═══════════════════════════════════════════════════════════════════════
   CSS-ONLY INLINE OVERRIDE FIX
   The blocks above set colours without !important, so inline
   style="color:#fff" attributes on individual elements still win.
   The rules below use !important to guarantee readability on white
   backgrounds with ZERO JavaScript dependency.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A. White sections: override --lime so any inline color:var(--lime)
        resolves to readable blue (#2E2AFF) rather than invisible
        lime-yellow (#C8FF00) ── */
#seo-intro, #platforms, #content,
#analytics, #process, #reviews,
#quick-answers, #contact {
  --lime: #2E2AFF;
}

/* ── B. <strong> and <b> in white sections ──────────────────────────────
        The existing rule lacks !important so inline style="color:#fff"
        still wins.  !important beats any inline style. ── */
#seo-intro strong,  #seo-intro b,
#platforms strong,  #platforms b,
#content strong,    #content b,
#analytics strong,  #analytics b,
#process strong,    #process b,
#reviews strong,    #reviews b,
#quick-answers strong, #quick-answers b,
#contact strong,    #contact b {
  color: #111111 !important;
}

/* ── C. Table cells with inline color:#fff in the seo-intro service table ── */

/* ── D. Semi-transparent white text in white sections ───────────────────
        e.g. color:rgba(255,255,255,.3)  →  completely invisible on white.
        Target the attribute string; set a readable mid-grey. ── */

/* ── E. Near-invisible white border separators on seo-intro list items ──
        e.g. border-bottom:1px solid rgba(255,255,255,.04) ── */

/* ── F. seo-intro: table border separators also use rgba(255,255,255,.1) ── */

/* ── G. Analytics chart bars — make gradient visible on white background ── */
#analytics .bars .bar {
  background: linear-gradient(
    to top,
    rgba(46, 42, 255, 0.75),
    rgba(46, 42, 255, 0.12)
  ) !important;
}

/* ── H. Analytics live-dot stays visually consistent (now blue) ── */
#analytics .dm-dot {
  background: #2E2AFF !important;
}

/* ── I. Restore dark section strong/b — section-alt sections were already
        being partially fixed by the old rule. Ensure they stay white. ── */
.section-alt strong,
.section-alt b,
#hero strong,
#hero b {
  color: inherit !important;
}

/* ══════════════════════════════════════════════════════════════
   MASTER VISIBILITY & RESPONSIVENESS OVERHAUL
   Complete rewrite of the theming system for clarity and legibility
   ══════════════════════════════════════════════════════════════ */

/* ── 1. DARK SECTIONS: Explicit dark backgrounds + white text ── */
nav {
  background: #2E2AFF !important;
  color: #ffffff !important;
}
#hero {
  background: #2E2AFF !important;
  color: #ffffff !important;
}
.section-alt {
  background: #2E2AFF !important;
  color: #ffffff !important;
}
.marquee-section {
  background: #00033D !important;
  color: #ffffff !important;
}
.sloc-section {
  background: var(--dark) !important;
  color: #ffffff !important;
}
.cta-strip {
  background: var(--dark) !important;
  color: #ffffff !important;
}
footer {
  background: var(--dark) !important;
  color: #ffffff !important;
}
.mob-nav {
  background: rgba(0,3,61,0.98) !important;
  color: #ffffff !important;
}
.audit-modal {
  background: #0a1200 !important;
  color: #ffffff !important;
}

/* ── 2. DARK SECTION CSS VARIABLE SCOPE ── */
nav,
#hero,
.section-alt,
.marquee-section,
.sloc-section,
.cta-strip,
footer,
.mob-nav,
.audit-modal-overlay,
.audit-modal,
.float-audit {
  --lime: #C8FF00;
  --text-muted: rgba(255,255,255,0.65);
  --border: rgba(255,255,255,0.08);
  --card-bg: rgba(255,255,255,0.04);
  --card-bg2: rgba(255,255,255,0.07);
}

/* ── 3. LIGHT SECTIONS: White background + CSS variable scope ── */
#seo-intro,
#why,
#platforms,
#services,
#content,
#analytics,
#process,
#results,
#reviews,
#testimonials,
#quick-answers,
#faq,
#contact,
#industries-eeat {
  background: #f2f3ff !important;
  color: #111111 !important;
  border-top-color: rgba(0,0,0,0.08) !important;
  /* Remap all CSS variables to light-theme equivalents */
  --lime: #2E2AFF;
  --text-muted: #666666;
  --border: rgba(0,0,0,0.09);
  --card-bg: #ffffff;
  --card-bg2: #f0f2fb;
  --green: #0a9268;
  --gold: #c07700;
  --blue: #2E2AFF;
  --red: #c02020;
}

/* ── 4. LIGHT SECTION: Typography ── */
#seo-intro .section-title,
#why .section-title,
#platforms .section-title,
#services .section-title,
#content .section-title,
#analytics .section-title,
#process .section-title,
#results .section-title,
#reviews .section-title,
#testimonials .section-title,
#quick-answers .section-title,
#faq .section-title,
#contact .section-title,
#industries-eeat .section-title { color: #111111 !important; }

#seo-intro .section-title .lime,
#seo-intro .section-title .g,
#seo-intro .section-title .t,
#why .section-title .lime,
#why .section-title .g,
#why .section-title .t,
#platforms .section-title .lime,
#services .section-title .lime,
#content .section-title .lime,
#analytics .section-title .lime,
#process .section-title .lime,
#results .section-title .lime,
#reviews .section-title .lime,
#testimonials .section-title .lime,
#quick-answers .section-title .lime,
#faq .section-title .lime,
#contact .section-title .lime,
#industries-eeat .section-title .lime { color: #2E2AFF !important; }

.section-sub, .section-desc { color: #666666; }
.section-alt .section-sub, .section-alt .section-desc,
#hero .section-sub, #hero .section-desc { color: rgba(255,255,255,0.72) !important; }

/* ── 5. EYEBROW ── */
.eyebrow { color: #2E2AFF; }
.section-alt .eyebrow, #hero .eyebrow, .sloc-section .eyebrow,
footer .eyebrow, .cta-strip .eyebrow { color: var(--lime); }

/* ── 6. CARDS in light sections ── */
#seo-intro .card, #why .card, #platforms .plat-card,
#services .svc-card, #content .tab-card,
#analytics .metric, #process .result-card,
#results .result-card, #testimonials .testi,
#faq .faq-item, #contact .form-box, #contact .ci-item,
#industries-eeat .card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.09) !important;
}

#why .card h3, #services .svc-card .svc-title,
#content .tab-card .tc-title { color: #111111 !important; }
#why .card p, #services .svc-card .svc-desc,
#content .tab-card .tc-desc { color: #666666 !important; }

.svc-num { color: #2E2AFF !important; }
.svc-title { color: #111111 !important; }
.svc-desc { color: #666666 !important; }
.svc-list li { color: #666666 !important; }
.svc-list li::before { color: #2E2AFF !important; }

/* Platform cards */
#platforms .plat-name { color: #111111 !important; }
#platforms .plat-users { color: #888888 !important; }
#platforms .plat-desc { color: #666666 !important; }
#platforms .plat-best strong { color: #111111 !important; }
#platforms .plat-best span { color: #666666 !important; }

/* Process steps */
#process .pstep-phase { color: #2E2AFF !important; }
#process .pstep-title { color: #111111 !important; }
#process .pstep-desc { color: #666666 !important; }
#process .pstep-pt { color: #666666 !important; }
#process .pstep-pt::before { color: #2E2AFF !important; }
#process .ptime { color: #2E2AFF !important; background: rgba(46,42,255,0.08) !important; border-color: rgba(46,42,255,0.2) !important; }
#process .pstep-num { color: #2E2AFF !important; border-color: rgba(46,42,255,0.2) !important; background: rgba(46,42,255,0.06) !important; }

/* Results/case study cards */
#results .rc-ind { color: #2E2AFF !important; }
#results .rc-client { color: #111111 !important; }
#results .rc-challenge { color: #666666 !important; }
#results .rcn-v { color: #2E2AFF !important; }
#results .rcn-l { color: #888888 !important; }
#results .rc-top, #results .rc-nums { border-bottom-color: rgba(0,0,0,0.08) !important; }

/* Testimonials */
#testimonials .testi-text { color: #666666 !important; }
#testimonials .tp-name { color: #111111 !important; }
#testimonials .tp-role { color: #888888 !important; }
#testimonials .testi-result { color: #2E2AFF !important; background: rgba(46,42,255,0.07) !important; border-color: rgba(46,42,255,0.2) !important; }

/* FAQ */
.faq-q { background: #ffffff !important; color: #111111 !important; border: none !important; }
.faq-q:hover { background: #f0f2fb !important; }
.faq-a p { color: #555555 !important; }
.faq-arrow { color: #2E2AFF !important; }
#faq .faq-item { border-color: rgba(0,0,0,0.1) !important; background: #fff; }
#faq .faq-item.open { border-color: rgba(46,42,255,0.3) !important; }

/* Analytics section */
#analytics .dashboard-card, #analytics .dm-dash { background: #fff !important; border-color: rgba(0,0,0,0.1) !important; }
#analytics .dash-title { color: #888888 !important; }
#analytics .metric-label { color: #888888 !important; }
#analytics .metric-val { color: #2E2AFF !important; }
#analytics .metric { background: rgba(46,42,255,0.04) !important; border-color: rgba(46,42,255,0.12) !important; }
#analytics .metric-chg { color: #0a9268 !important; }
#analytics .dm-dot { background: #2E2AFF !important; }
#analytics .dash-live { color: #2E2AFF !important; }
#analytics .bars .bar { background: linear-gradient(to top, rgba(46,42,255,0.75), rgba(46,42,255,0.12)) !important; }
#analytics .dm-metrics .dmm-l { color: #888 !important; }
#analytics .dm-metrics .dmm-v { color: #2E2AFF !important; }
#analytics .dm-metrics .dmm-c { color: #0a9268 !important; }
#analytics .dm-table th { color: #888888 !important; background: #f0f2fb !important; border-bottom-color: rgba(0,0,0,0.1) !important; }
#analytics .dm-table td { color: #333333 !important; border-bottom-color: rgba(0,0,0,0.07) !important; }
#analytics .sta-a, #analytics .sta-g { /* keep colored tags */ }
#analytics .data-row { background: #f5f6fa !important; border-color: rgba(0,0,0,0.07) !important; }
#analytics .data-row .label { color: #666 !important; }
#analytics .data-row .val { color: #111 !important; }

/* Stat numbers */
#seo-intro .snum-v, #why .snum-v { color: #2E2AFF !important; }
#seo-intro .snum-l, #why .snum-l { color: #666666 !important; }
#seo-intro .snum, #why .snum { background: #fff !important; border-color: rgba(0,0,0,0.09) !important; }
#seo-intro .stat-banner { background: rgba(46,42,255,0.04) !important; border-color: rgba(46,42,255,0.14) !important; }

/* Comparison table */
#seo-intro .cmp-table th { background: #f0f2fb !important; color: #888888 !important; border-bottom-color: rgba(0,0,0,0.1) !important; }
#seo-intro .cmp-table td { color: #555555 !important; border-bottom-color: rgba(0,0,0,0.06) !important; }
#seo-intro .cmp-table tr:hover td { background: rgba(46,42,255,0.03) !important; }
#seo-intro .cy { color: #2E2AFF !important; }
#seo-intro .cn { color: #aaa !important; }
#seo-intro .cm { color: #c07700 !important; }

/* Content tabs */
#content .tab-btn { color: #555555 !important; background: #f0f2fb !important; border-color: rgba(0,0,0,0.1) !important; }
#content .tab-btn.on { background: #2E2AFF !important; color: #ffffff !important; border-color: #2E2AFF !important; }
#content .tab-btn:hover:not(.on) { background: #e0e4f8 !important; color: #111 !important; }
.tc-icon { color: #2E2AFF; }
#content .tc-title { color: #111111 !important; }
#content .tc-desc { color: #666666 !important; }
#content .tab-card { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; }
#content .tab-panel { border-color: rgba(0,0,0,0.09) !important; background: transparent !important; }

/* Calendar */
#content .cal-head-bar { background: #2E2AFF !important; color: #ffffff !important; }
#content .cal-table { background: #fff !important; }
#content .cal-table th { background: #f0f2fb !important; color: #888 !important; border-color: rgba(0,0,0,0.1) !important; }
#content .cal-table td { color: #555555 !important; border-color: rgba(0,0,0,0.07) !important; }
#content .cal-wrap { background: #fff !important; border-color: rgba(0,0,0,0.09) !important; }

/* Contact form */
#contact .form-box { background: #ffffff !important; border-color: rgba(46,42,255,0.14) !important; }
#contact .form-title { color: #111111 !important; }
#contact .fg label { color: #888888 !important; }
#contact .fi { background: #f5f6fa !important; border-color: rgba(0,0,0,0.12) !important; color: #111111 !important; }
#contact .fi::placeholder { color: #aaaaaa !important; }
#contact .fi option { background: #fff !important; color: #111 !important; }
#contact .ci-label { color: #888888 !important; }
#contact .ci-val { color: #2E2AFF !important; }
#contact .ci-item { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; }
#contact .bopt { color: #555555 !important; border-color: rgba(0,0,0,0.12) !important; background: #fff !important; }
#contact .bopt.sel { background: rgba(46,42,255,0.08) !important; border-color: rgba(46,42,255,0.35) !important; color: #2E2AFF !important; }

/* ── 7. INLINE STYLE COLOR OVERRIDES (light sections) ── */
/* Color #fff / white → dark heading */


/* rgba(255,255,255,*) text → readable gray */

/* Heading elements always dark in light sections */
#seo-intro h1, #seo-intro h2, #seo-intro h3, #seo-intro h4,
#why h1, #why h2, #why h3, #why h4,
#platforms h1, #platforms h2, #platforms h3, #platforms h4,
#services h1, #services h2, #services h3, #services h4,
#content h1, #content h2, #content h3, #content h4,
#analytics h1, #analytics h2, #analytics h3, #analytics h4,
#process h1, #process h2, #process h3, #process h4,
#results h1, #results h2, #results h3, #results h4,
#reviews h1, #reviews h2, #reviews h3, #reviews h4,
#testimonials h1, #testimonials h2, #testimonials h3, #testimonials h4,
#quick-answers h1, #quick-answers h2, #quick-answers h3, #quick-answers h4,
#faq h1, #faq h2, #faq h3, #faq h4,
#contact h1, #contact h2, #contact h3, #contact h4,
#industries-eeat h1, #industries-eeat h2, #industries-eeat h3, #industries-eeat h4 {
  color: #111111 !important;
}

/* Paragraph/span text in light sections */
#seo-intro p, #why p, #platforms p, #services p, #content p,
#analytics p, #process p, #results p, #reviews p, #testimonials p,
#quick-answers p, #faq p, #contact p, #industries-eeat p { color: #555555; }

/* Border fixes: rgba(255,255,255,*) → dark border */

/* border-bottom with rgba(255,255,255) */

/* Card background: rgba(255,255,255, very low alpha) → solid white */

/* Divider gradient lines using lime → use blue */

/* ── 8. WHY-GRID CARDS ── */
#why .card { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; }
#why .card .card-icon { background: rgba(46,42,255,0.08) !important; border-color: rgba(46,42,255,0.18) !important; }
#why .card h3 { color: #111111 !important; }
#why .card p { color: #666666 !important; }
#why .card .tag { color: #555 !important; background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.1) !important; }
#why .card .tag-p, #why .card .tag-pk { color: #2E2AFF !important; background: rgba(46,42,255,0.08) !important; border-color: rgba(46,42,255,0.2) !important; }
#why .card .tag-t, #why .card .tag-g { color: #0a9268 !important; background: rgba(10,146,104,0.08) !important; border-color: rgba(10,146,104,0.2) !important; }
#why .card .tag-b { color: #1a5fc0 !important; background: rgba(26,95,192,0.08) !important; border-color: rgba(26,95,192,0.2) !important; }
#why .card .tag-gold { color: #c07700 !important; background: rgba(192,119,0,0.08) !important; border-color: rgba(192,119,0,0.2) !important; }
#why .card .card-top-line { background: linear-gradient(90deg,transparent,#2E2AFF,transparent) !important; }

/* ── 9. SERVICES SECTION ── */
#services .svc-card::after { background: linear-gradient(90deg,transparent,#2E2AFF,transparent) !important; }
#services .svc-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important; border-color: rgba(46,42,255,0.2) !important; }

/* ── 10. PLATFORMS SECTION ── */
#platforms .plat-card:hover { box-shadow: 0 20px 44px rgba(0,0,0,0.12) !important; border-color: rgba(46,42,255,0.18) !important; }
#platforms .plat-tags .tag { color: #555 !important; border-color: rgba(0,0,0,0.1) !important; background: #f0f2fb !important; }
#platforms .plat-tags .tag-p { color: #2E2AFF !important; background: rgba(46,42,255,0.08) !important; border-color: rgba(46,42,255,0.2) !important; }

/* ── 11. CARD HOVER EFFECTS in light sections ── */
#seo-intro .card:hover,
#why .card:hover,
#platforms .plat-card:hover,
#services .svc-card:hover,
#results .result-card:hover,
#testimonials .testi:hover,
#industries-eeat :is(.industries-eeat-card, .industries-eeat-card-2):hover,
#industries-eeat .industries-eeat-row:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important; }

/* ── 12. INDUSTRIES SECTION inline card styles ── */
#industries-eeat :is(.industries-eeat-text-3, .industries-eeat-text-6) { color: #111111 !important; }
#industries-eeat .industries-eeat-eyebrow.industries-eeat-eyebrow { color: #2E2AFF !important; }
#industries-eeat .industries-eeat-card-2 { background: rgba(46,42,255,0.05) !important; }
#industries-eeat .eyebrow { color: #2E2AFF !important; }

/* Explore More links */

/* ── 13. HERO SECTION: Keep white text ── */
#hero .hero-h1, #hero .hstat-n,
.section-alt h2, .section-alt h3, .section-alt .section-title { color: #ffffff !important; }
#hero .hero-badge { color: #C8FF00 !important; }
#hero .hero-sub { color: rgba(255,255,255,0.78) !important; }
#hero .hstat-l { color: rgba(255,255,255,0.5) !important; }
#hero .hero-h1 .line2 { color: #C8FF00 !important; }
#hero .hstat-n .sup { color: #C8FF00 !important; }
#hero .dash-title { color: rgba(255,255,255,0.4) !important; }
#hero .dash-live { color: #C8FF00 !important; }
#hero .metric-label { color: rgba(255,255,255,0.4) !important; }
#hero .metric-val { color: #C8FF00 !important; }
#hero .metric-chg { color: #10b981 !important; }
#hero .data-row .label { color: rgba(255,255,255,0.6) !important; }
#hero .data-row .val { color: #fff !important; }
#hero .data-row { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.07) !important; }
#hero .metric { background: rgba(46,42,255,0.12) !important; border-color: rgba(255,255,255,0.1) !important; }
#hero .dashboard-card { background: rgb(0 0 0 / 55%) !important; border-color: rgba(255,255,255,0.12) !important; }

/* ── 14. PACKAGES (section-alt) ── */
.section-alt .pkg { background: rgba(255,255,255,30%) !important; border-color: rgba(255,255,255,0.1) !important; color: #fff !important; }
.section-alt .pkg .pkg-name { color: #fff !important; }
.section-alt .pkg .pkg-price { color: #C8FF00 !important; }
.section-alt .pkg .pkg-desc { color: rgba(255,255,255,0.7) !important; }
.section-alt .pkg .pkg-feats li { color: rgba(255,255,255,0.75) !important; }
.section-alt .pkg .pkg-feats li::before { color: #C8FF00 !important; }
.section-alt .pkg .pkg-feats li.na { color: rgba(255,255,255,0.25) !important; }
.section-alt .pkg .pkg-feats li.na::before { color: rgba(255,255,255,0.2) !important; }
.section-alt .pkg .pkg-tier { color: rgba(255,255,255,0.35) !important; }
.section-alt .pkg .pkg-plats { color: rgba(255,255,255,0.6) !important; }

/* ── 15. CTA STRIP ── */
.cta-strip .cta-h { color: #ffffff !important; }
.cta-strip .cta-sub { color: rgba(255,255,255,0.65) !important; }

/* ── 16. FOOTER ── */
footer .foot-logo { color: #C8FF00 !important; }
footer .foot-desc { color: white !important; }
footer .foot-col-title { color: white !important; }
footer .foot-links a { color: rgba(255,255,255,0.55) !important; }
footer .foot-links a:hover { color: #C8FF00 !important; }
footer .foot-bottom p { color: white !important; }

/* ── 17. MARQUEE CHIPS ── */
.marquee-section .mchip { color: rgba(255,255,255,0.6) !important; background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.08) !important; }

/* ── 18. NAV RESTORE ── */
nav .nav-logo { color: #C8FF00 !important; }
nav .nav-links a { color: rgba(255,255,255,0.78) !important; }
nav .nav-links a.nav-cta { background: #C8FF00 !important; color: #030303 !important; }

/* ── 19. MOBILE NAV ── */
.mob-nav a { color: rgba(255,255,255,0.75) !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
.mob-nav a:hover { color: #C8FF00 !important; }

/* ── 20. SLOC (Locations) SECTION ── */
.sloc-heading { color: #ffffff !important; }
.sloc-heading-lime { color: #C8FF00 !important; }
.sloc-header-desc { color: rgba(255,255,255,0.65) !important; }
.sloc-stat-mini-num { color: #ffffff !important; }
.sloc-stat-mini-num span { color: #C8FF00 !important; }
.sloc-stat-mini-lbl { color: rgba(255,255,255,0.4) !important; }
.sloc-svc-label { color: rgba(255,255,255,0.75) !important; }
.sloc-svc-btn.active .sloc-svc-label { color: #fff !important; }
.sloc-svc-desc-name { color: #ffffff !important; }
.sloc-svc-desc-eyebrow { color: rgba(255,255,255,0.4) !important; }
.sloc-world-title { color: #ffffff !important; }
.sloc-world-sub { color: rgba(255,255,255,0.65) !important; }
.sloc-link-city { color: rgba(255,255,255,0.88) !important; }
.sloc-link-country { color: rgba(255,255,255,0.38) !important; }

/* ── 21. QUICK-ANSWERS SECTION ── */
#quick-answers .faq-q { color: #111111 !important; background: #fff !important; }
#quick-answers .faq-a p { color: #555555 !important; }

/* ── 22. RESPONSIVE IMPROVEMENTS ── */

/* Fix 4-column keyword grid to stack on mobile */
@media (max-width: 767px) {
  /* seo-intro grids */
        /* industries-eeat stacking */
  #industries-eeat :is(.industries-eeat-grid, .industries-eeat-grid-2),
#industries-eeat :is(.industries-eeat-grid, .industries-eeat-grid-2) {
    grid-template-columns: 1fr !important;
  }
  /* general 2-col grids in light sections */
  
  /* Reduce section padding on mobile */
  .sloc-section { padding: 48px 16px 64px !important; }
  .sloc-header { grid-template-columns: 1fr !important; gap: 20px !important; margin-bottom: 36px !important; }
  .sloc-body { grid-template-columns: 1fr !important; }
  .sloc-services-sidebar { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; }
  .sloc-svc-btn { flex: 1 1 calc(50% - 4px) !important; min-width: 140px !important; }
  .sloc-world-strip { flex-direction: column !important; padding: 20px !important; gap: 20px !important; }
  
  /* Nav padding */
  nav { padding: 12px 16px !important; }
  
  /* Hero */
  #hero { padding-top: calc(60px + 32px) !important; padding-bottom: 40px !important; }
  .hero-h1 { font-size: clamp(32px, 10vw, 52px) !important; }
  .hero-stats { gap: 8px !important; }
  .hstat-n { font-size: 20px !important; }
  .hstat-l { font-size: 10px !important; }
  
  /* Packages */
  .pkg-grid { grid-template-columns: 1fr !important; }
  
  /* Stat banner 2-col → 1-col */
  .stat-banner { grid-template-columns: 1fr !important; }
  
  /* Content calendar scroll */
  .cal-scroll { overflow-x: auto !important; }
  
  /* Footer grid */
  .foot-inner { grid-template-columns: 1fr !important; }
}

@media (max-width: 540px) {
    .sloc-svc-btn { flex: 1 1 100% !important; }
  .sloc-link-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Medium screen improvements */
@media (max-width: 900px) {
  #industries-eeat > .wrap > .reveal,
#industries-eeat .industries-eeat-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  }

/* ── 23. SCROLL REVEAL: ensure visible on noscript / fallback ── */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── 24. FBADS section (section-alt) ── */
.section-alt .fbads-inner { color: #ffffff; }
.section-alt .fbads-h { color: #ffffff !important; }
.section-alt .fbads-h .lime { color: #C8FF00 !important; }
.section-alt .fb-stats .fbs-n { color: #C8FF00 !important; }
.section-alt .fb-stats .fbs-l { color: rgba(255,255,255,0.6) !important; }
.section-alt .fbf-title { color: #ffffff !important; }
.section-alt .fbf-desc { color: rgba(255,255,255,0.7) !important; }

/* ── 25. GENERAL CARD TOP LINE → Blue in light sections ── */
#seo-intro .card .card-top-line,
#why .card .card-top-line,
#services .svc-card::after,
#results .result-card,
#testimonials .testi {
  /* transitions already handled above */
}
#services .svc-card { box-shadow: none !important; }
#services .svc-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important; }

/* ── 26. FORM INPUT FOCUS STATES ── */
#contact .fi:focus { border-color: rgba(46,42,255,0.45) !important; background: rgba(46,42,255,0.03) !important; }
#contact .fi option { background: #ffffff !important; color: #111111 !important; }

/* ── 27. WHY SECTION - comparison table in stat-banner ── */
.stat-banner .stat-nums .snum { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; }
.stat-banner .stat-nums .snum-v { color: #2E2AFF !important; }
.stat-banner .stat-nums .snum-l { color: #666666 !important; }

/* ── 28. PROCESS SECTION connector line ── */
#process .pstep-line { background: rgba(46,42,255,0.15) !important; }
#process .pstep-num { color: #2E2AFF !important; border-color: rgba(46,42,255,0.2) !important; background: rgba(46,42,255,0.06) !important; }

/* ── 29. FIX NOISE OVERLAY on body ── */
body::before {
  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='0.4'/%3E%3C/svg%3E");
  opacity: .04 !important; /* reduce grain on white bg */
}

/* Restore stronger grain on dark sections */
#hero body::before, .section-alt body::before { opacity: 0.10 !important; }

/* ── 30. ACCESSIBILITY: Focus styles ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #2E2AFF;
  outline-offset: 2px;
}

/* ── 31. OVERFLOW FIX on mobile ── */
html, body { overflow-x: hidden !important; }
.wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

/* ── 32. TAG VISIBILITY in light sections ── */
#why .tag, #platforms .tag, #results .tag {
  background: #f0f2fb !important;
  color: #555555 !important;
  border-color: rgba(0,0,0,0.1) !important;
}
#why .tag-p, #why .tag-pk,
#platforms .tag-p, #platforms .tag-pk,
#results .tag-p, #results .tag-pk {
  background: rgba(46,42,255,0.08) !important;
  color: #2E2AFF !important;
  border-color: rgba(46,42,255,0.2) !important;
}
#why .tag-t, #why .tag-g,
#platforms .tag-t, #platforms .tag-g,
#results .tag-t, #results .tag-g {
  background: rgba(10,146,104,0.08) !important;
  color: #0a9268 !important;
  border-color: rgba(10,146,104,0.2) !important;
}
#why .tag-b,
#platforms .tag-b,
#results .tag-b {
  background: rgba(26,95,192,0.08) !important;
  color: #1a5fc0 !important;
  border-color: rgba(26,95,192,0.2) !important;
}
#results .tag-gold {
  background: rgba(192,119,0,0.08) !important;
  color: #c07700 !important;
  border-color: rgba(192,119,0,0.2) !important;
}

/* ══════════════════════════════════════════════════════
   COPYWRITING — COMPONENT ADDITIONS
   ══════════════════════════════════════════════════════ */
:root {
  --cw-a: #ff4d6d;
  --cw-b: #ffa62b;
  --cw-grad: linear-gradient(90deg,#ff4d6d,#ff7a45,#ffa62b);
}

/* Before / after copy comparison (hero) */
.cw-ab { display: grid; gap: 10px; margin-top: 14px; }
.cw-ab-row {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: rgba(255,255,255,.04);
}
.cw-ab-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 6px; display: block;
}
.cw-ab-before .cw-ab-tag { color: #ff8f8f; }
.cw-ab-after  .cw-ab-tag { color: var(--lime); }
.cw-ab-copy { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.9); line-height: 1.5; }
.cw-ab-note { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 6px; }
.cw-ab-after { border-color: rgba(200,255,0,.28); background: rgba(200,255,0,.06); }

/* Response ladder */
.cw-ladder { display: grid; gap: 12px; margin-top: 8px; }
.cw-rung {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center;
  background: var(--card-bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; transition: border-color .2s, transform .2s;
}
.cw-rung:hover { border-color: rgba(255,77,109,.4); transform: translateX(4px); }
.cw-rung-n {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; color: #2a0a10; background: var(--cw-grad); flex-shrink: 0;
}
.cw-rung-t { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.cw-rung-d { font-size: 12.5px; color: var(--text-muted); line-height: 1.65; }
.cw-rung-m { font-size: 11px; font-weight: 800; color: var(--lime); white-space: nowrap; }

/* Voice-of-customer chips */
.cw-chip-wrap { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.cw-chip {
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.62);
  border: 1px solid var(--border); border-radius: 100px; padding: 5px 13px;
  background: rgba(255,255,255,.03);
}
.cw-chip strong { color: var(--lime); font-weight: 800; }

/* Response signal meters */
.cw-signals { display: grid; gap: 10px; }
.cw-signal { background: var(--card-bg2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.cw-signal-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cw-signal-name { font-size: 12.5px; font-weight: 800; color: #fff; }
.cw-signal-w { font-size: 11px; font-weight: 800; color: var(--lime); }
.cw-signal-track { height: 6px; border-radius: 100px; background: rgba(255,255,255,.07); overflow: hidden; }
.cw-signal-fill { height: 100%; border-radius: 100px; background: var(--cw-grad); }
.cw-signal-d { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; margin-top: 8px; }

/* Headline anatomy 4-up */
.cw-anatomy { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 16px; }
.cw-beat {
  background: var(--card-bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 15px; border-top: 3px solid var(--cw-a);
}
.cw-beat-t { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); margin-bottom: 6px; }
.cw-beat-h { font-size: 12.5px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.cw-beat-d { font-size: 11px; color: var(--text-muted); line-height: 1.6; }

@media (max-width: 860px) { .cw-anatomy { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px) {
  .cw-rung { grid-template-columns: 38px 1fr; }
  .cw-rung-m { grid-column: 2; }
}

/* ══════════════════════════════════════════════════════════════════
   READABILITY LAYER
   Section IDs on this page are deliberately aligned to the inherited
   light-theme override list, so every white section is styled correctly
   without remapping. #framework and #packages are the blue accent bands.
   What remains: custom components on white, type scale and contrast.
   ══════════════════════════════════════════════════════════════════ */

/* ── Custom components on the light ground (#seo-intro) ── */
#seo-intro .cw-signal {
  background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
#seo-intro .cw-signal-name  { color: #111111 !important; }
#seo-intro .cw-signal-w     { color: #2E2AFF !important; }
#seo-intro .cw-signal-d     { color: #555555 !important; }
#seo-intro .cw-signal-track { background: rgba(0,0,0,0.07) !important; }
#seo-intro .cw-signals > div:first-child { color: #2E2AFF !important; }

#seo-intro .cw-beat {
  background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
#seo-intro .cw-beat-t { color: #2E2AFF !important; }
#seo-intro .cw-beat-h { color: #111111 !important; }
#seo-intro .cw-beat-d { color: #555555 !important; }

#seo-intro .cw-chip {
  color: #4b5563 !important; background: #f5f6fa !important; border-color: rgba(0,0,0,0.1) !important;
}
#seo-intro .cw-chip strong { color: #2E2AFF !important; }

/* ── Type scale — minimum comfortable reading size ── */
:is(.industries-eeat-eyebrow, .quick-answers-eyebrow, .quick-answers-eyebrow-2, .quick-answers-eyebrow-3, .quick-answers-eyebrow-4, .quick-answers-eyebrow-5, .quick-answers-eyebrow-6)   { font-size: 11.5px !important; }
:is(.contact-eyebrow, .packages-eyebrow, .seo-intro-eyebrow) { font-size: 11.5px !important; }
:is(.footer-row-2, .footer-text, .industries-eeat-text-8)   { font-size: 12.5px !important; }
:is(.contact-text-2, .industries-eeat-text-4, .packages-text-2, .packages-text-3) { font-size: 13px !important; }
.industries-eeat-text-7   { font-size: 13px !important; }
.seo-intro-text-4 { font-size: 13.5px !important; }
:is(.footer-row-3, .industries-eeat-text-3, .industries-eeat-text-6, .packages-text, .quick-answers-text)   { font-size: 14px !important; }
:is(.seo-intro-text-3, .seo-intro-text-7) { font-size: 14.5px !important; }

.plat-desc, .tc-desc, .svc-desc, .pstep-desc, .kpi-d,
.cw-signal-d, .cw-beat-d, .cw-rung-d, .rc-challenge {
  font-size: 13.5px !important; line-height: 1.72 !important;
}
.plat-best span, .svc-list li, .pkg-feats li, .pstep-pt { font-size: 13px !important; line-height: 1.65 !important; }
.plat-name, .tc-title, .svc-title, .cw-signal-name, .cw-beat-h, .cw-rung-t { font-size: 14.5px !important; }
.plat-users { font-size: 12.5px !important; }
.tag, .cw-chip, .mchip { font-size: 12px !important; }
.cal-table th { font-size: 12px !important; }
.cal-table td { font-size: 13px !important; }
.dm-table th  { font-size: 11.5px !important; }
.dm-table td  { font-size: 12.5px !important; }
.cmp-table th { font-size: 12.5px !important; }
.cmp-table td { font-size: 13.5px !important; line-height: 1.6 !important; }
.faq-q { font-size: 14.5px !important; }
.faq-a p { font-size: 14px !important; line-height: 1.8 !important; }
.metric-label { font-size: 11.5px !important; }
.metric-val   { font-size: 17px !important; }
.cw-ab-copy   { font-size: 13.5px !important; }
.foot-desc, .foot-links a { font-size: 13px !important; line-height: 1.75 !important; }
.foot-col-title { font-size: 12px !important; }
.foot-bottom p  { font-size: 12.5px !important; line-height: 1.7 !important; }

/* ── Contrast — WCAG AA on both grounds ── */

.section-alt, #hero, .sloc-section, .cta-strip, footer, .marquee-section,
nav, .mob-nav, .audit-modal, .float-audit { --text-muted: rgba(255,255,255,0.78); }

.section-alt .packages-text-3 { color: rgba(255,255,255,0.76) !important; }

.foot-col-title, .foot-bottom p { color: rgba(255,255,255,0.74) !important; }
.foot-links a { color: rgba(255,255,255,0.78) !important; }
.foot-links a:hover { color: var(--lime) !important; }
footer address span, footer address a { color: rgba(255,255,255,0.82) !important; }
.addons p, .pkg-desc, .pkg-plats { color: rgba(255,255,255,0.78) !important; }

.section-sub, .section-desc { color: #5a616e !important; }
/* Guard: if a light section ever carries .section-alt, keep its subtitle dark */
#seo-intro .section-sub, #why .section-sub, #platforms .section-sub,
#services .section-sub,  #content .section-sub, #analytics .section-sub,
#process .section-sub,   #results .section-sub, #reviews .section-sub,
#quick-answers .section-sub, #faq .section-sub, #contact .section-sub,
#industries-eeat .section-sub { color: #5a616e !important; }

/* ── Micro-label contrast in light sections ── */
#quick-answers .quick-answers-eyebrow-4 { color: #0b6d8c !important; }
#quick-answers .quick-answers-eyebrow-6 { color: #0a7350 !important; }
#quick-answers .quick-answers-eyebrow-5 { color: #935d00 !important; }
#quick-answers .quick-answers-eyebrow-3 { color: #6b32b8 !important; }
#quick-answers .quick-answers-eyebrow-2 { color: #b52d2d !important; }

/* ── Pricing rows & status text on the blue bands ── */
.section-alt .pkg .pkg-feats li.na { color: rgba(255,255,255,0.52) !important; }
.section-alt .pkg .pkg-feats li.na::before { color: rgba(255,255,255,0.45) !important; }
.section-alt .pkg .pkg-tier { color: rgba(255,255,255,0.66) !important; }
.section-alt .text-f87171 { color: #ffb4b4 !important; }

/* ── Measure & rhythm ── */
#seo-intro .section-desc, #why .section-sub, #platforms .section-sub,
#services .section-sub, #content .section-sub, #packages .section-sub,
#process .section-sub, #results .section-sub, #reviews .section-sub,
#faq .section-sub, #quick-answers .section-sub, #analytics .section-sub,
#framework .section-sub { max-width: 72ch; }
.faq-a p { max-width: 82ch; }
.section-title { line-height: 1.12 !important; }
.svc-list li + li, .pkg-feats li + li { margin-top: 2px; }

/* Headline lines are set as blocks; nowrap is only safe while a line stays
   narrower than the hero's first grid column, otherwise it widens the column
   and pushes the visual out of the viewport. Capped and guarded here. */
@media (min-width: 1100px) {
  #hero .hero-h1 { font-size: clamp(34px, 4.4vw, 56px) !important; }
  #hero .hero-h1 .line2, #hero .hero-h1 .line3 { white-space: nowrap; }
  #hero .hero-h1 .line1 { white-space: normal; }
}
#hero .hero-inner { max-width: 100%; }
#hero .hero-inner > div { min-width: 0; }
@media (max-width: 720px) {
  .section-title { line-height: 1.16 !important; }
  .plat-desc, .tc-desc, .svc-desc, .kpi-d { font-size: 14px !important; }
  .cmp-table td, .cal-table td { font-size: 13.5px !important; }
}

/* ==========================================================================
   2. DD-RESPONSIVE-FIX:START — mobile/tablet only (max-width: 900px); desktop layout is untouched
   Every declaration is !important.
   ========================================================================== */
/* Layout fixes */
/* split-layout-115: Inline 1.15fr/.85fr article+aside grid never collapses; article text squeezed to ~120px and aside cut off. */
@media (max-width: 600px) {
  html body .seo-intro-grid-2,
html body .seo-intro-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Readability: minimum text sizes */
@media (max-width: 600px) {
  html body span.hstat-l,
  html body div.dash-live,
  html body span.cw-ab-tag,
  html body div.cw-beat-t,
  html body div.svc-num,
  html body div.fb-formats-label,
  html body div.dmm-l,
  html body div.pkg-tier,
  html body div.pkg-pop,
  html body div.pstep-phase,
  html body div.rc-ind,
  html body span.rcn-l,
  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 span.dash-title,
  html body div.cw-ab-note,
  html body div.metric-chg,
  html body span.cw-signal-w,
  html body span.snum-l,
  html body span.fbs-l,
  html body div.cw-rung-m,
  html body div.adm-type,
  html body span.adm-roas,
  html body span.kpi-tgt,
  html body div.dmm-c,
  html body span.sta-a,
  html body span.sta-g,
  html body div.ptime,
  html body div.testi-result,
  html body div.tp-role,
  html body div.sloc-stat-mini-lbl,
  html body div.sloc-link-country { font-size: 11.5px !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  html body div.dash-live,
  html body span.cw-ab-tag,
  html body div.cw-beat-t,
  html body div.svc-num,
  html body div.fb-formats-label,
  html body div.dmm-l,
  html body div.pkg-tier,
  html body div.pkg-pop,
  html body div.pstep-phase,
  html body div.rc-ind,
  html body span.rcn-l,
  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 span.dash-title,
  html body div.cw-ab-note,
  html body div.metric-chg,
  html body span.cw-signal-w,
  html body span.snum-l,
  html body span.fbs-l,
  html body div.cw-rung-m,
  html body div.adm-type,
  html body span.adm-roas,
  html body span.kpi-tgt,
  html body div.dmm-c,
  html body span.sta-a,
  html body span.sta-g,
  html body div.ptime,
  html body div.testi-result,
  html body div.tp-role,
  html body div.sloc-stat-mini-lbl,
  html body div.sloc-link-country { font-size: 11.5px !important; }
}

/* ==========================================================================
   3. 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.
   ========================================================================== */

/* ── Page-level ── */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px}
.skip-link:not(:focus){overflow:hidden}
.skip-link:focus{position:fixed;top:10px;left:10px;background:var(--lime);color:#030303;padding:10px 18px;border-radius:8px;font-weight:800;font-size:13px;z-index:9999;width:auto;height:auto}

/* ── #auditmodal ── */
.auditmodal-title{font-size:36px;margin-bottom:12px}
textarea.auditmodal-field{width:100%;padding:14px 18px;background:#00033D;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#fff;font-family:'Manrope',sans-serif;font-size:14px;outline:none;resize:none;transition:border-color .2s}

/* ── #cw-budget ── */
.text-555{color:#555}

/* ── #main-content ── */
#hero.border-t-none{border-top:none}
.border-t-1-solid-var-border{border-top:1px solid var(--border)}

/* ── #hero ── */
#hero .text-black{color:#000}
.bg-rgb-255-77-109-7{background:rgba(255,77,109,.7)}
.bg-rgb-255-122-69-6{background:rgba(255,122,69,.6)}
.bg-rgb-255-166-43-6{background:rgba(255,166,43,.6)}
.ml-6{margin-left:6px}
.mt-16{margin-top:16px}
.mt-12{margin-top:12px}

/* ── #seo-intro ── */
.seo-intro-title{max-width:820px;margin-bottom:8px}
#seo-intro .seo-intro-text{max-width:880px;margin-bottom:26px}
a.seo-intro-link{color:#2E2AFF;text-decoration:none;font-weight:700}
.seo-intro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-bottom:30px}
.seo-intro-card{background:var(--card-bg2);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.seo-intro-text-2{font-size:20px;margin-bottom:8px}
.seo-intro-text-3{font-size:13.5px;font-weight:800;margin-bottom:6px;color:#111}
.seo-intro-text-4{font-size:12.5px;color:#555;line-height:1.7}
.seo-intro-grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.seo-intro-title-2{font-size:clamp(18px,3.4vw,22px);font-weight:900;color:#111;margin-bottom:12px}
#seo-intro .seo-intro-text-5{font-size:14px;color:#4b5563;line-height:1.8;margin-bottom:14px}
#seo-intro .seo-intro-text-6{font-size:14px;color:#4b5563;line-height:1.8}
.seo-intro-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:2px}
.w-96pct{width:96%}
.w-89pct{width:89%}
.w-78pct{width:78%}
.w-73pct{width:73%}
.w-16pct{width:16%}
.mt-34{margin-top:34px}
.seo-intro-title-3{font-size:clamp(17px,3.2vw,20px);font-weight:900;color:#111;margin-bottom:6px}
#seo-intro .seo-intro-text-7{font-size:13.5px;color:#4b5563;line-height:1.75;max-width:760px}

/* ── #why ── */
.why-title{font-size:clamp(18px,4vw,22px);font-weight:900;margin-bottom:12px;color:#111}
#why .why-text{font-size:14px;color:#4b5563;line-height:1.78;margin-bottom:12px}
#why .why-text-2{font-size:14px;color:#4b5563;line-height:1.78}
#why .text-2e2aff{color:#2E2AFF}
.mb-48{margin-bottom:48px}
.why-title-2{font-size:clamp(20px,4vw,26px);font-weight:900;margin-bottom:16px;color:#111}

/* ── Shared (used in several sections) ── */
a.link{color:#2E2AFF;text-decoration:none}

/* ── #platforms ── */
.platforms-gradient{background:linear-gradient(90deg,#ff4d6d,#ffa62b)}
.bg-rgb-255-77-109-15{background:rgba(255,77,109,.15)}
.platforms-gradient-2{background:linear-gradient(90deg,#4285f4,#34a853)}
.bg-rgb-66-133-244-15{background:rgba(66,133,244,.15)}
.platforms-gradient-3{background:linear-gradient(90deg,#1877f2,#e1306c)}
.bg-rgb-225-48-108-15{background:rgba(225,48,108,.15)}
.platforms-gradient-4{background:linear-gradient(90deg,#ffa62b,#ff7a45)}
.bg-rgb-255-166-43-15{background:rgba(255,166,43,.15)}
.platforms-gradient-5{background:linear-gradient(90deg,#ff4d6d,#833ab4)}
.bg-rgb-131-58-180-16{background:rgba(131,58,180,.16)}
.platforms-gradient-6{background:linear-gradient(90deg,#2E2AFF,#5e9cf5)}
.platforms-gradient-7{background:linear-gradient(90deg,#10b981,#34d399)}
.platforms-gradient-8{background:linear-gradient(90deg,#ff0050,#ffa62b)}
.bg-rgb-255-0-80-14{background:rgba(255,0,80,.14)}
.platforms-gradient-9{background:linear-gradient(90deg,#C8FF00,#10b981)}
.bg-rgb-200-255-0-14{background:rgba(200,255,0,.14)}

/* ── #content ── */
.mt-40{margin-top:40px}

/* ── #framework ── */
.framework-text{font-size:14.5px;color:var(--text-muted);line-height:1.8;margin-bottom:24px;max-width:440px}
.text-green{color:var(--green)}
.framework-row{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.bg-rgb-255-77-109-18{background:rgba(255,77,109,.18)}
.framework-gradient{background:linear-gradient(135deg,rgba(255,77,109,.14),rgba(255,166,43,.06))}
.framework-btn{background:#ff4d6d;color:#fff}
.bg-rgb-255-166-43-18{background:rgba(255,166,43,.18)}
.framework-gradient-2{background:linear-gradient(135deg,rgba(255,166,43,.14),rgba(46,42,255,.05))}
.framework-btn-2{background:#ffa62b;color:#241000}
.bg-rgb-239-68-68-18{background:rgba(239,68,68,.18)}
.framework-gradient-3{background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(255,77,109,.06))}
.text-f87171{color:#f87171}
.framework-btn-3{background:#ef4444;color:#fff}

/* ── #analytics ── */
.analytics-gradient{height:24%;background:linear-gradient(to top,#ef4444,rgba(239,68,68,.2))}
.analytics-gradient-2{height:33%;background:linear-gradient(to top,#f59e0b,rgba(245,158,11,.2))}
.analytics-gradient-3{height:45%;background:linear-gradient(to top,#f59e0b,rgba(255,122,69,.25))}
.analytics-gradient-4{height:57%;background:linear-gradient(to top,var(--lime),rgba(255,77,109,.3))}
.analytics-gradient-5{height:68%;background:linear-gradient(to top,var(--lime),rgba(255,77,109,.3))}
.analytics-gradient-6{height:76%;background:linear-gradient(to top,var(--lime),rgba(255,77,109,.35))}
.analytics-gradient-7{height:85%;background:linear-gradient(to top,var(--lime),rgba(255,77,109,.35))}
.analytics-gradient-8{height:93%;background:linear-gradient(to top,var(--lime),rgba(255,77,109,.4))}
.analytics-gradient-9{height:100%;background:linear-gradient(to top,var(--lime),rgba(255,77,109,.45))}
td.text-gold{color:var(--gold)}

/* ── #packages ── */
.packages-card{margin-top:28px;background:var(--card-bg2);border:1px solid var(--border);border-radius:16px;padding:22px 24px}
.packages-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:12px}
.packages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.packages-text{font-size:13px;font-weight:800;color:#fff;margin-bottom:3px}
.packages-text-2{font-size:11.5px;color:var(--text-muted);line-height:1.6}
a.packages-link{color:var(--lime);text-decoration:none}
.packages-text-3{font-size:11.5px;color:rgba(255,255,255,.35);margin-top:14px;line-height:1.7}

/* ── #reviews ── */
.bg-rgb-255-77-109-16{background:rgba(255,77,109,.16)}
.bg-rgb-255-166-43-16{background:rgba(255,166,43,.16)}

/* ── #quick-answers ── */
.quick-answers-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quick-answers-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:22px 24px;border-left:3px solid var(--lime)}
.quick-answers-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.quick-answers-title{font-size:14px;font-weight:800;margin-bottom:10px}
#quick-answers .quick-answers-text{font-size:13px;color:#555;line-height:1.75}
.quick-answers-card-2{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:22px 24px;border-left:3px solid rgba(255,77,109,.85)}
.quick-answers-eyebrow-2{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,120,120,.95);margin-bottom:8px}
.quick-answers-card-3{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:22px 24px;border-left:3px solid rgba(155,93,229,.7)}
.quick-answers-eyebrow-3{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(155,93,229,.9);margin-bottom:8px}
.quick-answers-card-4{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:22px 24px;border-left:3px solid rgba(0,212,255,.6)}
.quick-answers-eyebrow-4{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,212,255,.9);margin-bottom:8px}
.quick-answers-card-5{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:22px 24px;border-left:3px solid rgba(245,158,11,.7)}
.quick-answers-eyebrow-5{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,158,11,.9);margin-bottom:8px}
.quick-answers-card-6{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:22px 24px;border-left:3px solid rgba(16,185,129,.7)}
.quick-answers-eyebrow-6{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(16,185,129,.9);margin-bottom:8px}

/* ── #faq ── */
.mb-4{margin-bottom:4px}

/* ── #locations ── */
.locations-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── #industries-eeat ── */
.industries-eeat-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.mb-12{margin-bottom:12px}
#industries-eeat .industries-eeat-text{font-size:14px;color:#4b5563;line-height:1.8;margin-bottom:22px}
.industries-eeat-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.industries-eeat-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.industries-eeat-text-2{font-size:18px;margin-bottom:6px}
.industries-eeat-text-3{font-size:13px;font-weight:800;margin-bottom:4px}
.industries-eeat-text-4{font-size:11.5px;color:#555;line-height:1.6}
#industries-eeat .industries-eeat-text-5{font-size:14px;color:#4b5563;line-height:1.8;margin-bottom:20px}
.industries-eeat-stack{display:flex;flex-direction:column;gap:10px}
.industries-eeat-row{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px}
.industries-eeat-title{font-size:22px;flex-shrink:0}
.industries-eeat-text-6{font-size:13px;font-weight:800;margin-bottom:4px;color:#111}
.industries-eeat-text-7{font-size:12px;color:#555;line-height:1.6}
.industries-eeat-card-2{margin-top:22px;padding:16px 18px;background:rgba(46,42,255,0.04);border:1px solid rgba(46,42,255,0.15);border-radius:12px}
.industries-eeat-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:10px}
.industries-eeat-row-2{display:flex;flex-wrap:wrap;gap:7px}
a.industries-eeat-text-8{font-size:11px;color:#555;border:1px solid var(--border);border-radius:100px;padding:4px 12px;text-decoration:none;transition:all .2s}
a.industries-eeat-text-8:hover{color:#2E2AFF;border-color:rgba(46,42,255,0.4)}

/* ── #contact ── */
.mb-14{margin-bottom:14px}
#contact .contact-text{color:#4b5563;font-size:14px;line-height:1.8;max-width:340px;margin-bottom:8px}
.mt-22{margin-top:22px}
.contact-eyebrow{font-size:10.5px;color:#6b7280;text-transform:uppercase;letter-spacing:1.8px;margin-bottom:10px;font-weight:700}
.contact-row{display:flex;flex-wrap:wrap;gap:6px}
#cwContactBox .contact-text-2{font-size:11.5px;color:#6b7280;text-align:center;margin-top:12px}

/* ── #footer ── */
.footer-text{font-style:normal;font-size:11px;color:white;margin-top:14px;line-height:1.8}
a.footer-link{color:inherit;text-decoration:none}
.footer-row{display:flex;gap:8px;margin-top:14px}
a.footer-row-2{width:30px;height:30px;border:1px solid rgba(255,255,255,.1);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.5);text-decoration:none;transition:all .2s}
a.footer-row-2:hover{border-color:rgba(46,42,255,0.4);color:var(--lime)}
.footer-row-3{width:30px;height:30px;border:1px solid rgba(255,255,255,.1);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;text-decoration:none;transition:all .2s}
.footer-row-3:hover{border-color:rgba(46,42,255,0.4)}
a.text-inherit{color:inherit}

/* ── Utilities (single-property, used across sections) ── */
.bg-rgb-16-185-129-14{background:rgba(16,185,129,.14)}
.bg-rgb-46-42-255-14{background:rgba(46,42,255,.14)}
.text-111,#seo-intro .text-111{color:#111}
.text-lime,td.text-lime,.val.text-lime{color:var(--lime)}

/* ==========================================================================
   4. FIXES — deliberate corrections of pre-existing bugs
   ========================================================================== */
/* Mobile menu (mobile only): `.mob-nav a { color: rgba(255,255,255,.75) !important }` also hit the lime "Free Audit" button, leaving 75%-white text on lime (1.2:1). Dark text like every other lime button. */
.mob-nav .mob-cta .btn-primary,
.mob-nav .mob-cta .btn-primary:hover { color: #030303 !important; }

/* DD-ICONS spacing — keep a space between an icon and the text after it */
.label > svg.dd-ico, .label > .dd-flag { margin-right: .35em; }