/* Depth: lighter, brighter brand tones; layered shadows; cards that tilt in 3D toward the pointer with a soft light; slow colour glows behind light
   sections; every colour fill pours like liquid (slow, feathered) instead of switching. Loaded last on every page. Touch screens and reduced motion get
   the colours and shadows only. */
:root {
  --accent: #14C6C2; --teal-mid: #0E9E9B; --azure: #2D74DB; --navy-mid: #17304A; --teal-deep: #0D6E72;
  --surface-2: #F2F9FD; --surface-3: #EAFAF9; --wash-teal: #E0F7F5; --wash-sky: #E6F1FD; --line: #E2EAF3;
  --dp-shadow: 0 1px 1px rgba(16, 40, 70, .04), 0 10px 24px -14px rgba(16, 60, 100, .22), 0 34px 64px -42px rgba(30, 90, 160, .30);
  --dp-shadow-up: 0 2px 2px rgba(16, 40, 70, .05), 0 22px 40px -18px rgba(16, 60, 110, .30), 0 60px 90px -50px rgba(30, 100, 190, .38);
  --dp-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Liquid pour: slower, with a wide feathered front, on every poured tile */
.hx [data-pour]::after {
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), #000 calc(var(--fill) - 48%), transparent var(--fill)) !important;
          mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), #000 calc(var(--fill) - 48%), transparent var(--fill)) !important;
  transition: --fill 1250ms cubic-bezier(.45, .05, .25, 1) !important;
}
.hx [data-pour]:hover::after, .hx [data-pour].is-pour::after { --fill: 175%; }

/* Plan staircase: the chosen step fills by pouring, never by a sudden swap */
.hx-stair { isolation: isolate; overflow: hidden; transition: transform .6s var(--dp-ease), box-shadow .6s var(--dp-ease), color .7s .15s, border-color .5s; }
.hx-stair::after { content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none; background: var(--grad);
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 100%), #000 calc(var(--fill) - 48%), transparent var(--fill));
          mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 100%), #000 calc(var(--fill) - 48%), transparent var(--fill));
  --fill: 0%; transition: --fill 1250ms cubic-bezier(.45, .05, .25, 1); }
.hx-stair[aria-pressed="true"] { background: #fff !important; }
.hx-stair[aria-pressed="true"]::after { --fill: 175%; }
.hx-stair small, .hx-stair b { transition: color .7s .15s; }

/* Capabilities: every tile the same size; the description keeps to three lines until Details is opened */
.hx-caps { align-items: stretch !important; }
.hx-cap { display: flex; flex-direction: column; }
.hx-cap > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.6em); }
.hx-cap .hx-cap__t { margin-top: auto; align-self: flex-start; }

/* Layered shadows: depth without heaviness */
.hx-cap, .hx-sector, .hx-tier, .hx-card, .hx-stat, .hx-plan, .hx-stair, .hx-bpc, .hx-need, .hx-tile:not(.hx-tile--dark) { box-shadow: var(--dp-shadow); }

/* 3D tilt toward the pointer (depth.js sets --rx/--ry and the light position) */
.dp-tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)) !important;
  transition: transform .55s var(--dp-ease), box-shadow .55s var(--dp-ease) !important; transform-style: preserve-3d; }
.dp-tilt.dp-on { --ty: -6px; box-shadow: var(--dp-shadow-up) !important; transition: transform .18s ease-out, box-shadow .4s var(--dp-ease) !important; }
.dp-shine { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%); mix-blend-mode: soft-light; }
.dp-on > .dp-shine { opacity: 1; }

/* Slow colour glows behind light sections */
.dp-orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.dp-orbs i { position: absolute; width: 46vw; max-width: 640px; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: .55; animation: dp-drift 26s ease-in-out infinite alternate; }
.dp-orbs i:nth-child(1) { left: -12%; top: -18%; background: radial-gradient(closest-side, rgba(20, 198, 194, .30), transparent); }
.dp-orbs i:nth-child(2) { right: -14%; bottom: -24%; background: radial-gradient(closest-side, rgba(45, 116, 219, .24), transparent); animation-duration: 32s; animation-delay: -8s; }
.dp-host { position: relative; }
.dp-host > :not(.dp-orbs) { position: relative; z-index: 1; }
@keyframes dp-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6vw, 4vh, 0) scale(1.08); } 100% { transform: translate3d(-3vw, 7vh, 0) scale(.96); } }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .dp-tilt, .dp-tilt.dp-on { transform: none !important; } .dp-shine, .dp-orbs i { display: none; }
  .hx [data-pour]::after, .hx-stair::after { transition: none !important; }
}

