/* ================================================================
   AWAN official website — ZAM Cloud live service module
   Isolated from the main site stylesheet for easy maintenance.
   ================================================================ */

.awan-cloud-status {
  --cloud-wine: #27152f;
  --cloud-wine-deep: #160b1c;
  --cloud-bronze: #bc7655;
  --cloud-bronze-light: #dfaa8f;
  --cloud-cream: #f8f3ef;
  --cloud-green: #55c98e;
  --cloud-red: #ee6d67;
  --cloud-amber: #d9aa5f;
  --cloud-line: rgba(255,255,255,.12);
  --cloud-muted: rgba(248,243,239,.58);

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  gap: 22px;
  margin-top: clamp(56px, 8vw, 110px);
  padding-bottom: clamp(80px, 10vw, 140px);
}

.cloud-status-copy,
.cloud-status-visual {
  position: relative;
  overflow: hidden;
  min-height: 650px;
  border: 1px solid var(--cloud-line);
  border-radius: 30px;
  box-shadow: 0 30px 90px rgba(26,11,31,.15);
}

.cloud-status-copy {
  padding: clamp(30px, 4.5vw, 58px);
  color: var(--cloud-cream);
  background:
    radial-gradient(circle at 12% 10%, rgba(188,118,85,.16), transparent 23rem),
    linear-gradient(145deg, #392042 0%, var(--cloud-wine) 50%, var(--cloud-wine-deep) 100%);
}

.cloud-status-copy::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.045), transparent 34%);
  content: "";
}

.cloud-status-copy > * {
  position: relative;
  z-index: 2;
}

.cloud-status-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 42px;
}

.cloud-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(217,170,95,.28);
  border-radius: 999px;
  color: #ecd4a8;
  background: rgba(217,170,95,.08);
  font-size: 0.625rem;
  font-weight: 800;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.cloud-live-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cloud-amber);
  box-shadow: 0 0 0 5px rgba(217,170,95,.07), 0 0 15px rgba(217,170,95,.35);
}

.awan-cloud-status[data-cloud-state="online"] .cloud-live-badge {
  color: #a8edc8;
  border-color: rgba(85,201,142,.28);
  background: rgba(85,201,142,.08);
}

.awan-cloud-status[data-cloud-state="online"] .cloud-live-badge i {
  background: var(--cloud-green);
  box-shadow: 0 0 0 5px rgba(85,201,142,.07), 0 0 16px rgba(85,201,142,.4);
}

.awan-cloud-status[data-cloud-state="offline"] .cloud-live-badge {
  color: #ffc3bf;
  border-color: rgba(238,109,103,.28);
  background: rgba(238,109,103,.08);
}

.awan-cloud-status[data-cloud-state="offline"] .cloud-live-badge i {
  background: var(--cloud-red);
  box-shadow: 0 0 0 5px rgba(238,109,103,.07), 0 0 16px rgba(238,109,103,.38);
}

.cloud-status-code {
  color: rgba(248,243,239,.28);
  font-family: "Manrope", sans-serif;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.cloud-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 13px;
  color: var(--cloud-bronze-light);
  font-size: 0.6875rem;
  font-weight: 800;
}

.cloud-eyebrow span {
  width: 22px;
  height: 1px;
  background: currentColor;
}

.cloud-status-copy h3 {
  max-width: 680px;
  margin: 0;
  color: var(--cloud-cream);
  font-size: clamp(2rem, 4vw, 3.1875rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -.035em;
}

[lang="en"] .cloud-status-copy h3 {
  line-height: 1.16;
  letter-spacing: -.045em;
}

.cloud-status-lead {
  max-width: 690px;
  margin: 22px 0 0;
  color: rgba(248,243,239,.69);
  font-size: 0.8125rem;
  line-height: 2;
}

.cloud-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 28px;
}

.cloud-value-grid article {
  min-width: 0;
  min-height: 118px;
  padding: 16px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 17px;
  background: rgba(255,255,255,.035);
}

.cloud-value-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  color: var(--cloud-bronze-light);
  border: 1px solid rgba(223,170,143,.2);
  border-radius: 10px;
  background: rgba(188,118,85,.07);
}

