/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Breakpoints & Mobile Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .stats-grid {
    order: -1;
  }

  .projects-showcase {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-card--featured {
    grid-column: span 2;
    grid-row: span 1;
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
  }

  .process-grid::before {
    display: none;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__stats {
    gap: var(--space-8);
  }

  .trust-bar__inner {
    gap: var(--space-8);
  }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  :root {
    --text-hero: clamp(2rem, 8vw, 3rem);
    --text-5xl: clamp(1.6rem, 5vw, 2.2rem);
    --text-4xl: 1.75rem;
  }

  .nav__links { display: none; }
  .menu-toggle { display: flex; }

  /* ── Logo ── */
  .nav__logo img {
    height: 68px;
  }

  .preloader__logo img {
    height: 80px;
  }

  .footer__logo img {
    height: 56px;
  }

  .nav {
    padding: 0.75rem 0;
  }

  .nav.scrolled {
    padding: 0.5rem 0;
  }

  .nav__inner {
    padding: 0 var(--space-5);
  }

  /* ── Sections ── */
  .section {
    padding: var(--space-12) var(--space-5);
  }

  .container {
    padding: 0 var(--space-5);
  }

  .section-header--center {
    margin-bottom: var(--space-8);
  }

  .section-title {
    letter-spacing: -0.015em;
  }

  .section-desc {
    font-size: var(--text-base);
    margin-top: var(--space-3);
  }

  /* ── Hero Mobile ── */
  .hero {
    min-height: auto;
    padding-bottom: 0;
    margin-top: 90px;
  }

  .hero__content {
    padding: 0 var(--space-5);
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .hero__title {
    max-width: 100%;
  }

  .hero__subtitle {
    font-size: var(--text-base);
    margin-top: var(--space-4);
    max-width: 100%;
  }

  .hero__actions {
    margin-top: var(--space-8);
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    font-size: var(--text-sm);
  }

  .hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    text-align: center;
  }

  .hero__stat-number {
    font-size: 1.5rem;
  }

  .hero__stat-label {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    margin-top: var(--space-2);
    line-height: 1.3;
  }

  .hero__scroll {
    display: none;
  }

  .hero__badge .badge {
    font-size: 0.55rem;
    padding: 0.3rem 0.75rem;
    margin-bottom: var(--space-3);
  }

  /* ── Trust Bar: horizontal scroll ── */
  .trust-bar {
    padding: var(--space-4) var(--space-5);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .trust-bar__inner {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-6);
    justify-content: flex-start;
    min-width: max-content;
    padding-right: 5rem;
  }

  .trust-bar__item {
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .trust-bar__item svg {
    width: 18px;
    height: 18px;
  }

  /* ── Services ── */
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .card {
    padding: var(--space-6) var(--space-5);
  }

  .card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-4);
  }

  .card__title {
    font-size: var(--text-lg);
  }

  /* ── Projects ── */
  .projects-showcase {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .project-card--featured {
    grid-column: span 1;
  }

  .project-card__image {
    min-height: 220px;
  }

  .project-card__content {
    padding: var(--space-5);
  }

  .project-card h3 {
    font-size: var(--text-lg);
  }

  .project-card--featured h3 {
    font-size: var(--text-xl);
  }

  /* ── About ── */
  .about__image {
    max-height: 300px;
    aspect-ratio: 16/10;
    border-radius: var(--radius-lg);
  }

  .about__image-badge {
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }

  .about__feature-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .about__feature-icon svg {
    width: 16px;
    height: 16px;
  }

  .about__feature h4 {
    font-size: var(--text-sm);
  }

  .about__feature p {
    font-size: var(--text-xs);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .stat-card {
    padding: var(--space-5) var(--space-4);
  }

  .stat-card__number {
    font-size: 1.6rem;
  }

  .stat-card__label {
    font-size: 0.6rem;
  }

  /* ── Process ── */
  .process-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .process-step__number {
    width: 60px;
    height: 60px;
    font-size: var(--text-xl);
  }

  /* ── Testimonials ── */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .testimonial {
    padding: var(--space-6) var(--space-5);
  }

  .rating-showcase {
    gap: var(--space-3);
  }

  .rating-showcase__score {
    font-size: 2.5rem;
  }

  /* ── Why Us ── */
  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .why-card {
    padding: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .why-card__icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-4);
  }

  /* ── Contact ── */
  .form__row {
    grid-template-columns: 1fr;
  }

  .form {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
  }

  .contact-grid {
    margin-top: var(--space-8);
    gap: var(--space-6);
  }

  .contact-info-card {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .contact-info-card__icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .contact-map {
    height: 180px;
  }

  /* ── Footer ── */
  .footer {
    padding-top: var(--space-10);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    padding: var(--space-4) 0;
  }

  /* ── Cookie Banner: compact floating card ── */
  .cookie-banner {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    max-width: none;
    padding: var(--space-4) var(--space-5);
    gap: var(--space-3);
    flex-direction: column;
  }

  .cookie-banner p {
    font-size: 0.65rem;
    line-height: 1.4;
  }

  .cookie-banner__buttons {
    display: flex;
    gap: var(--space-2);
    width: 100%;
  }

  .cookie-banner__btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.65rem;
    text-align: center;
  }

  /* ── WhatsApp ── */
  .whatsapp {
    bottom: 5rem;
    right: 1rem;
    width: 48px;
    height: 48px;
  }

  .whatsapp svg {
    width: 24px;
    height: 24px;
  }

  .whatsapp__tooltip {
    display: none;
  }

  /* ── Mobile Menu refinement ── */
  .mobile-menu a {
    font-size: 1.5rem;
  }
}

/* ── Small Mobile (≤400px) ── */
@media (max-width: 400px) {
  :root {
    --text-hero: 1.85rem;
    --text-5xl: 1.5rem;
  }

  .hero__content {
    padding-top: 4.5rem;
  }

  .hero__stat-number {
    font-size: 1.3rem;
  }

  .hero__stat-label {
    font-size: 0.55rem;
  }

  .project-card__image {
    min-height: 180px;
  }

  .stat-card__number {
    font-size: 1.4rem;
  }
}