/* App layout + landing page */

/* Landing */
#matrixRain {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.15;
}

.nav-main {
  position: sticky;
  top: 0;
  background: rgba(10, 14, 10, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 100;
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nav-version { font-size: 11px; color: var(--text-tertiary); padding: 2px 6px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.nav-links { display: flex; gap: var(--space-4); align-items: center; }
.nav-links a { color: var(--text-secondary); text-decoration: none; }
.nav-links a:hover { color: var(--neon-green); }

.hero {
  padding: var(--space-8) var(--space-5);
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  background: var(--cyber-bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-family: var(--font-mono);
  margin-bottom: var(--space-5);
}
.hero-title { font-size: 56px; font-weight: 900; line-height: 1.1; margin-bottom: var(--space-4); font-family: var(--font-mono); }
.hero-subtitle { color: var(--text-secondary); font-weight: 400; }
.hero-highlight { font-weight: 900; }
.hero-description { font-size: 18px; color: var(--text-secondary); margin-bottom: var(--space-5); }
.hero-cta { display: flex; gap: var(--space-3); margin-bottom: var(--space-7); }
.hero-stats { display: flex; gap: var(--space-6); }
.stat-value { font-family: var(--font-mono); font-size: 32px; font-weight: 900; }
.stat-label { font-size: 13px; color: var(--text-secondary); }
.hero-terminal { width: 100%; }

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}
.section-title {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 36px;
  margin-bottom: var(--space-7);
}
.features-grid, .pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.feature-card { padding: var(--space-5); }
.feature-icon { font-size: 32px; margin-bottom: var(--space-3); }
.feature-card h3 { margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: 18px; }
.feature-card p { color: var(--text-secondary); }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.step {
  background: var(--cyber-bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
}
.step-number {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 900;
  color: var(--neon-green);
  opacity: 0.6;
  margin-bottom: var(--space-3);
}
.step h3 { margin-bottom: var(--space-2); }

.pricing-card { padding: var(--space-5); }
.pricing-card.featured { border-color: var(--neon-green); }
.pricing-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--neon-green);
  color: var(--cyber-black);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.pricing-header { margin-bottom: var(--space-4); }
.price { font-family: var(--font-mono); font-size: 28px; font-weight: 900; color: var(--neon-green); }
.price .currency { font-size: 14px; color: var(--text-secondary); margin-right: 4px; }
.pricing-features { list-style: none; padding: 0; margin: var(--space-4) 0; }
.pricing-features li { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }

.cta-section { padding: var(--space-8) var(--space-5); text-align: center; max-width: 800px; margin: 0 auto; }
.cta-title { font-size: 48px; margin-bottom: var(--space-4); font-family: var(--font-mono); }
.cta-description { font-size: 18px; color: var(--text-secondary); margin-bottom: var(--space-5); }

.footer {
  background: var(--cyber-bg-2);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-6) var(--space-5);
  margin-top: var(--space-8);
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-5);
  font-size: 13px;
}
.footer a { color: var(--text-secondary); text-decoration: none; display: block; padding: 4px 0; }
.footer a:hover { color: var(--neon-green); }
.footer-copyright { grid-column: 1 / -1; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); margin-top: var(--space-4); text-align: center; color: var(--text-tertiary); }

/* App layout */
.app-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  background: var(--cyber-bg-1);
}
.sidebar {
  background: var(--cyber-bg-2);
  border-left: 1px solid var(--border-subtle);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-header { margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.logo { font-family: var(--font-mono); font-size: 18px; font-weight: 700; }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.nav-item:hover { background: var(--cyber-bg-3); color: var(--text-primary); }
.nav-item.active { background: var(--dark-green); color: var(--neon-green); border-right: 2px solid var(--neon-green); }
.nav-icon { font-size: 18px; }
.sidebar-footer { padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.user-info { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.user-avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--neon-green);
  color: var(--cyber-black);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-mono);
}
.user-name { font-size: 14px; font-weight: 600; }
.user-plan { font-size: 12px; color: var(--text-tertiary); }
.btn-logout {
  width: 100%; padding: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--transition-fast);
  font-family: var(--font-arabic);
}
.btn-logout:hover { border-color: var(--critical); color: var(--critical); }

