/* ── 768px and below ── */
@media (max-width: 768px) {
  /* Nav */
  #navbar { padding: 0 20px; height: 60px; }
  .logo img { height: 36px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 60px; left: 0; right: 0;
    background: rgba(6,6,8,.98);
    padding: 28px 20px;
    border-bottom: 1px solid rgba(201,168,76,.15);
    gap: 20px;
    z-index: 99;
  }
  .nav-links.open a { font-size: 16px; letter-spacing: .08em; }
  .nav-cta { display: none; }
  .hbg { display: flex; }

  /* Hero */
  #hero { min-height: 100svh; padding: 0 16px; }
  .hero-content { padding: 0; }
  .hero-logo-img { height: 120px; }
  .hero-pre { font-size: 10px; letter-spacing: .2em; margin-bottom: 32px; }
  .hero-hl { font-size: clamp(18px, 5vw, 26px); letter-spacing: 0; margin-bottom: 24px; }
  .hero-sub { font-size: 14px; line-height: 1.75; letter-spacing: 0; max-width: 100%; padding: 0 4px; }
  .hero-btns { gap: 12px; }
  .btn-gold, .btn-ghost-gold { padding: 13px 28px; font-size: 13px; width: 100%; text-align: center; }

  /* Sections */
  .sec { padding: 64px 20px; }
  .atm-div { height: 60px; }
  .prod-layout { grid-template-columns: 1fr; }
  .prod-text p { font-size: 15px; }
  .cj-specs { grid-template-columns: repeat(2, 1fr); }
  .icon-cards { grid-template-columns: repeat(2, 1fr); }

  /* Benefits */
  .testimonials { grid-template-columns: 1fr; }
  .tm-card { padding: 28px 24px 24px; }

  .ben-cols { grid-template-columns: 1fr; }
  .bi { border-right: none !important; }
  .bi:nth-last-child(-n+2) { border-bottom: 1px solid rgba(201,168,76,.08) !important; }
  .bi:last-child { border-bottom: none !important; }

  /* Form */
  .book-frame { margin: 0; }
  .bf-row { grid-template-columns: 1fr; }
  .book-body { padding: 24px 20px; }
  .book-header { padding: 24px 20px 20px; }
  .book-footer { padding: 16px 20px 24px; flex-direction: column; align-items: stretch; }
  .book-submit { text-align: center; }

  /* Footer */
  footer { padding: 36px 20px 24px; }
  .f-top { flex-direction: column; gap: 28px; }
  .f-links { gap: 16px; }
}

/* ── 480px and below ── */
@media (max-width: 480px) {
  .hero-pre { display: none; }
  .cj-specs { grid-template-columns: 1fr 1fr; }
  .cj-card { padding: 20px 12px; }
}

/* ── 1024px and below ── */
@media (max-width: 1024px) {
  #navbar { padding: 0 32px; }
  .sec { padding: 80px 40px; }
  .prod-layout { gap: 48px; }
}

/* ── 1280px and above ── */
@media (min-width: 1280px) {
  .sec-inner { max-width: 1200px; }
}