/* =====================================================
   JUSTICEHUB — COMPLETE RESPONSIVE CSS
   Breakpoints:
   xs: 320px+  sm: 480px+  md: 768px+  lg: 1024px+  xl: 1200px+
   ===================================================== */

/* ===== BASE RESET ===== */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
  min-width: 320px;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  height: auto;
}

/* ===== MOBILE HAMBURGER ===== */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: #fff;
  border-radius: 3px;
  transition: all 0.3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1023px) {
  .hamburger { display: flex !important; }
  .nav-links, .nav-actions { display: none !important; }
}

/* ===== MOBILE MENU DRAWER ===== */
.mobile-menu {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #081422;
  z-index: 999;
  overflow-y: auto;
  padding: 20px 0;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  display: none;
}
.mobile-menu.open {
  display: block;
  transform: translateX(0);
}
.mob-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}
.mob-nav-link:hover, .mob-nav-link.active {
  color: #D4A017;
  background: rgba(212,160,23,0.06);
  padding-left: 28px;
}
.mob-dropdown { display: none; background: rgba(255,255,255,0.03); }
.mob-dropdown.open { display: block; }
.mob-sub-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px 13px 32px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: all 0.2s;
}
.mob-sub-link:hover { color: #D4A017; background: rgba(212,160,23,0.06); padding-left: 36px; }
.mob-icon { width: 18px; text-align: center; color: #D4A017; font-size: 12px; flex-shrink: 0; }
.mob-actions {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 8px;
}
.mob-btn-report {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg,#D4A017,#F0C040);
  color: #081422; font-size: 15px; font-weight: 700;
  padding: 14px; border-radius: 10px; text-decoration: none;
}
.mob-btn-login {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 15px; font-weight: 600;
  padding: 14px; border-radius: 10px; text-decoration: none;
}
.mob-contact-row {
  display: flex; gap: 10px; padding: 0 24px; margin-top: 8px;
}
.mob-contact-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 10px; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.7); text-decoration: none;
}
.mob-contact-btn:hover {
  background: rgba(212,160,23,0.1); color: #D4A017;
  border-color: rgba(212,160,23,0.25);
}

/* ===== STICKY BOTTOM CTA (mobile only) ===== */
.mobile-sticky-cta {
  display: flex;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 998;
  background: #0D1B2A;
  border-top: 1px solid rgba(212,160,23,0.2);
  padding: 10px 16px;
  gap: 10px;
}
.sticky-btn-report {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg,#D4A017,#F0C040);
  color: #081422; font-size: 14px; font-weight: 700;
  padding: 12px; border-radius: 8px; text-decoration: none;
}
.sticky-btn-call {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 14px; font-weight: 600;
  padding: 12px 16px; border-radius: 8px; text-decoration: none;
}
@media (min-width: 768px) {
  .mobile-sticky-cta { display: none !important; }
}
@media (max-width: 767px) {
  body { padding-bottom: 68px !important; }
}

