/*
 * ALZA responsive layer
 * Mobile-first layout rules loaded after master.css.
 * Breakpoints: 40rem / 640px, 48rem / 768px, 64rem / 1024px,
 * 80rem / 1280px, 100rem / 1600px.
 */

:root {
  --header: 72px;
  --max: 1440px;
  --page-gutter: 16px;
  --section-space: clamp(64px, 9vw, 112px);
}

html {
  min-width: 320px;
  overflow-x: clip;
}

body {
  min-width: 320px;
  overflow-x: clip;
}

main,
section,
header,
footer,
article,
figure,
form,
nav,
div {
  min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

.container,
.narrow {
  width: min(calc(100% - (2 * var(--page-gutter))), var(--max));
  margin-inline: auto;
}

.narrow {
  max-width: 780px;
}

.section {
  padding-block: var(--section-space);
}

.section-sm {
  padding-block: clamp(48px, 7vw, 76px);
}

h1 {
  font-size: clamp(2.35rem, 12vw, 3.7rem);
  overflow-wrap: anywhere;
}

h2 {
  font-size: clamp(1.85rem, 8vw, 3rem);
  overflow-wrap: anywhere;
}

h3,
h4,
p,
li,
dd,
dt,
a,
button,
label,
input,
select,
textarea {
  overflow-wrap: anywhere;
}

.lead {
  font-size: clamp(1rem, 3.8vw, 1.15rem);
}

.actions {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.actions .btn {
  width: 100%;
}

.btn,
.nav-toggle,
.app-tab,
.tab-button,
.faq-question {
  min-height: 44px;
}

/* Header and mobile navigation */
.site-header {
  height: var(--header);
}

.contact-bar {
  display: none;
}

.nav-wrap {
  height: var(--header);
  gap: 12px;
}

.brand {
  min-width: 0;
  max-width: calc(100% - 58px);
  flex: 1 1 auto;
  gap: 9px;
}

.brand-logo {
  width: 46px;
  height: 42px;
  flex: 0 0 auto;
}

.brand-copy {
  min-width: 0;
}

.brand-copy strong {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.brand-copy span {
  display: block;
  max-width: 210px;
  margin-top: 4px;
  overflow: hidden;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy small {
  display: none;
}

.nav-toggle {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-content: center;
}

.desktop-nav {
  position: fixed;
  inset: var(--header) 0 0;
  z-index: 95;
  display: none;
  align-content: start;
  gap: 0;
  padding: 18px var(--page-gutter) 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(2, 12, 29, 0.985);
  border-top: 1px solid rgba(111, 176, 239, 0.18);
  -webkit-overflow-scrolling: touch;
}

.desktop-nav.open {
  display: grid;
}

.desktop-nav a,
.desktop-nav .btn {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(111, 176, 239, 0.14);
  font-size: 1rem;
}

.desktop-nav a::after {
  display: none !important;
}

.desktop-nav .btn {
  justify-content: center;
  margin-top: 16px;
  border-bottom: 0;
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* Home hero */
.page-index .hero.hero-branded {
  min-height: 0;
  padding-bottom: 180px;
  background:
    linear-gradient(180deg, #020a18 0%, rgba(2, 10, 24, 0.98) 55%, rgba(2, 10, 24, 0.72) 77%, rgba(2, 10, 24, 0.2) 100%),
    url("../img/hero-cloud-migration-v21.webp?v=42") center bottom / 100% auto no-repeat,
    #020a18;
}

.page-index .hero.hero-branded .hero-grid {
  min-height: 0;
  display: block;
}

.page-index .hero.hero-branded .hero-copy {
  max-width: 720px;
  padding: 54px 0 24px;
}

.page-index .hero.hero-branded h1 {
  max-width: 100%;
  font-size: clamp(2.4rem, 12vw, 3.8rem);
}

.page-index .hero.hero-branded .lead {
  max-width: 100%;
}

.page-index .proof-strip-shell {
  margin-top: 0;
}

.proof-strip {
  border-radius: 18px;
  overflow: hidden;
}

.proof-grid {
  min-height: 0;
  grid-template-columns: 1fr;
  gap: 0;
}

.proof-grid > div {
  padding: 17px 16px;
  border-right: 0;
  border-bottom: 1px solid rgba(110, 172, 233, 0.16);
}

.proof-grid > div:last-child {
  border-bottom: 0;
}

/* Generic responsive grids */
.heading-row,
.two-col,
.tabs,
.contact-hero-grid,
.solutions-hero-grid {
  grid-template-columns: 1fr;
  gap: 32px;
}

.heading-row {
  margin-bottom: 34px;
}

.cards,
.resource-grid,
.use-case-grid,
.pricing-grid,
.pricing-value-grid,
.plan-grid,
.license-control-grid,
.signal-grid,
.feature-grid,
.field-grid,
.process,
.footer-grid {
  grid-template-columns: 1fr;
}

.cards,
.resource-grid,
.use-case-grid,
.pricing-grid,
.pricing-value-grid,
.plan-grid,
.license-control-grid,
.signal-grid,
.feature-grid,
.process {
  gap: 18px;
}

.card,
.resource-card,
.use-case,
.form-card,
.glass-panel,
.tab-panel,
.cutover-stage,
.plan-card,
.price-card {
  padding: 24px;
}

.card,
.resource-card,
.use-case,
.plan-card,
.price-card {
  min-width: 0;
}

.service-six {
  grid-template-columns: 1fr;
}

.two-col-start {
  align-items: stretch;
}

/* Tabs */
.tabs {
  display: grid;
}

.tab-list,
.app-tabs {
  display: flex;
  gap: 8px;
  padding-bottom: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.tab-button,
.app-tab {
  min-width: max-content;
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
}

.tab-panel {
  min-height: 0;
}

/* Architecture and flows */
.architecture-layout {
  grid-template-columns: 1fr;
}

.architecture-diagram-figure,
.solutions-hero-media,
.contact-hero-media {
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
}

.architecture-diagram-image,
.solutions-hero-media img,
.contact-hero-media img {
  width: 100%;
  object-fit: contain;
}

.data-path,
.cutover-flow {
  grid-template-columns: 1fr;
}

.flow-arrow,
.cutover-connector {
  transform: rotate(90deg);
  text-align: center;
}

.boundary-diagram {
  min-height: 0;
  padding: 58px 18px 20px;
}

.cutover-stage {
  min-height: 0;
}

/* Page heroes */
.page-hero,
.page-hero.cloud-page-hero {
  min-height: 0;
  padding: 64px 0 56px;
}

.page-hero.cloud-page-hero::before {
  inset: 38% -10% 0 0;
  background-position: right bottom !important;
  background-size: contain !important;
  opacity: 0.4;
}

.page-hero.cloud-page-hero::after {
  background: linear-gradient(180deg, #031026 0%, rgba(3, 16, 38, 0.95) 58%, rgba(3, 16, 38, 0.55) 100%) !important;
}

.page-hero h1,
.page-hero.cloud-page-hero h1 {
  max-width: 100%;
  font-size: clamp(2.35rem, 11vw, 3.6rem);
}

.page-hero .lead,
.page-hero.cloud-page-hero .lead {
  max-width: 100%;
}

.solutions-hero-media,
.contact-hero-media {
  border-radius: 20px;
}

.solutions-hero-media figcaption,
.contact-hero-media figcaption {
  padding: 12px 14px;
}

/* Pricing */
.pricing-section-head {
  margin-bottom: 30px;
  text-align: left;
}

.plan-card {
  padding: 24px 20px 20px;
}

.plan-card h3 {
  min-height: 0;
}

.plan-price strong {
  font-size: clamp(1.9rem, 8vw, 2.35rem);
}

.plan-facts {
  margin-block: 18px;
}

.pricing-disclaimer {
  display: block;
  padding: 14px 16px;
  text-align: left;
}

body.page-pricing .pricing-hero {
  min-height: 360px;
}

body.page-pricing .pricing-hero::before {
  inset: 40% -10% 0 0;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.62;
}

.live-rays-overlay .ray-1,
.live-rays-overlay .ray-2,
.live-rays-overlay .ray-3,
.live-rays-overlay .ray-4 {
  width: 70vw;
  min-width: 210px;
  right: 4%;
}

/* FAQ */
.faq {
  padding: 10px;
  border-radius: 20px;
}

.faq-item {
  border-radius: 15px;
}

.faq-question {
  padding: 18px 16px;
  font-size: 0.98rem;
}

.faq-answer {
  padding: 0 16px 18px;
}

/* Forms and modals */
.field-full {
  grid-column: auto;
}

.form-card {
  width: 100%;
}

input,
select,
textarea {
  min-height: 46px;
  font-size: 16px;
}

textarea {
  min-height: 132px;
}

.modal {
  align-items: end;
  padding: 0;
}

.modal-dialog {
  width: 100%;
  max-height: min(92dvh, 760px);
  padding: 28px 18px 22px;
  border-radius: 22px 22px 0 0;
}

.consent-banner {
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: auto;
  flex-direction: column;
  align-items: stretch;
}

.consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Tables and long-form content */
.prose,
.article-header,
.article {
  min-width: 0;
}

.prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.prose pre,
.prose code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.release-meta {
  grid-template-columns: 1fr;
}

/* CTA and footer */
.cta-band {
  padding: 36px 22px;
  border-radius: 22px;
}

.footer-grid {
  gap: 32px;
}

.footer-brand .brand {
  max-width: 100%;
}

.footer-bottom {
  display: grid;
  gap: 10px;
  margin-top: 36px;
}

.site-footer {
  margin-inline: 8px;
  padding: 42px 0 22px;
  border-radius: 24px;
}

.whatsapp-chat {
  right: 14px;
  bottom: 14px;
  width: 52px;
  height: 52px;
  min-height: 52px;
  border-radius: 16px;
}

.whatsapp-chat img,
.whatsapp-icon {
  width: 27px;
  height: 27px;
}

/* Small tablets */
@media (min-width: 40rem) {
  :root {
    --page-gutter: 24px;
  }

  .actions {
    display: flex;
    width: auto;
  }

  .actions .btn {
    width: auto;
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-grid > div:nth-child(odd) {
    border-right: 1px solid rgba(110, 172, 233, 0.16);
  }

  .cards,
  .resource-grid,
  .use-case-grid,
  .pricing-value-grid,
  .signal-grid,
  .feature-grid,
  .field-grid,
  .process,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-full {
    grid-column: 1 / -1;
  }

  .plan-grid,
  .license-control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .release-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .modal {
    place-items: center;
    padding: 20px;
  }

  .modal-dialog {
    width: min(100%, 590px);
    padding: 34px;
    border-radius: 22px;
  }

  .site-footer {
    margin-inline: 14px;
  }
}

/* Tablets */
@media (min-width: 48rem) {
  :root {
    --page-gutter: 32px;
  }

  h1 {
    font-size: clamp(3rem, 7vw, 4.6rem);
  }

  h2 {
    font-size: clamp(2.25rem, 5vw, 3.35rem);
  }

  .brand-logo {
    width: 52px;
    height: 48px;
  }

  .brand-copy strong {
    font-size: 1.3rem;
  }

  .brand-copy span {
    max-width: none;
    font-size: 0.64rem;
  }

  .page-index .hero.hero-branded {
    padding-bottom: 290px;
  }

  .page-index .hero.hero-branded .hero-copy {
    padding-top: 70px;
  }

  .proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proof-grid > div {
    border-right: 1px solid rgba(110, 172, 233, 0.16);
  }

  .proof-grid > div:nth-child(3n) {
    border-right: 0;
  }

  .service-six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  .app-tab {
    min-width: 0;
    white-space: normal;
  }

  .cta-band {
    padding: 52px 42px;
  }
}

/* Wide tablets and compact laptops */
@media (min-width: 60rem) {
  .cards,
  .resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Laptops: switch to desktop navigation */
@media (min-width: 72rem) {
  :root {
    --header: 118px;
    --page-gutter: 36px;
  }

  .site-header {
    height: var(--header);
  }

  .contact-bar {
    display: block;
    height: 38px;
  }

  .contact-bar-inner {
    gap: clamp(12px, 1.5vw, 26px);
    font-size: clamp(0.66rem, 0.8vw, 0.75rem);
  }

  .nav-wrap {
    height: 80px;
  }

  .brand {
    max-width: none;
    min-width: 235px;
    flex: 0 1 auto;
  }

  .brand-logo {
    width: 62px;
    height: 54px;
  }

  .brand-copy strong {
    font-size: 1.48rem;
  }

  .brand-copy span {
    font-size: 0.67rem;
  }

  .brand-copy small {
    display: block;
  }

  .nav-toggle {
    display: none;
  }

  .desktop-nav,
  .desktop-nav.open {
    position: static;
    inset: auto;
    z-index: auto;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 22px);
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
  }

  .desktop-nav a,
  .desktop-nav .btn {
    width: auto;
    min-height: 42px;
    padding: 0;
    border: 0;
    font-size: clamp(0.76rem, 0.9vw, 0.9rem);
    white-space: nowrap;
  }

  .desktop-nav a:not(.btn)::after {
    display: block !important;
  }

  .desktop-nav .btn {
    margin-top: 0;
    padding-inline: 16px;
  }

  body.menu-open {
    overflow: auto;
    touch-action: auto;
  }

  .page-index .hero.hero-branded {
    min-height: 820px;
    padding-bottom: 42px;
    background:
      linear-gradient(90deg, #020a18 0%, rgba(2, 10, 24, 0.98) 26%, rgba(2, 10, 24, 0.76) 47%, rgba(2, 10, 24, 0.18) 69%, rgba(2, 10, 24, 0.04) 100%),
      url("../img/hero-cloud-migration-v21.webp?v=42") center center / contain no-repeat,
      #020a18;
  }

  .page-index .hero.hero-branded .hero-grid {
    min-height: 660px;
    display: grid;
    grid-template-columns: minmax(0, 700px);
    align-items: center;
  }

  .page-index .hero.hero-branded .hero-copy {
    padding: 72px 0 44px;
  }

  .page-index .hero.hero-branded h1 {
    font-size: clamp(3.7rem, 5.3vw, 5.45rem);
  }

  .proof-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .proof-grid > div,
  .proof-grid > div:nth-child(3n) {
    border-right: 1px solid rgba(110, 172, 233, 0.16);
    border-bottom: 0;
  }

  .proof-grid > div:last-child {
    border-right: 0;
  }

  .heading-row {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
    gap: clamp(44px, 6vw, 80px);
  }

  .two-col,
  .contact-hero-grid,
  .solutions-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
    gap: clamp(38px, 5vw, 70px);
  }

  .tabs {
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
    gap: 36px;
  }

  .tab-list {
    display: grid;
    overflow: visible;
  }

  .tab-button {
    min-width: 0;
    white-space: normal;
  }

  .cards,
  .resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .use-case-grid,
  .pricing-value-grid,
  .signal-grid,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process,
  .license-control-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .data-path {
    grid-template-columns: 1fr auto 1.15fr auto 1fr;
  }

  .cutover-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
  }

  .flow-arrow,
  .cutover-connector {
    transform: none;
  }

  .page-hero,
  .page-hero.cloud-page-hero {
    padding: 96px 0 82px;
  }

  .page-hero.cloud-page-hero::before {
    inset: 0 0 0 45%;
    background-position: center right !important;
    background-size: cover !important;
    opacity: 0.5;
  }

  .page-hero.cloud-page-hero::after {
    background: linear-gradient(90deg, #031026 0%, #031026 32%, rgba(3, 16, 38, 0.78) 58%, rgba(3, 16, 38, 0.18) 100%), linear-gradient(0deg, #041329 0%, transparent 45%) !important;
  }

  .pricing-section-head {
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1.45fr 1.05fr 0.8fr 0.9fr;
    gap: clamp(28px, 4vw, 48px);
  }

  .footer-bottom {
    display: flex;
  }

  .site-footer {
    margin-inline: 18px;
  }
}

/* Large laptops and desktops */
@media (min-width: 80rem) {
  :root {
    --page-gutter: 48px;
  }

  .plan-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .desktop-nav {
    gap: clamp(16px, 1.35vw, 24px);
  }

  .desktop-nav a,
  .desktop-nav .btn {
    font-size: 0.9rem;
  }
}

/* Ultra-wide displays: limit line lengths while retaining generous canvas */
@media (min-width: 100rem) {
  :root {
    --max: 1520px;
  }

  .page-index .hero.hero-branded {
    background-size: min(100%, 1920px) auto;
  }

  .page-index .hero.hero-branded .hero-copy {
    max-width: 720px;
  }
}

@media (orientation: landscape) and (max-height: 34rem) and (max-width: 72rem) {
  .desktop-nav {
    padding-top: 8px;
  }

  .desktop-nav a,
  .desktop-nav .btn {
    min-height: 44px;
    padding-block: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-nav,
  .nav-toggle,
  .nav-toggle::before,
  .nav-toggle::after,
  .nav-toggle span {
    transition: none !important;
  }
}


/* ===== BUILD 32: FULL WEBP VISIBILITY + STABLE BRAND ICON ===== */
/* Content images always retain their complete intrinsic frame. */
img[src$=".webp?v=42"] {
  max-width: 100%;
  height: auto;
}
.architecture-diagram-image,
.solutions-hero-media img,
.contact-hero-media img,
.media-banner img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}
.architecture-diagram-figure,
.solutions-hero-media,
.contact-hero-media,
.media-banner {
  height: auto !important;
  max-height: none !important;
  overflow: hidden;
}

/* Generic inner-page artwork: never crop animated WebP frames. */
.page-hero.cloud-page-hero::before {
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: right center !important;
}

/* Homepage full artwork. */
.page-index .hero.hero-branded {
  background-size: auto, contain, auto !important;
  background-position: center, center center, center !important;
  background-repeat: no-repeat !important;
}

/* Pricing artwork must remain complete at tablet widths too. */
body.page-pricing .pricing-hero::before {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
}

@media (max-width: 767px) {
  /* Reserve a dedicated lower visual area on phones, avoiding text overlap. */
  .page-hero.cloud-page-hero:not(.contact-hero):not(.pricing-hero) {
    padding-bottom: clamp(190px, 53vw, 330px) !important;
  }
  .page-hero.cloud-page-hero:not(.contact-hero):not(.pricing-hero)::before {
    inset: auto 0 0 0 !important;
    height: clamp(180px, 50vw, 310px);
    background-size: contain !important;
    background-position: center bottom !important;
    opacity: .48;
  }
  .page-index .hero.hero-branded {
    background-size: auto, 100% auto, auto !important;
    background-position: center, center bottom, center !important;
  }
  body.page-pricing .pricing-hero::before {
    inset: auto 0 0 0 !important;
    height: clamp(170px, 48vw, 300px);
    background-size: contain !important;
    background-position: center bottom !important;
  }
}

@media (min-width: 768px) and (max-width: 1151px) {
  .page-hero.cloud-page-hero::before {
    inset: 12% 0 0 34% !important;
    background-size: contain !important;
  }
  body.page-pricing .pricing-hero::before {
    inset: 8% 0 0 34% !important;
    background-size: contain !important;
  }
}

@media (min-width: 1152px) {
  .page-hero.cloud-page-hero::before {
    inset: 0 max(18px, calc((100vw - var(--max)) / 2)) 0 43% !important;
    background-size: contain !important;
  }
  body.page-pricing .pricing-hero::before {
    inset: 0 max(18px, calc((100vw - var(--max)) / 2)) 0 40% !important;
    background-size: contain !important;
  }
}


/* ==========================================================================\n   ALZA BUILD 36 — RESPONSIVE LAYOUT CORRECTION\n   Final cascade layer. Explicit pixel breakpoints avoid inconsistent layouts\n   caused by browser font scaling. Animated WebP artwork remains enabled.\n   ========================================================================== */

html, body { max-width: 100%; overflow-x: hidden; }
body { min-width: 320px; }
.container, .narrow {
  width: min(calc(100% - 32px), var(--max)) !important;
  margin-inline: auto;
}
main, section, article, header, footer, nav, div, figure, form { min-width: 0; }
img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; }

/* Stable mobile header and a real navigation drawer. */
@media (max-width: 1199px) {
  :root { --header: 72px; --page-gutter: 16px; }
  .contact-bar { display: none !important; }
  .site-header {
    height: var(--header) !important;
    position: sticky !important;
    top: 0;
    z-index: 200;
  }
  .nav-wrap { height: var(--header) !important; gap: 10px !important; }
  .brand { min-width: 0 !important; max-width: calc(100% - 58px) !important; flex: 1 1 auto; }
  .brand-logo { width: 48px !important; height: 44px !important; flex: 0 0 auto; }
  .brand-copy strong { font-size: 1.08rem !important; }
  .brand-copy span { display: block !important; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .58rem !important; }
  .brand-copy small { display: none !important; }
  .nav-toggle { display: grid !important; width: 46px; height: 46px; flex: 0 0 46px; place-content: center; z-index: 202; }
  .desktop-nav,
  .desktop-nav.open {
    position: fixed !important;
    inset: var(--header) 0 0 auto !important;
    z-index: 199 !important;
    display: flex !important;
    width: min(90vw, 410px) !important;
    max-width: 100% !important;
    height: calc(100dvh - var(--header)) !important;
    max-height: calc(100dvh - var(--header)) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 18px 18px max(28px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: rgba(2, 12, 29, .995) !important;
    border: 0 !important;
    border-left: 1px solid rgba(111,176,239,.20) !important;
    box-shadow: -24px 0 60px rgba(0,0,0,.42) !important;
    transform: translate3d(105%,0,0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .24s ease, opacity .2s ease, visibility 0s linear .24s;
  }
  .desktop-nav.open {
    transform: translate3d(0,0,0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .desktop-nav a,
  .desktop-nav .btn {
    display: flex !important;
    width: 100% !important;
    min-height: 52px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 13px 12px !important;
    color: #dcecff !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(111,176,239,.14) !important;
    border-radius: 0 !important;
    font-size: .98rem !important;
  }
  .desktop-nav a[aria-current="page"] { color: #fff !important; background: rgba(20,134,232,.13); }
  .desktop-nav a::after { display: none !important; }
  .desktop-nav .btn {
    justify-content: center !important;
    min-height: 48px !important;
    margin-top: 16px !important;
    border: 1px solid rgba(68,190,255,.35) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg,#13bff2,#086dff) !important;
  }
  body.menu-open { overflow: hidden !important; touch-action: none; }
  body.menu-open::before {
    content: "";
    position: fixed;
    inset: var(--header) 0 0;
    z-index: 198;
    background: rgba(0,6,17,.62);
    backdrop-filter: blur(2px);
  }
}

@media (max-width: 520px) {
  .desktop-nav, .desktop-nav.open { width: 100% !important; }
  .brand-copy span { max-width: 148px; }
}

/* Homepage hero: actual responsive artwork, no artificial blank visual reserve. */
.page-index .hero.hero-branded {
  min-height: 0 !important;
  padding: 0 0 32px !important;
  background:
    radial-gradient(circle at 82% 22%, rgba(12,102,224,.17), transparent 36%),
    linear-gradient(135deg,#020a18 0%,#03142d 58%,#020d20 100%) !important;
}
.page-index .hero.hero-branded::before { opacity: .04 !important; }
.page-index .hero.hero-branded .hero-grid {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 22px !important;
  align-items: center !important;
  padding-top: clamp(44px,8vw,72px) !important;
}
.page-index .hero.hero-branded .hero-copy {
  max-width: 760px !important;
  padding: 0 !important;
}
.page-index .hero.hero-branded h1 {
  max-width: 100% !important;
  margin-bottom: .48em !important;
  font-size: clamp(2.08rem, 6.5vw, 3.4rem) !important;
  line-height: 1.12 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.page-index .hero.hero-branded .lead {
  max-width: 700px !important;
  font-size: clamp(.98rem,2.4vw,1.08rem) !important;
  line-height: 1.7 !important;
}
.home-hero-media {
  position: relative;
  width: 100%;
  margin: 2px 0 0;
  overflow: hidden;
  border: 1px solid rgba(78,165,244,.22);
  border-radius: 22px;
  background: linear-gradient(150deg,rgba(8,34,69,.82),rgba(2,13,31,.78));
  box-shadow: 0 20px 55px rgba(0,0,0,.25);
  isolation: isolate;
}
.home-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(2,12,29,.02),rgba(2,12,29,.18));
}
.home-hero-media img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1144 / 600;
  object-fit: contain !important;
  object-position: center !important;
}
.page-index .proof-strip-shell { margin-top: 22px !important; }
.page-index .proof-strip { border-radius: 18px !important; }
.page-index .proof-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  min-height: 0 !important;
}
.page-index .proof-grid > div {
  padding: 15px 13px !important;
  border-right: 1px solid rgba(110,172,233,.16) !important;
  border-bottom: 1px solid rgba(110,172,233,.16) !important;
}
.page-index .proof-grid > div:nth-child(2n) { border-right: 0 !important; }
.page-index .proof-grid > div:nth-last-child(-n+2) { border-bottom: 0 !important; }
.page-index .proof-grid strong { font-size: .76rem !important; }
.page-index .proof-grid span { font-size: .67rem !important; }

/* Readable type and spacing on phones and tablets. */
@media (max-width: 1199px) {
  h1 { font-size: clamp(2.05rem,6.4vw,3.45rem) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(1.72rem,4.8vw,2.75rem) !important; line-height: 1.16 !important; }
  h3 { line-height: 1.28; }
  .section { padding: clamp(58px,8vw,82px) 0 !important; }
  .section-sm { padding: clamp(42px,6vw,64px) 0 !important; }
  .heading-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 18px !important;
    margin-bottom: 32px !important;
  }
  .heading-row .lead { max-width: 760px; }
  .actions { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; width: 100%; }
  .actions .btn { width: auto !important; max-width: 100%; }
  .cards,
  .cards.service-six,
  .resource-grid,
  .use-case-grid,
  .pricing-grid,
  .pricing-value-grid,
  .signal-grid,
  .feature-grid,
  .license-control-grid,
  .process,
  .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 18px !important;
  }
  .card, .resource-card, .use-case, .glass-panel, .form-card, .plan-card, .price-card, .cutover-stage {
    min-width: 0 !important;
    padding: 22px !important;
  }
  .two-col,
  .container.two-col,
  .two-col-start,
  .architecture-layout,
  .contact-hero-grid,
  .solutions-hero-grid,
  .tabs,
  .field-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 28px !important;
  }
  .field-full { grid-column: auto !important; }
  .data-path, .cutover-flow { grid-template-columns: minmax(0,1fr) !important; }
  .flow-arrow, .cutover-connector { transform: rotate(90deg) !important; text-align: center; }
}

@media (max-width: 479px) {
  .container, .narrow { width: min(calc(100% - 28px), var(--max)) !important; }
  .brand-logo { width: 44px !important; height: 40px !important; }
  .brand-copy strong { font-size: 1rem !important; }
  .page-index .hero.hero-branded .hero-grid { padding-top: 38px !important; gap: 18px !important; }
  .page-index .hero.hero-branded h1 { font-size: clamp(2rem,10vw,2.55rem) !important; }
  .eyebrow { width: 100%; max-width: 100%; padding: 7px 10px; font-size: .68rem; }
  .actions { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }
  .actions .btn { width: 100% !important; justify-content: center; }
  .page-index .proof-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .page-index .proof-grid > div { border-right: 1px solid rgba(110,172,233,.16) !important; border-bottom: 1px solid rgba(110,172,233,.16) !important; }
  .page-index .proof-grid > div:nth-child(2n) { border-right: 0 !important; }
  .page-index .proof-grid > div:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .card, .resource-card, .use-case, .glass-panel, .form-card, .plan-card, .price-card, .cutover-stage { padding: 20px !important; }
  .section { padding: 54px 0 !important; }
  .cta-band { padding: 30px 20px !important; }
}

@media (min-width: 640px) and (max-width: 1199px) {
  .container, .narrow { width: min(calc(100% - 48px), var(--max)) !important; }
  .page-index .proof-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .page-index .proof-grid > div { border-right: 1px solid rgba(110,172,233,.16) !important; border-bottom: 1px solid rgba(110,172,233,.16) !important; }
  .page-index .proof-grid > div:nth-child(3n) { border-right: 0 !important; }
  .page-index .proof-grid > div:nth-last-child(-n+3) { border-bottom: 0 !important; }
  .cards,
  .cards.service-six,
  .resource-grid,
  .use-case-grid,
  .pricing-value-grid,
  .signal-grid,
  .feature-grid,
  .license-control-grid,
  .process,
  .footer-grid,
  .field-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  .field-full { grid-column: 1 / -1 !important; }
  .plan-grid { display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:18px !important; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .solutions-hero-grid,
  .contact-hero-grid,
  .container.two-col,
  .two-col {
    grid-template-columns: minmax(0,1fr) minmax(300px,.82fr) !important;
    align-items: center;
  }
  .cards,
  .cards.service-six,
  .resource-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .plan-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}

/* Inner page heroes: compact and content-led on smaller screens. */
@media (max-width: 1199px) {
  .page-hero,
  .page-hero.cloud-page-hero {
    min-height: 0 !important;
    padding: clamp(54px,7vw,78px) 0 !important;
  }
  .page-hero.cloud-page-hero::before {
    inset: auto -12% 0 36% !important;
    height: 78% !important;
    background-position: right bottom !important;
    background-size: contain !important;
    opacity: .16 !important;
  }
  .page-hero.cloud-page-hero::after {
    background: linear-gradient(90deg,#031026 0%,rgba(3,16,38,.96) 62%,rgba(3,16,38,.72) 100%) !important;
  }
  .page-hero h1,
  .page-hero.cloud-page-hero h1 { max-width: 900px !important; font-size: clamp(2.05rem,6vw,3.35rem) !important; }
  .page-hero .lead,
  .page-hero.cloud-page-hero .lead { max-width: 780px !important; }
  .page-solutions .cloud-page-hero::before,
  .page-contact .cloud-page-hero::before { display: none !important; }
  .solutions-hero-media,
  .contact-hero-media,
  .architecture-diagram-figure,
  .media-banner {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }
  .solutions-hero-media img,
  .contact-hero-media img,
  .architecture-diagram-image,
  .media-banner img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  body.page-pricing .pricing-hero { min-height: 0 !important; padding-bottom: clamp(70px,11vw,110px) !important; }
  body.page-pricing .pricing-hero::before {
    inset: auto -5% 0 34% !important;
    height: 88% !important;
    background-size: contain !important;
    background-position: right bottom !important;
    opacity: .24 !important;
  }
}

/* Pricing and scrollable controls. */
.plan-grid { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 18px !important; }
.app-tabs, .tab-list {
  max-width: 100%;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.app-tab, .tab-button { flex: 0 0 auto; }
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Footer remains readable and does not compress columns. */
@media (max-width: 639px) {
  .site-footer { margin: 0 8px 8px !important; padding: 40px 0 20px !important; border-radius: 22px !important; }
  .footer-grid { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  .footer-brand .brand { max-width: 100% !important; }
  .footer-bottom { display: grid !important; gap: 8px; margin-top: 30px !important; }
}

/* Full desktop restoration and balanced wide-screen hero. */
@media (min-width: 1200px) {
  :root { --header: 118px; --page-gutter: 36px; }
  .contact-bar { display: block !important; }
  .site-header { height: var(--header) !important; }
  .nav-wrap { height: 80px !important; }
  .nav-toggle { display: none !important; }
  .desktop-nav,
  .desktop-nav.open {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: clamp(12px,1.15vw,23px) !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .desktop-nav a,
  .desktop-nav .btn {
    width: auto !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: clamp(.76rem,.82vw,.9rem) !important;
  }
  .desktop-nav .btn { margin: 0 !important; padding-inline: 17px !important; border-radius: 12px !important; }
  .desktop-nav a:not(.btn)::after { display: block !important; }
  .page-index .hero.hero-branded { padding: 38px 0 34px !important; }
  .page-index .hero.hero-branded .hero-grid {
    grid-template-columns: minmax(0,.92fr) minmax(500px,1.08fr) !important;
    gap: clamp(28px,4vw,64px) !important;
    padding-top: 36px !important;
  }
  .page-index .hero.hero-branded h1 { font-size: clamp(3.35rem,4.6vw,5rem) !important; }
  .home-hero-media { border-radius: 28px; }
  .page-index .proof-strip-shell { margin-top: 28px !important; }
  .page-index .proof-grid { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
  .page-index .proof-grid > div { border-right: 1px solid rgba(110,172,233,.16) !important; border-bottom: 0 !important; padding: 20px 16px !important; }
  .page-index .proof-grid > div:last-child { border-right: 0 !important; }
  .cards.service-six { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .plan-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .page-hero.cloud-page-hero::before { opacity: .42 !important; }
}

@media (min-width: 1280px) {
  .plan-grid { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
}

@media (min-width: 1600px) {
  :root { --max: 1520px; }
  .page-index .hero.hero-branded .hero-grid { grid-template-columns: minmax(0,720px) minmax(620px,1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-nav { transition: none !important; }
}

/* ===== Build 38: Seamless Home Hero Artwork ===== */
.page-index .hero.hero-branded{
  overflow:hidden;
  background:
    linear-gradient(90deg,#020a18 0%,rgba(2,10,24,.985) 28%,rgba(2,10,24,.84) 44%,rgba(2,10,24,.38) 61%,rgba(2,10,24,0) 79%),
    radial-gradient(circle at 76% 28%,rgba(15,112,236,.16),transparent 26%),
    linear-gradient(180deg,#031126 0%,#071d3b 50%,#031126 100%) !important;
}
.page-index .hero.hero-branded .hero-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr) !important;
  align-items:center !important;
  gap:56px !important;
}
.home-hero-media{
  position:relative;
  width:100%;
  margin:0 !important;
  align-self:center;
  justify-self:end;
  overflow:visible !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  isolation:auto !important;
}
.home-hero-media::after{display:none !important;}
.home-hero-media img{
  display:block;
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center right !important;
  filter:drop-shadow(0 0 36px rgba(8,114,255,.08));
}
@media (min-width:901px){
  .home-hero-media{
    -webkit-mask-image:linear-gradient(to left, transparent 0%, rgba(0,0,0,.42) 8%, #000 18%, #000 100%);
    mask-image:linear-gradient(to left, transparent 0%, rgba(0,0,0,.42) 8%, #000 18%, #000 100%);
  }
}
@media (max-width:900px){
  .page-index .hero.hero-branded .hero-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .home-hero-media{
    justify-self:stretch;
    max-width:100%;
  }
}

/* ===== Build 38: True seamless blend for the Home hero artwork =====
   The WebP has an opaque near-black canvas baked into every animation frame.
   Borders alone cannot remove that rectangle. Screen blending makes the dark
   canvas inherit the hero background while preserving the moving blue artwork. */
.page-index .hero.hero-branded {
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 46% 66% at 78% 46%, rgba(11,98,214,.20) 0%, rgba(6,55,126,.10) 44%, transparent 76%),
    linear-gradient(90deg,#020a18 0%,#020a18 38%,#031127 62%,#071c38 100%) !important;
}

.page-index .home-hero-media {
  position: relative !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.page-index .home-hero-media::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 16% 2% 12% 24% !important;
  pointer-events: none !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center,rgba(15,111,255,.17),rgba(8,62,150,.07) 48%,transparent 74%) !important;
  filter: blur(24px) !important;
}

.page-index .home-hero-media::after {
  display: none !important;
}

.page-index .home-hero-media img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: .98 !important;
  mix-blend-mode: screen !important;
  object-fit: contain !important;
  object-position: center right !important;
}

@media (min-width: 901px) {
  .page-index .hero.hero-branded .hero-grid {
    grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr) !important;
    gap: clamp(30px,4vw,70px) !important;
  }
  .page-index .home-hero-media {
    transform: translateX(1.5%) !important;
  }
}

@media (max-width: 900px) {
  .page-index .hero.hero-branded {
    background:
      radial-gradient(ellipse 78% 34% at 50% 82%,rgba(11,98,214,.19),transparent 72%),
      linear-gradient(180deg,#020a18 0%,#031126 66%,#071b36 100%) !important;
  }
  .page-index .home-hero-media {
    width: 112% !important;
    max-width: none !important;
    margin-left: -6% !important;
  }
  .page-index .home-hero-media img {
    object-position: center !important;
  }
}

/* ===== Build 39: true full-section Home hero =====
   The animated WebP is rendered as a full hero background instead of a
   separate image element. Its baked-in dark canvas therefore spans the whole
   section and cannot appear as a rectangular panel. */
.page-index .hero.hero-branded {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 810px !important;
  padding: clamp(72px,7vw,112px) 0 34px !important;
  background:
    linear-gradient(90deg,
      rgba(2,10,24,1) 0%,
      rgba(2,10,24,.995) 31%,
      rgba(2,10,24,.92) 44%,
      rgba(2,10,24,.62) 58%,
      rgba(2,10,24,.16) 77%,
      rgba(2,10,24,.02) 100%),
    linear-gradient(180deg,
      rgba(2,10,24,.18) 0%,
      rgba(2,10,24,0) 48%,
      rgba(2,10,24,.62) 100%),
    url('../img/hero-cloud-migration-v21.webp?v=42') right center / cover no-repeat,
    #020a18 !important;
}
.page-index .hero.hero-branded::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 52% at 83% 47%,rgba(23,116,255,.12),transparent 74%),
    linear-gradient(180deg,transparent 64%,rgba(1,8,20,.44) 100%);
}
.page-index .hero.hero-branded .container,
.page-index .hero.hero-branded .proof-strip-shell {
  position: relative !important;
  z-index: 2 !important;
}
.page-index .hero.hero-branded .hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0,730px) !important;
  justify-content: start !important;
  align-items: center !important;
  min-height: 620px !important;
  gap: 0 !important;
}
.page-index .hero.hero-branded .hero-copy {
  max-width: 730px !important;
  padding: 0 !important;
}
.page-index .home-hero-media {
  display: none !important;
}
.page-index .proof-strip-shell {
  margin-top: 12px !important;
}

@media (max-width: 1180px) {
  .page-index .hero.hero-branded {
    min-height: 760px !important;
    background:
      linear-gradient(90deg,
        rgba(2,10,24,1) 0%,
        rgba(2,10,24,.99) 39%,
        rgba(2,10,24,.76) 58%,
        rgba(2,10,24,.20) 82%,
        rgba(2,10,24,.02) 100%),
      linear-gradient(180deg,rgba(2,10,24,.12),rgba(2,10,24,.56)),
      url('../img/hero-cloud-migration-v21.webp?v=42') right center / cover no-repeat,
      #020a18 !important;
  }
  .page-index .hero.hero-branded .hero-grid {
    grid-template-columns: minmax(0,650px) !important;
    min-height: 575px !important;
  }
}

@media (max-width: 900px) {
  .page-index .hero.hero-branded {
    min-height: auto !important;
    padding: 48px 0 30px !important;
    background:
      linear-gradient(180deg,
        rgba(2,10,24,1) 0%,
        rgba(2,10,24,.99) 53%,
        rgba(2,10,24,.88) 68%,
        rgba(2,10,24,.46) 84%,
        rgba(2,10,24,.72) 100%),
      url('../img/hero-cloud-migration-v21.webp?v=42') right bottom / auto 48% no-repeat,
      #020a18 !important;
  }
  .page-index .hero.hero-branded .hero-grid {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .page-index .hero.hero-branded .hero-copy {
    max-width: 760px !important;
  }
  .page-index .proof-strip-shell {
    margin-top: 24px !important;
  }
}

@media (max-width: 620px) {
  .page-index .hero.hero-branded {
    padding-top: 40px !important;
    background:
      linear-gradient(180deg,
        rgba(2,10,24,1) 0%,
        rgba(2,10,24,.995) 57%,
        rgba(2,10,24,.86) 73%,
        rgba(2,10,24,.54) 88%,
        rgba(2,10,24,.78) 100%),
      url('../img/hero-cloud-migration-v21.webp?v=42') 88% 100% / auto 42% no-repeat,
      #020a18 !important;
  }
}

/* ===== Build 40: iPhone / Safari parity and dependable hero animation ===== */
html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Use H.264 video for the animated hero. Safari can fail to paint some
   partial-frame animated WebP files when they are used as CSS backgrounds. */
.page-index .hero.hero-branded {
  background:
    linear-gradient(90deg,
      rgba(2,10,24,1) 0%,
      rgba(2,10,24,.995) 31%,
      rgba(2,10,24,.92) 44%,
      rgba(2,10,24,.62) 58%,
      rgba(2,10,24,.16) 77%,
      rgba(2,10,24,.02) 100%),
    linear-gradient(180deg,
      rgba(2,10,24,.18) 0%,
      rgba(2,10,24,0) 48%,
      rgba(2,10,24,.62) 100%),
    #020a18 !important;
}
.page-index .hero.hero-branded::after {
  z-index: 1 !important;
  background:
    linear-gradient(90deg,rgba(2,10,24,.98) 0%,rgba(2,10,24,.92) 38%,rgba(2,10,24,.36) 68%,rgba(2,10,24,.08) 100%),
    linear-gradient(180deg,rgba(2,10,24,.08) 0%,rgba(2,10,24,.05) 62%,rgba(1,8,20,.62) 100%) !important;
}
.home-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #020204;
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
}
.home-hero-video-mobile { display: none; }
.page-index .hero.hero-branded .container,
.page-index .hero.hero-branded .proof-strip-shell {
  z-index: 2 !important;
}

@media (max-width: 900px) {
  .home-hero-video-desktop { display: none !important; }
  .home-hero-video-mobile {
    display: block !important;
    object-fit: cover !important;
    object-position: center top !important;
    opacity: .72;
  }
  .page-index .hero.hero-branded {
    background: #020a18 !important;
  }
  .page-index .hero.hero-branded::after {
    background:
      linear-gradient(180deg,
        rgba(2,10,24,.97) 0%,
        rgba(2,10,24,.84) 34%,
        rgba(2,10,24,.62) 62%,
        rgba(2,10,24,.78) 100%) !important;
  }
}

@media (max-width: 479px) {
  .page-index .hero.hero-branded {
    padding: 34px 0 28px !important;
  }
  .page-index .hero.hero-branded .hero-grid {
    padding-top: 26px !important;
  }
  .page-index .hero.hero-branded h1 {
    font-size: clamp(2rem, 9.2vw, 2.35rem) !important;
    line-height: 1.13 !important;
    letter-spacing: -.025em !important;
  }
  .page-index .hero.hero-branded .lead {
    font-size: .98rem !important;
    line-height: 1.62 !important;
  }
  .brand { max-width: 190px !important; }
  .brand-logo { width: 42px !important; height: 38px !important; }
  .brand-copy strong { font-size: .96rem !important; }
  .brand-copy span { font-size: .54rem !important; }
  .home-hero-video-mobile {
    opacity: .64;
    object-position: center top !important;
  }
  .page-index .hero.hero-branded::after {
    background:
      linear-gradient(180deg,
        rgba(2,10,24,.985) 0%,
        rgba(2,10,24,.88) 33%,
        rgba(2,10,24,.69) 62%,
        rgba(2,10,24,.82) 100%) !important;
  }
}

/* Keep the floating contact control above Safari's bottom browser chrome and
   away from the full-width hero CTA on narrow iPhones. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 620px) {
    .whatsapp-chat {
      width: 48px !important;
      height: 48px !important;
      right: 12px !important;
      bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
      border-radius: 15px !important;
    }
    .whatsapp-icon { width: 26px !important; height: 26px !important; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-video { display: none !important; }
  .page-index .hero.hero-branded {
    background:
      linear-gradient(180deg,rgba(2,10,24,.94),rgba(2,10,24,.72)),
      url('../img/hero-cloud-migration-mobile-poster.webp?v=42') center top / cover no-repeat,
      #020a18 !important;
  }
}

/* ===== Build 41: dependable desktop hero animation =====
   Desktop browsers render the animated WebP as an absolutely positioned
   background layer, so movement does not depend on autoplay permission.
   iPhone/iPad continue to use the H.264 inline video for Safari parity. */
.page-index .hero.hero-branded {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #020a18 !important;
}

.home-hero-animation,
.home-hero-video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #020a18 !important;
  object-fit: cover !important;
  object-position: right center !important;
  pointer-events: none !important;
  user-select: none !important;
}

.home-hero-animation-desktop {
  display: block !important;
}

.home-hero-video-mobile {
  display: none !important;
}

.page-index .hero.hero-branded::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(2,10,24,1) 0%,
      rgba(2,10,24,.995) 30%,
      rgba(2,10,24,.90) 43%,
      rgba(2,10,24,.52) 58%,
      rgba(2,10,24,.10) 78%,
      rgba(2,10,24,.02) 100%),
    linear-gradient(180deg,
      rgba(2,10,24,.12) 0%,
      rgba(2,10,24,0) 56%,
      rgba(1,8,20,.58) 100%) !important;
}

.page-index .hero.hero-branded .container,
.page-index .hero.hero-branded .proof-strip-shell {
  position: relative !important;
  z-index: 2 !important;
}

/* The old inline figure remains only as semantic/fallback markup. */
.page-index .home-hero-media {
  display: none !important;
}

@media (max-width: 900px) {
  .home-hero-animation-desktop {
    display: none !important;
  }
  .home-hero-video-mobile {
    display: block !important;
    opacity: .72 !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  .page-index .hero.hero-branded::after {
    background:
      linear-gradient(180deg,
        rgba(2,10,24,.97) 0%,
        rgba(2,10,24,.84) 34%,
        rgba(2,10,24,.62) 62%,
        rgba(2,10,24,.78) 100%) !important;
  }
}

@media (max-width: 479px) {
  .home-hero-video-mobile {
    opacity: .64 !important;
    object-position: center top !important;
  }
}

/* Do not suppress the desktop animated artwork when the OS reports reduced
   motion; the user explicitly requested that the hero remain moving. */
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  .home-hero-animation-desktop {
    display: block !important;
  }
}


/* ===== Build 42: cross-browser mobile animated-media compatibility =====
   Desktop/laptop retains animated WebP. Android and iPhone/iPad use compact
   H.264 MP4 media with a static WebP poster fallback. */
.media-h264-mobile,
.page-hero-mobile-video { display:none; }

/* The brand mark is intentionally static on every device. Navigation branding
   must render immediately and must not depend on animated WebP decoding. */
.brand-logo { object-fit:contain; }

@media (max-width:900px) {
  /* Do not ask mobile Safari/Chrome to decode the large animated WebP and the
     H.264 fallback at the same time. */
  .media-webp-desktop { display:none !important; }
  .media-h264-mobile {
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    border:0 !important;
    background:#020a18;
    object-fit:contain !important;
    object-position:center !important;
    pointer-events:none;
  }

  .solutions-hero-media .media-h264-mobile,
  .contact-hero-media .media-h264-mobile,
  .architecture-diagram-figure .media-h264-mobile {
    aspect-ratio:auto !important;
  }

  /* Mobile hero artwork is a real inline H.264 video, not a CSS animated-WebP
     pseudo-element. This avoids Safari background decoding/painting failures. */
  .page-hero.cloud-page-hero {
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
  }
  .page-hero.cloud-page-hero::before { display:none !important; }
  .page-hero.cloud-page-hero::after {
    z-index:1 !important;
    background:
      linear-gradient(180deg,rgba(3,16,38,.96) 0%,rgba(3,16,38,.84) 52%,rgba(3,16,38,.67) 100%) !important;
  }
  .page-hero.cloud-page-hero > .container {
    position:relative !important;
    z-index:2 !important;
  }
  .page-hero-mobile-video {
    display:block;
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    border:0;
    background:#020a18;
    object-fit:cover;
    object-position:center top;
    opacity:.52;
    pointer-events:none;
    user-select:none;
  }

  /* The solutions/contact artwork is already presented in a dedicated media
     panel, so no second background video is used behind the copy. */
  body.page-solutions .page-hero-mobile-video,
  body.page-contact .page-hero-mobile-video { display:none !important; }

  /* AI artwork is square: keep the whole frame visible at the lower right. */
  body.page-ai-solutions .page-hero-mobile-video {
    inset:auto -8% 0 18%;
    width:90%;
    height:88%;
    object-fit:contain;
    object-position:right bottom;
    opacity:.48;
  }

  /* Pricing artwork is landscape: reserve a lower visual band instead of
     cropping the hand/percentage graphic behind the heading. */
  body.page-pricing .pricing-hero {
    padding-bottom:clamp(150px,38vw,250px) !important;
  }
  body.page-pricing .page-hero-mobile-video {
    inset:auto 0 0;
    width:100%;
    height:clamp(150px,38vw,250px);
    object-fit:contain;
    object-position:center bottom;
    opacity:.78;
  }
  body.page-pricing .pricing-hero::after {
    background:
      linear-gradient(180deg,#031026 0%,rgba(3,16,38,.96) 52%,rgba(3,16,38,.54) 100%) !important;
  }

  /* Prevent costly panel transform/scan effects from competing with video
     decoding on mobile GPUs. The movement remains inside the H.264 media. */
  .solutions-hero-media,
  .contact-hero-media,
  .architecture-diagram-figure {
    animation:none !important;
    transform:none !important;
  }
  .solutions-hero-media::after,
  .contact-hero-media::after,
  .architecture-diagram-figure::after { display:none !important; }
}

@media (max-width:479px) {
  .page-hero-mobile-video { opacity:.46; }
  body.page-ai-solutions .page-hero-mobile-video {
    inset:auto -18% 0 8%;
    width:110%;
    height:76%;
    opacity:.40;
  }
  body.page-pricing .page-hero-mobile-video { opacity:.72; }
}

/* The poster remains visible whenever iOS Low Power Mode or Android Data Saver
   blocks autoplay. */
.mobile-media-failed { background-size:cover; background-position:center; }


/* ===== Build 43: single-instance responsive media and Company artwork ===== */
[hidden] { display: none !important; }
.responsive-media-pair { position: relative; }
.responsive-media-pair > .media-webp-desktop,
.responsive-media-pair > .media-h264-mobile { width:100% !important; max-width:100% !important; }

.company-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  align-items:center;
  gap:clamp(28px,4vw,58px);
}
.company-hero-copy { min-width:0; }
.company-hero-media {
  margin:0;
  overflow:hidden;
  border:1px solid rgba(88,171,246,.20);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(7,26,52,.92),rgba(4,19,41,.92));
  box-shadow:0 18px 55px rgba(0,0,0,.20);
}
.company-hero-media img,
.company-hero-media video { display:block; width:100%; height:auto; object-fit:contain; object-position:center; }
.company-hero-media figcaption { padding:14px 18px; color:#a8bdd5; font-size:.88rem; line-height:1.5; }

@media (max-width:900px) {
  .company-hero-grid { grid-template-columns:1fr; gap:24px; }
  .company-hero-media { width:100%; border-radius:22px; }
  .company-hero-media figcaption { padding:12px 14px; }
  .responsive-media-pair > .media-webp-desktop { display:none !important; }
  .responsive-media-pair > .media-h264-mobile:not([hidden]) { display:block !important; }
}
@media (min-width:901px) {
  .responsive-media-pair > .media-webp-desktop:not([hidden]) { display:block !important; }
  .responsive-media-pair > .media-h264-mobile { display:none !important; }
}

/* ===== Build 45: Contact consultation steps desktop/laptop correction ===== */
body.page-contact .process.single-column {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  margin-top: 28px;
}

body.page-contact .process.single-column .step {
  min-width: 0 !important;
  width: 100% !important;
  padding: 24px 24px 24px 76px !important;
  border: 1px solid rgba(78, 160, 239, .22);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(7, 30, 61, .72), rgba(3, 17, 38, .68));
}

body.page-contact .process.single-column .step::before {
  left: 22px;
  top: 27px;
}

body.page-contact .process.single-column .step::after {
  left: 48px;
  top: 33px;
  width: 18px;
}

body.page-contact .process.single-column .step h3,
body.page-contact .process.single-column .step p {
  width: auto !important;
  max-width: none !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body.page-contact .process.single-column .step h3 {
  margin: 0 0 10px !important;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
  line-height: 1.22 !important;
}

body.page-contact .process.single-column .step p {
  margin: 0 !important;
  font-size: .96rem !important;
  line-height: 1.65 !important;
}

@media (max-width: 620px) {
  body.page-contact .process.single-column .step {
    padding: 22px 18px 22px 64px !important;
  }
  body.page-contact .process.single-column .step::before {
    left: 18px;
    top: 25px;
  }
  body.page-contact .process.single-column .step::after {
    left: 43px;
    top: 31px;
    width: 13px;
  }
}


/* ===== Build 46: unified semantic icon system and cross-device visual consistency ===== */
:root {
  --alza-icon-size: 56px;
  --alza-icon-radius: 15px;
}

/* Universal semantic icon treatment */
.card-icon {
  inline-size: var(--alza-icon-size) !important;
  block-size: var(--alza-icon-size) !important;
  flex: 0 0 var(--alza-icon-size);
  display: inline-grid !important;
  place-items: center;
  margin: 0 0 24px !important;
  border: 1px solid rgba(50, 184, 255, .28) !important;
  border-radius: var(--alza-icon-radius) !important;
  color: #35c9ff !important;
  background: linear-gradient(145deg, rgba(11, 79, 145, .36), rgba(5, 39, 82, .72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.card-icon svg,
.app-tab-icon svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.card-icon svg {
  inline-size: 27px !important;
  block-size: 27px !important;
}

/* Keep service-card rhythm identical regardless of copy length */
.cards.service-six {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 22px !important;
}
.cards.service-six > .card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cards.service-six > .card > h3 {
  min-height: 2.45em;
  margin-bottom: 14px;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.cards.service-six > .card > p {
  flex: 1 1 auto;
}
.cards.service-six > .card > .text-link {
  margin-top: auto;
  padding-top: 12px;
}

/* Individual application tabs: same component at every viewport */
.app-tabs {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  overflow: visible !important;
}
.app-tab {
  min-width: 0 !important;
  width: 100%;
  min-height: 62px;
  padding: 12px 16px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px !important;
  border-radius: 12px !important;
  font-size: .98rem;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
}
.app-tab-icon {
  inline-size: 25px;
  block-size: 25px;
  flex: 0 0 25px;
  display: inline-grid;
  place-items: center;
  color: #80cfff;
}
.app-tab-icon svg { inline-size: 23px; block-size: 23px; }
.app-tab[aria-selected="true"] .app-tab-icon { color: #fff; }
.app-tab:focus-visible {
  outline: 3px solid rgba(55, 200, 255, .55);
  outline-offset: 2px;
}

/* Prevent browser-specific text splitting across cards and tab labels */
.card h3,
.app-tab,
.app-tab span,
.text-link {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 900px) {
  :root { --alza-icon-size: 52px; --alza-icon-radius: 14px; }
  .cards.service-six { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .app-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .app-tab { min-height: 58px; font-size: .9rem; }
  .cards.service-six > .card > h3 { min-height: 0; }
}

@media (max-width: 620px) {
  :root { --alza-icon-size: 48px; --alza-icon-radius: 13px; }
  .cards.service-six { grid-template-columns: 1fr !important; gap: 16px !important; }
  .cards.service-six > .card { padding: 24px !important; }
  .card-icon { margin-bottom: 19px !important; }
  .card-icon svg { inline-size: 24px !important; block-size: 24px !important; }
  .app-tabs { gap: 8px !important; }
  .app-tab { min-height: 54px; padding: 10px 8px !important; gap: 7px !important; font-size: .78rem; }
  .app-tab-icon { inline-size: 20px; block-size: 20px; flex-basis: 20px; }
  .app-tab-icon svg { inline-size: 19px; block-size: 19px; }
}

@media (max-width: 360px) {
  .app-tab { font-size: .72rem; letter-spacing: -.01em; }
}

/* ===== Build 47: full-width responsive footer ===== */
.site-footer {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(48px, 5vw, 72px) 0 24px !important;
  border: 0 !important;
  border-top: 1px solid rgba(72,155,234,.24) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(10,93,178,.12), transparent 34%),
    linear-gradient(180deg, #031126 0%, #020b1b 100%) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image:
    linear-gradient(rgba(93,173,244,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93,173,244,.25) 1px, transparent 1px);
  background-size: 64px 64px;
}
.site-footer > .container {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 48px), var(--max)) !important;
  margin-inline: auto !important;
}
.site-footer .footer-grid {
  display: grid !important;
  grid-template-columns: minmax(280px,1.45fr) minmax(190px,1fr) minmax(150px,.8fr) minmax(170px,.9fr) !important;
  gap: clamp(30px,4vw,56px) !important;
  align-items: start !important;
}
.site-footer .footer-brand,
.site-footer .footer-grid > div {
  min-width: 0;
}
.site-footer .footer-links {
  display: grid;
  gap: 14px;
}
.site-footer .footer-links a {
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.site-footer .footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 42px !important;
  padding: 24px 86px 0 0 !important;
  border-top: 1px solid rgba(98,158,218,.18) !important;
}
.site-footer .footer-bottom > span:last-child {
  text-align: right;
}

@media (max-width: 980px) {
  .site-footer > .container {
    width: min(calc(100% - 36px), var(--max)) !important;
  }
  .site-footer .footer-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 34px 44px !important;
  }
}

@media (max-width: 620px) {
  .site-footer {
    padding: 42px 0 calc(22px + env(safe-area-inset-bottom)) !important;
  }
  .site-footer > .container {
    width: min(calc(100% - 28px), var(--max)) !important;
  }
  .site-footer .footer-grid {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 30px !important;
  }
  .site-footer .footer-brand .brand {
    align-items: center;
  }
  .site-footer .footer-bottom {
    display: grid !important;
    justify-content: stretch !important;
    align-items: start !important;
    gap: 10px !important;
    margin-top: 34px !important;
    padding: 22px 76px 0 0 !important;
  }
  .site-footer .footer-bottom > span:last-child {
    text-align: left;
  }
}


/* ===== Build 48: exact company-entity signals ===== */
.official-identity,
.entity-disambiguation-note{
  max-width:760px;
  margin:.8rem 0 1.05rem;
  color:#9fc4e8;
  font-size:.82rem;
  line-height:1.55;
  letter-spacing:.01em;
}
.official-identity::before{
  content:"Official UAE company";
  display:inline-flex;
  margin-right:.55rem;
  padding:.2rem .5rem;
  border:1px solid rgba(43,192,255,.32);
  border-radius:999px;
  color:#38c8ff;
  background:rgba(3,33,66,.72);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.entity-disambiguation-note{
  padding:.7rem .9rem;
  border-left:2px solid rgba(43,192,255,.55);
  background:rgba(4,27,56,.42);
}
@media(max-width:620px){
  .official-identity,.entity-disambiguation-note{font-size:.76rem;}
  .official-identity::before{display:table;margin:0 0 .45rem;}
}

/* ===== Build 49: Mobile workload tabs visibility and interaction ===== */
@media (max-width: 900px) {
  /* Show every workload choice at once instead of a single full-width item
     inside a horizontally clipped row. */
  .tabs {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .tab-list,
  .app-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  .tab-button,
  .app-tab {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 58px !important;
    padding: 13px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.25 !important;
    touch-action: manipulation;
  }

  .tab-button[aria-selected="true"],
  .app-tab[aria-selected="true"] {
    color: #fff !important;
    border-color: rgba(41, 198, 255, .75) !important;
    background: linear-gradient(135deg, #087bff, #0d55e6) !important;
    box-shadow: 0 10px 26px rgba(0, 103, 255, .24) !important;
  }

  .tab-panel,
  .app-panel {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 380px) {
  .tab-list,
  .app-tabs {
    grid-template-columns: 1fr !important;
  }

  .tab-button,
  .app-tab {
    min-height: 52px !important;
  }
}