@media (max-height: 800px) {
  .intro-container { gap: 32px; }
  .intro-header h2 { font-size: 2.25rem; }
  .intro-card { padding: 20px 16px; }
  .card-icon { width: 48px; height: 48px; font-size: 1.75rem; margin-bottom: 16px; }
  .intro-bottom-section { gap: 20px; }
}

@media (max-width: 1024px) {
  .intro-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-bottom-section { grid-template-columns: 1fr; }
  .secondary-page { height: auto; padding: 80px 5%; overflow-y: auto; }
}

@media (max-width: 640px) {
  .intro-grid { grid-template-columns: 1fr; gap: 12px; }
  .intro-header h2 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 8px; }
  .intro-header p { font-size: 0.875rem; line-height: 1.4; }
  .intro-container { gap: 24px; }
  .intro-related-grid { grid-template-columns: 1fr; gap: 8px; }
  .secondary-page { padding: 32px 12px; }
  
  .intro-card { padding: 20px 12px; border-radius: 16px; }
  .card-icon { width: 40px; height: 40px; font-size: 1.25rem; margin-bottom: 10px; border-radius: 10px; }
  .intro-card h3 { font-size: 1rem; margin-bottom: 8px; }
  .intro-feature-list li { font-size: 0.8rem; padding: 2px 0; }
  
  .intro-usage-box, .intro-faq-box { padding: 16px 12px; padding-top: 0; border-radius: 16px; }
  .intro-usage-box h3, .intro-faq-box h3 { font-size: 1.05rem; margin-bottom: 12px; }
  .intro-usage-list li { font-size: 0.85rem; gap: 8px; }
  .intro-usage-list li::before { width: 18px; height: 18px; font-size: 0.65rem; }
  
  .intro-related-section { margin-top: 24px; padding-top: 24px; }
  .intro-related-title { font-size: 1.1rem; margin-bottom: 16px; }
  .related-tool-link { padding: 12px; border-radius: 10px; }
  .related-tool-icon { width: 28px; height: 28px; font-size: 1rem; }
  .related-tool-name { font-size: 0.85rem; }
}