/* ============================================
   DS LABS — RESPONSIVE STYLESHEET
   ============================================ */

/* ============================================
   ULTRA WIDE (2xl) — 1536px+
   ============================================ */
@media (min-width: 1536px) {
  .container { max-width: 1400px; }
  .hero-headline { font-size: 5rem; }
  #why-us .features-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================
   LARGE DESKTOP (xl) — 1280px+
   ============================================ */
@media (min-width: 1280px) {
  .hero-grid { gap: 5rem; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
}

/* ============================================
   DESKTOP ONLY (1024px – 1279px)
   ============================================ */
@media (max-width: 1279px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-8); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand .footer-desc { max-width: 100%; }
}

/* ============================================
   TABLET LANDSCAPE (lg) — 1023px and below
   ============================================ */
@media (max-width: 1023px) {
  :root { --space-32: 5rem; --space-24: 4rem; }

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

  /* Navbar */
  .navbar-nav { display: none; }
  .menu-toggle { display: flex; }

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-12);
  }

  .hero-subheadline { margin: 0 auto var(--space-8); }
  .hero-buttons { justify-content: center; }
  .hero-trust { justify-content: center; }

  .hero-visual { order: -1; }
  .hero-dashboard { max-width: 400px; }

  .floating-card-1 { right: -10px; top: -10px; }
  .floating-card-2 { left: -10px; bottom: 20px; }
  .floating-card-3 { display: none; }

  /* Stats */
  .stat-divider { display: none; }
  .stats-grid { gap: var(--space-8); }

  /* Why Us */
  #why-us .features-grid { grid-template-columns: repeat(2, 1fr); }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pricing-card.popular { transform: none; }
  .pricing-card.popular:hover { transform: translateY(-4px); }

  /* Hosting */
  .hosting-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Process */
  .process-timeline::before { left: 30px; }
  .process-num { width: 60px; height: 60px; font-size: var(--text-lg); }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: var(--space-4); text-align: center; }
}

/* ============================================
   TABLET PORTRAIT (md) — 767px and below
   ============================================ */
@media (max-width: 767px) {
  :root {
    --space-32: 4rem;
    --space-20: 3rem;
    --space-16: 2.5rem;
    --text-5xl: 2.25rem;
    --text-6xl: 2.75rem;
    --text-7xl: 3rem;
  }

  .section { padding: 4rem 0; }
  .section-sm { padding: 3rem 0; }

  /* Section Headers */
  .section-header { margin-bottom: var(--space-10); }

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

  /* Why Us */
  #why-us .features-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .feature-card { padding: var(--space-5); }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-toggle { flex-wrap: wrap; gap: var(--space-3); }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-filters { gap: var(--space-1); }

  /* Testimonials */
  .testimonial-card { flex: 0 0 100%; }

  /* FAQ */
  .faq-question { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); }
  .faq-answer-inner { padding: 0 var(--space-5) var(--space-4); }

  /* Contact Form */
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: var(--space-6); }

  /* Newsletter */
  .newsletter-form { flex-direction: column; border-radius: var(--radius-xl); }
  .newsletter-input { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .newsletter-form .btn { border-radius: 0 0 var(--radius-xl) var(--radius-xl); width: 100%; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: 1; }
  .footer-legal { flex-direction: column; gap: var(--space-3); align-items: center; }

  /* Back to top */
  #back-to-top { bottom: var(--space-6); right: var(--space-5); }

  /* Dashboard */
  .dashboard-metrics { grid-template-columns: repeat(3, 1fr); }

  /* Hero */
  .hero-headline { font-size: clamp(2rem, 8vw, 3rem); }
  .floating-card { display: none; }
  .hero-dashboard { max-width: 320px; }

  /* Stats Grid */
  .stats-grid { flex-direction: column; align-items: center; gap: var(--space-6); }

  /* Mobile Navbar — hamburger swap (single source of truth for this breakpoint) */
  .navbar-actions .btn { display: none !important; }
  .menu-toggle { display: none !important; }
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--bg-accent);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }
}

/* ============================================
   MOBILE (sm) — 480px and below
   ============================================ */
@media (max-width: 479px) {
  :root { --space-8: 1.5rem; --space-6: 1rem; }

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

  /* Hero */
  .hero-headline { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; justify-content: center; }
  .hero-trust { flex-direction: column; align-items: center; }

  /* Nav */
  #mobile-nav { left: var(--space-3); right: var(--space-3); }

  /* Stats */
  .stat-value { font-size: 2rem; }

  /* Why us */
  #why-us .features-grid { grid-template-columns: 1fr; }

  /* Pricing */
  .price-amount { font-size: 2.5rem; }
  .pricing-card { padding: var(--space-6); }

  /* Service Cards */
  .service-card { padding: var(--space-6); }

  /* Process */
  .process-timeline::before { display: none; }
  .process-step { flex-direction: column; gap: var(--space-3); }

  /* Buttons */
  .btn-lg { padding: 15px 24px; font-size: var(--text-base); }

  /* Domain */
  .domain-search-form { flex-direction: column; border-radius: var(--radius-xl); }
  .domain-input { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .domain-tld { border-left: none; border-top: 1px solid var(--border-glass); }
  .domain-ext-card { padding: var(--space-3) var(--space-4); }

  /* Addon Table */
  .addon-table { font-size: 12px; }
  .addon-table th, .addon-table td { padding: 12px 14px; }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
  #navbar, #back-to-top, #page-loader { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .glass-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .floating-card { animation: none; }
}
.mobile-menu-btn {
    display: none;
}