/* ===== MOBILE.CSS — Mobile-specific overrides ===== */

/* ===== HEADER MOBILE ===== */
@media (max-width: 768px) {
  .header-top { display: none; }
  .header-main .container { flex-wrap: nowrap; gap: 12px; }
  .nav { display: none; }
  .header-cta .work-hours { display: none; }
  .logo-text strong { font-size: 18px; }
}

@media (max-width: 480px) {
  .header-top { display: none; }
  .logo-text strong { font-size: 16px; }
  .logo-text span { display: none; }
  .btn-call { padding: 8px 14px; font-size: 13px; }
}

/* ===== HERO MOBILE ===== */
@media (max-width: 992px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-card { max-width: 100%; }
}

@media (max-width: 768px) {
  .hero { padding: 40px 0; }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 16px; }
  .hero-badge { font-size: 12px; }
  .hero-stats { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .hero-stat strong { font-size: 26px; }
  .hero-stat span { font-size: 12px; }
  .hero-card { padding: 24px 20px; }
  .hero-card h3 { font-size: 17px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 22px; }
  .hero-buttons { flex-direction: column; }
  .btn-primary, .btn-outline { width: 100%; text-align: center; }
  .hero-stats { gap: 12px; }
  .hero-stat strong { font-size: 22px; }
}

/* ===== SECTIONS MOBILE ===== */
@media (max-width: 768px) {
  .section { padding: 40px 0; }
  .section-header h2 { font-size: 24px; }
  .section-header p { font-size: 15px; }
}

/* ===== SERVICES GRID MOBILE ===== */
@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: 22px; }
  .service-icon { width: 52px; height: 52px; font-size: 24px; }
}

/* ===== WHY GRID MOBILE ===== */
@media (max-width: 992px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .why-card { padding: 20px 14px; }
  .why-icon { width: 56px; height: 56px; font-size: 26px; }
}

@media (max-width: 400px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ===== STEPS MOBILE ===== */
@media (max-width: 768px) {
  .steps { grid-template-columns: 1fr; gap: 8px; }
  .step-arrow { display: none; }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; }
  .step-arrow { display: none; }
}

/* ===== BRANDS MOBILE ===== */
@media (max-width: 480px) {
  .brand-item { padding: 10px 16px; font-size: 13px; }
}

/* ===== REVIEWS MOBILE ===== */
@media (max-width: 768px) {
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ===== CTA BANNER MOBILE ===== */
@media (max-width: 768px) {
  .cta-banner { padding: 50px 0; }
  .cta-banner h2 { font-size: 24px; }
  .cta-banner p { font-size: 16px; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .btn-white, .btn-outline-white { width: 100%; max-width: 320px; text-align: center; }
}

/* ===== PRICES TABLE MOBILE ===== */
@media (max-width: 768px) {
  .prices-tabs { gap: 6px; }
  .tab-btn { padding: 8px 14px; font-size: 13px; }
}

@media (max-width: 600px) {
  .prices-table { font-size: 13px; }
  .prices-table th, .prices-table td { padding: 10px 12px; }
  .prices-table th:last-child, .prices-table td:last-child { display: none; }
}

/* ===== CONTACTS MOBILE ===== */
@media (max-width: 992px) {
  .contacts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .contact-form { padding: 24px 20px; }
}

/* ===== ABOUT MOBILE ===== */
@media (max-width: 992px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .about-numbers { grid-template-columns: 1fr 1fr; }
  .about-number strong { font-size: 30px; }
  .team-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
  .about-numbers { gap: 16px; }
}

/* ===== FOOTER MOBILE ===== */
@media (max-width: 992px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer { padding: 40px 0 0; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 6px; }
}

/* ===== MODAL MOBILE ===== */
@media (max-width: 480px) {
  .modal { padding: 28px 20px; }
  .modal h3 { font-size: 20px; }
}

/* ===== FLOATING BUTTONS MOBILE ===== */
@media (max-width: 480px) {
  .float-btn { bottom: 20px; right: 16px; }
  .float-btn a { width: 48px; height: 48px; font-size: 20px; }
}

/* ===== PAGE HERO MOBILE ===== */
@media (max-width: 768px) {
  .page-hero { padding: 40px 0 36px; }
  .page-hero h1 { font-size: 26px; }
  .page-hero p { font-size: 16px; }
}

/* ===== SERVICE DETAIL MOBILE ===== */
@media (max-width: 600px) {
  .service-problems { grid-template-columns: 1fr; }
  .service-detail { padding: 24px 20px; }
  .service-detail-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ===== CONTAINER MOBILE ===== */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
}

/* ===== PROMO BANNER MOBILE ===== */
@media (max-width: 600px) {
  .promo-inner { flex-direction: column; text-align: center; gap: 16px; }
  .promo-inner .btn-primary { width: 100%; text-align: center; }
}