.desktop-portfolio-hint {
  text-align: center;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  margin-bottom: 2rem;
  color: #fff;
  opacity: 1;
}

.portfolio-banner {
  display: none;
}

/* Бот в портфолио — только мобилка */
.portfolio-bot-item {
  display: none;
}

@media (max-width: 768px) {
  .desktop-portfolio-hint {
    display: none !important;
  }

  .portfolio-banner {
    display: block !important;
    margin: 0.6rem 0 1.4rem;
    padding: 1.2rem 1.15rem 1.25rem;
    border-radius: 18px;
    background: linear-gradient(
      160deg,
      rgba(89, 0, 0, 0.45) 0%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(20, 20, 20, 0.55) 100%
    );
    border: 1px solid rgba(180, 40, 40, 0.35);
    box-shadow:
      0 10px 32px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .portfolio-banner .portfolio-heading {
    display: block !important;
    text-align: center !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 0.55rem !important;
    padding: 0 !important;
    color: #fff !important;
    opacity: 1 !important;
    transform: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: 0 0 22px rgba(180, 40, 40, 0.35) !important;
  }

  .portfolio-banner .portfolio-intro {
    display: block !important;
    text-align: center !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* название НАД превью */
  .mobile-project-name {
    display: block !important;
    order: 0 !important;
    text-align: center !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    margin: 0 0 0.65rem !important;
    padding: 0.7rem 1rem !important;
    border-radius: 14px !important;
    opacity: 1 !important;
    transform: none !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }

  .portfolio-item[data-project="salon"] .mobile-project-name {
    color: #f9a8d4 !important;
    background: linear-gradient(160deg, rgba(180, 40, 100, 0.4), rgba(20, 10, 20, 0.7)) !important;
    border: 1px solid rgba(236, 72, 153, 0.45) !important;
  }

  .portfolio-item[data-project="auto"] .mobile-project-name {
    color: #fca5a5 !important;
    background: linear-gradient(160deg, rgba(160, 25, 25, 0.45), rgba(20, 10, 10, 0.7)) !important;
    border: 1px solid rgba(220, 38, 38, 0.45) !important;
  }

  .portfolio-item[data-project="stroi"] .mobile-project-name {
    color: #fcd34d !important;
    background: linear-gradient(160deg, rgba(180, 120, 10, 0.4), rgba(20, 15, 5, 0.7)) !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
  }

  .portfolio-item[data-project="gardi"] .mobile-project-name {
    color: #99f6e4 !important;
    background: linear-gradient(160deg, rgba(10, 100, 90, 0.45), rgba(5, 20, 20, 0.7)) !important;
    border: 1px solid rgba(22, 247, 221, 0.4) !important;
  }

  .portfolio-item[data-project="cafe"] .mobile-project-name {
    color: #e8c4a0 !important;
    background: linear-gradient(160deg, rgba(120, 90, 40, 0.4), rgba(20, 15, 10, 0.7)) !important;
    border: 1px solid rgba(196, 165, 116, 0.45) !important;
  }

  .portfolio-item[data-project="bot"] .mobile-project-name {
    color: #7dd3fc !important;
    background: linear-gradient(160deg, rgba(20, 100, 150, 0.45), rgba(10, 20, 30, 0.7)) !important;
    border: 1px solid rgba(36, 161, 222, 0.5) !important;
  }

  .portfolio-bot-item {
    display: block !important;
  }

  .portfolio-bot-item .portfolio-row {
    display: none !important;
  }

  .portfolio-bot-item .mobile-bot-demo {
    display: block !important;
    width: 100%;
    margin: 0;
    order: 2;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .portfolio-bot-item .tg-demo-frame {
    max-width: 100%;
    min-height: 320px;
  }

  .portfolio-bot-item .tg-slider img {
    min-height: 320px;
  }
}

@media (min-width: 769px) {
  .portfolio-banner {
    display: none !important;
  }

  .portfolio-heading,
  .portfolio-intro {
    display: none !important;
  }

  .portfolio-bot-item {
    display: none !important;
  }

  .mobile-project-name {
    display: none !important;
  }
}