/* Developed by John Matthew */
/* ============================================================
   AIM TECH AI :: MOBILE
   ------------------------------------------------------------
   Modern polished mobile experience that matches the desktop
   aesthetic — soft rounded corners, glass cards, Outfit
   display, clean spacing. Activates ≤768px only.
   ============================================================ */

@media (max-width: 768px) {

  /* =========================================================
     0. Page surface — kill horizontal overflow
     ========================================================= */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body * { max-width: 100%; }
  body {
    box-sizing: border-box;
    background-color: #08090c;
  }
  [data-theme="light"] body { background-color: #f4f5f8; }
  .noise-overlay, .anchor-fade { display: none !important; }
  .scroll-indicator { display: none !important; }
  .skip-link { display: none !important; }

  /* "Schedule a Consultation" arrow-cta — edge-to-edge on mobile so the
     full label fits without truncation. We let the row breathe to the
     viewport edges (minus 16px gutters) and tighten the padding around
     the icon so the text has the room it needs. */
  .arrow-cta {
    display: flex !important;
    width: calc(100vw - 32px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    height: 60px !important;
    padding: 0.25rem 60px 0.25rem 1.25rem !important;  /* right pad = icon width + gap */
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .arrow-cta .arrow-label {
    flex: 1 1 auto !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
    min-width: 0 !important;
  }
  .arrow-cta .arrow-icon {
    width: 46px !important;
    height: 46px !important;
    right: 7px !important;
    font-size: 1rem !important;
  }
  /* Disable the slide-on-hover animation on touch — it looks broken on tap */
  .arrow-cta:hover {
    padding: 0.25rem 60px 0.25rem 1.25rem !important;
  }
  .arrow-cta:hover .arrow-icon {
    right: 7px !important;
    transform: translateY(-50%) !important;
  }
  /* Very small screens (≤360px): shrink label slightly so it still fits */
  @media (max-width: 360px) {
    .arrow-cta { font-size: 0.88rem !important; padding-left: 1rem !important; padding-right: 56px !important; }
    .arrow-cta .arrow-icon { width: 42px !important; height: 42px !important; right: 6px !important; }
  }

  /* Contact section — left-align Headquarters / Phone / Website
     beneath the CTA so it scans as a clean list on mobile. */
  #contact { text-align: left !important; }
  #contact .contact-card { text-align: left !important; }
  #contact .contact-card h2,
  #contact .contact-card p { text-align: left !important; }
  .contact-info {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
    max-width: 420px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .contact-item {
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    width: 100% !important;
  }
  .contact-item-text { text-align: left !important; }
  .contact-item-text small { font-size: 0.7rem !important; letter-spacing: 1.4px !important; }
  .contact-item-text p { font-size: 0.88rem !important; }

  /* Community section — stack the email form + tighten typography for mobile */
  #community .community-card { padding: 2rem 1.4rem !important; }
  #community .community-icon { width: 64px !important; height: 64px !important; border-radius: 18px !important; }
  #community .community-icon svg { width: 36px !important; height: 36px !important; }
  #community h2 { font-size: 1.5rem !important; line-height: 1.2 !important; }
  #community p { font-size: 0.9rem !important; }
  .community-form {
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin: 1.2rem auto 0.8rem !important;
    width: 100% !important;
  }
  .community-form input[type="email"],
  .community-submit {
    width: 100% !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.95rem !important;
    justify-content: center !important;
  }
  .community-meta {
    gap: 0.6rem 1rem !important;
    font-size: 0.62rem !important;
    letter-spacing: 1.2px !important;
  }

  /* =========================================================
     0a. Parallax video background — full-screen on mobile.
     The JS spring-scrubs the video as the user scrolls. We
     pin it as a fixed full-viewport layer BEHIND everything
     using negative z-index so it doesn't disturb the normal
     stacking of the dock, sheet, nav, etc.
     ========================================================= */
  #parallax-video-bg,
  .blog-video-bg {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;       /* mobile-toolbar-aware */
    min-height: 100lvh !important;   /* fills behind toolbars */
    z-index: -1 !important;          /* behind everything */
    pointer-events: none !important;
    overflow: hidden !important;
    transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  #parallax-video-bg video,
  .blog-video-bg video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: translateZ(0);
    will-change: opacity;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  /* Body needs to be transparent so the negative-z video shows through */
  body { background-color: transparent !important; }

  /* =========================================================
     1. Top bar — clean nav with logo + theme toggle
     ========================================================= */
  nav#navbar {
    padding: 14px 18px !important;
    background: linear-gradient(to bottom, rgba(8,10,16,0.8), rgba(8,10,16,0.35) 70%, transparent) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: none !important;
  }
  [data-theme="light"] nav#navbar {
    background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0.5) 70%, transparent) !important;
  }
  nav#navbar.scrolled {
    padding: 10px 18px !important;
    background: rgba(8,10,16,0.94) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  [data-theme="light"] nav#navbar.scrolled {
    background: rgba(252,252,253,0.96) !important;
    border-bottom-color: rgba(0,0,0,0.06) !important;
  }
  nav#navbar .nav-links,
  nav#navbar .mobile-toggle,
  nav#navbar .lang-selector,
  nav#navbar .nav-cta { display: none !important; }
  nav#navbar .nav-actions { gap: 8px !important; }

  /* Community icon button — visible on mobile, sits before theme toggle */
  nav#navbar .nav-community-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important; height: 36px !important;
    border-radius: 10px !important;
    color: var(--clr-primary, #0FC1B7) !important;
    background: rgba(15,193,183,0.10) !important;
    border: 1px solid rgba(15,193,183,0.28) !important;
    text-decoration: none !important;
    transition: background 0.15s, transform 0.12s !important;
    flex-shrink: 0 !important;
  }
  nav#navbar .nav-community-btn:hover { background: rgba(15,193,183,0.18) !important; }
  nav#navbar .nav-community-btn:active { transform: scale(0.94) !important; }
  [data-theme="light"] nav#navbar .nav-community-btn {
    color: #0A9B92 !important;
    background: rgba(15,193,183,0.10) !important;
    border-color: rgba(15,193,183,0.32) !important;
  }

  /* Logo + LIVE pill on a single row */
  nav#navbar .nav-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  nav#navbar .nav-logo img { height: 28px !important; }
  nav#navbar .nav-logo::after {
    content: '● LIVE';
    display: inline-flex !important;
    align-items: center !important;
    font-family: 'Space Mono', ui-monospace, monospace !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    letter-spacing: 1.5px !important;
    color: #0FC1B7 !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(15,193,183,0.3) !important;
    border-radius: 999px !important;
    background: rgba(15,193,183,0.06) !important;
    flex-shrink: 0 !important;
  }

  /* =========================================================
     2. Hero — modern, rounded, premium
     ========================================================= */
  .hero.hero-split {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Sits below the navbar with a comfortable breathing gap — clears
       the scrolled navbar (~56px) plus ~24px of visual breathing room. */
    padding: calc(80px + env(safe-area-inset-top, 0)) 22px 16px !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    justify-content: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow-x: hidden !important;
  }
  .content {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .hero.hero-split .hero-text-col {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero.hero-split .hero-sub-header {
    font-family: var(--font-mono, 'Space Mono'), monospace !important;
    font-size: 10px !important;
    letter-spacing: 3px !important;
    margin-bottom: 10px !important;
    color: var(--clr-primary, #0FC1B7) !important;
    text-transform: uppercase !important;
    display: block !important;
  }
  .hero.hero-split h1,
  .hero h1 {
    font-family: 'Outfit', sans-serif !important;
    /* Compressed scale — fits 3 lines + sub + 3 buttons + dock on a 6.1" phone */
    font-size: clamp(34px, 9.5vw, 50px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    color: var(--clr-text) !important;
  }
  .hero.hero-split .hero-sub,
  .hero .hero-sub {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin: 0 0 16px !important;
    max-width: 100% !important;
    color: var(--clr-text-dim) !important;
    font-weight: 400 !important;
  }
  /* ---------- Hero buttons — clean modern stacked CTAs ---------- */
  .hero.hero-split .hero-buttons,
  .hero .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  /* Hide ALL the desktop "pill expansion" inner spans so they don't
     paint a stacked rectangle on top of our mobile button styling */
  .hero.hero-split .hero-buttons .gradient-btn .gbtn-bg,
  .hero .hero-buttons .gradient-btn .gbtn-bg,
  .hero.hero-split .hero-buttons .gradient-btn .gbtn-glow,
  .hero .hero-buttons .gradient-btn .gbtn-glow,
  .hero.hero-split .hero-buttons .gradient-btn .gbtn-icon,
  .hero .hero-buttons .gradient-btn .gbtn-icon { display: none !important; }
  /* The button itself owns its visual */
  .hero.hero-split .hero-buttons .gradient-btn,
  .hero .hero-buttons .gradient-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 18px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 22px !important;
    min-height: 44px !important;
    border: none !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #0FC1B7, #0A9B92) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px -8px rgba(15,193,183,0.55) !important;
    transition: transform .12s !important;
  }
  /* ----------------------------------------------------------------------
     Sequential color wave — each button briefly turns teal (the AIM
     accent), then returns to its base white/black. Cycles top→bottom
     forever (4 buttons × 2s each = 8s loop).

     We flip CSS custom properties so the swap "wins" against the
     `background: var(--btn-bg) !important` rule above (animations
     can't override `!important` directly, but they CAN change the
     value of a custom property the rule is reading from).
     ---------------------------------------------------------------------- */
  @keyframes heroBtnWaveDark {
    0%, 5%, 30%, 100% {
      --btn-bg: #ffffff;
      --btn-fg: #0a0a0a;
      --btn-shadow: 0 6px 18px -8px rgba(0,0,0,0.45);
    }
    10%, 25% {
      --btn-bg: #0FC1B7;
      --btn-fg: #ffffff;
      --btn-shadow:
        0 0 0 2px rgba(15,193,183,0.55),
        0 10px 30px -6px rgba(15,193,183,0.65);
    }
  }
  @keyframes heroBtnWaveLight {
    0%, 5%, 30%, 100% {
      --btn-bg: #0a0a0a;
      --btn-fg: #ffffff;
      --btn-shadow: 0 6px 18px -8px rgba(0,0,0,0.4);
    }
    10%, 25% {
      --btn-bg: #0FC1B7;
      --btn-fg: #ffffff;
      --btn-shadow:
        0 0 0 2px rgba(15,193,183,0.55),
        0 10px 30px -6px rgba(15,193,183,0.65);
    }
  }

  .hero.hero-split .hero-buttons .gradient-btn,
  .hero .hero-buttons .gradient-btn {
    animation: heroBtnWaveDark 8s linear infinite;
    transition: transform .12s !important;
  }
  [data-theme="light"] .hero.hero-split .hero-buttons .gradient-btn,
  [data-theme="light"] .hero .hero-buttons .gradient-btn {
    animation-name: heroBtnWaveLight;
  }
  /* Stagger by 2s per button — top→bottom wave (4 buttons, 8s cycle) */
  .hero.hero-split .hero-buttons .gradient-btn:nth-child(1),
  .hero .hero-buttons .gradient-btn:nth-child(1) { animation-delay: 0s; }
  .hero.hero-split .hero-buttons .gradient-btn:nth-child(2),
  .hero .hero-buttons .gradient-btn:nth-child(2) { animation-delay: 2s; }
  .hero.hero-split .hero-buttons .gradient-btn:nth-child(3),
  .hero .hero-buttons .gradient-btn:nth-child(3) { animation-delay: 4s; }
  .hero.hero-split .hero-buttons .gradient-btn:nth-child(4),
  .hero .hero-buttons .gradient-btn:nth-child(4) { animation-delay: 6s; }

  /* Press feedback */
  .hero.hero-split .hero-buttons .gradient-btn:active,
  .hero .hero-buttons .gradient-btn:active { transform: scale(0.97) !important; }

  /* Respect users who asked to reduce motion */
  @media (prefers-reduced-motion: reduce) {
    .hero.hero-split .hero-buttons .gradient-btn,
    .hero .hero-buttons .gradient-btn { animation: none !important; }
  }
  .hero.hero-split .hero-buttons .gradient-btn .gbtn-label,
  .hero .hero-buttons .gradient-btn .gbtn-label {
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    transition: none !important;
  }
  /* All hero buttons now share the same color scheme so the wave looks
     uniform — only the active button is teal at any moment. Defaults:
       - Dark mode → white pill, black text
       - Light mode → black pill, white text
     We pipe the colors through CSS custom properties so the keyframe
     animation can flip them without fighting `!important`. */
  .hero.hero-split .hero-buttons .gradient-btn,
  .hero .hero-buttons .gradient-btn {
    --btn-bg: #ffffff;
    --btn-fg: #0a0a0a;
    --btn-shadow: 0 6px 18px -8px rgba(0,0,0,0.45);
    background: var(--btn-bg) !important;
    background-image: none !important;
    color: var(--btn-fg) !important;
    border: none !important;
    box-shadow: var(--btn-shadow) !important;
  }
  [data-theme="light"] .hero.hero-split .hero-buttons .gradient-btn,
  [data-theme="light"] .hero .hero-buttons .gradient-btn {
    --btn-bg: #0a0a0a;
    --btn-fg: #ffffff;
    --btn-shadow: 0 6px 18px -8px rgba(0,0,0,0.4);
  }
  .hero.hero-split .hero-chat-col,
  .hero-chat-col { display: none !important; }

  /* =========================================================
     3. Page-hero (sub-pages)
     ========================================================= */
  .page-hero {
    padding: calc(110px + env(safe-area-inset-top, 0)) 22px 56px !important;
    text-align: left !important;
    position: relative;
  }
  .page-hero .breadcrumb {
    font-family: var(--font-mono, 'Space Mono'), monospace !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    margin-bottom: 16px !important;
    color: var(--clr-text-dim) !important;
    text-transform: uppercase !important;
  }
  .page-hero h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(36px, 10vw, 52px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 16px !important;
    font-weight: 800 !important;
  }
  .page-hero .hero-sub {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* =========================================================
     4. Sections — modern spacing
     ========================================================= */
  section, .page-section, .snap-section {
    padding: 64px 22px !important;
    min-height: auto !important;
  }
  .section-label {
    font-family: var(--font-mono, 'Space Mono'), monospace !important;
    font-size: 10.5px !important;
    letter-spacing: 3px !important;
    margin-bottom: 14px !important;
    color: var(--clr-primary, #0FC1B7) !important;
    text-transform: uppercase !important;
    display: inline-block !important;
  }
  .section-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(22px, 7.2vw, 36px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 16px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .section-desc {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 28px !important;
    color: var(--clr-text-dim) !important;
  }

  /* =========================================================
     5. Cards — soft glass, rounded, modern
     ========================================================= */
  .services-grid,
  .feature-grid,
  .why-grid,
  .team-grid,
  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 24px !important;
  }
  .services-grid > a, .services-grid > div,
  .feature-grid > div,
  .why-grid > div,
  .team-grid > div,
  .values-grid > div,
  .glass-card {
    padding: 26px 22px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(20,28,44,0.6), rgba(14,18,26,0.5)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  }
  [data-theme="light"] .services-grid > a,
  [data-theme="light"] .services-grid > div,
  [data-theme="light"] .feature-grid > div,
  [data-theme="light"] .why-grid > div,
  [data-theme="light"] .team-grid > div,
  [data-theme="light"] .values-grid > div,
  [data-theme="light"] .glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65)) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  }
  .glass-card h3, .feature-card h3,
  .services-grid h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
  }
  .glass-card p, .feature-card p,
  .services-grid p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
  .service-tag, .service-tags .service-tag {
    font-family: var(--font-mono, 'Space Mono'), monospace !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: rgba(15,193,183,0.12) !important;
    color: #0FC1B7 !important;
    border: 1px solid rgba(15,193,183,0.25) !important;
  }

  /* =========================================================
     6. Stats bar — modern panels
     ========================================================= */
  .stats-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .stats-bar > div[style*="display:none"],
  .stats-bar > div[style*="display: none"] { display: none !important; }
  .stats-bar .stat-item {
    padding: 22px 16px !important;
    border-radius: 14px !important;
  }
  .stats-bar .stat-number { font-size: 32px !important; }
  .stats-bar .stat-label { font-size: 11px !important; letter-spacing: 1.5px !important; }

  /* =========================================================
     7. Footer — clean stack
     ========================================================= */
  #footer {
    padding: 56px 22px 110px !important;
  }
  #footer > div[style*="grid-template-columns:1fr 2fr"],
  #footer > div[style*="grid-template-columns: 1fr 2fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    text-align: left !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  #footer .footer-logo img { height: 32px !important; }
  #footer div[style*="grid-template-columns:repeat(4,1fr)"],
  #footer div[style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
    text-align: left !important;
  }
  #footer .footer-links { gap: 10px !important; }
  #footer .footer-links a { font-size: 13.5px !important; }
  #footer small { font-size: 9.5px !important; letter-spacing: 2.5px !important; }

  /* =========================================================
     8. Forms — bigger touch targets, rounded
     ========================================================= */
  input, textarea, select, button { font-size: 16px !important; }
  .form-group input, .form-group textarea {
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }

  .book-shell {
    padding: 24px 18px !important;
    max-width: 100% !important;
    margin: 0 16px !important;
    border-radius: 18px !important;
  }
  .cal-grid { gap: 4px !important; }
  .cal-day { font-size: 14px !important; border-radius: 8px !important; }

  .back-link { display: none !important; }
  .glow-divider { margin: 18px 0 !important; height: 1px !important; }

  body::after {
    content: '';
    display: block;
    height: calc(82px + env(safe-area-inset-bottom, 0));
    pointer-events: none;
  }

  #aim-dev-indicator { bottom: calc(94px + env(safe-area-inset-bottom, 0)) !important; }

  /* Featured Projects orbital — fit mobile */
  .orbital {
    height: 440px !important;
    margin-top: 1.4rem !important;
  }
  .orbital-stage {
    width: 320px !important;
    height: 320px !important;
    max-width: 86vw !important;
    max-height: 86vw !important;
  }
  .orbital-node { width: 64px !important; height: 64px !important; font-size: 10px !important; }
  .orbital-node img, .orbital-node svg { width: 28px !important; height: 28px !important; }
  .orbital-core { width: 90px !important; height: 90px !important; }
  .orbital-hint { font-size: 10px !important; letter-spacing: 1.5px !important; margin-top: .8rem !important; }

  /* Featured Projects: when a node is clicked, the .node-card opens at the
     node's orbit position and overflows the viewport. Pin it to the bottom
     of the orbital container as a centered popover instead. */
  .orbital { position: relative !important; overflow: visible !important; }
  .orbital-node .node-card {
    /* Detach from the rotating node — fix to the orbital container */
    position: fixed !important;
    top: auto !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important; /* clear the dock */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 24px) !important;
    max-width: 380px !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    z-index: 9000 !important;
    padding: 1rem 1.1rem !important;
    font-size: 0.82rem !important;
    box-sizing: border-box !important;
  }
  /* Hide the little connector line that points back at the node — pointless
     once the card is detached and pinned to the bottom. */
  .orbital-node .node-card::before { display: none !important; }
  /* Compact the inner typography so more fits without scrolling. */
  .orbital-node .node-card h4 { font-size: 0.95rem !important; margin: 0.4rem 0 !important; line-height: 1.25 !important; }
  .orbital-node .node-card p { font-size: 0.8rem !important; line-height: 1.5 !important; }
  .orbital-node .node-card .node-links { margin-top: 0.6rem !important; }
  .orbital-node .node-link-pill { font-size: 0.72rem !important; padding: 0.3rem 0.55rem !important; }

  /* Backdrop dim when a card is open — added via the .active class on the
     parent node. Pure CSS, no JS changes needed. */
  .orbital-node.active .node-card { animation: nodeCardIn 0.25s cubic-bezier(0.16,1,0.3,1); }
  @keyframes nodeCardIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  /* Marquee — full-bleed, no curve on the wrap */
  .marquee-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: 1.4rem !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 12px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  [data-theme="light"] .marquee-wrap {
    border-top-color: rgba(0,0,0,0.06) !important;
    border-bottom-color: rgba(0,0,0,0.06) !important;
  }
  .marquee-track { gap: 1.2rem !important; animation-duration: 30s !important; }
  .marquee-item {
    font-size: 11px !important;
    padding: 6px 14px !important;
    letter-spacing: 1.2px !important;
    border-radius: 999px !important;
  }

  .industry-grid, .trust-grid, .brands-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .industry-item, .trust-item, .brand-item {
    padding: 14px !important;
    font-size: 12.5px !important;
  }

  /* Testimonial stack */
  .tstack-stage {
    width: 88vw !important;
    max-width: 320px !important;
    height: 380px !important;
    margin: 1.6rem auto 0 !important;
  }
  .tstack-card {
    width: 88vw !important;
    max-width: 320px !important;
    height: 380px !important;
    padding: 1.4rem 1.2rem !important;
    border-radius: 18px !important;
    gap: .8rem !important;
  }
  .tstack-card .tstack-quote, .tstack-card blockquote, .tstack-card p {
    font-size: 13.5px !important; line-height: 1.55 !important;
  }
  .tstack-card .tstack-name, .tstack-card cite { font-size: 12.5px !important; }
  .tstack-card .tstack-stars, .tstack-card .stars { font-size: 14px !important; }
  .tstack-card.front  { transform: translate(-12px, -8px)  scale(1)    rotate(2deg)  !important; }
  .tstack-card.middle { transform: translate(  0px,  0px)  scale(0.94) rotate(0deg)  !important; }
  .tstack-card.back   { transform: translate( 12px,  8px)  scale(0.88) rotate(-2deg) !important; }
  .tstack-dots, .tstack-pagination { margin-top: 1.2rem !important; gap: 7px !important; }
}

