/* ===== ENTERPRISE PAGES (commercial "we advise & build FOR you at scale") =====
   Shared stylesheet for all /enterprise/* pages, loaded alongside learn.css so
   Enterprise pages reuse the same design DNA (glass cards, common header, FAQ
   accordion, tilt-card grid, leads-list, hero-with-visual layout) without
   duplicating any of it. This file holds what's genuinely new to Enterprise:
   the shared scene/glow backdrop, the shared process-step component (ported
   from Growth's .dc-growth-process, same reasoning — Enterprise pages don't
   load growth.css), and each page's unique hero visual family. Cyan accents
   always use var(--accent-color) — never var(--primary-light), which resolves
   to dark navy (#132b45) and is the exact bug fixed in build.css. */

.dc-ent-scene {
    display: flex;
    justify-content: center;
    width: 100%;
}

.dc-ent-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 340px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 229, 255, 0.16), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}

/* ===== ENTERPRISE PROCESS (shared across Enterprise pages) — .dc-ent-process =====
   Equal-weight horizontal step sequence for "How We Work"-style sections —
   ported from Growth's .dc-growth-process (same reasoning: kept as its own
   Enterprise-scoped class rather than loading growth.css on Enterprise pages).
   Each page varies its own step names/details — this only supplies the shape. */
.dc-ent-process-inner {
    max-width: 980px;
}

.dc-ent-process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 44px;
}

.dc-ent-process::before {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(12.5% + 4px);
    right: calc(12.5% + 4px);
    height: 2px;
    background: repeating-linear-gradient(to right, rgba(11, 28, 45, 0.16) 0 8px, transparent 8px 16px);
    z-index: 0;
}

.dc-ent-process-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.dc-ent-process-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 16px;
    box-shadow: 0 10px 24px -8px rgba(0, 229, 255, 0.45);
}

.dc-ent-process-name {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1.05rem;
    margin: 0 0 6px 0;
}

.dc-ent-process-detail {
    color: var(--primary-color);
    opacity: 0.72;
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .dc-ent-process {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 34px;
    }
    .dc-ent-process::before {
        display: none;
    }
}

@media (max-width: 560px) {
    .dc-ent-process {
        grid-template-columns: 1fr;
    }
}

/* ===== STARTUP TECHNOLOGY CONSULTING HERO VISUAL — .dc-ent-consult-* =====
   A "your startup" node on the left with four option paths fanning out to
   the right, each ending in a tech-direction node (code / cloud / mobile /
   server). All four paths draw in and light dimly at once — every option
   genuinely considered — then a pulsing evaluation ring at the startup node
   runs its course and resolves: one path (cloud) brightens to full cyan with
   a checkmark and a "Recommended" label, while the other three settle into a
   permanently dimmed, desaturated state. The payoff is a single confidently-
   chosen direction, not a ring of equally-weighted channels (Digital
   Marketing's .dc-growth-dm-*) and not a single line climbing to a goal
   (Growth Strategy's .dc-growth-strategy-*) — this is choosing among options,
   not converging or ascending. Self-contained — .dc-ent-consult-* only
   appears here. */
.dc-ent-consult-stage-wrap {
    width: 100%;
    max-width: 420px;
    height: 300px;
    display: flex;
    justify-content: center;
}

.dc-ent-consult-stage {
    position: relative;
    width: 420px;
    height: 300px;
    flex-shrink: 0;
    transform-origin: top center;
}

/* --- Evaluation pulse at the startup node (runs 3x, then settles) --- */
.dc-ent-consult-scan-pulse {
    position: absolute;
    top: 150px;
    left: 72px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1.5px solid var(--accent-color);
    opacity: 0;
    animation: dc-ent-consult-pulse 0.9s ease-out 3;
    animation-delay: 0.2s;
    z-index: 2;
}

@keyframes dc-ent-consult-pulse {
    0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}

/* --- Startup node --- */
.dc-ent-consult-startup-node {
    position: absolute;
    top: 150px;
    left: 72px;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-accent);
    box-shadow: 0 10px 26px -8px rgba(0, 229, 255, 0.55);
    z-index: 3;
}

.dc-ent-consult-startup-node i {
    font-size: 22px;
    color: #ffffff;
}

.dc-ent-consult-startup-label {
    position: absolute;
    top: 196px;
    left: 72px;
    transform: translate(-50%, 0);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
    opacity: 0.75;
    white-space: nowrap;
    z-index: 3;
}

/* --- Paths: fan out to the right from the startup node --- */
.dc-ent-consult-path {
    position: absolute;
    top: 150px;
    left: 72px;
    width: 226px;
    height: 0;
    transform-origin: left center;
    z-index: 1;
}

.dc-ent-consult-path-1 { transform: rotate(-28deg); }
.dc-ent-consult-path-2 { transform: rotate(-9deg); }
.dc-ent-consult-path-3 { transform: rotate(9deg); }
.dc-ent-consult-path-4 { transform: rotate(28deg); }

.dc-ent-consult-path-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(to right, rgba(0, 229, 255, 0.35), transparent);
    transform-origin: left center;
    transform: scaleX(0);
    animation: dc-ent-consult-line-in 0.5s ease forwards;
}

@keyframes dc-ent-consult-line-in { to { transform: scaleX(1); } }

/* Resolution: the winning path brightens permanently; the other three dim
   permanently. Each path's full animation list (draw-in + resolve) is
   written explicitly here — the delay list is a single source of truth
   per path, rather than layering a broad :not() rule on top of it. */
.dc-ent-consult-path-1 .dc-ent-consult-path-line {
    animation: dc-ent-consult-line-in 0.5s ease forwards,
               dc-ent-consult-line-dim 0.6s ease forwards;
    animation-delay: 0.45s, 1.7s;
}

.dc-ent-consult-path-3 .dc-ent-consult-path-line {
    animation: dc-ent-consult-line-in 0.5s ease forwards,
               dc-ent-consult-line-dim 0.6s ease forwards;
    animation-delay: 0.75s, 1.7s;
}

.dc-ent-consult-path-4 .dc-ent-consult-path-line {
    animation: dc-ent-consult-line-in 0.5s ease forwards,
               dc-ent-consult-line-dim 0.6s ease forwards;
    animation-delay: 0.9s, 1.7s;
}

@keyframes dc-ent-consult-line-dim { to { opacity: 0.4; } }

.dc-ent-consult-path-2.is-winner .dc-ent-consult-path-line {
    animation: dc-ent-consult-line-in 0.5s ease forwards,
               dc-ent-consult-line-win 0.5s ease forwards;
    animation-delay: 0.6s, 1.7s;
}

@keyframes dc-ent-consult-line-win {
    to {
        background: linear-gradient(to right, var(--accent-color), rgba(0, 229, 255, 0.55));
        height: 2.5px;
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    }
}

/* --- Option nodes at the end of each path --- */
.dc-ent-consult-option {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    animation: dc-ent-consult-option-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-ent-consult-option i {
    font-size: 16px;
    color: var(--accent-color);
}

.dc-ent-consult-option-1 { top: 44px;  left: 272px; animation-delay: 0.55s; }
.dc-ent-consult-option-2 { top: 115px; left: 295px; animation-delay: 0.7s; }
.dc-ent-consult-option-3 { top: 185px; left: 295px; animation-delay: 0.85s; }
.dc-ent-consult-option-4 { top: 256px; left: 272px; animation-delay: 1s; }

@keyframes dc-ent-consult-option-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-consult-option.is-winner {
    animation: dc-ent-consult-option-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-ent-consult-option-win 0.4s ease forwards;
    animation-delay: 0.7s, 1.75s;
}

@keyframes dc-ent-consult-option-win {
    to {
        background: rgba(0, 229, 255, 0.14);
        border-color: var(--accent-color);
        box-shadow: 0 0 18px rgba(0, 229, 255, 0.5);
        transform: translate(-50%, -50%) scale(1.12);
    }
}

.dc-ent-consult-option-1,
.dc-ent-consult-option-3,
.dc-ent-consult-option-4 {
    animation-name: dc-ent-consult-option-in, dc-ent-consult-option-dim;
    animation-duration: 0.45s, 0.5s;
    animation-fill-mode: forwards, forwards;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease;
}
.dc-ent-consult-option-1 { animation-delay: 0.55s, 1.75s; }
.dc-ent-consult-option-3 { animation-delay: 0.85s, 1.75s; }
.dc-ent-consult-option-4 { animation-delay: 1s, 1.75s; }

@keyframes dc-ent-consult-option-dim { to { opacity: 0.45; filter: grayscale(0.7); } }

/* --- Checkmark badge + "Recommended" label, only on the winner --- */
.dc-ent-consult-check {
    position: absolute;
    top: 111px;
    left: 312px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.4);
    animation: dc-ent-consult-check-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.95s;
    z-index: 4;
}

.dc-ent-consult-check i {
    font-size: 12px;
    color: var(--accent-color);
}

@keyframes dc-ent-consult-check-in { to { opacity: 1; transform: scale(1); } }

.dc-ent-consult-recommend-label {
    position: absolute;
    top: 90px;
    left: 295px;
    transform: translate(-50%, 0);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent-color);
    opacity: 0;
    white-space: nowrap;
    animation: dc-ent-consult-label-in 0.4s ease forwards;
    animation-delay: 2.05s;
    z-index: 4;
}

@keyframes dc-ent-consult-label-in { to { opacity: 1; } }

