/* ============================================================
 * SKERVA · PROFESSIONAL OPERATOR THEME
 * ------------------------------------------------------------
 * A restrained charcoal + emerald pass layered over the existing
 * inline CSS. Keeps the structure, removes the purple-heavy SaaS
 * atmosphere, and makes CTAs/results feel more operational.
 * ============================================================ */

:root {
  --bg: #070808;
  --bg-1: #0d0f0f;
  --bg-2: #141716;
  --bg-3: #1b201e;
  --bg-4: #242a27;
  --line: rgba(236, 241, 238, 0.075);
  --line-2: rgba(236, 241, 238, 0.13);
  --line-3: rgba(236, 241, 238, 0.20);
  --line-strong: rgba(236, 241, 238, 0.22);
  --ink-0: #f6f7f4;
  --ink: #eef1ed;
  --ink-1: #dde2dc;
  --ink-2: #a6aea8;
  --ink-3: #747d77;
  --ink-4: #4d5650;
  --accent: #4ade80;
  --accent-hi: #7cf2a5;
  --accent-hover: #7cf2a5;
  --accent-soft: rgba(74, 222, 128, 0.09);
  --accent-mid: rgba(74, 222, 128, 0.16);
  --accent-line: rgba(74, 222, 128, 0.28);
  --accent-edge: rgba(74, 222, 128, 0.36);
  --green: #4ade80;
  --green-soft: rgba(74, 222, 128, 0.09);
  --green-line: rgba(74, 222, 128, 0.28);
  --green-bg: rgba(74, 222, 128, 0.10);
  --green-edge: rgba(74, 222, 128, 0.28);
  --shadow-glow: 0 0 0 1px rgba(74,222,128,0.28), 0 14px 44px -18px rgba(74,222,128,0.40);

  --store-bg: #070808;
  --store-card: #141716;
  --store-card-2: #1b201e;
  --store-line: rgba(236, 241, 238, 0.075);
  --store-line-2: rgba(236, 241, 238, 0.13);
  --store-ink: #f6f7f4;
  --store-muted: rgba(238, 241, 237, 0.66);
  --store-dim: rgba(238, 241, 237, 0.42);
  --store-accent: #4ade80;
  --store-green: #4ade80;
}

html,
body {
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(74,222,128,0.08), transparent 68%),
    linear-gradient(180deg, #080909 0%, #070808 46%, #050606 100%) !important;
}

body::before {
  opacity: 0.24 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px) !important;
}

.nav {
  background: rgba(7, 8, 8, 0.88) !important;
  border-bottom-color: rgba(236, 241, 238, 0.09) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) !important;
}

.logo svg,
.eyebrow .dot,
.hsb-pulse {
  color: var(--accent) !important;
}

.nav-cta,
.btn-primary,
.hero-action.primary,
.bundle-cta,
.tier-cta,
.submit-btn,
.hero-cta,
.kit-buy,
.primary,
.final a.hero-cta {
  background: linear-gradient(180deg, #eef7f0, #dce9df) !important;
  color: #07100b !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 18px 38px -24px rgba(255,255,255,0.55), 0 1px 0 rgba(255,255,255,0.18) inset !important;
}

.nav-cta:hover,
.btn-primary:hover,
.hero-action.primary:hover,
.bundle-cta:hover,
.tier-cta:hover,
.submit-btn:hover,
.hero-cta:hover,
.kit-buy:hover {
  filter: brightness(1.03) !important;
  transform: translateY(-1px);
}

.btn-ghost,
.hero-action.secondary,
.outcome-link,
.filter-btn,
.bundle-cta[style],
.tier-cta.secondary {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(236,241,238,0.14) !important;
  color: var(--ink-0) !important;
}

.accent,
.hpi-price,
.pv-amt,
.cred-num,
.cred-num-val,
.mock-step span,
.kit-price,
.bundle-price,
.tier-price strong,
.cmp-table tbody td:nth-child(3) strong {
  color: var(--accent) !important;
}

.hero,
.outcome-market,
.sms-demo-section,
.block,
.pricing-teaser,
.final,
.store-mockup::before {
  background-image: none !important;
}

.hero::before,
.hero::after,
.outcome-card::before,
.store-mockup::before,
.mock-shell::before,
.hero-bg,
.bg-orb,
.orb,
.glow {
  opacity: 0 !important;
}

.hero-screen,
.preview-card,
.outcome-card,
.cred-card,
.cred-stats,
.mock-shell,
.mock-card,
.mock-side-card,
.bundle-card,
.price-tier,
.funnel-step,
.implementation-card,
.kit-card,
.audit-card,
.install-cell,
.problem-card,
.form-card,
.tier,
.faq,
.cmp-table,
.lead-magnet,
.lm-block {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.016)),
    #111412 !important;
  border-color: rgba(236,241,238,0.12) !important;
  box-shadow: 0 24px 70px -46px rgba(0,0,0,0.95) !important;
}