.cloud-value-icon svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cloud-value-grid strong {
  display: block;
  color: rgba(248,243,239,.92);
  font-size: 0.625rem;
  font-weight: 800;
}

.cloud-value-grid small {
  display: block;
  margin-top: 4px;
  color: rgba(248,243,239,.46);
  font-size: 0.5rem;
  line-height: 1.7;
}

.cloud-sales-panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid rgba(223,170,143,.18);
  border-radius: 18px;
  background: rgba(188,118,85,.065);
}

.cloud-sales-panel > div > span {
  color: var(--cloud-bronze-light);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.cloud-sales-panel strong {
  display: block;
  margin-top: 3px;
  color: var(--cloud-cream);
  font-size: 0.8125rem;
  font-weight: 800;
}

.cloud-sales-panel p {
  max-width: 560px;
  margin: 5px 0 0;
  color: rgba(248,243,239,.53);
  font-size: 0.5625rem;
  line-height: 1.75;
}

.cloud-contact-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 17px;
  color: #28142e;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--cloud-bronze-light), #f1c7b0);
  font-size: 0.625rem;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cloud-contact-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 32px rgba(188,118,85,.18);
}

.cloud-contact-button svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[dir="rtl"] .cloud-contact-button svg {
  transform: rotate(180deg);
}

/* --- Live topology panel --- */

.cloud-status-visual {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.5vw, 42px);
  color: var(--cloud-cream);
  background:
    radial-gradient(circle at 50% 48%, rgba(188,118,85,.12), transparent 17rem),
    linear-gradient(160deg, #2b1632 0%, #1b0d21 70%, #120815 100%);
}

.cloud-visual-grid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(223,170,143,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223,170,143,.075) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 76%);
}

.cloud-scan-line {
  position: absolute;
  z-index: -1;
  left: 8%;
  top: 12%;
  width: 84%;
  height: 1px;
  opacity: .34;
  background: linear-gradient(90deg, transparent, var(--cloud-bronze-light), transparent);
  box-shadow: 0 0 18px rgba(223,170,143,.25);
  animation: cloudScan 5.2s ease-in-out infinite;
}

.cloud-overall {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 17px;
  background: rgba(255,255,255,.04);
  transition: border-color .25s ease, background .25s ease;
}

.cloud-overall-orb {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}

.cloud-overall-orb::after {
  position: relative;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cloud-amber);
  box-shadow: 0 0 18px rgba(217,170,95,.55);
  content: "";
}

.cloud-overall-orb i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(217,170,95,.22);
  border-radius: 50%;
  animation: cloudRadar 2s ease-out infinite;
}

.cloud-overall-orb i:nth-child(2) { animation-delay: .75s; }

.cloud-overall small {
  color: rgba(248,243,239,.43);
  font-size: 0.5rem;
  font-weight: 700;
}

.cloud-overall strong {
  display: block;
  margin-top: 1px;
  color: var(--cloud-cream);
  font-size: 0.8125rem;
  font-weight: 800;
}

.cloud-overall p {
  margin: 3px 0 0;
  color: rgba(248,243,239,.48);
  font-size: 0.5rem;
  line-height: 1.65;
}

.awan-cloud-status[data-cloud-state="online"] .cloud-overall {
  border-color: rgba(85,201,142,.24);
  background: rgba(85,201,142,.055);
}

.awan-cloud-status[data-cloud-state="online"] .cloud-overall-orb::after {
  background: var(--cloud-green);
  box-shadow: 0 0 18px rgba(85,201,142,.55);
}

.awan-cloud-status[data-cloud-state="offline"] .cloud-overall {
  border-color: rgba(238,109,103,.22);
  background: rgba(238,109,103,.045);
}

.awan-cloud-status[data-cloud-state="offline"] .cloud-overall-orb::after {
  background: var(--cloud-red);
  box-shadow: 0 0 18px rgba(238,109,103,.48);
}

.cloud-topology {
  position: relative;
  flex: 1 1 auto;
  min-height: 330px;
  margin-top: 10px;
}

.cloud-gateway {
  position: absolute;
  z-index: 4;
  top: 38%;
  left: 50%;
  width: 84px;
  height: 84px;
  transform: translate(-50%,-50%);
}

