/* Open Foundation: projected solid tiers with accessible HTML module controls. */
.generic-landing .foundation-stage { perspective: 1500px; }
.generic-landing .foundation-stage .architecture-frame {
  min-height: 0;
  aspect-ratio: 720 / 680;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  isolation: auto;
  /* SVG already supplies the isometric camera. Keep HTML controls on a stable 2D plane. */
  transform: none;
  transform-style: flat;
}
[dir="rtl"] .generic-landing .foundation-stage .architecture-frame { transform: none; }
.foundation-stage .architecture-frame::before,
.foundation-stage .architecture-frame::after,
.foundation-stage .architecture-aurora,
.foundation-stage .architecture-grid,
.foundation-stage .frame-corner,
.foundation-stage .link-ring,
.foundation-stage .node-orbit,
.foundation-stage .core-flare,
.foundation-stage .core-orbit,
.foundation-stage .core-pulse { display: none; }
.foundation-sculpture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: translate3d(var(--hero-shift-x), var(--hero-shift-y), 0)
    rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y));
}
.foundation-support { fill: none; stroke: #82cbd7; stroke-opacity: .2; stroke-width: 3; }
.foundation-mobile-heading { display: none; }
.foundation-stage .architecture-links { transform: none; z-index: 1; opacity: .65; }
.foundation-stage .architecture-core,
[dir="rtl"] .foundation-stage .architecture-core {
  top: 76%; left: 50%; right: auto;
  width: 180px; min-height: 0; height: auto;
  padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; backdrop-filter: none;
  transform: translate(-50%, -50%);
  gap: 4px;
}
.foundation-stage .architecture-core img { width: 56px; height: 56px; filter: drop-shadow(0 7px 6px #0008); }
.foundation-stage .architecture-core strong { font-size: 16px; letter-spacing: -.02em; }
.foundation-stage .architecture-core small { font-size: 9px; color: #afc5d8; }
.foundation-stage .architecture-frame.has-active-node .architecture-core { background: none; box-shadow: none; }
.generic-landing .foundation-stage .architecture-node,
.generic-landing .foundation-stage.is-visible .architecture-node {
  width: 100px; top: var(--module-y); left: var(--module-x); right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  transition: opacity 250ms ease;
  transition-delay: 0s;
}
.generic-landing .foundation-stage .architecture-node:is(:hover, :focus-visible, .is-active) {
  transform: translate(-50%, -50%);
  z-index: 25;
}
/* Animated children must not expand or move the anchor's hover boundary. */
.foundation-stage .architecture-node-icon,
.foundation-stage .architecture-node-label { pointer-events: none; }
.foundation-stage .architecture-node-icon {
  width: 50px; height: 50px; border-radius: 13px;
  background: linear-gradient(145deg, #374458, #152032 65%);
  border-color: rgb(var(--node-accent) / 42%);
  box-shadow: 0 5px 0 #0c1423, 0 6px 0 rgb(var(--node-accent) / 25%), 0 14px 18px #0005, inset 0 1px 0 #ffffff26;
}
.foundation-stage .architecture-node-icon::before { display: none; }
.foundation-stage .architecture-node-icon svg { width: 30px; height: 30px; }
.foundation-stage .architecture-node-label,
[dir="rtl"] .foundation-stage .architecture-node-label {
  display: block; position: static; width: auto; max-width: 105px; height: auto;
  margin: 9px auto 0; overflow: visible; opacity: 1; visibility: visible;
  transform: none; font-size: 9px; line-height: 1.35; color: #d9e3ef;
  text-shadow: 0 2px 8px #060b15;
}
.foundation-stage .node-experience { --module-x: 27%; --module-y: 70%; }
.foundation-stage .node-foundation { --module-x: 73%; --module-y: 70%; }
.foundation-stage .node-files { --module-x: 36%; --module-y: 51%; }
.foundation-stage .node-ai { --module-x: 64%; --module-y: 51%; }
.foundation-stage .node-communication { --module-x: 18%; --module-y: 32%; }
.foundation-stage .node-helpdesk { --module-x: 34%; --module-y: 26%; }
.foundation-stage .node-crm { --module-x: 50%; --module-y: 21%; }
.foundation-stage .node-forms { --module-x: 66%; --module-y: 26%; }
.foundation-stage .node-hooshvares { --module-x: 82%; --module-y: 32%; }
.foundation-stage .node-finance { --module-x: 23%; --module-y: 6%; }
.foundation-stage .node-cms { --module-x: 41%; --module-y: 2%; }
.foundation-stage .node-ecommerce { --module-x: 59%; --module-y: 2%; }
.foundation-stage .node-erp { --module-x: 77%; --module-y: 6%; }
.foundation-stage [aria-disabled="true"] .architecture-node-icon {
  background: #0e162566; border-style: dashed; border-color: #aebcd080;
  box-shadow: none;
}
.foundation-stage [aria-disabled="true"] .architecture-node-label { color: #aab9cf; }
.generic-landing .foundation-stage [aria-disabled="true"] { pointer-events: none; }
.foundation-stage .roadmap-badge { display: block; margin-top: 4px; color: #9caac0; font-size: 8px; letter-spacing: .04em; }
.foundation-stage .architecture-group-label {
  display: block; position: absolute; inset: auto; right: 4%;
  padding: 4px 8px; border: 1px solid #ffffff12; border-radius: 5px;
  background: #0b1220dd; font-size: 8px; line-height: 1.4;
  color: #b7c7da; letter-spacing: .05em; writing-mode: horizontal-tb; transform: none;
  z-index: 2; pointer-events: none;
}
.foundation-stage .group-label-foundation { top: 91%; right: 34%; }
.foundation-stage .group-label-services { top: 61%; right: 7%; color: #8fdde3; }
.foundation-stage .group-label-alpha { top: 43%; right: 4%; color: #c5b5ef; }
.foundation-stage .group-label-future { top: 0; right: 0; border-style: dashed; }
.generic-landing .foundation-stage .architecture-popover {
  top: auto; bottom: calc(100% + 14px); left: 50%; right: auto;
  width: 220px; transform: translate(-50%, 5px); transform-origin: bottom center;
}
.generic-landing .foundation-stage .architecture-node:is(:hover, :focus-visible, .is-active, .is-touch-active) .architecture-popover {
  transform: translate(-50%, 0);
}
.foundation-stage .architecture-popover::after { display: none; }
.generic-landing .foundation-stage .architecture-node.is-dismissed .architecture-popover { opacity: 0; visibility: hidden; }
.generic-landing .foundation-stage :is(.node-finance, .node-ecommerce, .node-erp) .architecture-popover {
  top: calc(100% + 14px); bottom: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .foundation-stage.is-visible .foundation-tier { animation: foundation-assemble 1200ms var(--ease-out) backwards; }
  .foundation-stage .tier-services { animation-delay: 160ms; }
  .foundation-stage .tier-products { animation-delay: 320ms; }
  .foundation-stage .tier-future { animation-delay: 480ms; }
}
@keyframes foundation-assemble {
  from { opacity: 0; transform: translateY(35px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 820px) {
  .generic-landing .hero-layout { display: flex; flex-direction: column; }
  .generic-landing .hero-copy { order: 0; }
  .generic-landing .foundation-stage { order: 1; }
  .generic-landing .foundation-stage { width: 100%; max-width: 640px; margin-inline: auto; }
  .generic-landing .foundation-stage .architecture-frame { aspect-ratio: auto; padding: 280px 8px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 8px; transform: none; }
  .foundation-sculpture { height: 280px; }
  [dir="rtl"] .generic-landing .foundation-stage .architecture-frame,
  .foundation-stage .foundation-sculpture { transform: none; }
  .foundation-stage .architecture-links { display: none; }
  .foundation-stage .architecture-core,
  [dir="rtl"] .foundation-stage .architecture-core { top: 205px; left: 50%; }
  .foundation-stage .architecture-core img { width: 32px; height: 32px; }
  .foundation-stage .architecture-core strong { display: block; font-size: 13px; }
  .foundation-stage .architecture-core small { display: block; font-size: 8px; }
  .generic-landing .foundation-stage .architecture-node,
  .generic-landing .foundation-stage.is-visible .architecture-node,
  .generic-landing .foundation-stage .architecture-node:is(:hover, :focus-visible, .is-active) {
    position: relative; inset: auto; width: 100%; transform: none; padding: 0; background: none;
  }
  .foundation-stage .architecture-node-label,
  [dir="rtl"] .foundation-stage .architecture-node-label { font-size: 11px; }
  .foundation-stage .architecture-group-label { display: none; }
  .foundation-stage .mobile-architecture-group { display: none; }
  .foundation-mobile-heading { display: block; grid-column: 1 / -1; margin-top: 12px; padding-block: 8px; border-bottom: 1px solid #a8b7d226; color: #bdcce0; font-size: 12px; }
  .foundation-stage .architecture-node-label { background: none; border-radius: 0; }
  .foundation-stage .architecture-node { align-self: end; }
  .generic-landing .foundation-stage .architecture-popover,
  .generic-landing .foundation-stage :is(.node-finance, .node-ecommerce, .node-erp) .architecture-popover {
    width: min(220px, 65vw); top: auto; bottom: calc(100% + 10px);
  }
  .generic-landing .foundation-stage :is(.node-experience, .node-files, .node-communication, .node-forms) .architecture-popover { left: 0; transform: none; }
  .generic-landing .foundation-stage .node-crm .architecture-popover { left: auto; right: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .generic-landing .foundation-stage .architecture-frame,
  [dir="rtl"] .generic-landing .foundation-stage .architecture-frame,
  .foundation-stage .foundation-sculpture { transform: none; }
  .foundation-stage .foundation-tier { animation: none; }
}
@media (forced-colors: active) {
  .foundation-sculpture { display: none; }
  .foundation-stage .architecture-node-icon { border: 1px solid CanvasText; background: Canvas; }
  .foundation-stage .architecture-node-label { color: CanvasText; text-shadow: none; }
}