/* =============================================
   SteefMade — Mobile Adaptations (≤768px)
   ============================================= */

/* ==========================================
   BASE RESET FOR MOBILE
   ========================================== */

@media (max-width: 768px) {
  :root {
    --section-py: clamp(48px, 10vw, 80px);
    --nav-height: 56px;
  }

  /* ==========================================
     NAVIGATION
     ========================================== */
  .nav {
    height: 56px;
  }

  .nav-logo {
    font-size: 16px;
  }

  /* ==========================================
     TYPOGRAPHY
     ========================================== */
  .t-h1 { font-size: clamp(24px, 7vw, 36px); }
  .t-h2 { font-size: clamp(20px, 5.5vw, 28px); }
  .t-h3 { font-size: 18px; }

  .page-hero {
    padding: calc(56px + 40px) 0 40px;
  }

  /* ==========================================
     HERO SECTION
     ========================================== */
  .hero-content {
    padding: 0 20px !important;
    padding-top: 56px !important;
    max-width: 100% !important;
  }

  .hero-title-line {
    font-size: clamp(40px, 12vw, 64px) !important;
  }

  .hero-subtitle {
    font-size: 15px !important;
    margin-bottom: 24px !important;
  }

  .hero-btns {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .hero-btns .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-metrics {
    gap: 24px !important;
    margin-top: 24px !important;
  }

  .hero-dots { display: none !important; }

  .scroll-indicator-wrap { bottom: 20px; }

  /* ==========================================
     ADVANTAGES (editorial rows)
     ========================================== */
  .adv-row {
    grid-template-columns: 36px 1fr !important;
    gap: 0 16px !important;
    padding: 24px 0 !important;
  }
  .adv-metric {
    font-size: clamp(28px, 10vw, 48px) !important;
  }
  .adv-row::before { left: -20px; }
  .adv-tag { display: none; }

  /* ==========================================
     TARIFF MANIFEST ROWS
     ========================================== */
  .tariff-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }

  .tariff-row-label {
    font-size: 20px !important;
  }

  .tariff-row-amount {
    font-size: 32px !important;
  }

  .tariff-row-price {
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .tariff-row .btn {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Flagship grid */
  .flagship-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* ==========================================
     CTA TERMINAL
     ========================================== */
  .cta-terminal {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    border-top: 1px solid var(--border) !important;
  }
  .cta-terminal-right { display: none !important; }

  .cta-terminal-title {
    font-size: clamp(28px, 8vw, 48px) !important;
  }

  /* ==========================================
     FOOTER
     ========================================== */
  .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .footer-copy {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ==========================================
     SECTION COMMON
     ========================================== */
  .section-header { margin-bottom: 32px !important; }
  .container { padding: 0 20px !important; }

  /* ==========================================
     WORKS PAGE
     ========================================== */
  .works-grid {
    grid-template-columns: 1fr !important;
  }

  /* ==========================================
     TARIFFS PAGE tabs
     ========================================== */
  .tariff-tabs > div {
    flex-direction: column !important;
  }

  .tariff-tab {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .tariff-tab-price {
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  .tariff-panel.active {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .tariff-panel-headline {
    font-size: clamp(28px, 7vw, 48px) !important;
  }

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

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

  /* ==========================================
     PROCESS PAGE
     ========================================== */
  .step-row {
    grid-template-columns: 48px 1fr !important;
    gap: 0 16px !important;
  }

  .step-aside { display: none; }

  .total-bar {
    margin-left: 0 !important;
    padding: 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .total-bar .btn {
    width: 100%;
    justify-content: center;
  }

  /* ==========================================
     FAQ PAGE
     ========================================== */
  .faq-q {
    grid-template-columns: 36px 1fr !important;
    gap: 12px !important;
    padding: 20px 0 !important;
  }
  .faq-q-text {
    font-size: clamp(15px, 4vw, 18px) !important;
  }
  .faq-a-inner {
    padding: 0 0 20px 16px !important;
  }
  .glossary-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  /* ==========================================
     TERMS PAGE
     ========================================== */
  .terms-block {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 40px 0 !important;
  }
  .terms-block-label { position: static !important; }
  .terms-block-num { font-size: 28px !important; }

  /* ==========================================
     CONTACT PAGE
     ========================================== */
  .contact-split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .contact-right { display: none !important; }
  .contact-headline {
    font-size: clamp(36px, 10vw, 56px) !important;
  }

  /* ==========================================
     BUTTONS
     ========================================== */
  .btn-lg {
    padding: 14px 24px !important;
    font-size: 16px !important;
  }
}

/* ==========================================
   SMALL PHONES (≤400px)
   ========================================== */
@media (max-width: 400px) {
  .hero-title-line {
    font-size: clamp(36px, 11vw, 52px) !important;
  }
  .container { padding: 0 16px !important; }
  .adv-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .adv-num { display: none; }
}

/* ==========================================
   TABLET (769px–1024px)
   ========================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .tariff-row {
    grid-template-columns: 160px 1fr auto !important;
    gap: 24px !important;
  }

  .adv-row {
    grid-template-columns: 48px 1fr 1fr auto !important;
    gap: 0 24px !important;
  }

  .adv-metric {
    font-size: clamp(32px, 4vw, 52px) !important;
  }

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