.cloud-gateway-ring {
  position: absolute;
  border: 1px solid rgba(223,170,143,.22);
  border-radius: 50%;
  animation: cloudBreathe 2.7s ease-in-out infinite;
}

.cloud-gateway-ring.ring-a { inset: -22px; }
.cloud-gateway-ring.ring-b {
  inset: -50px;
  opacity: .48;
  animation-delay: .6s;
}

.cloud-gateway-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(223,170,143,.36);
  border-radius: 50%;
  background: rgba(31,15,37,.96);
  box-shadow: 0 18px 45px rgba(4,2,5,.35);
}

.cloud-gateway-core img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cloud-node {
  position: absolute;
  z-index: 4;
  top: 24%;
  width: 118px;
  min-height: 126px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  padding: 15px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 19px;
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}

.cloud-node-a { left: 0; }
.cloud-node-b { right: 0; }

.cloud-node svg {
  width: 41px;
  fill: none;
  stroke: rgba(248,243,239,.48);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cloud-node strong {
  color: rgba(248,243,239,.76);
  font-size: 0.5rem;
  font-weight: 800;
  text-align: center;
}

.cloud-node small {
  color: rgba(248,243,239,.4);
  font-size: 0.4375rem;
  font-weight: 700;
}

.cloud-node-light {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(248,243,239,.28);
  box-shadow: 0 0 0 5px rgba(248,243,239,.035);
}

[dir="rtl"] .cloud-node-light {
  right: auto;
  left: 11px;
}

.cloud-node[data-node-state="online"] {
  border-color: rgba(85,201,142,.27);
  background: rgba(85,201,142,.055);
}

.cloud-node[data-node-state="online"] svg { stroke: rgba(123,226,174,.88); }

.cloud-node[data-node-state="online"] .cloud-node-light {
  background: var(--cloud-green);
  box-shadow: 0 0 0 5px rgba(85,201,142,.07), 0 0 16px rgba(85,201,142,.42);
}

.cloud-node[data-node-state="offline"] {
  border-color: rgba(238,109,103,.24);
  background: rgba(238,109,103,.045);
}

.cloud-node[data-node-state="offline"] svg { stroke: rgba(238,109,103,.7); }

.cloud-node[data-node-state="offline"] .cloud-node-light {
  background: var(--cloud-red);
  box-shadow: 0 0 0 5px rgba(238,109,103,.07), 0 0 16px rgba(238,109,103,.36);
}

.cloud-node.is-active { transform: translateY(-4px); }

.cloud-link {
  position: absolute;
  z-index: 2;
  top: 39%;
  width: 29%;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
}

.cloud-link-a {
  left: 20%;
  transform: rotate(5deg);
}

.cloud-link-b {
  right: 20%;
  transform: rotate(-5deg);
}

.cloud-link i {
  position: absolute;
  top: 0;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--cloud-bronze-light), transparent);
  animation: cloudPacket 1.8s linear infinite;
}

.cloud-link-b i { animation-delay: .65s; }

.cloud-metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  overflow: hidden;
  margin-top: auto;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.1);
}

.cloud-metrics > div {
  min-width: 0;
  padding: 13px;
  background: rgba(25,12,30,.94);
}

.cloud-metrics span {
  display: block;
  margin-bottom: 3px;
  color: rgba(248,243,239,.4);
  font-size: 0.4375rem;
  font-weight: 700;
}

.cloud-metrics strong {
  display: block;
  overflow: hidden;
  color: rgba(248,243,239,.82);
  font-family: "Manrope","Cairo",sans-serif;
  font-size: 0.5625rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloud-demo-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 9px;
  margin-top: 11px;
}

.cloud-demo-button,
.cloud-refresh-button {
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 11px;
  font-size: 0.5625rem;
  font-weight: 800;
}

