/* Mobile responsiveness + scroll smoothness.
   Hero constellation / orbit animations stay intact. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Only constrain ordinary media — never hero map SVGs / core art. */
img:not(.product-universe-core img):not(.services-core img):not(.home-core-stage > img):not(.eh-orbit img):not(.feature-canvas img):not(.mac-canvas img):not(.v3-mark img):not(img.solution-scene-photo):not(img.workspace-scene-photo),
video {
  max-width: 100%;
  height: auto;
}

.feature-canvas > img,
.feature-canvas.is-dashboard > img,
.feature-canvas.is-realistic > img,
.mac-canvas img,
img.solution-scene-photo,
.solution-scene-photo,
img.workspace-scene-photo,
.workspace-scene-photo,
.page-hero-art img,
.home-feature-art img,
.product-universe-map > svg,
.product-universe-core > img,
.services-constellation > svg,
.services-core > img,
.home-core-stage > img,
.eh-orbit img {
  max-width: none;
}

/* Keep workspace screenshots visible and sized on all devices. */
.mac-canvas .feature-canvas.is-dashboard,
.mac-canvas .feature-canvas.is-realistic {
  position: relative !important;
  width: 100% !important;
  min-height: 220px !important;
  aspect-ratio: 16 / 9;
  overflow: hidden !important;
  background: #fff;
}

.mac-canvas .feature-canvas.is-dashboard > img,
.mac-canvas .feature-canvas.is-realistic > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  z-index: 1;
}

.mac-canvas .feature-canvas .screen-scan,
.mac-canvas .feature-canvas .feature-scene-vignette {
  z-index: 2;
  pointer-events: none;
}

/* ===== Products Live Product Graph — keep animation + fix mobile packing ===== */
.product-universe-map {
  overflow: visible;
}

.product-universe-map > svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  pointer-events: none;
}

.product-universe-core,
.product-universe-core .core-rings,
.product-universe-core .core-rings i,
.home-core-rings,
.home-core-glow,
.services-core,
.services-hero .eh-orbit {
  display: revert !important;
  visibility: visible !important;
  opacity: 1;
}

.product-universe-core .core-rings {
  display: grid !important;
  place-items: center;
}

