/*
 * IDCsmart public-site design system.
 * Scope: official website pages, product pages, service/about and support.
 * The application marketplace intentionally does not load this stylesheet.
 */

:root {
  /* Brand and semantic colour */
  --site-brand: #ff6868;
  --site-brand-hover: #f45f62;
  --site-brand-active: #e95758;
  --site-brand-soft: #fff1ef;
  --site-brand-faint: rgba(255, 104, 104, .08);
  --site-info: #6176c9;
  --site-success: #53a985;
  --site-warning: #d99a45;
  --site-danger: #e95758;

  /* Text hierarchy */
  --site-text-strong: #313a50;
  --site-text-primary: #384257;
  --site-text-secondary: #7d8797;
  --site-text-tertiary: #9aa1ae;
  --site-text-disabled: #bdc3cd;
  --site-text-inverse: #fff;

  /* Surfaces and boundaries */
  --site-surface-page: #fff;
  --site-surface-muted: #f7f8fb;
  --site-surface-subtle: #fafbfc;
  --site-surface-raised: rgba(255, 255, 255, .98);
  --site-outline: #e2e6ed;
  --site-outline-soft: #eceef3;
  --site-outline-strong: #d5dbe4;

  /* Type scale */
  --site-font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --site-font-hero: 50px;
  --site-font-section: 34px;
  --site-font-subsection: 24px;
  --site-font-card-title: 18px;
  --site-font-body-lg: 17px;
  --site-font-body: 14px;
  --site-font-label: 12px;
  --site-font-caption: 11px;
  --site-weight-regular: 400;
  --site-weight-medium: 500;
  --site-weight-semibold: 600;
  --site-weight-title: 650;
  --site-weight-section: 680;
  --site-weight-hero: 700;

  /* Shape, elevation and layout */
  --site-radius-compact: 2px;
  --site-radius-structural: 4px;
  --site-shadow-card: 0 10px 28px rgba(49, 59, 78, .08);
  --site-shadow-card-hover: 0 16px 34px rgba(49, 59, 78, .13);
  --site-shadow-float: 0 22px 54px rgba(49, 59, 78, .12);
  --site-shadow-popover: 0 10px 26px rgba(45, 53, 69, .12);
  --site-content-width: 1480px;
  --site-hero-description-width: 620px;
  --site-section-space: 112px;
  --site-section-space-compact: 88px;
  --site-section-boundary-space: 64px;
  --site-section-inset: 88px;
  --site-heading-content-gap: 56px;
  --site-layout-gap: 72px;
  --site-card-gap: 24px;
  --site-card-padding: 32px;
  --site-control-height: 52px;
  --site-header-action-gap: 18px;
  --site-header-action-height: 40px;
  --site-header-register-width: 112px;
  --site-header-action-font-size: 14px;
  --site-header-action-color: #515b6d;

  /* Compatibility aliases used by the existing page families. */
  --coral: var(--site-brand);
  --ink: var(--site-text-primary);
  --muted: var(--site-text-secondary);
  --font: var(--site-font-family);
  --content: var(--site-content-width);
  --fixed-width: var(--site-content-width);
  --section-space-top: var(--site-section-space);
  --section-space-bottom: var(--site-section-space);
  --section-heading-gap: var(--site-heading-content-gap);
  --radius-control: var(--site-radius-structural);
  --radius-card: var(--site-radius-structural);
  --radius-panel: var(--site-radius-structural);
}

html {
  font-family: var(--site-font-family);
}

body {
  color: var(--site-text-primary);
  background: var(--site-surface-page);
  font-family: var(--site-font-family);
  font-weight: var(--site-weight-regular);
  text-rendering: optimizeLegibility;
}

body:not(.market-page) {
  /* Dense support/document pages use these legacy variable names. */
  --ink: var(--site-text-primary);
  --ink-strong: var(--site-text-strong);
  --ink-soft: rgba(56, 66, 87, .84);
  --ink-faint: rgba(56, 66, 87, .62);
  --muted: var(--site-text-secondary);
  --line: var(--site-outline);
  --line-strong: var(--site-outline-strong);
  --soft: rgba(56, 66, 87, .04);
  --active: var(--site-brand-faint);
  --accent: var(--site-brand);
  --accent-soft: var(--site-brand-faint);
  --surface: var(--site-surface-page);
}

