/* WEB CRAFT light commercial theme.
   Loaded after legacy dark CSS. Keep this file as the final visual override. */

:root {
  --bg-color: #f3f5ef;
  --surface-color: #ffffff;
  --surface-light: #f7f9f4;
  --surface-strong: #eaf0e5;
  --primary: #0e7c4b;
  --primary-hover: #0a673f;
  --secondary: #d5ff57;
  --text-main: #131b2e;
  --text-muted: #526273;
  --line-color: rgba(19, 27, 46, .10);
  --primary-rgb: 14, 124, 75;
  --secondary-rgb: 213, 255, 87;
  --accent-rgb: 82, 98, 115;
  --panel-rgb: 255, 255, 255;
  --shadow-soft: 0 14px 38px rgba(19, 27, 46, .075);
  --shadow-strong: 0 28px 82px rgba(19, 27, 46, .13);
}

html {
  background: var(--bg-color) !important;
}

body {
  min-height: 100%;
  background:
    radial-gradient(circle at 9% 5%, rgba(213, 255, 87, .28), transparent 24%),
    radial-gradient(circle at 92% 12%, rgba(14, 124, 75, .13), transparent 25%),
    linear-gradient(90deg, rgba(19, 27, 46, .026) 1px, transparent 1px),
    linear-gradient(180deg, rgba(19, 27, 46, .022) 1px, transparent 1px),
    linear-gradient(180deg, #fbfcf8 0%, #f3f5ef 48%, #eef3ec 100%) !important;
  background-size: auto, auto, 72px 72px, 72px 72px, auto !important;
  color: var(--text-main) !important;
}

body::before,
body::after,
.hero::before,
.hero::after,
.hero-content::before,
.hero-content::after,
.lead-magnet-section::before,
.lead-magnet-section::after,
.portfolio-section::before,
.portfolio-section::after,
.reviews-section::before,
.reviews-section::after,
.contact-section::before,
.contact-section::after,
.faq-section::before,
.faq-section::after,
.pricing-section::before,
.pricing-section::after,
#diagnostic::before,
#diagnostic::after,
#about::before,
#about::after,
#process::before,
#process::after,
#tariffs::before,
#tariffs::after {
  display: none !important;
  content: none !important;
}

body,
p,
li,
.lead,
.sub,
.article-body,
.faq-answer,
.form-card .sub,
.contact-direct-card p {
  color: var(--text-muted) !important;
}

h1,
h2,
h3,
h4,
.section-title,
.hero-title,
.svc-card .t,
.pkg-card h3,
.faq-question,
.logo,
.back-link,
.nav-links a,
.form-label,
.contact-method label,
.button,
.btn {
  color: var(--text-main) !important;
}

a {
  color: inherit;
}

.container {
  width: min(1180px, calc(100% - 44px)) !important;
}

/* Header */
header,
.topbar {
  background: rgba(255, 255, 255, .88) !important;
  border-bottom: 1px solid var(--line-color) !important;
  box-shadow: 0 8px 28px rgba(19, 27, 46, .055) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

.logo {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  letter-spacing: .06em !important;
}

.logo span,
.logo::first-letter {
  color: var(--primary) !important;
}

.nav-links a,
.back-link {
  color: var(--text-main) !important;
  opacity: .9 !important;
}

.nav-links a:hover,
.back-link:hover {
  color: var(--primary) !important;
}

.nav-links a::after,
.nav-link.active::after {
  background: var(--primary) !important;
}

/* Buttons */
.btn,
.button,
button {
  border-radius: 999px !important;
}

.btn-primary,
.button,
.service-request-btn.btn-primary,
.portfolio-load-more.btn-primary,
button[type="submit"] {
  background: linear-gradient(135deg, var(--primary) 0%, #096b42 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(14, 124, 75, .95) !important;
  box-shadow: 0 16px 34px rgba(14, 124, 75, .20) !important;
  text-shadow: none !important;
}

.btn-primary *,
.button *,
button[type="submit"] * {
  color: #ffffff !important;
}

.btn-primary:hover,
.button:hover,
.service-request-btn.btn-primary:hover,
button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, #064f31 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 20px 46px rgba(14, 124, 75, .28) !important;
  transform: translateY(-2px) !important;
}

.btn-ghost,
.btn-outline,
.hero-btns .btn:not(.btn-primary) {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(19, 27, 46, .18) !important;
  box-shadow: 0 10px 28px rgba(19, 27, 46, .07) !important;
}

.btn-ghost:hover,
.btn-outline:hover,
.hero-btns .btn:not(.btn-primary):hover {
  background: #f4f8ef !important;
  border-color: rgba(14, 124, 75, .36) !important;
  color: var(--primary) !important;
}

a.btn-primary[href*="t.me"] {
  background: linear-gradient(135deg, #0874a8 0%, #075f8b 100%) !important;
  border-color: #075f8b !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(8, 116, 168, .22) !important;
}

a.btn-primary[href*="wa.me"],
a.btn-primary[href*="whatsapp"] {
  background: linear-gradient(135deg, #25d366 0%, #159947 100%) !important;
  border-color: #159947 !important;
}

/* Small labels */
.hero-kicker,
.kicker,
.portfolio-kicker,
.quiz-eyebrow,
.lead-magnet-badge,
.toc-title,
.badge,
.price-tag,
.proof-case-kicker,
.cat-count {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(213, 255, 87, .55) !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  color: var(--text-main) !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

/* Homepage hero */
body:not(:has(.toc)) .hero {
  min-height: auto !important;
  padding: clamp(92px, 8vw, 132px) 0 clamp(58px, 7vw, 88px) !important;
  background:
    radial-gradient(circle at 86% 22%, rgba(14, 124, 75, .12), transparent 22%),
    radial-gradient(circle at 8% 12%, rgba(213, 255, 87, .34), transparent 21%),
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(247,249,244,.94)) !important;
  overflow: hidden !important;
}

.hero .container {
  position: relative !important;
  z-index: 1 !important;
}

.hero-content {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: clamp(34px, 5vw, 70px) !important;
  border-radius: 38px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.88)) !important;
  border: 1px solid rgba(19, 27, 46, .08) !important;
  box-shadow: var(--shadow-strong) !important;
  backdrop-filter: none !important;
}

.hero-shell {
  position: relative !important;
  max-width: 920px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hero-shell::before,
.hero-shell::after {
  display: none !important;
  content: none !important;
}

.hero-title,
h1 {
  color: var(--text-main) !important;
  text-shadow: none !important;
  letter-spacing: -.065em !important;
}

.hero-title .accent,
.gradient-text,
.accent {
  color: var(--primary) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
}

.hero-subtitle,
.hero-support {
  max-width: 800px !important;
  color: var(--text-muted) !important;
  text-shadow: none !important;
}

.hero-btns,
.hero-actions,
.cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: center !important;
}

.hero-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 28px !important;
}

.hero-stat,
.hero-proof-card {
  background: #ffffff !important;
  border: 1px solid rgba(19, 27, 46, .09) !important;
  color: var(--text-main) !important;
  box-shadow: 0 14px 34px rgba(19, 27, 46, .07) !important;
  backdrop-filter: none !important;
}

.hero-stat {
  border-radius: 22px !important;
  overflow: hidden !important;
}

.hero-stat::before {
  background: var(--primary) !important;
  opacity: 1 !important;
  height: 3px !important;
}

.hero-stat-value {
  color: var(--text-main) !important;
  text-shadow: none !important;
}

.hero-stat-label,
.hero-stat-note,
.hero-proof-card span,
.hero-proof-card p {
  color: var(--text-muted) !important;
}

.hero-proof-grid {
  gap: 14px !important;
}