.cloud-demo-button {
  position: relative;
  color: #1e1024;
  background: linear-gradient(135deg, var(--cloud-bronze-light), #f2c8b1);
  transition: transform .18s ease, opacity .18s ease;
}

.cloud-demo-button:not(.is-disabled):hover { transform: translateY(-2px); }

.cloud-demo-button.is-disabled {
  color: rgba(248,243,239,.38);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  pointer-events: none;
}

.cloud-demo-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cloud-amber);
  box-shadow: 0 0 0 5px rgba(217,170,95,.07);
}

.awan-cloud-status[data-cloud-state="online"] .cloud-demo-pulse {
  background: var(--cloud-green);
  box-shadow: 0 0 0 5px rgba(85,201,142,.08), 0 0 14px rgba(85,201,142,.3);
}

.awan-cloud-status[data-cloud-state="offline"] .cloud-demo-pulse {
  background: var(--cloud-red);
}

.cloud-demo-button svg,
.cloud-refresh-button svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[dir="rtl"] .cloud-demo-button svg { transform: rotate(180deg); }

.cloud-refresh-button {
  padding: 0 13px;
  color: rgba(248,243,239,.76);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}

.cloud-refresh-button:hover { background: rgba(255,255,255,.07); }
.cloud-refresh-button.is-checking svg { animation: cloudSpin .8s linear infinite; }

.cloud-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 11px 0 0;
  color: rgba(248,243,239,.34);
  font-size: 0.4375rem;
  line-height: 1.65;
}

.cloud-privacy-note svg {
  width: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--cloud-bronze-light);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Existing "Try ZAM" entry points are controlled by the live state. */
[data-zam-launch].cloud-demo-disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  filter: saturate(.55);
}

[data-zam-launch].cloud-demo-disabled::after {
  opacity: .55;
}

[data-zam-launch].cloud-demo-ready {
  position: relative;
}

.header-cta.cloud-demo-ready::before,
.mobile-cta.cloud-demo-ready::before,
.button.cloud-demo-ready::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cloud-green);
  box-shadow: 0 0 0 4px rgba(85,201,142,.08);
  content: "";
}

