/* ============================================================
   SEOTECH INDONESIA — css/mobile.css
   Dedicated Mobile & Responsive Stylesheet
   Covers: Android Chrome, Safari iOS, iPad portrait/landscape
   Breakpoints: 400 / 480 / 520 / 600 / 640 / 768 / 900 / 1024 / 1180
   ============================================================ */

/* ── 1. SAFE AREA INSETS (viewport-fit: cover for iOS / Dynamic Island / Android) ── */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

@supports (padding: env(safe-area-inset-top)) {
  :root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
  }
}

/* ── 2. GLOBAL OVERFLOW PREVENT & TOUCH MANIPULATION ── */
html {
  overflow-x: clip;
}
body {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
section, main, article, header, footer, nav {
  box-sizing: border-box;
  max-width: 100%;
}

/* Eliminate tap delay across buttons, links, inputs, and custom interactive widgets */
a, button, input, select, textarea, [role="button"], [onclick],
.btn, .nav-hamburger, .hamburger, .ind-tab, .faq-q, .filter-pill,
.nav-links a, .mobile-menu a, .scb-btn, .cookie-btn-accept,
.cookie-btn-policy, .cookie-btn-close, .wa-float, .egw-trigger-btn,
.egw-opt-card, .egw-btn-primary, .egw-btn-secondary, .topbar-links a,
.scb-cta, .toast-close, .logo-pill, .hero-cta .btn, .cta-btns .btn,
.accordion-header, .tab-btn {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}

/* Minimum 44x44px touch target size for interactive controls */
.btn, button, a.btn, input[type="button"], input[type="submit"], input[type="reset"],
.scb-btn, .cookie-btn-accept, .cookie-btn-policy, .cookie-btn-close,
.wa-float, .egw-trigger-btn, .egw-btn-primary, .egw-btn-secondary,
.nav-hamburger, .hamburger, .filter-pill, .ind-tab, .faq-q {
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
}

/* ── 3. FLEXBOX & GRID CONTAINER OPTIMIZATION ── */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: max(16px, var(--sal, 0px));
  padding-right: max(16px, var(--sar, 0px));
  box-sizing: border-box;
}

/* Ensure grid items never force overflow beyond viewport boundaries */
.stats-grid,
.services-grid,
.products-grid,
.why-grid,
.blog-grid,
.contact-grid,
.footer-grid,
.etb-grid,
.topical-cluster-grid,
.geo-fact-grid,
.roi-wrap,
.mc-stats,
.form-row,
.hero-inner,
.hero-trust,
.hero-cta {
  display: grid;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.stats-grid > *,
.services-grid > *,
.products-grid > *,
.why-grid > *,
.blog-grid > *,
.contact-grid > *,
.footer-grid > *,
.etb-grid > *,
.topical-cluster-grid > *,
.geo-fact-grid > *,
.roi-wrap > *,
.mc-stats > *,
.form-row > *,
.hero-inner > * {
  min-width: 0;
  box-sizing: border-box;
}

/* High-DPI Mobile Screen Typography Adjustments */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  .section-title, .hero-title, .cta-title {
    letter-spacing: -0.015em;
  }
}

/* ─────────────────────────────────────────
   TOPBAR
───────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar {
    padding-top: max(4px, var(--sat, 0px));
    padding-bottom: 4px;
    padding-left: max(16px, var(--sal, 0px));
    padding-right: max(16px, var(--sar, 0px));
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .topbar-inner {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  .topbar-msg {
    font-size: 11.5px;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    height: 22px;
  }
  #rotating-text {
    min-width: 0;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-links {
    gap: 10px;
    font-size: 11px;
    flex-wrap: wrap;
  }
  .topbar-links a {
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  .topbar-links {
    display: none; /* hide on small mobile to save space */
  }
}

