/* =====================================================
   v2Team — Corporate Premium Restyling 2024
   WEB Studio Site / Dark Navy + Gold Accents
   ===================================================== */

/* ── Google Fonts ───────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── CSS Custom Properties ──────────────────────────── */
:root {
  /* --- Palette --- */
  --navy-900:    #070d19;
  --navy-800:    #0f172a;
  --navy-700:    #1e293b;
  --navy-600:    #334155;
  --navy-500:    #475569;

  --gold-400:    #fbbf24;
  --gold-500:    #f59e0b;
  --gold-600:    #d97706;
  --gold-glow:   rgba(245, 158, 11, 0.25);

  --white:       #ffffff;
  --gray-50:     #f8fafc;
  --gray-100:    #f1f5f9;
  --gray-200:    #e2e8f0;
  --gray-300:    #cbd5e1;
  --gray-400:    #94a3b8;
  --gray-500:    #64748b;

  /* --- Semantic --- */
  --bg-body:        var(--white);
  --bg-section-alt: var(--gray-50);
  --bg-dark:        var(--navy-800);
  --bg-dark-card:   rgba(255, 255, 255, 0.04);
  --bg-dark-hover:  rgba(255, 255, 255, 0.07);

  --text-on-light:  var(--navy-800);
  --text-muted-l:   var(--navy-500);
  --text-on-dark:   var(--white);
  --text-muted-d:   var(--gray-400);

  --border-light:   var(--gray-200);
  --border-dark:    rgba(255, 255, 255, 0.09);
  --border-gold:    rgba(245, 158, 11, 0.5);

  /* --- Gradients --- */
  --grad-gold:      linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #f59e0b 100%);
  --grad-navy:      linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
  --grad-overlay:   linear-gradient(180deg, rgba(7,13,25,0) 0%, rgba(7,13,25,0.6) 100%);

  /* --- Typography --- */
  --font-body:      'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Geometry --- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs:   0 1px 3px rgba(7,13,25,.06), 0 1px 2px rgba(7,13,25,.04);
  --shadow-sm:   0 4px 12px rgba(7,13,25,.08), 0 2px 4px rgba(7,13,25,.06);
  --shadow-md:   0 10px 30px rgba(7,13,25,.12), 0 4px 10px rgba(7,13,25,.08);
  --shadow-lg:   0 20px 60px rgba(7,13,25,.18), 0 8px 20px rgba(7,13,25,.10);
  --shadow-gold: 0 8px 30px rgba(245,158,11,.35);
  --shadow-card: 0 2px 8px rgba(7,13,25,.06), 0 1px 3px rgba(7,13,25,.04);

  /* --- Motion --- */
  --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  0.18s;
  --dur-base:  0.28s;
  --dur-slow:  0.48s;
}

/* ── Base Reset & Typography ────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-on-light);
  background-color: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--text-on-light);
}

h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.8rem); }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }

p { color: var(--text-muted-l); margin-bottom: 1rem; }

a {
  color: var(--gold-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--gold-500); text-decoration: none; }

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-500); }

/* Selection */
::selection { background: rgba(245,158,11,.2); color: var(--navy-800); }

/* ── Layout ─────────────────────────────────────────── */
#layoutDefault { min-height: 100vh; display: flex; flex-direction: column; }
#layoutDefault_content { flex: 1; }
main { overflow: hidden; }

/* ── Navigation ─────────────────────────────────────── */
/* Kill ALL dark-mode overrides from styles.css regardless of class combination */
.navbar-marketing,
.navbar-marketing.navbar-dark,
.navbar-marketing.bg-transparent,
.navbar-marketing.navbar-dark.navbar-scrolled,
.navbar-marketing.navbar-light.navbar-scrolled,
.navbar-marketing.bg-transparent.navbar-dark {
  background-color: rgba(255, 255, 255, 0.98) !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

.navbar-marketing {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-light);
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  transition: padding var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}

.navbar-marketing.navbar-scrolled,
.navbar-marketing.navbar-dark.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.99) !important;
  background: rgba(255, 255, 255, 0.99) !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  box-shadow: 0 2px 20px rgba(7,13,25,.10) !important;
  border-bottom: 1px solid var(--gray-200) !important;
}

/* Logo */
.navbar-brand {
  font-family: var(--font-body) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--navy-800) !important;
  letter-spacing: -0.04em !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
  background-clip: unset !important;
  position: relative;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.navbar-brand::after {
  content: '.';
  color: var(--gold-500);
  font-size: 2rem;
  line-height: 0;
  vertical-align: -0.15em;
}

.navbar-brand:hover { opacity: 0.85; }

/* Nav inner padding — override styles.css 1.75rem */
.navbar-marketing .navbar-nav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Nav Links */
.navbar-marketing .nav-link,
.navbar-marketing.navbar-dark .nav-link {
  color: var(--navy-600) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--dur-fast) var(--ease-out) !important;
}

.navbar-marketing .nav-link:hover,
.navbar-marketing.navbar-dark .nav-link:hover {
  color: var(--navy-800) !important;
  background: var(--gray-100) !important;
}

/* CTA Button */
.btn-teal,
a.btn-teal {
  background: var(--navy-800) !important;
  border: none !important;
  color: var(--white) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em !important;
  padding: 10px 22px !important;
  border-radius: var(--radius-full) !important;
  transition: all var(--dur-base) var(--ease-out) !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.btn-teal::after {
  content: '→';
  font-size: 0.95em;
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn-teal:hover {
  background: var(--gold-500) !important;
  color: var(--navy-800) !important;
  box-shadow: var(--shadow-gold) !important;
  transform: translateY(-1px) !important;
}

.btn-teal:hover::after { transform: translateX(3px); }

/* Mobile Toggle */
.navbar-toggler {
  border: 1.5px solid var(--gray-300) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 10px !important;
  color: var(--navy-700) !important;
  transition: all var(--dur-fast) var(--ease-out) !important;
}

.navbar-toggler:hover { border-color: var(--gold-500) !important; }
.navbar-toggler:focus { box-shadow: none !important; outline: none !important; }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border-radius: var(--radius-full) !important;
  transition: all var(--dur-base) var(--ease-out) !important;
  padding: 12px 28px !important;
  font-size: 0.9rem !important;
}

.btn-primary,
.btn-primary.btn-marketing {
  background: var(--gold-500) !important;
  border-color: var(--gold-500) !important;
  color: var(--navy-900) !important;
  box-shadow: 0 4px 16px rgba(245,158,11,.3) !important;
}

.btn-primary:hover,
.btn-primary.btn-marketing:hover {
  background: var(--gold-600) !important;
  border-color: var(--gold-600) !important;
  box-shadow: var(--shadow-gold) !important;
  transform: translateY(-2px) !important;
  color: var(--navy-900) !important;
}

.btn-white,
.btn-white.btn-marketing {
  background: transparent !important;
  border: 1.5px solid var(--gray-300) !important;
  color: var(--navy-700) !important;
}

.btn-white:hover,
.btn-white.btn-marketing:hover {
  background: var(--gray-100) !important;
  border-color: var(--gold-500) !important;
  color: var(--navy-800) !important;
  transform: translateY(-2px) !important;
}

/* btn-white on dark sections */
section.bg-dark .btn-white,
section.bg-dark .btn-white.btn-marketing,
footer .btn-white {
  border-color: var(--border-dark) !important;
  color: var(--text-on-dark) !important;
}

section.bg-dark .btn-white:hover,
section.bg-dark .btn-white.btn-marketing:hover,
footer .btn-white:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: var(--gold-500) !important;
  color: var(--white) !important;
}