body.is-dark {
  --ink: #e8e8e8;
  --ink-strong: #fff;
  --ink-soft: #d0d0d0;
  --ink-faint: #aaa;
  --muted: #b6bac2;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .17);
  --soft: rgba(255, 255, 255, .06);
  --active: rgba(255, 104, 104, .16);
  --accent: #ff827c;
  --accent-soft: rgba(255, 130, 124, .14);
  --surface: #484848;
}

.business-page {
  --business-coral: var(--site-brand);
  --business-coral-deep: var(--site-brand-hover);
  --business-ink: var(--site-text-strong);
  --business-muted: var(--site-text-secondary);
  --business-line: var(--site-outline);
  --business-soft: var(--site-brand-soft);
}

.product-detail-page {
  --pd-ink: var(--site-text-strong);
  --pd-muted: var(--site-text-secondary);
  --pd-line: var(--site-outline);
  --pd-accent: var(--site-brand);
  --pd-accent-rgb: 255, 104, 104;
  --pd-accent-2: var(--site-brand-hover);
  --pd-soft: var(--site-brand-soft);
}

.experience-page {
  --experience-ink: var(--site-text-strong);
  --experience-muted: var(--site-text-secondary);
  --experience-line: var(--site-outline);
  --experience-coral: var(--site-brand);
}

.support-page {
  --page-width: var(--site-content-width);
  --ink: var(--site-text-primary);
  --ink-strong: var(--site-text-strong);
  --muted: var(--site-text-secondary);
  --line: var(--site-outline);
  --blue: var(--site-brand);
  --violet: var(--site-brand-hover);
  --surface: var(--site-surface-page);
  --soft-surface: var(--site-surface-muted);
  --card-shadow: var(--site-shadow-card);
}

/* Document centre aliases. Dark mode keeps its body-scoped variables. */
:root {
  --page-max: var(--site-content-width);
  --accent: var(--site-brand);
  --accent-soft: var(--site-brand-faint);
}

/* Primary navigation and readable content share one text system. */
.nav-link,
.language,
.login,
.site-header__link,
.site-header__action,
.topbar a,
.topbar button {
  font-family: var(--site-font-family);
  font-weight: var(--site-weight-medium);
}

/* Public-site account actions share one footprint across every page family. */
@media (min-width: 901px) {
  body:not(.support-page) .site-header .nav-inner {
    grid-template-columns: 300px minmax(0, 1fr) 300px;
  }
}

body:not(.support-page) .site-header .nav-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  justify-self: stretch;
  gap: var(--site-header-action-gap);
  color: var(--site-header-action-color);
  font-family: var(--site-font-family);
  font-size: var(--site-header-action-font-size);
  font-weight: var(--site-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.site-language-switcher {
  position: relative;
  margin: 0;
  color: inherit;
}

.site-language-switcher > summary {
  list-style: none;
}

.site-language-switcher > summary::-webkit-details-marker {
  display: none;
}

body:not(.support-page) .site-header .nav-actions :is(.language, .login) {
  width: auto;
  height: var(--site-header-action-height);
  display: inline-flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  color: var(--site-header-action-color);
  background: transparent;
  box-shadow: none;
  font: 500 var(--site-header-action-font-size)/1 var(--site-font-family);
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease;
}

body:not(.support-page) .site-header .nav-actions :is(.language, .login):hover,
body:not(.support-page) .site-header .nav-actions :is(.language, .login):focus-visible,
.site-language-switcher[open] > .language {
  color: var(--site-brand);
  filter: none;
  transform: none;
  box-shadow: none;
}

body:not(.support-page) .site-header .nav-actions .signup {
  width: var(--site-header-register-width);
  height: var(--site-header-action-height);
  display: inline-flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--site-radius-structural);
  color: #fff;
  background: var(--site-brand);
  box-shadow: none;
  font: 600 var(--site-header-action-font-size)/1 var(--site-font-family);
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body:not(.support-page) .site-header .nav-actions .signup:hover,
body:not(.support-page) .site-header .nav-actions .signup:focus-visible {
  color: #fff;
  background: var(--site-brand-hover);
  box-shadow: 0 8px 18px rgba(244, 95, 98, .2);
  filter: none;
  transform: translateY(-1px);
}

.site-language-menu {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 8px);
  right: -12px;
  min-width: 112px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--site-outline);
  border-radius: var(--site-radius-structural);
  background: #fff;
  box-shadow: var(--site-shadow-popover);
}