.hero-mini-link {
  color: var(--primary) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Sections */
section,
.section,
.lead-magnet-section,
.services-section,
.process-section,
.portfolio-section,
.pricing-section,
.faq-section,
.contact-section,
.reviews-section,
.payment-section {
  background: transparent !important;
  color: var(--text-main) !important;
}

.section-title,
.section-header h2,
.cat-head h2 {
  color: var(--text-main) !important;
  text-shadow: none !important;
}

.section-subtitle,
.section-header p {
  color: var(--text-muted) !important;
}

.card,
.lead-magnet-panel,
.lead-magnet-card,
.approach-card,
.diagnostic-card,
.about-card,
.process-card,
.portfolio-card,
.portfolio-item,
.pricing-card,
.tariff-card,
.pkg-card,
.faq-item,
.contact-card,
.form-card,
.contact-direct-card,
.proof-card,
.review-card,
.payment-card,
.case-card,
.article-body,
.article-card,
.quiz-panel,
.quiz-result,
.quiz-card {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(19, 27, 46, .09) !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--text-main) !important;
  backdrop-filter: none !important;
}

.card:hover,
.diagnostic-card:hover,
.about-card:hover,
.portfolio-card:hover,
.portfolio-item:hover,
.pricing-card:hover,
.tariff-card:hover,
.pkg-card:hover,
.svc-card:hover {
  border-color: rgba(14, 124, 75, .34) !important;
  box-shadow: 0 22px 52px rgba(19, 27, 46, .11) !important;
}

.lead-magnet-list li,
.faq-answer,
.diagnostic-card p,
.about-card p,
.about-points li,
.pkg-card p,
.pricing-card p,
.tariff-card p,
.review-card p,
.proof-card p,
.article-card p,
.diagnostic-result span,
.diagnostic-result p {
  color: var(--text-muted) !important;
}

.diagnostic-result strong {
  color: var(--text-main) !important;
}

.lead-magnet-list i,
.check,
.fa-check,
.faq-question i,
.service-icon,
.card-icon,
.diagnostic-card i,
.about-card-icon {
  color: var(--primary) !important;
}

.diagnostic-card,
.about-card {
  position: relative !important;
  min-height: 100% !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcf8 100%) !important;
  border: 1px solid rgba(19, 27, 46, .09) !important;
  box-shadow: 0 16px 42px rgba(19, 27, 46, .08) !important;
  color: var(--text-main) !important;
  overflow: hidden !important;
}

.diagnostic-card::before,
.diagnostic-card::after,
.about-card::before,
.about-card::after {
  display: none !important;
  content: none !important;
}

.diagnostic-card h3,
.about-card h3 {
  color: var(--text-main) !important;
  text-shadow: none !important;
}

.diagnostic-card i,
.about-card-icon,
.diagnostic-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  background: rgba(14, 124, 75, .09) !important;
  border: 1px solid rgba(14, 124, 75, .16) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.diagnostic-icon svg {
  width: 26px !important;
  height: 26px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.about-card-icon i {
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.about-card-icon i::before {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
  background: currentColor !important;
}

#about .about-benefits {
  align-items: start !important;
  gap: clamp(18px, 2.4vw, 26px) !important;
  margin-top: clamp(26px, 3.2vw, 38px) !important;
}

#about .about-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(24px, 2.8vw, 34px) !important;
  border-radius: 26px !important;
}

#about .about-card-head {
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

#about .about-card h3 {
  font-size: clamp(26px, 2.45vw, 34px) !important;
  line-height: 1.14 !important;
  letter-spacing: -.035em !important;
}

#about .about-card p {
  margin: 0 0 18px !important;
  color: #4f6070 !important;
  font-size: clamp(17px, 1.25vw, 19px) !important;
  line-height: 1.55 !important;
}

#about .about-points {
  display: grid !important;
  gap: 9px !important;
  margin-top: 0 !important;
}

#about .about-points li {
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #3f5263 !important;
  font-size: clamp(15.5px, 1.08vw, 17px) !important;
  line-height: 1.45 !important;
}

#about .about-points i {
  margin-top: .25em !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--primary) !important;
}

.lead-magnet-section {
  padding-top: clamp(64px, 7vw, 96px) !important;
  padding-bottom: clamp(70px, 8vw, 108px) !important;
}

.lead-magnet-header h2,
.lead-magnet-copy h2,
.lead-magnet-copy h3,
.manual-audit-card h3 {
  color: var(--text-main) !important;
  text-shadow: none !important;
}

.lead-magnet-header h2 span,
.lead-magnet-copy h2 span {
  color: var(--primary) !important;
  text-shadow: none !important;
}

.lead-magnet-header p,
.lead-magnet-copy p,
.manual-audit-card p,
.lead-magnet-note {
  color: var(--text-muted) !important;
}

.lead-magnet-shell {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr) !important;
  gap: clamp(26px, 4vw, 48px) !important;
  align-items: center !important;
  padding: clamp(28px, 4vw, 50px) !important;
  border-radius: 36px !important;
  background:
    radial-gradient(circle at 88% 16%, rgba(14, 124, 75, .10), transparent 24%),
    radial-gradient(circle at 8% 10%, rgba(213, 255, 87, .28), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #f8faf4 100%) !important;
  border: 1px solid rgba(19, 27, 46, .09) !important;
  box-shadow: var(--shadow-strong) !important;
  overflow: hidden !important;
}

.lead-magnet-shell::before,
.lead-magnet-shell::after,
.manual-audit-card::before,
.manual-audit-card::after {
  display: none !important;
  content: none !important;
}

.lead-magnet-copy,
.lead-magnet-preview,
.manual-audit-card > * {
  position: relative !important;
  z-index: 1 !important;
}

.lead-magnet-copy h3 {
  max-width: 720px !important;
  font-size: clamp(24px, 2.6vw, 38px) !important;
  line-height: 1.12 !important;
}

.lead-magnet-list {
  gap: 12px !important;
}

.lead-magnet-list li {
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(19, 27, 46, .09) !important;
  color: var(--text-main) !important;
  box-shadow: 0 8px 22px rgba(19, 27, 46, .045) !important;
}

.lead-magnet-list li span {
  color: var(--text-muted) !important;
}

.lead-magnet-list li strong {
  color: var(--text-main) !important;
}

.lead-magnet-preview {
  gap: 16px !important;
}

.before-after-grid {
  gap: 16px !important;
}

.before-after-card,
.lead-magnet-window {
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  box-shadow: 0 16px 40px rgba(19, 27, 46, .10) !important;
}

.before-after-label,
.lead-magnet-window figcaption {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid rgba(19, 27, 46, .08) !important;
}

.before-after-label span {
  color: var(--primary) !important;
}

.before-after-card img,
.lead-magnet-window img {
  background: #eef1f5 !important;
}

.lead-magnet-mini-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.lead-magnet-mini,
.lead-magnet-mini span,
.compare-pill,
.compare-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 11px 14px !important;
  border-radius: 999px !important;
  background: rgba(14, 124, 75, .08) !important;
  border: 1px solid rgba(14, 124, 75, .18) !important;
  color: var(--primary) !important;
  font-weight: 900 !important;
  text-align: center !important;
}

.manual-audit-grid {
  gap: 26px !important;
  align-items: stretch !important;
}

.manual-audit-card {
  background:
    radial-gradient(circle at 92% 12%, rgba(14, 124, 75, .09), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #f8faf4 100%) !important;
  border: 1px solid rgba(19, 27, 46, .09) !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--text-main) !important;
}

/* Pricing and quiz */
.price,
.new-price,
.tariff-price,
.price-chip,
.pkg-card .pr,
.svc-card .p {
  color: var(--primary) !important;
  text-shadow: none !important;
}

.price-icon {
  color: var(--primary) !important;
  text-shadow: none !important;
}