.preview-card.pv-card-3,
.mock-side-card,
.outcome-card.green,
.price-tier.featured,
.tier--featured,
.bundle-card.primary {
  border-color: rgba(74,222,128,0.25) !important;
  background:
    linear-gradient(180deg, rgba(74,222,128,0.055), rgba(255,255,255,0.014)),
    #111512 !important;
}

.eyebrow {
  background: rgba(255,255,255,0.025) !important;
  border-color: rgba(236,241,238,0.13) !important;
  color: #aeb7b0 !important;
  box-shadow: none !important;
}

.eyebrow .dot,
.outcome-list li::before,
.cred-dot,
.pill-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(74,222,128,0.08) !important;
}

.hero h1,
.hero h2,
h1,
h2 {
  text-shadow: none !important;
}

.hero h1::after {
  background: linear-gradient(90deg, var(--accent), rgba(74,222,128,0.18)) !important;
  box-shadow: 0 0 22px rgba(74,222,128,0.22) !important;
}

::selection {
  background: rgba(74,222,128,0.24) !important;
  color: #fff !important;
}

.hero .lede,
.store-hero .lede,
.section-head p,
.outcome-head p,
.mock-card p,
.kit-desc,
.kit-tagline,
.tier-list li,
.faq p {
  color: var(--ink-2) !important;
}

.mock-button {
  background: #eef7f0 !important;
  color: #07100b !important;
}

.mock-pay b {
  background: rgba(255,255,255,0.92) !important;
  color: #07100b !important;
}

.filter-btn.active,
.kit-industry,
.bundle-spec-line,
.tier-label,
.mock-label,
.hero-tag,
.serial {
  color: var(--accent) !important;
  border-color: rgba(74,222,128,0.24) !important;
}

/* Mobile sticky CTA is injected after page load, so override it hard. */
.smc-bar {
  background: rgba(7, 8, 8, 0.96) !important;
  border-top-color: rgba(236,241,238,0.12) !important;
  box-shadow: 0 -12px 32px rgba(0,0,0,0.45) !important;
}