.site-language-menu a {
  padding: 9px 10px;
  border-radius: 2px;
  color: var(--site-header-action-color);
  font: 500 14px/1.35 var(--site-font-family);
  letter-spacing: 0;
  text-decoration: none;
}

.site-language-menu a:hover,
.site-language-menu a:focus-visible,
.site-language-menu a.is-current {
  color: var(--site-brand);
  background: var(--site-brand-soft);
}

body .nav-actions .language .language-chevron {
  width: 7px;
  height: 7px;
  display: inline-block;
  flex: 0 0 auto;
  margin: -4px 0 0 8px;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: #8e96a4;
  font-size: 0;
  line-height: 0;
  transform: rotate(45deg);
  transition: color 180ms ease, transform 180ms ease;
}

body .nav-actions .language:hover .language-chevron {
  color: currentColor;
}

.site-language-switcher[open] .language-chevron {
  margin-top: 4px;
  transform: rotate(225deg);
}

body:not(.market-page) :is(
  .hero-copy h1,
  .bms-hero-copy h1,
  .pd-hero-copy h1,
  .service-product-hero-copy h1,
  .about-product-hero-copy h1,
  .support-page .hero__copy h1
) {
  color: var(--site-text-strong);
  font-size: var(--site-font-hero);
  font-weight: var(--site-weight-hero);
  letter-spacing: -.035em;
  line-height: 1.2;
}

body:not(.market-page) :is(
  .hero-copy > p,
  .bms-hero-description,
  .pd-hero-description,
  .service-product-hero-copy > p,
  .about-product-hero-copy > p,
  .support-page .hero__description
) {
  width: min(var(--site-hero-description-width), 100%);
  max-width: var(--site-hero-description-width);
  color: var(--site-text-secondary);
  font-size: var(--site-font-body-lg);
  font-weight: var(--site-weight-regular);
  line-height: 1.8;
}

body.about-experience-page .about-product-hero-copy > p:not(.experience-eyebrow) {
  width: min(var(--site-hero-description-width), 100%);
  max-width: var(--site-hero-description-width);
}

.section-title-v10__row h2,
.section-title-v10 > h2,
.pd-heading > :is(
  #cloud-rights-title,
  #cloud-products-title,
  #cloud-features-title,
  #dcim-capabilities-title,
  #dcim-operations-title,
  #dcim-flow-title,
  #dcim-features-title
) {
  color: var(--site-text-primary);
  font-size: var(--site-font-section);
  font-weight: var(--site-weight-section);
}

.section-title-v10 > p:last-child,
.pd-heading:has(> :is(
  #cloud-rights-title,
  #cloud-products-title,
  #cloud-features-title,
  #dcim-capabilities-title,
  #dcim-operations-title,
  #dcim-flow-title,
  #dcim-features-title
)) > p:last-child {
  color: var(--site-text-secondary);
  font-size: var(--site-font-body);
  font-weight: var(--site-weight-regular);
  line-height: 1.7;
}