/* --- motion --- */
@keyframes cloudRadar {
  0% { opacity: .65; transform: scale(.28); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes cloudBreathe {
  0%,100% { opacity: .28; transform: scale(.97); }
  50% { opacity: .68; transform: scale(1.04); }
}

@keyframes cloudPacket {
  from { left: -38%; }
  to { left: 108%; }
}

@keyframes cloudScan {
  0%,100% { top: 14%; opacity: 0; }
  15%,85% { opacity: .35; }
  50% { top: 84%; opacity: .18; }
}

@keyframes cloudSpin { to { transform: rotate(360deg); } }

/* --- responsive --- */
@media (max-width: 980px) {
  .awan-cloud-status {
    grid-template-columns: 1fr;
  }

  .cloud-status-copy,
  .cloud-status-visual {
    min-height: auto;
  }

  .cloud-status-visual {
    min-height: 610px;
  }
}

@media (max-width: 680px) {
  .awan-cloud-status {
    margin-top: 45px;
    padding-bottom: 80px;
  }

  .cloud-status-copy,
  .cloud-status-visual {
    border-radius: 22px;
  }

  .cloud-status-copy {
    padding: 26px 20px;
  }

  .cloud-status-heading {
    margin-bottom: 30px;
  }

  .cloud-status-code {
    display: none;
  }

  .cloud-value-grid {
    grid-template-columns: 1fr;
  }

  .cloud-value-grid article {
    min-height: auto;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    align-items: center;
    gap: 10px;
  }

  .cloud-value-icon {
    margin: 0;
  }

  .cloud-sales-panel {
    grid-template-columns: 1fr;
  }

  .cloud-contact-button {
    width: 100%;
  }

  .cloud-status-visual {
    min-height: 580px;
    padding: 22px 18px;
  }

  .cloud-topology {
    min-height: 300px;
  }

  .cloud-gateway {
    top: 39%;
    width: 72px;
    height: 72px;
  }

  .cloud-node {
    top: 27%;
    width: 98px;
    min-height: 112px;
    padding: 12px 7px;
  }

  .cloud-node-a { left: 0; }
  .cloud-node-b { right: 0; }

  .cloud-link-a {
    left: 16%;
    width: 35%;
  }

  .cloud-link-b {
    right: 16%;
    width: 35%;
  }

  .cloud-metrics {
    grid-template-columns: 1fr;
  }

  .cloud-demo-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .awan-cloud-status *,
  .awan-cloud-status *::before,
  .awan-cloud-status *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Readable service details and touch targets — 2026-09-11. */
.cloud-status-copy,.cloud-status-visual{min-width:0}
.cloud-status-heading{flex-wrap:wrap;gap:12px}
.cloud-live-badge{font-size:0.875rem;padding:8px 12px;line-height:1.7}
.cloud-live-badge i{flex-shrink:0}
.cloud-status-code{font-size:0.75rem;color:rgba(248,243,239,.68)}
.cloud-eyebrow,.cloud-value-grid strong,.cloud-contact-button{font-size:0.9375rem}
.cloud-status-lead,.cloud-sales-panel strong,.cloud-overall strong{font-size:1.125rem}
.cloud-value-grid small,.cloud-sales-panel>div>span,.cloud-sales-panel p,
.cloud-overall small,.cloud-overall p,.cloud-node small,.cloud-metrics span,
.cloud-privacy-note{font-size:0.875rem;line-height:1.8;color:rgba(248,243,239,.74)}
.cloud-node strong,.cloud-metrics strong{font-size:0.875rem;line-height:1.7}
.cloud-metrics strong{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.cloud-value-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cloud-sales-panel{grid-template-columns:1fr;gap:16px}
.cloud-contact-button{white-space:normal;padding:12px 17px}
.cloud-demo-button,.cloud-refresh-button{min-height:54px;padding:12px 16px;font-size:0.9375rem;line-height:1.7}
.cloud-demo-button{min-height:70px;font-size:1.25rem}
.cloud-demo-button svg{width:24px;flex-shrink:0}
.cloud-demo-pulse{width:10px;height:10px;flex-shrink:0}
.cloud-demo-actions{grid-template-columns:1fr}
.cloud-node{width:110px;min-height:145px}
.cloud-topology{min-height:340px}
@media(min-width:981px) and (max-width:1200px){
  .awan-cloud-status{grid-template-columns:1fr}
  .cloud-status-copy,.cloud-status-visual{min-height:auto}
}
@media(max-width:680px){
  .cloud-value-grid{grid-template-columns:1fr}
  .cloud-status-copy,.cloud-status-visual{padding:24px 18px}
  .cloud-status-copy h3{font-size:clamp(1.8125rem,8vw,2.375rem)}
  .cloud-status-heading{margin-bottom:24px}
  .cloud-overall{grid-template-columns:36px minmax(0,1fr);padding:14px 12px;gap:10px}
  .cloud-overall-orb{width:34px;height:34px}
  .cloud-topology{min-height:340px;flex:none}
  .cloud-gateway{top:22%;width:80px;height:80px}
  .cloud-node{top:49%;width:calc(50% - 9px);min-height:150px;padding:16px 8px}
  .cloud-link{top:43%;width:34%}
  .cloud-link-a{left:18%;transform:rotate(-50deg)}
  .cloud-link-b{right:18%;transform:rotate(50deg)}
  .cloud-metrics>div{padding:14px}
  .cloud-refresh-button{min-height:48px}
}

/* Reflow status details when text is enlarged. */
.cloud-status-copy h3{overflow-wrap:break-word}
.cloud-value-grid strong{font-size:1rem;line-height:1.7}
.cloud-value-grid small,.cloud-sales-panel p,.cloud-overall p,.cloud-metrics span,.cloud-privacy-note{font-size:0.875rem}
.cloud-topology{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:22px 16px;padding:40px 0 28px;min-height:0;flex:none}
.cloud-gateway{position:relative;top:auto;left:auto;transform:none;grid-column:1/-1;justify-self:center;width:80px;height:80px;margin-bottom:22px}
.cloud-node{position:relative;top:auto;left:auto;right:auto;width:100%;min-height:150px;grid-row:2;transform:none!important;gap:10px}
.cloud-node strong,.cloud-node small{font-size:0.875rem;line-height:1.7;text-align:center;overflow-wrap:anywhere}
.cloud-link{display:none}
.cloud-metrics{grid-template-columns:1fr}
.cloud-metrics>div{padding:14px 16px}
.cloud-metrics strong{font-size:1rem}
.cloud-demo-button,.cloud-refresh-button{white-space:normal;text-align:center;max-width:100%}
.cloud-demo-button span:not(.cloud-demo-pulse){min-width:0;overflow-wrap:anywhere}
@media(max-width:820px){
  .awan-cloud-status{grid-template-columns:minmax(0,1fr)}
  .cloud-value-grid{grid-template-columns:1fr}
  .cloud-value-grid article{min-height:0;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px}
  .cloud-value-icon{margin:0}
  .cloud-status-copy,.cloud-status-visual{min-height:0;padding:24px 20px}
  .cloud-overall{grid-template-columns:34px minmax(0,1fr)}
  .cloud-status-code{display:none}
}
@media(max-width:560px){
  .cloud-status-copy,.cloud-status-visual{padding:22px 16px}
  .cloud-status-copy h3{font-size:1.8125rem;line-height:1.5}
  [lang=en] .cloud-status-copy h3{line-height:1.3}
  .cloud-live-badge{font-size:0.875rem}
  .cloud-sales-panel{padding:16px}
  .cloud-demo-button{font-size:1.125rem;padding-inline:12px;gap:10px}
  .cloud-node{padding:16px 8px}
  .cloud-gateway-ring.ring-b{inset:-30px}
}

/* ZAM Cloud topology — connected, state-aware and responsive. */
.cloud-status-visual{
  padding:clamp(22px,3vw,40px);
  border:1px solid rgba(223,170,143,.25);
  background:radial-gradient(ellipse at 50% 30%,rgba(120,88,168,.14),transparent 58%),linear-gradient(155deg,#302039 0%,#1b0d21 68%,#170b1d 100%);
  box-shadow:0 28px 70px rgba(26,11,31,.18),inset 0 1px 0 rgba(255,255,255,.06);
}
.cloud-status-visual .cloud-scan-line{display:none}
.cloud-overall{
  padding:20px;gap:16px;border-radius:18px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.cloud-overall small{font-size:.8125rem;letter-spacing:.015em}
.cloud-overall strong{font-size:1.3125rem;line-height:1.6;margin-top:4px}
.cloud-overall p{font-size:.9375rem;line-height:1.8;margin-top:6px}
.cloud-topology{
  isolation:isolate;direction:ltr;position:relative;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  padding:36px 0 28px;gap:86px 20px;min-height:0;
}
.cloud-gateway{
  position:relative;top:auto;left:auto;transform:none;
  grid-column:1/-1;grid-row:1;justify-self:center;
  width:104px;height:104px;margin:0;z-index:3;
}
.cloud-gateway-core{
  padding:18px;border-radius:28px;
  border:1px solid rgba(239,198,142,.6);
  background:linear-gradient(145deg,#49314f,#24122d);
  box-shadow:0 16px 32px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16);
}
.cloud-gateway-ring{border-radius:36px;border-color:rgba(239,198,142,.17);animation:none}
.cloud-gateway-ring.ring-a{inset:-8px}
.cloud-gateway-ring.ring-b{display:none}
.cloud-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.cloud-wire-trunk,.cloud-wire,.cloud-wire-flow{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cloud-wire-trunk{stroke:var(--cloud-bronze-light);stroke-width:2.5}
.cloud-wire{stroke:rgba(223,170,143,.48);stroke-width:2;stroke-dasharray:5 6}
.cloud-wire-flow{stroke:var(--cloud-green);stroke-width:3;stroke-dasharray:8 32;opacity:0}
.cloud-node{
  position:relative;grid-row:2;top:auto;left:auto;right:auto;
  width:100%;min-width:0;min-height:180px;
  padding:25px 14px 20px;gap:12px;z-index:2;
  border-radius:18px;background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 26px rgba(0,0,0,.12);
  transform:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.cloud-node-a{grid-column:1}
.cloud-node-b{grid-column:2}
[dir=rtl] .cloud-node{direction:rtl}
[dir=ltr] .cloud-node{direction:ltr}
.cloud-node::before{
  content:"";position:absolute;top:-5px;left:calc(50% - 5px);width:10px;height:10px;
  border:2px solid var(--cloud-bronze-light);border-radius:50%;background:#291630;
}
.cloud-node svg{width:42px;height:42px;margin-bottom:2px}
.cloud-node strong{font-size:1rem;line-height:1.65;font-weight:800;color:var(--cloud-cream);max-width:100%}
.cloud-node small{font-size:.875rem;line-height:1.8;color:rgba(248,243,239,.72);max-width:100%}
.cloud-node-light{top:15px;right:15px;width:6px;height:6px;box-shadow:none}
[dir=rtl] .cloud-node-light{left:15px;right:auto}
.cloud-node[data-node-state=online]{border-color:rgba(85,201,142,.32);background:linear-gradient(155deg,rgba(85,201,142,.09),rgba(255,255,255,.025))}
.cloud-node[data-node-state=online]::before{border-color:var(--cloud-green)}
.cloud-node[data-node-state=offline]::before{border-color:var(--cloud-red)}
.cloud-node.is-active[data-node-state=online]{border-color:rgba(85,201,142,.62);box-shadow:0 0 0 1px rgba(85,201,142,.09),0 14px 35px rgba(0,0,0,.2)}
.cloud-node.is-active[data-node-state=online] small{color:#a8edc8}
.cloud-topology:has([data-cloud-node=server1][data-node-state=online]) [data-cloud-wire=server1],
.cloud-topology:has([data-cloud-node=server2][data-node-state=online]) [data-cloud-wire=server2]{stroke:rgba(85,201,142,.7);stroke-dasharray:none}
.cloud-topology:has([data-cloud-node=server1][data-node-state=offline]) [data-cloud-wire=server1],
.cloud-topology:has([data-cloud-node=server2][data-node-state=offline]) [data-cloud-wire=server2]{stroke:rgba(238,109,103,.65);stroke-dasharray:5 6}
.cloud-topology:has([data-cloud-node=server1].is-active[data-node-state=online]) [data-cloud-wire-flow=server1],
.cloud-topology:has([data-cloud-node=server2].is-active[data-node-state=online]) [data-cloud-wire-flow=server2]{opacity:.95;animation:cloudWireFlow 2.8s linear infinite}
@keyframes cloudWireFlow{to{stroke-dashoffset:-80}}
.cloud-metrics{border-color:rgba(255,255,255,.12);border-radius:14px;background:transparent;gap:0}
.cloud-metrics>div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;background:rgba(255,255,255,.025);padding:14px 16px}
.cloud-metrics>div+div{border-top:1px solid rgba(255,255,255,.08)}
.cloud-metrics span{font-size:.875rem;margin:0;line-height:1.7}
.cloud-metrics strong{font-size:.9375rem;text-align:end;line-height:1.7}
.cloud-demo-actions{gap:10px;margin-top:18px}
.cloud-demo-button{border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.cloud-demo-button.is-disabled{box-shadow:none}
.cloud-refresh-button{border-radius:12px}
@media(max-width:560px){
  .cloud-status-visual{padding:22px 16px;border-radius:24px}
  .cloud-overall{padding:16px 14px;grid-template-columns:28px minmax(0,1fr);gap:10px}
  .cloud-overall-orb{width:26px;height:26px}
  .cloud-overall strong{font-size:1.1875rem}
  .cloud-overall p{font-size:.875rem}
  .cloud-topology{padding-top:32px;gap:70px 12px;padding-bottom:24px}
  .cloud-gateway{width:92px;height:92px}
  .cloud-gateway-core{padding:16px;border-radius:24px}
  .cloud-gateway-ring{border-radius:32px}
  .cloud-node{padding:25px 10px 18px;min-height:170px;gap:10px}
  .cloud-node strong{font-size:.9375rem}
  .cloud-node small{font-size:.875rem}
  .cloud-node svg{width:36px;height:36px}
  .cloud-metrics>div{gap:12px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.cloud-wire-flow{animation:none!important;stroke-dasharray:none}}
[dir=rtl] .cloud-node-a{grid-column:2}
[dir=rtl] .cloud-node-b{grid-column:1}