/* --- Reduced motion: show the fully-resolved state, no motion --- */
@media (prefers-reduced-motion: reduce) {
    .dc-ent-consult-scan-pulse { animation: none; opacity: 0; }
    .dc-ent-consult-path-line { animation: none; transform: scaleX(1); }
    .dc-ent-consult-path.is-winner .dc-ent-consult-path-line {
        animation: none;
        background: linear-gradient(to right, var(--accent-color), rgba(0, 229, 255, 0.55));
        height: 2.5px;
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    }
    .dc-ent-consult-path:not(.is-winner) .dc-ent-consult-path-line { animation: none; opacity: 0.4; }
    .dc-ent-consult-option { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-consult-option.is-winner {
        animation: none;
        background: rgba(0, 229, 255, 0.14);
        border-color: var(--accent-color);
        box-shadow: 0 0 18px rgba(0, 229, 255, 0.5);
        transform: translate(-50%, -50%) scale(1.12);
    }
    .dc-ent-consult-option:not(.is-winner) { animation: none; opacity: 0.45; filter: grayscale(0.7); }
    .dc-ent-consult-check { animation: none; opacity: 1; transform: scale(1); }
    .dc-ent-consult-recommend-label { animation: none; opacity: 1; }
}

/* --- Responsive: scale-whole-unit technique (matches Build/Growth) --- */
@media (max-width: 900px) {
    .dc-ent-consult-stage-wrap { max-width: 360px; height: 257px; }
    .dc-ent-consult-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-consult-stage-wrap { max-width: 315px; height: 225px; }
    .dc-ent-consult-stage { transform: scale(0.75); }
}

/* ===== MVP-TO-SCALE HERO VISUAL — .dc-ent-scale-* =====
   A small "MVP" node on the left grows into a larger "scaled system" node on
   the right through a straight row of progressively bigger blocks, each
   connected to the next as it lands — then capacity bars grow beside the
   final node. The mechanism is linear growth-in-place (a single row getting
   bigger), not a fan of options (.dc-ent-consult-*), not a mesh of modules
   (.dc-ent-software-*), and not a radial ring (Growth's .dc-growth-dm-*).
   Self-contained — .dc-ent-scale-* only appears here. */
.dc-ent-scale-stage-wrap {
    width: 100%;
    max-width: 460px;
    height: 260px;
    display: flex;
    justify-content: center;
}

.dc-ent-scale-stage {
    position: relative;
    width: 460px;
    height: 260px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-scale-mvp-node,
.dc-ent-scale-block,
.dc-ent-scale-system-node {
    position: absolute;
    top: 150px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}

.dc-ent-scale-mvp-node { left: 40px; width: 40px; height: 40px; opacity: 0; animation: dc-ent-scale-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.1s; }
.dc-ent-scale-mvp-node i { font-size: 15px; color: var(--accent-color); }

.dc-ent-scale-block-1 { left: 108px; width: 50px; height: 50px; opacity: 0; animation: dc-ent-scale-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.5s; }
.dc-ent-scale-block-2 { left: 185px; width: 64px; height: 64px; opacity: 0; animation: dc-ent-scale-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.9s; }
.dc-ent-scale-block-3 { left: 270px; width: 80px; height: 80px; opacity: 0; animation: dc-ent-scale-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 1.3s; }

@keyframes dc-ent-scale-pop-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-scale-system-node {
    left: 400px;
    width: 104px;
    height: 104px;
    opacity: 0;
    background: rgba(0, 229, 255, 0.1);
    border-color: var(--accent-color);
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.4);
    animation: dc-ent-scale-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-ent-scale-system-pulse 2.4s ease-in-out infinite;
    animation-delay: 1.75s, 2.25s;
}

.dc-ent-scale-system-node i { font-size: 32px; color: var(--accent-color); }

@keyframes dc-ent-scale-system-pulse {
    0%, 100% { box-shadow: 0 0 24px rgba(0, 229, 255, 0.4); }
    50%      { box-shadow: 0 0 34px rgba(0, 229, 255, 0.6); }
}

.dc-ent-scale-mvp-label,
.dc-ent-scale-system-label {
    position: absolute;
    top: 196px;
    transform: translate(-50%, 0);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
    opacity: 0.75;
    white-space: nowrap;
}

.dc-ent-scale-mvp-label { left: 40px; }
.dc-ent-scale-system-label { left: 400px; top: 214px; }

.dc-ent-scale-connector {
    position: absolute;
    top: 150px;
    height: 2px;
    background: linear-gradient(to right, rgba(0, 229, 255, 0.55), rgba(0, 229, 255, 0.15));
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    animation: dc-ent-scale-connector-in 0.35s ease forwards;
}

.dc-ent-scale-connector-1 { left: 60px;  width: 23px; animation-delay: 0.35s; }
.dc-ent-scale-connector-2 { left: 133px; width: 20px; animation-delay: 0.75s; }
.dc-ent-scale-connector-3 { left: 217px; width: 13px; animation-delay: 1.15s; }
.dc-ent-scale-connector-4 { left: 310px; width: 38px; animation-delay: 1.55s; }

@keyframes dc-ent-scale-connector-in { to { transform: translateY(-50%) scaleX(1); } }

.dc-ent-scale-bars {
    position: absolute;
    top: 205px;
    left: 400px;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.dc-ent-scale-bar {
    width: 7px;
    background: var(--accent-color);
    border-radius: 2px 2px 0 0;
    transform: scaleY(0);
    transform-origin: bottom;
    animation: dc-ent-scale-bar-grow 0.35s ease forwards;
}

.dc-ent-scale-bar:nth-child(1) { height: 8px;  animation-delay: 2s; }
.dc-ent-scale-bar:nth-child(2) { height: 14px; animation-delay: 2.15s; }
.dc-ent-scale-bar:nth-child(3) { height: 20px; animation-delay: 2.3s; }

@keyframes dc-ent-scale-bar-grow { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-ent-scale-mvp-node,
    .dc-ent-scale-block,
    .dc-ent-scale-system-node { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-scale-system-node { box-shadow: 0 0 24px rgba(0, 229, 255, 0.4); }
    .dc-ent-scale-connector { animation: none; transform: translateY(-50%) scaleX(1); }
    .dc-ent-scale-bar { animation: none; transform: scaleY(1); }
}

@media (max-width: 900px) {
    .dc-ent-scale-stage-wrap { max-width: 394px; height: 223px; }
    .dc-ent-scale-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-scale-stage-wrap { max-width: 345px; height: 195px; }
    .dc-ent-scale-stage { transform: scale(0.75); }
}

/* ===== ENTERPRISE SOFTWARE HERO VISUAL — .dc-ent-software-* =====
   Four module panels at the corners of a square (app / admin / database /
   integrations) pop in, then all six edges of the square (four sides plus
   both diagonals) draw between them as a connected mesh — the payoff is a
   "Robust" badge confirming the whole system is integrated, not a single
   converging destination point. This is a network-topology visual, distinct
   from Growth's inbound-convergence rings, from Build's uniform block-grid
   (Custom Software) and dashboard mockup (SaaS), and from this file's own
   fan (.dc-ent-consult-*) and linear growth row (.dc-ent-scale-*).
   Self-contained — .dc-ent-software-* only appears here. */
.dc-ent-software-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 300px;
    display: flex;
    justify-content: center;
}

.dc-ent-software-stage {
    position: relative;
    width: 380px;
    height: 300px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-software-module {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    animation: dc-ent-software-module-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-ent-software-module i { font-size: 20px; color: var(--accent-color); }

.dc-ent-software-module-app   { top: 80px;  left: 100px; animation-delay: 0.4s; }
.dc-ent-software-module-admin { top: 80px;  left: 280px; animation-delay: 0.55s; }
.dc-ent-software-module-db    { top: 220px; left: 100px; animation-delay: 0.7s; }
.dc-ent-software-module-integ { top: 220px; left: 280px; animation-delay: 0.85s; }

@keyframes dc-ent-software-module-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-software-line-wrap {
    position: absolute;
    height: 0;
    transform-origin: left center;
    z-index: 1;
}

.dc-ent-software-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(to right, rgba(0, 229, 255, 0.4), rgba(0, 229, 255, 0.15));
    transform-origin: left center;
    transform: scaleX(0);
    animation: dc-ent-software-line-in 0.4s ease forwards;
}

.dc-ent-software-line-top    { top: 80px;  left: 100px; width: 180px; transform: rotate(0deg);   }
.dc-ent-software-line-bottom { top: 220px; left: 100px; width: 180px; transform: rotate(0deg);   }
.dc-ent-software-line-left   { top: 80px;  left: 100px; width: 140px; transform: rotate(90deg);  }
.dc-ent-software-line-right  { top: 80px;  left: 280px; width: 140px; transform: rotate(90deg);  }
.dc-ent-software-line-diag-1 { top: 80px;  left: 100px; width: 228px; transform: rotate(38deg);  }
.dc-ent-software-line-diag-2 { top: 80px;  left: 280px; width: 228px; transform: rotate(142deg); }

.dc-ent-software-line-top    .dc-ent-software-line { animation-delay: 1s; }
.dc-ent-software-line-bottom .dc-ent-software-line { animation-delay: 1.1s; }
.dc-ent-software-line-left   .dc-ent-software-line { animation-delay: 1.2s; }
.dc-ent-software-line-right  .dc-ent-software-line { animation-delay: 1.3s; }
.dc-ent-software-line-diag-1 .dc-ent-software-line { animation-delay: 1.4s; }
.dc-ent-software-line-diag-2 .dc-ent-software-line { animation-delay: 1.5s; }

@keyframes dc-ent-software-line-in { to { transform: scaleX(1); } }

.dc-ent-software-badge {
    position: absolute;
    top: 32px;
    left: 190px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-software-badge-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.9s;
    z-index: 3;
}

.dc-ent-software-badge i { font-size: 12px; color: var(--accent-color); }

.dc-ent-software-badge span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
}

@keyframes dc-ent-software-badge-in { to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-ent-software-module { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-software-line { animation: none; transform: scaleX(1); }
    .dc-ent-software-badge { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-ent-software-stage-wrap { max-width: 326px; height: 257px; }
    .dc-ent-software-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-software-stage-wrap { max-width: 285px; height: 225px; }
    .dc-ent-software-stage { transform: scale(0.75); }
}

/* ===== SYSTEM ARCHITECTURE HERO VISUAL — .dc-ent-arch-* =====
   Three full-width tier bands (Frontend / API / Database) stack in from top
   to bottom, each connected to the next by a short vertical line as it
   lands, and once all three tiers are in place, four corner brackets fade in
   to frame the stage like a technical blueprint. Tiered/stacked, not
   scattered table-cards (Build's Database ER-diagram) and not a radial hub
   (Build's API hub) — a vertical layer diagram, distinct from every other
   visual in Build, Growth and this file. Self-contained — .dc-ent-arch-*
   only appears here. */
.dc-ent-arch-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 300px;
    display: flex;
    justify-content: center;
}

.dc-ent-arch-stage {
    position: relative;
    width: 380px;
    height: 300px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-arch-tier {
    position: absolute;
    left: 190px;
    width: 220px;
    height: 48px;
    transform: translate(-50%, -50%) scaleX(0.6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: dc-ent-arch-tier-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dc-ent-arch-tier i { font-size: 17px; color: var(--accent-color); flex-shrink: 0; }

.dc-ent-arch-tier span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
    opacity: 0.85;
}

.dc-ent-arch-tier-1 { top: 50px;  animation-delay: 0.4s; }
.dc-ent-arch-tier-2 { top: 150px; animation-delay: 0.85s; }
.dc-ent-arch-tier-3 { top: 250px; animation-delay: 1.3s; }

@keyframes dc-ent-arch-tier-in { to { opacity: 1; transform: translate(-50%, -50%) scaleX(1); } }

.dc-ent-arch-connector {
    position: absolute;
    left: 190px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(0, 229, 255, 0.55), rgba(0, 229, 255, 0.15));
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    animation: dc-ent-arch-connector-in 0.3s ease forwards;
}

.dc-ent-arch-connector-a { top: 74px;  height: 52px; animation-delay: 0.65s; }
.dc-ent-arch-connector-b { top: 174px; height: 52px; animation-delay: 1.1s; }

@keyframes dc-ent-arch-connector-in { to { transform: translateX(-50%) scaleY(1); } }

.dc-ent-arch-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: var(--accent-color);
    border-style: solid;
    border-width: 0;
    opacity: 0;
    animation: dc-ent-arch-corner-in 0.35s ease forwards;
}

.dc-ent-arch-corner-tl { top: 14px;  left: 14px;  border-top-width: 2px; border-left-width: 2px;  border-radius: 4px 0 0 0; animation-delay: 1.7s; }
.dc-ent-arch-corner-tr { top: 14px;  right: 14px; border-top-width: 2px; border-right-width: 2px; border-radius: 0 4px 0 0; animation-delay: 1.8s; }
.dc-ent-arch-corner-bl { bottom: 14px; left: 14px;  border-bottom-width: 2px; border-left-width: 2px;  border-radius: 0 0 0 4px; animation-delay: 1.9s; }
.dc-ent-arch-corner-br { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; border-radius: 0 0 4px 0; animation-delay: 2s; }

@keyframes dc-ent-arch-corner-in { to { opacity: 0.8; } }

@media (prefers-reduced-motion: reduce) {
    .dc-ent-arch-tier { animation: none; opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
    .dc-ent-arch-connector { animation: none; transform: translateX(-50%) scaleY(1); }
    .dc-ent-arch-corner { animation: none; opacity: 0.8; }
}

@media (max-width: 900px) {
    .dc-ent-arch-stage-wrap { max-width: 326px; height: 257px; }
    .dc-ent-arch-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-arch-stage-wrap { max-width: 285px; height: 225px; }
    .dc-ent-arch-stage { transform: scale(0.75); }
}

/* ===== CLOUD & INFRASTRUCTURE HERO VISUAL — .dc-ent-cloud-* =====
   A cloud node at top, an app node at the bottom, and a single deploy line
   between them along which small packets travel upward — then two base
   server instances and a third "scaling" instance pop in under the cloud,
   and an "Online" uptime badge settles in last. Cloud + scaling instances +
   deploy flow, not a radial hub (Build's API hub) and not tiered boxes
   (this file's own .dc-ent-arch-*). Self-contained — .dc-ent-cloud-* only
   appears here. */
.dc-ent-cloud-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 300px;
    display: flex;
    justify-content: center;
}

.dc-ent-cloud-stage {
    position: relative;
    width: 380px;
    height: 300px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-cloud-node {
    position: absolute;
    top: 70px;
    left: 190px;
    width: 84px;
    height: 56px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    animation: dc-ent-cloud-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.2s;
    z-index: 3;
}

.dc-ent-cloud-node i { font-size: 26px; color: var(--accent-color); }

@keyframes dc-ent-cloud-pop-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-cloud-server {
    position: absolute;
    top: 170px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    animation: dc-ent-cloud-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-ent-cloud-server i { font-size: 15px; color: var(--accent-color); }

.dc-ent-cloud-server-1 { left: 140px; animation-delay: 0.7s; }
.dc-ent-cloud-server-2 { left: 240px; animation-delay: 0.85s; }
.dc-ent-cloud-server-3 { left: 190px; animation-delay: 1.6s; }

.dc-ent-cloud-app {
    position: absolute;
    top: 255px;
    left: 190px;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    animation: dc-ent-cloud-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.45s;
    z-index: 2;
}

.dc-ent-cloud-app i { font-size: 17px; color: var(--accent-color); }

.dc-ent-cloud-line {
    position: absolute;
    top: 98px;
    left: 190px;
    width: 2px;
    height: 133px;
    background: linear-gradient(to top, rgba(0, 229, 255, 0.5), rgba(0, 229, 255, 0.1));
    transform: translateX(-50%) scaleY(0);
    transform-origin: bottom center;
    animation: dc-ent-cloud-line-in 0.4s ease forwards;
    animation-delay: 0.5s;
    z-index: 1;
}

@keyframes dc-ent-cloud-line-in { to { transform: translateX(-50%) scaleY(1); } }

.dc-ent-cloud-packet {
    position: absolute;
    left: 190px;
    top: 231px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.75);
    transform: translateX(-50%);
    opacity: 0;
    animation: dc-ent-cloud-packet-travel 2.2s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes dc-ent-cloud-packet-travel {
    0%   { opacity: 0; top: 231px; }
    15%  { opacity: 1; }
    85%  { opacity: 1; top: 100px; }
    100% { opacity: 0; top: 98px; }
}

.dc-ent-cloud-uptime {
    position: absolute;
    top: 48px;
    left: 275px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-cloud-uptime-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.9s;
    z-index: 4;
}

.dc-ent-cloud-uptime i { font-size: 11px; color: var(--accent-color); }

.dc-ent-cloud-uptime span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
}

@keyframes dc-ent-cloud-uptime-in { to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-ent-cloud-node,
    .dc-ent-cloud-server,
    .dc-ent-cloud-app { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-cloud-line { animation: none; transform: translateX(-50%) scaleY(1); }
    .dc-ent-cloud-packet { animation: none; opacity: 0; }
    .dc-ent-cloud-uptime { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-ent-cloud-stage-wrap { max-width: 326px; height: 257px; }
    .dc-ent-cloud-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-cloud-stage-wrap { max-width: 285px; height: 225px; }
    .dc-ent-cloud-stage { transform: scale(0.75); }
}

/* ===== SECURITY & COMPLIANCE HERO VISUAL — .dc-ent-security-* =====
   An app node at the center, four checkpoint markers around it in a diamond
   pattern, and a horizontal scan line that sweeps top-to-bottom once — each
   checkpoint lights cyan as the scan passes its height — then a CSS-drawn
   shield silhouette (no shield icon exists in the curated set, so this is a
   clip-path polygon, not an <i>) fades in around the whole scene as a final
   confirming glow. First shield/scan concept on the site — distinct from
   BI/Analytics' independent chart widgets and every other visual.
   Self-contained — .dc-ent-security-* only appears here. */
.dc-ent-security-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 300px;
    display: flex;
    justify-content: center;
}

.dc-ent-security-stage {
    position: relative;
    width: 380px;
    height: 300px;
    flex-shrink: 0;
    transform-origin: top center;
    overflow: hidden;
}

.dc-ent-security-shield {
    position: absolute;
    top: 150px;
    left: 190px;
    width: 260px;
    height: 260px;
    transform: translate(-50%, -50%) scale(0.85);
    clip-path: polygon(50% 0%, 90% 14%, 90% 58%, 50% 100%, 10% 58%, 10% 14%);
    background: radial-gradient(circle at 50% 40%, rgba(0, 229, 255, 0.14), rgba(0, 229, 255, 0.02) 70%);
    border: none;
    opacity: 0;
    animation: dc-ent-security-shield-in 0.6s ease forwards;
    animation-delay: 1.9s;
    z-index: 1;
}

@keyframes dc-ent-security-shield-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-security-app {
    position: absolute;
    top: 150px;
    left: 190px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    transform: translate(-50%, -50%) scale(0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: dc-ent-security-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.2s;
    z-index: 3;
}

.dc-ent-security-app i { font-size: 20px; color: var(--accent-color); }

@keyframes dc-ent-security-pop-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-security-check {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: dc-ent-security-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-ent-security-check i { font-size: 12px; color: rgba(0, 229, 255, 0.35); transition: none; }

.dc-ent-security-check-top    { top: 65px;  left: 190px; animation-delay: 0.4s; }
.dc-ent-security-check-right  { top: 150px; left: 275px; animation-delay: 0.5s; }
.dc-ent-security-check-bottom { top: 235px; left: 190px; animation-delay: 0.6s; }
.dc-ent-security-check-left   { top: 150px; left: 105px; animation-delay: 0.7s; }

.dc-ent-security-scan {
    position: absolute;
    left: 0;
    top: 10px;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, transparent, rgba(0, 229, 255, 0.8), transparent);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    animation: dc-ent-security-scan-sweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.9s;
    z-index: 4;
}

@keyframes dc-ent-security-scan-sweep {
    0%   { top: 10px;  opacity: 1; }
    92%  { top: 285px; opacity: 1; }
    100% { top: 285px; opacity: 0; }
}

.dc-ent-security-check-top    { animation-name: dc-ent-security-pop-in, dc-ent-security-check-light; animation-duration: 0.35s, 0.3s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease; animation-delay: 0.4s, 1.1s; }
.dc-ent-security-check-right  { animation-name: dc-ent-security-pop-in, dc-ent-security-check-light; animation-duration: 0.35s, 0.3s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease; animation-delay: 0.5s, 1.35s; }
.dc-ent-security-check-bottom { animation-name: dc-ent-security-pop-in, dc-ent-security-check-light; animation-duration: 0.35s, 0.3s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease; animation-delay: 0.6s, 1.6s; }
.dc-ent-security-check-left   { animation-name: dc-ent-security-pop-in, dc-ent-security-check-light; animation-duration: 0.35s, 0.3s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease; animation-delay: 0.7s, 1.35s; }

@keyframes dc-ent-security-check-light {
    to {
        border-color: var(--accent-color);
        background: rgba(0, 229, 255, 0.14);
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
    }
}

.dc-ent-security-check i { animation: dc-ent-security-icon-light 0.3s ease forwards; animation-fill-mode: forwards; }
.dc-ent-security-check-top i    { animation-delay: 1.1s; }
.dc-ent-security-check-right i  { animation-delay: 1.35s; }
.dc-ent-security-check-bottom i { animation-delay: 1.6s; }
.dc-ent-security-check-left i   { animation-delay: 1.35s; }

@keyframes dc-ent-security-icon-light { to { color: var(--accent-color); } }

@media (prefers-reduced-motion: reduce) {
    .dc-ent-security-shield { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-security-app { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-security-check {
        animation: none;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        border-color: var(--accent-color);
        background: rgba(0, 229, 255, 0.14);
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
    }
    .dc-ent-security-check i { animation: none; color: var(--accent-color); }
    .dc-ent-security-scan { animation: none; opacity: 0; }
}

@media (max-width: 900px) {
    .dc-ent-security-stage-wrap { max-width: 326px; height: 257px; }
    .dc-ent-security-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-security-stage-wrap { max-width: 285px; height: 225px; }
    .dc-ent-security-stage { transform: scale(0.75); }
}

/* ===== LEGACY SYSTEM MODERNIZATION HERO VISUAL — .dc-ent-legacy-* =====
   Three old/dull component slots sit in a row; a glowing sweep bar travels
   once from left to right, and as it reaches each slot, the old block fades
   out while a modern cyan block fades in in its place — a wave of upgrades,
   not a single module added to an unchanged panel (Build's AI Integration)
   and not a speed-gauge transform of one element (Build's Software
   Optimization). Self-contained — .dc-ent-legacy-* only appears here. */
.dc-ent-legacy-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 260px;
    display: flex;
    justify-content: center;
}

.dc-ent-legacy-stage {
    position: relative;
    width: 380px;
    height: 260px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-legacy-old,
.dc-ent-legacy-modern {
    position: absolute;
    top: 140px;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.dc-ent-legacy-old {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.dc-ent-legacy-old i { font-size: 22px; color: rgba(255, 255, 255, 0.35); }

.dc-ent-legacy-modern {
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.45);
    opacity: 0;
}

.dc-ent-legacy-modern i { font-size: 22px; color: var(--accent-color); }

.dc-ent-legacy-slot-1 { left: 110px; }
.dc-ent-legacy-slot-2 { left: 190px; }
.dc-ent-legacy-slot-3 { left: 270px; }

.dc-ent-legacy-old.dc-ent-legacy-slot-1   { animation: dc-ent-legacy-old-out 0.5s ease forwards; animation-delay: 0.65s; }
.dc-ent-legacy-old.dc-ent-legacy-slot-2   { animation: dc-ent-legacy-old-out 0.5s ease forwards; animation-delay: 1.2s; }
.dc-ent-legacy-old.dc-ent-legacy-slot-3   { animation: dc-ent-legacy-old-out 0.5s ease forwards; animation-delay: 1.75s; }

@keyframes dc-ent-legacy-old-out { to { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } }

.dc-ent-legacy-modern.dc-ent-legacy-slot-1 { animation: dc-ent-legacy-modern-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.8s; }
.dc-ent-legacy-modern.dc-ent-legacy-slot-2 { animation: dc-ent-legacy-modern-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 1.35s; }
.dc-ent-legacy-modern.dc-ent-legacy-slot-3 { animation: dc-ent-legacy-modern-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 1.9s; }

@keyframes dc-ent-legacy-modern-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-legacy-sweep {
    position: absolute;
    top: 90px;
    left: 60px;
    width: 3px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.7);
    opacity: 0;
    animation: dc-ent-legacy-sweep-move 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.3s;
    z-index: 4;
}

@keyframes dc-ent-legacy-sweep-move {
    0%   { left: 60px;  opacity: 1; }
    95%  { left: 320px; opacity: 1; }
    100% { left: 320px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-ent-legacy-old { animation: none; opacity: 0; }
    .dc-ent-legacy-modern { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-legacy-sweep { animation: none; opacity: 0; }
}

@media (max-width: 900px) {
    .dc-ent-legacy-stage-wrap { max-width: 326px; height: 223px; }
    .dc-ent-legacy-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-legacy-stage-wrap { max-width: 285px; height: 195px; }
    .dc-ent-legacy-stage { transform: scale(0.75); }
}

/* ===== AI ADOPTION CONSULTING HERO VISUAL — .dc-ent-aiadopt-* =====
   A business node at the center with four area nodes around it (support,
   ops, content, data). All four connect and pop in, then three of them are
   marked as genuine AI opportunities (a cyan spark badge lands on each),
   while the fourth stays in its plain, unmarked state — a "not yet" left
   honestly unlit rather than force-fit. One-time opportunity mapping, not a
   scan-line sweep (this file's own .dc-ent-security-*) and not a continuous
   guidance loop (this file's own .dc-ent-cto-*). Self-contained —
   .dc-ent-aiadopt-* only appears here. */
.dc-ent-aiadopt-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 300px;
    display: flex;
    justify-content: center;
}

.dc-ent-aiadopt-stage {
    position: relative;
    width: 380px;
    height: 300px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-aiadopt-business {
    position: absolute;
    top: 150px;
    left: 190px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-accent);
    box-shadow: 0 10px 26px -8px rgba(0, 229, 255, 0.55);
    opacity: 0;
    animation: dc-ent-aiadopt-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.15s;
    z-index: 3;
}

.dc-ent-aiadopt-business i { font-size: 24px; color: #ffffff; }

@keyframes dc-ent-aiadopt-pop-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-aiadopt-line {
    position: absolute;
    top: 150px;
    left: 190px;
    width: 88px;
    height: 0;
    transform-origin: left center;
    z-index: 1;
}

.dc-ent-aiadopt-line-support { transform: rotate(-90deg); }
.dc-ent-aiadopt-line-ops     { transform: rotate(0deg); }
.dc-ent-aiadopt-line-content { transform: rotate(90deg); }
.dc-ent-aiadopt-line-data    { transform: rotate(180deg); }

.dc-ent-aiadopt-line-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(to right, rgba(0, 229, 255, 0.4), transparent);
    transform-origin: left center;
    transform: scaleX(0);
    animation: dc-ent-aiadopt-line-in 0.4s ease forwards;
}

.dc-ent-aiadopt-line-support .dc-ent-aiadopt-line-inner { animation-delay: 0.4s; }
.dc-ent-aiadopt-line-ops     .dc-ent-aiadopt-line-inner { animation-delay: 0.5s; }
.dc-ent-aiadopt-line-content .dc-ent-aiadopt-line-inner { animation-delay: 0.6s; }
.dc-ent-aiadopt-line-data    .dc-ent-aiadopt-line-inner { animation-delay: 0.7s; }

@keyframes dc-ent-aiadopt-line-in { to { transform: scaleX(1); } }

.dc-ent-aiadopt-area {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    transform: translate(-50%, -50%) scale(0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: dc-ent-aiadopt-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-ent-aiadopt-area i { font-size: 15px; color: var(--accent-color); }

.dc-ent-aiadopt-area-support { top: 55px;  left: 190px; animation-delay: 0.55s; }
.dc-ent-aiadopt-area-ops     { top: 150px; left: 285px; animation-delay: 0.65s; }
.dc-ent-aiadopt-area-content { top: 245px; left: 190px; animation-delay: 0.75s; }
.dc-ent-aiadopt-area-data    { top: 150px; left: 95px;  animation-delay: 0.85s; }

.dc-ent-aiadopt-area.is-opportunity {
    animation: dc-ent-aiadopt-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-ent-aiadopt-light 0.35s ease forwards;
}

.dc-ent-aiadopt-area-support.is-opportunity { animation-delay: 0.55s, 1.3s; }
.dc-ent-aiadopt-area-ops.is-opportunity     { animation-delay: 0.65s, 1.55s; }
.dc-ent-aiadopt-area-data.is-opportunity    { animation-delay: 0.85s, 1.8s; }

@keyframes dc-ent-aiadopt-light {
    to {
        border-color: var(--accent-color);
        background: rgba(0, 229, 255, 0.14);
        box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
    }
}

.dc-ent-aiadopt-spark {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.4);
    animation: dc-ent-aiadopt-spark-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 4;
}

.dc-ent-aiadopt-spark i { font-size: 9px; color: var(--accent-color); }

.dc-ent-aiadopt-spark-support { top: 38px;  left: 210px; animation-delay: 1.4s; }
.dc-ent-aiadopt-spark-ops     { top: 133px; left: 305px; animation-delay: 1.65s; }
.dc-ent-aiadopt-spark-data    { top: 133px; left: 75px;  animation-delay: 1.9s; }

@keyframes dc-ent-aiadopt-spark-in { to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-ent-aiadopt-business { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-aiadopt-line-inner { animation: none; transform: scaleX(1); }
    .dc-ent-aiadopt-area { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-aiadopt-area.is-opportunity {
        border-color: var(--accent-color);
        background: rgba(0, 229, 255, 0.14);
        box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
    }
    .dc-ent-aiadopt-spark { animation: none; opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) {
    .dc-ent-aiadopt-stage-wrap { max-width: 326px; height: 257px; }
    .dc-ent-aiadopt-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-aiadopt-stage-wrap { max-width: 285px; height: 225px; }
    .dc-ent-aiadopt-stage { transform: scale(0.75); }
}

/* ===== DIGITAL TRANSFORMATION HERO VISUAL — .dc-ent-transform-* =====
   A single dull "Manual" node (representing the whole old way of working)
   fades away, an arrow pulses in the middle, and a small triangle of three
   connected "Connected" nodes builds and lights up on the right — one bulk
   dissolve into one connected network, not a per-component wave (this
   file's own .dc-ent-legacy-*, which crossfades three independent 1:1
   slots). Self-contained — .dc-ent-transform-* only appears here. */
.dc-ent-transform-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 260px;
    display: flex;
    justify-content: center;
}

.dc-ent-transform-stage {
    position: relative;
    width: 380px;
    height: 260px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-transform-manual {
    position: absolute;
    top: 130px;
    left: 80px;
    width: 70px;
    height: 70px;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.14);
    animation: dc-ent-transform-manual-out 0.5s ease forwards;
    animation-delay: 1.3s;
    z-index: 2;
}

.dc-ent-transform-manual i { font-size: 26px; color: rgba(255, 255, 255, 0.35); }

@keyframes dc-ent-transform-manual-out { to { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } }

.dc-ent-transform-label {
    position: absolute;
    top: 176px;
    transform: translate(-50%, 0);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
    opacity: 0.7;
    white-space: nowrap;
}

.dc-ent-transform-label-manual { left: 80px; animation: dc-ent-transform-manual-out 0.5s ease forwards; animation-delay: 1.3s; }
.dc-ent-transform-label-digital { left: 300px; top: 216px; opacity: 0; animation: dc-ent-transform-label-in 0.4s ease forwards; animation-delay: 2.1s; }

@keyframes dc-ent-transform-label-in { to { opacity: 0.7; } }

.dc-ent-transform-arrow {
    position: absolute;
    top: 130px;
    left: 190px;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: dc-ent-transform-arrow-in 0.4s ease forwards;
    animation-delay: 0.9s;
    z-index: 3;
}

.dc-ent-transform-arrow i { font-size: 22px; color: var(--accent-color); }

@keyframes dc-ent-transform-arrow-in { to { opacity: 1; } }

.dc-ent-transform-node {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    transform: translate(-50%, -50%) scale(0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-transform-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-ent-transform-node i { font-size: 17px; color: var(--accent-color); }

.dc-ent-transform-node-top { top: 90px;  left: 300px; animation-delay: 1.55s; }
.dc-ent-transform-node-bl  { top: 170px; left: 262px; animation-delay: 1.7s; }
.dc-ent-transform-node-br  { top: 170px; left: 338px; animation-delay: 1.85s; }

@keyframes dc-ent-transform-node-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-transform-mesh-line {
    position: absolute;
    height: 1.5px;
    background: linear-gradient(to right, rgba(0, 229, 255, 0.55), rgba(0, 229, 255, 0.2));
    transform-origin: left center;
    z-index: 1;
}

.dc-ent-transform-mesh-line-left {
    top: 90px; left: 300px; width: 46px;
    transform: rotate(58deg) scaleX(0);
    animation: dc-ent-transform-mesh-line-left-in 0.35s ease forwards;
    animation-delay: 2s;
}
.dc-ent-transform-mesh-line-right {
    top: 90px; left: 300px; width: 46px;
    transform: rotate(122deg) scaleX(0);
    animation: dc-ent-transform-mesh-line-right-in 0.35s ease forwards;
    animation-delay: 2.1s;
}
.dc-ent-transform-mesh-line-bottom {
    top: 170px; left: 262px; width: 76px;
    transform: rotate(0deg) scaleX(0);
    animation: dc-ent-transform-mesh-line-bottom-in 0.35s ease forwards;
    animation-delay: 2.2s;
}

@keyframes dc-ent-transform-mesh-line-left-in   { to { transform: rotate(58deg) scaleX(1); } }
@keyframes dc-ent-transform-mesh-line-right-in  { to { transform: rotate(122deg) scaleX(1); } }
@keyframes dc-ent-transform-mesh-line-bottom-in { to { transform: rotate(0deg) scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-ent-transform-manual,
    .dc-ent-transform-label-manual { animation: none; opacity: 0; }
    .dc-ent-transform-arrow { animation: none; opacity: 1; }
    .dc-ent-transform-node { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-transform-mesh-line-left   { animation: none; transform: rotate(58deg) scaleX(1); }
    .dc-ent-transform-mesh-line-right  { animation: none; transform: rotate(122deg) scaleX(1); }
    .dc-ent-transform-mesh-line-bottom { animation: none; transform: rotate(0deg) scaleX(1); }
    .dc-ent-transform-label-digital { animation: none; opacity: 0.7; }
}

@media (max-width: 900px) {
    .dc-ent-transform-stage-wrap { max-width: 326px; height: 223px; }
    .dc-ent-transform-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-transform-stage-wrap { max-width: 285px; height: 195px; }
    .dc-ent-transform-stage { transform: scale(0.75); }
}

/* ===== CTO-AS-A-SERVICE HERO VISUAL — .dc-ent-cto-* =====
   A leadership node at the top with three area nodes (team, product, tech)
   fanning downward beneath it. All three connect, align (turn cyan) and
   STAY aligned — then small guidance pulses travel from the leadership node
   down each line on an infinite loop, representing ongoing oversight, not a
   one-time resolution. Distinct from Startup Consulting's rightward fan
   (.dc-ent-consult-*, one path wins and others dim) and from AI Adoption's
   radial one-time opportunity mapping (this file's own .dc-ent-aiadopt-*,
   where only some nodes light and nothing repeats). Self-contained —
   .dc-ent-cto-* only appears here. */
.dc-ent-cto-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 280px;
    display: flex;
    justify-content: center;
}

.dc-ent-cto-stage {
    position: relative;
    width: 380px;
    height: 280px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-cto-lead {
    position: absolute;
    top: 70px;
    left: 190px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-accent);
    box-shadow: 0 10px 24px -8px rgba(0, 229, 255, 0.55);
    opacity: 0;
    animation: dc-ent-cto-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.15s;
    z-index: 3;
}

.dc-ent-cto-lead i { font-size: 22px; color: #ffffff; }

@keyframes dc-ent-cto-pop-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-cto-line {
    position: absolute;
    top: 70px;
    left: 190px;
    width: 155px;
    height: 0;
    transform-origin: left center;
    z-index: 1;
}

.dc-ent-cto-line-team    { transform: rotate(122deg); }
.dc-ent-cto-line-product { transform: rotate(90deg); }
.dc-ent-cto-line-tech    { transform: rotate(58deg); }

.dc-ent-cto-line-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(to right, rgba(0, 229, 255, 0.5), rgba(0, 229, 255, 0.15));
    transform-origin: left center;
    transform: scaleX(0);
    animation: dc-ent-aiadopt-line-in 0.4s ease forwards;
}

.dc-ent-cto-line-team    .dc-ent-cto-line-inner { animation-delay: 0.4s; }
.dc-ent-cto-line-product .dc-ent-cto-line-inner { animation-delay: 0.5s; }
.dc-ent-cto-line-tech    .dc-ent-cto-line-inner { animation-delay: 0.6s; }

.dc-ent-cto-area {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    transform: translate(-50%, -50%) scale(0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    z-index: 2;
}

.dc-ent-cto-area i { font-size: 17px; color: var(--accent-color); }

.dc-ent-cto-area-team    { top: 200px; left: 110px; animation: dc-ent-cto-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, dc-ent-cto-align 0.35s ease forwards; animation-delay: 0.55s, 1.3s; }
.dc-ent-cto-area-product { top: 200px; left: 190px; animation: dc-ent-cto-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, dc-ent-cto-align 0.35s ease forwards; animation-delay: 0.65s, 1.5s; }
.dc-ent-cto-area-tech    { top: 200px; left: 270px; animation: dc-ent-cto-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, dc-ent-cto-align 0.35s ease forwards; animation-delay: 0.75s, 1.7s; }

@keyframes dc-ent-cto-align {
    to {
        border-color: var(--accent-color);
        background: rgba(0, 229, 255, 0.14);
        box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
    }
}

.dc-ent-cto-pulse {
    position: absolute;
    top: 70px;
    left: 190px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.75);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: dc-ent-cto-pulse-travel 2.4s ease-in-out infinite;
}

.dc-ent-cto-pulse-team    { animation-delay: 2s; }
.dc-ent-cto-pulse-product { --tx: 0px; --ty: 130px; animation-delay: 2.3s; }
.dc-ent-cto-pulse-tech    { animation-delay: 2.6s; }

.dc-ent-cto-pulse-team    { --tx: -82px; --ty: 81px; }
.dc-ent-cto-pulse-tech    { --tx: 82px;  --ty: 81px; }

@keyframes dc-ent-cto-pulse-travel {
    0%   { opacity: 0; transform: translate(-50%, -50%) translate(0, 0); }
    15%  { opacity: 1; }
    85%  { opacity: 1; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)); }
    100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-ent-cto-lead { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-cto-line-inner { animation: none; transform: scaleX(1); }
    .dc-ent-cto-area {
        animation: none;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        border-color: var(--accent-color);
        background: rgba(0, 229, 255, 0.14);
        box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
    }
    .dc-ent-cto-pulse { animation: none; opacity: 0; }
}

@media (max-width: 900px) {
    .dc-ent-cto-stage-wrap { max-width: 326px; height: 240px; }
    .dc-ent-cto-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-cto-stage-wrap { max-width: 285px; height: 210px; }
    .dc-ent-cto-stage { transform: scale(0.75); }
}

/* ===== ENTERPRISE INTEGRATION HERO VISUAL — .dc-ent-integration-* =====
   Four separate system boxes (CRM, app, database, tools) sit in a row.
   Connectors draw in one by one between adjacent systems, small data dots
   start looping back and forth along each link, and a "Synced" badge fades
   in below once every system is linked. A horizontal chain of peer systems
   linking to each other, not a hub radiating to spokes (Build's
   .dc-build-api-hub) and not a 2D corner-mesh with a static badge (this
   file's own .dc-ent-software-*). Self-contained — .dc-ent-integration-*
   only appears here. */
.dc-ent-integration-stage-wrap {
    width: 100%;
    max-width: 460px;
    height: 260px;
    display: flex;
    justify-content: center;
}

.dc-ent-integration-stage {
    position: relative;
    width: 460px;
    height: 260px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-integration-node {
    position: absolute;
    top: 140px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    transform: translate(-50%, -50%) scale(0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: dc-ent-integration-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-ent-integration-node i { font-size: 16px; color: var(--accent-color); }

.dc-ent-integration-node-crm   { left: 70px;  animation-delay: 0.2s; }
.dc-ent-integration-node-app   { left: 190px; animation-delay: 0.3s; }
.dc-ent-integration-node-db    { left: 310px; animation-delay: 0.4s; }
.dc-ent-integration-node-tools { left: 430px; animation-delay: 0.5s; }

@keyframes dc-ent-integration-pop-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-integration-connector {
    position: absolute;
    top: 140px;
    height: 2px;
    background: linear-gradient(to right, rgba(0, 229, 255, 0.55), rgba(0, 229, 255, 0.2));
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    animation: dc-ent-integration-line-in 0.4s ease forwards;
}

.dc-ent-integration-connector-1 { left: 92px;  width: 76px; animation-delay: 0.7s; }
.dc-ent-integration-connector-2 { left: 212px; width: 76px; animation-delay: 0.9s; }
.dc-ent-integration-connector-3 { left: 332px; width: 76px; animation-delay: 1.1s; }

@keyframes dc-ent-integration-line-in { to { transform: translateY(-50%) scaleX(1); } }

.dc-ent-integration-dot {
    position: absolute;
    top: 140px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.75);
    transform: translateY(-50%);
    opacity: 0;
    animation: dc-ent-integration-dot-travel 1.8s ease-in-out infinite alternate;
}

.dc-ent-integration-dot-1 { animation-delay: 1.2s; }
.dc-ent-integration-dot-2 { animation-delay: 1.4s; }
.dc-ent-integration-dot-3 { animation-delay: 1.6s; }

@keyframes dc-ent-integration-dot-travel {
    0%   { opacity: 1; left: 96px; }
    100% { opacity: 1; left: 164px; }
}

.dc-ent-integration-dot-2 { animation-name: dc-ent-integration-dot-travel-2; }
.dc-ent-integration-dot-3 { animation-name: dc-ent-integration-dot-travel-3; }

@keyframes dc-ent-integration-dot-travel-2 { 0% { opacity: 1; left: 216px; } 100% { opacity: 1; left: 284px; } }
@keyframes dc-ent-integration-dot-travel-3 { 0% { opacity: 1; left: 336px; } 100% { opacity: 1; left: 404px; } }

.dc-ent-integration-badge {
    position: absolute;
    top: 205px;
    left: 250px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-integration-badge-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.9s;
    z-index: 3;
}

.dc-ent-integration-badge i { font-size: 12px; color: var(--accent-color); }

.dc-ent-integration-badge span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
}

@keyframes dc-ent-integration-badge-in { to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-ent-integration-node { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-integration-connector { animation: none; transform: translateY(-50%) scaleX(1); }
    .dc-ent-integration-dot { animation: none; opacity: 0; }
    .dc-ent-integration-badge { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-ent-integration-stage-wrap { max-width: 394px; height: 223px; }
    .dc-ent-integration-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-integration-stage-wrap { max-width: 345px; height: 195px; }
    .dc-ent-integration-stage { transform: scale(0.75); }
}

/* ===== TECHNICAL DUE DILIGENCE HERO VISUAL — .dc-ent-diligence-* =====
   A codebase panel sits beside a checklist panel; a scan line sweeps down
   the checklist, lighting four items cyan (passed) as it reaches them while
   one stays permanently dim (flagged) — then a "Report Ready" badge fades
   in. Evaluate-and-report, not protect: distinct from Security's shield
   forming around checkpoints (this file's own .dc-ent-security-*), which
   never produces a report artifact. Self-contained —
   .dc-ent-diligence-* only appears here. */
.dc-ent-diligence-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 300px;
    display: flex;
    justify-content: center;
}

.dc-ent-diligence-stage {
    position: relative;
    width: 380px;
    height: 300px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-diligence-code {
    position: absolute;
    top: 150px;
    left: 100px;
    width: 90px;
    height: 150px;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    animation: dc-ent-diligence-fade-in 0.4s ease forwards;
    animation-delay: 0.2s;
    z-index: 1;
}

.dc-ent-diligence-code-line {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
}

.dc-ent-diligence-code-line:nth-child(1) { width: 90%; }
.dc-ent-diligence-code-line:nth-child(2) { width: 65%; }
.dc-ent-diligence-code-line:nth-child(3) { width: 80%; }
.dc-ent-diligence-code-line:nth-child(4) { width: 50%; }
.dc-ent-diligence-code-line:nth-child(5) { width: 70%; }

@keyframes dc-ent-diligence-fade-in { to { opacity: 1; } }

.dc-ent-diligence-checklist {
    position: absolute;
    top: 150px;
    left: 280px;
    width: 130px;
    height: 190px;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    animation: dc-ent-diligence-fade-in 0.4s ease forwards;
    animation-delay: 0.4s;
    overflow: hidden;
    z-index: 1;
}

.dc-ent-diligence-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dc-ent-diligence-item-mark {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dc-ent-diligence-item-mark i { font-size: 9px; color: var(--accent-color); opacity: 0; }

.dc-ent-diligence-item-bar {
    height: 3px;
    width: 60%;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.dc-ent-diligence-item.is-pass .dc-ent-diligence-item-mark {
    animation: dc-ent-diligence-mark-pass 0.3s ease forwards;
}
.dc-ent-diligence-item.is-pass .dc-ent-diligence-item-mark i {
    animation: dc-ent-diligence-icon-in 0.3s ease forwards;
}

.dc-ent-diligence-item-1.is-pass .dc-ent-diligence-item-mark, .dc-ent-diligence-item-1.is-pass .dc-ent-diligence-item-mark i { animation-delay: 1.1s; }
.dc-ent-diligence-item-3.is-pass .dc-ent-diligence-item-mark, .dc-ent-diligence-item-3.is-pass .dc-ent-diligence-item-mark i { animation-delay: 1.6s; }
.dc-ent-diligence-item-5.is-pass .dc-ent-diligence-item-mark, .dc-ent-diligence-item-5.is-pass .dc-ent-diligence-item-mark i { animation-delay: 2.1s; }
/* Items 2 and 4 are the two flagged findings — they stay in their dim,
   unmarked base state as the scan passes, rather than lighting up. */

@keyframes dc-ent-diligence-mark-pass {
    to { border-color: var(--accent-color); background: rgba(0, 229, 255, 0.14); box-shadow: 0 0 8px rgba(0, 229, 255, 0.4); }
}
@keyframes dc-ent-diligence-icon-in { to { opacity: 1; } }

.dc-ent-diligence-scan {
    position: absolute;
    left: 215px;
    top: 55px;
    width: 130px;
    height: 3px;
    background: linear-gradient(to right, transparent, rgba(0, 229, 255, 0.8), transparent);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    opacity: 0;
    animation: dc-ent-diligence-scan-sweep 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.9s;
    z-index: 2;
}

@keyframes dc-ent-diligence-scan-sweep {
    0%   { top: 55px;  opacity: 1; }
    92%  { top: 235px; opacity: 1; }
    100% { top: 235px; opacity: 0; }
}

.dc-ent-diligence-report {
    position: absolute;
    top: 270px;
    left: 190px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-integration-badge-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.3s;
    z-index: 3;
}

.dc-ent-diligence-report i { font-size: 12px; color: var(--accent-color); }

.dc-ent-diligence-report span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
}

@media (prefers-reduced-motion: reduce) {
    .dc-ent-diligence-code,
    .dc-ent-diligence-checklist { animation: none; opacity: 1; }
    .dc-ent-diligence-item.is-pass .dc-ent-diligence-item-mark {
        animation: none;
        border-color: var(--accent-color);
        background: rgba(0, 229, 255, 0.14);
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
    }
    .dc-ent-diligence-item.is-pass .dc-ent-diligence-item-mark i { animation: none; opacity: 1; }
    .dc-ent-diligence-scan { animation: none; opacity: 0; }
    .dc-ent-diligence-report { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-ent-diligence-stage-wrap { max-width: 326px; height: 257px; }
    .dc-ent-diligence-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-diligence-stage-wrap { max-width: 285px; height: 225px; }
    .dc-ent-diligence-stage { transform: scale(0.75); }
}

/* ===== PERFORMANCE & SCALABILITY HERO VISUAL — .dc-ent-perf-* =====
   A load meter climbs on the left; in response, a base instance node is
   joined by two more that spin up in step with the rising load, capacity
   bars extend alongside them, and a "Fast" badge pulses steadily throughout
   — response time holding, not degrading. Load driving a scaling response,
   not a single gauge-needle before/after (Build's Software Optimization,
   .dc-build-opt-*) and not a static hosting setup with no load metric at
   all (this file's own .dc-ent-cloud-*). Self-contained —
   .dc-ent-perf-* only appears here. */
.dc-ent-perf-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 280px;
    display: flex;
    justify-content: center;
}

.dc-ent-perf-stage {
    position: relative;
    width: 380px;
    height: 280px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-perf-meter-track {
    position: absolute;
    top: 150px;
    left: 60px;
    width: 24px;
    height: 140px;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.dc-ent-perf-meter-fill {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(to top, var(--accent-color), rgba(0, 229, 255, 0.3));
    transform: scaleY(0.15);
    transform-origin: bottom;
    animation: dc-ent-perf-meter-rise 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.3s;
}

@keyframes dc-ent-perf-meter-rise { to { transform: scaleY(0.92); } }

.dc-ent-perf-meter-label {
    position: absolute;
    top: 226px;
    left: 60px;
    transform: translate(-50%, 0);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
    opacity: 0.7;
}

.dc-ent-perf-node {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    transform: translate(-50%, -50%) scale(0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
    opacity: 0;
    animation: dc-ent-perf-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-ent-perf-node i { font-size: 18px; color: var(--accent-color); }

.dc-ent-perf-node-1 { top: 110px; left: 230px; animation-delay: 0.2s; }
.dc-ent-perf-node-2 { top: 110px; left: 310px; animation-delay: 1s; }
.dc-ent-perf-node-3 { top: 200px; left: 270px; animation-delay: 1.7s; }

@keyframes dc-ent-perf-node-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-perf-bars {
    position: absolute;
    top: 236px;
    left: 270px;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.dc-ent-perf-bar {
    width: 7px;
    background: var(--accent-color);
    border-radius: 2px 2px 0 0;
    transform: scaleY(0);
    transform-origin: bottom;
    animation: dc-ent-perf-bar-grow 0.35s ease forwards;
}

.dc-ent-perf-bar:nth-child(1) { height: 8px;  animation-delay: 0.4s; }
.dc-ent-perf-bar:nth-child(2) { height: 14px; animation-delay: 1.2s; }
.dc-ent-perf-bar:nth-child(3) { height: 20px; animation-delay: 1.9s; }

@keyframes dc-ent-perf-bar-grow { to { transform: scaleY(1); } }

.dc-ent-perf-badge {
    position: absolute;
    top: 40px;
    left: 270px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-perf-badge-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-ent-perf-badge-pulse 2.2s ease-in-out infinite;
    animation-delay: 0.6s, 2s;
    z-index: 3;
}

.dc-ent-perf-badge i { font-size: 12px; color: var(--accent-color); }

.dc-ent-perf-badge span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
}

@keyframes dc-ent-perf-badge-in { to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes dc-ent-perf-badge-pulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 14px rgba(0, 229, 255, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-ent-perf-meter-fill { animation: none; transform: scaleY(0.92); }
    .dc-ent-perf-node { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-perf-bar { animation: none; transform: scaleY(1); }
    .dc-ent-perf-badge { animation: none; opacity: 1; box-shadow: none; }
}

@media (max-width: 900px) {
    .dc-ent-perf-stage-wrap { max-width: 326px; height: 240px; }
    .dc-ent-perf-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-perf-stage-wrap { max-width: 285px; height: 210px; }
    .dc-ent-perf-stage { transform: scale(0.75); }
}

/* ===== PRODUCT-MARKET FIT HERO VISUAL — .dc-ent-pmf-* =====
   A product node sits at the left; three feedback cards pop in one by one
   on the right, and a segmented "fit" bar beneath the product fills as each
   arrives — settling at a strong-but-honest 4-of-5 segments, not a maxed-out
   claim. No radiating connector lines at all, unlike every other Enterprise
   visual — deliberately a different family (stacked cards + a fill bar).
   Self-contained — .dc-ent-pmf-* only appears here. */
.dc-ent-pmf-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 300px;
    display: flex;
    justify-content: center;
}

.dc-ent-pmf-stage {
    position: relative;
    width: 380px;
    height: 300px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-pmf-product {
    position: absolute;
    top: 150px;
    left: 90px;
    width: 68px;
    height: 68px;
    border-radius: 12px;
    transform: translate(-50%, -50%) scale(0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-accent);
    box-shadow: 0 10px 24px -8px rgba(0, 229, 255, 0.5);
    opacity: 0;
    animation: dc-ent-pmf-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.15s;
    z-index: 2;
}

.dc-ent-pmf-product i { font-size: 26px; color: #ffffff; }

@keyframes dc-ent-pmf-pop-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-pmf-label {
    position: absolute;
    top: 196px;
    left: 90px;
    transform: translate(-50%, 0);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
    opacity: 0.75;
}

.dc-ent-pmf-card {
    position: absolute;
    left: 300px;
    width: 130px;
    height: 46px;
    border-radius: 10px;
    transform: translate(-50%, -50%) translateX(16px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: dc-ent-pmf-card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-ent-pmf-card i { font-size: 15px; color: var(--accent-color); flex-shrink: 0; }

.dc-ent-pmf-card-bar {
    height: 3px;
    width: 60%;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
}

.dc-ent-pmf-card-1 { top: 90px;  animation-delay: 0.5s; }
.dc-ent-pmf-card-2 { top: 150px; animation-delay: 0.8s; }
.dc-ent-pmf-card-3 { top: 210px; animation-delay: 1.1s; }

@keyframes dc-ent-pmf-card-in { to { opacity: 1; transform: translate(-50%, -50%) translateX(0); } }

.dc-ent-pmf-fit-track {
    position: absolute;
    top: 230px;
    left: 90px;
    transform: translate(-50%, 0);
    display: flex;
    gap: 4px;
}

.dc-ent-pmf-fit-seg {
    width: 20px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    animation: dc-ent-pmf-seg-in 0.3s ease forwards;
}

.dc-ent-pmf-fit-seg.is-lit {
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

.dc-ent-pmf-fit-seg:nth-child(1) { animation-delay: 0.7s; }
.dc-ent-pmf-fit-seg:nth-child(2) { animation-delay: 1s; }
.dc-ent-pmf-fit-seg:nth-child(3) { animation-delay: 1.3s; }
.dc-ent-pmf-fit-seg:nth-child(4) { animation-delay: 1.5s; }
.dc-ent-pmf-fit-seg:nth-child(5) { animation-delay: 1.5s; }

@keyframes dc-ent-pmf-seg-in { to { opacity: 1; } }

.dc-ent-pmf-badge {
    position: absolute;
    top: 258px;
    left: 90px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-pmf-badge-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.9s;
    z-index: 3;
}

.dc-ent-pmf-badge i { font-size: 11px; color: var(--accent-color); }

.dc-ent-pmf-badge span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
}

@keyframes dc-ent-pmf-badge-in { to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-ent-pmf-product { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-pmf-card { animation: none; opacity: 1; transform: translate(-50%, -50%) translateX(0); }
    .dc-ent-pmf-fit-seg { animation: none; opacity: 1; }
    .dc-ent-pmf-badge { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-ent-pmf-stage-wrap { max-width: 326px; height: 257px; }
    .dc-ent-pmf-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-pmf-stage-wrap { max-width: 285px; height: 225px; }
    .dc-ent-pmf-stage { transform: scale(0.75); }
}

/* ===== DEVOPS & AUTOMATION HERO VISUAL — .dc-ent-devops-* =====
   Four pipeline stages (Commit / Build / Test / Deploy) sit in a fixed row;
   a single token travels once through all four in order, briefly lighting
   each as it passes, and settles as a permanent "Live" badge at Deploy. A
   linear, ordered, one-shot pipeline — distinct from Enterprise Integration's
   unordered peer row (this file's own .dc-ent-integration-*) and from
   Cloud's single vertical deploy line with no discrete stages
   (.dc-ent-cloud-*). Self-contained — .dc-ent-devops-* only appears here. */
.dc-ent-devops-stage-wrap {
    width: 100%;
    max-width: 460px;
    height: 260px;
    display: flex;
    justify-content: center;
}

.dc-ent-devops-stage {
    position: relative;
    width: 460px;
    height: 260px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-devops-node {
    position: absolute;
    top: 140px;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    transform: translate(-50%, -50%) scale(0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: dc-ent-devops-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-ent-devops-node i { font-size: 18px; color: var(--accent-color); }

.dc-ent-devops-node-commit { left: 70px;  animation-delay: 0.2s; }
.dc-ent-devops-node-build  { left: 190px; animation-delay: 0.3s; }
.dc-ent-devops-node-test   { left: 310px; animation-delay: 0.4s; }
.dc-ent-devops-node-deploy { left: 430px; animation-delay: 0.5s; }

@keyframes dc-ent-devops-pop-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-devops-label {
    position: absolute;
    top: 176px;
    transform: translate(-50%, 0);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
    opacity: 0.7;
}

.dc-ent-devops-label-commit { left: 70px; }
.dc-ent-devops-label-build  { left: 190px; }
.dc-ent-devops-label-test   { left: 310px; }
.dc-ent-devops-label-deploy { left: 430px; }

.dc-ent-devops-connector {
    position: absolute;
    top: 140px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    animation: dc-ent-devops-connector-in 0.35s ease forwards;
}

.dc-ent-devops-connector-1 { left: 96px;  width: 68px; animation-delay: 0.65s; }
.dc-ent-devops-connector-2 { left: 216px; width: 68px; animation-delay: 0.75s; }
.dc-ent-devops-connector-3 { left: 336px; width: 68px; animation-delay: 0.85s; }

@keyframes dc-ent-devops-connector-in { to { transform: translateY(-50%) scaleX(1); } }

.dc-ent-devops-token {
    position: absolute;
    top: 140px;
    left: 70px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: dc-ent-devops-token-travel 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 1s;
    z-index: 3;
}

@keyframes dc-ent-devops-token-travel {
    0%   { opacity: 1; left: 70px; }
    100% { opacity: 0; left: 430px; }
}

.dc-ent-devops-node-commit { animation-name: dc-ent-devops-pop-in, dc-ent-devops-flash; animation-duration: 0.4s, 0.3s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease; animation-delay: 0.2s, 1.05s; }
.dc-ent-devops-node-build  { animation-name: dc-ent-devops-pop-in, dc-ent-devops-flash; animation-duration: 0.4s, 0.3s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease; animation-delay: 0.3s, 1.4s; }
.dc-ent-devops-node-test   { animation-name: dc-ent-devops-pop-in, dc-ent-devops-flash; animation-duration: 0.4s, 0.3s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease; animation-delay: 0.4s, 1.75s; }

@keyframes dc-ent-devops-flash {
    0%, 100% { border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
    50% { border-color: var(--accent-color); box-shadow: 0 0 14px rgba(0, 229, 255, 0.5); }
}

.dc-ent-devops-node-deploy {
    animation-name: dc-ent-devops-pop-in, dc-ent-devops-deploy-lit;
    animation-duration: 0.4s, 0.3s;
    animation-fill-mode: forwards, forwards;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease;
    animation-delay: 0.5s, 2.1s;
}

@keyframes dc-ent-devops-deploy-lit {
    to { border-color: var(--accent-color); background: rgba(0, 229, 255, 0.14); box-shadow: 0 0 16px rgba(0, 229, 255, 0.5); }
}

.dc-ent-devops-badge {
    position: absolute;
    top: 90px;
    left: 430px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-pmf-badge-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.3s;
    z-index: 4;
}

.dc-ent-devops-badge i { font-size: 11px; color: var(--accent-color); }

.dc-ent-devops-badge span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
}

@media (prefers-reduced-motion: reduce) {
    .dc-ent-devops-node { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-devops-node-deploy { border-color: var(--accent-color); background: rgba(0, 229, 255, 0.14); box-shadow: 0 0 16px rgba(0, 229, 255, 0.5); }
    .dc-ent-devops-connector { animation: none; transform: translateY(-50%) scaleX(1); }
    .dc-ent-devops-token { animation: none; opacity: 0; }
    .dc-ent-devops-badge { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-ent-devops-stage-wrap { max-width: 394px; height: 223px; }
    .dc-ent-devops-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-devops-stage-wrap { max-width: 345px; height: 195px; }
    .dc-ent-devops-stage { transform: scale(0.75); }
}

/* ===== MAINTENANCE & SUPPORT HERO VISUAL — .dc-ent-maintenance-* =====
   A product node sits inside a slow, continuous "heartbeat" ring — twice, a
   small unlit issue marker appears nearby, then a support checkmark
   replaces it and it clears, before a permanent "Monitored" badge settles
   in. A watch-and-respond cycle, not a one-time scan-and-report (Technical
   Due Diligence's .dc-ent-diligence-*) and not a shield forming once
   (Security's .dc-ent-security-*) — no numeric uptime figure appears
   anywhere in the visual. Self-contained — .dc-ent-maintenance-* only
   appears here. */
.dc-ent-maintenance-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 280px;
    display: flex;
    justify-content: center;
}

.dc-ent-maintenance-stage {
    position: relative;
    width: 380px;
    height: 280px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-maintenance-product {
    position: absolute;
    top: 140px;
    left: 190px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-accent);
    box-shadow: 0 10px 24px -8px rgba(0, 229, 255, 0.5);
    opacity: 0;
    animation: dc-ent-maintenance-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.15s;
    z-index: 3;
}

.dc-ent-maintenance-product i { font-size: 24px; color: #ffffff; }

@keyframes dc-ent-maintenance-pop-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-maintenance-pulse {
    position: absolute;
    top: 140px;
    left: 190px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-maintenance-heartbeat 2.6s ease-in-out 0.7s infinite;
    z-index: 2;
}

@keyframes dc-ent-maintenance-heartbeat {
    0%   { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

.dc-ent-maintenance-issue {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    z-index: 2;
}

.dc-ent-maintenance-issue i { font-size: 12px; color: var(--accent-color); opacity: 0; }

.dc-ent-maintenance-issue-1 { top: 90px;  left: 270px; }
.dc-ent-maintenance-issue-2 { top: 200px; left: 120px; }

.dc-ent-maintenance-issue-1 {
    animation: dc-ent-maintenance-issue-in 0.3s ease forwards,
               dc-ent-maintenance-issue-resolve 0.35s ease forwards;
    animation-delay: 1s, 1.6s;
}

.dc-ent-maintenance-issue-2 {
    animation: dc-ent-maintenance-issue-in 0.3s ease forwards,
               dc-ent-maintenance-issue-resolve 0.35s ease forwards;
    animation-delay: 1.9s, 2.4s;
}

@keyframes dc-ent-maintenance-issue-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes dc-ent-maintenance-issue-resolve {
    to { border-color: var(--accent-color); background: rgba(0, 229, 255, 0.14); box-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }
}

.dc-ent-maintenance-issue-1 i { animation: dc-ent-maintenance-icon-in 0.3s ease forwards; animation-delay: 1.6s; }
.dc-ent-maintenance-issue-2 i { animation: dc-ent-maintenance-icon-in 0.3s ease forwards; animation-delay: 2.4s; }

@keyframes dc-ent-maintenance-icon-in { to { opacity: 1; } }

.dc-ent-maintenance-badge {
    position: absolute;
    top: 232px;
    left: 190px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-pmf-badge-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.7s;
    z-index: 4;
}

.dc-ent-maintenance-badge i { font-size: 12px; color: var(--accent-color); }

.dc-ent-maintenance-badge span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
}

@media (prefers-reduced-motion: reduce) {
    .dc-ent-maintenance-product { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-maintenance-pulse { animation: none; opacity: 0; }
    .dc-ent-maintenance-issue { animation: none; opacity: 0; }
    .dc-ent-maintenance-issue i { animation: none; opacity: 0; }
    .dc-ent-maintenance-badge { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-ent-maintenance-stage-wrap { max-width: 326px; height: 240px; }
    .dc-ent-maintenance-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-maintenance-stage-wrap { max-width: 285px; height: 210px; }
    .dc-ent-maintenance-stage { transform: scale(0.75); }
}

/* ===== DATA & PRIVACY HERO VISUAL — .dc-ent-privacy-* =====
   A CSS-built vault (no lock icon exists in the curated set) sits at the
   center; three plain data dots converge into it from different angles and
   fade as they "enter," then the vault's inner dial rotates once to a
   locked position and a "Privacy-Respecting" badge fades in. A one-time
   convergence into a vault with a rotating dial — the only visual on the
   site that rotates a dial — distinct from Digital Marketing's continuous
   inbound ring (Growth's .dc-growth-dm-*) and from every other Enterprise
   visual. Self-contained — .dc-ent-privacy-* only appears here. */
.dc-ent-privacy-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 280px;
    display: flex;
    justify-content: center;
}

.dc-ent-privacy-stage {
    position: relative;
    width: 380px;
    height: 280px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-privacy-vault {
    position: absolute;
    top: 140px;
    left: 190px;
    width: 120px;
    height: 120px;
    border-radius: 18px;
    transform: translate(-50%, -50%) scale(0.7);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: dc-ent-privacy-vault-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.2s;
    z-index: 1;
}

@keyframes dc-ent-privacy-vault-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.dc-ent-privacy-dial {
    position: absolute;
    top: 140px;
    left: 190px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    border: 2px solid rgba(255, 255, 255, 0.3);
    z-index: 2;
    animation: dc-ent-privacy-dial-turn 0.5s ease forwards;
    animation-delay: 1.9s;
}

.dc-ent-privacy-dial::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 2px;
    height: 14px;
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(-50%);
}

@keyframes dc-ent-privacy-dial-turn {
    to { transform: translate(-50%, -50%) rotate(90deg); border-color: var(--accent-color); }
}

.dc-ent-privacy-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.dc-ent-privacy-dot-1 {
    top: 60px; left: 110px;
    animation: dc-ent-privacy-dot-1-travel 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.7s;
}
.dc-ent-privacy-dot-2 {
    top: 60px; left: 270px;
    animation: dc-ent-privacy-dot-2-travel 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 1s;
}
.dc-ent-privacy-dot-3 {
    top: 230px; left: 190px;
    animation: dc-ent-privacy-dot-3-travel 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 1.3s;
}

@keyframes dc-ent-privacy-dot-1-travel { to { top: 140px; left: 190px; opacity: 0; } }
@keyframes dc-ent-privacy-dot-2-travel { to { top: 140px; left: 190px; opacity: 0; } }
@keyframes dc-ent-privacy-dot-3-travel { to { top: 140px; left: 190px; opacity: 0; } }

.dc-ent-privacy-badge {
    position: absolute;
    top: 232px;
    left: 190px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-pmf-badge-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.4s;
    z-index: 4;
}

.dc-ent-privacy-badge i { font-size: 12px; color: var(--accent-color); }

.dc-ent-privacy-badge span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
}

@media (prefers-reduced-motion: reduce) {
    .dc-ent-privacy-vault { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-ent-privacy-dial { animation: none; transform: translate(-50%, -50%) rotate(90deg); border-color: var(--accent-color); }
    .dc-ent-privacy-dot { animation: none; opacity: 0; }
    .dc-ent-privacy-badge { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-ent-privacy-stage-wrap { max-width: 326px; height: 240px; }
    .dc-ent-privacy-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-privacy-stage-wrap { max-width: 285px; height: 210px; }
    .dc-ent-privacy-stage { transform: scale(0.75); }
}

/* ===== TECHNICAL AUDITS HERO VISUAL — .dc-ent-audit-* =====
   Four markers sit in a ring around a center hub; a thin sweep arm rotates
   once around the full circle, lighting each marker as it passes, and the
   hub lights up "Healthy" once the sweep completes. A 360-degree radar/
   clock sweep around a ring — nothing else on the site rotates an arm like
   this. Distinct from Technical Due Diligence's two-panel scan-then-
   checklist layout (this file's own .dc-ent-diligence-*) and from
   Security's top-to-bottom linear scan (.dc-ent-security-*).
   Self-contained — .dc-ent-audit-* only appears here. */
.dc-ent-audit-stage-wrap {
    width: 100%;
    max-width: 380px;
    height: 300px;
    display: flex;
    justify-content: center;
}

.dc-ent-audit-stage {
    position: relative;
    width: 380px;
    height: 300px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-ent-audit-hub {
    position: absolute;
    top: 150px;
    left: 190px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: dc-ent-audit-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-ent-audit-hub-lit 0.35s ease forwards;
    animation-delay: 0.2s, 2.4s;
    z-index: 3;
}

.dc-ent-audit-hub i { font-size: 20px; color: var(--accent-color); opacity: 0; animation: dc-ent-audit-icon-in 0.3s ease forwards; animation-delay: 2.4s; }

@keyframes dc-ent-audit-pop-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes dc-ent-audit-hub-lit { to { border-color: var(--accent-color); background: rgba(0, 229, 255, 0.14); box-shadow: 0 0 16px rgba(0, 229, 255, 0.45); } }
@keyframes dc-ent-audit-icon-in { to { opacity: 1; } }

.dc-ent-audit-marker {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    animation: dc-ent-audit-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-ent-audit-marker-top    { top: 45px;  left: 190px; animation-delay: 0.5s; }
.dc-ent-audit-marker-right  { top: 150px; left: 300px; animation-delay: 0.55s; }
.dc-ent-audit-marker-bottom { top: 255px; left: 190px; animation-delay: 0.6s; }
.dc-ent-audit-marker-left   { top: 150px; left: 80px;  animation-delay: 0.65s; }

.dc-ent-audit-marker-top    { animation-name: dc-ent-audit-pop-in, dc-ent-audit-marker-lit; animation-duration: 0.35s, 0.3s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease; animation-delay: 0.5s, 1.05s; }
.dc-ent-audit-marker-right  { animation-name: dc-ent-audit-pop-in, dc-ent-audit-marker-lit; animation-duration: 0.35s, 0.3s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease; animation-delay: 0.55s, 1.4s; }
.dc-ent-audit-marker-bottom { animation-name: dc-ent-audit-pop-in, dc-ent-audit-marker-lit; animation-duration: 0.35s, 0.3s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease; animation-delay: 0.6s, 1.75s; }
.dc-ent-audit-marker-left   { animation-name: dc-ent-audit-pop-in, dc-ent-audit-marker-lit; animation-duration: 0.35s, 0.3s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease; animation-delay: 0.65s, 2.1s; }

@keyframes dc-ent-audit-marker-lit {
    to { border-color: var(--accent-color); background: rgba(0, 229, 255, 0.14); box-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }
}

.dc-ent-audit-sweep {
    position: absolute;
    top: 150px;
    left: 190px;
    width: 2px;
    height: 105px;
    background: linear-gradient(to bottom, var(--accent-color), transparent);
    transform-origin: top center;
    transform: rotate(-90deg);
    opacity: 0;
    animation: dc-ent-audit-sweep-in 0.2s ease forwards,
               dc-ent-audit-sweep-rotate 1.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: 0.9s, 0.9s;
    z-index: 1;
}

@keyframes dc-ent-audit-sweep-in { to { opacity: 0.9; } }
@keyframes dc-ent-audit-sweep-rotate { to { transform: rotate(270deg); opacity: 0; } }

.dc-ent-audit-badge {
    position: absolute;
    top: 150px;
    left: 190px;
    transform: translate(-50%, 60px);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    animation: dc-ent-pmf-badge-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.6s;
    z-index: 4;
}

.dc-ent-audit-badge i { font-size: 11px; color: var(--accent-color); }

.dc-ent-audit-badge span {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
}

@media (prefers-reduced-motion: reduce) {
    .dc-ent-audit-hub {
        animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1);
        border-color: var(--accent-color); background: rgba(0, 229, 255, 0.14); box-shadow: 0 0 16px rgba(0, 229, 255, 0.45);
    }
    .dc-ent-audit-hub i { animation: none; opacity: 1; }
    .dc-ent-audit-marker {
        animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1);
        border-color: var(--accent-color); background: rgba(0, 229, 255, 0.14); box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
    }
    .dc-ent-audit-sweep { animation: none; opacity: 0; }
    .dc-ent-audit-badge { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-ent-audit-stage-wrap { max-width: 326px; height: 257px; }
    .dc-ent-audit-stage { transform: scale(0.857); }
}

@media (max-width: 480px) {
    .dc-ent-audit-stage-wrap { max-width: 285px; height: 225px; }
    .dc-ent-audit-stage { transform: scale(0.75); }
}