/* ============================================================
   BOTTOM DOCK — modern glass nav
   ============================================================ */
#mobile-dock { display: none; }
@media (max-width: 768px) {
  #mobile-dock {
    display: flex;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* iOS Safari sometimes promotes 'fixed' into a transformed parent and
       loses the viewport pin; the !important + translateZ keep it locked. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    z-index: 9999 !important;
    align-items: stretch;
    justify-content: space-around;
    padding: 12px 8px calc(12px + env(safe-area-inset-bottom, 0));
    background: rgba(8,10,14,0.82);
    backdrop-filter: saturate(160%) blur(28px);
    -webkit-backdrop-filter: saturate(160%) blur(28px);
    border-top: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
  }
  /* Reserve room at the bottom of the page so content doesn't hide
     behind the fixed dock. Apply to the footer instead of body so the
     footer reaches the actual bottom of the page (no blank gap below it).
     The dock visually floats over the footer's safe-area cushion. */
  body { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  #footer { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0)) !important; margin-bottom: 0 !important; }
  /* Pages that don't have a #footer (e.g. /community portal) still need clearance. */
  body:not(:has(#footer)) { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0)) !important; }
  [data-theme="light"] #mobile-dock {
    background: rgba(252,252,254,0.85);
    border-top-color: rgba(0,0,0,0.06);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
  }
  .dock-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.4px !important;
    text-transform: none !important;
    line-height: 1 !important;
    transition: color 0.2s;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 10px;
    position: relative;
  }
  [data-theme="light"] .dock-item { color: rgba(20,24,32,0.55); }
  .dock-item svg { width: 22px; height: 22px; stroke-width: 1.7; }
  /* Chat (CTA): same look as siblings, just teal */
  .dock-item.is-cta { color: var(--clr-primary, #0FC1B7) !important; }
  .dock-item.is-cta svg { color: var(--clr-primary, #0FC1B7) !important; }
  .dock-item.is-cta::before { display: none !important; }
  .dock-item.active { color: var(--clr-primary, #0FC1B7); }
  .dock-item:active { transform: scale(0.95); }
}

/* ============================================================
   MOBILE SHEET — full-screen AI chat container
   ============================================================ */
#mobile-sheet-backdrop { display: none !important; }

#mobile-sheet {
  position: fixed;
  inset: 0;
  z-index: 1101;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  background: linear-gradient(180deg, #0e1218 0%, #080b10 100%);
  border-radius: 0;
  border: none;
  box-shadow: none;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
}
[data-theme="light"] #mobile-sheet {
  background: linear-gradient(180deg, #fafbff 0%, #eff1f7 100%);
}
#mobile-sheet.open { transform: translateY(0); }
#mobile-sheet .sheet-handle { display: none !important; }
.sheet-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
[data-theme="light"] .sheet-header { border-bottom-color: rgba(0,0,0,0.06); }
.sheet-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--clr-text, #fff);
}
.sheet-close {
  width: 36px; height: 36px; border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--clr-text, #fff);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
[data-theme="light"] .sheet-close {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: #1a1a1a;
}
.sheet-content {
  flex: 1 1 auto; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0; display: flex; flex-direction: column;
}

/* ============================================================
   AI CHAT INSIDE MOBILE SHEET — modern professional
   ============================================================ */
#mobile-sheet #hero-ai-chat {
  display: flex; flex-direction: column;
  width: 100% !important; max-width: 100% !important;
  margin: 0 !important;
  padding: 16px 16px calc(80px + env(safe-area-inset-bottom, 0)) !important;
  background: transparent !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  height: 100%; max-height: 100%; min-height: 0; flex: 1 1 auto;
  font-family: 'Outfit', system-ui, sans-serif !important;
  position: relative !important;
}
#mobile-sheet #hero-ai-chat .chat-header { display: none !important; }
#mobile-sheet #hero-ai-chat .chat-messages {
  flex: 1 1 auto !important;
  max-height: none !important;
  padding: 4px 2px 14px !important;
  gap: 12px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(15,193,183,0.4) transparent;
}
#mobile-sheet #hero-ai-chat .chat-message {
  max-width: 86% !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
}
#mobile-sheet #hero-ai-chat .chat-message.user {
  background: linear-gradient(135deg, rgba(15,193,183,0.95), rgba(10,155,146,0.95)) !important;
  color: #fff !important;
  border: none !important;
  border-bottom-right-radius: 6px !important;
  align-self: flex-end !important;
  box-shadow: 0 2px 10px rgba(15,193,183,0.25);
}
#mobile-sheet #hero-ai-chat .chat-message.ai {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-bottom-left-radius: 6px !important;
  align-self: flex-start !important;
}
[data-theme="light"] #mobile-sheet #hero-ai-chat .chat-message.ai {
  background: #fff !important;
  color: #1a1a1a !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] #mobile-sheet #hero-ai-chat .chat-message.user { color: #fff !important; }

#mobile-sheet #hero-ai-chat .chat-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
  padding: 8px 14px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  color: #0FC1B7 !important;
  background: rgba(15,193,183,0.1) !important;
  border: 1px solid rgba(15,193,183,0.4) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  align-self: flex-start !important;
}
#mobile-sheet #hero-ai-chat .chat-link-btn:hover { background: rgba(15,193,183,0.18) !important; }

