/* ============================================
   Farida Marine - Clean Responsive V3
   ============================================ */

@media (max-width: 1280px) {
  .container { padding: 0 32px; }
  .svc-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
  .hero-inner-split { grid-template-columns: 1fr; gap: 32px; }
  .hero-stats { flex-direction: row; flex-wrap: wrap; }
  .hero-stat { flex: 1 1 240px; }
  
  .footer-grid-5 { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-col-main { grid-column: span 2; max-width: none; }
  
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-bar { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  
  .ports-layout { grid-template-columns: 1fr; }
  .ports-list { order: 2; flex-direction: row; flex-wrap: wrap; }
  .ports-map-img { order: 1; max-width: 100%; }
  .ports-info-panel { order: 3; max-width: 100%; }
  
  .cta-card { flex-direction: column; text-align: center; padding: 40px 32px; }
  .overview-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  :root {
    --section-pad: 48px;
    --header-h: 64px;
    --grid-gap: 20px;
  }

  .header-nav, .header-cta { display: none; }
  .mobile-toggle { display: flex; }
  
  .header-logo img { height: 32px; }
  .header-logo-text .name { font-size: 0.95rem; }
  .header-logo-text .tagline { font-size: 0.65rem; }

  .header-nav.open { 
    display: flex; 
    flex-direction: column; 
    position: absolute; 
    top: var(--header-h); 
    left: 0; 
    width: 100%; 
    background: rgba(7,27,47,0.98); 
    backdrop-filter: blur(20px); 
    padding: 32px; 
    gap: 24px; 
    border-bottom: 1px solid rgba(255,255,255,0.06); 
    height: calc(100vh - var(--header-h));
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .header-nav.open a { font-size: var(--text-xl); }

  .hero { min-height: auto; padding-top: calc(var(--header-h) + 60px); padding-bottom: 60px; }
  .hero-page { min-height: auto; padding-top: calc(var(--header-h) + 40px); }
  .hero-stats { display: none; }
  .hero-features { gap: 12px 20px; }
  .hero-title { font-size: 2.2rem; }
  
  .section-heading-row { flex-direction: column; align-items: center; text-align: center; margin-bottom: 32px; }
  .section-heading-row .section-heading { text-align: center; margin-bottom: 16px; }

  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
  .product-items { grid-template-columns: 1fr; }
  
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-grid { grid-template-columns: repeat(1, 1fr); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .why-grid { grid-template-columns: 1fr; gap: 16px; }
  
  .footer-grid-5 { grid-template-columns: 1fr; text-align: center; }
  .footer-col-main { grid-column: span 1; display: flex; flex-direction: column; align-items: center; }
  .footer-social { justify-content: center; }
  .footer-badges { justify-content: center; }
  .footer h4::after { left: 50%; transform: translateX(-50%); }
  .footer-links a { justify-content: center; }
  .footer-contact { align-items: center; }
  
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
  .footer-legal { justify-content: center; }

  .cta-card { padding: 40px 24px; }
  .cta-card-content p { margin-left: auto; margin-right: auto; }
  
  .overview-image img { aspect-ratio: 16/10; }
  
  .whatsapp-float a { width: 52px; height: 52px; font-size: var(--text-2xl); }
  .whatsapp-tooltip { display: none; }
  .back-to-top { bottom: 20px; right: 20px; width: 42px; height: 42px; font-size: var(--text-base); }
  
  .hero-search-wrap { max-width: 100% !important; margin-top: 24px; }
  .form-input { padding: 12px 18px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.8rem; }
  .svc-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; width: 100%; }
  .btn { width: 100%; justify-content: center; margin-bottom: 8px; }
  .btn:last-child { margin-bottom: 0; }
  
  .header-logo-text .tagline { display: none; }
}