/* ========= Brand & Bootstrap overrides ========= */
:root{
  /* Brand palette */
  --brand-500:#031CA6;
  --brand-600:#03178C;
  --brand-700:#021373;
  --brand-light:#F2F2F2;
  --brand-black:#0D0D0D;

  /* Back-compat for local CSS vars */
  --primary-500: var(--brand-500);
  --primary-600: var(--brand-600);
  --primary-700: var(--brand-700);
  --primary-50:  var(--brand-light);
  --bg-soft:     #FFFFFF;
  --text-primary:var(--brand-black);
  --glass: rgba(255,255,255,.6);

  /* Bootstrap variable overrides */
  --bs-primary: var(--brand-500);
  --bs-primary-rgb: 3,28,166;
  --bs-body-color: var(--brand-black);
  --bs-body-bg: #ffffff;
  --bs-link-color: var(--brand-500);
  --bs-link-hover-color: var(--brand-600);
  --bs-primary-text-emphasis: var(--brand-700);
  --bs-primary-bg-subtle: #E8EBF9;      /* very light brand */
  --bs-primary-border-subtle: #BFC7EF;  /* subtle brand border */
  --bs-border-color: #E6E6E6;
}

html,body{ font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text-primary); overflow-x: hidden; }

.py-6{ padding-block: clamp(2.5rem, 5vw, 5rem); }
.bg-soft{ background: var(--bg-soft); }

/* ========= Top nav ========= */
#topnav .icon-link{ font-size: 1.25rem; color: var(--primary-600); transition: transform .2s ease, color .2s ease; }
#topnav .icon-link:hover{ color: var(--primary-700); transform: translateY(-2px); }
#topnav .phone-link{ color: var(--text-primary); text-decoration: none; font-weight: 600; }
#topnav .btn-gradient{ --bs-btn-padding-y: .4rem; }
.border-primary-subtle{ border-color: rgba(var(--bs-primary-rgb), .15)!important; }
.brand-logo{ height: 48px; width: auto; max-width: 420px; object-fit: contain; }
@media (max-width: 576px){
  .brand-logo{ height: 40px; max-width: 320px; }
}

/* ========= Buttons ========= */
.btn-gradient{
  --g1:var(--brand-500); --g2:var(--brand-600); --g3:var(--brand-700);
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  background-size: 200% 200%;
  border: 0;
  color: #fff;
  transition: background-position .5s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 20px rgba(3,23,140,.25);
}
.btn-gradient:hover{ background-position: 100% 0; transform: translateY(-1px); }
.btn-gradient.glow{ box-shadow: 0 8px 30px rgba(3,23,140,.35), inset 0 0 0 1px rgba(255,255,255,.2); }
.btn-outline-primary{ border-width: 2px; }

/* Brand-styled messengers (в цвет бренда) */
.btn-outline-whatsapp,
.btn-outline-telegram{
  border-color: var(--brand-600);
  color: var(--brand-600);
}
.btn-outline-whatsapp:hover,
.btn-outline-telegram:hover{
  background: var(--brand-600);
  color:#fff;
}

/* ========= Hero ========= */
.hero-section{ position: relative; min-height: min(92vh, 820px); }
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at -10% 10%, rgba(3,28,166,.18) 0%, rgba(3,28,166,0) 60%),
    radial-gradient(1200px 600px at 110% -10%, rgba(3,23,140,.18) 0%, rgba(3,23,140,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fd 100%);
  filter: saturate(110%);
  will-change: transform;
}
.text-gradient{ background: linear-gradient(90deg,var(--brand-500),var(--brand-600),var(--brand-700)); -webkit-background-clip:text; background-clip:text; color: transparent; }
.glass{ background: var(--glass); backdrop-filter: blur(10px); }

.hero-photo{ height: 520px; }
.object-fit-cover{ object-fit: cover; }

/* Particles canvas */
#particles{
  position:absolute;
  inset:0;
  pointer-events: none;
  z-index: 1;
}

