:root{
  --brand-yellow:#FFC107;
  --text-dark:#212529;
  --bg-light:#f7f7f9;
}

body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif; color:var(--text-dark);}
a{text-decoration:none}

/* Header */
.site-header{background:#fff; position:sticky; top:0; z-index:1030; backdrop-filter:saturate(180%) blur(6px)}
.site-header .nav-link{color:#555}
.site-header .nav-link:hover{color:#000}
.brand-mark{width:20px;height:20px;border-radius:4px;background:var(--brand-yellow);display:inline-block}
.brand-name{color:#000}
.btn-brand{background:var(--brand-yellow); color:#000; border:0; font-weight:600}
.btn-brand:hover{background:#e0a800; color:#000}

/* Hero */
.hero {
  position: relative;
  min-height: 70vh;
  background: url('/assets/img/evakuator-bg.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* центрируем текст */
  color: #fff;
  overflow: hidden;   /* чтобы оверлей не вылезал */
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55); /* степень затемнения: 0.55–0.7 */
  z-index: 0;                   /* оверлей под контентом */
}

.hero .container {
  position: relative;
  z-index: 1;                   /* контент над оверлеем */
  max-width: 800px;
}

.hero h1,
.hero .lead {
  text-shadow: 0 2px 8px rgba(0,0,0,0.35); /* доп. контраст без грязи */
}

.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45))}
.hero-content{padding-top:14vh}

/* Sections */
.section-title{font-weight:800; letter-spacing:.2px}
.features .feature-card{background:#fff; border:1px solid #eee; border-radius:12px; transition:.25s}
.features .feature-card:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08)}
.feature-icon{font-size:28px}

/* Service cards */
.service-card{border:1px solid #eee; border-radius:14px; transition:.25s}
.service-card:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.08)}
.price-tag{display:inline-block; background:var(--brand-yellow); color:#000; font-weight:700; padding:.35rem .6rem; border-radius:999px}

/* Works */
.work-card img, .work-card video{box-shadow:0 6px 18px rgba(0,0,0,.08)}

/* CTA band */
.cta-band{background:var(--brand-yellow)!important}

/* Footer */
.site-footer{background:#111; color:#bbb}
.site-footer a{color:#ddd}
.site-footer a:hover{color:#fff}
.footer-grid{grid-template-columns:1.2fr .8fr .8fr}
@media (max-width: 768px){ .footer-grid{grid-template-columns:1fr} }

.social-links a i {
  font-size: 2rem;       /* крупные иконки */
  transition: 0.2s ease;
}

.social-links a.telegram i { color: #0088cc; }   /* Telegram */
.social-links a.viber i    { color: #7360f2; }   /* Viber */
.social-links a.instagram i{ color: #e1306c; }   /* Instagram */

.social-links a:hover i {
  transform: scale(1.2);  /* увеличение при наведении */
  opacity: 0.8;
}

.text-mutedfut {
    --bs-text-opacity: 1;
    color: rgb(255 255 255 / 75%) !important; !important;
}

.media-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
}

.media-wrapper img,
.media-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}

.media-wrapper img,
.media-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.9rem;
  padding: 1rem;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  backdrop-filter: blur(2px);
}


.review-text {
  max-height: 3.6em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.read-more-btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}