/* ═══════════════════════════════════════════════════════════════
   FINSMILE — BRAND UPDATE v2.0
   Базується на оновленій кольоровій гамі з дизайн-системи:
   Deep Green #0F3D2E | Sage Green #2E6B57 | Soft Green #A8C3B0
   Light Green #E8F0EA | Ivory #F6F7F4 | Graphite #1F2937 | Cool Gray #6B7280
   Шрифти: Playfair Display (заголовки) + Inter (основний текст)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. GOOGLE FONTS ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── 2. BRAND TOKENS (CSS Variables) ─────────────────────── */
:root {
  /* Palette */
  --brand-deep:    #0F3D2E;
  --brand-sage:    #2E6B57;
  --brand-soft:    #A8C3B0;
  --brand-light:   #E8F0EA;
  --brand-ivory:   #F6F7F4;
  --brand-graph:   #1F2937;
  --brand-cgray:   #6B7280;
  --brand-white:   #FFFFFF;
  --brand-border:  #E2E8F0;

  /* Override main-shared tokens */
  --g:    #2E6B57;
  --gd:   #0F3D2E;
  --gl:   #E8F0EA;
  --gll:  #F6F7F4;
  --navy: #0F3D2E;
  --navy2:#2E6B57;
  --navy3:#1F2937;
  --text: #1F2937;
  --sub:  #6B7280;

  /* Shadows */
  --sh:   0 2px 12px rgba(15,61,46,.06);
  --sh2:  0 8px 32px rgba(15,61,46,.10);
  --shg:  0 12px 40px rgba(46,107,87,.22);
  --sh3:  0 24px 64px rgba(15,61,46,.14);

  /* Radius */
  --r:  10px;
  --rl: 16px;
  --rx: 22px;

  /* Typography */
  --fh: 'Playfair Display', Georgia, serif;
  --fb: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── 3. BASE TYPOGRAPHY ──────────────────────────────────── */
body {
  font-family: var(--fb) !important;
  color: var(--brand-graph) !important;
  background: var(--brand-white) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

h1, h2, h3, h4, h5, h6,
.s-title, .section-title, .svc-title,
.feature-title, .price-name, .process-title,
.faq-q-txt, .fs-faq-q, .faq-q,
.step-title, .adv-title, .rev-name,
.ph-title, .page-title, .hero-title,
.card-h, .sb-title, .con-title,
.footer-col-title, .ft-col-t,
.vis-title, .form-head {
  font-family: var(--fh) !important;
  color: var(--brand-graph) !important;
}

p, li, span, label, input, textarea, select, button {
  font-family: var(--fb) !important;
}

/* ── 4. КОЛЬОРОВІ АКЦЕНТИ ────────────────────────────────── */
.text-green, .text-grad, .grad-text,
.h-stat-n em, .stat-num em,
.s-title em, .s-title span,
.hero-title .hl, .hero h1 span, .hero h1 em,
.svc-hero h1 span, .svc-hero h1 em,
.page-hero h1 span, .page-hero h1 em {
  color: var(--brand-soft) !important;
  font-style: normal !important;
  -webkit-text-fill-color: var(--brand-soft) !important;
}

/* Gradient text override */
.text-grad, .grad-text {
  background: linear-gradient(135deg, var(--brand-sage) 0%, var(--brand-soft) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── 5. BUTTONS ──────────────────────────────────────────── */
/* Primary */
.btn-p, .btn-primary {
  background: var(--brand-sage) !important;
  border-color: var(--brand-sage) !important;
  color: #fff !important;
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  border-radius: 999px !important;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}
.btn-p:hover, .btn-primary:hover {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  box-shadow: 0 8px 28px rgba(46,107,87,.38) !important;
  transform: translateY(-2px) !important;
}

/* Secondary / outline */
.btn-o, .btn-outline {
  background: transparent !important;
  color: var(--brand-sage) !important;
  border: 2px solid var(--brand-sage) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.btn-o:hover, .btn-outline:hover {
  background: var(--brand-sage) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* Ghost / pill (hint button) */
.btn-ghost, .btn-gh {
  background: rgba(255,255,255,.1) !important;
  border: 2px solid rgb(46 107 87 / 69%)!important;
  color: #000 !important;
  border-radius: 999px !important;
}
.btn-ghost:hover, .btn-gh:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.5) !important;
}

/* Dark */
.btn-n, .btn-dark {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.btn-n:hover, .btn-dark:hover {
  background: var(--brand-sage) !important;
  border-color: var(--brand-sage) !important;
  transform: translateY(-2px) !important;
}

/* White */
.btn-white {
  background: #fff !important;
  color: var(--brand-deep) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
}
.btn-white:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,.18) !important;
  transform: translateY(-2px) !important;
}

/* ── 6. HEADER / NAV ─────────────────────────────────────── */
.fs-header {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid var(--brand-border) !important;
  backdrop-filter: blur(24px) !important;
}
.fs-header.scrolled {
  box-shadow: 0 2px 24px rgba(15,61,46,.08) !important;
}
.fs-nav-link {
  font-family: var(--fb) !important;
  font-weight: 600 !important;
  color: var(--brand-cgray) !important;
}
.fs-nav-link:hover, .fs-nav-link.active {
  color: var(--brand-sage) !important;
  background: var(--brand-light) !important;
}
.fs-nav-link.active::after {
  background: var(--brand-sage) !important;
}
.fs-drop {
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--rx) !important;
  box-shadow: 0 12px 48px rgba(15,61,46,.12) !important;
}
.fs-drop-item:hover {
  background: var(--brand-light) !important;
}
.fs-drop-item:hover .fs-drop-ico {
  background: var(--brand-sage) !important;
}
.fs-drop-ico {
  background: var(--brand-light) !important;
}
.fs-drop-text strong {
  color: var(--brand-deep) !important;
}

/* Mobile nav */
.mn-pill.ph { border-color: var(--brand-sage) !important; color: var(--brand-sage) !important; }
.mn-pill.ph:hover { background: var(--brand-sage) !important; color: #fff !important; }
.mn-card:hover { border-color: var(--brand-sage) !important; background: var(--brand-light) !important; }
.mn-link:hover { color: var(--brand-sage) !important; }
.mn-card-price { color: var(--brand-sage) !important; }

/* ── 7. HERO — ALL VARIANTS ──────────────────────────────── */
.hero {
  background: linear-gradient(145deg, #0F3D2E 0%, #2E6B57 40%, #A8C3B0 100%) !important;
}
.hero h1 { color: #fff !important; font-family: var(--fh) !important; }
.hero h1 span, .hero h1 em { color: var(--brand-soft) !important; font-style: normal !important; }
.hero-sub { color: rgba(255,255,255,.72) !important; font-family: var(--fb) !important; }
.hero-badge {
  background: rgba(168,195,176,.14) !important;
  border-color: rgba(168,195,176,.32) !important;
  color: var(--brand-soft) !important;
}
.hero-badge::before { background: var(--brand-soft) !important; }
.h-stat-n { color: var(--brand-soft) !important; }
.h-stat-l { color: rgba(255,255,255,.5) !important; }
.hero-stats { border-top-color: rgba(255,255,255,.1) !important; }
.h-stat { border-right-color: rgba(255,255,255,.1) !important; }
.hero-card {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.hero-card-name { color: #fff !important; }
.hero-card-role { color: rgba(255,255,255,.5) !important; }
.hero-card-row {
  color: rgba(255,255,255,.8) !important;
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.hero-card-row strong { color: var(--brand-soft) !important; }

/* Page hero */
.page-hero {
  background: linear-gradient(145deg, #0F3D2E 0%, #2E6B57 40%, #A8C3B0 100%) !important;
  border-bottom-color: rgba(168,195,176,.12) !important;
}
.page-hero h1, .page-hero h1 span, .page-hero h1 em { color: #fff !important; font-family: var(--fh) !important; }
.page-hero h1 span, .page-hero h1 em { color: var(--brand-soft) !important; }
.page-hero p { color: rgba(255,255,255,.7) !important; }

/* Service hero variants */
.svc-hero, .svc-hero-navy, .svc-hero-green, .svc-hero-blue,
.svc-hero-purple, .svc-hero-teal {
  background: linear-gradient(145deg, #0F3D2E 0%, #2E6B57 40%, #A8C3B0 100%) !important;
}
.svc-hero h1 { color: #fff !important; }
.svc-hero h1 span, .svc-hero h1 em { color: var(--brand-soft) !important; font-style: normal !important; }
.svc-hero-desc { color: rgba(255,255,255,.72) !important; }
.svc-hero-price { color: var(--brand-soft) !important; }
.svc-hero-badge {
  background: rgba(168,195,176,.15) !important;
  border-color: rgba(168,195,176,.3) !important;
  color: var(--brand-soft) !important;
}
.svc-hero-badge::before { background: var(--brand-soft) !important; }
.svc-hero-card {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.svc-hero-card-item {
  color: rgba(255,255,255,.8) !important;
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.07) !important;
}
.svc-hero-card-item strong { color: var(--brand-soft) !important; }

/* ── 8. TRUST BAR ─────────────────────────────────────────── */
.trust-bar {
  background: rgba(15,61,46,.97) !important;
  border-color: rgba(168,195,176,.15) !important;
}
.trust-bar .trust-item { color: rgba(255,255,255,.65) !important; }
.trust-bar .trust-item strong { color: #fff !important; }
.trust-bar .trust-item-ico {
  background: rgba(168,195,176,.15) !important;
  border-color: rgba(168,195,176,.25) !important;
}

/* ── 9. SERVICE CARDS ─────────────────────────────────────── */
.svc-card, .feature-card, .why-card,
.benefit-card, .card, .process-card-v2 {
  background: #fff !important;
  border-color: var(--brand-border) !important;
  border-radius: var(--rx) !important;
}
.svc-card:hover, .feature-card:hover {
  border-color: rgba(46,107,87,.3) !important;
  box-shadow: 0 16px 48px rgba(15,61,46,.1) !important;
  transform: translateY(-5px) !important;
}
.svc-card::after, .feature-card::after,
.svc-card-v2-line {
  background: linear-gradient(90deg, var(--brand-sage), var(--brand-soft)) !important;
}
.feature-ico {
  background: var(--brand-light) !important;
  border-radius: var(--r) !important;
}
.feature-card:hover .feature-ico {
  background: var(--brand-sage) !important;
}
.svc-icon {
  background: var(--brand-light) !important;
}
.svc-card:hover .svc-icon {
  background: var(--brand-sage) !important;
}
.svc-title {
  color: var(--brand-graph) !important;
}
.svc-price, .feature-price {
  color: var(--brand-sage) !important;
}

/* ── 10. SECTION BADGE & TITLE ───────────────────────────── */
.s-badge {
  background: var(--brand-light) !important;
  border-color: rgba(46,107,87,.25) !important;
  color: var(--brand-deep) !important;
}
.s-badge::before { background: var(--brand-sage) !important; }
.s-title em, .s-title span { color: var(--brand-sage) !important; }
.section-title { color: var(--brand-graph) !important; font-family: var(--fh) !important; }
.section-label { color: var(--brand-sage) !important; }
.section-label::before { background: var(--brand-sage) !important; }

/* ── 11. HOW IT WORKS / STEPS ────────────────────────────── */
.step-num {
  background: var(--brand-light) !important;
  border: 2px solid var(--brand-sage) !important;
  color: var(--brand-sage) !important;
}
.how-step:hover .step-num {
  background: var(--brand-sage) !important;
  color: #fff !important;
}
.num-badge, .process-num {
  background: linear-gradient(135deg, var(--brand-sage), var(--brand-deep)) !important;
  box-shadow: 0 6px 20px rgba(46,107,87,.3) !important;
}
.process-card-v2:hover .process-num {
  transform: scale(1.08) rotate(-5deg) !important;
}
.proc-num {
  background: var(--brand-deep) !important;
  color: var(--brand-soft) !important;
}
.proc-box:hover {
  box-shadow: var(--sh2) !important;
  border-color: rgba(46,107,87,.25) !important;
}

/* ── 12. PRICING CARDS ───────────────────────────────────── */
.price-card {
  background: #fff !important;
  border: 1.5px solid var(--brand-border) !important;
  border-radius: var(--rx) !important;
}
.price-card.feat, .price-card.pop {
  border-color: var(--brand-sage) !important;
  box-shadow: 0 0 0 4px rgba(46,107,87,.1) !important;
}
.price-card.pop {
  background: var(--brand-deep) !important;
}
.price-card:hover { box-shadow: var(--sh2) !important; }
.price-badge, .pop-badge {
  background: linear-gradient(90deg, var(--brand-sage), var(--brand-deep)) !important;
  color: #fff !important;
}
.price-name { color: var(--brand-sage) !important; }
.price-amt, .price-amount { color: var(--brand-graph) !important; }
.price-card.pop .price-amount,
.price-card.pop .price-amt { color: #fff !important; }
.price-feat::before, .price-feat-ic { color: var(--brand-sage) !important; }
.price-per, .price-card.pop .price-per { color: var(--brand-cgray) !important; }
.price-card.pop .price-per { color: rgba(255,255,255,.45) !important; }
.price-div { background: var(--brand-border) !important; }
.price-card.pop .price-div { background: rgba(255,255,255,.1) !important; }

/* ── 13. REVIEWS / TESTIMONIALS ─────────────────────────── */
.rev-card, .review-card, .review-card-v2 {
  background: #fff !important;
  border-color: var(--brand-border) !important;
  border-radius: var(--rx) !important;
}
.review-card-v2:hover {
  box-shadow: 0 20px 56px rgba(15,61,46,.1) !important;
  border-color: rgba(46,107,87,.2) !important;
}
.review-card-v2::before { color: var(--brand-light) !important; }
.review-card-v2:hover::before { color: rgba(46,107,87,.12) !important; }
.rev-stars span, .rv2-stars { color: #F59E0B !important; }
.rev-avatar, .review-avatar {
  background: var(--brand-light) !important;
  color: var(--brand-sage) !important;
  border-color: rgba(46,107,87,.3) !important;
}
.rev-name, .rv2-name { color: var(--brand-deep) !important; }
.review-verified {
  background: var(--brand-light) !important;
  color: var(--brand-deep) !important;
}

/* ── 14. FAQ ─────────────────────────────────────────────── */
.faq-item, .fs-faq-item, .svc-faq-item {
  border-color: var(--brand-border) !important;
  border-radius: var(--rl) !important;
}
.faq-item.open, .fs-faq-item.open, .svc-faq-item.open {
  border-color: var(--brand-sage) !important;
  box-shadow: 0 0 0 3px rgba(46,107,87,.08) !important;
}
.faq-q:hover, .fs-faq-q:hover { color: var(--brand-sage) !important; }
.faq-item.open .faq-ico,
.fs-faq-item.open .fs-faq-icon,
.svc-faq-item.open .svc-faq-icon {
  background: var(--brand-sage) !important;
  border-color: var(--brand-sage) !important;
  color: #fff !important;
}

/* ── 15. CONTACT / CTA FORM ──────────────────────────────── */
.lead-section,
.cta-section,
.svc-cta,
.vf-cta,
.grant-get-cta,
.gcta-section {
  background: linear-gradient(150deg, #ffffff 0%, #E8F0EA 50%, #ffffff 100%) !important;
}
.lead-section h2, .cta-section h2,
.svc-cta h2, .vf-cta h2 { color: #6B7280 !important; }
.lead-section p, .cta-section p,
.svc-cta p, .vf-cta p { color: #6B7280 !important; }

.f-input, .f-textarea, .f-select,
.form-input {
  border-color: var(--brand-border) !important;
  background: var(--brand-ivory) !important;
  color: var(--brand-graph) !important;
  font-family: var(--fb) !important;
  border-radius: var(--r) !important;
}
.f-input:focus, .f-textarea:focus, .f-select:focus,
.form-input:focus {
  border-color: var(--brand-sage) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(46,107,87,.1) !important;
}
/* Dark form (on dark bg) */
.lead-form-wrap .f-input,
.lead-form-wrap .f-textarea,
.cta-form-v2 .form-input {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.lead-form-wrap .f-input:focus,
.lead-form-wrap .f-textarea:focus,
.cta-form-v2 .form-input:focus {
  border-color: var(--brand-soft) !important;
  background: rgba(255,255,255,.1) !important;
}
.lead-form-wrap .f-input::placeholder,
.lead-form-wrap .f-textarea::placeholder,
.cta-form-v2 .form-input::placeholder { color: rgba(255,255,255,.3) !important; }

/* ── 16. CONTACT CARDS ───────────────────────────────────── */
.con-card {
  background: #fff !important;
  border-color: var(--brand-border) !important;
  border-radius: var(--rx) !important;
}
.con-icon { background: var(--brand-light) !important; }
.con-value { color: var(--brand-sage) !important; }
.con-title { color: var(--brand-graph) !important; }

/* ── 17. ADVANTAGES / DARK SECTION ──────────────────────── */
.advantages, .bg-dark {
  background: var(--brand-deep) !important;
}
.advantages .section-title,
.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: #fff !important; }
.adv-card {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.07) !important;
}
.adv-card:hover {
  background: rgba(168,195,176,.07) !important;
  border-color: rgba(168,195,176,.18) !important;
}
.adv-title { color: #fff !important; }
.adv-text { color: rgba(255,255,255,.55) !important; }

/* ── 18. STORY / OWNER SECTIONS ──────────────────────────── */
.story-section { background: #ffffff !important; }
.story-item-title { color: #fff !important; }
.story-item-text { color:rgba(0,0,0,.6) !important; }
.story-year { color: var(--brand-soft) !important; }
.story-dot {
  background: rgba(168,195,176,.15) !important;
  border-color: var(--brand-soft) !important;
  color: var(--brand-soft) !important;
}
.owner-story-section {
  background: linear-gradient(160deg, var(--brand-ivory) 0%, var(--brand-light) 100%) !important;
}
.owner-story-cert {
  background: linear-gradient(135deg, var(--brand-sage), var(--brand-deep)) !important;
  color: #fff !important;
}
.owner-story-quote {
  background: var(--brand-deep) !important;
  color: rgba(255,255,255,.85) !important;
  border-radius: var(--rl) !important;
}
.owner-story-quote::before { color: var(--brand-soft) !important; }
.osf-num { color: var(--brand-sage) !important; }

/* ── 19. EXPERT CARD (SIDEBAR) ───────────────────────────── */
.vf-exp-card {
  background: linear-gradient(155deg, var(--brand-deep), #2E6B57) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.vf-exp-name { color: #fff !important; }
.vf-exp-role { color: rgba(255,255,255,.5) !important; }
.vf-exp-row {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.8) !important;
}
.vf-exp-row strong { color: var(--brand-soft) !important; }
.vf-exp-img {
  border-color: var(--brand-soft) !important;
  box-shadow: 0 0 0 6px rgba(168,195,176,.15) !important;
}
.vm-n { color:#0F3D2E;!important; }
.vm-l { color:#2e6b57;!important; }
.vm-badge {
  background: rgba(168,195,176,.18) !important;
  border-color: rgba(168,195,176,.3) !important;
  color: var(--brand-soft) !important;
}
.vf-metric:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(168,195,176,.35) !important;
}

/* ── 20. TICKER / PROGRESS BAR ───────────────────────────── */
.ticker-wrap {
  background: var(--brand-deep) !important;
  border-color: rgba(168,195,176,.2) !important;
}
.ticker-item { color: rgba(255,255,255,.6) !important; }
.ticker-item span { color: var(--brand-soft) !important; }
#scrollProgress {
  background: linear-gradient(90deg, var(--brand-sage), var(--brand-soft)) !important;
}

/* ── 21. SPLASH SCREEN ───────────────────────────────────── */
#splash { background: var(--brand-deep) !important; }
.splash-fill {
  background: linear-gradient(90deg, var(--brand-sage), var(--brand-soft)) !important;
}
.splash-text { color: rgba(255,255,255,.4) !important; }

/* ── 22. FOOTER ──────────────────────────────────────────── */
.fs-footer {
  background: linear-gradient(190deg, #ffffff 0%, #c6dbd4 100%) !important;
  border-top: 1px solid rgba(168,195,176,.14) !important;
}
.fs-footer::before {
  background: linear-gradient(90deg, transparent, rgba(46,107,87,.35), transparent) !important;
}
.ft-link:hover, .ft-social:hover { color: var(--brand-soft) !important; }
.ft-social {
  border-color: rgb(49 46 46 / 12%) !important;
    color: rgb(0 0 0) !important;
}
.ft-social:hover {
  border-color: var(--brand-sage) !important;
  background: rgba(46,107,87,.1) !important;
  color: var(--brand-soft) !important;
}

/* ── 23. FLOATS & BACK TO TOP ────────────────────────────── */
.booking-float {
  background: var(--brand-deep) !important;
  border-color: var(--brand-soft) !important;
  color: #fff !important;
}
.booking-float:hover {
  background: var(--brand-sage) !important;
  transform: translateY(-2px) !important;
}
#backTop {
  background: linear-gradient(135deg, var(--brand-sage), var(--brand-deep)) !important;
  color: #fff !important;
  border: none !important;
}
#backTop:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(46,107,87,.5) !important;
}
.tg-float a {
  background: linear-gradient(135deg, #2aabee, #1d8fc4) !important;
}

/* ── 24. CHECK LIST / HOW VISUAL ─────────────────────────── */
.how-visual {
  background: var(--brand-deep) !important;
}
.check-ic {
  background: var(--brand-sage) !important;
  color: #fff !important;
}
.how-visual::before { background: var(--brand-sage) !important; }

/* ── 25. HIGHLIGHT BOX ───────────────────────────────────── */
.hl-box, .info-card {
  background: linear-gradient(135deg, var(--brand-light) 0%, rgba(168,195,176,.08) 100%) !important;
  border-color: rgba(46,107,87,.2) !important;
}
.hl-box::before {
  background: var(--brand-sage) !important;
}

/* ── 26. SIDEBAR CARDS ───────────────────────────────────── */
.sb-card {
  background: var(--brand-ivory) !important;
  border-color: var(--brand-border) !important;
}
.sb-card.sb-cta {
  background: var(--brand-deep) !important;
}
.sb-price { color: var(--brand-soft) !important; }
.sb-ic { color: var(--brand-sage) !important; }

/* ── 27. HERO VISUAL FLOATS (old style) ──────────────────── */
.float-1 { background: var(--brand-sage) !important; }
.prog-fill {
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-sage)) !important;
}

/* ── 28. CTA BANNER (зелений) ────────────────────────────── */
.cta-banner {
  background: var(--brand-sage) !important;
}

/* ── 29. PRICE BANNER ────────────────────────────────────── */
.svc-price-banner {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-sage) 100%) !important;
}
.svc-price-banner-amount { color: var(--brand-soft) !important; }

/* ── 30. FORM SELECT ─────────────────────────────────────── */
.f-select option {
  background: var(--brand-deep) !important;
}

/* ── 31. SVC CARD V2 ─────────────────────────────────────── */
.svc-card-v2:hover {
  border-color: rgba(46,107,87,.3) !important;
  box-shadow: 0 20px 60px rgba(15,61,46,.12) !important;
}
.svc-card-v2:hover::before { opacity: 1 !important; }
.svc-card-v2-line {
  background: linear-gradient(90deg, var(--brand-sage), var(--brand-soft)) !important;
}

/* ── 32. REVIEW AVATAR COLORS ────────────────────────────── */
.rv2-avatar:nth-child(1), .rev-avatar { background: var(--brand-sage) !important; }

/* ── 33. MOBILE STICKY CTA ───────────────────────────────── */
.mob-cta { background: var(--brand-deep) !important; border-top-color: rgba(255,255,255,.07) !important; }

/* ── 34. SLIDER CONTROLS ─────────────────────────────────── */
.sl-btn:hover { background: var(--brand-sage) !important; border-color: var(--brand-sage) !important; }
.sl-dot.active { background: var(--brand-sage) !important; }

/* ── 35. SECTION BACKGROUNDS ─────────────────────────────── */
.services, .proc-section, .testimonials,
.bg-gray, section.bg-gray { background:#ffffff !important; }
.how, .pricing { background: #fff !important; }

/* ── 36. BREADCRUMBS ─────────────────────────────────────── */
.breadcrumb a:hover, .svc-breadcrumb a:hover { color: var(--brand-soft) !important; }

/* ── 37. POPUP ───────────────────────────────────────────── */
#fsPopupBox input:focus,
#fsPopupBox select:focus {
  border-color: var(--brand-sage) !important;
  box-shadow: 0 0 0 3px rgba(46,107,87,.12) !important;
}

/* ── 38. DARK TOGGLE ─────────────────────────────────────── */
#darkToggle { border-color: rgba(255,255,255,.15) !important; }
#darkToggle:hover { background: rgba(255,255,255,.08) !important; }

/* ── 39. PULSE ANIMATION ─────────────────────────────────── */
.btn-pulse {
  animation: btnPulseBrand 2.5s infinite !important;
}
@keyframes btnPulseBrand {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,107,87,.4); }
  50%       { box-shadow: 0 0 0 14px rgba(46,107,87,0); }
}

/* ── 40. LIVE DOT ────────────────────────────────────────── */
.live-dot, .badge-dot { background: var(--brand-soft) !important; }

/* ── 41. SECTION LABEL LINE ──────────────────────────────── */
.section-label::before { background: var(--brand-sage) !important; }

/* ── 42. ICON WRAPPERS (Lucide/emoji icons) ──────────────── */
.con-icon, .g-icon, .trust-item-ico {
  background: var(--brand-light) !important;
  color: var(--brand-sage) !important;
}

/* ── 43. LOGO ICON ───────────────────────────────────────── */
.logo-icon { background: var(--brand-sage) !important; }

/* ── 44. SCROLLBAR (webkit) ──────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--brand-ivory); }
::-webkit-scrollbar-thumb {
  background: var(--brand-soft);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-sage); }

/* ── 45. SELECTION ───────────────────────────────────────── */
::selection {
  background: rgba(46,107,87,.18);
  color: var(--brand-deep);
}

/* ── 46. FOCUS RING ──────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--brand-sage) !important;
  outline-offset: 2px !important;
}

/* ── 47. CARD HOVER BORDER ───────────────────────────────── */
.card:hover {
  border-color: rgba(46,107,87,.2) !important;
  box-shadow: 0 16px 48px rgba(15,61,46,.1) !important;
}

/* ── 48. PROCESS STEP HOVER ──────────────────────────────── */
.process-step:hover {
  border-color: rgba(46,107,87,.3) !important;
  box-shadow: var(--sh) !important;
}

/* ── 49. REVIEW META ─────────────────────────────────────── */
.rv2-meta { color: var(--brand-cgray) !important; }
.rv2-source { color: var(--brand-cgray) !important; }

/* ── 50. FORM SUCCESS ────────────────────────────────────── */
.form-success-msg .success-ico { color: var(--brand-soft) !important; }

/* ── 51. WARNING BOX ─────────────────────────────────────── */
.sb-warn {
  background: rgba(245,158,11,.1) !important;
  border-color: rgba(245,158,11,.25) !important;
}

/* ── 52. GRANT SECTION ───────────────────────────────────── */
.pg-hero, .grant-hero {
  background:linear-gradient(143deg, #ffffff 0%, #F6F7F4 40%, #F6F7F4 100%) !important
}
.dek-hero { background: #fff !important; }
.dek-hero::before {
  background: linear-gradient(145deg, var(--brand-deep) 0%, var(--brand-sage) 100%) !important;
}

/* ── 53. HEADER PHONE ────────────────────────────────────── */
.header-phone:hover { color: var(--brand-soft) !important; }

/* ── 54. DROPDOWN HOVER ──────────────────────────────────── */
.dropdown-menu a:hover {
  background: rgba(168,195,176,.12) !important;
  color: var(--brand-soft) !important;
}


/* ── Blog / Booking extras ── */
.blog-hero {
  background: linear-gradient(145deg, #0F3D2E 0%, #2E6B57 100%) !important;
}
.blog-hero h1, .blog-hero p { color: #fff !important; }
.blog-search-btn { background: #2E6B57 !important; color: #fff !important; }
.bfb.active, .bfb:hover {
  background: #0F3D2E !important;
  border-color: #0F3D2E !important;
  color: #fff !important;
}
.blog-cta {
  background: linear-gradient(155deg, #071f17 0%, #0F3D2E 100%) !important;
  border-radius: 24px;
}
.bk-hero { background: linear-gradient(145deg, #0F3D2E 0%, #2E6B57 40%, #A8C3B0 100%) !important; }
.bk-hero h1 { color: #fff !important; }
.svc-btn.selected {
  background: linear-gradient(135deg, #E8F0EA 0%, #fff 100%) !important;
  border-color: #2E6B57 !important;
}
.grant-label {
  background: rgba(168,195,176,.15) !important;
  border-color: rgba(168,195,176,.3) !important;
  color: #A8C3B0 !important;
}