/* ── Section: Testimonials + Contacts ────────────────── */
/* Light section — clean white background */
section.bg-white.pt-10 {
  background: var(--white) !important;
  position: relative;
}

section.bg-white.pt-10::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 5% 20%, rgba(245,158,11,.04) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 95% 80%, rgba(15,23,42,.03) 0%, transparent 55%);
  pointer-events: none;
}

/* ── Testimonials ────────────────────────────────────── */
.testimonial {
  position: relative;
}

.testimonial-brand img.rlogo {
  height: 36px;
  width: auto;
  object-fit: contain;
  opacity: 0.45;
  filter: grayscale(1);
  margin-bottom: 1.75rem;
  transition: opacity var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
  display: block;
}

.testimonial:hover .rlogo {
  opacity: 0.8;
  filter: grayscale(0);
}

.testimonial-quote {
  font-size: 1rem !important;
  font-style: italic;
  line-height: 1.85;
  color: var(--navy-600) !important;
  position: relative;
  padding-left: 1.25rem;
  border-left: 3px solid var(--gold-500);
}

.testimonial-name {
  font-weight: 700 !important;
  font-size: 0.9rem;
  color: var(--navy-800) !important;
  margin-top: 1.25rem;
  letter-spacing: -0.01em;
}

.testimonial-position {
  color: var(--gold-600) !important;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* Divider between testimonials */
.divider-right {
  border-right: 1px solid var(--border-light) !important;
}

/* ── Contact Cards ───────────────────────────────────── */
#contacts {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

#contacts .card {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-top: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--dur-base) var(--ease-back) !important;
  overflow: visible;
  text-align: center;
}

#contacts .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  transition: opacity var(--dur-base) var(--ease-out);
  opacity: 1;
}

/* WhatsApp card — teal top */
a.card.border-teal::before { background: linear-gradient(90deg, #00c6a4, #00ba94); }
/* Telegram card — indigo-to-cyan top */
a.card.border-secondary::before { background: linear-gradient(90deg, #7c3aed, #06b6d4); }
/* MAX messenger card — purple top */
a.card.border-max::before { background: linear-gradient(90deg, #6C31F0, #9055F5); }
.border-max { border-color: #6C31F0 !important; }

#contacts .card:hover {
  background: var(--white) !important;
  border-color: var(--gray-200) !important;
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Remove Bootstrap border-top-lg override */
#contacts .card.border-top { border-top: none !important; }
#contacts .card.border-top-lg { border-top: none !important; }

/* Card Body */
#contacts .card-body { padding: 2rem 1.5rem 2rem !important; }

#contacts h5 {
  color: var(--navy-800) !important;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

#contacts .card-text {
  color: var(--gray-500) !important;
  font-size: 0.92rem;
  font-weight: 500;
}

/* Icon stacks */
#contacts .icon-stack {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 0 !important;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-back);
}

#contacts .card:hover .icon-stack {
  transform: scale(1.1) rotate(-5deg);
}

.bg-teal-soft    { background: rgba(0,186,148,.15) !important; }
.text-teal       { color: #00ba94 !important; }
.bg-blue-soft    { background: rgba(99,102,241,.18) !important; }
.text-blue       { color: #818cf8 !important; }
.bg-primary-soft { background: rgba(245,158,11,.15) !important; }

/* text-primary inside contacts — keep gold readable on light bg */
#contacts .text-primary { color: var(--gold-600) !important; }

/* ── CTA Section ─────────────────────────────────────── */
section.bg-light.py-10 {
  background: var(--gray-50) !important;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

section.bg-light.py-10::before {
  content: '';
  position: absolute;
  right: -100px;
  top: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
  pointer-events: none;
}

section.bg-light.py-10 h4 {
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: var(--navy-800) !important;
  letter-spacing: -0.04em;
  line-height: 1.15;
  -webkit-text-fill-color: unset !important;
  background: none !important;
}

section.bg-light.py-10 h4 span { color: var(--gold-500); }

section.bg-light.py-10 .lead {
  color: var(--gray-500) !important;
  font-size: 1rem !important;
  font-weight: 400;
}

/* Поработаем? — override buttons to dark context */
section.bg-light.py-10 .btn-primary {
  /* gold already set globally, good */
}

section.bg-light.py-10 .btn-white {
  background: transparent !important;
  border: 1.5px solid var(--gray-300) !important;
  color: var(--navy-600) !important;
}

section.bg-light.py-10 .btn-white:hover {
  border-color: var(--gold-500) !important;
  color: var(--navy-800) !important;
  background: rgba(245,158,11,.06) !important;
}

/* ── HR divider between sections ─────────────────────── */
hr.m-0 { border-color: var(--border-light); opacity: 1; }

/* ── Footer ──────────────────────────────────────────── */
footer.footer {
  background: var(--navy-900) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

.footer-brand {
  font-family: var(--font-body) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  letter-spacing: -0.04em !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
  display: block;
  margin-bottom: 0.6rem;
}

.footer-brand::after {
  content: '.';
  color: var(--gold-500);
}

footer .mb-3 {
  color: var(--gray-500) !important;
  font-size: 0.875rem;
}

/* Footer social icons */
.icon-list-social { display: flex; gap: 10px; }

.icon-list-social-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--gray-500) !important;
  font-size: 1rem !important;
  transition: all var(--dur-fast) var(--ease-out) !important;
  margin-right: 0 !important;
}

.icon-list-social-link:hover {
  background: var(--gold-500) !important;
  border-color: var(--gold-500) !important;
  color: var(--navy-900) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(245,158,11,.35) !important;
}

/* Footer menu heading */
footer .text-uppercase-expanded {
  color: var(--white) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.25rem !important;
}

/* Footer links */
footer ul li a {
  color: var(--gray-500) !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  display: inline-block;
  transition: all var(--dur-fast) var(--ease-out) !important;
  padding: 2px 0;
}

footer ul li a:hover {
  color: var(--gold-400) !important;
  transform: translateX(4px) !important;
}

footer hr { border-color: rgba(255,255,255,.08) !important; opacity: 1 !important; }

footer .small { color: var(--gray-500) !important; font-size: 0.8rem !important; }

/* ── Modal ───────────────────────────────────────────── */
.modal-content {
  background: var(--white) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}

/* ── Двухколоночная модалка ──────────────────────────── */
.modal-left-panel {
  background: var(--navy-800);
  min-height: 420px;
}

.modal-left-panel h4 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.03em;
}

.modal-contacts {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.modal-contact-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: rgba(255,255,255,.75) !important;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: color var(--dur-fast) var(--ease-out);
}

.modal-contact-link:hover { color: var(--white) !important; }

.modal-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: #fff;
}

/* Submit btn в правой части модалки */
#modalform .btn-primary {
  background: var(--navy-800) !important;
  border-color: var(--navy-800) !important;
  color: var(--white) !important;
  box-shadow: var(--shadow-sm) !important;
  font-size: 0.875rem !important;
  padding: 13px 28px !important;
}

#modalform .btn-primary:hover {
  background: var(--gold-500) !important;
  border-color: var(--gold-500) !important;
  color: var(--navy-900) !important;
  box-shadow: var(--shadow-gold) !important;
}

/* Мобайл: левая панель не фиксированной высоты */
@media (max-width: 767px) {
  .modal-left-panel { min-height: auto; }
  .modal-dialog.modal-lg { margin: 0.5rem; }
}

/* Form controls */
.form-group {
  margin-bottom: 1.2rem !important;
}

.form-group label.small {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gray-500) !important;
}

.form-control {
  background: var(--gray-50) !important;
  border: 1.5px solid var(--gray-200) !important;
  color: var(--navy-800) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  font-size: 0.9rem !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  transition: all var(--dur-fast) var(--ease-out) !important;
}

.form-control:focus {
  background: var(--white) !important;
  border-color: var(--gold-500) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.15) !important;
  color: var(--navy-800) !important;
}