#mobile-sheet #hero-ai-chat .chat-typing-wrap {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  align-self: flex-start !important;
  max-width: 80px !important;
}
#mobile-sheet #hero-ai-chat .chat-typing span { background: #0FC1B7 !important; }

#mobile-sheet #hero-ai-chat .chat-quick-prompts {
  padding: 12px 0 10px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: none !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
#mobile-sheet #hero-ai-chat .chat-quick-prompts::-webkit-scrollbar { display: none; }
#mobile-sheet #hero-ai-chat .chat-quick-btn {
  flex-shrink: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(15,193,183,0.06) !important;
  border: 1px solid rgba(15,193,183,0.25) !important;
  color: rgba(15,193,183,0.95) !important;
}
#mobile-sheet #hero-ai-chat .chat-quick-btn:hover {
  background: rgba(15,193,183,0.15) !important;
  border-color: rgba(15,193,183,0.5) !important;
  color: #0FC1B7 !important;
}
[data-theme="light"] #mobile-sheet #hero-ai-chat .chat-quick-btn {
  background: rgba(15,193,183,0.08) !important;
  color: #0A9B92 !important;
}

/* Sticky bottom input — keyboard-aware */
#mobile-sheet #hero-ai-chat .chat-input-row {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--kb-bottom, env(safe-area-inset-bottom, 0)) !important;
  margin: 0 !important;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0)) !important;
  background: rgba(8,10,14,0.94) !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 5 !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  transition: border-color .15s, background .15s !important;
}
[data-theme="light"] #mobile-sheet #hero-ai-chat .chat-input-row {
  background: rgba(252,252,254,0.96) !important;
  border-top-color: rgba(0,0,0,0.08) !important;
}
body.kb-open #mobile-sheet #hero-ai-chat .chat-input-row {
  padding-bottom: 14px !important;
}

