@media (max-width: 900px) {

  nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding: 10px 16px;
    row-gap: 8px;
  }
  .nav-logo-text { font-size: 13px; }
  .nav-links {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    font-size: 11px;
    padding: 5px 9px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-ghost { padding: 7px 13px; font-size: 12px; }

  .hero {
    grid-template-columns: 1fr;
    padding: 44px 20px 36px;
    gap: 36px;
  }
  .hero-content, .hero-visual { min-width: 0; }
  .hero h1 { font-size: 28px; word-break: break-word; overflow-wrap: anywhere; }
  .hero p  { font-size: 15px; }
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline { width: 100%; justify-content: center; }

  .hero-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-btns { align-self: stretch; }
  .hero-pills { justify-content: center; }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0 20px;
    margin-bottom: 28px;
  }
  .stat-item  { padding: 20px 12px 16px; }
  .stat-num   { font-size: 28px; }

  .tool-section  { padding: 28px 20px; }
  .tools-section { padding: 28px 20px; }
  .guide-section { padding: 28px 20px; }
  .support-section { padding: 28px 20px; }

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

  .upload-zone { padding: 40px 20px; }

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

  .tools-grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tools-heading h2 { font-size: 27px; }
  .tools-heading { margin-bottom: 26px; }

  .result-meta { flex-wrap: wrap; gap: 10px; }
  .result-meta-item { flex: 1 1 calc(50% - 5px); min-width: 0; }

  .pricing-grid { grid-template-columns: 1fr; }
  .price-card-inner { padding: 24px 20px; }

  .review-card { padding: 24px 18px; }

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

  footer { padding: 20px 16px; }
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .footer-features { justify-content: center; gap: 16px; flex-wrap: wrap; }

  .card-body { padding: 18px 18px 22px; }
  .access-gate-card { max-width: 100%; }
  .cursor-glow { width: 280px; height: 280px; }
}

@media (max-width: 600px) {

  .hero { padding: 32px 14px 24px; gap: 24px; }
  .hero h1 { font-size: 23px; letter-spacing: -0.3px; }
  .hero p  { font-size: 14px; margin-bottom: 24px; }
  .hero-badge { max-width: 100%; }

  .stats-row { gap: 10px; padding: 0 14px; margin-bottom: 20px; }
  .stat-item  { padding: 16px 10px 14px; border-radius: 14px; }
  .stat-num   { font-size: 24px; }
  .stat-stars svg { width: 16px; height: 16px; }
  .stat-stars { height: 28px; gap: 2px; }
  .stat-label { font-size: 11px; }

  .tool-section  { padding: 20px 14px; }
  .tools-section { padding: 20px 14px; }
  .guide-section { padding: 20px 14px; }
  .support-section { padding: 20px 14px; }

  .hero-icon-box { min-height: 220px; }

  .upload-zone { padding: 28px 14px; }
  .upload-icon { width: 48px; height: 48px; border-radius: 12px; }
  .upload-icon svg { width: 24px; height: 24px; }
  .upload-title { font-size: 15px; }
  .upload-sub   { font-size: 12px; }

  .fps-option { padding: 14px 8px 12px; }
  .fps-num    { font-size: 20px; }
  .fps-label  { font-size: 10px; }
  .fps-desc   { font-size: 10px; }
  .fps-grid   { gap: 8px; margin-bottom: 14px; }

  .process-btn { font-size: 14px; padding: 14px; }

  .card-header { padding: 16px 16px 0; }
  .card-body   { padding: 14px 16px 18px; }

  .progress-log { height: 130px; font-size: 10px; }

  .result-meta { flex-direction: column; gap: 8px; }
  .result-meta-item { flex: unset; width: 100%; }

  .tools-heading h2 { font-size: 22px; }
  .tools-heading { margin-bottom: 20px; }
  .tools-grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tool-card { padding: 18px; }

  .price-card-inner { padding: 20px 16px; }
  .price-lkr { font-size: 26px; }
  .price-name { font-size: 16px; }

  .review-card    { padding: 20px 14px; }
  .review-text    { font-size: 13px; }
  .review-nav-btn { width: 30px; height: 30px; font-size: 16px; }
  .review-slider-wrap { gap: 8px; }
  .star-picker    { font-size: 22px; letter-spacing: 5px; }

  .support-card { padding: 22px 14px; }

  .footer-features { gap: 10px; }
  .footer-feature  { font-size: 11px; }

  .nav-logo-text { font-size: 12px; }
  .access-badge  { font-size: 11px; padding: 5px 10px; }
}

@media (max-width: 420px) {

  nav { padding: 8px 12px; }
  .nav-logo-icon { width: 30px; height: 30px; }
  .nav-logo-text { font-size: 11px; }
  .nav-actions .btn-ghost { padding: 6px 10px; font-size: 11px; }
  .nav-links a { font-size: 10px; padding: 4px 7px; }

  .hero { padding: 26px 12px 20px; }
  .hero h1 { font-size: 20px; }

  .stats-row { padding: 0 12px; margin-bottom: 16px; }
  .stat-num { font-size: 20px; letter-spacing: -0.5px; }
  .stat-item { padding: 12px 8px 10px; border-radius: 12px; }
  .stat-label { font-size: 10px; }

  .tool-section, .tools-section, .guide-section, .support-section { padding: 16px 12px; }

  .fps-num { font-size: 17px; }
  .fps-option { padding: 12px 6px 10px; }

  .hero-icon-box { min-height: 180px; }

  .upload-zone { padding: 22px 12px; }

  .tools-grid-4 { grid-template-columns: 1fr; gap: 10px; }

  footer { padding: 16px 12px; }
  .footer-feature svg { display: none; }
}