/* ===== MOBILE (max 767px) ===== */
@media (max-width: 767px) {

  /* Hero sections */
  section[class*="hero"],
  .kyr-hero, .srv-hero, .pp-hero, .tos-hero,
  .disc-hero, .lpo-hero, .pb-hero, .mission-hero,
  .aj-hero, .about-hero, .contact-hero {
    padding: 90px 16px 50px !important;
    margin-top: 68px !important;
  }
  .hero-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero-stats-card, .hero-card { display: none !important; }

  /* Grids → 1 col */
  .srv-grid, .prob-grid, .adv-grid, .approach-grid, .diff-grid,
  .ind-grid, .steps-grid, .two-col, .purpose-grid, .contact-grid,
  .awareness-grid, .build-grid, .mv-grid,
  .coming-grid, .imp-grid, .laws-grid, .guide-grid { grid-template-columns: 1fr !important; }

  /* Grids → 2 col */
  .cat-grid, .vision-grid, .believes-grid, .values-grid,
  .who-grid, .no-grid, .hsc-stats, .hero-stat-grid,
  .global-grid, .sec-grid, .data-grid, .rights-grid,
  .principles-grid, .support-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .why-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* pricing → 1 col, centered */
  .pricing-grid { grid-template-columns: 1fr !important; max-width: 380px !important; margin: 0 auto !important; }

  /* effects two-sides */
  .effects-grid { grid-template-columns: 1fr !important; }
  .effects-side.left { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }

  /* Legal page layouts */
  .pp-layout, .tos-layout, .disc-layout {
    grid-template-columns: 1fr !important; padding: 24px 16px !important;
  }
  .pp-sidebar, .tos-sidebar, .disc-sidebar { position: static !important; order: -1 !important; }
  .toc-card { display: none !important; }

  /* Guide */
  .guide-content { grid-template-columns: 1fr !important; padding: 20px 16px !important; }
  .dos-donts, .dd-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Global stats */
  .global-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .global-stat { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
  .global-stat:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.08) !important; }
  .global-stat:last-child, .global-stat:nth-last-child(2) { border-bottom: none !important; }

  /* Tabs → horizontal scroll */
  .tabs-wrap, .filter-tabs {
    overflow-x: auto !important; flex-wrap: nowrap !important;
    padding-bottom: 8px !important; justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
  }
  .tabs-wrap::-webkit-scrollbar, .filter-tabs::-webkit-scrollbar { display: none !important; }
  .stab, .ftab { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 12px !important; }

  /* Steps */
  .step-row { grid-template-columns: 48px 1fr !important; gap: 12px !important; }
  .step-num { width: 44px !important; height: 44px !important; font-size: 16px !important; }

  /* CTAs */
  .hero-ctas, .hero-buttons { flex-direction: column !important; gap: 10px !important; }
  .btn-gold, .btn-outline, .btn-cta {
    width: 100% !important; justify-content: center !important; text-align: center !important;
  }
  .register-form { flex-direction: column !important; }
  .partner-types { justify-content: center !important; }

  /* Section padding */
  .prob-section, .effects-section, .approach-section, .process-section,
  .pricing-section, .calc-section, .who-section, .faq-section, .diff-section,
  .adv-section, .global-section, .services-section, .industries-section,
  .why-section, .security-section, .partner-section, .disc-bottom,
  .mission-section, .believes-section, .vision-section, .awareness-section,
  .values-section, .highlights-section, .timeline-section, .improvements-section,
  .coming-section, .philosophy-section, .cat-section, .cta-bar {
    padding: 50px 16px !important;
  }

  /* Card padding */
  .srv-card, .guide-card, .pp-section, .tos-section, .disc-section,
  .step-card, .price-card, .imp-card, .coming-card {
    padding: 20px 16px !important;
  }

  /* Forms */
  .form-input, .calc-input, .calc-select, .register-input, .search-input,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], select, textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
    width: 100% !important;
  }

  /* Typography */
  .sec-title { font-size: clamp(22px, 6vw, 32px) !important; }
  .pb-brand { font-size: clamp(48px, 15vw, 72px) !important; }

  /* Ticker */
  .ticker-item { font-size: 12px !important; padding: 0 24px !important; }

  /* Country tags */
  .country-tags { gap: 8px !important; }
  .ctag { font-size: 12px !important; padding: 6px 12px !important; }

  /* Stats bar */
  .stats-row { flex-direction: column !important; border-radius: 12px !important; }
  .stat-block {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 14px !important;
  }
  .stat-block:last-child { border-bottom: none !important; }

  /* Timeline */
  .timeline-line { left: 16px !important; }
  .ti-dot { left: 8px !important; }
  .timeline-item .ti-content {
    width: 100% !important; padding-left: 36px !important;
    padding-right: 0 !important; text-align: left !important; margin: 0 !important;
  }
  .timeline-item:nth-child(even) .ti-content { padding-right: 0 !important; text-align: left !important; }
  .timeline-item:nth-child(even) .ti-tags { justify-content: flex-start !important; }

  /* MS visual */
  .ms-visual { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* Calc */
  .calc-wrap { max-width: 100% !important; }
  .calc-card { padding: 20px 16px !important; }
  .faq-wrap { max-width: 100% !important; }

  /* Footer */
  footer .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* KYR guide */
  .ev-item { padding: 8px 10px !important; font-size: 12.5px !important; }
  .action-item { padding: 10px 12px !important; }
}

/* ===== TABLET (768px – 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Hero */
  section[class*="hero"],
  .kyr-hero, .srv-hero, .lpo-hero, .pb-hero {
    padding: 100px 24px 60px !important; margin-top: 68px !important;
  }
  .hero-inner { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Grids */
  .cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .srv-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .why-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .believes-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .vision-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .values-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .steps-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .who-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .prob-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .no-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .global-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .mv-grid { grid-template-columns: 1fr 1fr !important; }

  /* Pricing — 2 col, last card centred */
  .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .price-card:last-child { grid-column: span 2 !important; max-width: 400px !important; margin: 0 auto !important; }

  /* Legal pages */
  .pp-layout, .tos-layout, .disc-layout {
    grid-template-columns: 220px 1fr !important; padding: 40px 24px !important;
  }
  .pp-sidebar, .tos-sidebar, .disc-sidebar { position: sticky !important; top: 80px !important; }

  /* Section padding */
  .mission-section, .believes-section, .vision-section, .awareness-section,
  .values-section, .highlights-section, .services-section, .process-section,
  .industries-section, .cat-section, .adv-section, .pricing-section, .diff-section {
    padding: 64px 24px !important;
  }

  /* Guide */
  .guide-content { grid-template-columns: 2fr 1fr !important; }
}

/* ===== SMALL PHONES (≤ 360px) ===== */
@media (max-width: 360px) {
  .cat-grid, .who-grid, .values-grid, .believes-grid { grid-template-columns: 1fr !important; }
  .no-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pb-brand { font-size: 48px !important; }
}

/* ===== LANDSCAPE PHONES ===== */
@media (max-width: 767px) and (orientation: landscape) {
  section[class*="hero"], .pb-hero { padding: 80px 24px 40px !important; }
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media (hover: none) and (pointer: coarse) {
  .toc-item, .mob-nav-link, .mob-sub-link,
  .btn-gold, .btn-outline, .ftab, .stab,
  .cat-card, .faq-q { min-height: 44px !important; }
  .cat-card:hover, .srv-card:hover, .prob-card:hover {
    transform: none !important; box-shadow: none !important;
  }
}

/* ===== UTILITY CLASSES ===== */
.mobile-only  { display: none !important; }
.desktop-only { display: block !important; }
@media (max-width: 767px) {
  .mobile-only   { display: block !important; }
  .desktop-only  { display: none !important; }
  .mobile-hide   { display: none !important; }
  .mobile-center { text-align: center !important; }
  .mobile-full   { width: 100% !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tablet-only { display: block !important; }
  .tablet-hide { display: none !important; }
}

/* ===== OVERFLOW SCROLL HELPER ===== */
.overflow-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}