/* ── Responsive / Mobile ── */

/* Prevent horizontal overflow without breaking position:sticky */
html {
  overflow-x: clip;
  width: 100%;
}
body {
  overflow-x: clip;
  width: 100%;
}

/* ══════════════════════════════
   TABLET  (≤ 1024px)
══════════════════════════════ */
@media (max-width: 1024px) {
  nav { padding: 14px 24px; }
  .nav-links { gap: 20px; }

  .builder-section,
  .plans-section,
  .why-section { padding: 80px 24px 60px; }

  .builder-grid { grid-template-columns: 1fr 300px; gap: 20px; }

  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════
   MOBILE  (≤ 768px)
══════════════════════════════ */
@media (max-width: 768px) {

  /* ── Force everything to fit ── */
  .builder-section,
  .plans-section,
  .why-section,
  .cta-section,
  .hero,
  .footer,
  nav {
    box-sizing: border-box;
    width: 100%;
  }

  .builder-grid,
  .builder-left,
  .builder-right,
  .builder-card,
  .cart-card,
  .glass {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }

  /* ── Nav ── */
  nav {
    padding: 8px 16px;
  }
  .logo-img { height: 52px; max-width: 180px; }
  .nav-links { display: none; }
  nav .btn-gold {
    padding: 9px 14px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* ── Hero ── */
  .hero {
    padding: 90px 16px 60px;
    min-height: auto;
  }
  .hero-h1 { font-size: 1.75rem; }
  .hero-sub { font-size: 13px; }
  .hero-badge { font-size: 10px; padding: 5px 12px; }

  /* Stats: 2x2 grid */
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 16px 12px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
  .stat { padding: 12px 8px; }
  .stat-n { font-size: 20px; }
  .stat-l { font-size: 10px; }
  .stat-div { display: none; }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  .hero-ctas .btn-gold,
  .hero-ctas .btn-outline {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  /* ── Section headers ── */
  .section-header { margin-bottom: 28px; }
  .section-h2     { font-size: 1.35rem; }
  .section-sub    { font-size: 13px; }

  /* ── Builder section ── */
  .builder-section {
    padding: 72px 14px 120px;
    width: 100%;
    box-sizing: border-box;
  }
  .builder-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
  }
  .builder-right { position: static; width: 100%; }
  .builder-left  { width: 100%; gap: 14px; }

  /* Builder card: clip internal overflow */
  .builder-card {
    padding: 18px 14px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* ── Counter card ── */
  .counter-row {
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }
  .counter-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
    flex-shrink: 0;
  }
  .counter-display {
    flex: 1;
    min-width: 0;
    text-align: center;
  }
  .counter-display #vidCount { font-size: 40px; }
  .counter-unit  { font-size: 11px; }

  /* Price row: allow text to wrap if needed */
  .counter-price {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
  }
  .price-label { font-size: 12px; }
  .price-val   { font-size: 17px; }

  /* Progress bar: clip dots that go near edges */
  .progress-track { overflow: hidden; }
  .progress-labels { font-size: 9px; }

  /* Unlock hint: wrap text properly */
  .unlock-hint {
    font-size: 11px;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: center;
  }

  /* ── Freebies ── */
  .freebies-list { gap: 8px; }

  .freebie-item {
    padding: 10px 10px;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .freebie-icon-wrap {
    width: 30px; height: 30px;
    font-size: 15px;
    flex-shrink: 0;
  }
  .freebie-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .freebie-name {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .freebie-desc  { display: none; }
  .freebie-worth {
    font-size: 11px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ── Add-ons: single column on mobile ── */
  .addons-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }
  .addon-card {
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
  }
  .addon-top {
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    gap: 4px;
  }
  .addon-icon { font-size: 22px; }
  .addon-name { font-size: 13px; font-weight: 700; }
  .addon-desc { display: block; font-size: 11px; color: var(--lgray); }
  .addon-price { font-size: 13px; font-weight: 800; color: var(--gold); margin-top: 2px; }

  /* ── Cart ── */
  .cart-card {
    padding: 18px 14px;
    box-sizing: border-box;
  }
  .cart-title   { font-size: 13px; }
  .total-val    { font-size: 20px; }
  .cart-next-hint {
    font-size: 11px;
    word-break: break-word;
  }

  /* ── Fixed Plans ── */
  .plans-section {
    padding: 60px 14px 60px;
    width: 100%;
    box-sizing: border-box;
  }
  .plans-grid    { grid-template-columns: 1fr; gap: 20px; }
  .plan-card     { padding: 24px 18px; box-sizing: border-box; }
  .price-num     { font-size: 28px; }

  /* ── Why Us ── */
  .why-section {
    padding: 60px 14px 60px;
    width: 100%;
    box-sizing: border-box;
  }
  .why-grid    { grid-template-columns: 1fr; gap: 12px; }
  .why-card    { padding: 18px 16px; }

  /* ── CTA ── */
  .cta-section { padding: 32px 14px; }
  .cta-inner   { padding: 28px 18px; }
  .cta-inner h2 { font-size: 1.25rem; }
  .cta-inner .btn-gold { width: 100%; justify-content: center; }

  /* ── Footer ── */
  .footer { padding: 24px 14px; }
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  /* ── Mobile bottom bar ── */
  .mobile-bar { display: flex; }

  /* ── Modal: slide up from bottom ── */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-box {
    padding: 28px 16px 36px;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ══════════════════════════════
   SMALL PHONES  (≤ 390px)
══════════════════════════════ */
@media (max-width: 390px) {
  .hero-h1 { font-size: 1.45rem; }
  .counter-display #vidCount { font-size: 34px; }
  .hero-stats { grid-template-columns: 1fr; }
  nav .btn-gold { padding: 8px 12px; font-size: 11px; }
}