/* ALZA Build 61 — typography clarity + complete Dark SaaS surface pass.
   This file intentionally loads after every legacy ALZA stylesheet. */

/* --------------------------------------------------------------------------
   1. Crisp, consistent typography
   -------------------------------------------------------------------------- */
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  font-optical-sizing: auto;
}

body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
.brand-mark,
.brand-copy strong,
.metric,
.step::before,
.cutover-stage > span,
.price,
.plan-price strong {
  font-family: var(--font-alza), Inter, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

body.enterprise-theme {
  font-size: 16px;
  font-weight: 450;
  letter-spacing: -0.006em;
}

body.enterprise-theme p,
body.enterprise-theme li,
body.enterprise-theme dd,
body.enterprise-theme td,
body.enterprise-theme .lead,
body.enterprise-theme .muted {
  font-weight: 450;
}

body.enterprise-theme h1,
body.enterprise-theme h2,
body.enterprise-theme h3,
body.enterprise-theme h4 {
  font-weight: 760;
  letter-spacing: -0.028em;
  text-rendering: geometricPrecision;
}

.hero-copy h1,
.page-hero h1 {
  font-weight: 770 !important;
  letter-spacing: -0.03em !important;
}

.heading-row h2 {
  font-weight: 740;
  letter-spacing: -0.022em !important;
}

/* Improve readability of small supporting copy without materially changing layout. */
.card p,
.resource-card p,
.use-case p,
.signal span,
.faq-answer,
.proof-grid > div,
.hero-float span,
.flow-node span,
.control-plane span,
.control-plane small,
.footer-brand p,
.footer-links a {
  line-height: 1.62;
}

.card p,
.muted,
.resource-card p,
.use-case p {
  color: #bfd0e2 !important;
}

.hero-copy .lead,
.page-hero .lead {
  color: #c7d7e8 !important;
}

.proof-grid > div,
.signal span,
.hero-float span {
  color: #b9cadd !important;
}

.plan-family,
.plan-facts dt,
.badge,
.tag,
.kicker,
.eyebrow,
.perimeter-label {
  font-size: max(0.76rem, 12px) !important;
  font-weight: 750 !important;
}

.plan-facts dd,
.plan-price span,
.monthly-option {
  font-size: max(0.86rem, 13.5px) !important;
}

/* Do not soften actual text with transforms/opacity. */
.card,
.resource-card,
.use-case,
.plan-card,
.faq-item,
.form-card,
.tab-panel,
.glass-panel {
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   2. Icon-only theme toggle
   -------------------------------------------------------------------------- */
.theme-toggle-v61 {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(96, 190, 255, 0.25);
  border-radius: 12px;
  color: #79dcff;
  background: linear-gradient(180deg, rgba(7, 34, 70, 0.82), rgba(3, 20, 45, 0.84));
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 10px 26px rgba(0,8,24,.16);
  cursor: pointer;
  isolation: isolate;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.theme-toggle-v61:hover {
  color: #fff;
  border-color: rgba(87, 214, 255, .52);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(61,190,255,.08), 0 10px 30px rgba(5,110,220,.18);
}
.theme-toggle-v61:focus-visible {
  outline: 2px solid #52d9ff;
  outline-offset: 3px;
}
.theme-toggle-icon-v61 {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle-v61.is-dark {
  color: #c6b9ff;
  border-color: rgba(166, 145, 255, .34);
  background: linear-gradient(180deg, #101018, #090a10);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 24px rgba(124,93,255,.11);
}

/* Retire the older labelled control if legacy markup is ever present. */
.theme-toggle-v55 { display: none !important; }

/* --------------------------------------------------------------------------
   3. Full-site Dark SaaS — no blue section bands / no hidden light surfaces
   -------------------------------------------------------------------------- */
html[data-theme="dark-saas"] {
  color-scheme: dark;
  --ink: #f7f9fc;
  --muted: #bec6d3;
  --line: rgba(157, 170, 194, .16);
  --surface: #030407;
  --surface-soft: #06080d;
  --navy-950: #030407;
  --navy-900: #07090f;
  --navy-800: #0b0f17;
  --glass-dark: rgba(7, 9, 14, .88);
  --glass-light: rgba(12, 15, 22, .86);
  --alza-bg: #030407;
  --alza-bg-2: #06080d;
  --alza-panel: rgba(9, 11, 17, .92);
  --alza-panel-strong: rgba(12, 15, 22, .97);
  --alza-line: rgba(151, 164, 188, .16);
  --alza-line-hot: rgba(100, 211, 255, .40);
  --alza-text: #f7f9fc;
  --alza-muted: #bec6d3;
  --alza-tw-bg: #030407;
  --alza-tw-panel: rgba(9, 11, 17, .94);
  --alza-tw-panel-strong: rgba(12, 15, 22, .98);
  --alza-tw-border: rgba(151, 164, 188, .16);
  --alza-tw-text: #f7f9fc;
  --alza-tw-muted: #bec6d3;
}

html[data-theme="dark-saas"],
html[data-theme="dark-saas"] body,
html[data-theme="dark-saas"] body.enterprise-theme,
html[data-theme="dark-saas"] #main {
  background-color: #030407 !important;
}

html[data-theme="dark-saas"] body.enterprise-theme {
  color: #f7f9fc !important;
  background:
    radial-gradient(900px 520px at 86% 2%, rgba(109, 83, 255, .07), transparent 67%),
    radial-gradient(760px 480px at 4% 24%, rgba(39, 191, 255, .035), transparent 68%),
    #030407 !important;
}

/* Keep ambient effects subtle enough that the site reads black, not blue. */
html[data-theme="dark-saas"] body.enterprise-theme::before,
html[data-theme="dark-saas"] .experience-grid-v54 {
  opacity: .025 !important;
}
html[data-theme="dark-saas"] .experience-orb-v54 { opacity: .30 !important; }
html[data-theme="dark-saas"] .experience-orb-one-v54 {
  background: radial-gradient(circle, rgba(103, 79, 255, .18), rgba(65, 47, 150, .035) 52%, transparent 74%) !important;
}
html[data-theme="dark-saas"] .experience-orb-two-v54 {
  background: radial-gradient(circle, rgba(37, 184, 255, .10), rgba(26, 78, 123, .025) 52%, transparent 74%) !important;
}

/* Header + mobile navigation */
html[data-theme="dark-saas"] .site-header,
html[data-theme="dark-saas"] .contact-bar,
html[data-theme="dark-saas"] .desktop-nav.open {
  background: rgba(3, 4, 7, .97) !important;
  border-color: rgba(154, 166, 190, .12) !important;
}
html[data-theme="dark-saas"] .site-header {
  box-shadow: 0 14px 42px rgba(0, 0, 0, .38) !important;
}
html[data-theme="dark-saas"] .desktop-nav > a:not(.btn) { color: #c5ccd7 !important; }
html[data-theme="dark-saas"] .desktop-nav > a:not(.btn):hover,
html[data-theme="dark-saas"] .desktop-nav > a[aria-current="page"]:not(.btn) {
  color: #fff !important;
  background: #0a0d13 !important;
  border-color: rgba(151, 164, 188, .16) !important;
}
html[data-theme="dark-saas"] .nav-toggle {
  color: #e7ebf2 !important;
  background: #090b10 !important;
  border-color: rgba(154, 168, 194, .20) !important;
}

/* Every normal section becomes a near-black surface. */
html[data-theme="dark-saas"] main,
html[data-theme="dark-saas"] .section,
html[data-theme="dark-saas"] .section-sm,
html[data-theme="dark-saas"] .section-soft,
html[data-theme="dark-saas"] .section-dark,
html[data-theme="dark-saas"] .b57-service-section,
html[data-theme="dark-saas"] .b57-faq-section,
html[data-theme="dark-saas"] .pricing-section,
html[data-theme="dark-saas"] .pricing-preview,
html[data-theme="dark-saas"] .article {
  background-color: #030407 !important;
  background-image: none !important;
}
html[data-theme="dark-saas"] .section:nth-of-type(even),
html[data-theme="dark-saas"] .section-soft {
  background-color: #05070b !important;
}
html[data-theme="dark-saas"] .section::before {
  background: linear-gradient(90deg, transparent, rgba(155, 168, 197, .055) 24%, rgba(121, 139, 178, .10) 50%, rgba(155, 168, 197, .055) 76%, transparent) !important;
}
html[data-theme="dark-saas"] .section:nth-of-type(3n)::after { opacity: .025 !important; }

/* Hero keeps the artwork but receives a true black SaaS overlay. */
html[data-theme="dark-saas"] .hero,
html[data-theme="dark-saas"] .hero.hero-branded,
html[data-theme="dark-saas"] .page-hero,
html[data-theme="dark-saas"] .cloud-page-hero {
  background-color: #030407 !important;
}
html[data-theme="dark-saas"] .page-index .hero.hero-branded::after {
  background: linear-gradient(90deg, #030407 0%, rgba(3,4,7,.97) 34%, rgba(3,4,7,.58) 64%, rgba(3,4,7,.30) 100%) !important;
}
html[data-theme="dark-saas"] .hero-copy .lead,
html[data-theme="dark-saas"] .page-hero .lead { color: #c9d0db !important; }

/* Generic panels/cards */
html[data-theme="dark-saas"] .card,
html[data-theme="dark-saas"] .card-dark,
html[data-theme="dark-saas"] .b57-premium-card,
html[data-theme="dark-saas"] .resource-card,
html[data-theme="dark-saas"] .use-case,
html[data-theme="dark-saas"] .glass-panel,
html[data-theme="dark-saas"] .form-card,
html[data-theme="dark-saas"] .download-status,
html[data-theme="dark-saas"] .boundary-diagram,
html[data-theme="dark-saas"] .cutover-stage,
html[data-theme="dark-saas"] .license-footnote,
html[data-theme="dark-saas"] .plan-card,
html[data-theme="dark-saas"] .price-card,
html[data-theme="dark-saas"] .faq-item,
html[data-theme="dark-saas"] .app-panel,
html[data-theme="dark-saas"] .tab-panel,
html[data-theme="dark-saas"] .pricing-guidance,
html[data-theme="dark-saas"] .pricing-disclaimer,
html[data-theme="dark-saas"] .signal,
html[data-theme="dark-saas"] .release-meta > div,
html[data-theme="dark-saas"] .callout,
html[data-theme="dark-saas"] .modal-dialog,
html[data-theme="dark-saas"] .modal-card {
  color: #f0f3f7 !important;
  border-color: rgba(151, 164, 188, .15) !important;
  background: #090c12 !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.022) !important;
}
html[data-theme="dark-saas"] .card:hover,
html[data-theme="dark-saas"] .resource-card:hover,
html[data-theme="dark-saas"] .use-case:hover,
html[data-theme="dark-saas"] .plan-card:hover,
html[data-theme="dark-saas"] .price-card:hover {
  border-color: rgba(91, 207, 255, .28) !important;
  background: #0b0f16 !important;
}

/* Fix light legacy diagram nodes and pricing children that escaped the old theme. */
html[data-theme="dark-saas"] .flow-node,
html[data-theme="dark-saas"] .local-node,
html[data-theme="dark-saas"] .control-plane,
html[data-theme="dark-saas"] .feature-chip,
html[data-theme="dark-saas"] .tag,
html[data-theme="dark-saas"] .badge,
html[data-theme="dark-saas"] .annual-saving,
html[data-theme="dark-saas"] .status-icon,
html[data-theme="dark-saas"] .prose th {
  color: #e8edf4 !important;
  border-color: rgba(151, 164, 188, .15) !important;
  background: #0c1017 !important;
}
html[data-theme="dark-saas"] .flow-node b,
html[data-theme="dark-saas"] .control-plane b,
html[data-theme="dark-saas"] .plan-price strong,
html[data-theme="dark-saas"] .plan-facts dd,
html[data-theme="dark-saas"] .license-footnote strong,
html[data-theme="dark-saas"] .use-case h3 {
  color: #f7f9fc !important;
}
html[data-theme="dark-saas"] .flow-node span,
html[data-theme="dark-saas"] .control-plane span,
html[data-theme="dark-saas"] .control-plane small,
html[data-theme="dark-saas"] .card p,
html[data-theme="dark-saas"] .resource-card p,
html[data-theme="dark-saas"] .use-case p,
html[data-theme="dark-saas"] .faq-answer,
html[data-theme="dark-saas"] .prose p,
html[data-theme="dark-saas"] .prose li,
html[data-theme="dark-saas"] .plan-price span,
html[data-theme="dark-saas"] .monthly-option,
html[data-theme="dark-saas"] .plan-facts dt,
html[data-theme="dark-saas"] .price-card li {
  color: #bcc5d1 !important;
}
html[data-theme="dark-saas"] .plan-facts > div { border-color: rgba(151,164,188,.12) !important; }
html[data-theme="dark-saas"] .plan-card.featured {
  background: linear-gradient(#0a0d13, #0a0d13) padding-box,
              linear-gradient(145deg, #5d66ee, #32b8e7) border-box !important;
}

/* Tabs / accordion / FAQ */
html[data-theme="dark-saas"] .app-tabs,
html[data-theme="dark-saas"] .tabs,
html[data-theme="dark-saas"] .pricing-tabs,
html[data-theme="dark-saas"] .tab-list {
  background: #06080d !important;
  border-color: rgba(151,164,188,.14) !important;
}
html[data-theme="dark-saas"] .tab-button:hover,
html[data-theme="dark-saas"] .faq-question:hover {
  color: #fff !important;
  background: #0b0e14 !important;
}
html[data-theme="dark-saas"] .tab-button[aria-selected="true"],
html[data-theme="dark-saas"] .app-tab.active,
html[data-theme="dark-saas"] .app-tab[aria-selected="true"] {
  color: #fff !important;
  background: linear-gradient(135deg, #4b55d8, #177fac) !important;
  border-color: rgba(122, 207, 255, .30) !important;
}
html[data-theme="dark-saas"] .faq,
html[data-theme="dark-saas"] .faq-item,
html[data-theme="dark-saas"] .faq-question { border-color: rgba(151,164,188,.13) !important; }
html[data-theme="dark-saas"] .faq-question { color: #e8edf4 !important; }

/* Forms */
html[data-theme="dark-saas"] input,
html[data-theme="dark-saas"] select,
html[data-theme="dark-saas"] textarea {
  color: #f5f7fa !important;
  background: #080b10 !important;
  border-color: rgba(158,172,198,.20) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.018) !important;
}
html[data-theme="dark-saas"] input::placeholder,
html[data-theme="dark-saas"] textarea::placeholder { color: #8792a3 !important; }
html[data-theme="dark-saas"] label { color: #d7dde6 !important; }

/* Tables / articles */
html[data-theme="dark-saas"] .prose,
html[data-theme="dark-saas"] .article { color: #dce2ea !important; }
html[data-theme="dark-saas"] .prose table { background: #07090e !important; }
html[data-theme="dark-saas"] .prose td,
html[data-theme="dark-saas"] .prose th { border-color: rgba(151,164,188,.13) !important; }

/* Buttons and CTA */
html[data-theme="dark-saas"] .btn-ghost,
html[data-theme="dark-saas"] .btn-secondary {
  color: #e9edf3 !important;
  background: #0a0d13 !important;
  border-color: rgba(157,171,197,.19) !important;
}
html[data-theme="dark-saas"] .cta-band {
  background:
    radial-gradient(520px 210px at 84% 0%, rgba(112, 88, 255, .10), transparent 62%),
    #090c12 !important;
  border-color: rgba(145,132,255,.19) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.025) !important;
}
html[data-theme="dark-saas"] .cta-band p { color: #c4ccd8 !important; }

/* Footer is the darkest endpoint of the page. */
html[data-theme="dark-saas"] .site-footer {
  color: #aeb8c6 !important;
  background: #020305 !important;
  border-top-color: rgba(151,164,188,.11) !important;
}
html[data-theme="dark-saas"] .site-footer p,
html[data-theme="dark-saas"] .footer-links,
html[data-theme="dark-saas"] .footer-links a,
html[data-theme="dark-saas"] .footer-bottom { color: #9fa9b8 !important; }
html[data-theme="dark-saas"] .footer-title,
html[data-theme="dark-saas"] .site-footer .brand-copy strong { color: #f6f8fb !important; }

/* Selection + scrollbar polish */
html[data-theme="dark-saas"] ::selection { background: rgba(78, 117, 255, .34); color: #fff; }
html[data-theme="dark-saas"] { scrollbar-color: #252b36 #05070a; }

/* Mobile: icon remains icon-only; no full-width labelled theme row. */
@media (max-width: 1199px) {
  .theme-toggle-v61 {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 12px 0;
    justify-self: start;
  }
  html[data-theme="dark-saas"] .desktop-nav {
    background: #030407 !important;
  }
}

@media (max-width: 600px) {
  body.enterprise-theme { font-size: 15.5px; }
  .hero-copy h1,
  .page-hero h1 { letter-spacing: -0.022em !important; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle-v61 { transition: none !important; }
}

/* --------------------------------------------------------------------------
   4. Page-specific legacy surfaces that previously kept the blue treatment
   -------------------------------------------------------------------------- */
html[data-theme="dark-saas"] .page-pricing .pricing-family,
html[data-theme="dark-saas"] .product-intro-panel,
html[data-theme="dark-saas"] .faq,
html[data-theme="dark-saas"] .architecture-diagram-figure,
html[data-theme="dark-saas"] .solutions-hero-media,
html[data-theme="dark-saas"] .contact-hero-media,
html[data-theme="dark-saas"] .media-banner {
  color: #eef2f7 !important;
  border-color: rgba(151, 164, 188, .14) !important;
  background: #080b10 !important;
  box-shadow: 0 18px 56px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.02) !important;
}

html[data-theme="dark-saas"] body.page-solutions .cloud-page-hero,
html[data-theme="dark-saas"] body.page-ai-solutions .cloud-page-hero,
html[data-theme="dark-saas"] body.page-pricing .pricing-hero,
html[data-theme="dark-saas"] body.page-contact .contact-hero {
  background-color: #030407 !important;
  background-image: none !important;
}

html[data-theme="dark-saas"] body.page-solutions .cloud-page-hero::after,
html[data-theme="dark-saas"] body.page-ai-solutions .cloud-page-hero::after,
html[data-theme="dark-saas"] body.page-contact .contact-hero::after {
  background:
    linear-gradient(90deg, #030407 0%, rgba(3,4,7,.96) 32%, rgba(3,4,7,.66) 62%, rgba(3,4,7,.24) 100%),
    linear-gradient(0deg, #030407 0%, transparent 46%) !important;
}

html[data-theme="dark-saas"] body.page-pricing .pricing-hero::after {
  background:
    linear-gradient(90deg, #030407 0%, rgba(3,4,7,.96) 34%, rgba(3,4,7,.72) 56%, rgba(3,4,7,.20) 82%, transparent 100%),
    radial-gradient(circle at 76% 70%, rgba(95, 86, 255, .08), transparent 28%),
    linear-gradient(0deg, #030407 0%, transparent 46%) !important;
}

html[data-theme="dark-saas"] .hero-art::before {
  background:
    linear-gradient(90deg, #030407 0%, rgba(3,4,7,.56) 19%, rgba(3,4,7,.10) 47%, transparent 64%),
    linear-gradient(0deg, #030407 0%, transparent 30%) !important;
}

html[data-theme="dark-saas"] .proof-strip {
  background: #080b10 !important;
  border-color: rgba(151,164,188,.14) !important;
}
html[data-theme="dark-saas"] .proof-grid > div {
  border-color: rgba(151,164,188,.10) !important;
}
html[data-theme="dark-saas"] .proof-grid strong { color: #f0f4f8 !important; }
html[data-theme="dark-saas"] .proof-grid span { color: #aeb8c6 !important; }

/* The original blue theme also gets a clarity pass, without changing its identity. */
html[data-theme="alza-blue"] body.enterprise-theme p { color: #b4c7dc; }
html[data-theme="alza-blue"] .card p,
html[data-theme="alza-blue"] .resource-card p,
html[data-theme="alza-blue"] .use-case p,
html[data-theme="alza-blue"] .faq-answer { color: #bed0e2 !important; }
html[data-theme="alza-blue"] .contact-bar-inner { color: #bfd0e2; }
html[data-theme="alza-blue"] .brand-copy small { color: #8da8c5; }

/* Tiny legacy labels were visibly fuzzy in full-page captures. */
.brand-copy span { font-size: .72rem !important; }
.brand-copy small { font-size: .58rem !important; font-weight: 650; }
.proof-grid strong { font-size: .84rem !important; font-weight: 700; }
.proof-grid span { font-size: .75rem !important; line-height: 1.45 !important; }
.contact-bar-inner { font-size: .78rem !important; }
.footer-bottom { font-size: .84rem !important; }

@media (max-width: 720px) {
  html[data-theme="dark-saas"] body.page-pricing .pricing-hero::after {
    background: linear-gradient(180deg, #030407 0%, rgba(3,4,7,.96) 56%, rgba(3,4,7,.72) 100%) !important;
  }
}

/* Build 62: keep contact-bar icons beside their labels, never stacked above. */
.contact-bar-inner > a,
.contact-bar-inner > .contact-location {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.contact-bar-inner > a > svg,
.contact-bar-inner > .contact-location > svg {
  display: block !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  vertical-align: middle !important;
}

/* --------------------------------------------------------------------------
   Build 63: true near-black Dark SaaS treatment for every inner-page hero.
   Legacy master.css uses blue background shorthands and blue-toned artwork on
   .cloud-page-hero. Override both the shorthand and pseudo layers here.
   -------------------------------------------------------------------------- */
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero {
  background: #030407 !important;
  background-color: #030407 !important;
  background-image: none !important;
  border-bottom-color: rgba(151, 164, 188, .10) !important;
  box-shadow: none !important;
}

/* Keep the page-specific artwork, but remove the large navy/blue cast. */
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero::before {
  opacity: .34 !important;
  filter: grayscale(.92) saturate(.16) brightness(.50) contrast(1.18) !important;
  -webkit-filter: grayscale(.92) saturate(.16) brightness(.50) contrast(1.18) !important;
  mix-blend-mode: normal !important;
}

/* Strong neutral-black overlay replaces every legacy blue hero overlay. */
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero::after {
  background:
    linear-gradient(90deg,
      #030407 0%,
      rgba(3,4,7,.995) 32%,
      rgba(3,4,7,.92) 50%,
      rgba(3,4,7,.76) 68%,
      rgba(3,4,7,.54) 84%,
      rgba(3,4,7,.42) 100%),
    linear-gradient(0deg,
      #030407 0%,
      rgba(3,4,7,.82) 22%,
      rgba(3,4,7,.28) 58%,
      transparent 100%) !important;
}

/* Maintain readable high-contrast hero copy on the neutral Dark SaaS surface. */
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero h1,
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero h2,
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero strong {
  color: #f8fafc !important;
}
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero .lead,
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero p,
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero .breadcrumbs {
  color: #c2cad6 !important;
}

/* Mobile artwork should remain subdued too; avoid the old full-width blue wash. */
@media (max-width: 720px) {
  html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero::before {
    opacity: .25 !important;
    filter: grayscale(.96) saturate(.10) brightness(.46) contrast(1.16) !important;
    -webkit-filter: grayscale(.96) saturate(.10) brightness(.46) contrast(1.16) !important;
  }
  html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero::after {
    background: linear-gradient(180deg,
      rgba(3,4,7,.92) 0%,
      rgba(3,4,7,.84) 44%,
      #030407 100%) !important;
  }
}


/* --------------------------------------------------------------------------
   Build 64: finish Dark SaaS neutralisation for premium service cards and
   customer-controlled architecture visuals. Blue/cyan remains accent-only.
   -------------------------------------------------------------------------- */

/* Homepage premium service/bento region: true near-black surfaces. */
html[data-theme="dark-saas"] .b57-service-section {
  background: #030407 !important;
  background-image: none !important;
  border-color: rgba(151,164,188,.10) !important;
}
html[data-theme="dark-saas"] .b57-premium-grid {
  opacity: .13 !important;
  filter: grayscale(1) saturate(0) !important;
  -webkit-filter: grayscale(1) saturate(0) !important;
}
html[data-theme="dark-saas"] .b57-premium-card {
  background: linear-gradient(155deg,#0b0e14 0%,#07090d 100%) !important;
  border-color: rgba(151,164,188,.16) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.025) !important;
}
html[data-theme="dark-saas"] .b57-premium-card:hover {
  border-color: rgba(108,212,255,.24) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.42), 0 0 26px rgba(64,187,255,.055) !important;
}
/* Neutralise the large Tailwind accent wash inside each card. */
html[data-theme="dark-saas"] .b57-premium-card > div[aria-hidden="true"]:first-child {
  background: radial-gradient(80% 70% at 8% 0%,rgba(91,205,255,.055),transparent 58%),
              linear-gradient(155deg,rgba(255,255,255,.018),transparent 62%) !important;
  opacity: 1 !important;
}
html[data-theme="dark-saas"] .b57-premium-card > div[aria-hidden="true"]:nth-child(2) {
  background: rgba(102,213,255,.055) !important;
  opacity: .48 !important;
}
html[data-theme="dark-saas"] .b57-premium-card h3 { color:#f5f7fa !important; }
html[data-theme="dark-saas"] .b57-premium-card p { color:#b8c1cf !important; }

/* Architecture figure shell and caption: remove legacy navy panels. */
html[data-theme="dark-saas"] .architecture-diagram-figure {
  background: #07090d !important;
  border-color: rgba(151,164,188,.16) !important;
  box-shadow: 0 22px 64px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.025) !important;
}
html[data-theme="dark-saas"] .architecture-diagram-figure figcaption {
  color: #aeb8c6 !important;
  background: #080b10 !important;
  border-top-color: rgba(151,164,188,.12) !important;
}
/* The source artwork itself is blue. Keep it readable while taking the large
   blue field out of Dark SaaS. Applies to both desktop WebP and mobile H.264. */
html[data-theme="dark-saas"] .architecture-diagram-image,
html[data-theme="dark-saas"] .architecture-diagram-figure .media-h264-mobile {
  background: #05070a !important;
  border-color: rgba(151,164,188,.12) !important;
  filter: grayscale(.72) saturate(.30) brightness(.68) contrast(1.10) !important;
  -webkit-filter: grayscale(.72) saturate(.30) brightness(.68) contrast(1.10) !important;
}
/* Convert the legacy bright-blue scanner into a restrained neutral/cyan sheen. */
html[data-theme="dark-saas"] .architecture-diagram-figure::after {
  background: linear-gradient(90deg,transparent,rgba(203,234,247,.055),rgba(102,213,255,.045),transparent) !important;
  filter: blur(11px) grayscale(.55) !important;
  opacity: .62 !important;
}

/* Also neutralise the older CSS-drawn architecture blocks if used elsewhere. */
html[data-theme="dark-saas"] .boundary-diagram,
html[data-theme="dark-saas"] .control-plane,
html[data-theme="dark-saas"] .flow-node {
  background: linear-gradient(155deg,#0c1017,#080a0f) !important;
  border-color: rgba(151,164,188,.16) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.022) !important;
}
html[data-theme="dark-saas"] .flow-node b,
html[data-theme="dark-saas"] .control-plane b { color:#f2f5f8 !important; }
html[data-theme="dark-saas"] .flow-node span,
html[data-theme="dark-saas"] .control-plane span,
html[data-theme="dark-saas"] .control-plane small { color:#aeb8c6 !important; }
html[data-theme="dark-saas"] .perimeter-label { color:#67d8ff !important; }


/* --------------------------------------------------------------------------
   Build 65: restore animated hero artwork visibility in Dark SaaS.
   Keep the hero canvas near-black, but stop crushing the animated WebP/MP4.
   The overlay remains strong behind copy and opens up over the artwork side.
   -------------------------------------------------------------------------- */
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero {
  background: #030407 !important;
  background-color: #030407 !important;
  background-image: none !important;
}

/* Desktop/laptop animated WebP pseudo artwork: visible again, still controlled. */
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero::before {
  display: block !important;
  opacity: .68 !important;
  filter: grayscale(.18) saturate(.78) brightness(.76) contrast(1.10) !important;
  -webkit-filter: grayscale(.18) saturate(.78) brightness(.76) contrast(1.10) !important;
  mix-blend-mode: screen !important;
}

/* Protect the copy on the left while leaving the artwork visible on the right. */
html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero::after {
  background:
    linear-gradient(90deg,
      #030407 0%,
      rgba(3,4,7,.985) 25%,
      rgba(3,4,7,.91) 43%,
      rgba(3,4,7,.62) 58%,
      rgba(3,4,7,.30) 73%,
      rgba(3,4,7,.12) 88%,
      rgba(3,4,7,.05) 100%),
    linear-gradient(0deg,
      #030407 0%,
      rgba(3,4,7,.58) 17%,
      rgba(3,4,7,.12) 45%,
      transparent 72%) !important;
}

/* Dedicated hero media panels remain Dark SaaS, but the moving WebP/MP4 itself
   is allowed to retain enough cyan/blue light to be legible as animated art. */
html[data-theme="dark-saas"] .solutions-hero-media .media-webp-desktop,
html[data-theme="dark-saas"] .contact-hero-media .media-webp-desktop,
html[data-theme="dark-saas"] .company-hero-media .media-webp-desktop {
  opacity: .86 !important;
  filter: saturate(.78) brightness(.78) contrast(1.08) !important;
  -webkit-filter: saturate(.78) brightness(.78) contrast(1.08) !important;
}

/* Mobile uses H.264 where the page already provides it. Do not bury the video
   under the Dark SaaS overlay. */
@media (max-width: 900px) {
  html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero::before {
    /* Responsive-v45 intentionally uses H.264 on mobile when available. */
    display: none !important;
  }

  html[data-theme="dark-saas"] body.enterprise-theme .page-hero-mobile-video {
    display: block !important;
    opacity: .64 !important;
    filter: saturate(.78) brightness(.72) contrast(1.10) !important;
    -webkit-filter: saturate(.78) brightness(.72) contrast(1.10) !important;
    background: #030407 !important;
  }

  html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero::after {
    background:
      linear-gradient(180deg,
        rgba(3,4,7,.58) 0%,
        rgba(3,4,7,.50) 35%,
        rgba(3,4,7,.66) 66%,
        #030407 100%),
      linear-gradient(90deg,
        rgba(3,4,7,.72) 0%,
        rgba(3,4,7,.40) 58%,
        rgba(3,4,7,.14) 100%) !important;
  }

  html[data-theme="dark-saas"] .solutions-hero-media .media-h264-mobile,
  html[data-theme="dark-saas"] .contact-hero-media .media-h264-mobile,
  html[data-theme="dark-saas"] .company-hero-media .media-h264-mobile {
    opacity: .82 !important;
    filter: saturate(.78) brightness(.74) contrast(1.08) !important;
    -webkit-filter: saturate(.78) brightness(.74) contrast(1.08) !important;
    background: #030407 !important;
  }
}

/* On wider screens the hero copy generally occupies the left half. Give the
   right-side artwork a little more presence without turning the canvas blue. */
@media (min-width: 1100px) {
  html[data-theme="dark-saas"] body.enterprise-theme .page-hero.cloud-page-hero::before {
    opacity: .74 !important;
  }
}

/* ========================================================================== 
   Build 68 — restore approved desktop composition + one About media source.
   No desktop section/grid/layout geometry is changed here.
   ========================================================================== */

/* Solutions Dark SaaS: foreground delivery-model panel only; never duplicate
   it with the generic UAE pseudo-background. */
@media (min-width: 901px) {
  html[data-theme="dark-saas"] body.page-solutions .page-hero.cloud-page-hero::before {
    display: none !important;
    background-image: none !important;
    opacity: 0 !important;
  }
}

/* About has exactly one hero media source per viewport.
   Desktop = animated WebP pseudo-background. Mobile = H.264 + WebP poster. */
@media (min-width: 901px) {
  body.page-about .about-hero-mobile-video {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  body.page-about .page-hero.cloud-page-hero::before {
    display: block !important;
    background-image: url('/assets/img/uae-tech-solutions.webp?v=68') !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: contain !important;
  }
  html[data-theme="dark-saas"] body.page-about .page-hero.cloud-page-hero::before {
    opacity: .67 !important;
    filter: saturate(.72) brightness(.69) contrast(1.10) !important;
    -webkit-filter: saturate(.72) brightness(.69) contrast(1.10) !important;
    mix-blend-mode: screen !important;
  }
}

@media (max-width: 900px) {
  body.page-about .page-hero.cloud-page-hero::before {
    display: none !important;
  }
  body.page-about .about-hero-mobile-video:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: .55 !important;
    background: #020a18 !important;
    filter: saturate(.96) brightness(.82) contrast(1.08) !important;
    -webkit-filter: saturate(.96) brightness(.82) contrast(1.08) !important;
  }
  html[data-theme="dark-saas"] body.page-about .about-hero-mobile-video:not([hidden]) {
    opacity: .60 !important;
    background: #030407 !important;
    filter: saturate(.82) brightness(.76) contrast(1.11) !important;
    -webkit-filter: saturate(.82) brightness(.76) contrast(1.11) !important;
  }
  body.page-about .page-hero.cloud-page-hero::after {
    background:
      linear-gradient(180deg, rgba(3,16,38,.78) 0%, rgba(3,16,38,.62) 48%, rgba(3,16,38,.48) 100%),
      linear-gradient(90deg, rgba(3,16,38,.76) 0%, rgba(3,16,38,.36) 70%, rgba(3,16,38,.16) 100%) !important;
  }
  html[data-theme="dark-saas"] body.page-about .page-hero.cloud-page-hero::after {
    background:
      linear-gradient(180deg, rgba(3,4,7,.78) 0%, rgba(3,4,7,.61) 48%, rgba(3,4,7,.48) 100%),
      linear-gradient(90deg, rgba(3,4,7,.78) 0%, rgba(3,4,7,.38) 70%, rgba(3,4,7,.15) 100%) !important;
  }
}

/* Desktop motion without a desktop layout rewrite. Existing dimensions, grids,
   section backgrounds and spacing remain exactly as before Build 66/67. */
@media (min-width: 901px) {
  .motion-surface-v54 {
    overflow: hidden;
  }
  .desktop-glass-sheen-v68 {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    top: -35%;
    bottom: -35%;
    left: -34%;
    width: 22%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(123,226,255,.13), rgba(118,137,255,.08), transparent);
    filter: blur(8px);
    transform: translate3d(-220%,0,0) rotate(12deg);
    animation: v68-desktop-glass-sweep 7.4s cubic-bezier(.42,0,.2,1) infinite;
  }
  html[data-theme="dark-saas"] .desktop-glass-sheen-v68 {
    background: linear-gradient(90deg, transparent, rgba(125,222,255,.10), rgba(135,118,255,.055), transparent);
  }

  /* Guarantee the original animated WebP/panel effects continue on desktop,
     including Windows systems that expose prefers-reduced-motion. */
  .page-hero.cloud-page-hero::before {
    animation: alzaHeroDrift35 11s ease-in-out infinite alternate !important;
  }
  .solutions-hero-media,
  .contact-hero-media,
  .architecture-diagram-figure {
    animation: alzaPanelFloat35 7.5s ease-in-out infinite alternate,
               alzaPanelGlow35 4.8s ease-in-out infinite alternate !important;
  }
  .solutions-hero-media::after,
  .contact-hero-media::after,
  .architecture-diagram-figure::after {
    display: block !important;
    animation: alzaScan35 8.5s cubic-bezier(.42,0,.2,1) infinite !important;
  }
}

@keyframes v68-desktop-glass-sweep {
  0%,12% { transform: translate3d(-220%,0,0) rotate(12deg); opacity:0; }
  24% { opacity:.88; }
  62% { opacity:.34; }
  76%,100% { transform: translate3d(700%,0,0) rotate(12deg); opacity:0; }
}


/* Build 69 — live ALZA mark, stable CTA component, web-development service grids. */
.site-header .brand-logo,
.site-footer .brand-logo {
  transform-origin: 50% 52%;
  will-change: transform, filter;
  animation: alza-mark-live-v69 3.6s ease-in-out infinite;
}
.site-header .brand:hover .brand-logo,
.site-footer .brand:hover .brand-logo {
  filter: brightness(1.18) saturate(1.18) drop-shadow(0 0 7px rgba(48,218,255,.82)) drop-shadow(0 0 22px rgba(31,126,255,.72));
}
@keyframes alza-mark-live-v69 {
  0%,100% { transform: translateZ(0) scale(1); filter: brightness(1.02) saturate(1.06) drop-shadow(0 0 5px rgba(45,204,255,.38)) drop-shadow(0 0 13px rgba(29,112,255,.30)); }
  48% { transform: translateZ(0) scale(1.035); filter: brightness(1.17) saturate(1.18) drop-shadow(0 0 9px rgba(60,224,255,.76)) drop-shadow(0 0 25px rgba(37,128,255,.60)); }
  68% { transform: translateZ(0) scale(1.018); filter: brightness(1.10) saturate(1.12) drop-shadow(0 0 7px rgba(75,216,255,.58)) drop-shadow(0 0 18px rgba(93,81,255,.40)); }
}

/* CTA bands are content components, not tilt/glass cards. Keep their content
   stable in every theme and viewport and remove legacy pseudo-layer collisions. */
.cta-band {
  isolation: isolate !important;
  overflow: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.cta-band::after {
  content: none !important;
  display: none !important;
}
.cta-band::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  right: -110px !important;
  top: -150px !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,rgba(58,190,255,.13),rgba(82,92,255,.055) 38%,transparent 70%) !important;
}
html[data-theme="dark-saas"] .cta-band::before {
  background: radial-gradient(circle,rgba(78,205,255,.095),rgba(118,91,255,.045) 38%,transparent 70%) !important;
}
.cta-band > * {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.cta-band h2 { max-width: 820px !important; overflow-wrap: normal; word-break: normal; }
.cta-band p { max-width: 760px !important; }
.cta-band .actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  width: auto !important;
  max-width: 100% !important;
}
.cta-band .actions .btn {
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  text-align: center;
}
.desktop-glass-sheen-v68 { display:none !important; }

/* Intentional 2x2 capability grid after adding web development. */
@media (min-width: 901px) {
  .page-about .about-delivery-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .page-solutions #website-development { grid-column: span 2; }
  .page-projects .web-development-use-case { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .cta-band { padding: 34px 22px !important; }
  .cta-band .actions { display:grid !important; grid-template-columns:minmax(0,1fr) !important; width:100% !important; }
  .cta-band .actions .btn { width:100% !important; justify-content:center !important; }
}
@media (max-width: 479px) {
  .cta-band { padding: 28px 18px !important; border-radius: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand-logo,.site-footer .brand-logo { animation:none !important; filter:brightness(1.08) saturate(1.10) drop-shadow(0 0 7px rgba(48,218,255,.48)) drop-shadow(0 0 18px rgba(31,126,255,.38)); }
}


/* Build 70 — visibly live ALZA A mark.  This is intentionally applied after
   the Build 69 pulse so it wins without changing logo dimensions/layout. */
.site-header .brand-logo,
.site-footer .brand-logo {
  transform-origin: 50% 52% !important;
  will-change: transform, filter !important;
  animation: alza-mark-live-v70 2.85s cubic-bezier(.42,0,.2,1) infinite !important;
  backface-visibility: hidden;
}

@keyframes alza-mark-live-v70 {
  0%,100% {
    transform: translate3d(0,0,0) scale(1) rotate(0deg);
    filter:
      brightness(1.04) saturate(1.08)
      drop-shadow(0 0 4px rgba(37,211,255,.42))
      drop-shadow(0 0 11px rgba(36,126,255,.28));
  }
  18% {
    transform: translate3d(0,-1px,0) scale(1.018) rotate(-.35deg);
    filter:
      brightness(1.14) saturate(1.16)
      drop-shadow(0 0 7px rgba(54,226,255,.72))
      drop-shadow(0 0 18px rgba(37,136,255,.48));
  }
  42% {
    transform: translate3d(0,-2px,0) scale(1.065) rotate(.45deg);
    filter:
      brightness(1.30) saturate(1.30)
      drop-shadow(0 0 11px rgba(78,236,255,.98))
      drop-shadow(0 0 28px rgba(38,139,255,.78))
      drop-shadow(0 0 42px rgba(89,74,255,.38));
  }
  58% {
    transform: translate3d(0,-1px,0) scale(1.038) rotate(-.2deg);
    filter:
      brightness(1.19) saturate(1.20)
      drop-shadow(0 0 9px rgba(59,222,255,.80))
      drop-shadow(0 0 22px rgba(69,112,255,.58));
  }
  76% {
    transform: translate3d(0,0,0) scale(1.012) rotate(.15deg);
    filter:
      brightness(1.10) saturate(1.13)
      drop-shadow(0 0 6px rgba(48,213,255,.60))
      drop-shadow(0 0 15px rgba(42,128,255,.38));
  }
}

.site-header .brand:hover .brand-logo,
.site-footer .brand:hover .brand-logo {
  animation-duration: 1.65s !important;
  filter:
    brightness(1.34) saturate(1.30)
    drop-shadow(0 0 12px rgba(78,236,255,1))
    drop-shadow(0 0 30px rgba(37,139,255,.82)) !important;
}

@media (max-width: 900px) {
  .site-header .brand-logo,
  .site-footer .brand-logo {
    animation-duration: 3.1s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .brand-logo,
  .site-footer .brand-logo {
    animation: none !important;
    transform: none !important;
    filter:
      brightness(1.16) saturate(1.18)
      drop-shadow(0 0 8px rgba(60,224,255,.72))
      drop-shadow(0 0 20px rgba(37,128,255,.52)) !important;
  }
}

/* Build 71 — desktop-safe live ALZA logo.
   The animation runs on a dedicated wrapper so legacy .brand-logo rules and
   desktop prefers-reduced-motion cannot cancel the requested branded effect. */
.brand-logo-live {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 0;
  isolation: isolate;
}
.brand-logo-live .brand-logo {
  display: block;
}

@media (min-width: 1200px) {
  .site-header .brand-logo-live,
  .site-footer .brand-logo-live {
    transform-origin: 50% 54%;
    will-change: transform;
    animation: alza-logo-desktop-float-v71 2.65s cubic-bezier(.42,0,.2,1) infinite !important;
  }

  .site-header .brand-logo-live::before,
  .site-footer .brand-logo-live::before {
    content: "";
    position: absolute;
    inset: 7% 3% 5%;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background:
      radial-gradient(circle at 38% 45%, rgba(54,230,255,.58) 0%, rgba(35,170,255,.25) 34%, rgba(71,83,255,.13) 56%, transparent 73%);
    filter: blur(9px);
    opacity: .38;
    transform: scale(.88);
    animation: alza-logo-desktop-aura-v71 2.65s ease-in-out infinite !important;
  }

  .site-header .brand-logo-live::after,
  .site-footer .brand-logo-live::after {
    content: "";
    position: absolute;
    inset: 15% 13%;
    z-index: 2;
    pointer-events: none;
    border-radius: 44%;
    background: linear-gradient(112deg, transparent 25%, rgba(151,245,255,.62) 46%, rgba(255,255,255,.80) 50%, rgba(100,189,255,.34) 55%, transparent 72%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-80%) skewX(-14deg);
    animation: alza-logo-desktop-scan-v71 3.9s cubic-bezier(.4,0,.2,1) infinite !important;
  }

  .site-header .brand-logo-live .brand-logo,
  .site-footer .brand-logo-live .brand-logo,
  html[data-theme="dark-saas"] .site-header .brand-logo-live .brand-logo,
  html[data-theme="dark-saas"] .site-footer .brand-logo-live .brand-logo {
    animation: alza-logo-desktop-energy-v71 2.65s ease-in-out infinite !important;
    transform: translateZ(0);
    filter: brightness(1.07) saturate(1.12) drop-shadow(0 0 6px rgba(43,216,255,.48)) drop-shadow(0 0 15px rgba(35,122,255,.34)) !important;
    will-change: filter;
  }

  .site-header .brand:hover .brand-logo-live,
  .site-footer .brand:hover .brand-logo-live {
    animation-duration: 1.55s !important;
  }
  .site-header .brand:hover .brand-logo-live::before,
  .site-footer .brand:hover .brand-logo-live::before,
  .site-header .brand:hover .brand-logo-live .brand-logo,
  .site-footer .brand:hover .brand-logo-live .brand-logo {
    animation-duration: 1.55s !important;
  }
}

@keyframes alza-logo-desktop-float-v71 {
  0%,100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  22% { transform: translate3d(0,-1px,0) scale(1.016) rotate(-.28deg); }
  48% { transform: translate3d(0,-2px,0) scale(1.055) rotate(.35deg); }
  72% { transform: translate3d(0,-1px,0) scale(1.024) rotate(-.12deg); }
}

@keyframes alza-logo-desktop-energy-v71 {
  0%,100% {
    filter: brightness(1.06) saturate(1.10) drop-shadow(0 0 5px rgba(46,216,255,.44)) drop-shadow(0 0 13px rgba(35,122,255,.31));
  }
  48% {
    filter: brightness(1.34) saturate(1.32) drop-shadow(0 0 12px rgba(91,241,255,.98)) drop-shadow(0 0 28px rgba(43,146,255,.82)) drop-shadow(0 0 42px rgba(95,82,255,.42));
  }
  70% {
    filter: brightness(1.17) saturate(1.20) drop-shadow(0 0 8px rgba(58,226,255,.72)) drop-shadow(0 0 20px rgba(57,124,255,.52));
  }
}

@keyframes alza-logo-desktop-aura-v71 {
  0%,100% { opacity:.28; transform:scale(.82); }
  48% { opacity:.88; transform:scale(1.18); }
  72% { opacity:.48; transform:scale(.98); }
}

@keyframes alza-logo-desktop-scan-v71 {
  0%,56% { opacity:0; transform:translateX(-95%) skewX(-14deg); }
  64% { opacity:.18; }
  74% { opacity:.70; }
  86% { opacity:0; transform:translateX(95%) skewX(-14deg); }
  100% { opacity:0; transform:translateX(95%) skewX(-14deg); }
}

/* Explicitly keep the requested desktop brand animation alive even where
   Windows/Chrome reports prefers-reduced-motion. Other site animations retain
   their existing accessibility behavior. */
@media (min-width:1200px) and (prefers-reduced-motion: reduce) {
  .site-header .brand-logo-live,
  .site-footer .brand-logo-live {
    animation: alza-logo-desktop-float-v71 3.2s ease-in-out infinite !important;
  }
  .site-header .brand-logo-live::before,
  .site-footer .brand-logo-live::before {
    animation: alza-logo-desktop-aura-v71 3.2s ease-in-out infinite !important;
  }
  .site-header .brand-logo-live::after,
  .site-footer .brand-logo-live::after {
    animation: alza-logo-desktop-scan-v71 4.4s ease-in-out infinite !important;
  }
  .site-header .brand-logo-live .brand-logo,
  .site-footer .brand-logo-live .brand-logo {
    animation: alza-logo-desktop-energy-v71 3.2s ease-in-out infinite !important;
  }
}