.form-control::placeholder { color: var(--gray-400) !important; font-weight: 400; }

textarea.form-control {
  border-radius: var(--radius-md) !important;
  resize: vertical;
  min-height: 110px;
}

/* Submit btn in modal — см. #modalform .btn-primary выше */

/* Success message */
.okblock { margin-top: 1rem; font-size: 0.875rem; }

/* Modal backdrop */
.modal-backdrop.show { backdrop-filter: blur(4px); background: rgba(7,13,25,.7); }

/* ── Success notification ─────────────────────────────── */
.okblock span { color: var(--gold-600) !important; font-weight: 600 !important; }

/* ── Utility Overrides ───────────────────────────────── */

/* padding/margin classes used in template */
.pt-10  { padding-top:    5.5rem !important; }
.pb-10  { padding-bottom: 5.5rem !important; }
.py-10  { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
.mt-5   { margin-top:     2.5rem !important; }
.mb-10  { margin-bottom:  5.5rem !important; }
.mb-5   { margin-bottom:  2.5rem !important; }
.mt-n5  { margin-top:    -2.5rem !important; }
.mb-lg-n10 { /* handled per breakpoint below */ }

/* z-index */
.z-1 { z-index: 1; position: relative; }

/* Overflow visible for floating icons */
.o-visible { overflow: visible !important; }

/* Lift animation */
.lift {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out) !important;
}

.lift:hover { transform: translateY(-4px) !important; }

.lift-sm:hover { transform: translateY(-2px) !important; }

/* ── Breadcrumb ───────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  font-size: 0.875rem;
}

.breadcrumb-item a { color: var(--gold-600) !important; font-weight: 600; }
.breadcrumb-item.active { color: var(--gray-500) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--gray-400); }

/* ── Page header / inner pages (if any) ──────────────── */
.page-header-ui {
  background: var(--navy-800) !important;
}

.page-header-ui-dark {
  background: var(--navy-900) !important;
}

/* ── AOS refinement ──────────────────────────────────── */
[data-aos] { transition-timing-function: var(--ease-out) !important; }

/* ── Decorative elements ─────────────────────────────── */

/* Top accent bar on the page */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500) 0%, #fbbf24 50%, var(--gold-500) 100%);
  z-index: 9999;
  pointer-events: none;
}

/* ── Feather icon color ───────────────────────────────── */
.navbar-toggler [data-feather] { color: var(--navy-700) !important; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-top: 0.75rem;
    box-shadow: var(--shadow-lg);
  }

  .btn-teal {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    justify-content: center;
  }

  .divider-right {
    border-right: none !important;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-light) !important;
  }

  #contacts .card {
    margin-bottom: 1.5rem !important;
  }

  .mb-lg-n10 {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .navbar-brand { font-size: 1.25rem !important; }

  section.bg-light.py-10 .text-lg-right {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  section.bg-light.py-10 .text-lg-right .btn {
    display: block;
    text-align: center;
    margin: 0 !important;
  }

  .modal-content { border-radius: var(--radius-lg) !important; }
  .modal-body { padding: 1.5rem !important; }
  .modal-header { padding: 1.25rem 1.5rem !important; }
}

@media (max-width: 575.98px) {
  .testimonial.p-lg-5 { padding: 0 !important; }
  .testimonial-quote { font-size: 0.95rem !important; }
}

/* ── Footer contact links ────────────────────────────── */
footer ul li a[style*="flex"] {
  color: var(--gray-500) !important;
  font-size: 0.875rem !important;
}

footer ul li a[style*="flex"]:hover {
  color: var(--gold-400) !important;
  transform: translateX(4px) !important;
}

/* mb-8 utility */
.mb-8 { margin-bottom: 4rem !important; }

/* footer-dark class */
footer.footer-dark {
  background: var(--navy-900) !important;
}

/* ── Navbar panel (Bitrix admin) ─────────────────────── */
#panel {
  position: relative;
  z-index: 10000;
}

/* Add padding-top to main when panel is present */
body.bitrix-panel main {
  padding-top: 40px;
}

/* ── Card global (non-contacts) ──────────────────────── */
.card:not(#contacts .card):not(.modal .card) {
  border-color: var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out) !important;
}