:where(
  .highlight-card,
  .bms-hero-card,
  .cloud-hero-card,
  .dcim-hero-card,
  .service-hero-card,
  .about-hero-card,
  .feedback-card,
  .document-card,
  .company-value-grid article,
  .partner-outcome-grid article,
  .service-verify,
  .service-announcement,
  .bms-plan-card,
  .cloud-growth-card,
  .business-growth-stage,
  .dcim-operation-row,
  .careers-board,
  .journey-card
) :where(h2, h3, strong) {
  color: var(--site-text-strong);
  font-weight: var(--site-weight-title);
}

:where(
  .highlight-card,
  .bms-hero-card,
  .cloud-hero-card,
  .dcim-hero-card,
  .service-hero-card,
  .about-hero-card,
  .feedback-card,
  .document-card,
  .company-value-grid article,
  .partner-outcome-grid article,
  .service-verify,
  .service-announcement,
  .bms-plan-card,
  .cloud-growth-card,
  .business-growth-stage,
  .dcim-operation-row,
  .careers-board,
  .journey-card
) :where(p, small) {
  color: var(--site-text-secondary);
  font-weight: var(--site-weight-regular);
}

/* Shared action sizes. Page-specific colours remain semantic. */
body:not(.market-page) :is(
  .hero-cta,
  .about-cta,
  .business-button,
  .pd-button,
  .experience-button,
  .button,
  .global-cta-button,
  .support-cta__button
) {
  min-width: 152px;
  height: var(--site-control-height) !important;
  padding: 0 26px;
  border-radius: var(--site-radius-structural);
  font-family: var(--site-font-family);
  font-size: var(--site-font-body);
  font-weight: var(--site-weight-semibold);
  letter-spacing: 0;
  line-height: 1;
}

body:not(.market-page) :is(
  .hero-cta,
  .business-button-primary,
  .pd-button-primary,
  .experience-button-primary,
  .button--primary
) {
  color: var(--site-text-inverse);
  border-color: var(--site-brand);
  background: var(--site-brand);
  box-shadow: 0 10px 22px rgba(255, 104, 104, .2);
}

/* Homepage-style lift for primary actions in product banners. The class only
   adds motion and shadow, so each page keeps its own primary colour/gradient. */
body:not(.market-page) .site-primary-cta-hover {
  transition-property: transform, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

/* About careers uses the same primary-action contrast without changing its
   page-specific layout or mail action. */
body.about-experience-page .careers-copy > a,
body.about-experience-page .careers-copy > a:visited,
body.about-experience-page .careers-copy > a i {
  color: var(--site-text-inverse);
}

body.about-experience-page .careers-copy > a:hover {
  color: var(--site-text-inverse);
  background: var(--site-brand-hover);
}

body.about-experience-page .careers-copy > a:focus-visible {
  color: var(--site-text-inverse);
  outline: 2px solid rgba(255, 104, 104, .34);
  outline-offset: 3px;
}

body:not(.market-page) :is(
  .business-button-secondary,
  .pd-button-secondary,
  .experience-button-secondary,
  .button--secondary
) {
  color: var(--site-text-primary);
  border-color: var(--site-outline-strong);
  background: rgba(255, 255, 255, .82);
  box-shadow: none;
}

body:not(.market-page) :is(
  .hero-cta,
  .business-button-primary,
  .pd-button-primary,
  .experience-button-primary,
  .button--primary
):hover {
  background: var(--site-brand-hover);
  border-color: var(--site-brand-hover);
  box-shadow: 0 14px 28px rgba(244, 95, 98, .24);
}

body:not(.market-page) .site-primary-cta-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 22px rgba(255, 104, 104, .32);
}

/* Every page keeps its own Xiaofang motion controller; only the two official
   service destinations are shared by the popup footer. */
.xiaofang-chat .xiaofang-chat-choices .xiaofang-service-link {
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #596377;
  background: transparent;
  box-shadow: none;
  font: 500 13px/1 "PingFang SC", "Microsoft YaHei", sans-serif;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}

.xiaofang-chat .xiaofang-chat-choices .xiaofang-service-link:hover {
  border-bottom-color: rgba(255, 104, 104, .65);
  color: #ef5c61;
}

