/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/* Large tablets / small laptops */
@media (max-width: 980px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .panel-preview {
    min-height: 340px;
  }

  .hero {
    padding-top: 72px;
  }
}

/* Tablets */
@media (max-width: 700px) {
  .container { padding: 0 20px; }

  .hero { padding: 56px 20px 44px; }

  .hero h1 { font-size: 38px; }

  .hero-sub { font-size: 15.5px; }

  .panel { padding: 22px; }

  .terminal-body {
    padding: 24px;
    font-size: 18px;
  }

  .btn-row { gap: 8px; }
}

/* Phones */
@media (max-width: 480px) {
  .header-inner { gap: 10px; }

  .header-link {
    padding: 7px 12px;
    font-size: 13px;
  }

  .hero h1 { font-size: 30px; letter-spacing: -0.02em; }

  .eyebrow { font-size: 11.5px; padding: 5px 12px; }

  .workspace { gap: 16px; padding-bottom: 70px; }

  .panel { padding: 18px; }

  .btn-row {
    grid-template-columns: 1fr 1fr;
  }

  .terminal-body {
    padding: 20px;
    font-size: 16px;
  }

  .toast {
    left: 16px;
    right: 16px;
    bottom: 20px;
    transform: translateY(24px);
    width: calc(100% - 32px);
    justify-content: center;
  }

  .toast.show { transform: translateY(0); }
}

/* Very small phones */
@media (max-width: 360px) {
  .hero h1 { font-size: 26px; }
  .btn-row { grid-template-columns: 1fr; }
}