/* ── Heroes in 3D ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Brighter, still professional: deep teal to azure instead of near-black navy */
.hx-hero, .hx-ph { background: linear-gradient(128deg, #0C4F63 0%, #10708A 38%, #1E6FB8 72%, #3A62C9 100%) !important; position: relative; overflow: hidden; isolation: isolate; }
.dp-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dp-aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; animation: dp-aur 22s ease-in-out infinite alternate; }
.dp-aurora i:nth-child(1) { width: 55vw; height: 55vw; left: -15vw; top: -25vw; background: radial-gradient(closest-side, rgba(52, 230, 220, .55), transparent); }
.dp-aurora i:nth-child(2) { width: 50vw; height: 50vw; right: -10vw; top: -10vw; background: radial-gradient(closest-side, rgba(120, 160, 255, .5), transparent); animation-duration: 28s; animation-delay: -6s; }
.dp-aurora i:nth-child(3) { width: 40vw; height: 40vw; left: 30vw; bottom: -30vw; background: radial-gradient(closest-side, rgba(150, 255, 230, .35), transparent); animation-duration: 34s; animation-delay: -12s; }
.dp-aurora b { position: absolute; left: -20%; right: -20%; bottom: -2px; height: 46%; transform: perspective(600px) rotateX(62deg); transform-origin: bottom;
  background-image: linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%); mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  animation: dp-grid 12s linear infinite; }
@keyframes dp-aur { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(5vw, 6vh, 0) scale(1.15); } }
@keyframes dp-grid { to { background-position: 0 64px, 0 0; } }
.hx-hero > .hx-wrap, .hx-ph > .hx-wrap { position: relative; z-index: 1; }

/* The art in a 3D stage that turns toward the pointer */
.dp-stage { perspective: 1400px; position: relative; }
.dp-stage > .dp-rig { position: relative; transform-style: preserve-3d; transition: transform .9s var(--dp-ease);
  transform: rotateX(var(--hx, 6deg)) rotateY(var(--hy, -10deg)); }
.dp-float { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; color: #0F2A3D;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px -16px rgba(5, 30, 60, .55), inset 0 1px 0 #fff;
  transform: translateZ(var(--z, 80px)); animation: dp-bob 6s ease-in-out infinite; white-space: nowrap; }
.dp-float b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; font-size: 13px; background: linear-gradient(145deg, #14C6C2, #2D74DB); }
.dp-float small { display: block; font-weight: 500; color: #4A6075; font-size: 11.5px; }
@keyframes dp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Home: the diagram stands in 3D with a glow beneath */
.hx-hero__art.dp-stage svg { filter: drop-shadow(0 30px 40px rgba(0, 20, 50, .35)); }
.hx-hero__art .dp-rig::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -8%; height: 24%; border-radius: 50%; transform: translateZ(-60px) rotateX(80deg);
  background: radial-gradient(closest-side, rgba(52, 230, 220, .45), transparent); filter: blur(10px); }

/* Page heroes (Company and others): the screenshot angled, with two more real screens stacked behind */
.hx-ph__art2.dp-stage .hx-sf { transform: translateZ(40px); box-shadow: 0 50px 90px -30px rgba(3, 20, 45, .65), 0 0 0 1px rgba(255, 255, 255, .25); }
.dp-back { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 40px 70px -30px rgba(3, 20, 45, .55); opacity: .92; }
.dp-back img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.dp-back--1 { transform: translate3d(-8%, -4%, -90px); }
.dp-back--2 { transform: translate3d(8%, 6%, -170px); opacity: .8; }

@media (max-width: 900px) { .dp-float, .dp-back { display: none; } .dp-stage > .dp-rig { transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .dp-aurora i, .dp-aurora b, .dp-float { animation: none; } .dp-stage > .dp-rig { transition: none; } }