@media (max-width: 900px) {
  :root {
    --site-width: calc(100% - 24px);
    --radius: 18px;
  }

  html {
    scroll-behavior: auto;
  }

  body {
    overflow-x: hidden;
  }

  body.cinematic-lock {
    overflow: visible !important;
  }

  .pointer-glow,
  .site-pointer,
  .ambient-pointer,
  [class*="pointer-glow"] {
    display: none !important;
  }

  .crystal-site,
  .crystal-site.object-glass,
  body.crystal-site {
    --crystal-filter: none;
  }

  .crystal-site .site-header,
  .crystal-site .mac-frame,
  .crystal-site .mac-sidebar,
  .crystal-site .mac-experience,
  .crystal-site .feature-tree-core,
  .crystal-site .deep-dive-metrics,
  .crystal-site .synthetic-workspace,
  .crystal-site .faq-list details,
  .crystal-site .integration-logo,
  .crystal-site .service-disclaimer,
  .site-header,
  .mac-frame,
  .mac-sidebar,
  .mac-experience,
  .eh-offer,
  .eh-modal-panel,
  .solution-card,
  .workspace-card,
  .gateway-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .home-hero-copy h1,
  .universe-copy h1,
  .services-copy h1,
  .solution-title h1 {
    font-size: clamp(2rem, 9vw, 2.6rem) !important;
    line-height: 1.08 !important;
    word-break: break-word;
  }

  .home-hero-grid,
  .universe-hero-grid,
  .services-hero-grid,
  .solution-hero-grid,
  .page-hero-grid,
  .gateway-split,
  .home-feature-grid,
  .home-ai-grid,
  .corp-eco-grid,
  .ecosystem-cta-grid,
  .faq-layout,
  .mac-experience {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Do NOT collapse hero stages — constellation needs real height. */
  .universe-hero-grid,
  .services-hero-grid {
    min-height: auto !important;
  }

  .home-core-stage {
    min-height: 420px !important;
    height: auto !important;
    overflow: visible !important;
  }

  .page-hero-art,
  .home-feature-art,
  .home-ai-art,
  .global-globe {
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;
  }

  .page-hero-art > img,
  .home-feature-art > img,
  img.solution-scene-photo,
  .solution-live-stage > img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    margin-inline: auto;
    object-fit: cover !important;
  }

  .home-core-stage > img {
    width: min(100%, 360px) !important;
    max-width: none !important;
    height: auto !important;
    margin-inline: auto;
  }

  /* Products Live Product Graph — desktop radial orbit benchmark on tablet/mobile. */
  .product-universe-map {
    display: block !important;
    position: relative !important;
    height: clamp(520px, 128vw, 680px) !important;
    min-height: 520px !important;
    margin-top: 8px !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-flow: unset !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .product-universe-map > svg {
    position: absolute !important;
    inset: 12px !important;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
    opacity: 0.55 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    display: block !important;
  }

  .product-universe-map > svg path {
    animation: 7s linear infinite dashFlow !important;
  }

  .universe-map-status {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 6 !important;
  }

  .product-universe-core {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: clamp(150px, 38vw, 230px) !important;
    height: clamp(150px, 38vw, 230px) !important;
    margin: 0 !important;
    order: unset !important;
    flex: unset !important;
    z-index: 4 !important;
  }

  .product-universe-core > img {
    width: clamp(140px, 34vw, 210px) !important;
    height: auto !important;
    max-width: none !important;
  }

  .product-universe-core .core-rings {
    display: grid !important;
    place-items: center !important;
  }

  .product-universe-core .core-rings i {
    display: block !important;
    width: clamp(150px, 40vw, 240px) !important;
    height: clamp(60px, 16vw, 100px) !important;
  }

  .product-universe-core .core-rings i:nth-child(2) {
    width: clamp(190px, 50vw, 300px) !important;
    height: clamp(78px, 20vw, 130px) !important;
  }

  .product-universe-core .core-rings i:nth-child(3) {
    display: block !important;
    width: clamp(230px, 60vw, 360px) !important;
    height: clamp(94px, 24vw, 160px) !important;
  }

  .universe-core-label {
    position: absolute !important;
    bottom: -28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 0 !important;
    width: max-content !important;
    max-width: min(210px, 70vw) !important;
    padding: 8px 12px !important;
    z-index: 7 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .universe-node {
    position: absolute !important;
    order: unset !important;
    flex: unset !important;
    width: clamp(138px, 40vw, 188px) !important;
    max-width: 46vw !important;
    min-height: 100px !important;
    padding: 10px !important;
    margin: 0 !important;
    z-index: 5 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .universe-node.node-1 {
    top: 12% !important;
    left: 1.5% !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .universe-node.node-2 {
    top: 14% !important;
    right: 1.5% !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .universe-node.node-3 {
    /* Desktop benchmark: Seller Management sits bottom-left, not center. */
    bottom: 9% !important;
    left: 1.5% !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

  .universe-node.node-3:hover {
    transform: translateY(-6px) !important;
  }

  .universe-node > span {
    width: clamp(48px, 12vw, 58px) !important;
    height: clamp(48px, 12vw, 58px) !important;
  }

  .universe-node img {
    width: clamp(44px, 11vw, 54px) !important;
    height: clamp(44px, 11vw, 54px) !important;
  }

  .universe-node b {
    font-size: clamp(12px, 3.2vw, 14px) !important;
  }

  .universe-node small {
    max-width: 110px !important;
    font-size: clamp(8px, 2.4vw, 10px) !important;
    line-height: 1.35 !important;
  }

  .universe-node em {
    font-size: clamp(8px, 2.2vw, 10px) !important;
  }

  .universe-system {
    position: absolute !important;
    order: unset !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: clamp(118px, 32vw, 150px) !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 6px 10px 6px 6px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    z-index: 5 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .universe-system > span {
    width: 42px !important;
    height: 42px !important;
  }

  .universe-system img {
    width: 40px !important;
    height: 40px !important;
  }

  .universe-system > b {
    display: grid !important;
    gap: 2px !important;
    font-size: 9px !important;
  }

  .universe-system small {
    display: block !important;
    font-size: 7px !important;
  }

  .universe-system.system-a {
    top: 2.5% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  .universe-system.system-b {
    /* Live Analytics — bottom-right (desktop benchmark). */
    bottom: 8% !important;
    right: 1.5% !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .universe-system.system-c {
    /* Automation — free-floating bottom-center, clear of Seller card. */
    bottom: 2.5% !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
  }

  /* Feature tree: flow layout on mobile only (not product universe). */
  .feature-tree-section,
  .feature-tree {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }

  .feature-tree {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    position: relative !important;
  }

  .feature-tree > svg {
    display: none !important;
  }

  .feature-tree-core,
  .feature-tree-node {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 0 !important;
    inset: auto !important;
  }

  .feature-tree-core {
    grid-column: 1 !important;
  }

  .deep-glass-deck,
  .eh-live-deck {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    perspective: none !important;
    overflow: visible !important;
  }

  .deep-glass-deck .eh-deck-card,
  .eh-live-deck .eh-deck-card,
  .deep-glass-deck:has(.eh-deck-card) .eh-deck-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  .deep-glass-deck .eh-deck-card.is-stack,
  .eh-live-deck .eh-deck-card.is-stack,
  .deep-glass-deck .eh-deck-card[data-slot]:not([data-slot="0"]):not(.is-front) {
    display: none !important;
  }

  .deep-glass-deck .eh-deck-card.is-front,
  .deep-glass-deck .eh-deck-card[data-slot="0"],
  .eh-live-deck .eh-deck-card.is-front,
  .eh-live-deck .eh-deck-card[data-slot="0"] {
    display: flex !important;
  }

  .deep-glass-deck .eh-deck-copy,
  .eh-live-deck .eh-deck-copy,
  .deep-glass-deck .eh-deck-card.is-front .eh-deck-copy,
  .deep-glass-deck .eh-deck-card[data-slot="0"] .eh-deck-copy {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .mac-sidebar {
    grid-template-columns: 1fr !important;
    max-height: none;
  }

  .mac-canvas {
    min-height: 0 !important;
    padding: 8px !important;
  }

  .feature-showcase,
  .feature-tree-section,
  .v3-section,
  .detail-section,
  .product-workspaces,
  .module-section {
    padding-left: 0;
    padding-right: 0;
    overflow: visible !important;
  }

  .solution-hero,
  .home-hero,
  .services-hero,
  .universe-hero,
  .page-hero {
    overflow-x: hidden;
    overflow-y: visible;
  }

  .stat-rail,
  .global-stats,
  .feature-icon-rail,
  .solution-feature-rail,
  .proof-grid,
  .module-grid,
  .responsibility-grid,
  .workflow-line,
  .integration-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .service-step-line,
  .related-grid,
  .ai-signal-grid,
  .gateway-card-grid {
    grid-template-columns: 1fr !important;
  }

  .site-footer-links {
    grid-template-columns: 1fr 1fr !important;
  }

  .site-footer-band-grid {
    grid-template-columns: 1fr !important;
  }

  /* Soften only non-hero continuous effects. */
  .screen-scan {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .stat-rail,
  .global-stats,
  .feature-icon-rail,
  .solution-feature-rail,
  .proof-grid,
  .module-grid,
  .responsibility-grid,
  .workflow-line,
  .integration-grid,
  .site-footer-links {
    grid-template-columns: 1fr !important;
  }

  .home-node-dock {
    grid-template-columns: 1fr 1fr !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100%;
    gap: 10px;
  }

  .home-node-card:last-child {
    grid-column: 1 / -1;
  }

  .product-universe-map {
    height: clamp(500px, 145vw, 620px) !important;
    min-height: 500px !important;
    border-radius: 22px !important;
  }

  .product-universe-core {
    width: clamp(132px, 34vw, 180px) !important;
    height: clamp(132px, 34vw, 180px) !important;
  }

  .product-universe-core > img {
    width: clamp(124px, 32vw, 168px) !important;
  }

  .universe-core-label {
    bottom: -24px !important;
    max-width: min(190px, 68vw) !important;
    padding: 7px 10px !important;
  }

  .universe-core-label b {
    font-size: 8px !important;
  }

  .universe-node {
    width: clamp(124px, 39vw, 160px) !important;
    min-height: 92px !important;
    padding: 8px !important;
  }

  .universe-node > span {
    width: 46px !important;
    height: 46px !important;
  }

  .universe-node img {
    width: 42px !important;
    height: 42px !important;
  }

  .universe-system {
    min-width: clamp(104px, 30vw, 132px) !important;
    min-height: 48px !important;
    padding: 5px 8px 5px 5px !important;
  }

  .universe-system > span {
    width: 38px !important;
    height: 38px !important;
  }

  .universe-system img {
    width: 36px !important;
    height: 36px !important;
  }

  .product-service-icon-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .mac-canvas .feature-canvas.is-dashboard,
  .mac-canvas .feature-canvas.is-realistic {
    min-height: 180px !important;
  }
}

@media (max-width: 400px) {
  .product-universe-map {
    height: clamp(480px, 155vw, 560px) !important;
    min-height: 480px !important;
  }

  .product-universe-core {
    width: clamp(120px, 36vw, 150px) !important;
    height: clamp(120px, 36vw, 150px) !important;
  }

  .product-universe-core > img {
    width: clamp(112px, 34vw, 140px) !important;
  }

  .universe-node {
    width: clamp(114px, 41vw, 142px) !important;
    min-height: 86px !important;
  }

  .universe-node b {
    font-size: 11px !important;
  }

  .universe-node small {
    font-size: 8px !important;
    line-height: 1.3 !important;
    max-width: 88px !important;
  }

  .universe-node em {
    font-size: 8px !important;
  }

  .universe-system {
    min-width: 98px !important;
  }

  .universe-system > b {
    font-size: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}