.xiaofang-chat .xiaofang-chat-choices .xiaofang-service-link:focus-visible {
  outline: 2px solid rgba(255, 104, 104, .45);
  outline-offset: 2px;
}

/* Structural shapes: content containers use one compact radius. */
:where(
  input:not([type="hidden"]),
  select,
  textarea,
  .highlight-card,
  .bms-hero-card,
  .cloud-hero-card,
  .dcim-hero-card,
  .service-hero-card,
  .about-hero-card,
  .feedback-card,
  .document-card,
  .company-value-grid article,
  .partner-outcome-grid article,
  .service-verify,
  .service-announcement,
  .bms-rights-board,
  .pd-rights-board,
  .bms-plan-card,
  .bms-comparison-wrap,
  .cloud-growth-card,
  .business-growth-stage,
  .dcim-operation-row,
  .dcim-operation-visual,
  .careers-board,
  .journey-card,
  .partner-brand-row,
  .partner-cta,
  .pd-story-console,
  .bms-capability-preview,
  .service-path-card
) {
  border-radius: var(--site-radius-structural);
}

:where(
  .highlight-card,
  .bms-hero-card,
  .cloud-hero-card,
  .dcim-hero-card,
  .service-hero-card,
  .about-hero-card,
  .feedback-card,
  .document-card,
  .company-value-grid article,
  .partner-outcome-grid article,
  .service-verify,
  .service-announcement,
  .bms-plan-card,
  .cloud-growth-card,
  .business-growth-stage,
  .dcim-operation-row,
  .careers-board,
  .journey-card
) {
  border-color: var(--site-outline);
}

/*
 * Visual section rhythm.
 * White-to-white sections use one 112px title rhythm. When a new tinted block
 * begins, the previous section reserves 64px before the colour boundary and
 * the tinted block places its title 88px inside that boundary. The perceived
 * gap is therefore measured from the surface edge, not only from the title.
 */
body:not(.market-page) :is(
  .product-advantages,
  .bms-pricing,
  .bms-strengths,
  .bms-highlights,
  .business-story-growth,
  .pd-rights-section,
  .pd-feature-section,
  .dcim-operations-showcase,
  .dcim-capabilities,
  .company-story,
  .company-values
) {
  padding-top: var(--site-section-space);
}

/* White content ending before a visibly tinted surface. */
body:not(.market-page) :is(.product-advantages, .company-values) {
  padding-bottom: var(--site-section-boundary-space);
}

/* Tinted surface starts are judged from the colour edge to their heading. */
.platform-chain,
.about-depth-scene,
.service-depth-scene {
  --site-current-surface-inset: var(--site-section-inset);
}

body.service-page .service-depth-scene {
  background-color: #fff;
}

body:not(.market-page) .platform-chain {
  padding-top: var(--site-current-surface-inset);
}

/* Tinted-to-white handoff keeps breathing room on both sides of the edge. */
body:not(.market-page) .platform-chain {
  padding-bottom: var(--site-section-boundary-space);
}

body:not(.market-page) :is(.customer-feedback, .careers-section) {
  padding-top: var(--site-section-inset);
}

body:not(.market-page) .section-title-v10 + :is(
  .company-value-grid,
  .partner-outcome-grid,
  .service-tools-grid,
  .business-growth-experience,
  .bms-capability-showcase,
  .cloud-feature-stage,
  .feedback-viewport,
  .about-layout
) {
  margin-top: var(--site-heading-content-gap);
}

/* About page: the partner block shares the grey surface with the timeline. */
body.about-experience-page .partner-ecosystem {
  padding-top: var(--site-section-inset);
  padding-bottom: var(--site-section-boundary-space);
}

/* Service paths own a long scroll composition; only its visible heading inset is standardised. */
body.service-page .service-paths-heading {
  padding-top: var(--site-section-space);
}

/* Support centre follows the same tokens without disturbing its document layout. */
.support-page .document-card {
  border-color: var(--site-outline);
  border-radius: var(--site-radius-structural);
  box-shadow: var(--site-shadow-card);
}

.support-page .document-card:hover {
  box-shadow: var(--site-shadow-card-hover);
}

