/* ===== Tablet (<= 1024px) ===== */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* reset desktop border rules, re-apply for 2-col */
  .features-grid .feature-card {
    border-right: 1px solid rgba(20, 30, 80, 0.08);
    border-bottom: 1px solid rgba(20, 30, 80, 0.08);
  }
  .features-grid .feature-card:nth-child(2n) {
    border-right: none;
  }
  .features-grid .feature-card:nth-last-child(-n + 2) {
    border-bottom: none;
  }

  .footer__top {
    flex-wrap: wrap;
    row-gap: var(--space-lg);
  }
}

/* ===== Mobile nav + stacked sections (<= 768px) ===== */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }

  .section {
    padding-block: var(--space-xl);
  }

  .nav-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 82%;
    max-width: 340px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background-color: var(--color-white);
    padding: calc(var(--space-2xl) + var(--space-xs)) var(--space-md) var(--space-lg);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition-base), visibility var(--transition-base);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
    z-index: 105;
    overflow-y: auto;
  }

  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }

  .nav__links li {
    border-bottom: 1px solid rgba(20, 30, 80, 0.08);
  }

  .nav__links a {
    display: block;
    padding-block: var(--space-md);
    font-size: 1rem;
  }

  .nav__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }

  .nav__login {
    text-align: center;
    padding: 0.65rem 1.25rem;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    font-weight: 600;
  }

  .nav__actions .btn {
    width: 100%;
  }

  /* slide-in menu backdrop — sits below the header stacking context (z-index 100)
     so the open menu stays above it, but page content behind is dimmed */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: 99;
  }

  .nav-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }

  body.nav-open {
    overflow: hidden;
  }

  .trial__form {
    padding: var(--space-md);
  }

  .hero__content h1 {
    font-size: 2rem;
  }

  .why-card .video-embed {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }

  .hero__grid,
  .why-card,
  .foundation,
  .features-header,
  .trusted__header,
  .trusted__body,
  .sc-hero2__grid,
  .sc-split,
  .sc-cards3,
  .sc-solution,
  .sc-stats4 {
    grid-template-columns: 1fr;
  }

  .sc-hero2__content h1 {
    font-size: 2rem;
  }

  .sc-hero2__media {
    order: -1;
  }

  .sc-modules {
    grid-template-columns: 1fr 1fr;
  }

  .hero__mockup {
    order: -1;
  }

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

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

  /* allow module/badge labels to wrap so they don't overflow the viewport */
  .foundation__modules .tag,
  .fcard__module,
  .fcard__badges .tag {
    white-space: normal;
    min-width: 0;
  }

  .foundation__modules,
  .fcard__modules,
  .fcard__badges,
  .foundation__tags {
    min-width: 0;
  }

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

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

  /* single column: only bottom dividers, none on last */
  .features-grid .feature-card {
    border-right: none;
    border-bottom: 1px solid rgba(20, 30, 80, 0.08);
  }
  .features-grid .feature-card:last-child {
    border-bottom: none;
  }

  .footer__top {
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--space-lg);
  }

  .footer__brand {
    max-width: 100%;
  }

  .footer__bottom-inner {
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-start;
  }
}

/* ===== Small mobile (<= 480px) ===== */
@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-sm);
  }

  .section {
    padding-block: var(--space-lg);
  }

  .trial__form {
    padding: var(--space-sm);
  }

  .why-card__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-banner__actions {
    flex-direction: column;
  }

  .footer__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .float-cta span {
    display: none;
  }
}

/* ===== New pages: tablet ===== */
@media (max-width: 1024px) {
  .artikel__grid { grid-template-columns: repeat(2, 1fr); }
  .harga-notes { grid-template-columns: repeat(2, 1fr); }
  .fitur-showcase { grid-template-columns: 1fr; }
  .fitur-phone { margin: 0 auto; }
}

/* ===== New pages: mobile ===== */
@media (max-width: 768px) {
  .artikel__head { flex-direction: column; align-items: flex-start; }
  .search { width: 100%; min-width: 0; }
  .artikel__grid { grid-template-columns: 1fr; }

  .pricing,
  .enterprise,
  .enterprise__list,
  .harga-notes,
  .fitur-row,
  .fitur-custom {
    grid-template-columns: 1fr;
  }

  .harga-hero__title { font-size: 1.85rem; }

  .pricing {
    margin-top: var(--space-xl);
  }

  /* stack price above a full-width button so they don't squeeze each other */
  .pricing__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .enterprise__media {
    max-width: 280px;
    margin: 0 auto;
  }

  .harga-hero__actions,
  .fitur-custom__actions { flex-direction: column; }

  .harga-hero__actions .btn,
  .fitur-custom__actions .btn,
  .pricing__foot .btn,
  .enterprise__cta { width: 100%; }

  .fitur-row--reverse .fitur-row__media { order: -1; }

  .artikel-detail__title { font-size: 1.5rem; }
}

/* ===== New pages: small mobile ===== */
@media (max-width: 480px) {
  .harga-notes { grid-template-columns: 1fr; }
  .enterprise__list { grid-template-columns: 1fr; }
  .pricing__card { padding: var(--space-md); }
}