:root {
  --brand-600: #007aff; 
  --brand-700: #005fcc; 
  --brand-500: #1a8cff; 
  --brand-400: #409cff;
}

html {
  scroll-behavior: smooth;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* Исправление "дыр" с видимым hero-section */
body {
  background: white;
  position: relative;
  z-index: 10;
}

/* Гарантия, что все секции имеют белый фон */
#about,
#process,
#cases,
#chat,
#faq,
#pricing,
footer {
  background: white;
  position: relative;
  z-index: 20;
}

/* Особенно для секций, которые могут иметь прозрачность */
.pricing-section {
  background: linear-gradient(180deg, #f3f6f9 0%, #e9ecf5 100%) !important;
}

.faq-section {
  background-color: #f1f5f9 !important;
}

.chat-section {
  background: #f8fafc !important;
}

.transformation-section {
  background: #f8fafc !important;
}

/* Дополнительная гарантия против проступающего hero */
main, 
section:not(.hero-bg) {
  background: white;
}

.bg-brand-600 { background-color: var(--brand-600) !important; }
.hover\:bg-brand-700:hover { background-color: var(--brand-700) !important; }
.text-brand-700 { color: var(--brand-700) !important; }
.hover\:text-brand-700:hover { color: var(--brand-700) !important; }
.border-brand-600 { border-color: var(--brand-600) !important; }
.hover\:border-brand-600:hover { border-color: var(--brand-600) !important; }

.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.img-face { object-position: center 20%; }

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ""; position: absolute; inset: -20% auto -20% -40%;
  width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: shine 1.8s linear infinite;
  pointer-events: none;
}

.li-boost { transition: transform .2s ease, color .2s ease; animation: fade-up .5s ease forwards; opacity: 0; }
.li-boost:hover { transform: translateX(2px); }
.badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 9999px; background: var(--brand-600); color: #fff; font-size: 18px; }

.glare-hover {
  --gh-bg: #fff; --gh-br: 1rem; --gh-border: rgba(2,6,23,.12);
  --gh-angle: 130deg; --gh-rgba: rgba(255,255,255,0.4); --gh-duration: .8s; --gh-size: 300%;
  background: var(--gh-bg); border-radius: var(--gh-br); border: 1px solid var(--gh-border);
  overflow: hidden; position: relative; display: grid; place-items: start;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.glare-hover::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(var(--gh-angle), hsla(0,0%,0%,0) 60%, var(--gh-rgba) 70%, hsla(0,0%,0%,0), hsla(0,0%,0%,0) 100%);
  transition: var(--gh-duration) ease; background-size: var(--gh-size) var(--gh-size), 100% 100%;
  background-repeat: no-repeat; background-position: -100% -100%, 0 0; pointer-events: none;
}
.glare-hover:hover::before { background-position: 100% 100%, 0 0; }
.glare-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(2,6,23,.12); }

.vip-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #f7f9ff);
  border: 1px solid rgba(51,72,219,.25);
  box-shadow: 0 10px 30px rgba(51,72,219,.15);
  border-radius: 1rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vip-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-30%); transition: opacity .2s ease, transform .6s ease;
}
.vip-card:hover::before { opacity: 1; transform: translateX(30%); }
.vip-card:hover { transform: translateY(-6px); box-shadow: 0 25px 60px rgba(51,72,219,.25); }
.vip-badge { position: absolute; right: 1rem; top: -.6rem; background: var(--brand-600); color: #fff; font-weight: 600; font-size: .75rem; padding: .35rem .6rem; border-radius: 9999px; box-shadow: 0 8px 20px rgba(51,72,219,.35); }

.anim-input { transition: box-shadow .25s ease, border-color .25s ease, transform .15s ease; }
.anim-input:focus {
  outline: none; border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 10px 24px rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.btn-submit { position: relative; overflow: hidden; transition: transform .15s ease, background-color .3s ease; background-color: var(--brand-600) !important; }
.btn-submit:hover { transform: translateY(-1px); background-color: var(--brand-700) !important; }
.btn-submit:active { transform: translateY(0); }
.btn-sent { background: #18b36b !important; box-shadow: 0 10px 24px rgba(24,179,107,.35) !important; transition: background-color .3s ease, box-shadow .3s ease; }

.social-icon { color: black !important; font-size: 28px; transition: transform 0.2s ease, opacity 0.2s ease; }
.social-icon:hover { transform: translateY(-4px); opacity: 0.8; }
body.modal-open { scroll-behavior: auto !important; }

h1 {
  font-family: 'EuropeExt', sans-serif;
  font-weight: 700;
}

h2 {
  font-family: 'EuropeExt', sans-serif;
  font-weight: 700;
}

h3 {
  font-family: 'EuropeExt', sans-serif;
  font-weight: 700;
}