#mobile-sheet #hero-ai-chat .chat-input {
  flex: 1 1 auto !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  outline: none !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 16px !important;
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  transition: border-color .15s, background .15s !important;
}
#mobile-sheet #hero-ai-chat .chat-input:focus {
  border-color: rgba(15,193,183,0.55) !important;
  background: rgba(15,193,183,0.06) !important;
}
#mobile-sheet #hero-ai-chat .chat-input::placeholder {
  color: rgba(255,255,255,0.4) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  text-transform: none !important;
}
[data-theme="light"] #mobile-sheet #hero-ai-chat .chat-input {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #1a1a1a !important;
}
[data-theme="light"] #mobile-sheet #hero-ai-chat .chat-input:focus {
  border-color: rgba(15,193,183,0.55) !important;
  background: rgba(15,193,183,0.06) !important;
}
[data-theme="light"] #mobile-sheet #hero-ai-chat .chat-input::placeholder { color: rgba(0,0,0,0.4) !important; }

#mobile-sheet #hero-ai-chat .chat-send-btn {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #0FC1B7, #0A9B92) !important;
  border: none !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(15,193,183,0.4);
  transition: transform .12s !important;
}
#mobile-sheet #hero-ai-chat .chat-send-btn:active { transform: scale(0.94) !important; }
#mobile-sheet #hero-ai-chat .chat-send-btn:disabled,
#mobile-sheet #hero-ai-chat .chat-send-btn.is-busy {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
#mobile-sheet #hero-ai-chat .chat-send-btn svg { width: 18px !important; height: 18px !important; }

