/* ─── 1200px — smaller desktops ──────────────────────────────────────── */
@media (max-width: 1200px) {
  .page {
    max-width: 100%;
    border-radius: 0;
  }

  .bubble-body {
    font-size: 1.75rem;
    padding: 14px 22px;
  }

  .cs-box { width: 180px; }

  .comment-card { width: 240px; }

  .yellow-circle { width: 36%; }

  .fahad-wrap { width: 42%; }

  .headline {
    font-size: clamp(56px, 8vw, 120px);
  }
}

/* ─── 768px — tablet ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page { min-height: 100svh; }

  .dots,
  .deco-lines,
  .arrows,
  .bg-rings { display: none; }

  .hero-video { display: none; }

  .header {
    padding: 20px 24px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .nav {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 1.5rem;
  }

  .headline {
    font-size: clamp(40px, 8vw, 80px);
  }

  .headline-wrap {
    top: 8%;
  }

  .fahad-wrap { width: 55%; }

  .yellow-circle {
    width: 55%;
    top: 20%;
  }

  .cs-box {
    position: static;
    width: 90%;
    margin: 1rem auto;
  }

  .comment-card {
    position: static;
    width: 90%;
    margin: 1rem auto;
  }

  .chat-bubble {
    position: static;
    margin: 1rem 1.5rem;
    display: inline-block;
  }

  .ground { height: 12%; }
}

/* ─── 480px — mobile ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .header {
    padding: 16px;
  }

  .logo { font-size: 32px; }

  .nav { gap: 1rem; }

  .nav-link { font-size: 14px; }

  .login-btn {
    padding: 12px 24px;
    font-size: 14px;
    min-height: 44px;
  }

  .cs-box {
    width: 100%;
    padding: 16px;
  }

  .comment-card {
    width: 100%;
    padding: 16px;
  }

  .cs-cta {
    min-height: 44px;
    padding: 10px 20px;
  }

  .bubble-body {
    font-size: 1.5rem;
    padding: 12px 18px;
  }

  .yellow-circle { width: 75%; }

  .fahad-wrap { width: 65%; }

  .headline {
    font-size: clamp(32px, 10vw, 56px);
  }
}