/* ========= Cards ========= */
.adv-card{
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  height: 100%;
  box-shadow: 0 1px 0 rgba(3,23,140,.05), 0 12px 30px rgba(3,23,140,.08);
}
.adv-card i{ font-size: 1.5rem; color: var(--primary-600); }
.adv-card h6{ margin-top: .5rem; font-weight: 700; }
.adv-card p{ margin: 0; color: #6b7280; font-size: .9rem; }

.service-card{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(3,23,140,.12);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(3,23,140,.15); }
.price{ font-weight: 800; color: var(--primary-700); }

/* ========= Benefits ========= */
.benefit-card{
  background: #fff;
  border: 1px solid rgba(3,23,140,.12);
  border-radius: 16px;
  padding: 18px;
}
.benefit-card i{ font-size: 1.6rem; color: var(--primary-600); }
.benefit-card h6{ margin-top: .5rem; font-weight: 700; }
.benefit-card p{ margin: 0; color: #5b6b7a; }

/* ========= Gradient section ========= */
.bg-gradient-light{
  background: linear-gradient(180deg, #fff 0%, #fff 100%);
  border-top: 1px solid rgba(3,23,140,.1);
  border-bottom: 1px solid rgba(3,23,140,.1);
}

/* ========= Slider ========= */
.slider-frame{ height: clamp(240px, 50vw, 420px); background:#FFFFFF; }
.slider-image{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit: cover;
  opacity:0; transform: scale(1.02);
  transition: opacity .6s ease, transform .6s ease;
}
.slider-image.active{ opacity:1; transform: scale(1); }

/* ========= Steps ========= */
.step-card{
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(3,23,140,.12);
  position: relative;
  overflow: hidden;
  min-height: 170px;
}
.step-card .step-num{
  position: absolute; top: 12px; right: 12px;
  font-weight: 800; font-size: 1.6rem; color: rgba(3,23,140,.3);
}

/* ========= Tag cloud ========= */
.tag-cloud .tag{
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(3,23,140,.15);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .95rem;
  color: var(--text-primary);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.tag-cloud .tag:hover{
  transform: translateY(-2px);
  background: #f4f6ff;
  box-shadow: 0 8px 20px rgba(3,23,140,.15);
}

/* ========= Footer & Map ========= */
footer{ background: linear-gradient(180deg,#ffffff 0%, #f5f6fb 100%); border-top: 1px solid rgba(3,23,140,.1); }
.footer-link{ text-decoration: none; color: #4b5563; }
.footer-link:hover{ color: var(--primary-600); }
.bg-glass{ background: rgba(255,255,255,.8); backdrop-filter: blur(8px); }
.y-map{ width: 100%; height: clamp(280px, 50vw, 420px); background: #FFFFFF; }

/* ========= Reveal on scroll ========= */
.reveal{ opacity: 0; transform: translateY(12px); }
.reveal.show{ opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* ========= Utilities ========= */
.fw-extrabold{ font-weight: 800; }

/* ========= Responsive tweaks ========= */
@media (max-width: 991.98px){
  .hero-photo{ height: 360px; }
}


/* Inline SVG icon system */
.icon{ width: 1.25rem; height: 1.25rem; display: inline-block; vertical-align: middle; color: var(--primary-600); }
.adv-card .icon, .benefit-card .icon{ width: 1.5rem; height: 1.5rem; color: var(--primary-600); }
footer .icon{ width: 1.5rem; height: 1.5rem; color: var(--primary-600); }

/* Corporate hero theme (deeper brand-700) */
[data-theme="corporate"] .hero-bg{
  background:
    radial-gradient(1200px 600px at -10% 10%, rgba(2,19,115,.40) 0%, rgba(2,19,115,0) 60%),
    radial-gradient(1200px 600px at 110% -10%, rgba(2,19,115,.36) 0%, rgba(2,19,115,0) 60%),
    linear-gradient(180deg, #f7f8ff 0%, #eef0ff 100%);
}

.tag-cloud .tag{ background: #fff; }
.tag-cloud .tag:hover{ background: #eef1ff; }

footer{ background: linear-gradient(180deg,#ffffff 0%, #ffffff 100%); }

/* Lighter card subtitles */
.adv-card p, .benefit-card p{ color: #4b5563; }

/* Social round badges */
.soc-badge{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff; text-decoration: none;
  box-shadow: 0 8px 18px rgba(3,23,140,.25);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.soc-badge:hover{ background: var(--brand-500); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(3,23,140,.30); }
.soc-badge svg{ width: 18px; height: 18px; }

/* Brand-styled balloon for Yandex map */
.y-balloon{
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(3,23,140,.15);
  overflow: hidden;
  min-width: 220px;
}
.y-balloon__header{
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
  color:#fff; font-weight: 700; padding: .6rem .9rem;
}
.y-balloon__body{ padding: .8rem .9rem; color: var(--text-primary); }
.y-balloon a{ color: var(--brand-600); }

/* Ensure white label on hover/focus & glass shine */
.btn-gradient,
.btn-gradient:hover,
.btn-gradient:focus{ color:#fff !important; }
.btn-gradient{ position: relative; overflow: hidden; }
.btn-gradient::after{
  content:"";
  position:absolute; top:-200%; left:-220%;
  width: 160%; height: 500%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 70%);
  animation: btn-shine 7s ease-in-out infinite;
  pointer-events: none;
}
.step-photo img{ filter: saturate(105%); }

/* Modern FAQ look */
.faq-modern .accordion-item{
  border: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(3,23,140,.08);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-modern .accordion-button{
  background: #fff;
  color: var(--text-primary);
  font-weight: 600;
  padding: 1rem 1.25rem 1rem 3.25rem;
  position: relative;
}
.faq-modern .accordion-button:focus{ box-shadow: none; }
.faq-modern .accordion-button::after{ display:none; }
.faq-modern .accordion-button::before{
  content:"";
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #fff 40%, rgba(255,255,255,0) 41%), var(--brand-500);
  box-shadow: 0 0 0 4px rgba(3,23,140,.08);
}
.faq-modern .accordion-button .faq-toggle{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #EFF2FD;
  color: var(--brand-600);
  box-shadow: inset 0 0 0 1px rgba(3,23,140,.15);
}
.faq-modern .accordion-button[aria-expanded="true"] .faq-toggle{ background: var(--brand-600); color:#fff; }
.faq-modern .accordion-body{ color: #4b5563; }

/* Tag micro-animations */
.tag-cloud .tag{
  position: relative;
  will-change: transform, box-shadow;
  
  padding-left: 28px; /* for dot */
}
.tag-cloud .tag:nth-child(3n){ animation-delay: 1s; }
.tag-cloud .tag:nth-child(4n){ animation-delay: 2s; }
.tag-cloud .tag:nth-child(5n){ animation-delay: 3s; }
@keyframes tag-breath{
  0%, 60%, 100%{ transform: translateY(0) scale(1); box-shadow: 0 6px 18px rgba(3,23,140,.08); }
  30%{ transform: translateY(-1px) scale(1.03); box-shadow: 0 10px 26px rgba(3,23,140,.12); }
}
.tag-cloud .tag::before{
  content:"";
  width: 10px; height: 10px; border-radius: 50%;
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  background: radial-gradient(circle at 30% 30%, #fff 0%, #fff 40%, rgba(255,255,255,0) 41%), var(--brand-500);
  box-shadow: 0 0 0 3px rgba(3,23,140,.08);
}

/* Step icons (instead of photos) */
.step-icon{ display:flex; align-items:center; }
.step-icon-inner{
  width: 56px; height: 56px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(3,28,166,.10), rgba(2,19,115,.10));
  color: var(--brand-600);
  box-shadow: 0 6px 16px rgba(3,23,140,.12), inset 0 0 0 1px rgba(3,23,140,.18);
}
.step-icon-svg{ width: 28px; height: 28px; }

/* Animate only the dot in popular tags */
@keyframes dot-pulse{
  0%, 60%, 100%{ transform: translateY(-50%) scale(1); box-shadow: 0 0 0 3px rgba(3,23,140,.08); }
  30%{ transform: translateY(-50%) scale(1.35); box-shadow: 0 0 0 4px rgba(3,23,140,.14); }
}
.tag-cloud .tag::before{
  animation: dot-pulse 6.5s ease-in-out infinite;
}
.tag-cloud .tag:nth-child(3n)::before{ animation-delay: 1s; }
.tag-cloud .tag:nth-child(4n)::before{ animation-delay: 2s; }
.tag-cloud .tag:nth-child(5n)::before{ animation-delay: 3s; }

/* Improved shine sweep with per-button random delay/duration */
.btn-gradient{ position:relative; overflow:hidden; }
.btn-gradient::after{
  content:"";
  position:absolute; top:-200%; left:-160%;
  width: 140%; height: 500%;
  transform: rotate(25deg) translateX(-120%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 70%);
  animation: btn-shine var(--shine-duration, 6.5s) cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: var(--shine-delay, 0s);
  pointer-events: none;
  opacity: 0;
}
@keyframes btn-shine{
  0%   { transform: rotate(25deg) translateX(-140%); opacity: 0; }
  8%   { opacity: .9; }
  20%  { transform: rotate(25deg) translateX(140%); opacity: 0; }
  100% { transform: rotate(25deg) translateX(140%); opacity: 0; }
}
/* Accelerate shine on hover for instant feedback */
.btn-gradient:hover::after{ animation-duration: 2.2s; animation-delay: 0s; }


/* === Scope Section (Что входит / Дополнительно / Районы) === */
.feature-card{
  background:#fff; border:1px solid rgba(3,23,140,.12);
  border-radius:18px; padding:16px 16px 12px;
  box-shadow: 0 8px 24px rgba(3,23,140,.08);
  height:100%;
}
.feature-card h6{ margin:8px 0 6px; font-weight:700; }
.feature-card .feature-list{ margin:0; padding-left:18px; color:#4b5563; font-size:.95rem; }
.feature-icon{
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; color:var(--brand-600);
  background:linear-gradient(180deg, rgba(3,28,166,.10), rgba(2,19,115,.08));
  box-shadow: 0 6px 16px rgba(3,23,140,.10), inset 0 0 0 1px rgba(3,23,140,.16);
}
.feature-icon svg{ width:26px; height:26px; }

.addon-card{
  background:#fff; border:1px solid rgba(3,23,140,.12);
  border-radius:18px; padding:14px; height:100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.addon-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(3,23,140,.14); }
.addon-icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--brand-600);
  background:linear-gradient(180deg, rgba(3,28,166,.10), rgba(2,19,115,.08));
  box-shadow: inset 0 0 0 1px rgba(3,23,140,.14);
}
.addon-icon svg{ width:22px; height:22px; }
.addon-title{ font-weight:700; margin:10px 0 12px; }
.addon-badge{
  display:inline-block; font-size:.75rem; line-height:1; padding:6px 10px; border-radius:999px; margin-bottom:10px;
  background:#EFF2FD; color:var(--brand-600); border:1px solid rgba(3,23,140,.15);
}



/* === CTA Discount (15% off) — bold, animated, brand-blue === */
.cta-discount{
  position: relative;
  background: linear-gradient(135deg, #021373 0%, #03178C 50%, #031CA6 100%);
  color: #fff;
  border-radius: 24px;
  padding: clamp(24px, 6vw, 48px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(3,23,140,.35);
}
.cta-discount h2, .cta-discount h3, .cta-discount h4, .cta-discount p, .cta-discount label{ color:#fff; }
.cta-discount a{ color:#fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.6); }
.cta-discount .form-control, .cta-discount .form-select{
  background: rgba(255,255,255,.92); color:#0D0D0D; border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.cta-discount .form-control::placeholder{ color:#6b7280; }
.cta-discount .form-check-label{ color:#f2f2f2; }
.cta-discount .btn-gradient{ box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* Animated "finiflushka" blobs */
.cta-discount::before, .cta-discount::after{
  content:""; position:absolute; border-radius:50%;
  filter: blur(12px); opacity: .35; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0));
  animation: cta-blob 18s ease-in-out infinite;
}
.cta-discount::before{ width: 420px; height: 420px; top: -140px; left: -140px; animation-delay: 0s; }
.cta-discount::after{ width: 520px; height: 520px; bottom: -180px; right: -160px; animation-delay: 6s; opacity: .28; }

@keyframes cta-blob{
  0%   { transform: translate(-10%, -5%) scale(1); }
  50%  { transform: translate(10%, 5%)  scale(1.05); }
  100% { transform: translate(-10%, -5%) scale(1); }
}

/* Make inputs spacing tighter on mobile inside CTA */
@media (max-width: 576px){
  .cta-discount .row > [class^="col"]{ margin-bottom: .5rem; }
}



/* CTA overrides: contrasting button, square background, scanline shine */
.cta-discount{ border-radius: 0; }
.cta-discount .btn-gradient{
  --g1:#F2F2F2; --g2:#E9EDFF; --g3:#DDE4FF;
  color:#021373 !important; border:0;
  box-shadow: 0 10px 24px rgba(255,255,255,.15), inset 0 0 0 1px rgba(3,23,140,.08);
}
.cta-discount .btn-gradient:hover{ color:#021373 !important; }

/* scanline across background */
.cta-discount::before{
  content:""; position:absolute; border-radius:50%;
  filter: blur(12px); opacity: .35; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0));
  width: 420px; height: 420px; top: -140px; left: -140px;
  animation: cta-blob 18s ease-in-out infinite;
}
.cta-discount::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 220px 100%;
  animation: cta-scan 8s linear infinite;
  opacity:.22;
}
@keyframes cta-scan{
  0%{ background-position: -240px 0; }
  100%{ background-position: 120% 0; }
}



/* FAQ dots: solid circular mark (no crescent) */
.accordion.faq-modern .accordion-button::before{
  background: radial-gradient(circle at 50% 50%, #fff 0%, #fff 40%, rgba(255,255,255,0) 41%), var(--brand-500) !important;
}



/* CTA input sizing tweaks */
.cta-discount .form-control{
  padding: .6rem .9rem;
  font-size: 1rem;
  height: auto;
  border-radius: 12px;
  max-width: 420px;
}
.cta-discount .btn.btn-lg{ padding: .65rem 1.1rem; font-size: 1rem; border-radius: 12px; }


/* Tag dot override */
.tag-cloud .tag::before{
  background: radial-gradient(circle at 50% 50%, #fff 0%, #fff 40%, rgba(255,255,255,0) 41%), var(--brand-500) !important;
}


/* FAQ dot hover glow */
.accordion.faq-modern .accordion-button:hover::before{
  box-shadow: 0 0 0 4px rgba(3,23,140,.12), 0 0 10px rgba(3,28,166,.45);
  transform: translateY(-50%) scale(1.05);
}



/* Make scope feel like continuation of Services */
.continuation-scope{ padding-top: 2.25rem; }
@media (min-width: 992px){
  .continuation-scope{ padding-top: 1.5rem; }
}



/* Brand selection color */
::selection{ background: #031CA6; color: #fff; }
::-moz-selection{ background: #031CA6; color: #fff; }

/* Brand scrollbars */
html{ scrollbar-width: thin; scrollbar-color: #031CA6 #EFF2FD; } /* Firefox */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: #EFF2FD; }
::-webkit-scrollbar-thumb{
  background: #031CA6;
  border-radius: 8px;
  border: 2px solid #EFF2FD;
}
::-webkit-scrollbar-thumb:hover{ background: #03178C; }



/* Social badges: outlined with blue border, transparent fill, colored icon */
.soc-badge{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:2px solid var(--brand-600);
  background: transparent;
  box-shadow: 0 10px 22px rgba(3,23,140,.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.soc-badge:hover{
  background: rgba(3,23,140,.06);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(3,23,140,.22);
}
.soc-badge svg{ width:18px; height:18px; }

/* Per-network icon colors */
.soc-badge.soc-wa{ color:#25D366; }     /* WhatsApp */
.soc-badge.soc-tg{ color:#229ED9; }     /* Telegram */
.soc-badge.soc-ig{ color:#E1306C; }     /* Instagram */
.soc-badge.soc-vk{ color:#2787F5; }     /* VK */


/* === Social badges — brand mono === */
.soc-badge{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:2px solid var(--brand-600);
  background: transparent;
  color: var(--brand-600);
  box-shadow: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.soc-badge:hover{
  background: var(--brand-600);
  color:#fff;
  border-color: var(--brand-600);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(3,23,140,.24);
}
.soc-badge svg{ width:18px; height:18px; display:block; }
.soc-badge.soc-wa, .soc-badge.soc-tg, .soc-badge.soc-ig, .soc-badge.soc-vk{ color: var(--brand-600) !important; }

/* Brand-colored links */
a:not(.btn){ color: var(--brand-500); }
a:not(.btn):hover{ color: var(--brand-600); }
.footer a{ color: var(--brand-500); }
.footer a:hover{ color: var(--brand-600); }

/* Social badges — refined hover (no full fill) */
.soc-badge{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:2px solid var(--brand-600);background:transparent;color:var(--brand-600);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.soc-badge svg{ width:20px;height:20px;display:block; }
.soc-badge:hover{ background:transparent; color:var(--brand-700); border-color:var(--brand-700); box-shadow:0 8px 20px rgba(3,23,140,.18); transform:translateY(-1px); }
.soc-badge:active{ transform:translateY(0); }

/* Refine social badge hover to avoid full fill */
.soc-badge:hover{ background: transparent !important; color: var(--brand-700) !important; border-color: var(--brand-700) !important; box-shadow:0 8px 20px rgba(3,23,140,.18); }
.soc-badge svg{ width:22px; height:22px; }


/* Social icons using supplied SVGs */
.soc-badge svg{ width:22px; height:22px; display:block; }
.soc-badge .icon-wa *,
.soc-badge .icon-tg *{
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.soc-badge .icon-vk *{
  fill: currentColor !important;
  stroke: none !important;
}



.soc-badge{ border:2px solid var(--brand-600); color: var(--brand-600); background: transparent; }
.soc-badge:hover{ background: transparent; color: var(--brand-700); border-color: var(--brand-700); box-shadow: 0 8px 20px rgba(3,23,140,.18); }



/* Header phone on mobile */
.header-phone{ color: var(--brand-600); }
.header-phone:hover{ color: var(--brand-700); }
#topnav{ position: sticky; top:0; z-index: 1040; }
/* reduce tap target gap */
.header-phone i{ font-size: 1rem; }


#topnav .container{ gap:.5rem; }
@media (max-width: 991.98px){
  #topnav .container{ padding-left:.75rem; padding-right:.75rem; }
  .header-phone{ font-size:.95rem; }
  .header-phone i{ margin-right:.25rem !important; }
}

#topnav.scrolled{ box-shadow: 0 8px 24px rgba(2,19,115,.12); }

.hero-section .hero-bg{
  background:
    linear-gradient(0deg, rgba(255,255,255,0.80), rgba(255,255,255,0.80)),
    url('../img/hero-cleanexpert.jpg') center/cover no-repeat;
}
@media (max-width: 575.98px){
  .hero-section .hero-bg{ background-position: 60% center; }
}

#services .row > div{ display:flex; }
#services .row > div > .service-card{ display:flex; flex-direction:column; width:100%; }
#services .service-card .p-3{ display:flex; flex-direction:column; flex:1 1 auto; }
#services .service-card .service-cta{ margin-top:auto; }

nav[aria-label="Основное меню"] .nav-link{ position:relative; transition: color .18s ease; }
nav[aria-label="Основное меню"] .nav-link::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-6px; height:2px; background: currentColor; opacity:0; transform: scaleX(.6);
  transition: opacity .18s ease, transform .18s ease;
}
nav[aria-label="Основное меню"] .nav-link:hover{ color: var(--brand-600); }
nav[aria-label="Основное меню"] .nav-link:hover::after{ opacity:1; transform: scaleX(1); }
.continuation-scope{ padding-top:.75rem; margin-top:-0.5rem; }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
.tag-cloud .tag{ padding:8px 14px 8px 26px; }
.tag-cloud .tag::before{ left:10px; }