/* =====================================================
   MOBILE.CSS — Responsive overrides for We The Matrix
   Breakpoints: ≤768px (mobile), ≤480px (small phone)
   ===================================================== */

/* ── Disable custom cursor on touch devices ── */
@media (pointer: coarse) {

  .cursor,
  .cursor-ring {
    display: none !important;
  }

  body {
    cursor: auto;
  }
}

/* ================================================================
   TABLET + MOBILE  (≤ 900px)
   ================================================================ */
@media (max-width: 900px) {

  /* NAV — hamburger dropdown */
  nav {
    padding: 16px 20px;
  }

  /* Hide the links row; show as dropdown below nav bar when open */
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    /* relative to the fixed nav bar, NOT fixed to viewport */
    top: 100%;
    /* just below the nav bar */
    left: 0;
    right: 0;
    background: rgba(5, 5, 5, .99);
    border-bottom: 1px solid rgba(201, 168, 76, .2);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .85);
    padding: 28px 0 36px;
    align-items: center;
    gap: 28px;
    z-index: 100;
    /* within nav's stacking context — always on top of page */
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li a {
    font-size: 1.05rem;
    letter-spacing: .22em;
  }

  /* Hamburger — visible on mobile for site navigation */
  .hamburger {
    display: flex !important;
  }

  .hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Page: keep padding-top to clear the fixed nav (logo ~21px + 32px padding ≈ 53px, use 60px safe) */
  .page {
    padding-top: 60px;
  }

  .hero {
    min-height: calc(100vh - 60px);
  }

  /* SECTIONS */
  section {
    padding: 56px 20px;
  }

  .page-hero {
    padding: 56px 20px 40px;
  }

  .compare-section {
    padding: 50px 20px;
  }

  /* HOME INTRO — stack to single column */
  .home-intro {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 60px 20px;
  }

  .intro-card-stack {
    height: 200px;
  }

  .intro-card {
    width: 230px;
  }

  /* BIG FIVE networks on home page — 3 col */
  section[style*="padding:0 60px"] {
    padding: 0 20px 70px !important;
  }

  div[style*="grid-template-columns:repeat(5,1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2px;
  }

  /* STATS BAR */
  .stats-bar {
    padding: 22px 20px;
    gap: 14px;
  }

  .stat-divider {
    display: none;
  }

  /* NETWORKS GRID */
  .networks-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* COMPARE TABLE — enable horizontal scroll */
  .compare-section {
    overflow: hidden;
  }

  .compare-table-wrap,
  .compare-section>table {
    overflow-x: auto;
    display: block;
  }

  .compare-table {
    min-width: 600px;
  }

  /* CARDS ROW */
  .cards-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }

  section[style*="padding:60px 60px 90px"] {
    padding: 40px 20px 70px !important;
  }

  /* HERO */
  .hero {
    padding: 40px 20px;
  }

  .hero-sub {
    font-size: .9rem;
    margin: 16px auto 32px;
  }

  .hero-btns {
    gap: 12px;
  }

  /* CTA STRIP */
  .cta-strip {
    padding: 0 20px;
  }

  .cta-inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .cta-actions {
    justify-content: center;
  }

  /* ABOUT */
  .about-hero {
    flex-direction: column !important;
    gap: 40px;
    padding: 56px 20px !important;
  }

  .about-big-num {
    font-size: 6rem !important;
  }

  /* CONTACT */
  .contact-layout {
    flex-direction: column !important;
    gap: 40px;
    padding: 50px 20px !important;
  }

  /* FEATURES GRID */
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .features-hero {
    padding: 50px 20px 30px;
  }

  section[style*="padding:65px 60px"] {
    padding: 40px 20px !important;
  }

  /* PROCESS STEPS */
  .process-steps {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .process-section {
    padding: 50px 20px;
  }

  /* TEAM GRID */
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .team-section {
    padding: 50px 20px;
  }

  /* VALUES GRID */
  .values-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .values-section {
    padding: 50px 20px;
  }

  /* FAQ */
  .faq-section {
    padding: 50px 20px;
  }

  /* FEATURES PAGE hero padding */
  .features-hero {
    padding: 50px 20px 20px !important;
  }

  /* PURCHASE PAGE */
  .pur-layout {
    flex-direction: column !important;
    gap: 40px;
  }

  .pur-form-col,
  .pur-summary-col {
    width: 100% !important;
  }

  section[style*="padding-top:40px"] {
    padding: 40px 20px 0 !important;
  }

  section[style*="padding-top:0"] {
    padding: 0 20px !important;
  }

  .referral-banner {
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
  }

  .rb-countdown-wrap {
    flex-direction: row;
    gap: 10px;
  }

  /* MODAL */
  .modal-box {
    width: calc(100vw - 20px) !important;
    max-height: 92vh !important;
    margin: 4vh auto !important;
    padding: 20px 16px !important;
    overflow-y: auto;
  }

  .modal-card-visual {
    height: 160px !important;
  }

  .sbar {
    gap: 6px;
  }

  .pay-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }

  .pay-tab {
    flex: 1 1 40%;
    min-width: 0;
    font-size: .65rem;
    padding: 10px 8px;
  }

  /* REFERRAL STATS GRID */
  .ref-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .floating-ref-banner {
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    padding: 12px 16px;
  }

  .frb-inner {
    gap: 10px;
    flex-wrap: wrap;
  }

  /* AUTH MODAL */
  .auth-box {
    width: calc(100vw - 24px) !important;
    padding: 28px 20px !important;
  }
}

