/* ===========================================
   Variante B — Responsive
   =========================================== */

@media (max-width: 960px) {
  .container { padding: 0 32px; }

  section { padding: 100px 0; }

  .bento, .bento--reverse {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px;
  }

  .bento-screenshot { order: -1; }
  .bento-screenshot img {
    max-width: 240px;
    transform: none !important;
  }

  .steps-grid { grid-template-columns: 1fr; gap: 16px; }

  .security-grid { grid-template-columns: 1fr; gap: 0; }

  .screenshots-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .stats-grid { gap: 0; }
  .stat { padding: 0 28px; }
  .stat-value { font-size: clamp(2rem, 4vw, 3rem); }

  .hero-logo-main { height: 150px; }

  #cta { padding: 100px 0; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .header-inner { padding: 12px 20px; }

  section { padding: 72px 0; }

  .logo-icon { height: 32px; }
  .control-btn { width: 36px; height: 36px; border-radius: 10px; }
  .controls { gap: 6px; }

  #hero {
    min-height: auto;
    padding: 120px 20px 72px;
  }

  .hero-logo-main { height: 110px; margin-bottom: 28px; }
  .hero-sub { font-size: 1.0625rem; }
  .hero-body { font-size: 0.9375rem; }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .stat { border-right: none; padding: 0; }
  .stat-value { font-size: 2.5rem; }

  .bento, .bento--reverse { padding: 24px; }

  .pill { font-size: 0.8125rem; padding: 6px 14px; }

  .screenshots-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .compare-table { font-size: 0.8125rem; }
  .compare-table th,
  .compare-table td { padding: 12px 14px; }

  #cta { padding: 80px 0; }
  .cta-headline { font-size: clamp(2.5rem, 7vw, 4rem); }

  footer { padding: 32px 20px; }
}

@media (max-width: 480px) {
  .hero-cta { flex-direction: column; align-items: center; }
  .btn { width: 100%; justify-content: center; }
}