/* main.css — ваши кастомные стили (без inline в разметке) */

:root{
  --brand-red: #e53935;
  --brand-blue: #1e88e5;
  --text-dark: #1f2937;
  --bg-light: #f8fafc;
}

html, body { scroll-behavior: smooth; }

/* Header / navbar */
.navbar-brand img { height: 40px; width: auto; }
.navbar-brand .brand-title { font-weight: 800; letter-spacing: .02em; }




.btn-outline-brand {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.btn-outline-brand:hover {
  background: var(--brand-blue);
  color: #fff;
}

.hero {
  background: linear-gradient(135deg, rgba(29,78,216,.08), rgba(229,57,53,.08)), #fff;
  padding: 72px 0 48px 0;
}
.hero .lead { color: #334155; }

.section-title {
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text-dark);
}

.badge-brand { background: var(--brand-blue); }
.text-brand { color: var(--brand-blue); }

.card-feature {
  border: 1px solid #e5e7eb;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-feature:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }

.brand-grid img { height: 36px; width: auto; filter: grayscale(100%); opacity: .9; transition: .2s; }
.brand-grid img:hover { filter: none; opacity: 1; }

.pricing .card { border: 1px solid #e5e7eb; }
.pricing .price { font-size: 1.75rem; font-weight: 800; }

.faq .accordion-button:not(.collapsed){ color: var(--brand-blue); background: rgba(30,136,229,.05); }

.footer {
  background: #0f172a;
  color: #cbd5e1;
}
.footer a { color: #e2e8f0; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* Contact form */
.form-control, .form-select { border-radius: .5rem; }
input::placeholder, textarea::placeholder { color: #94a3b8; }

/* Refined brand buttons: high contrast on red, subtle depth */
.btn-brand{
  --_red: var(--brand-red);
  --_shadow: rgba(229,57,53,.35);
  background: linear-gradient(180deg, color-mix(in srgb, var(--_red) 92%, white 8%), var(--_red));
  border-color: color-mix(in srgb, var(--_red) 90%, black 10%);
  color: #fff;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 6px 12px var(--_shadow);
}
.btn-brand:hover,
.btn-brand:focus{
  background: linear-gradient(180deg, color-mix(in srgb, var(--_red) 85%, white 15%), color-mix(in srgb, var(--_red) 95%, black 5%));
  border-color: color-mix(in srgb, var(--_red) 80%, black 20%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px var(--_shadow);
}
.btn-brand:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px var(--_shadow);
}

/* Keep outline-blue option as a calm secondary */
.btn-outline-brand{
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.btn-outline-brand:hover,
.btn-outline-brand:focus{
  background: var(--brand-blue);
  color: #fff;
}


/* Hero photo */
.hero-photo-wrapper{
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  border: 1px solid #e5e7eb;
}
.hero-photo{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/3;
}

@media (max-width: 991.98px){
  .hero .display-5{ font-size: 2rem; }
  .hero-photo{ aspect-ratio: 16/10; }
}