.card-link:not(#contacts .card):hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
  border-color: var(--gray-300) !important;
}

/* ── Pagination (system.pagenavigation) ──────────────── */
.page-item .page-link {
  border-radius: var(--radius-sm) !important;
  color: var(--navy-600) !important;
  border-color: var(--border-light) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  transition: all var(--dur-fast) var(--ease-out) !important;
}

.page-item .page-link:hover {
  background: var(--gray-100) !important;
  color: var(--navy-800) !important;
  border-color: var(--gray-300) !important;
}

.page-item.active .page-link {
  background: var(--navy-800) !important;
  border-color: var(--navy-800) !important;
  color: var(--white) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* =====================================================
   COMPONENT STYLES
   ===================================================== */

/* =====================================================
   MAIN PAGE SECTION STYLES
   ===================================================== */

/* ── Hero (page-header-dark) ─────────────────────────── */
.page-header {
  padding-top: 80px; /* компенсация fixed navbar */
}

.page-header-dark {
  background-color: var(--navy-800);
}

/* Дефолтный фон для всех hero-шапок с картинкой */
.page-header.bg-img-cover {
  background-image: url('/upload/bg/p_bg-hero.jpg');
  background-position: center center;
}

.page-header-title {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--white) !important;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

/* Список преимуществ в hero */
.page-header-content ul {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.page-header-content ul li {
  color: rgba(255,255,255,.75);
  font-size: 0.95rem;
  padding: 4px 0 4px 22px;
  position: relative;
}

.page-header-content ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold-400);
  font-weight: 700;
}

/* Кнопки в hero */
.page-header-content .btn-teal {
  background: var(--gold-500) !important;
  color: var(--navy-900) !important;
  box-shadow: 0 4px 20px rgba(245,158,11,.4) !important;
}

.page-header-content .btn-teal:hover {
  background: var(--gold-400) !important;
  box-shadow: 0 8px 30px rgba(245,158,11,.5) !important;
  transform: translateY(-2px) !important;
}

.page-header-content .btn-link {
  color: rgba(255,255,255,.7) !important;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color var(--dur-fast) var(--ease-out) !important;
}

.page-header-content .btn-link:hover {
  color: var(--white) !important;
  text-decoration: none !important;
}

/* Форма-карточка в hero (правая колонка) */
.page-header-content .card.rounded-lg {
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 20px 60px rgba(7,13,25,.4) !important;
  overflow: hidden;
}

.page-header-content .card-header {
  background: var(--navy-700) !important;
  color: var(--white) !important;
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  padding: 1.25rem 1.5rem !important;
}

.page-header-content .card-body {
  background: var(--white) !important;
  padding: 1.5rem !important;
}

/* SVG-волны — полностью скрыты везде */
.svg-border-rounded { display: none !important; }

/* ── Services section (bg-white + py-10, после hero) ── */
section.bg-white.py-10 {
  background: var(--white) !important;
}

/* Иконка-стек с градиентом */
.bg-gradient-primary-to-secondary {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-600) 100%) !important;
  border-radius: 50% !important;
  position: relative;
  overflow: hidden;
}

.bg-gradient-primary-to-secondary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245,158,11,.25) 0%, transparent 60%);
  border-radius: 50%;
}

/* Заголовки в services */
section.bg-white.py-10 h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--navy-800) !important;
  letter-spacing: -0.02em;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

section.bg-white.py-10 p {
  color: var(--gray-500) !important;
  font-size: 0.9rem !important;
}


/* ── Advantages section (bg-light + py-10) ─────────────
   Секция "Преимущества работы с нами"
   ───────────────────────────────────────────────────── */
section.bg-light.py-10 h2 {
  color: var(--navy-800) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

section.bg-light.py-10 .lead {
  color: var(--gray-500) !important;
}

section.bg-light.py-10 h6 {
  font-weight: 700 !important;
  color: var(--navy-800) !important;
  font-size: 0.9rem !important;
  letter-spacing: -0.01em;
  position: relative;
  padding-left: 14px;
}

section.bg-light.py-10 h6::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  background: var(--gold-500);
  border-radius: 2px;
}

section.bg-light.py-10 p.small {
  color: var(--gray-500) !important;
  font-size: 0.85rem !important;
  line-height: 1.75;
}

/* Изображение с наклоном */
.content-skewed-item {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Pricing section (bg-light + pt-10, главная) ────── */
section.bg-light.pt-10 h2 {
  color: var(--navy-800) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

section.bg-light.pt-10 .lead {
  color: var(--gray-500) !important;
}


/* ── FAQ section (bg-dark) ───────────────────────────── */
section.bg-dark {
  background: var(--navy-800) !important;
  position: relative;
  overflow: hidden;
}

section.bg-dark::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(245,158,11,.06) 0%, transparent 65%);
  pointer-events: none;
}

/* Icon circle в FAQ */
section.bg-dark .icon-stack.bg-teal {
  background: rgba(0,186,148,.15) !important;
  border: 1px solid rgba(0,186,148,.3);
  border-radius: 50%;
  flex-shrink: 0;
}

section.bg-dark .icon-stack.bg-teal .fa-question {
  color: #00ba94 !important;
}

/* Заголовки FAQ */
section.bg-dark .text-white {
  color: var(--white) !important;
}

section.bg-dark h5.text-white {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

section.bg-dark p.text-white-50 {
  color: rgba(255,255,255,.55) !important;
  font-size: 0.875rem !important;
  line-height: 1.75;
}

/* CTA-блок внутри FAQ */
section.bg-dark .badge-transparent-light {
  background: rgba(255,255,255,.1) !important;
  color: var(--gold-400) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,.15);
}

section.bg-dark h2.text-white {
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

section.bg-dark p.lead.text-white-50 {
  font-size: 1rem !important;
}

/* CTA кнопка внутри FAQ */
section.bg-dark .btn-teal {
  background: var(--gold-500) !important;
  color: var(--navy-900) !important;
  box-shadow: 0 4px 20px rgba(245,158,11,.35) !important;
}

section.bg-dark .btn-teal:hover {
  background: var(--gold-400) !important;
  box-shadow: 0 8px 30px rgba(245,158,11,.5) !important;
}


/* ── Breadcrumb ───────────────────────────────────────
   bitrix/breadcrumb/bread
   ───────────────────────────────────────────────────── */

/* Хлебные крошки вне hero — серая полоска */
.breath {
  margin-top: 0 !important;
  padding: 12px 0 !important;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-light);
}