.price-icon i {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.price-icon i::before {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  background: currentColor !important;
}

.price-icon .fa-rocket::before {
  transform: scale(1.18) translateY(-1px) !important;
  transform-origin: center !important;
}

.tariffs-audit-banner {
  background:
    radial-gradient(circle at 96% 50%, rgba(14, 124, 75, .10), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f3f8ef 100%) !important;
  border: 1px solid rgba(14, 124, 75, .18) !important;
  box-shadow: 0 16px 42px rgba(19, 27, 46, .08) !important;
  color: var(--text-main) !important;
}

.tariffs-audit-banner strong {
  color: var(--text-main) !important;
  text-shadow: none !important;
}

.tariffs-audit-banner span {
  color: var(--text-muted) !important;
  text-shadow: none !important;
}

.price-chip {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  background: rgba(14, 124, 75, .08) !important;
  border: 1px solid rgba(14, 124, 75, .22) !important;
  color: var(--primary) !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.hero-offer strong,
.article-body strong,
.article-content strong,
.service-content strong {
  color: var(--text-main) !important;
}

.benefit-card,
.quick-check li,
.trust-strip,
.final-box,
.price-card {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  box-shadow: 0 12px 32px rgba(19, 27, 46, .06) !important;
  color: var(--text-main) !important;
}

.benefit-card .b-check,
.quick-check li::before,
.price-card strong {
  background: rgba(14, 124, 75, .09) !important;
  color: var(--primary) !important;
}

.trust-strip span,
.trust-strip a,
.service-tags a,
.article-tags a {
  background: rgba(14, 124, 75, .08) !important;
  border: 1px solid rgba(14, 124, 75, .18) !important;
  color: var(--primary) !important;
}

.trust-strip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.old-price,
.price-old {
  color: var(--text-muted) !important;
}

.quiz-option,
.quiz-answer,
.contact-method label {
  background: #ffffff !important;
  border: 1px solid rgba(19, 27, 46, .14) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

.quiz-option:hover,
.quiz-answer:hover,
.contact-method label:hover {
  border-color: rgba(14, 124, 75, .42) !important;
  background: #f5f9ef !important;
}

.contact-method label:has(input:checked),
.quiz-option.is-active,
.quiz-answer.is-active {
  border-color: var(--primary) !important;
  background: rgba(14, 124, 75, .08) !important;
  color: var(--text-main) !important;
}

.contact-method-options {
  gap: 10px !important;
}

.contact-method-option {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

.contact-method label.contact-method-option,
.contact-method label.contact-method-option:hover,
.contact-method label.contact-method-option:has(input:checked) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.contact-method-option span {
  min-height: 52px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(19, 27, 46, .14) !important;
  background: #ffffff !important;
  color: var(--text-main) !important;
  box-shadow: 0 8px 20px rgba(19, 27, 46, .045) !important;
  outline: none !important;
}

.contact-method-option span i {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.contact-method-option span i::before {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  background: currentColor !important;
}

.contact-method-option input:checked + span {
  border-color: rgba(14, 124, 75, .42) !important;
  background: rgba(14, 124, 75, .10) !important;
  color: var(--primary) !important;
  box-shadow: inset 0 0 0 1px rgba(14, 124, 75, .10), 0 10px 24px rgba(14, 124, 75, .10) !important;
}

.contact-method-option input:focus-visible + span {
  outline: 2px solid rgba(14, 124, 75, .42) !important;
  outline-offset: 3px !important;
}

/* Final CTA: remove legacy dark glass overlay */
.cta-section {
  padding: 104px 20px !important;
  background:
    radial-gradient(circle at 10% 10%, rgba(14, 124, 75, .10), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(213, 255, 87, .34), transparent 22%),
    linear-gradient(180deg, #f7faf4 0%, #ffffff 100%) !important;
  color: var(--text-main) !important;
  overflow: hidden !important;
}

.cta-section::before,
.cta-section::after {
  display: none !important;
}

.cta-content {
  max-width: 1060px !important;
  padding: 64px 56px !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 248, 250, .96)) !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  box-shadow: 0 30px 80px rgba(19, 27, 46, .12) !important;
  color: var(--text-main) !important;
  backdrop-filter: none !important;
}

.cta-content h2,
.cta-section h2 {
  max-width: 820px !important;
  color: var(--text-main) !important;
  text-shadow: none !important;
}

.cta-content p,
.cta-section p {
  max-width: 920px !important;
  color: var(--text-muted) !important;
  text-shadow: none !important;
}

.cta-checklist {
  max-width: 760px !important;
  margin: 34px auto !important;
  display: grid !important;
  gap: 12px !important;
}

.cta-checklist li {
  background: #ffffff !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  box-shadow: 0 12px 30px rgba(19, 27, 46, .055) !important;
  color: var(--text-main) !important;
  text-align: left !important;
}

.cta-checklist i {
  color: var(--primary) !important;
}

.contact-form {
  max-width: 470px !important;
}

.quiz-progress-bar,
.progress-fill {
  background: var(--primary) !important;
}

/* Forms */
.form-input,
.form-field,
input,
textarea,
select {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(19, 27, 46, .18) !important;
  box-shadow: inset 0 1px 0 rgba(19, 27, 46, .03) !important;
}

.form-input::placeholder,
.form-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: #7b8794 !important;
}

.form-input:focus,
.form-field:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgba(14, 124, 75, .16) !important;
  border-color: var(--primary) !important;
}

.consent-row,
.privacy-note {
  color: var(--text-muted) !important;
}

.consent-row a,
.privacy-note a,
.article-body a,
.article-content a {
  color: var(--primary) !important;
  text-decoration-color: rgba(14, 124, 75, .35) !important;
}

.article-body a.button,
.article-content a.button,
.service-content a.button,
.final-box a.button,
.form-card button.button,
.mobile-cta a.button {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--primary) 0%, #096b42 100%) !important;
}

.side-contact a,
.form-direct a {
  color: var(--primary) !important;
}

.cookie-banner,
.cookie-consent,
.cookie-notice {
  background: rgba(255, 255, 255, .96) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  box-shadow: 0 18px 54px rgba(19, 27, 46, .16) !important;
}

.cookie-consent {
  left: 50% !important;
  right: auto !important;
  bottom: 16px !important;
  width: min(760px, calc(100% - 28px)) !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
}

.cookie-consent[hidden] {
  display: none !important;
}

.cookie-consent-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 3px !important;
  color: var(--text-main) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.cookie-banner p,
.cookie-consent p,
.cookie-notice p {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.cookie-consent-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 0 !important;
  justify-content: flex-end !important;
}

.cookie-consent-button {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(19, 27, 46, .16) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.cookie-consent-button.primary {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

@media (max-width: 820px) {
  .cookie-consent {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .cookie-consent-actions {
    justify-content: flex-start !important;
  }
}

/* Services catalog page */
body:has(.toc),
body:has(.cat-block) {
  background:
    radial-gradient(circle at 10% 8%, rgba(213, 255, 87, .24), transparent 22%),
    radial-gradient(circle at 88% 14%, rgba(14, 124, 75, .12), transparent 24%),
    linear-gradient(90deg, rgba(19, 27, 46, .025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(19, 27, 46, .02) 1px, transparent 1px),
    linear-gradient(180deg, #fbfcf8 0%, #f3f5ef 100%) !important;
  background-size: auto, auto, 72px 72px, 72px 72px, auto !important;
}

body:has(.toc) .hero,
body:has(.cat-block) .hero {
  padding: clamp(70px, 7vw, 108px) 0 clamp(42px, 5vw, 62px) !important;
  background: transparent !important;
}

body:has(.side-card) .hero {
  padding: clamp(48px, 6vw, 76px) clamp(28px, 4vw, 56px) clamp(34px, 4vw, 48px) !important;
  margin-top: clamp(24px, 3vw, 44px) !important;
  margin-bottom: clamp(18px, 3vw, 34px) !important;
  border-radius: 38px !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(14, 124, 75, .11), transparent 25%),
    radial-gradient(circle at 0% 0%, rgba(213, 255, 87, .30), transparent 22%),
    linear-gradient(135deg, #ffffff 0%, #f8faf4 100%) !important;
  border: 1px solid rgba(19, 27, 46, .08) !important;
  box-shadow: var(--shadow-strong) !important;
}

body:has(.toc) .hero.container,
body:has(.cat-block) .hero.container {
  display: block !important;
  margin-top: 0 !important;
  padding: clamp(34px, 5vw, 64px) !important;
  border-radius: 38px !important;
  background:
    radial-gradient(circle at 92% 16%, rgba(14, 124, 75, .12), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #f8faf4 100%) !important;
  border: 1px solid rgba(19, 27, 46, .08) !important;
  box-shadow: var(--shadow-strong) !important;
}

body:has(.toc) h1,
body:has(.cat-block) h1 {
  max-width: 1000px !important;
  color: var(--text-main) !important;
  font-size: clamp(46px, 5.2vw, 86px) !important;
}

body:has(.side-card) h1 {
  margin-top: 20px !important;
  max-width: 980px !important;
  color: var(--text-main) !important;
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 1.02 !important;
}

body:has(.toc) .lead,
body:has(.cat-block) .lead {
  max-width: 860px !important;
  color: var(--text-muted) !important;
}

body:has(.side-card) .lead {
  max-width: 830px !important;
  color: var(--text-muted) !important;
}

.toc {
  margin: clamp(24px, 4vw, 46px) auto clamp(24px, 4vw, 42px) !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(19, 27, 46, .09) !important;
  box-shadow: 0 20px 64px rgba(19, 27, 46, .10) !important;
}

.toc-title {
  margin: 0 0 18px !important;
}

.toc-list {
  gap: 10px !important;
}

.toc-list a {
  min-height: 42px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(19, 27, 46, .16) !important;
  color: var(--text-main) !important;
  box-shadow: 0 5px 14px rgba(19, 27, 46, .035) !important;
}

.toc-list a:hover {
  transform: translateY(-1px) !important;
  background: rgba(14, 124, 75, .07) !important;
  color: var(--primary) !important;
}

.toc-list a .n {
  color: var(--text-muted) !important;
}

.layout {
  padding-top: 0 !important;
}

.cat-block {
  margin-bottom: 28px !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(19, 27, 46, .09) !important;
  box-shadow: 0 18px 54px rgba(19, 27, 46, .08) !important;
}

.cat-head {
  align-items: baseline !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.cat-head h2 {
  font-size: clamp(30px, 3vw, 44px) !important;
}

.cat-grid {
  gap: 14px !important;
}

.svc-card {
  min-height: 112px !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcf8 100%) !important;
  border: 1px solid rgba(19, 27, 46, .11) !important;
  box-shadow: 0 10px 28px rgba(19, 27, 46, .055) !important;
}

.svc-card .t {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

.svc-card .p {
  margin-top: 10px !important;
  font-weight: 900 !important;
}

/* Service/article pages */
.article-layout,
.service-layout,
.content-layout {
  color: var(--text-main) !important;
}

.article-hero,
.service-hero,
.page-hero {
  background: transparent !important;
}

.article-body,
.article-content,
.service-content,
main article {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(19, 27, 46, .09) !important;
  border-radius: 28px !important;
  box-shadow: var(--shadow-soft) !important;
}

.article-body h2,
.article-content h2,
.service-content h2,
main article h2 {
  color: var(--text-main) !important;
}

.article-body p,
.article-content p,
.service-content p,
main article p,
.article-body li,
.article-content li,
.service-content li,
main article li {
  color: var(--text-muted) !important;
}

.article-cta,
.service-cta,
.sticky-cta,
.side-cta {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,249,239,.96)) !important;
  border: 1px solid rgba(14, 124, 75, .18) !important;
  box-shadow: 0 18px 54px rgba(19, 27, 46, .10) !important;
}

.side-card {
  top: 92px !important;
  margin: 0 0 30px !important;
  padding: clamp(22px, 3vw, 30px) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 94% 50%, rgba(14, 124, 75, .10), transparent 25%),
    linear-gradient(135deg, #ffffff 0%, #f5f9ef 100%) !important;
  border: 1px solid rgba(14, 124, 75, .18) !important;
  box-shadow: 0 18px 48px rgba(19, 27, 46, .10) !important;
  color: var(--text-main) !important;
  backdrop-filter: none !important;
}

.side-card h2 {
  color: var(--text-main) !important;
  text-shadow: none !important;
}

.side-card p,
.side-contact {
  color: var(--text-muted) !important;
  text-shadow: none !important;
}

.side-contact a {
  color: var(--primary) !important;
  border-bottom: 1px solid rgba(14, 124, 75, .34) !important;
}

.side-card .button {
  background: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(14, 124, 75, .20) !important;
}

.side-card .button:hover {
  background: var(--primary-hover) !important;
}

/* Portfolio */
.portfolio-card,
.portfolio-item {
  overflow: hidden !important;
}

.portfolio-card img,
.portfolio-item img,
.article-body img,
.article-content img {
  background: #eef1f5 !important;
}

.payment-percent,
.payment-step strong,
.payment-shell h2 span,
.payment-title span,
.quiz-discount-value,
.price-save,
.quiz-result-discount {
  color: var(--primary) !important;
  text-shadow: none !important;
}

.price-save::before {
  background: var(--primary) !important;
}

.quiz-discount-step,
.quiz-discount-step.active {
  color: var(--primary) !important;
  background: rgba(14, 124, 75, .08) !important;
  border-color: rgba(14, 124, 75, .18) !important;
}

.portfolio-meta,
.portfolio-caption,
.portfolio-card-footer {
  background: #ffffff !important;
  color: var(--text-main) !important;
}

.portfolio-work-number,
.work-number {
  background: rgba(213, 255, 87, .62) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
}

.service-visual,
.article-visual,
.article-hero-image {
  margin: 34px auto !important;
  max-width: min(100%, 940px) !important;
}

.service-visual a,
.article-visual a,
.article-hero-image a {
  display: block !important;
  max-width: 100% !important;
}

.service-visual img,
.article-visual img,
.article-hero-image img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 22px !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  box-shadow: 0 18px 48px rgba(19, 27, 46, .10) !important;
}

.service-visual figcaption,
.article-visual figcaption,
.article-hero-image figcaption {
  margin-top: 12px !important;
  color: var(--text-muted) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.article-body blockquote {
  margin: 22px 0 !important;
  padding: 18px 22px !important;
  border-left: 4px solid var(--primary) !important;
  border-radius: 18px !important;
  background: rgba(14, 124, 75, .06) !important;
}

.article-body blockquote p {
  margin: 0 !important;
}

/* FAQ: keep visible, not fake collapsed dark blocks */
.faq-item {
  border-radius: 24px !important;
}

.faq-question {
  background: transparent !important;
}

.faq-toggle,
.faq-question .icon,
.faq-question i {
  color: var(--primary) !important;
}

/* Footer */
footer,
.footer {
  background: #ffffff !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--line-color) !important;
}

/* Utilities */
hr,
.divider {
  border-color: var(--line-color) !important;
}

::selection {
  background: rgba(213, 255, 87, .80);
  color: var(--text-main);
}

.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.reveal.active {
  opacity: 1 !important;
  transform: none !important;
}

/* Process cards */
.proof-cases-section {
  padding-top: clamp(74px, 8vw, 116px) !important;
  padding-bottom: clamp(74px, 8vw, 116px) !important;
  color: var(--text-main) !important;
}

.section-kicker,
.proof-case-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(213, 255, 87, .58) !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  color: var(--text-main) !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.section-kicker {
  display: flex !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.proof-case-kicker {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.proof-cases-lead {
  color: var(--text-muted) !important;
}

.proof-cases-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(20px, 3vw, 30px) !important;
  align-items: stretch !important;
}

.proof-case-card {
  position: relative !important;
  min-height: 100% !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcf8 100%) !important;
  border: 1px solid rgba(19, 27, 46, .09) !important;
  box-shadow: 0 16px 42px rgba(19, 27, 46, .08) !important;
  color: var(--text-main) !important;
  overflow: hidden !important;
  transform: none !important;
}

.proof-case-card::before,
.proof-case-card::after {
  display: none !important;
  content: none !important;
}

.proof-case-card h3 {
  color: var(--text-main) !important;
  text-shadow: none !important;
}

.proof-case-card p,
.proof-case-list li {
  color: var(--text-muted) !important;
}

.proof-case-list i {
  color: var(--primary) !important;
}

/* SVG icon system: replaces local emoji/symbol Font Awesome fallback with vector masks. */
.fa-solid,
.fa-brands {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.1em !important;
  height: 1.1em !important;
  font-style: normal !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.fa-solid::before,
.fa-brands::before {
  content: "" !important;
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  background: currentColor !important;
  -webkit-mask: var(--svg-icon) center / contain no-repeat !important;
  mask: var(--svg-icon) center / contain no-repeat !important;
}

.fa-bars { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16v2H4zm0 4h16v2H4zm0 4h16v2H4z'/%3E%3C/svg%3E"); }
.fa-xmark { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.4 5 12.6 12.6-1.4 1.4L5 6.4z'/%3E%3Cpath d='M17.6 5 5 17.6 6.4 19 19 6.4z'/%3E%3C/svg%3E"); }
.fa-bullseye { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm0 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E"); }
.fa-gift { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10h16v10H4z'/%3E%3Cpath d='M3 6h18v5H3zM11 6h2v14h-2z'/%3E%3Cpath d='M8.2 3C6.5 3 5.5 4.8 6.4 6H11C10.6 4.4 9.6 3 8.2 3Zm7.6 0C14.4 3 13.4 4.4 13 6h4.6c.9-1.2-.1-3-1.8-3Z'/%3E%3C/svg%3E"); }
.fa-layer-group { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m5.2 11.2 6.8 3.8 6.8-3.8 2.2 1.2-9 5-9-5 2.2-1.2Z'/%3E%3Cpath d='m5.2 15.2 6.8 3.8 6.8-3.8 2.2 1.2-9 5-9-5 2.2-1.2Z'/%3E%3C/svg%3E"); }
.fa-eye { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5C6 5 2.7 10.2 2 12c.7 1.8 4 7 10 7s9.3-5.2 10-7c-.7-1.8-4-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z'/%3E%3C/svg%3E"); }
.fa-magnifying-glass-chart { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 4a6 6 0 1 0 3.7 10.7l4.8 4.8 1.4-1.4-4.8-4.8A6 6 0 0 0 10 4Zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z'/%3E%3Cpath d='M7 11h2v2H7zm3-4h2v6h-2zm3 2h2v4h-2z'/%3E%3C/svg%3E"); }
.fa-users-viewfinder { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3 20c.3-4 2.4-7 5-7s4.7 3 5 7H3Zm8 0c.2-2.3 1-4.3 2.3-5.6.8-.9 1.7-1.4 2.7-1.4 2.6 0 4.7 3 5 7H11Z'/%3E%3C/svg%3E"); }
.fa-rocket { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 3c3.8.3 6.7 3.2 7 7l-5.7 5.7-4.1-4.1L13 3Z'/%3E%3Cpath d='M9 12 5 13l-2 4 4-2 1-4zm3 3-1 4-4 2 2-4 4-1z'/%3E%3Ccircle cx='15.8' cy='7.2' r='1.6'/%3E%3C/svg%3E"); }
.fa-calendar-check { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v14H3V6a2 2 0 0 1 2-2Zm0 6v8h14v-8H5Z'/%3E%3Cpath d='M7 2h2v4H7zm8 0h2v4h-2zm-4 13.2 4.6-4.6L17 12l-6 6-3.5-3.5 1.4-1.4z'/%3E%3C/svg%3E"); }
.fa-wand-magic-sparkles { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 18 10-10 2 2L6 20l-2-2Z'/%3E%3Cpath d='m15 3 1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3Zm5 8 .7 2.3L23 14l-2.3.7L20 17l-.7-2.3L17 14l2.3-.7L20 11Z'/%3E%3C/svg%3E"); }
.fa-compass-drafting { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 4 21h4.2l1.2-3h5.2l1.2 3H20L12 3Zm0 5.4 2 5.1h-4l2-5.1Z'/%3E%3Cpath d='M5 4h4v2H7v3H5V4Zm10 0h4v5h-2V6h-2V4ZM5 15h2v3h2v2H5v-5Zm12 0h2v5h-4v-2h2v-3Z'/%3E%3C/svg%3E"); }
.fa-diagram-project { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h7v6H4V4Zm9 0h7v6h-7V4ZM4 14h7v6H4v-6Zm9 0h7v6h-7v-6Z'/%3E%3Cpath d='M11 7h2v2h-2V7Zm1 2h1v6h-2V9h1Zm-1 7h2v2h-2v-2Z'/%3E%3C/svg%3E"); }
.fa-inbox { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16l2 8v6H2v-6l2-8Zm1.5 2-1.2 5H8l1.2 3h5.6L16 12h3.7l-1.2-5h-13Z'/%3E%3Cpath d='M8 9h8v2H8V9Z'/%3E%3C/svg%3E"); }
.fa-telegram { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.8 4.4 18.6 20c-.2 1-1.2 1.3-2 .8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.2-8.3c.4-.4-.1-.6-.6-.3L6 13.5 1.1 12c-1-.3-1-1 .2-1.5l19-7.3c.9-.3 1.7.2 1.5 1.2Z'/%3E%3C/svg%3E"); }
.fa-check { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.2 16.6-4-4L3.8 14l5.4 5.4L21 7.6 19.6 6.2z'/%3E%3C/svg%3E"); }
.fa-chart-line,
.fa-chart-simple { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19h17v2H2V4h2v15Z'/%3E%3Cpath d='m6 16 4-5 4 3 5-8 1.7 1.1-6.1 9.8-4.2-3.2L7.6 17z'/%3E%3C/svg%3E"); }
.fa-handshake-angle { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12.5 11.5 9l2 2L10 14.5c1.5 1.6 3.7 1.7 5.3.1l3.9-3.9-5.9-5.9L11 7.1 8.8 5 3 10.8l5 5 .8-.8-1.8-1.8L8 12.5Z'/%3E%3Cpath d='m15.3 14.6 2.7 2.7 3-3-1.8-3.6-3.9 3.9Z'/%3E%3C/svg%3E"); }
.fa-chevron-left,
.fa-arrow-left { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.8 5-7 7 7 7 1.4-1.4-5.6-5.6 5.6-5.6z'/%3E%3C/svg%3E"); }
.fa-chevron-right,
.fa-arrow-right { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.2 5 7 7-7 7-1.4-1.4 5.6-5.6-5.6-5.6z'/%3E%3C/svg%3E"); }
.fa-box-open { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 8 4-5h10l4 5-9 4-9-4Z'/%3E%3Cpath d='M4 10v8.5L12 22l8-3.5V10l-8 3.5L4 10Z'/%3E%3C/svg%3E"); }
.fa-star { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2.5 2.9 6 6.6 1-4.8 4.6 1.1 6.6-5.8-3.1-5.8 3.1 1.1-6.6-4.8-4.6 6.6-1z'/%3E%3C/svg%3E"); }
.fa-gem { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 4h11L22 9l-10 12L2 9l4.5-5Zm1 2L5 9l7 8.4L19 9l-2.5-3h-9Z'/%3E%3C/svg%3E"); }
.fa-plus { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E"); }
.fa-phone { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 2.5 10 6 7.8 8.6c1.2 2.5 3.1 4.4 5.6 5.6L16 12l3.5 3.4-1 4.6c-.2.9-1 1.5-1.9 1.4C8.7 20.6 3.4 15.3 2.6 7.4c-.1-.9.5-1.7 1.4-1.9l2.6-3Z'/%3E%3C/svg%3E"); }
.fa-whatsapp { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a8.7 8.7 0 0 0-7.4 13.3L3.5 21l4.9-1.1A8.7 8.7 0 1 0 12 3Zm4.9 12.5c-.2.7-1.2 1.2-1.9 1.3-.5.1-1.2.1-3.5-.9-2.9-1.2-4.8-4.2-5-4.4-.1-.2-1.2-1.6-1.2-3.1 0-1.4.7-2.1 1-2.4.2-.3.6-.4.9-.4h.6c.2 0 .5 0 .7.6.3.7.9 2.1 1 2.3.1.2.1.5 0 .7-.2.3-.3.5-.5.7-.2.2-.4.4-.2.7.2.3.8 1.4 1.8 2.2 1.2 1.1 2.2 1.4 2.6 1.6.3.1.6.1.8-.1.2-.3.9-1 1.1-1.3.2-.3.5-.2.8-.1l2 1c.3.2.5.3.6.5.1.1.1.8-.1 1.5Z'/%3E%3C/svg%3E"); }
.fa-paper-plane { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.7 3.3 2.3 10.8c-1 .4-1 1.8.1 2.1l5.1 1.6 1.9 5.8c.3.9 1.5 1 2 .2l2.7-3.6 4.8 3.5c.8.6 1.9.1 2.1-.9l2.8-14.7c.2-1-.8-1.8-1.8-1.5ZM9 13.7l8.7-6.3-6.8 8.1-.8 2.3-1.1-4.1Z'/%3E%3C/svg%3E"); }
.fa-cookie-bite { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 12.7A8.5 8.5 0 1 1 11.3 3.5 4 4 0 0 0 16 8.2a4 4 0 0 0 4.5 4.5ZM8 10a1.2 1.2 0 1 0 0-2.4A1.2 1.2 0 0 0 8 10Zm2 6a1.2 1.2 0 1 0 0-2.4A1.2 1.2 0 0 0 10 16Zm5-2a1.2 1.2 0 1 0 0-2.4A1.2 1.2 0 0 0 15 14Z'/%3E%3C/svg%3E"); }
.fa-up-right-and-down-left-from-center { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3h7v7h-2V6.4l-5.3 5.3-1.4-1.4L17.6 5H14V3ZM5 14v3.6l5.3-5.3 1.4 1.4L6.4 19H10v2H3v-7h2Z'/%3E%3C/svg%3E"); }
.fa-images { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h13v10H4V5Zm2 2v6h9V7H6Z'/%3E%3Cpath d='M7 17h13V8h2v11H7v-2Z'/%3E%3Cpath d='m7 12 2.3-2.5 2 2 1.2-1.2L15 13H6l1-1Z'/%3E%3C/svg%3E"); }
.fa-spinner { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 0 1 10 10h-3a7 7 0 0 0-7-7V2Z'/%3E%3Cpath opacity='.35' d='M12 22A10 10 0 0 1 12 2v3a7 7 0 1 0 7 7h3a10 10 0 0 1-10 10Z'/%3E%3C/svg%3E"); }
.fa-spin::before { animation: local-fa-spin .8s linear infinite; }

.fa-bullhorn { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10v4h3l9 4V6l-9 4H4Zm15-2v8h2V8h-2ZM7 15l1.4 4H11l-1.5-4H7Z'/%3E%3C/svg%3E"); }
.fa-hand-pointer { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2a2 2 0 0 1 2 2v6.2l1.1-.7a2 2 0 0 1 2.6.4l.3.4.8-.4a2 2 0 0 1 2.7 1l.4 1a4 4 0 0 1-.2 3.4l-2.1 4.1A5 5 0 0 1 14.1 22h-3.4a5 5 0 0 1-4.4-2.6L3.6 14a2 2 0 0 1 3.1-2.4L9 13.4V4a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E"); }
.fa-shield-heart { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 4 5v6c0 5.2 3.3 9.4 8 11 4.7-1.6 8-5.8 8-11V5l-8-3Zm0 7.2c1.2-1.6 4-1 4 1.5 0 2-2.2 3.6-4 5.1-1.8-1.5-4-3.1-4-5.1 0-2.5 2.8-3.1 4-1.5Z'/%3E%3C/svg%3E"); }
.fa-user-ninja { --svg-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a7 7 0 0 0-7 7v1h14v-1a7 7 0 0 0-7-7Zm-6.7 10A7 7 0 0 0 12 19a7 7 0 0 0 6.7-6H5.3ZM8 11c.6-1 1.5-1.5 2.5-1.5S12.4 10 13 11H8Zm3.2 0c.2-.3.5-.5.8-.5s.6.2.8.5h-1.6Z'/%3E%3C/svg%3E"); }

/* Conversion polish after light redesign. */
.hero-shell {
  display: block !important;
  max-width: none !important;
}

.hero-copy {
  min-width: 0 !important;
  max-width: 920px !important;
}

.hero-copy h1 {
  max-width: 920px !important;
  font-size: clamp(64px, 6.2vw, 98px) !important;
  line-height: .94 !important;
}

.hero-copy > p {
  max-width: 700px !important;
  font-size: clamp(18px, 1.55vw, 23px) !important;
}

.hero-copy .hero-btns {
  margin-top: 26px !important;
}

.hero-copy .hero-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: none !important;
  margin-top: 26px !important;
}

.hero-copy .hero-stat {
  min-height: 116px !important;
  padding: 20px !important;
}

.hero-copy .hero-stat-label {
  max-width: 220px !important;
  line-height: 1.35 !important;
}

.hero-launch-map {
  display: none !important;
  position: relative !important;
  gap: 12px !important;
  margin-top: clamp(18px, 5vw, 70px) !important;
  padding: clamp(22px, 3vw, 30px) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 88% 6%, rgba(213, 255, 87, .42), transparent 22%),
    linear-gradient(180deg, #f9fbf4 0%, #ffffff 100%) !important;
  border: 1px solid rgba(14, 124, 75, .16) !important;
  box-shadow: 0 18px 48px rgba(19, 27, 46, .09) !important;
}

.hero-launch-map::before {
  content: "" !important;
  position: absolute !important;
  inset: 28px auto 28px 43px !important;
  width: 2px !important;
  background: linear-gradient(180deg, rgba(14, 124, 75, .18), rgba(14, 124, 75, .03)) !important;
}

.hero-launch-map-label,
.hero-launch-map-footer {
  position: relative !important;
  width: fit-content !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: rgba(213, 255, 87, .72) !important;
  color: var(--text-main) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.hero-launch-map-footer {
  margin-top: 4px !important;
  background: rgba(14, 124, 75, .09) !important;
  color: #075f3a !important;
}

.hero-launch-step {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 10px 12px !important;
  align-items: start !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .78) !important;
  border: 1px solid rgba(19, 27, 46, .08) !important;
}

.hero-launch-step > span {
  grid-row: span 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 15px !important;
  background: rgba(14, 124, 75, .10) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(14, 124, 75, .18) !important;
}

.hero-launch-step strong {
  color: var(--text-main) !important;
  font-size: 16px !important;
  line-height: 1.18 !important;
}

.hero-launch-step p {
  margin: 0 !important;
  color: var(--text-muted) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.lead-magnet-mini,
.lead-magnet-mini span,
.compare-pill,
.compare-chip {
  color: #075f3a !important;
  background: rgba(14, 124, 75, .10) !important;
  border-color: rgba(14, 124, 75, .24) !important;
}

.form-input[name="project_context"],
.form-field[name="project_context"] {
  grid-column: 1 / -1 !important;
}

.b-check {
  font-size: 0 !important;
  color: var(--primary) !important;
}

.b-check::before,
.trust-strip span::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.2 16.6-4-4L3.8 14l5.4 5.4L21 7.6 19.6 6.2z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.2 16.6-4-4L3.8 14l5.4 5.4L21 7.6 19.6 6.2z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.trust-strip span {
  color: #075f3a !important;
  background: rgba(14, 124, 75, .08) !important;
  border-color: rgba(14, 124, 75, .18) !important;
}

.side-card,
.service-cta,
.cta-card,
.side-cta {
  background:
    radial-gradient(circle at 88% 18%, rgba(14, 124, 75, .13), transparent 22%),
    linear-gradient(135deg, #ffffff 0%, #f7fbf4 100%) !important;
  border: 1px solid rgba(14, 124, 75, .18) !important;
  box-shadow: 0 18px 48px rgba(19, 27, 46, .09) !important;
}

.side-card h2,
.service-cta h2,
.cta-card h2,
.side-cta h2 {
  color: var(--text-main) !important;
}

.table-scroll {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 22px !important;
  border: 1px solid rgba(19, 27, 46, .09) !important;
  background: #ffffff !important;
}

.table-scroll table {
  min-width: 640px !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table-scroll th {
  background: #eef6eb !important;
  color: var(--text-main) !important;
  font-weight: 900 !important;
}

.table-scroll th,
.table-scroll td {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(19, 27, 46, .08) !important;
  color: var(--text-main) !important;
  background: #ffffff !important;
  vertical-align: top !important;
}

.table-scroll td:first-child {
  color: var(--text-main) !important;
  font-weight: 900 !important;
  background: #f7fbf4 !important;
}

.table-scroll td:last-child {
  color: var(--text-muted) !important;
}

.table-scroll tr:last-child td {
  border-bottom: 0 !important;
}

@media (max-width: 860px) {
  .hero-shell {
    grid-template-columns: 1fr !important;
  }

  .hero-copy h1 {
    font-size: clamp(44px, 13vw, 60px) !important;
  }

  .hero-launch-map {
    margin-top: 8px !important;
  }

  .hero-launch-map::before {
    display: none !important;
  }

  .mobile-cta {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 45 !important;
  }

  .mobile-cta .button {
    min-height: 56px !important;
    box-shadow: 0 16px 34px rgba(14, 124, 75, .26) !important;
  }

  body:has(.mobile-cta) {
    padding-bottom: 86px !important;
  }

  .table-scroll table,
  .table-scroll thead,
  .table-scroll tbody,
  .table-scroll tr,
  .table-scroll th,
  .table-scroll td {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .table-scroll thead {
    display: none !important;
  }

  .table-scroll tr {
    padding: 14px !important;
    border-bottom: 1px solid rgba(19, 27, 46, .08) !important;
  }

  .table-scroll td {
    padding: 7px 0 !important;
    border: 0 !important;
  }

  .table-scroll td:first-child {
    color: var(--text-main) !important;
    font-weight: 900 !important;
  }

  .table-scroll td:last-child {
    color: var(--primary) !important;
    font-size: 20px !important;
    font-weight: 950 !important;
  }
}

@media (min-width: 861px) and (max-width: 1220px) {
  .hero-shell {
    grid-template-columns: 1fr !important;
  }

  .hero-copy {
    max-width: 860px !important;
  }

  .hero-copy .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: none !important;
  }

  .hero-launch-map {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-content {
    border-radius: 30px !important;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 28px, 1180px) !important;
  }

  .hero-content,
  body:has(.toc) .hero.container,
  body:has(.cat-block) .hero.container,
  .toc,
  .cat-block {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  .hero-stats,
  .hero-proof-grid {
    grid-template-columns: 1fr !important;
  }

  .lead-magnet-shell,
  .manual-audit-grid {
    grid-template-columns: 1fr !important;
  }

  .lead-magnet-mini-grid {
    grid-template-columns: 1fr !important;
  }

  .proof-cases-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-btns .btn,
  .hero-actions .btn,
  .btn-primary,
  .button {
    width: 100% !important;
    justify-content: center !important;
  }

  body:has(.toc) h1,
  body:has(.cat-block) h1,
  .hero-title {
    font-size: clamp(38px, 12vw, 56px) !important;
  }
}

/* Final portfolio repair: keep previews rectangular and captions readable. */
.portfolio-section {
  padding-top: clamp(72px, 8vw, 112px) !important;
}

.portfolio-head {
  max-width: 980px !important;
  margin: 0 auto clamp(34px, 5vw, 54px) !important;
  text-align: center !important;
}

.portfolio-intro {
  color: var(--text-muted) !important;
}

.portfolio-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
  gap: 26px !important;
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

.portfolio-card {
  opacity: 1 !important;
  height: auto !important;
  transform: none !important;
}

.portfolio-card-link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  box-shadow: 0 16px 42px rgba(19, 27, 46, .08) !important;
  color: var(--text-main) !important;
  transform: none !important;
}

.portfolio-card-link:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(14, 124, 75, .32) !important;
  box-shadow: 0 24px 56px rgba(19, 27, 46, .12) !important;
}

.portfolio-preview {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #eef1f5 !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

.portfolio-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 0 !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  transform: none !important;
  background: #eef1f5 !important;
}

.portfolio-card-link:hover .portfolio-preview img {
  transform: scale(1.025) !important;
}

.portfolio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.portfolio-overlay {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2 !important;
}

.portfolio-open {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: rgba(19, 27, 46, .84) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(19, 27, 46, .18) !important;
}

.portfolio-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 74px !important;
  padding: 16px 18px !important;
  background: #ffffff !important;
  color: var(--text-main) !important;
  border-top: 1px solid rgba(19, 27, 46, .08) !important;
}

.portfolio-index {
  background: rgba(213, 255, 87, .62) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.portfolio-action {
  min-width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--text-main) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}

.portfolio-action i {
  color: var(--primary) !important;
}

/* Pricing quiz: full light-theme repair */
.pricing-quiz {
  background:
    radial-gradient(circle at 8% 0%, rgba(14, 124, 75, .10), transparent 32%),
    radial-gradient(circle at 100% 10%, rgba(213, 255, 87, .38), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #f7faf4 100%) !important;
  border: 1px solid rgba(14, 124, 75, .18) !important;
  box-shadow: 0 28px 70px rgba(19, 27, 46, .12) !important;
}

.pricing-quiz::before,
.quiz-result::after {
  display: none !important;
}

.quiz-panel,
.quiz-result {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  box-shadow: 0 18px 48px rgba(19, 27, 46, .09) !important;
  color: var(--text-main) !important;
  backdrop-filter: none !important;
}

.quiz-eyebrow {
  width: fit-content !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  background: rgba(213, 255, 87, .68) !important;
  border: 1px solid rgba(14, 124, 75, .22) !important;
  color: var(--text-main) !important;
}

.pricing-quiz h3,
.quiz-question,
.quiz-result-title,
.quiz-bonus-item strong {
  color: var(--text-main) !important;
  text-shadow: none !important;
}

.quiz-lead,
.quiz-option span,
.quiz-discount-text,
.quiz-result-text,
.quiz-result-list li,
.quiz-note,
.quiz-bonus-desc {
  color: var(--text-muted) !important;
  text-shadow: none !important;
}

.quiz-progress-top,
.quiz-result-label {
  color: rgba(19, 27, 46, .62) !important;
}

.quiz-progress-track {
  background: rgba(19, 27, 46, .08) !important;
}

.quiz-progress-fill {
  background: linear-gradient(90deg, #d5ff57 0%, #0e7c4b 100%) !important;
  box-shadow: none !important;
}

.quiz-option {
  background: #ffffff !important;
  border: 1px solid rgba(19, 27, 46, .12) !important;
  color: var(--text-main) !important;
  box-shadow: 0 10px 26px rgba(19, 27, 46, .055) !important;
}

.quiz-option:hover,
.quiz-option.active {
  background: rgba(14, 124, 75, .055) !important;
  border-color: rgba(14, 124, 75, .40) !important;
  box-shadow: 0 16px 34px rgba(19, 27, 46, .09) !important;
}

.quiz-back,
.quiz-reset {
  color: rgba(19, 27, 46, .60) !important;
}

.quiz-back:hover,
.quiz-reset:hover {
  color: var(--primary) !important;
}

.quiz-discount-box {
  background:
    radial-gradient(circle at 88% 0%, rgba(213, 255, 87, .46), transparent 46%),
    linear-gradient(135deg, rgba(14, 124, 75, .08), rgba(213, 255, 87, .18)) !important;
  border: 1px solid rgba(14, 124, 75, .20) !important;
}

.quiz-discount-value,
.quiz-result-price,
.quiz-result-discount,
.quiz-result-list i {
  color: var(--primary) !important;
  text-shadow: none !important;
}

.quiz-result-price span {
  color: rgba(19, 27, 46, .52) !important;
}

.quiz-result-discount {
  background: rgba(14, 124, 75, .08) !important;
  border: 1px solid rgba(14, 124, 75, .18) !important;
}

.quiz-discount-step {
  background: #f2f5f0 !important;
  border: 1px solid rgba(19, 27, 46, .12) !important;
  color: var(--text-main) !important;
}

.quiz-discount-step.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

.quiz-bonus-item {
  align-items: flex-start !important;
  background: #ffffff !important;
  border: 1px solid rgba(19, 27, 46, .10) !important;
  box-shadow: 0 12px 28px rgba(19, 27, 46, .06) !important;
}

.quiz-bonus-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  color: var(--primary) !important;
  background: rgba(14, 124, 75, .08) !important;
  box-shadow: inset 0 0 0 1px rgba(14, 124, 75, .18) !important;
}

.quiz-bonus-icon i {
  width: 21px !important;
  height: 21px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  background: transparent !important;
  font-size: 18px !important;
}

.quiz-bonus-icon i::before {
  width: 21px !important;
  height: 21px !important;
  background: currentColor !important;
}

.quiz-bonus-tag {
  background: rgba(213, 255, 87, .74) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(14, 124, 75, .16) !important;
}

.quiz-result-actions .btn-primary {
  background: var(--primary) !important;
  color: #ffffff !important;
}

@media (max-width: 860px) {
  .pricing-quiz {
    padding: 16px !important;
    border-radius: 26px !important;
  }

  .quiz-panel,
  .quiz-result {
    padding: 20px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 980px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .portfolio-grid {
    grid-template-columns: 1fr !important;
  }
}

/* SEO service case slider */
.seo-results-slider {
  margin: clamp(34px, 6vw, 72px) 0;
  padding: clamp(18px, 3.2vw, 34px);
  border: 1px solid rgba(14, 124, 75, .18);
  border-radius: clamp(26px, 4vw, 42px);
  background:
    radial-gradient(circle at 12% 0%, rgba(213, 255, 87, .22), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(14, 124, 75, .10), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f6faf5 55%, #eef6f0 100%);
  box-shadow: 0 28px 80px rgba(19, 27, 46, .10);
  overflow: hidden;
}

.seo-results-slider.container {
  margin: clamp(34px, 6vw, 72px) auto;
}

.seo-results-head {
  max-width: 980px;
  margin: 0 auto clamp(18px, 2.7vw, 28px);
  text-align: center;
}

.seo-results-kicker,
.seo-case-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid rgba(14, 124, 75, .20);
  border-radius: 999px;
  background: rgba(213, 255, 87, .72);
  color: #13210f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.seo-results-kicker {
  padding: 8px 13px;
  margin-bottom: 10px;
}

.seo-case-label {
  padding: 8px 12px;
  margin-bottom: 16px;
}

.seo-results-head h2 {
  max-width: 820px;
  margin: 0 auto 10px;
  color: var(--text-main);
  font-size: clamp(28px, 3.55vw, 46px);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.seo-results-head p {
  margin: 0 auto 6px;
  color: var(--text-muted);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.52;
}

.seo-results-head p {
  max-width: 760px;
}

.seo-results-shell {
  position: relative;
}

.seo-results-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.seo-results-track::-webkit-scrollbar {
  display: none;
}

.seo-case-card {
  flex: 0 0 min(980px, 100%);
  scroll-snap-align: start;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(19, 27, 46, .10);
  border-radius: 30px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 48px rgba(19, 27, 46, .10);
}

.seo-case-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.seo-case-top h3 {
  margin: 0 0 14px;
  color: var(--text-main);
  font-size: clamp(27px, 3.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.seo-case-top p,
.seo-case-body p,
.seo-case-body li {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.62;
}

.seo-case-growth {
  display: grid;
  place-items: center;
  min-width: 110px;
  min-height: 110px;
  padding: 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 28% 20%, rgba(213, 255, 87, .70), transparent 42%),
    linear-gradient(135deg, #0e7c4b, #0a673f);
  color: #ffffff;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 950;
  letter-spacing: -.04em;
  box-shadow: 0 18px 42px rgba(14, 124, 75, .24);
}

.seo-case-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0;
}

.seo-case-metrics div {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(14, 124, 75, .16);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(14, 124, 75, .07), rgba(213, 255, 87, .14));
}

.seo-case-metrics strong {
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
  font-size: clamp(23px, 2.45vw, 34px);
  line-height: 1;
  letter-spacing: -.06em;
  white-space: nowrap;
}

.seo-case-metrics span {
  display: block;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.35;
}

.seo-case-body {
  display: block;
  max-width: 780px;
}

.seo-case-body > div {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.seo-case-body h4 {
  margin: 0 0 14px;
  color: var(--text-main);
}

.seo-case-body h4,
.seo-case-body p,
.seo-case-body li {
  text-align: left;
}

.seo-case-body ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-case-body li {
  position: relative;
  padding-left: 24px;
}

.seo-case-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(14, 124, 75, .10);
}

.seo-case-result {
  margin-top: 24px;
  padding: 18px 20px !important;
  border: 1px solid rgba(14, 124, 75, .16) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(14, 124, 75, .05), rgba(213, 255, 87, .10)) !important;
}

.seo-case-result b {
  color: var(--text-main);
}

.seo-results-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.seo-results-arrow {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(14, 124, 75, .22);
  border-radius: 50%;
  background: #ffffff;
  color: var(--primary);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(19, 27, 46, .08);
}

.seo-results-arrow:hover {
  background: var(--primary);
  color: #ffffff;
}

.seo-results-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 520px;
}

.seo-results-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(19, 27, 46, .18);
  cursor: pointer;
}

.seo-results-dot.is-active {
  width: 34px;
  background: var(--primary);
}

@media (max-width: 860px) {
  .seo-case-top,
  .seo-case-body {
    grid-template-columns: 1fr;
  }

  .seo-case-growth {
    min-width: 0;
    min-height: 0;
    width: fit-content;
    padding: 12px 18px;
    border-radius: 999px;
  }

  .seo-case-metrics {
    grid-template-columns: 1fr;
  }
}