/* =========================
   MOBILE (до 600px)
   ========================= */
@media (max-width: 600px) {

  :root{
    --container-padding-mobile: 18px;
  }

  .container {
    width: calc(100% - 2 * var(--container-padding-mobile));
    max-width: 100%;
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
    box-sizing: border-box;
  }
  
  /*MOBILE POPUP*/

  /*MOBILE NAVBAR*/
  /* скрытое состояние */
  .mobile-contact-bar.hide-bar {
      transform: translate(-50%, 150%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.35s ease, opacity 0.35s ease;
  }

  /* видимое состояние */
  .mobile-contact-bar {
      transform: translateX(-50%) translateY(0);
      transition: transform 0.35s ease, opacity 0.35s ease;
  }

/* MOBILE CONTACT BAR */
.mobile-contact-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;

    display: flex;
    align-items: center;
    gap: 12px;

    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(12px);

    padding: 10px 16px;
    border-radius: 50px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* Icons */
.mobile-contact-bar .cp-btn {
     width: 38px;
     height: 38px;
     border-radius: 50%;

     /* ГЛАВНОЕ — два фона одновременно */
     background-repeat: no-repeat;
     background-position: center;
     background-size: 80%; /* чтобы красиво смотрелось */

     /* Стеклянная капля */
     background-color: rgba(255,255,255,0.75);
     backdrop-filter: blur(6px);
     border: 1px solid rgba(255,255,255,0.25);
     }

/* Phone text */
.mobile-contact-bar .phone-link {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 8px 14px;
    border-radius: 40px;

    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.mobile-contact-bar .phone-link svg {
    width: 18px;
    height: 18px;
    fill: white;
}

  /* HERO */
  .hero {
    min-height: 60vh;
    height: auto;
    padding: 28px 0;
    display: flex;
    align-items: center;
  }

  .hero-inner {
    margin: 0 12px;
    padding: 20px;
    max-width: 720px;
    background: rgba(0,0,0,0.18);
    border-radius: 16px;
  }

  .hero-title {
    font-size: 28px;
    line-height: 1.18;
  }

  .hero-subtitle {
    font-size: 15px;
    margin: 14px 0 22px;
  }

  .hero-list li {
      padding-left: 0 !important;
      text-align: left;
      align-items: flex-start !important;
    font-size: 16px;
    gap: 8px;
    justify-content: flex-start;
    /*padding-left: 6px;*/
    animation: none;
    transform: none;
    opacity: 1;
  }

  .check-icon {
    width: 18px;
    height: 18px;
  }

  .btn-primary {
    padding: 12px 28px;
    font-size: 16px;
    border-radius: 12px;
  }

  /* ABOUT */
  .about-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  .about-image {
    min-height: 220px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    border: 2px solid rgba(209,161,80,0.45);
  }

  .about-block p {
    display: -webkit-box;
    -webkit-line-clamp: unset;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* FEATURES */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .feature-card {
    padding: 20px;
  }

  /* PROCESS */
  .process-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* FAQ */
  .accordion-header {
    padding: 14px 16px;
  }

  .accordion-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 16px;
  }

  .accordion-body.open {
    opacity: 1;
    padding: 12px 16px;
  }

  .faq-section .accordion-header h3 {
    font-size: 16px;
  }

  /* POPUP */
  #popup-window {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;

        width: 90% !important;     /* адаптивно */
        max-width: 380px !important; /* чтобы не разъезжался */
        
        padding: 20px !important;
        border-radius: 16px;

        box-sizing: border-box;
  }


    #popup-form input {
        width: 100% !important;   /* главная магия */
        box-sizing: border-box !important;
        padding: 12px !important;
        font-size: 15px !important;
    }

    #popup-form {
        width: 100%;
    }

  /* CTA */
  .premium-cta {
    padding: 48px 0;
  }

  .premium-cta h2 { font-size: 20px; margin-bottom: 18px; }

  /* PHONE FLOATING */
      /* Телефон добавляем в эту же панель */
      .phone-floating {
          position: fixed;
          bottom: 20px;
          left: 50%;
          transform: translateX(calc(-50% + 110px));
          font-size: 15px;
          padding: 8px 14px;
          background: rgba(0,0,0,0.45);
          color: #fff !important;
          border-radius: 40px;
          backdrop-filter: blur(10px);
          z-index: 9999;
          display: flex;
          align-items: center;
          gap: 6px;
      }

      .phone-floating svg path {
          fill: white !important;
      }
      /*NEW CODE*/
      .desktop-only {
          display: none !important;
      }
      .mobile-only {
          display: flex !important;
      }
  }


/* =========================
   TABLET (600–900px)
   ========================= */
@media (min-width: 601px) and (max-width: 900px) {

  .hero-title { font-size: 36px; }
  .hero-subtitle { font-size: 18px; }
  .hero-inner { padding: 24px 36px; border-radius: 18px; }

  .about-image { min-height: 280px; }

  .features-grid { grid-template-columns: repeat(2,1fr); gap:20px; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
}


/* =========================
   SMALL DESKTOP (900–1100px)
   ========================= */
@media (min-width: 901px) and (max-width: 1100px) {
  .hero { height: 80vh; }
}