/* ================================================================
   MOBILE (≤ 600px)
   ================================================================ */
@media (max-width: 600px) {

  /* NAV LOGO smaller */
  .nav-logo {
    font-size: 1.05rem;
  }

  /* HERO TITLE */
  h1.hero-title {
    font-size: clamp(3rem, 16vw, 5rem) !important;
  }

  .hero-sub {
    font-size: .84rem;
    max-width: 100%;
  }

  /* STATS BAR — 2x2 grid */
  .stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
  }

  /* BIG MARQUEE text smaller */
  .big-marquee-item {
    font-size: 1.6rem;
  }

  /* HOME INTRO */
  .home-intro {
    padding: 48px 16px;
    gap: 36px;
  }

  .intro-card-stack {
    height: 180px;
  }

  .intro-card {
    width: 200px;
  }

  .ic1 {
    left: 0;
  }

  .ic2 {
    left: 40px;
  }

  .ic3 {
    left: 80px;
  }

  /* HOME — BIG FIVE: 2 columns then last 1 full */
  div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Networks grid — single column on tiny screen */
  .networks-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cards row — single column */
  .cards-row {
    grid-template-columns: 1fr !important;
  }

  /* Filter buttons wrap tighter */
  .cards-filter {
    gap: 7px;
  }

  .filter-btn {
    font-size: .62rem;
    padding: 6px 14px;
    letter-spacing: .12em;
  }

  /* Card visual inside card item */
  .credit-card-visual {
    height: 160px !important;
  }

  .cc-number {
    font-size: .72rem !important;
    letter-spacing: .14em !important;
  }

  .cc-name {
    font-size: .7rem !important;
  }

  .cc-bank {
    font-size: .6rem !important;
  }

  .cc-network-logo {
    font-size: .62rem !important;
  }

  /* Section titles */
  .section-title {
    font-size: clamp(2rem, 10vw, 3.5rem) !important;
  }

  /* About hero */
  .about-big-num {
    font-size: 4rem !important;
    top: -20px !important;
  }

  div[style*="background:rgba(201,168,76,.04);border:1px solid rgba(201,168,76,.15);padding:36px"] {
    padding: 20px !important;
  }

  /* Team & Values grid — single column */
  .team-grid {
    grid-template-columns: 1fr !important;
  }

  .values-grid {
    grid-template-columns: 1fr !important;
  }

  .features-grid {
    grid-template-columns: 1fr !important;
  }

  /* CONTACT */
  .form-row {
    flex-direction: column !important;
  }

  /* PURCHASE */
  .amount-presets {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .preset-btn {
    padding: 10px 8px !important;
    font-size: .7rem !important;
  }

  .pur-card-live {
    height: 160px !important;
  }

  .pf-buy-btn {
    font-size: .7rem !important;
    padding: 14px 20px !important;
  }

  .conversion-preview {
    flex-direction: column !important;
    gap: 10px;
    text-align: center;
  }

  .conv-arrow {
    transform: rotate(90deg);
  }

  .pur-card-scroll {
    gap: 12px !important;
  }

  /* MODAL bottom */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal-box {
    width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
    margin: 0 !important;
  }

  .pay-mini-summary {
    flex-direction: column;
    gap: 8px;
  }

  .pms-right {
    text-align: left;
  }

  /* REFERRAL banner */
  .referral-banner {
    padding: 14px 16px;
  }

  .rb-timer {
    font-size: .9rem;
    gap: 2px;
  }

  /* FLOATING ref banner */
  .frb-cta {
    width: 100%;
    text-align: center;
  }

  /* Auth box */
  .auth-box {
    margin: 8px !important;
  }

  /* Country title text smaller */
  .country-title {
    font-size: 1.5rem !important;
    gap: 10px;
  }

  /* BTN full width on very small */
  .hero-btns {
    flex-direction: column;
    align-items: center;
  }

  .btn-primary,
  .btn-ghost {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* ================================================================
   EXTRA SMALL PHONE (≤ 380px)
   ================================================================ */
@media (max-width: 380px) {
  nav {
    padding: 14px 14px;
  }

  .nav-logo {
    font-size: .9rem;
    letter-spacing: .1em;
  }

  h1.hero-title {
    font-size: 3rem !important;
  }

  .section-title {
    font-size: 2rem !important;
  }

  .modal-body {
    padding: 0 4px !important;
  }

  .sbar-item span {
    font-size: .6rem;
  }

  .pay-tab {
    font-size: .6rem;
    padding: 8px 6px;
  }

  .amount-presets {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}