.smc-btn-primary {
  background: linear-gradient(180deg, #eef7f0, #dce9df) !important;
  color: #07100b !important;
  box-shadow: 0 14px 28px -22px rgba(255,255,255,0.55), 0 1px 0 rgba(255,255,255,0.18) inset !important;
}

.smc-btn-secondary {
  background: rgba(255,255,255,0.045) !important;
  color: var(--ink-0) !important;
  border-color: rgba(236,241,238,0.16) !important;
}

@media (max-width: 720px) {
  html,
  body {
    background:
      radial-gradient(520px 320px at 50% -8%, rgba(74,222,128,0.075), transparent 70%),
      #070808 !important;
  }
}

/* Homepage simplification pass: one promise, one decision. */
body:has(.hero-inner) .hero {
  padding-top: clamp(72px, 9vw, 118px) !important;
  padding-bottom: clamp(58px, 8vw, 92px) !important;
}

body:has(.hero-inner) .hero-inner {
  display: block !important;
}

body:has(.hero-inner) .hero-copy {
  max-width: 760px !important;
}

body:has(.hero-inner) .hero h1 {
  max-width: 10.5ch !important;
  font-size: clamp(54px, 7vw, 92px) !important;
  line-height: 0.98 !important;
}

body:has(.hero-inner) .hero .lede {
  max-width: 620px !important;
  font-size: clamp(18px, 1.6vw, 21px) !important;
  line-height: 1.5 !important;
  margin-top: 26px !important;
}

body:has(.hero-inner) .hero-preview,
body:has(.hero-inner) .hero-paid-inline {
  display: none !important;
}

body:has(.hero-inner) .hero-trust {
  max-width: 720px !important;
  margin-top: 34px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(236,241,238,0.10) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 26px !important;
}

body:has(.hero-inner) .hero-trust .ht-item {
  color: var(--ink-2) !important;
  font-size: 14px !important;
}

@media (max-width: 720px) {
  body:has(.hero-inner) .hero {
    padding-top: 38px !important;
    padding-bottom: 34px !important;
    text-align: left !important;
  }

  body:has(.hero-inner) .hero-copy {
    max-width: none !important;
    text-align: left !important;
  }

  body:has(.hero-inner) .eyebrow {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 7px 11px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }

  body:has(.hero-inner) .hero h1 {
    max-width: 10.5ch !important;
    font-size: clamp(43px, 11.6vw, 54px) !important;
    line-height: 0.98 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  body:has(.hero-inner) .hero h1::after {
    width: 48px !important;
    height: 3px !important;
    margin: 18px 0 0 !important;
  }

  body:has(.hero-inner) .hero .lede {
    font-size: 16px !important;
    line-height: 1.45 !important;
    max-width: 34ch !important;
    margin: 20px 0 0 !important;
    text-align: left !important;
  }

  body:has(.hero-inner) .hero .ctas {
    margin-top: 24px !important;
    gap: 9px !important;
  }

  body:has(.hero-inner) .hero .ctas .btn {
    min-height: 48px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }

  body:has(.hero-inner) .hero-trust {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 22px !important;
    padding-top: 18px !important;
  }

  body:has(.hero-inner) .hero-trust .ht-item {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }

  .smc-bar {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom,0px)) !important;
    gap: 8px !important;
  }

  .smc-btn {
    min-height: 46px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
  }

  .smc-btn-primary {
    flex: 1.25 1 0 !important;
  }

  .nav {
    position: relative !important;
  }

  body:has(.hero-inner) .industries {
    padding: 34px 0 30px !important;
  }

  body:has(.hero-inner) .industries h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
    max-width: 24ch !important;
    margin: 0 auto 16px !important;
  }

  body:has(.hero-inner) .industry-row {
    gap: 8px !important;
    justify-content: center !important;
  }

  body:has(.hero-inner) .industry-pill {
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
  }

  body:has(.hero-inner) .integrations-row {
    display: none !important;
  }

  body:has(.hero-inner) .cred-stats {
    display: none !important;
  }

  body:has(.hero-inner) .outcome-market {
    padding: 42px 0 !important;
  }

  body:has(.hero-inner) .outcome-head {
    text-align: left !important;
    margin-bottom: 18px !important;
  }

  body:has(.hero-inner) .outcome-head .eyebrow {
    margin-left: 0 !important;
  }

  body:has(.hero-inner) .outcome-head h2 {
    max-width: 11ch !important;
    margin: 0 0 12px !important;
    font-size: 36px !important;
    line-height: 1.03 !important;
    text-align: left !important;
  }

  body:has(.hero-inner) .outcome-head p {
    max-width: 31ch !important;
    margin: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  body:has(.hero-inner) .outcome-grid {
    gap: 12px !important;
  }

  body:has(.hero-inner) .outcome-card {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  body:has(.hero-inner) .outcome-kicker {
    font-size: 10px !important;
    margin-bottom: 12px !important;
  }

  body:has(.hero-inner) .outcome-card h3 {
    font-size: 25px !important;
    line-height: 1.06 !important;
    margin-bottom: 10px !important;
  }

  body:has(.hero-inner) .outcome-card p {
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
  }

  body:has(.hero-inner) .outcome-list {
    gap: 8px !important;
    margin-bottom: 18px !important;
  }

  body:has(.hero-inner) .outcome-list li {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }

  body:has(.hero-inner) .outcome-link {
    width: 100% !important;
    justify-content: center !important;
  }
}