/**
 * Homepage mobile optimization (≤768px only).
 * Desktop and tablet (≥769px) are untouched — all rules scoped to .home-page.
 */

@media (max-width: 768px) {
  .home-page {
    --home-m-nav-top: max(6px, env(safe-area-inset-top, 0px));
    --home-m-section-pad: clamp(48px, 12vw, 56px);
    --home-m-gap: clamp(16px, 4vw, 20px);
    --home-m-head-gap: clamp(8px, 2vw, 12px);
  }

  /* ── 1. Compact floating navigation ── */
  .home-page .site-header {
    top: var(--home-m-nav-top);
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    transition:
      transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.26s ease;
    will-change: transform;
  }

  .home-page .site-header.is-mobile-nav-hidden {
    transform: translateY(calc(-100% - 12px));
    pointer-events: none;
  }

  body.menu-open .home-page .site-header.is-mobile-nav-hidden {
    transform: none;
    pointer-events: auto;
  }

  .home-page .header-inner {
    gap: 6px;
    min-height: 0;
  }

  .home-page .header-inner::before {
    inset: -3px -5px;
    opacity: 1;
    transform: scaleX(1);
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.42);
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.14)),
      rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(16, 24, 32, 0.07);
  }

  .home-page :is(.brand, .demo-button.btn-liquid, .mobile-toggle) {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(16, 24, 32, 0.07);
  }

  .home-page .brand.brand--wordmark {
    height: 28px;
    max-width: min(118px, 38vw);
    padding: 2px 7px;
  }

  .home-page .brand.brand--wordmark img {
    height: 18px;
    max-width: 100%;
  }

  .home-page .demo-button.btn-liquid {
    min-height: 40px !important;
    height: 40px;
    padding: 3px 5px 3px 12px !important;
    font-size: 13px !important;
    gap: 6px;
  }

  .home-page .demo-button.btn-liquid > span {
    font-size: 13px;
    font-weight: 700;
  }

  .home-page .demo-button.btn-liquid svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }

  /* ── 2. Enterprise mobile menu button ── */
  .home-page .mobile-toggle {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 13px;
  }

  .home-page .mobile-toggle span {
    position: absolute;
    left: 50%;
    width: 15px;
    height: 2px;
    margin: 0;
    border-radius: 999px;
    background: var(--ink);
    transition:
      transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.22s ease;
  }

  .home-page .mobile-toggle span:first-child {
    transform: translate(-50%, -5px);
  }

  .home-page .mobile-toggle span:last-child {
    transform: translate(-50%, 5px);
  }

  .home-page .mobile-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 15px;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
    transform: translate(-50%, -50%);
    transition:
      opacity 0.22s ease,
      transform 0.22s ease;
  }

  .home-page .mobile-toggle[aria-expanded="true"] span:first-child {
    transform: translate(-50%, 0) rotate(45deg);
  }

  .home-page .mobile-toggle[aria-expanded="true"] span:last-child {
    transform: translate(-50%, 0) rotate(-45deg);
  }

  .home-page .mobile-toggle[aria-expanded="true"]::after {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
  }

  .home-page .mobile-menu {
    padding-top: max(72px, calc(56px + env(safe-area-inset-top, 0px)));
  }

  /* ── 9–10. Global homepage spacing & typography ── */
  .home-page .section,
  .home-page .section.pale {
    padding-block: var(--home-m-section-pad) !important;
  }

  .home-page .section-heading {
    gap: var(--home-m-head-gap) !important;
    margin-bottom: var(--home-m-gap) !important;
  }

  .home-page .section-heading h2 {
    font-size: clamp(1.125rem, 5vw, 1.25rem) !important;
    line-height: 1.22 !important;
  }

  .home-page .section-heading .muted,
  .home-page .section-heading p.muted {
    font-size: clamp(0.875rem, 3.5vw, 0.9375rem) !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
  }

  .home-page .section-heading .eyebrow {
    font-size: clamp(0.75rem, 3vw, 0.8125rem) !important;
  }

  /* ── 4. Hero refinements (extends mobile-hero.css) ── */
  .home-page .home-exec-hero-inner {
    padding-top: calc(max(44px, calc(40px + env(safe-area-inset-top, 0px))) + 4px) !important;
  }

  .home-page .hero-actions {
    gap: 10px !important;
    margin-top: 10px !important;
  }

  .home-page .hero-actions :is(.primary-action, .secondary-action) {
    min-height: 40px !important;
    font-size: 13px !important;
    padding-inline: 14px !important;
  }

  /* ── 5. Enterprise technology ecosystem ── */
  .home-page .home-eco-flow > .section-inner {
    padding-block: var(--home-m-section-pad) !important;
  }

  .home-page .home-eco-chain {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--home-m-gap);
  }

  .home-page .home-eco-conn {
    display: none !important;
  }

  .home-page .home-eco-chain > li:not(.home-eco-conn) {
    flex: none;
    max-width: none;
    width: 100%;
  }

  .home-page .home-eco-node {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--home-line);
  }

  .home-page .home-eco-node h3 {
    flex: 1;
    margin: 0;
    font-size: clamp(1rem, 3.8vw, 1.125rem) !important;
    text-align: left;
  }

  .home-page .home-eco-chain p,
  .home-page .home-eco-go {
    display: none !important;
  }

  .home-page .home-eco-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
  }

  .home-page .home-eco-icon svg {
    width: 20px;
    height: 20px;
  }

  /* Platform cinema — tighter band */
  .home-page .home-plat-cinema {
    min-height: min(52vh, 480px) !important;
  }

  .home-page .home-plat-cinema-copy {
    padding-bottom: clamp(72px, 10vh, 96px) !important;
    gap: 8px !important;
  }

  .home-page .home-plat-cinema-name {
    font-size: clamp(1.625rem, 7vw, 1.875rem) !important;
  }

  /* ── 7. Business challenges ── */
  .home-page .home-chal-list a {
    min-height: 44px;
    padding: 10px 6px 10px 0;
    gap: 10px;
    font-size: clamp(0.875rem, 3.5vw, 0.9375rem) !important;
    font-weight: 700;
  }

  .home-page .home-chal-mark {
    width: 8px;
    height: 8px;
    margin-left: 2px;
  }

  /* ── 6. Industries we empower ── */
  .home-page .home-industries > .section-inner,
  .home-page .home-industries-inner {
    padding-block: var(--home-m-section-pad) !important;
  }

  .home-page .home-ind-board {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--ind-line);
    border-radius: 0;
    overflow: visible;
  }

  .home-page .home-ind-panel,
  .home-page .home-ind-panel.is-active,
  .home-page .home-ind-panel.is-open,
  .home-page .home-ind-board:hover .home-ind-panel,
  .home-page .home-ind-board:hover .home-ind-panel:not(:hover):not(.is-active),
  .home-page .home-ind-board:hover .home-ind-panel.is-active:not(:hover) {
    flex: none;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--ind-line);
    min-height: 0;
  }

  .home-page .home-ind-panel:last-child {
    border-bottom: 0;
  }

  .home-page .home-ind-media,
  .home-page .home-ind-expand,
  .home-page .home-ind-arrow,
  .home-page .home-ind-indicator,
  .home-page .home-ind-keywords {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .home-page .home-ind-panel.is-open .home-ind-expand,
  .home-page .home-ind-panel.is-active .home-ind-expand,
  .home-page .home-ind-panel.is-open .home-ind-media,
  .home-page .home-ind-panel.is-active .home-ind-media {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
  }

  .home-page .home-ind-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 13px 14px;
    width: 100%;
    box-sizing: border-box;
  }

  .home-page .home-ind-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
  }

  .home-page .home-ind-icon svg {
    width: 18px;
    height: 18px;
  }

  .home-page .home-ind-name {
    flex: 1;
    margin: 0;
    font-size: clamp(1rem, 3.8vw, 1.125rem) !important;
    text-align: left;
  }

  .home-page .home-ind-panel::after,
  .home-page .home-ind-panel.is-active::after,
  .home-page .home-ind-panel:hover::after {
    display: none !important;
  }

  /* ── 8. Why enterprises choose Evolabs ── */
  .home-page .home-trust-rail {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--home-m-gap);
  }

  .home-page .home-trust-rail li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--home-line);
    min-height: 0;
  }

  .home-page .home-trust-rail p {
    display: none !important;
  }

  .home-page .home-trust-icon {
    flex-shrink: 0;
  }

  .home-page .home-trust-icon svg {
    width: 20px;
    height: 20px;
  }

  .home-page .home-trust-rail h3 {
    flex: 1;
    margin: 0;
    font-size: clamp(1rem, 3.8vw, 1.125rem) !important;
    font-weight: 800;
    line-height: 1.3;
  }

  /* Connected operations — denser */
  .home-page .home-ops-flow {
    gap: 6px 4px;
    padding: 4px 0 0;
  }

  .home-page .home-ops-flow > li:not(.home-ops-conn) span {
    font-size: clamp(0.75rem, 3.2vw, 0.8125rem);
    padding: 8px 6px;
  }

  /* Delivery timeline — tighter rows */
  .home-page .home-process > .section-inner,
  .home-page .home-process-inner {
    padding-block: var(--home-m-section-pad) !important;
  }

  .home-page .home-timeline-stage {
    padding: 10px 0;
  }

  .home-page .home-timeline-card h3 {
    font-size: clamp(1rem, 3.8vw, 1.125rem) !important;
  }

  .home-page .home-timeline-summary {
    font-size: clamp(0.875rem, 3.5vw, 0.9375rem) !important;
    margin-top: 4px;
  }

  /* Solution builder band */
  .home-page .home-builder {
    padding-block: var(--home-m-section-pad) !important;
  }

  .home-page .home-builder h2 {
    font-size: clamp(1.125rem, 5vw, 1.25rem) !important;
  }
}

/* ── Small phone densify (≤640px) ── */
@media (max-width: 640px) {
  .home-page {
    --home-m-section-pad: clamp(40px, 11vw, 48px);
    --home-m-gap: clamp(12px, 3.5vw, 16px);
    --home-m-head-gap: 6px;
  }

  .home-page .home-exec-hero-inner {
    padding-top: calc(max(40px, calc(36px + env(safe-area-inset-top, 0px))) + 2px) !important;
  }

  .home-page .hero-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .home-page .hero-actions :is(.primary-action, .secondary-action) {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .home-page .home-plat-cinema {
    min-height: min(44vh, 400px) !important;
  }

  .home-page .home-plat-cinema-copy {
    padding-bottom: clamp(56px, 8vh, 80px) !important;
  }

  .home-page .home-ind-content {
    padding: 11px 12px;
  }

  .home-page .home-eco-node,
  .home-page .home-trust-rail li {
    padding-block: 10px;
  }

  .home-page .home-hero-partner-logos {
    column-gap: 12px;
    row-gap: 12px;
    justify-content: space-evenly;
  }

  .home-page .home-hero-partner-logos img {
    max-height: 26px;
  }
}