/* Хлебные крошки ВНУТРИ тёмного hero — прозрачные */
.page-header .breath,
.page-header-dark .breath {
  background: transparent !important;
  border-bottom: none !important;
  padding: 8px 0 !important;
  margin-top: 0.75rem !important;
}

.bx-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.bx-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-500);
}

/* Внутри hero — белый текст */
.page-header .bx-breadcrumb-item,
.page-header-dark .bx-breadcrumb-item { color: rgba(255,255,255,.5); }

.bx-breadcrumb-item a {
  color: var(--gray-500) !important;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.page-header .bx-breadcrumb-item a,
.page-header-dark .bx-breadcrumb-item a { color: rgba(255,255,255,.6) !important; }

.page-header .bx-breadcrumb-item a:hover,
.page-header-dark .bx-breadcrumb-item a:hover { color: var(--gold-300, #fcd34d) !important; }

.bx-breadcrumb-item a:hover { color: var(--gold-600) !important; }

.bx-breadcrumb-item:last-child a {
  color: var(--navy-700) !important;
  font-weight: 600;
  pointer-events: none;
}

.bx-breadcrumb-item .fa-angle-right {
  font-size: 0.7rem;
  color: var(--gray-400);
}

/* ── Blog List (news/digit_blog) ──────────────────────
   news.list/.default/template.php
   ───────────────────────────────────────────────────── */

/* Featured post — horizontal card */
.post-preview.post-preview-featured {
  display: block;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  text-decoration: none;
  background: var(--white) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out) !important;
}

.post-preview.post-preview-featured:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
  text-decoration: none;
  border-color: var(--gray-300) !important;
}

/* Featured image side */
.post-preview-featured-img {
  height: 100%;
  min-height: 280px;
  background-size: cover;
  background-position: center;
  border-radius: 0;
}

@media (max-width: 991.98px) {
  .post-preview-featured-img { min-height: 220px; }
}

/* Featured card body */
.post-preview.post-preview-featured .card-body {
  padding: 2.5rem 2rem !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.post-preview.post-preview-featured .py-5 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  flex: 1;
}

.post-preview.post-preview-featured .card-title {
  font-family: var(--font-body);
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--navy-800) !important;
  letter-spacing: -0.03em;
  line-height: 1.3;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-preview.post-preview-featured .card-text {
  color: var(--gray-500) !important;
  font-size: 0.9rem !important;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-preview.post-preview-featured hr {
  border-color: var(--border-light);
  margin: 1rem 0;
}

/* Grid post cards */
.post-preview:not(.post-preview-featured) {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  text-decoration: none;
  background: var(--white) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out) !important;
}

.post-preview:not(.post-preview-featured):hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-6px) !important;
  text-decoration: none;
  border-color: var(--gray-300) !important;
}

.post-preview .card-img-top {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}

.post-preview .card-body {
  padding: 1.5rem !important;
  flex: 1;
}

.post-preview .card-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--navy-800) !important;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin-bottom: 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-preview .card-text {
  color: var(--gray-500) !important;
  font-size: 0.875rem !important;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer with meta */
.post-preview .card-footer {
  background: var(--gray-50) !important;
  border-top: 1px solid var(--border-light) !important;
  padding: 0.875rem 1.5rem !important;
}

/* Meta (author + date) */
.post-preview-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-preview-meta-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-light);
  flex-shrink: 0;
}

.post-preview-meta-details-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy-700);
  line-height: 1.2;
}

.post-preview-meta-details-date {
  font-size: 0.72rem;
  color: var(--gray-500);
  line-height: 1.2;
}

/* mt-n15 override (featured card negative margin) */
.mt-n15 {
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
}

/* ── Works List (news/works) ──────────────────────────
   news.list/.default/template.php  — portfolio grid
   ───────────────────────────────────────────────────── */
.card-portfolio {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  text-decoration: none;
  background: var(--white) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out) !important;
}

.card-portfolio:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-6px) !important;
  text-decoration: none;
  border-color: var(--gray-300) !important;
}

.card-portfolio .card-img-top {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
  transition: transform 0.5s var(--ease-out);
}

.card-portfolio:hover .card-img-top {
  transform: scale(1.04);
}

.card-portfolio .card-body {
  padding: 1.25rem 1.5rem !important;
}

.card-portfolio .card-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--navy-800) !important;
  letter-spacing: -0.02em;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* negative top margin on first row of works — scoped to portfolio grid only */
.row.mt-n10 { margin-top: 0 !important; }
.row.mt-n10 > [class*="col"].mt-n5 { margin-top: 0 !important; }

/* ── Blog Detail (news.detail) ───────────────────────── */
.newscontent {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--navy-700);
}

.newscontent h1,
.newscontent h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--navy-800);
}

.newscontent h3,
.newscontent h4 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--navy-800);
}

.newscontent h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.newscontent h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.newscontent h3 { font-size: 1.2rem; }

.newscontent p { color: var(--navy-700); line-height: 1.85; }

.newscontent a {
  color: var(--gold-600) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.newscontent a:hover { color: var(--gold-500) !important; }

.newscontent img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out);
}

.newscontent img:hover { transform: scale(1.01); }
.newscontent img.no-img-hover,
.newscontent img.no-img-hover:hover { transform: none; cursor: default; box-shadow: none; }

.newscontent blockquote {
  border-left: 4px solid var(--gold-500);
  padding: 1rem 1.5rem;
  background: rgba(245,158,11,.05);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 1.5rem 0;
  color: var(--navy-600);
  font-style: italic;
}

.newscontent pre,
.newscontent code {
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  font-size: 0.875em;
}

/* Wrapper <pre> — только геометрия, без цвета */
.newscontent pre {
  margin: 1.5rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--gray-200);
  /* НЕ задаём background/color — оставляем hljs */
}

/* Inline code (без класса hljs) */
.newscontent code:not(.hljs):not([class*="language-"]) {
  background: rgba(15,23,42,.07);
  color: var(--navy-700);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
}

/* ── HLJS: защита от каскада — приоритет hl.css ───────── */
/* Все правила hl.css должны выигрывать у наших генериков  */
code.hljs,
.newscontent code.hljs,
pre .hljs,
.newscontent pre .hljs,
.newscontent pre code.hljs {
  display: block !important;
  overflow-x: auto !important;
  padding: .5em !important;
  background: #F0F0F0 !important;
  color: #444 !important;
  /* Убираем любые border/radius которые мы могли унаследовать */
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace !important;
  font-size: 0.875em !important;
}

/* Строки с номерами — hl.css ln-plugin */
.hljs-ln-numbers {
  text-align: right !important;
  border-right: 1px solid #ccc !important;
  color: #999 !important;
  padding-right: 5px !important;
  -webkit-user-select: none;
  user-select: none;
}
.hljs-ln-code { padding-left: 5px !important; }

