/* ============================================================
   BLACK CAT ARTIST STUDIO — Responsive Stylesheet
   ============================================================ */

/* ============================================================
   TABLET — ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  :root { --section-padding: 80px 0; }

  .hero-grid     { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual   { display: none; }
  .hero h1       { font-size: clamp(2rem, 6vw, 3rem); }
  .hero-stats    { gap: 24px; }

  .about-grid    { grid-template-columns: 1fr; gap: 48px; }
  .about-image-block { max-width: 480px; }

  .faq-grid      { grid-template-columns: 1fr; }
  .faq-cats      { flex-direction: row; flex-wrap: wrap; position: static; }
  .faq-cat-btn   { flex: 0 0 auto; }

  .contact-grid  { grid-template-columns: 1fr; }

  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 40px; }

  .newsletter-inner { flex-direction: column; text-align: center; }
  .newsletter-form  { flex-wrap: wrap; justify-content: center; }
  .newsletter-form input { width: 100%; max-width: 360px; }
}

/* ============================================================
   MOBILE — ≤ 768px
   ============================================================ */
@media (max-width: 768px) {
  :root { --section-padding: 64px 0; }

  /* Navbar */
  .navbar-links {
    display: none;
    position: absolute;
    top: 80px; left: 0; right: 0;
    background: rgba(2,26,28,0.98);
    flex-direction: column;
    padding: 20px 24px 28px;
    gap: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  .navbar-links.open { display: flex; }
  .navbar-links a    { padding: 12px 16px; font-size: 0.9rem; width: 100%; }
  .hamburger         { display: flex; }

  /* Hero */
  .hero          { min-height: auto; padding: 140px 0 80px; }
  .hero h1       { font-size: 2rem; }
  .hero p        { font-size: 1rem; }
  .hero-btns     { flex-direction: column; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .hero-stats    { flex-wrap: wrap; gap: 20px; }

  /* Sections */
  .section-title  { font-size: 1.8rem; }

  /* Services */
  .services-grid  { grid-template-columns: 1fr; }

  /* Team */
  .team-grid      { grid-template-columns: 1fr 1fr; }

  /* Contact */
  .contact-info-card { padding: 32px 24px; }
  .contact-form-wrap { padding: 32px 24px; }
  .form-row       { grid-template-columns: 1fr; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid    { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom  { flex-direction: column; text-align: center; }
  .footer-legal   { flex-wrap: wrap; justify-content: center; gap: 16px; }

  /* Chatbot */
  #chatbot-box    { width: 320px; right: -4px; }

  /* WhatsApp */
  .whatsapp-btn span { display: none; }
  .whatsapp-btn  { padding: 12px; border-radius: 50%; }

  /* Newsletter */
  .newsletter     { padding: 60px 0; }
}

/* ============================================================
   SMALL MOBILE — ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
  .container      { padding: 0 16px; }
  .hero h1        { font-size: 1.7rem; }
  .team-grid      { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button { width: 100%; }

  .about-logo-display { padding: 40px 24px; min-height: 280px; }
  .about-logo-display img { height: 100px; }

  #chatbot-box    { width: calc(100vw - 40px); right: 0; }

  .btn            { padding: 12px 24px; font-size: 0.75rem; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .navbar, #chatbot-widget, #whatsapp-float, #back-to-top,
  .newsletter, .hero-btns { display: none !important; }
  body { background: white; color: black; }
}