.main-content { display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  background: var(--cyber-bg-2);
  border-bottom: 1px solid var(--border-subtle);
}
.topbar h1 { font-size: 20px; font-weight: 700; }
.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.topbar-right { display: flex; align-items: center; gap: var(--space-5); font-size: 13px; color: var(--text-secondary); }
.connection-status { display: flex; align-items: center; gap: var(--space-2); }

.views-container { flex: 1; padding: var(--space-6); overflow-y: auto; }
.view { display: none; }
.view.active { display: block; animation: fadeInUp 0.3s ease-out; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.stat-card { text-align: center; }
.stat-card-label { font-size: 13px; color: var(--text-secondary); margin-bottom: var(--space-2); }
.stat-card-value { font-family: var(--font-mono); font-size: 36px; font-weight: 700; }
.dashboard-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-5); }
.chart-container { min-height: 300px; }
.activity-item { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--transition-fast); }
.activity-item:hover { background: var(--cyber-bg-3); }
.activity-target { font-weight: 600; margin-bottom: 4px; }
.activity-meta { display: flex; gap: var(--space-2); font-size: 12px; color: var(--text-tertiary); }

.new-scan-container { max-width: 800px; margin: 0 auto; }
.scan-form h2 { font-family: var(--font-mono); margin-bottom: var(--space-2); }
.form-description { color: var(--text-secondary); margin-bottom: var(--space-5); }
.form-group { margin-bottom: var(--space-5); }
.form-group label { display: block; margin-bottom: var(--space-2); font-size: 14px; font-weight: 600; }
.intensity-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.intensity-option { cursor: pointer; }
.intensity-option input { display: none; }
.intensity-card {
  padding: var(--space-4);
  background: var(--cyber-bg-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
  transition: all var(--transition-fast);
}
.intensity-option input:checked + .intensity-card {
  background: var(--dark-green);
  border-color: var(--neon-green);
  box-shadow: var(--shadow-glow);
}
.intensity-icon { font-size: 28px; margin-bottom: var(--space-2); }
.intensity-name { font-weight: 700; font-size: 16px; margin-bottom: var(--space-1); }
.intensity-desc { font-size: 12px; color: var(--text-secondary); }
.confirmation-box {
  padding: var(--space-4);
  background: var(--cyber-bg-3);
  border: 1px solid var(--medium);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.confirmation-title { font-weight: 700; margin-bottom: var(--space-3); color: var(--medium); }
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.6;
}
.checkbox-row input[type="checkbox"] { margin-top: 4px; accent-color: var(--neon-green); }

.active-scan-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--space-4);
  height: calc(100vh - 140px);
}
.progress-panel { grid-column: 1 / -1; }
.stream-panel, .findings-panel, .chat-panel { display: flex; flex-direction: column; max-height: 600px; }
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.progress-bar-container { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.progress-bar { flex: 1; height: 8px; background: var(--cyber-bg-3); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dark-green), var(--neon-green));
  transition: width 0.5s ease-out;
  box-shadow: 0 0 10px var(--green-glow);
}
.progress-percentage { font-family: var(--font-mono); font-weight: 700; }
.progress-current-task {
  padding: var(--space-3);
  background: var(--cyber-bg-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  margin-bottom: var(--space-4);
}
.progress-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.phase {
  text-align: center;
  padding: var(--space-3);
  background: var(--cyber-bg-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  opacity: 0.5;
  transition: all var(--transition-normal);
}
.phase.active { opacity: 1; border-color: var(--neon-green); background: var(--dark-green); box-shadow: var(--shadow-glow); }
.phase.completed { opacity: 0.7; border-color: var(--soft-green); }
.phase-icon { font-size: 24px; margin-bottom: var(--space-1); }
.phase-name { font-size: 13px; font-weight: 600; }

.stream-header, .findings-header, .chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}
.findings-counters { display: flex; gap: 4px; }

.findings-list { flex: 1; overflow-y: auto; padding: var(--space-2); }
.finding-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--cyber-bg-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  border-right: 3px solid var(--info);
}
.finding-item.severity-critical { border-right-color: var(--critical); }
.finding-item.severity-high { border-right-color: var(--high); }
.finding-item.severity-medium { border-right-color: var(--medium); }
.finding-item.severity-low { border-right-color: var(--low); }
.finding-title { font-weight: 600; margin-bottom: 4px; }
.finding-category { font-size: 12px; color: var(--text-tertiary); }
.findings-empty { text-align: center; padding: var(--space-6); color: var(--text-tertiary); }