.support-page .support-cta {
  background: var(--site-brand);
}

body.support-page .header-actions .login-button {
  width: var(--site-header-register-width);
  height: var(--site-header-action-height);
  border-radius: var(--site-radius-structural);
  background: var(--site-brand);
  font-family: var(--site-font-family);
  font-size: var(--site-header-action-font-size);
  font-weight: var(--site-weight-semibold);
}

/* Documentation pages keep dense type but use the same semantic colours. */
body:not(.market-page) .docs-layout,
body:not(.market-page) .article-shell,
body:not(.market-page) .article-content {
  color: var(--site-text-primary);
}

body:not(.market-page) .article-content :is(h1, h2, h3, h4) {
  color: var(--site-text-strong);
}

body:not(.market-page) .article-content :is(p, li, td, dd) {
  line-height: 1.75;
}

@media (max-width: 1050px) {
  :root {
    --site-section-space: 96px;
    --site-section-boundary-space: 52px;
    --site-section-inset: 76px;
    --site-heading-content-gap: 48px;
    --site-layout-gap: 48px;
  }
}

@media (max-width: 760px) {
  :root {
    --site-font-hero: 34px;
    --site-font-section: 28px;
    --site-font-subsection: 21px;
    --site-font-card-title: 17px;
    --site-font-body-lg: 15px;
    --site-section-space: 76px;
    --site-section-boundary-space: 40px;
    --site-section-inset: 60px;
    --site-heading-content-gap: 40px;
    --site-card-padding: 24px;
    --site-control-height: 48px;
  }

  body:not(.market-page) :is(
    .hero-cta,
    .about-cta,
    .business-button,
    .pd-button,
    .experience-button,
    .button,
    .global-cta-button,
    .support-cta__button
  ) {
    min-width: 136px;
    height: var(--site-control-height) !important;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(a, button, input, select, textarea) {
    scroll-behavior: auto;
  }
}

/* Shared three-card hero interaction for product/about pages. Homepage and
   service center retain their existing page-specific tilt implementations. */
body.business-page .bms-hero-card[data-shared-hero-tilt="true"],
body.cloud-page .cloud-hero-card[data-shared-hero-tilt="true"],
body.dcim-page .dcim-hero-card[data-shared-hero-tilt="true"],
body.about-experience-page .about-hero-card[data-shared-hero-tilt="true"] {
  --shared-tilt-x: 0deg;
  --shared-tilt-y: 0deg;
  --shared-tilt-lift: 0px;
  --shared-tilt-scale: 1;
  transform: perspective(900px)
    translate3d(0, var(--shared-tilt-lift), 0)
    rotateX(var(--shared-tilt-x))
    rotateY(var(--shared-tilt-y))
    scale(var(--shared-tilt-scale));
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform;
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1), box-shadow 220ms ease;
}

body.business-page .bms-hero-card[data-shared-hero-tilt="true"].is-shared-tilting,
body.cloud-page .cloud-hero-card[data-shared-hero-tilt="true"].is-shared-tilting,
body.dcim-page .dcim-hero-card[data-shared-hero-tilt="true"].is-shared-tilting,
body.about-experience-page .about-hero-card[data-shared-hero-tilt="true"].is-shared-tilting {
  box-shadow: var(--site-shadow-card-hover);
  transition: transform 70ms linear, box-shadow 220ms ease;
}

:where(
  .business-page .bms-hero-card-icon,
  .cloud-page .cloud-hero-card-icon,
  .dcim-page .dcim-hero-card-icon,
  .about-experience-page .about-hero-card-icon
) {
  transform: translateZ(18px);
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  body.business-page .bms-hero-card[data-shared-hero-tilt="true"],
  body.cloud-page .cloud-hero-card[data-shared-hero-tilt="true"],
  body.dcim-page .dcim-hero-card[data-shared-hero-tilt="true"],
  body.about-experience-page .about-hero-card[data-shared-hero-tilt="true"] {
    transform: none;
    will-change: auto;
  }
}