/* Токены — восстановим hl.css цвета явно (на случай наследования) */
.hljs-keyword, .hljs-attribute, .hljs-selector-tag,
.hljs-meta-keyword, .hljs-doctag, .hljs-name { font-weight: bold !important; }
.hljs-type, .hljs-string, .hljs-number, .hljs-selector-id,
.hljs-selector-class, .hljs-quote, .hljs-template-tag,
.hljs-deletion { color: #0061f2 !important; }
.hljs-title, .hljs-section { color: #0061f2 !important; font-weight: bold !important; }
.hljs-regexp, .hljs-symbol, .hljs-variable, .hljs-template-variable,
.hljs-link { color: #BC6060 !important; }
.hljs-literal { color: #78A960 !important; }
.hljs-built_in, .hljs-bullet, .hljs-code,
.hljs-addition { color: #397300 !important; }
.hljs-meta { color: #1f7199 !important; }
.hljs-comment { color: #888888 !important; }
/* ─────────────────────────────────────────────────────── */

.newscontent ul,
.newscontent ol {
  padding-left: 1.5rem;
  color: var(--navy-700);
  line-height: 1.85;
}

.newscontent li { margin-bottom: 0.4rem; }

/* Обычные контентные таблицы — НЕ hljs-ln */
.newscontent table:not(.hljs-ln) {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 1.5rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.newscontent table:not(.hljs-ln) th {
  background: var(--navy-800);
  color: var(--white);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.newscontent table:not(.hljs-ln) td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--navy-700);
}

.newscontent table:not(.hljs-ln) tr:last-child td { border-bottom: none; }
.newscontent table:not(.hljs-ln) tr:nth-child(even) td { background: var(--gray-50); }

/* ── hljs-ln: полный сброс любых посторонних стилей ─── */
/* Таблица с номерами строк — только структура, все цвета из hl.css */
table.hljs-ln,
.hljs table.hljs-ln {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: inherit !important;
}

table.hljs-ln td,
.hljs table.hljs-ln td {
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  color: inherit !important;
  vertical-align: top;
  line-height: 1.6;
}

/* Чётные/нечётные строки — НИКАКИХ полос в hljs */
table.hljs-ln tr:nth-child(even) td,
table.hljs-ln tr:nth-child(odd) td,
.hljs table.hljs-ln tr:nth-child(even) td {
  background: transparent !important;
}

table.hljs-ln tr:last-child td { border-bottom: none !important; }

/* ── Pricing cards — GLOBAL (главная страница) ───────── */
/* Светлая карточка с золотым акцентом                    */
.card.pricing {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
  background: var(--white) !important;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out) !important;
}

.card.pricing:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
}

.card.pricing .card-body {
  background: var(--white) !important;
  padding: 2rem !important;
}

/* Верхняя золотая полоска на pricing карточках главной */
.card.pricing::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--grad-gold);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.card.pricing:hover::before { opacity: 1; }

/* ── Pricing sidebar (блог-детейл, col-md-4) ─────────── */
/* Тёмная карточка только в сайдбаре статьи               */
.col-md-4 .card.pricing,
.col-lg-3 .card.pricing {
  position: sticky;
  top: 90px;
  background: var(--navy-800) !important;
}

.col-md-4 .card.pricing .card-body,
.col-lg-3 .card.pricing .card-body {
  background: var(--navy-800) !important;
}

.col-md-4 .card.pricing::before,
.col-lg-3 .card.pricing::before {
  background: var(--grad-gold);
  opacity: 1;
}

/* ── Pricing общие элементы ──────────────────────────── */
.pricing-price {
  font-family: var(--font-body);
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 1.25rem 0;
  color: var(--navy-800) !important;
}

/* В тёмном сайдбаре — белый */
.col-md-4 .pricing-price,
.col-lg-3 .pricing-price { color: var(--white) !important; }

.pricing-price sup {
  font-size: 1rem;
  font-weight: 500;
  vertical-align: top;
  margin-top: 0.5rem;
  margin-right: 2px;
  color: var(--gray-500) !important;
}

.col-md-4 .pricing-price sup,
.col-lg-3 .pricing-price sup { color: var(--gray-400) !important; }

.pricing-price .pricing-price-period {
  font-size: 1.2rem;
  color: var(--gold-500) !important;
}

.pricing-list {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
}

.pricing-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.875rem;
}

/* В тёмном сайдбаре — прозрачная разделительная линия */
.col-md-4 .pricing-list-item,
.col-lg-3 .pricing-list-item {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.pricing-list-item .fa-li {
  color: var(--gold-500) !important;
  position: static;
  margin: 0;
  width: auto;
}

/* .text-dark внутри pricing — на главной тёмный, в сайдбаре светлый */
.card.pricing .pricing-list-item .text-dark {
  color: var(--navy-700) !important;
}

.col-md-4 .card.pricing .pricing-list-item .text-dark,
.col-lg-3 .card.pricing .pricing-list-item .text-dark {
  color: var(--gray-300) !important;
}

/* badge в pricing */
.card.pricing .badge.badge-light {
  background: var(--gray-100) !important;
  color: var(--navy-700) !important;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-full);
}

.col-md-4 .card.pricing .badge.badge-light,
.col-lg-3 .card.pricing .badge.badge-light {
  background: rgba(255,255,255,.12) !important;
  color: var(--white) !important;
}

.card.pricing .badge-primary-soft {
  background: rgba(245,158,11,.12) !important;
  color: var(--gold-600) !important;
}

.card.pricing .card-text {
  color: var(--gray-500) !important;
  font-size: 0.85rem;
  line-height: 1.65;
  margin-top: 1rem;
  margin-bottom: 0;
}

.col-md-4 .card.pricing .card-text,
.col-lg-3 .card.pricing .card-text {
  color: var(--gray-400) !important;
}

/* Image modal (onclick popup) */
.w3-modal {
  display: none;
  position: fixed;
  z-index: 9000;
  inset: 0;
  background: rgba(7,13,25,.85);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}

.w3-modal[style*="block"] { display: flex !important; }

.w3-modal-content {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.w3-modal-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Works Detail (news/works) ──────────────────────── */
.hochu {
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: sticky;
  top: 90px;
}

.hochu h6 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  margin-bottom: 0.75rem;
}

.hochu ul,
.hochu ol {
  padding-left: 1.25rem;
  font-size: 0.9rem;
  color: var(--navy-600);
  line-height: 1.8;
}

.hochu p {
  font-size: 0.9rem;
  color: var(--navy-600);
  line-height: 1.75;
}

/* Site link card in works detail */
.card.bg-light.shadow-none {
  background: var(--gray-50) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}

.card.bg-light.shadow-none .lead {
  color: var(--navy-700) !important;
  font-size: 0.95rem !important;
  font-weight: 500;
}

/* ── Forum / Reviews ─────────────────────────────────── */
.forum_table_1,
.forum_table_2 {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.forum_table_1 tr.odd,
.forum_table_2 tr.odd {
  background: var(--white);
}

.forum_table_1 tr.even,
.forum_table_2 tr.even {
  background: var(--gray-50);
}

.forum_table_1 td,
.forum_table_2 td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
  font-size: 0.9rem;
  color: var(--navy-700);
}

.forum_table_1 tr:last-child td,
.forum_table_2 tr:last-child td {
  border-bottom: none;
}

/* User avatar in review */
.forum_post_user_icon img {
  border-radius: 50%;
  border: 2px solid var(--border-light);
}

/* Comment/reply text area */
.forum_message {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--navy-700);
}

/* Forum reply form */
.forum-reply-form .form-control {
  margin-bottom: 0.75rem;
}

/* ── Voting Stars (iblock.vote/ajax) ─────────────────── */
.vote-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  color: var(--gray-500);
}

/* Star symbols — override component */
.vote-container .vote-star,
span[id^="vote_star"] {
  cursor: pointer;
  font-size: 1.2rem;
  transition: transform var(--dur-fast) var(--ease-back);
}

span[id^="vote_star"]:hover {
  transform: scale(1.25);
}

/* Gold stars */
span.vote-star-filled { color: var(--gold-500); }
span.vote-star-empty  { color: var(--gray-300); }

/* ── Catalog Filter ───────────────────────────────────── */
.catalog-filter-table {
  width: 100%;
}

.catalog-filter-table td {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--navy-700);
}