#mobile-sheet #hero-ai-chat .chat-fs-close { display: none !important; }
#mobile-sheet #hero-ai-chat.is-fullscreen { position: relative !important; inset: auto !important; }

body.sheet-open { overflow: hidden; }

/* =============================================================================
   UNIVERSAL MOBILE AUTO-LAYOUT RESET
   Applies to every page so newer / 3rd-party / inline-styled markup behaves
   on phones without per-page tweaks. Add `class="mobile-keep-grid"` to opt
   out for an element that should preserve its desktop grid on mobile.
   ============================================================================= */
@media (max-width: 768px) {
  /* ---- Box model: everything respects the viewport ---- */
  html, body { max-width: 100vw !important; overflow-x: hidden !important; }

  /* ---- Grids: collapse anything multi-column to 1 column ----
     Catches every inline `style="grid-template-columns:..."` variant
     (with or without spaces, repeat(N,1fr), repeat(auto-fill/fit, ...), etc.)
     except 1-col layouts and explicit opt-outs. */
  [style*="grid-template-columns"]:not(.mobile-keep-grid):not([style*="1fr;"]):not([style*="1fr "]):not([style*="grid-template-columns:1fr;"]):not([style*="grid-template-columns: 1fr;"]) {
    grid-template-columns: 1fr !important;
  }
  /* Allow 2-col when the element opts in. */
  .mobile-2col[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
  /* Auto-fit / auto-fill grids — drop the minmax floor so they don't blow out. */
  [style*="auto-fit"], [style*="auto-fill"] { grid-template-columns: 1fr !important; }

  /* ---- Flex: wrap by default, items shrink ---- */
  [style*="display:flex"]:not(.mobile-keep-flex),
  [style*="display: flex"]:not(.mobile-keep-flex) {
    flex-wrap: wrap !important;
  }
  /* Grid + flex children: kill min-content so long words / inputs don't push parents. */
  [style*="display:grid"] > *,
  [style*="display: grid"] > *,
  [style*="display:flex"] > *,
  [style*="display: flex"] > * { min-width: 0 !important; }

  /* ---- Media: never overflow ---- */
  img, picture, video, iframe, svg, canvas, embed, object {
    max-width: 100% !important;
    height: auto;
  }
  /* iframes with explicit width attribute: keep their height ratio organically. */
  iframe[width][height] { height: auto; }

  /* ---- Tables: horizontal scroll instead of pushing the layout ---- */
  table { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* Re-establish table semantics inside the scroll zone. */
  table > thead, table > tbody, table > tfoot { display: table-row-group; }
  table > * > tr { display: table-row; }
  table th, table td { display: table-cell; }

  /* ---- Long text / URLs: wrap aggressively so cards don't blow out ---- */
  body, p, li, td, th, dd, dt, blockquote, pre, code, a, span, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  pre, code { white-space: pre-wrap !important; }

  /* ---- Containers with fixed pixel widths: clamp to viewport ---- */
  [style*="width:100%"], [style*="width: 100%"] { max-width: 100% !important; }
  [style*="width:1200px"], [style*="width:1100px"], [style*="width:1000px"], [style*="width:960px"], [style*="width:900px"], [style*="width:800px"], [style*="width:760px"], [style*="width:720px"], [style*="width:680px"], [style*="width:640px"],
  [style*="width: 1200px"], [style*="width: 1100px"], [style*="width: 1000px"], [style*="width: 960px"], [style*="width: 900px"], [style*="width: 800px"], [style*="width: 760px"], [style*="width: 720px"], [style*="width: 680px"], [style*="width: 640px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  [style*="max-width:1200px"], [style*="max-width:1100px"], [style*="max-width:1000px"], [style*="max-width:960px"], [style*="max-width:900px"], [style*="max-width:800px"], [style*="max-width:760px"],
  [style*="max-width: 1200px"], [style*="max-width: 1100px"], [style*="max-width: 1000px"], [style*="max-width: 960px"], [style*="max-width: 900px"], [style*="max-width: 800px"], [style*="max-width: 760px"] {
    max-width: 100% !important;
  }

  /* ---- Section padding: trim so content can breathe ---- */
  section, [class*="section"], [class*="hero"], [class*="container"] {
    padding-left: max(16px, env(safe-area-inset-left, 0)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0)) !important;
  }

  /* ---- Headlines: cap font-size so 4-word titles don't wrap awkwardly ---- */
  h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(1.35rem, 5.5vw, 1.9rem) !important; line-height: 1.22 !important; }
  h3 { font-size: clamp(1.1rem, 4.6vw, 1.5rem) !important; line-height: 1.3 !important; }

  /* ---- Tabs / chip rows: horizontal scroll without breaking layout ---- */
  .tabs, .chip-row, [class*="tab-list"], [class*="chip-list"], [class*="pill-row"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .chip-row::-webkit-scrollbar, [class*="tab-list"]::-webkit-scrollbar { display: none; }

  /* ---- Forms: full-width inputs, no minimum that overflows ---- */
  input[type], select, textarea, button:not(.dock-item):not([class*="icon"]) {
    max-width: 100% !important;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select, textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---- Page wrapper guard: kill extra horizontal scroll from any descendant ---- */
  main, article, section, .container, .wrapper { max-width: 100% !important; }
}

/* =============================================================================
   MOBILE TITLE / HEADER AUTO-FIT
   Aggressive but specific rules so every title class auto-resizes, wraps,
   and breaks long words on phones. Highest selectors used so these win
   against per-page CSS.
   ============================================================================= */
@media (max-width: 768px) {
  /* Universal title behaviour: never overflow, always wrap, break long words */
  h1, h2, h3, h4, h5, h6,
  .section-title, .page-title, .hero-sub-header, .hero-sub,
  .book-title, .lab-title, .rb-title, .rh-title, .sm-title,
  .demo-title, .confirm-title, .flip-title, .slot-heading,
  .node-links-title, .h, .h1, .h2, .h3,
  [class*="-title"], [class*="-heading"], [class*="title-"], [class*="heading-"] {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    text-wrap: balance;
    white-space: normal !important;
    line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
  }

  /* Class-based title sizes — clamp so they shrink down to ~360px and never blow out */
  .section-title { font-size: clamp(1.5rem, 6.4vw, 2.2rem) !important; letter-spacing: -0.5px !important; }
  .page-title    { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; }
  .book-title    { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  .lab-title     { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  .rb-title, .rh-title { font-size: clamp(1.3rem, 5.6vw, 1.8rem) !important; }
  .sm-title, .demo-title, .confirm-title, .flip-title, .slot-heading {
    font-size: clamp(1.1rem, 4.8vw, 1.55rem) !important;
  }

  /* Hero h1: keep tuned, but also add safety wrap */
  .hero h1, .page-hero h1 {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    text-wrap: balance;
    max-width: 100% !important;
  }
  .hero-sub-header, .hero-sub {
    font-size: clamp(0.95rem, 4vw, 1.2rem) !important;
    line-height: 1.4 !important;
  }

  /* CTA H2 with hard `<br>` — let the BR yield to the wrap on very small screens */
  .contact-card h2 {
    font-size: clamp(1.5rem, 6.6vw, 2.2rem) !important;
    line-height: 1.18 !important;
    text-wrap: balance;
  }
  .contact-card h2 br { display: none; }
  /* On 380px+ the line break helps balance — restore it */
  @media (min-width: 380px) {
    .contact-card h2 br { display: inline; }
  }

  /* Section labels (// Let's Automate the Work) — keep monospace tight, never overflow */
  .section-label {
    font-size: clamp(0.62rem, 2.6vw, 0.78rem) !important;
    letter-spacing: 1.5px !important;
    word-spacing: -0.05em;
    overflow-wrap: anywhere !important;
  }

  /* Card titles inside any grid — uniform mobile size */
  .card h2, .card h3, .card h4, [class*="card"] h2, [class*="card"] h3, [class*="card"] h4 {
    font-size: clamp(1rem, 4.4vw, 1.3rem) !important;
    line-height: 1.25 !important;
  }

  /* Nav top-bar: ensure logo + actions don't overflow */
  #navbar, .nav, header nav { flex-wrap: wrap !important; }
  #navbar .nav-logo img { height: 30px !important; width: auto !important; }

  /* Footer section heads: small, never wrap awkwardly */
  #footer small { display: block !important; }
  #footer h3, #footer .footer-heading { font-size: 1rem !important; }

  /* Long all-caps headings (e.g. "AI INTEGRATIONS") — force letter-spacing down */
  h1[style*="text-transform"], h2[style*="text-transform"],
  [class*="-title"][style*="text-transform"] { letter-spacing: 0.04em !important; }

  /* Hero buttons row that often overflows from inline display:flex */
  .hero-buttons { flex-wrap: wrap !important; gap: 10px !important; }
  .hero-buttons > * { max-width: 100% !important; }
}

/* Extra-small phones (<= 360px) — squeeze more */
@media (max-width: 360px) {
  .section-title { font-size: clamp(1.3rem, 5.8vw, 1.8rem) !important; }
  .contact-card h2 { font-size: clamp(1.3rem, 5.6vw, 1.8rem) !important; }
  .hero h1, .page-hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem) !important; line-height: 1.15 !important; }
}