/* ══ GLOBAL BENGALI TYPOGRAPHY & PRE ADJUSTMENTS ══ */
h1, .hero h1, .inner-hero-content h1 {
  line-height: 1.35 !important;
}
h2, .section-title {
  line-height: 1.3 !important;
}
h3 {
  line-height: 1.3 !important;
}
h4 {
  line-height: 1.35 !important;
}

#consoleOutput {
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-wrap: break-word !important;
}

/* ══ RESPONSIVE OVERRIDES ══ */

@media (max-width: 1100px) {
  /* Prevent navigation links wrapping */
  .nav-links {
    gap: 1.25rem;
  }
}

@media (max-width: 1024px) {
  /* Adjust section spacing for medium screens */
  section {
    padding: 5rem 0;
  }
  .hero {
    padding-top: 90px;
  }
}

@media (max-width: 992px) {
  /* Navigation toggles (Collapses at standard tablet width to prevent wrapping/crowding) */
  nav .nav-links {
    display: none;
  }
  nav .menu-toggle {
    display: flex;
  }

  /* Mobile menu overlay redesign to match user's left-aligned list mockup */
  .mobile-menu-overlay {
    background: #FAF8F5 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 80px 1.25rem 2rem !important; /* Start below header */
  }
  .mobile-menu-overlay::before,
  .mobile-menu-overlay::after {
    display: none !important; /* Remove background glow circles */
  }
  .mobile-menu-inner {
    max-width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
  }
  .mobile-menu-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0 !important;
    width: 100% !important;
    flex-grow: 0 !important;
  }
  .mobile-link {
    font-family: var(--font-bangla-heading), sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    padding: 0.9rem 0 !important;
    border-bottom: 1px solid var(--border) !important;
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    opacity: 1 !important;
    transform: none !important;
    transition: color 0.2s ease !important;
  }
  .mobile-link.active {
    color: #B55209 !important; /* Mockup active color */
  }
  .mobile-link:not(.mobile-cta):hover {
    color: #B55209 !important;
  }

  /* Dropdown styling */
  .mobile-dropdown {
    width: 100% !important;
  }
  .mobile-dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.35rem !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    padding: 0.9rem 0 !important;
    border-bottom: 1px solid var(--border) !important;
    font-family: var(--font-bangla-heading), sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    text-align: left !important;
    cursor: pointer !important;
    outline: none !important;
    transition: color 0.2s ease !important;
  }
  .mobile-dropdown-toggle.expanded {
    color: var(--text) !important;
  }
  .mobile-dropdown-toggle .dropdown-caret {
    width: 1.15rem !important;
    height: 1.15rem !important;
    transition: transform 0.3s ease !important;
    color: var(--text2) !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
  .mobile-dropdown-toggle.expanded .dropdown-caret {
    transform: rotate(180deg) !important;
  }
  .mobile-dropdown-menu {
    display: none;
    flex-direction: column !important;
    width: 100% !important;
    padding-left: 1.5rem !important; /* Indent sub-links */
  }
  .mobile-dropdown-menu.open {
    display: flex !important;
  }
  .mobile-sub-link {
    font-family: var(--font-bangla-heading), sans-serif !important;
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    color: var(--text2) !important;
    padding: 0.8rem 0 !important;
    border-bottom: 1px solid rgba(226, 222, 214, 0.6) !important;
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
  }
  .mobile-sub-link:hover, .mobile-sub-link.active {
    color: #B55209 !important;
  }

  /* Bottom button style */
  .mobile-menu-btn-wrapper {
    width: 100% !important;
    padding: 1.5rem 0 0.5rem 0 !important;
    margin-top: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .mobile-whatsapp-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    background-color: #B55209 !important; /* Rich rust-orange color */
    color: #FFFFFF !important;
    width: 100% !important;
    padding: 0.85rem 1.5rem !important;
    border-radius: 100px !important; /* Pill shape */
    font-family: var(--font-bangla-heading), sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(181, 82, 9, 0.18) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
  }
  .mobile-whatsapp-btn:hover, .mobile-whatsapp-btn:active {
    background-color: #9c4305 !important;
    box-shadow: 0 6px 16px rgba(181, 82, 9, 0.28) !important;
  }
  .mobile-whatsapp-btn .whatsapp-icon {
    width: 1.35rem !important;
    height: 1.35rem !important;
    fill: currentColor !important;
    display: inline-block !important;
  }
  .mobile-menu-footer {
    display: none !important;
  }

  /* telemetry-grid overrides */
  .telemetry-grid {
    flex-direction: column;
    gap: 2.2rem;
    margin-top: 2.5rem; /* Creates clean gap between badges and cards on mobile/tablet */
  }

  /* Telemetry connector mobile overrides (Clean vertical line instead of rotated horizontal) */
  .telemetry-connector {
    transform: none !important;
    width: 2px !important;
    height: 45px !important;
    margin: 1rem auto !important;
    background: linear-gradient(180deg, var(--border), var(--text3)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }
  .telemetry-connector .connector-line {
    display: none !important;
  }
  .telemetry-connector .connector-arrow {
    position: absolute !important;
    bottom: -6px !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-left: 4.5px solid transparent !important;
    border-right: 4.5px solid transparent !important;
    border-top: 6px solid var(--text3) !important;
    border-bottom: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Telemetry badges mobile wrap and centering */
  .telemetry-wrapper {
    text-align: center;
    padding-top: 0.5rem;
    margin-top: 0rem;
  }
  
  .telemetry-badge {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0.35rem;
    display: inline-flex;
    animation: none !important;
    transform: none !important;
    box-shadow: var(--shadow-sm);
  }
}

@media (max-width: 900px) {
  /* Hero Section Stacking (Keep the beautiful dashboard visual visible!) */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  
  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  
  .btn-group {
    justify-content: center;
  }
  
  .hero-visual {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }

  /* Stats Section layout */
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Process Section spacing */
  .process-steps::before {
    display: none;
  }
  .process-steps {
    row-gap: 2rem;
  }

  /* Audit Section stacked spacing */
  .audit-inner {
    grid-template-columns: 1fr;
    padding: 2.5rem;
    gap: 2.5rem;
  }

  /* Footer Layout for tablets */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }

  /* subpages grid stacking */
  .about-blueprint-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .showcase-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .showcase-sidebar {
    position: relative;
    top: 0;
  }

  /* Facebook Ads Page Mobile preview container stacking */
  .u-style-99 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .phone-frame-mock {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  /* Smaller vertical gaps on mobile */
  section {
    padding: 4rem 0;
  }
  .section-head {
    margin-bottom: 2.5rem;
  }
  .section-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }
  .hero h1 {
    font-size: clamp(2rem, 7vw, 3rem);
  }
  .hero-sub {
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
  }
  .stats {
    padding: 2rem 5%;
  }

  /* ecosystem-step overrides */
  .ecosystem-step {
    flex-direction: column;
    gap: 1rem;
  }
  .step-connector {
    display: none;
  }

  /* Partner strip centering */
  .partner-inner {
    align-items: center;
    text-align: center;
  }

  /* Prevent comparison table squishing */
  .comparison-table {
    min-width: 650px;
  }
  .comparison-box {
    padding: 1.25rem;
  }

  /* Calendly scheduler widget collapse at tablet dimensions */
  .calendly-body {
    grid-template-columns: 1fr;
    height: auto;
  }
  .calendly-mock {
    height: auto;
  }
  .calendly-calendar {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 600px) {
  /* Clean stacking for mobile */
  .stats-inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .stats-inner div {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1.25rem;
  }
  .stats-inner div:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

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

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

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  
  .audit-inner {
    padding: 1.75rem;
  }

  /* Step details grid collapse */
  .step-details-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Event tracking console sandbox mobile overrides */
  .sandbox-box {
    padding: 1.25rem !important;
  }
  .sandbox-triggers {
    min-width: 0 !important;
  }
  .sandbox-btn {
    padding: 0.85rem 1rem !important;
    font-size: 0.8rem !important;
    white-space: normal !important; /* Enable text wrapping in buttons */
    text-align: left !important;
  }
  .console-mock {
    padding: 1rem !important;
    min-width: 0 !important;
  }
  .console-body {
    font-size: 0.72rem !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
  }

  /* Contact page WhatsApp & Email links column stack on mobile */
  .u-style-81 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }
}

@media (max-width: 480px) {
  /* Micro viewport adjustments */
  .metric-pill {
    padding: 0.5rem;
  }
  .metric-pill .val {
    font-size: 1.05rem;
  }
  .metric-pill .lbl {
    font-size: 0.55rem;
  }
  .roas-big {
    font-size: 3rem;
  }

  /* Search Ad sitelinks collapse */
  .search-ad-sitelinks {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding-left: 0.5rem;
  }

  /* Case Studies metric card grid collapse */
  .metric-card-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Checklist grid overflow prevention */
  .premium-checklist-grid {
    grid-template-columns: 1fr;
  }

  /* Blog grid overflow prevention */
  .magazine-grid {
    grid-template-columns: 1fr;
  }

  /* General grid collapse for mobile min-width issues */
  .services-grid {
    grid-template-columns: 1fr;
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  /* Phone Frame width adjustments on small viewports */
  .phone-frame-mock {
    width: 270px !important;
    height: 540px !important;
  }
}