/* Дополнительные стили секций специфично для темы */
.kicker{margin-bottom:12px; display:inline-block}
.hero__cta{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap}
.services .card h3{margin:0 0 8px}
.case-card img{border-radius:12px; width:100%; height:220px; object-fit:cover}
.testi{display:flex; gap:16px; align-items:flex-start}
.testi img{width:56px; height:56px; border-radius:50%; object-fit:cover}
.contact-card{background:#fff; border-radius:16px; padding:22px; box-shadow:var(--shadow)}


/* Header background and style */
header { background: var(--color-primary); color: var(--color-white); padding-top:12px; padding-bottom:12px; position:relative; z-index:40; }
header .logo strong, header .logo__text { color: var(--color-white); font-weight:800; font-size:20px; }
header .nav__links a { color: var(--color-white); font-weight:600; }
.header-shadow { box-shadow: 0 8px 30px rgba(0,0,0,0.25); }

/* Make hero blend with header */
.hero { padding-top:64px; background: linear-gradient(180deg, rgba(64,11,44,1) 0%, rgba(58,18,40,0.9) 40%); color: var(--color-white); }

/* Case card hover effects */
.case-card { transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s; overflow:hidden; position:relative; }
.case-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
.case-card::after { content:''; position:absolute; left:0; right:0; top:0; bottom:0; background: linear-gradient(180deg, rgba(64,11,44,0.0) 0%, rgba(64,11,44,0.14) 100%); opacity:0; transition:opacity .28s; }
.case-card:hover::after { opacity:1; }

.case-card h3 { margin-top:12px; }
.case-card .meta { font-size:14px; opacity:.86; margin-top:8px; }

/* Grid improvements */
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px) { .grid-3 { grid-template-columns: 1fr; } }

/* Image hover zoom */
.case-card img { transition: transform .5s ease; border-radius:12px; }
.case-card:hover img { transform: scale(1.06); }

/* Mobile tweaks for header */
@media (max-width:900px) {
  header { padding:10px 0; }
  .hero { padding:48px 0; }
  .hero h1 { font-size:28px; }
  .btn { padding:12px 16px; font-size:15px; }
}

/* Slight animation for buttons */
.btn { transition: transform .16s ease, box-shadow .16s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.18); }