.catalog-filter-table input[type="text"],
.catalog-filter-table select {
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--navy-800);
  background: var(--white);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.catalog-filter-table input:focus,
.catalog-filter-table select:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}

/* Filter submit button */
.catalog-filter-table input[type="submit"] {
  background: var(--navy-800);
  color: var(--white);
  border: none;
  border-radius: var(--radius-full);
  padding: 9px 22px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.catalog-filter-table input[type="submit"]:hover {
  background: var(--gold-500);
  color: var(--navy-900);
}

/* ── Search Form ─────────────────────────────────────── */
.search-form-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 1.5rem;
}

.search-form-wrap input[type="text"] {
  flex: 1;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 10px 18px;
  font-size: 0.9rem;
  color: var(--navy-800);
  background: var(--white);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.search-form-wrap input[type="text"]:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}

.search-form-wrap input[type="submit"] {
  background: var(--navy-800);
  color: var(--white);
  border: none;
  border-radius: var(--radius-full);
  padding: 10px 22px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}

.search-form-wrap input[type="submit"]:hover {
  background: var(--gold-500);
  color: var(--navy-900);
}

/* Search results */
.search-results-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border-light);
}

.search-results-item:last-child { border-bottom: none; }

.search-results-item-title a {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-800) !important;
  letter-spacing: -0.02em;
}

.search-results-item-title a:hover { color: var(--gold-600) !important; }

.search-results-item-text {
  font-size: 0.875rem;
  color: var(--gray-500);
  line-height: 1.65;
  margin-top: 0.3rem;
}

.search-results-item-path {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 0.3rem;
}

/* ── Copy button on code blocks ──────────────────────── */
.code-block-wrapper {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 10;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.65);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  line-height: 1.6;
}

/* Показываем кнопку при ховере на блок */
.code-block-wrapper:hover .copy-button { opacity: 1; }

.copy-button:hover {
  background: rgba(0,0,0,.6);
  color: var(--white);
}

.copy-button.copied {
  background: rgba(245,158,11,.2);
  border-color: rgba(245,158,11,.4);
  color: var(--gold-400);
  opacity: 1;
}

/* Запрещаем случайное выделение текста при клике по коду */
pre code { user-select: text; cursor: default; }

/* ── Blog / Inner page specific ─────────────────────── */

/* Hero на внутренних страницах (без фонового изображения) */
.page-header.bg-img-cover {
  background-color: var(--navy-800);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Заголовок статьи внутри blog-hero (bg-img-cover = страницы с обложкой) */
.page-header.bg-img-cover .page-header-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 3vw, 2.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.15;
  color: var(--white) !important;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem !important;
}

/* Подзаголовок "от v2Team" */
.page-header-text {
  color: rgba(255,255,255,.55) !important;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}


/* Контентная секция статьи (section.pt-10) */
section.pt-10 {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem;
  background: var(--white);
}

/* Разделитель и кнопка «Возврат к списку» */
section.pt-10 > .container > hr {
  border-color: var(--border-light);
  opacity: 1;
  margin: 3rem 0 2rem !important;
}

.btn-transparent-dark {
  background: transparent !important;
  border: 1.5px solid var(--navy-600) !important;
  color: var(--navy-600) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  border-radius: var(--radius-full) !important;
  padding: 10px 24px !important;
  transition: all var(--dur-fast) var(--ease-out) !important;
}

.btn-transparent-dark:hover {
  background: var(--navy-800) !important;
  border-color: var(--navy-800) !important;
  color: var(--white) !important;
  transform: translateY(-1px) !important;
}

/* Sidebar партнёрские баннеры */
.col-md-4 img.w-100,
.col-lg-3 img.w-100 {
  border-radius: var(--radius-md);
  display: block;
}

.col-md-4 .mt-4 a,
.col-lg-3 .mt-4 a {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.col-md-4 .mt-4 a:hover,
.col-lg-3 .mt-4 a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Inline code внутри ol/li в статье */
.newscontent ol li code,
.newscontent ul li code {
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   ГЛАВНАЯ: новые блоки
   ═══════════════════════════════════════════════════════ */

/* ── Hero: stats strip ───────────────────────────────── */
.hero-stats {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 2.25rem;
  padding-bottom: 1rem;
  margin-top: 3rem;
}

.hero-stat {
  text-align: center;
  padding: 0.5rem 0;
}

.hero-stat-number {
  display: block;
  font-family: var(--font-body);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--gold-400);
  letter-spacing: -0.04em;
  line-height: 1;
}

.hero-stat-label {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,.45);
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Note under hero form */
.hero-form-note {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,.35) !important;
  font-weight: 400 !important;
  line-height: 1.5;
}