/* ─────────────────────────────────────────
   NAVBAR & FIXED-POSITION HAMBURGER MENU
───────────────────────────────────────── */
.site-nav {
  padding-top: var(--sat, 0px);
  padding-left: max(0px, var(--sal, 0px));
  padding-right: max(0px, var(--sar, 0px));
}

@media (max-width: 768px) {
  .nav-inner {
    padding-left: max(16px, var(--sal, 0px));
    padding-right: max(16px, var(--sar, 0px));
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-logo img {
    height: 28px;
    width: auto;
  }
  .nav-logo span {
    font-size: 14px;
  }
  .nav-links {
    display: none !important;
  }
  .nav-cta .btn span {
    display: none; /* hide text, show icon only on small viewports */
  }
  .nav-cta .btn {
    padding: 8px 12px;
    font-size: 13px;
    min-width: 40px;
    justify-content: center;
  }

  /* Fixed Hamburger Toggle Button */
  .nav-hamburger,
  .hamburger {
    display: flex !important;
    flex-shrink: 0;
    position: relative;
    z-index: 10005;
    touch-action: manipulation !important;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 6px;
    background: transparent;
  }

  /* Mobile Fullscreen Fixed Menu Overlay */
  .mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(28, 25, 23, 0.98) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: calc(76px + var(--sat, 0px)) !important;
    padding-bottom: calc(32px + var(--sab, 0px)) !important;
    padding-left: max(20px, var(--sal, 0px)) !important;
    padding-right: max(20px, var(--sar, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .mobile-menu.open,
  .mobile-menu.active {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .mobile-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: clamp(10px, 2.2vh, 14px) 16px !important;
    min-height: 44px !important;
    color: #F4F2EC !important;
    font-weight: 600 !important;
    font-size: clamp(0.9rem, 3.6vw, 1.1rem) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    touch-action: manipulation !important;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-menu a:hover,
  .mobile-menu a:active {
    background: rgba(13, 148, 136, 0.15) !important;
    color: #2DD4BF !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* iPad portrait & landscape link spacing */
  .nav-links {
    gap: 18px;
  }
  .nav-links a {
    font-size: 13px;
    touch-action: manipulation;
  }
}

/* ─────────────────────────────────────────
   HERO SECTION
───────────────────────────────────────── */
@media (max-width: 900px) {
  .hero {
    padding-top: calc(80px + var(--sat, 0px));
    padding-bottom: 48px;
    min-height: auto;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 40px;
    text-align: center;
  }
  .hero-title {
    font-size: clamp(26px, 6vw, 40px) !important;
    line-height: 1.2;
  }
  .hero-desc {
    font-size: 14px;
    line-height: 1.7;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .trust-item {
    font-size: 12px;
  }
}
@media (max-width: 640px) {
  .hero {
    padding-top: calc(70px + var(--sat, 0px));
    padding-left: max(16px, var(--sal, 0px));
    padding-right: max(16px, var(--sar, 0px));
  }
  .hero-title {
    font-size: clamp(24px, 7vw, 32px) !important;
  }
  .hero-badge {
    font-size: 11px;
  }
  .hero-cta {
    flex-direction: column;
    align-items: center;
  }
  .hero-cta .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* Dashboard mockup — prevent overflow */
@media (max-width: 900px) {
  .hero-visual {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  .dashboard-mockup {
    width: 100%;
    font-size: 11px;
  }
  .mockup-bar {
    padding: 8px 12px;
  }
  .mockup-body {
    min-height: 160px;
  }
  .mc-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px;
  }
  .mcs-val {
    font-size: 13px !important;
  }
  .mcs-label {
    font-size: 10px !important;
  }
  .mc-chart {
    height: 60px;
  }
}
@media (max-width: 480px) {
  .dashboard-mockup {
    display: none; /* hide mockup on small phone screens to focus on CTA */
  }
}

/* ─────────────────────────────────────────
   LOGOS / MARQUEE
───────────────────────────────────────── */
@media (max-width: 640px) {
  .logos-section {
    padding: 24px 0;
  }
  .logos-label {
    font-size: 12px;
    margin-bottom: 12px;
    padding: 0 16px;
    text-align: center;
  }
  .logo-pill {
    font-size: 12px;
    padding: 6px 14px;
    white-space: nowrap;
  }
}

/* ─────────────────────────────────────────
   STATS GRID
───────────────────────────────────────── */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
  .stat-num {
    font-size: clamp(28px, 7vw, 40px) !important;
  }
  .stat-label {
    font-size: 13px;
  }
}
@media (max-width: 400px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .stat-card {
    padding: 16px 12px;
  }
}

/* ─────────────────────────────────────────
   SECTION COMMON
───────────────────────────────────────── */
@media (max-width: 768px) {
  .section-eyebrow {
    font-size: 11px;
  }
  .section-title {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    line-height: 1.25;
  }
  .section-desc {
    font-size: 14px;
    line-height: 1.65;
  }
  /* ROI Calculator Mobile */
  .roi-wrap { grid-template-columns: 1fr !important; }
  .roi-metric { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Sticky Consult Bar Mobile */
  .sticky-consult-bar {
    top: calc(64px + var(--sat, 0px));
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    width: calc(100% - 24px);
    max-width: 480px;
    padding: 8px 14px;
    border-radius: 30px;
    z-index: 9980;
  }
  .sticky-consult-bar.scb-visible {
    transform: translateX(-50%) translateY(0);
  }
  .scb-text {
    display: none;
  }

  /* GEO Citation Section Mobile */
  .geo-fact-grid {
    grid-template-columns: 1fr !important;
  }
  .geo-citation-card {
    padding: 24px;
  }
  .geo-cta-link {
    margin-left: 0;
    width: 100%;
    margin-top: 8px;
  }
}
@media (max-width: 640px) {
  section {
    padding-left: max(16px, var(--sal, 0px)) !important;
    padding-right: max(16px, var(--sar, 0px)) !important;
  }
  .container {
    padding-left: max(16px, var(--sal, 0px));
    padding-right: max(16px, var(--sar, 0px));
  }
  .etb-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .topical-cluster-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────
   SERVICES GRID
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
}
@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .service-card:hover, .product-card:hover {
    transform: translateY(-3px) scale(1.01);
  }
  .service-card {
    padding: 20px;
  }
  .sc-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

/* ─────────────────────────────────────────
   PRODUCTS GRID
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
}
@media (max-width: 600px) {
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .product-card {
    padding: 18px;
  }
  .price-tag {
    font-size: 15px;
  }
}

/* ─────────────────────────────────────────
   INDUSTRY TABS & PANELS
───────────────────────────────────────── */
@media (max-width: 900px) {
  .industry-tabs {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }
  .ind-tab {
    font-size: 12px;
    padding: 8px 14px;
    flex-shrink: 0;
  }
}
@media (max-width: 640px) {
  .industry-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .industry-tabs::-webkit-scrollbar {
    display: none;
  }
  .ind-panel-inner {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .ind-visual {
    display: none; /* hide dashboard mock on mobile */
  }
  .ind-content h3 {
    font-size: 20px;
  }
  .ind-features li {
    padding: 12px;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .ind-panel-inner {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────
   WHY US GRID
───────────────────────────────────────── */
@media (max-width: 900px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
}
@media (max-width: 520px) {
  .why-grid {
    grid-template-columns: 1fr !important;
  }
  .why-card {
    padding: 20px;
  }
}

/* ─────────────────────────────────────────
   BLOG GRID
───────────────────────────────────────── */
@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
}
@media (max-width: 560px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .blog-thumb {
    height: 150px;
  }
  .blog-title {
    font-size: 15px;
  }
  .blog-body {
    padding: 16px;
  }
}

/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */
@media (max-width: 640px) {
  .faq-q {
    font-size: 14px;
    padding: 14px 16px;
    line-height: 1.4;
  }
  .faq-a-inner {
    font-size: 13px;
    padding: 0 16px 14px;
  }
}

/* ─────────────────────────────────────────
   CONTACT SECTION
───────────────────────────────────────── */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
  .contact-left {
    order: 1;
  }
  .contact-right {
    order: 2;
  }
}
@media (max-width: 640px) {
  .contact-form {
    padding: 20px 16px;
  }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .contact-info > div {
    font-size: 13px;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom on input focus */
    min-height: 48px;
    padding: 12px 14px;
    box-sizing: border-box;
  }
  .form-group textarea {
    min-height: 110px;
  }
}

/* ─────────────────────────────────────────
   FINAL CTA SECTION & COOKIE BANNER
───────────────────────────────────────── */
@media (max-width: 640px) {
  .cta-section {
    padding: 40px 20px;
    border-radius: 16px;
  }
  .cta-title {
    font-size: clamp(20px, 5.5vw, 28px) !important;
    line-height: 1.3;
  }
  .cta-sub {
    font-size: 13px;
  }
  .cta-btns {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .cta-btns .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  .cookie-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cookie-text  { min-width: unset; }
  .cookie-btns  { width: 100%; justify-content: flex-start; }
  .cookie-btn-accept, .cookie-btn-policy { flex: 1; justify-content: center; max-width: 160px; }
  .cookie-btn-close { margin-left: auto; }
}

/* ─────────────────────────────────────────
   ENTERPRISE GREETING WIDGET & TOASTS
───────────────────────────────────────── */
@media (max-width: 600px) {
  .toast-container {
    top: auto;
    bottom: max(24px, calc(20px + var(--sab, 0px)));
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }
  @keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .enterprise-greeting-widget {
    bottom: calc(12px + var(--sab, 0px));
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    max-height: calc(85vh - var(--sab, 0px));
    overflow-y: auto;
    padding: 18px 16px;
    border-radius: 16px;
  }
  .egw-opt-card {
    padding: 12px 14px;
    min-height: 52px;
  }
  .egw-user-input {
    font-size: 16px !important; /* Prevents iOS auto-zoom on input focus */
    min-height: 76px;
    padding: 10px 12px;
  }
  .egw-btn-primary,
  .egw-btn-secondary {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .footer-brand {
    grid-column: auto;
  }
  .footer-brand p {
    font-size: 13px;
  }
  .footer {
    padding-bottom: calc(28px + var(--sab, 0px));
    padding-left: max(16px, var(--sal, 0px));
    padding-right: max(16px, var(--sar, 0px));
  }
  .footer-col h4 {
    font-size: 12px;
  }
  .footer-col ul li a {
    font-size: 13px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
  }
  .footer-bottom div {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
}

/* ─────────────────────────────────────────
   FLOATING WIDGETS & BUTTONS (SAFE AREA RESPECT)
───────────────────────────────────────── */
.egw-trigger-btn {
  bottom: calc(16px + var(--sab, 0px)) !important;
  right: max(16px, var(--sar, 0px)) !important;
  width: 48px !important;
  height: 48px !important;
  font-size: 1.2rem !important;
  z-index: 99985 !important;
}

.wa-float {
  bottom: calc(72px + var(--sab, 0px)) !important;
  right: max(16px, var(--sar, 0px)) !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  font-size: 1.3rem !important;
  z-index: 99980 !important;
}

.enterprise-greeting-widget {
  bottom: calc(128px + var(--sab, 0px)) !important;
  right: max(12px, var(--sar, 0px)) !important;
  left: max(12px, var(--sal, 0px)) !important;
  width: auto !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  max-height: calc(70vh - var(--sab, 0px)) !important;
  z-index: 99990 !important;
}

/* When Cookie Bar is Visible */
.cookie-bar.show ~ .egw-trigger-btn,
body.cookie-visible .egw-trigger-btn {
  bottom: calc(108px + var(--sab, 0px)) !important;
}

.cookie-bar.show ~ .wa-float,
body.cookie-visible .wa-float {
  bottom: calc(164px + var(--sab, 0px)) !important;
}

.cookie-bar.show ~ .enterprise-greeting-widget,
body.cookie-visible .enterprise-greeting-widget {
  bottom: calc(220px + var(--sab, 0px)) !important;
}

/* ─────────────────────────────────────────
   LOADING SKELETONS & SECTION CTAS
───────────────────────────────────────── */
@media (max-width: 640px) {
  div.loading-skeleton:not(.skeleton-line):not(.skeleton-thumb) {
    height: 180px;
    border-radius: 16px;
  }
  .skeleton-line {
    height: 14px !important;
  }
  .skeleton-line.short {
    height: 12px !important;
  }
  .skeleton-line.title {
    height: 16px !important;
  }
  .skeleton-thumb {
    height: 150px !important;
  }
}
@media (max-width: 480px) {
  .section-cta .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────
   iPAD PORTRAIT  (768px – 900px)
───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 32px;
  }
  .hero-visual {
    max-width: 520px;
    margin: 0 auto;
  }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─────────────────────────────────────────
   iPAD LANDSCAPE (900px – 1180px)
───────────────────────────────────────── */
@media (min-width: 900px) and (max-width: 1180px) {
  .hero-inner {
    gap: 32px;
  }
  .hero-title {
    font-size: clamp(28px, 4vw, 46px) !important;
  }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr !important;
    gap: 24px;
  }
}

/* ─────────────────────────────────────────
   iPAD PRO LANDSCAPE (1180px+)
───────────────────────────────────────── */
@media (min-width: 1180px) {
  .blog-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ─────────────────────────────────────────
   SAFARI-SPECIFIC FIXES
───────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  .hero-cta { gap: 10px; }
  .hero-trust { gap: 8px; }
  .cta-btns { gap: 10px; }
  .hero { min-height: -webkit-fill-available; }
}

@supports not (backdrop-filter: blur(1px)) {
  .site-nav.scrolled { background: rgba(5, 11, 20, 0.97) !important; }
  .mobile-menu { background: rgba(5, 11, 20, 0.99) !important; }
}

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ─────────────────────────────────────────
   STUDY CASES PAGE & ROI WIDGET (MOBILE & TABLET)
───────────────────────────────────────── */
@media (max-width: 900px) {
  /* List Hero */
  .list-hero {
    padding: 28px 0 20px !important;
    text-align: center;
  }
  .list-title {
    font-size: clamp(1.75rem, 5.5vw, 2.5rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }
  .list-desc {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }
  .hero-stats {
    gap: 16px !important;
    justify-content: center;
  }
  .hero-stat b {
    font-size: 1.4rem !important;
  }
  .hero-stat span {
    font-size: 0.68rem !important;
  }

  /* ROI Widget Card */
  .roi-widget-card {
    padding: 20px 16px !important;
    margin: 16px 0 28px !important;
    border-left-width: 4px !important;
  }
  .roi-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
  }
  .roi-header h2 {
    font-size: 1.15rem !important;
  }
  .roi-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .roi-results-box {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 16px 12px !important;
    gap: 12px !important;
  }
  .roi-res-val {
    font-size: clamp(1.2rem, 4.5vw, 1.5rem) !important;
  }
  .roi-res-lbl {
    font-size: 0.65rem !important;
  }

  /* Toolbar & Search */
  .sc-toolbar {
    position: sticky !important;
    top: 56px !important;
    padding: 10px 0 !important;
    margin-bottom: 24px !important;
    z-index: 90 !important;
    background: rgba(244, 242, 236, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
  .toolbar-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .sc-search {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .sc-search input {
    font-size: 16px !important; /* Prevent iOS zoom */
    min-height: 44px !important;
    padding: 10px 14px 10px 36px !important;
  }
  .sc-sort {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.85rem !important;
  }
  .toolbar-count {
    margin-left: 0 !important;
    text-align: right !important;
    font-size: 0.75rem !important;
  }
  .filter-scroll-wrapper {
    margin-top: 8px !important;
    padding-bottom: 6px !important;
    gap: 6px !important;
  }
  .filter-pill {
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
    min-height: 40px !important;
  }

  /* Featured Strip */
  .featured-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .featured-card {
    grid-template-columns: 1fr !important;
  }
  .fc-img {
    min-height: 180px !important;
    max-height: 220px !important;
  }
  .fc-body {
    padding: 16px !important;
  }
  .fc-body h3 {
    font-size: 1.1rem !important;
  }

  /* Cases Grid */
  .cases-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .case-card {
    border-radius: 8px !important;
  }
  .cc-thumb {
    height: 180px !important;
  }
  .cc-body {
    padding: 16px !important;
  }
  .cc-title {
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
  }
  .cc-metrics {
    gap: 6px !important;
  }
  .cc-metric {
    padding: 6px 8px !important;
    min-width: 70px !important;
  }
  .cc-metric-val {
    font-size: 0.95rem !important;
  }

  /* Detail View Mobile */
  .dh {
    padding: 20px 0 0 !important;
  }
  .dh-title {
    font-size: clamp(1.5rem, 5.5vw, 2.2rem) !important;
    line-height: 1.25 !important;
  }
  .dh-sub {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    margin-bottom: 18px !important;
  }
  .dh-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .dh-stat {
    padding: 12px 10px !important;
    min-width: 0 !important;
  }
  .dh-stat-val {
    font-size: 1.35rem !important;
  }
  .dh-stat-lbl {
    font-size: 0.65rem !important;
  }
  .dh-ctas {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .dh-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
  .dh-hero-img {
    max-height: 240px !important;
    margin: 18px 0 8px !important;
    border-radius: 6px !important;
  }

  .detail-layout {
    grid-template-columns: 1fr !important;
    padding: 20px 16px 40px !important;
    gap: 28px !important;
  }
  .detail-sidebar {
    position: static !important;
    width: 100% !important;
  }

  .sc-section {
    padding: 24px 0 !important;
  }
  .problem-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .results-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .process-step {
    grid-template-columns: 40px 1fr !important;
    gap: 12px !important;
  }
  .process-step-circle {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.85rem !important;
  }
  .process-step:not(:last-child)::before {
    left: 18px !important;
    top: 40px !important;
  }
  .process-step-body {
    padding: 14px !important;
  }

  .share-modal {
    padding: 20px 16px !important;
    margin: 16px !important;
  }

  /* Fixed Bottom Navigation Bar for High-Intent Visitors */
  body {
    padding-bottom: 64px !important;
  }
  .sc-mobile-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 62px !important;
    background: rgba(28, 25, 23, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    z-index: 9999 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
  }
  .sc-mobile-bottom-bar .btn {
    flex: 1 !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    padding: 9px 10px !important;
    min-height: 42px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .sc-mobile-bottom-bar .btn-primary {
    background: linear-gradient(135deg, #0d9488, #0f766e) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(13, 148, 136, 0.4) !important;
  }
  .sc-mobile-bottom-bar .btn-outline {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f4f2ec !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
  }
}

/* Image Fade-In & Shimmer Placeholder */
.cc-thumb, .fc-img, .dh-hero-img-wrap {
  position: relative;
  background: var(--surface-2, #f5f3ef);
  overflow: hidden;
}
.cc-thumb img, .fc-img img, .dh-hero-img {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s ease-out;
  will-change: opacity, transform;
}
.cc-thumb img.img-loaded, .fc-img img.img-loaded, .dh-hero-img.img-loaded {
  opacity: 1;
}

@media (min-width: 901px) {
  .sc-mobile-bottom-bar {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .roi-results-box {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .dh-stats {
    grid-template-columns: 1fr !important;
  }
  .results-metrics {
    grid-template-columns: 1fr !important;
  }
}