.chat-messages { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.chat-message { display: flex; gap: var(--space-3); }
.chat-message-avatar {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--cyber-bg-3);
  display: flex; align-items: center; justify-content: center;
}
.chat-message-content {
  flex: 1;
  padding: var(--space-3);
  background: var(--cyber-bg-3);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.6;
}
.chat-message-user .chat-message-content { background: var(--dark-green); color: var(--text-primary); }
.chat-input-container {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.toast-container {
  position: fixed;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.toast {
  padding: var(--space-3) var(--space-5);
  background: var(--cyber-bg-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  box-shadow: var(--shadow-card);
  transform: translateX(-100%);
  opacity: 0;
  transition: all var(--transition-normal);
  min-width: 280px;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast-success { border-color: var(--neon-green); }
.toast-error { border-color: var(--critical); }
.toast-info { border-color: var(--low); }

.scans-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cyber-bg-2);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.scans-table th, .scans-table td {
  padding: var(--space-3) var(--space-4);
  text-align: right;
  border-bottom: 1px solid var(--border-subtle);
}
.scans-table th {
  background: var(--cyber-bg-3);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.scans-table tr.clickable { cursor: pointer; transition: background var(--transition-fast); }
.scans-table tr.clickable:hover { background: var(--cyber-bg-3); }

.terminal-fullscreen {
  height: calc(100vh - 140px);
  background: var(--cyber-black);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
#xtermContainer { height: 100%; }

/* Auth pages */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.auth-card { width: 100%; max-width: 440px; }
.auth-logo { text-align: center; margin-bottom: var(--space-5); font-family: var(--font-mono); font-size: 24px; }
.auth-card h2 { text-align: center; margin-bottom: var(--space-5); }
.auth-footer { text-align: center; margin-top: var(--space-4); color: var(--text-secondary); font-size: 13px; }
.auth-footer a { color: var(--neon-green); }

/* Mobile menu toggle (hidden on desktop) */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.mobile-menu-btn:hover { border-color: var(--neon-green); color: var(--neon-green); }
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.sidebar-overlay.show { display: block; opacity: 1; }

/* ─── Tablet ─── */
@media (max-width: 1024px) {
  .app-body { grid-template-columns: 80px 1fr; }
  .sidebar { padding: var(--space-3); }
  .nav-item span:not(.nav-icon) { display: none; }
  .user-details, .btn-logout { display: none; }
  .active-scan-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: var(--space-3);
  }
  .stream-panel, .findings-panel, .chat-panel { max-height: 500px; min-height: 400px; }
  .intensity-options { grid-template-columns: repeat(2, 1fr); }
  .hero-container { grid-template-columns: 1fr; }
  .hero-title { font-size: 36px; }
  .dashboard-row { grid-template-columns: 1fr; }
}

/* ─── Mobile ─── */
@media (max-width: 640px) {
  /* Single-column layout, sidebar becomes off-canvas drawer */
  .app-body {
    grid-template-columns: 1fr;
    display: block;
  }

  .sidebar {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    z-index: 100;
    padding: var(--space-4);
    transition: right var(--transition-normal);
    box-shadow: var(--shadow-elevated);
    overflow-y: auto;
  }
  .sidebar.open { right: 0; }

  /* Restore full nav text in drawer */
  .sidebar .nav-item span:not(.nav-icon) { display: inline; }
  .sidebar .user-details,
  .sidebar .btn-logout { display: block; }
  .sidebar .user-info { display: flex; }

  .mobile-menu-btn { display: inline-flex; }

  /* Topbar adjustments */
  .topbar {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .topbar h1 { font-size: 17px; flex: 1; }
  .topbar-right {
    gap: var(--space-3);
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .topbar-right > div { white-space: nowrap; }

  .views-container {
    padding: var(--space-4);
    padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom));
  }

  /* Dashboard */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
  .stat-card { padding: var(--space-3); }
  .stat-card-value { font-size: 28px; }
  .stat-card-label { font-size: 12px; }

  /* New scan form */
  .new-scan-container { max-width: 100%; }
  .scan-form { padding: var(--space-4); }
  .intensity-options {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .intensity-card { padding: var(--space-3); }
  .intensity-icon { font-size: 22px; }
  .intensity-name { font-size: 14px; }
  .intensity-desc { font-size: 11px; }

  /* Form inputs - bigger touch targets */
  .input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: var(--space-3);
  }
  .btn { padding: var(--space-3) var(--space-4); min-height: 44px; }
  .btn-large { padding: var(--space-4) var(--space-5); font-size: 16px; }
  .btn-small { min-height: 36px; padding: var(--space-2) var(--space-3); }

  /* Active scan view */
  .active-scan-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: auto;
  }
  .progress-panel { padding: var(--space-4); }
  .progress-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .progress-header h3 {
    font-size: 14px;
    word-break: break-all;
    direction: ltr;
    text-align: left;
  }
  .progress-bar-container { gap: var(--space-2); }
  .progress-percentage { font-size: 13px; }
  .progress-current-task { font-size: 12px; padding: var(--space-2); }

  .progress-phases {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
  }
  .phase { padding: var(--space-2); }
  .phase-icon { font-size: 18px; }
  .phase-name { font-size: 11px; }

  .stream-panel, .findings-panel, .chat-panel {
    max-height: 350px;
    min-height: 280px;
    padding: var(--space-3);
  }
  .terminal { font-size: 11px; padding: var(--space-2); }

  .findings-counters { flex-wrap: wrap; }
  .finding-item { padding: var(--space-2); gap: var(--space-2); }
  .finding-title { font-size: 13px; }

  /* Chat */
  .chat-messages { padding: var(--space-2); }
  .chat-message-content { font-size: 13px; padding: var(--space-2) var(--space-3); }
  .chat-message-avatar { width: 28px; height: 28px; font-size: 14px; }
  .chat-input-container { padding: var(--space-2); gap: var(--space-2); }

  /* Tables - horizontal scroll wrapper */
  .scans-table-wrapper,
  .card:has(> .scans-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .scans-table { min-width: 640px; font-size: 13px; }
  .scans-table th, .scans-table td { padding: var(--space-2) var(--space-3); }

  /* Terminal view full-screen */
  .terminal-fullscreen { height: calc(100vh - 130px); padding: var(--space-2); }

  /* Toast container */
  .toast-container {
    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
  }
  .toast { min-width: 0; width: 100%; font-size: 13px; }

  /* Hide page title on very small if needed for hamburger */
  .topbar-left { flex: 1; min-width: 0; }
  .topbar-left h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Sidebar overlay visible only when sidebar open */
  body.sidebar-open { overflow: hidden; }
}

/* ─── Very small phones ─── */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
  .intensity-options { grid-template-columns: 1fr; }
  .progress-phases { grid-template-columns: repeat(2, 1fr); }
  .findings-counters .badge { font-size: 10px; padding: 2px 6px; }
}

/* ─── Landing page mobile ─── */
@media (max-width: 640px) {
  .nav-container { padding: var(--space-3); flex-wrap: wrap; gap: var(--space-2); }
  .nav-links { gap: var(--space-2); }
  .nav-links a { font-size: 13px; }
  .nav-links a:not(.btn) { display: none; } /* hide non-button links to save space */
  .hero { padding: var(--space-5) var(--space-3); }
  .hero-title { font-size: 28px; }
  .hero-description { font-size: 15px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { gap: var(--space-3); justify-content: space-around; }
  .stat-value { font-size: 22px; }
  .section-container { padding: var(--space-5) var(--space-3); }
  .section-title { font-size: 24px; }
  .features-grid, .pricing-grid, .steps {
    grid-template-columns: 1fr;
  }
  .footer-container { grid-template-columns: 1fr; gap: var(--space-3); }
  .cta-title { font-size: 28px; }
}