/* ── Process steps ───────────────────────────────────── */
.process-step {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.process-step:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Big ghost number in background */
.process-step-number {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 4rem;
  font-weight: 800;
  color: var(--navy-800);
  opacity: .06;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}

/* Icon box */
.process-step-icon {
  width: 46px;
  height: 46px;
  background: var(--navy-800);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  font-size: 1rem;
  margin-bottom: 1.1rem;
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease-out);
}

.process-step:hover .process-step-icon {
  background: var(--gold-500);
  color: var(--navy-900);
}

.process-step h5 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--navy-800) !important;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem !important;
}

.process-step p {
  font-size: 0.875rem !important;
  color: var(--gray-500) !important;
  line-height: 1.72;
  margin-bottom: 0 !important;
}

/* Gold left-border on hover */
.process-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad-gold);
  border-radius: 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-back);
}

.process-step:hover::before { transform: scaleY(1); }

/* ── h6 gold accent bars — for bg-white sections too ─── */
section.bg-white.py-10 h6 {
  font-weight: 700 !important;
  color: var(--navy-800) !important;
  font-size: 0.9rem !important;
  letter-spacing: -0.01em;
  position: relative;
  padding-left: 14px;
}

section.bg-white.py-10 h6::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  background: var(--gold-500);
  border-radius: 2px;
}

section.bg-white.py-10 p.small {
  color: var(--gray-500) !important;
  font-size: 0.85rem !important;
  line-height: 1.75;
}

/* ── Pricing: featured card ──────────────────────────── */
/* Центральная карточка — выделенная, со смещением вверх  */
.card.pricing.pricing-featured {
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--gold-500) !important;
  transform: translateY(-8px);
}

.card.pricing.pricing-featured::before {
  opacity: 1 !important;
}

.card.pricing.pricing-featured:hover {
  transform: translateY(-12px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Pricing section header tweaks */
section.bg-light.pt-10 h2 {
  color: var(--navy-800) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

section.bg-light.pt-10 .lead {
  color: var(--gray-500) !important;
}

/* ── Services section: lead color ─────────────────────── */
section.bg-white.py-10 .lead {
  color: var(--gray-500) !important;
  font-size: 1rem !important;
}

/* ── Services: вторая строка — приглушённые иконки ────── */
/* Чуть меньше яркости у иконок доп. направлений          */
.services-row-secondary .icon-stack.services-icon-alt {
  opacity: 0.82;
}

.services-row-secondary .icon-stack.services-icon-alt:hover,
.services-row-secondary [data-aos].is-animated .icon-stack.services-icon-alt {
  opacity: 1;
}

/* Разделитель между строками услуг */
.services-row-secondary {
  padding-top: 2rem;
  border-top: 1px solid var(--border-light);
  position: relative;
}

.services-row-secondary::before {
  content: 'Дополнительные направления';
  position: absolute;
  top: -0.65em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  padding: 0 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  white-space: nowrap;
}

/* ── Section header text (reusable) ──────────────────── */
.text-gray-500 { color: var(--gray-500) !important; }

/* ── Responsive: process steps + services ───────────── */
@media (max-width: 767.98px) {
  .process-step { padding: 1.5rem 1.25rem; }
  .hero-stat-number { font-size: 1.7rem; }
  .hero-stats { margin-top: 2rem; padding-top: 1.75rem; }

  /* На мобильных — скрываем текст разделителя, оставляем линию */
  .services-row-secondary::before { display: none; }
  .services-row-secondary { padding-top: 1.5rem; margin-top: 0.5rem; }
}

/* ── Project detail — meta card ─────────────────────── */
.project-meta-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}

.project-meta-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.project-meta-item:last-child,
.project-meta-item--last { border-bottom: none; }

@media (min-width: 576px) {
  .project-meta-item { border-bottom: none; border-right: 1px solid var(--gray-200); }
  .project-meta-item--last,
  .project-meta-item:last-child { border-right: none; }
}

/* Между строками на sm (2 колонки) */
@media (min-width: 576px) and (max-width: 991px) {
  .project-meta-item:nth-child(-n+2) { border-bottom: 1px solid var(--gray-200); }
}

.project-meta-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.project-meta-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.project-meta-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-400);
  line-height: 1.2;
  margin-bottom: .25rem;
}

.project-meta-value {
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.project-meta-value,
.project-meta-link {
  color: var(--navy-800);
  text-decoration: none;
  transition: color var(--dur-fast);
}
a.project-meta-value:hover,
.project-meta-link:hover { color: var(--gold-500) !important; }

.project-meta-ext {
  font-size: .6rem;
  vertical-align: middle;
  opacity: .5;
}

/* ── Project detail — CTA block ─────────────────────── */
.project-cta {
  border-radius: var(--radius-lg);
  background: var(--navy-800);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

/* Декоративный золотой акцент сверху */
.project-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
}

/* Фоновый паттерн точек */
.project-cta::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 320px; height: 100%;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}

.project-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.project-cta-text { flex: 1 1 280px; }

.project-cta-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.03em;
  margin-bottom: .5rem;
}

.project-cta-sub {
  color: rgba(255,255,255,.55);
  font-size: .9rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.project-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  flex-shrink: 0;
}

/* Золотая кнопка */
.btn-gold {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900) !important;
  font-weight: 700;
}
.btn-gold:hover, .btn-gold:focus {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--navy-900) !important;
}

/* «или напишите напрямую» */
.project-cta-messengers { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }

.project-cta-or {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.3);
}

.project-cta-links { display: flex; gap: .5rem; }

.project-cta-link {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff !important;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast);
  opacity: .75;
}
.project-cta-link:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.3); }

.project-cta-link--max  { background: #6C31F0; }
.project-cta-link--max img { width: 1.1rem; height: 1.1rem; }
.project-cta-link--tg   { background: #2AABEE; }
.project-cta-link--wa   { background: #25D366; }
.project-cta-link--email { background: var(--gold-500); color: var(--navy-900) !important; }

@media (max-width: 767px) {
  .project-cta { padding: 1.75rem; }
  .project-cta-inner { flex-direction: column; align-items: flex-start; }
  .project-cta-actions { align-items: flex-start; width: 100%; }
  .project-cta-messengers { align-items: flex-start; }
  .btn-gold { width: 100%; text-align: center; }
}

/* ── Project detail — desc text columns ─────────────── */
.project-desc-text p:last-child,
.project-desc-text ul:last-child { margin-bottom: 0; }

/* ── Print ───────────────────────────────────────────── */
@media print {
  body::before { display: none; }
  .navbar-marketing { position: static !important; }
}