/* Mobile overrides only for ez2trac.com */
html, body {
  overflow-x: hidden;
}

.mobile-nav-toggle,
.mobile-nav-panel {
  display: none;
}

@media (max-width: 768px) {
  .topbar .wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header .wrap {
    position: relative;
    gap: 12px;
    flex-wrap: wrap;
  }

  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-left: auto;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .mobile-nav-toggle span,
  .mobile-nav-toggle::before,
  .mobile-nav-toggle::after {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }

  .mobile-nav-toggle span {
    position: relative;
  }

  .mobile-nav-toggle::before {
    position: absolute;
    transform: translateY(-6px);
  }

  .mobile-nav-toggle::after {
    position: absolute;
    transform: translateY(6px);
  }

  body.mobile-nav-open .mobile-nav-toggle span {
    opacity: 0;
  }

  body.mobile-nav-open .mobile-nav-toggle::before {
    transform: rotate(45deg);
  }

  body.mobile-nav-open .mobile-nav-toggle::after {
    transform: rotate(-45deg);
  }

  .nav,
  .nav-cta {
    display: none;
  }

  .mobile-nav-panel {
    display: none;
    width: 100%;
    order: 4;
    background: rgba(8,13,25,.96);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 18px 40px rgba(2,6,23,.28);
  }

  body.mobile-nav-open .mobile-nav-panel {
    display: block;
  }

  .mobile-nav-links,
  .mobile-nav-actions {
    display: grid;
    gap: 10px;
  }

  .mobile-nav-links {
    margin-bottom: 12px;
  }

  .mobile-nav-links a,
  .mobile-nav-actions a {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .mobile-nav-links a {
    color: #e5eefc;
    background: rgba(255,255,255,.04);
  }

  .mobile-nav-links a.active {
    background: rgba(255,255,255,.11);
    color: #fff;
  }

  .hero {
    padding: 48px 0 34px;
  }

  .hero-grid,
  .screenshot-grid,
  .ecosystem-grid,
  .page-grid,
  .grid-4,
  .grid-3,
  .grid-2,
  .plan-grid,
  .footer-grid,
  .calc-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 34px;
    line-height: 1.08;
  }

  .hero p,
  .section-intro,
  .page-hero p {
    font-size: 16px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions .btn,
  .plan .btn,
  .footer .btn {
    width: 100%;
  }

  .kpis {
    grid-template-columns: 1fr;
  }

  .section,
  .page-hero,
  .footer {
    padding-top: 42px;
    padding-bottom: 32px;
  }

  .card,
  .plan,
  .tool-box,
  .sidebar-card,
  .hero-card,
  .article,
  .product-shot {
    padding: 18px;
    border-radius: 20px;
  }

  .shot-header-row,
  .shot-metrics,
  .shot-body,
  .product-shot-top {
    display: grid;
    grid-template-columns: 1fr;
  }

  .shot-table .shot-row,
  .compare-table .compare-row,
  .customer-grid,
  .resource-grid {
    grid-template-columns: 1fr;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .footer-grid > div {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .wrap,
  .site-header .wrap,
  .topbar .wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero h1,
  .page-hero h1,
  .section h2 {
    font-size: 28px;
  }

  .logo {
    gap: 10px;
    font-size: 16px;
  }

  .logo-badge {
    width: 38px;
    height: 38px;
  }

  .card,
  .plan,
  .tool-box,
  .sidebar-card,
  .hero-card,
  .article,
  .product-shot {
    padding: 16px;
  }
}