/* ===== BUILD PAGES (commercial "we build it for you" section) =====
   Shared stylesheet for all /build/* pages, loaded alongside learn.css so
   Build pages can reuse the same design DNA (glass cards, common header,
   FAQ accordion, tilt-card grid, portfolio/leads-list, hero-with-visual
   layout) without duplicating any of it. This file holds what's genuinely
   new to Build: the delivered-product hero visual, a dedicated equal-weight
   process component (the shared funnel component draws shrinking bars —
   correct for a marketing funnel, wrong for a build process where every
   step matters equally), and two small additive fixes. */

/* FIX: .dc-homepages-header-description-plain-bc had no navy-safe variant
   — only its sibling title class did. Used on a navy section, the default
   var(--primary-color) text is dark-on-dark and unreadable. Additive only;
   every other use of this class (always on white/off-white) is untouched. */
.dc-homepages-header-description-plain-bc.is-navy {
    color: var(--text-white);
    opacity: 0.75;
}

/* Additive only — .dc-learn-funnel-section has no off-white variant today
   because no Learn page needed one; kept here since other Build sections
   still use the base funnel elsewhere in the section rhythm. */
.dc-learn-funnel-section.is-off-white {
    background: #f8fafc;
}

/* ===== DELIVERED-PRODUCT VISUAL (shared across Build pages) — .dc-build-scene =====
   Replaces an earlier "assembling browser window" draft that read too much
   like Learn's hero visuals (which are all about a thing being built/learned
   in progress). Build is commercial — "we deliver a finished, working
   product" — so this shows a desktop browser and a phone already running
   the same product side by side, with a "Launched" badge landing at the
   end, rather than parts assembling. Meaningfully larger than every Learn
   hero visual (400×340 vs 280×190) so it reads as a strong desktop anchor
   even next to this page's unusually tall hero copy (long 3-line H1 +
   subhead + founder line + pills + two buttons). A soft ambient glow sits
   behind the devices so the composition fills its space instead of
   floating small in empty navy — the glow is decorative filler, not more
   UI chrome. Same scale-whole-unit responsive technique, just scaled from
   a bigger base. Self-contained — .dc-build-* only appears here, cannot
   affect any other page. */
.dc-build-scene {
    display: flex;
    justify-content: center;
    width: 100%;
}

.dc-build-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-build-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;
}

/* --- Desktop browser window --- */
.dc-build-desktop {
    position: absolute;
    top: 56px;
    left: 6px;
    width: 288px;
    height: 200px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    opacity: 0;
    transform: translateX(-14px);
    animation: dc-build-desktop-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 0.15s;
}

@keyframes dc-build-desktop-in { to { opacity: 1; transform: translateX(0); } }

.dc-build-desktop-bar {
    height: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-build-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.5);
}

.dc-build-desktop-body {
    position: relative;
    padding: 12px;
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.dc-build-desktop-header {
    height: 22px;
    border-radius: 6px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.25);
}

.dc-build-desktop-row {
    display: flex;
    gap: 8px;
    flex: 1;
}

.dc-build-desktop-panel {
    flex: 1;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.dc-build-desktop-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dc-build-chart-bar {
    flex: 1;
    height: 100%;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(to top, rgba(0, 229, 255, 0.45), rgba(0, 229, 255, 0.1));
    transform-origin: bottom;
    transform: scaleY(0);
    animation: dc-build-chart-grow 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(1.1s + var(--n) * 0.08s);
}

@keyframes dc-build-chart-grow { to { transform: scaleY(1); } }

/* --- Phone, overlapping bottom-right of the desktop --- */
.dc-build-phone {
    position: absolute;
    right: 4px;
    bottom: 0;
    width: 106px;
    height: 206px;
    border-radius: 18px;
    background: rgba(13, 25, 43, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.92);
    animation: dc-build-phone-in 0.55s cubic-bezier(0.34, 1.2, 0.4, 1) forwards;
    animation-delay: 0.85s;
}

@keyframes dc-build-phone-in { to { opacity: 1; transform: translateY(0) scale(1); } }

.dc-build-phone-notch {
    width: 32px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    margin: 8px auto 10px;
}

.dc-build-phone-body {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dc-build-phone-header {
    height: 14px;
    border-radius: 4px;
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid rgba(0, 229, 255, 0.28);
}

.dc-build-phone-line {
    height: 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
}

.dc-build-phone-line.is-short {
    width: 60%;
}

.dc-build-phone-card {
    height: 44px;
    border-radius: 8px;
    margin-top: 2px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* --- "Launched" badge, lands last --- */
.dc-build-launch-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: rgba(13, 25, 43, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 8px 20px -6px rgba(0, 229, 255, 0.35);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-white, #fff);
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
    animation: dc-build-badge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-badge-glow 2.4s ease-in-out infinite;
    animation-delay: 1.7s, 2.2s;
}

@keyframes dc-build-badge-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dc-build-badge-glow {
    0%, 100% { box-shadow: 0 8px 20px -6px rgba(0, 229, 255, 0.35); }
    50%      { box-shadow: 0 10px 26px -6px rgba(0, 229, 255, 0.6); }
}

.dc-build-launch-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dc-build-desktop { animation: none; opacity: 1; transform: translateX(0); }
    .dc-build-phone { animation: none; opacity: 1; transform: translateY(0) scale(1); }
    .dc-build-chart-bar { animation: none; transform: scaleY(1); }
    .dc-build-launch-badge { animation: none; opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
    .dc-build-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-stage {
        transform: scale(0.75);
    }
}

/* ===== BUILD PROCESS (shared across Build pages) — .dc-build-process =====
   Equal-weight horizontal step sequence for "How We Build"-style sections
   — deliberately NOT the shared .dc-learn-funnel component, whose bars
   shrink stage to stage (right for a marketing funnel, wrong for a build
   process where the last step matters as much as the first). Cards sit on
   one connected line, all the same size, with a numbered badge and an
   icon — reads as a sequence, not a funnel. Reduced-motion keeps the
   reveal-on-scroll fade (inherited from .dc-scroll-reveal / learn.js)
   but nothing here adds its own motion beyond that. */
/* The 4-across step grid + dashed connecting line need more room than the
   760px readable-prose width the section normally uses for body copy. */
.dc-build-process-inner {
    max-width: 980px;
}

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

.dc-build-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-build-process-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.dc-build-process-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--ai-gradient-accent, 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-build-process-name {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1.05rem;
    margin: 0 0 6px 0;
}

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

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

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

/* ===== SAAS DASHBOARD (Build-scoped) — .dc-build-saas-dash =====
   Reuses the dashboard-assembly pattern proven on /learn/saas-application-
   development (.dc-saas-dash in learn.css), redrawn bigger under a
   .dc-build-saas-* prefix so this page's visual reads at the same
   commanding size as the flagship's device composition (~400px base,
   matching .dc-build-stage) instead of the smaller Learn-page scale, and so
   it can never collide with the Learn page's own styles. Same "live"
   pulse + assembling stat cards + bar chart, plus the shared .dc-build-glow
   ambient backdrop for consistency with the flagship hero. Scale-whole-unit
   responsive technique, same 0.857 / 0.75 factors as every other hero
   visual on the site. */
.dc-build-saas-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 271px;
    display: flex;
    justify-content: center;
}

.dc-build-saas-stage {
    position: relative;
    width: 400px;
    height: 271px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-build-saas-dash {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.dc-build-saas-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 29px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-8px);
    animation: dc-build-saas-topbar-in 0.4s ease forwards;
    animation-delay: 0.05s;
}

@keyframes dc-build-saas-topbar-in { to { opacity: 1; transform: translateY(0); } }

.dc-build-saas-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.5);
}

.dc-build-saas-live-pill {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.dc-build-saas-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    animation: dc-build-saas-live-pulse 2s ease-in-out infinite;
    animation-delay: 1.6s;
}

@keyframes dc-build-saas-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.6); }
    50%      { box-shadow: 0 0 0 5px rgba(0, 229, 255, 0); }
}

.dc-build-saas-sidebar {
    position: absolute;
    top: 29px;
    left: 0;
    bottom: 0;
    width: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    background: rgba(255, 255, 255, 0.035);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-build-saas-nav-item {
    width: 31px;
    height: 9px;
    border-radius: 4px;
    background: rgba(0, 229, 255, 0.3);
    opacity: 0;
    transform: translateX(-10px);
    animation: dc-build-saas-nav-in 0.4s ease forwards;
    animation-delay: calc(0.3s + var(--n) * 0.1s);
}

.dc-build-saas-nav-item:first-child {
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

@keyframes dc-build-saas-nav-in { to { opacity: 1; transform: translateX(0); } }

.dc-build-saas-main {
    position: absolute;
    top: 29px;
    left: 66px;
    right: 0;
    bottom: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.dc-build-saas-stats {
    display: flex;
    gap: 9px;
}

.dc-build-saas-stat-card {
    flex: 1;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    opacity: 0;
    transform: scale(0.85);
    animation: dc-build-saas-card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(0.6s + var(--n) * 0.12s);
}

@keyframes dc-build-saas-card-in { to { opacity: 1; transform: scale(1); } }

.dc-build-saas-stat-label {
    width: 60%;
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.22);
}

.dc-build-saas-stat-value {
    width: 40%;
    height: 11px;
    border-radius: 4px;
    background: rgba(0, 229, 255, 0.4);
    display: flex;
    align-items: center;
}

.dc-build-saas-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    margin-left: auto;
    margin-right: 3px;
}

.dc-build-saas-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    padding: 0 3px;
}

.dc-build-saas-bar {
    flex: 1;
    height: 100%;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top, rgba(0, 229, 255, 0.45), rgba(0, 229, 255, 0.12));
    transform-origin: bottom;
    transform: scaleY(0);
    animation: dc-build-saas-bar-grow 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(1s + var(--n) * 0.08s);
}

.dc-build-saas-bar:nth-child(4) {
    background: linear-gradient(to top, var(--accent-color), rgba(0, 229, 255, 0.2));
}

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

@media (prefers-reduced-motion: reduce) {
    .dc-build-saas-topbar { animation: none; opacity: 1; transform: translateY(0); }
    .dc-build-saas-nav-item { animation: none; opacity: 1; transform: translateX(0); }
    .dc-build-saas-stat-card { animation: none; opacity: 1; transform: scale(1); }
    .dc-build-saas-bar { animation: none; transform: scaleY(1); }
    .dc-build-saas-live-dot { animation: none; box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.35); }
}

@media (max-width: 900px) {
    .dc-build-saas-stage-wrap {
        max-width: 343px;
        height: 232px;
    }
    .dc-build-saas-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-saas-stage-wrap {
        max-width: 300px;
        height: 203px;
    }
    .dc-build-saas-stage {
        transform: scale(0.75);
    }
}

/* ===== AI AGENT PANEL (Build-scoped) — .dc-build-ai-* =====
   Hero visual for /build/ai-agents-development — a stylized agent panel
   that assembles as a sequence rather than a static mockup: a prompt line
   types in, a central "thinking" node pulses awake, a connector bus lights
   up to three tool chips (the agent reaching for tools), then task rows
   check off one by one, ending with a "Done" badge — read left to right as
   prompt -> think -> act -> done. Distinct from the SaaS dashboard and the
   web-app device pair through structure and motion only, never color —
   same cyan+navy, same glass chrome. Same 400x340 base and 0.857/0.75
   scale-whole-unit responsive technique as every other Build hero visual,
   so all Build pages carry the same visual weight. Reuses the shared
   .dc-build-glow backdrop and the .dc-build-badge-in / .dc-build-badge-glow
   keyframes already defined above for the "Launched" badge. */
.dc-build-ai-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-ai-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-build-ai-panel {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dc-build-ai-topbar {
    height: 29px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-build-ai-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.5);
}

.dc-build-ai-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 20px;
}

/* --- Prompt line: a bar that "types" itself in, then a blinking cursor --- */
.dc-build-ai-prompt {
    width: 100%;
    max-width: 260px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.dc-build-ai-prompt-bar {
    height: 8px;
    flex: 1;
    border-radius: 4px;
    background: rgba(0, 229, 255, 0.4);
    transform-origin: left;
    transform: scaleX(0);
    animation: dc-build-ai-type 0.6s ease forwards;
    animation-delay: 0.15s;
}

@keyframes dc-build-ai-type { to { transform: scaleX(1); } }

.dc-build-ai-cursor {
    width: 2px;
    height: 14px;
    background: var(--accent-color);
    opacity: 0;
    animation: dc-build-ai-cursor-blink 1s step-end infinite;
    animation-delay: 0.8s;
}

@keyframes dc-build-ai-cursor-blink {
    0%, 49%  { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* --- Thinking node + connector bus + tool chips --- */
.dc-build-ai-think {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dc-build-ai-node {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.4), rgba(0, 229, 255, 0.05) 70%);
    border: 1px solid rgba(0, 229, 255, 0.55);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-build-ai-node-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-ai-node-pulse 2s ease-in-out infinite;
    animation-delay: 0.5s, 1s;
}

@keyframes dc-build-ai-node-in { to { opacity: 1; transform: scale(1); } }
@keyframes dc-build-ai-node-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.45); }
    50%      { box-shadow: 0 0 0 10px rgba(0, 229, 255, 0); }
}

.dc-build-ai-bus {
    position: relative;
    width: 220px;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 1px;
}

.dc-build-ai-bus-fill {
    position: absolute;
    inset: 0;
    background: rgba(0, 229, 255, 0.7);
    transform-origin: center;
    transform: scaleX(0);
    animation: dc-build-ai-bus-grow 0.5s ease forwards;
    animation-delay: 1.1s;
}

@keyframes dc-build-ai-bus-grow { to { transform: scaleX(1); } }

.dc-build-ai-tools {
    display: flex;
    justify-content: space-between;
    width: 220px;
}

.dc-build-ai-tool {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: translateY(6px) scale(0.85);
    animation: dc-build-ai-tool-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(1.3s + var(--n) * 0.12s);
}

@keyframes dc-build-ai-tool-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        border-color: rgba(0, 229, 255, 0.55);
        box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.4);
    }
}

/* --- Task rows checking off in sequence --- */
.dc-build-ai-tasks {
    width: 100%;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.dc-build-ai-task {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateX(-8px);
    animation: dc-build-ai-task-in 0.4s ease forwards;
    animation-delay: calc(1.9s + var(--n) * 0.18s);
}

@keyframes dc-build-ai-task-in { to { opacity: 1; transform: translateX(0); } }

.dc-build-ai-task-check {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    animation: dc-build-ai-check-fill 0.3s ease forwards;
    animation-delay: calc(2.2s + var(--n) * 0.18s);
}

@keyframes dc-build-ai-check-fill {
    to {
        background: var(--accent-color);
        border-color: var(--accent-color);
        box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
    }
}

.dc-build-ai-task-label {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
}

/* --- "Done" badge, lands last (reuses the launch-badge keyframes) --- */
.dc-build-ai-done-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: rgba(13, 25, 43, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 8px 20px -6px rgba(0, 229, 255, 0.35);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-white, #fff);
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
    animation: dc-build-badge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-badge-glow 2.4s ease-in-out infinite;
    animation-delay: 3.1s, 3.6s;
}

.dc-build-ai-done-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dc-build-ai-prompt-bar { animation: none; transform: scaleX(1); }
    .dc-build-ai-cursor { animation: none; opacity: 1; }
    .dc-build-ai-node { animation: none; opacity: 1; transform: scale(1); }
    .dc-build-ai-bus-fill { animation: none; transform: scaleX(1); }
    .dc-build-ai-tool { animation: none; opacity: 1; transform: translateY(0) scale(1); border-color: rgba(0, 229, 255, 0.55); }
    .dc-build-ai-task { animation: none; opacity: 1; transform: translateX(0); }
    .dc-build-ai-task-check { animation: none; background: var(--accent-color); border-color: var(--accent-color); }
    .dc-build-ai-done-badge { animation: none; opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
    .dc-build-ai-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-ai-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-ai-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-ai-stage {
        transform: scale(0.75);
    }
}

/* ===== IDEA-TO-LAUNCH JOURNEY (Build-scoped) — .dc-build-mvp-* =====
   Hero visual for /build/mvp-development — a short journey that plays once:
   an idea spark appears, a track draws left to right through two milestone
   checkpoints, and ends at a glowing "Live" launch node with a badge —
   reads as idea -> build -> test -> launch, matching the MVP promise of a
   fast, focused path from concept to a launched product. Distinct from the
   AI panel's think/act sequence and the SaaS dashboard through structure
   and motion only, never color. Same 400x340 base and 0.857/0.75
   scale-whole-unit technique as every other Build hero visual. Reuses the
   shared .dc-build-glow backdrop and the .dc-build-badge-in /
   .dc-build-badge-glow keyframes already defined above. */
.dc-build-mvp-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-mvp-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-build-mvp-panel {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dc-build-mvp-topbar {
    height: 29px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-build-mvp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.5);
}

.dc-build-mvp-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
}

.dc-build-mvp-track-row {
    position: relative;
    width: 100%;
    max-width: 320px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.dc-build-mvp-track-line {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 1px;
}

.dc-build-mvp-track-fill {
    position: absolute;
    inset: 0;
    background: rgba(0, 229, 255, 0.65);
    transform-origin: left;
    transform: scaleX(0);
    animation: dc-build-mvp-track-grow 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.5s;
}

@keyframes dc-build-mvp-track-grow { to { transform: scaleX(1); } }

.dc-build-mvp-node {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(13, 25, 43, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    animation: dc-build-mvp-node-fill 0.35s ease forwards;
    animation-delay: calc(1s + var(--n) * 0.28s);
}

@keyframes dc-build-mvp-node-fill {
    to {
        background: var(--accent-color);
        border-color: var(--accent-color);
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
    }
}

.dc-build-mvp-spark {
    width: 26px;
    height: 26px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.45), rgba(0, 229, 255, 0.08) 70%);
    border: 1.5px solid rgba(0, 229, 255, 0.6);
    opacity: 0;
    transform: scale(0.5);
    animation: dc-build-mvp-spark-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-mvp-spark-pulse 1.8s ease-in-out infinite;
    animation-delay: 0.15s, 0.6s;
}

@keyframes dc-build-mvp-spark-in { to { opacity: 1; transform: scale(1); } }
@keyframes dc-build-mvp-spark-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); }
}

.dc-build-mvp-launch {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(13, 25, 43, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    animation: dc-build-mvp-launch-fill 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.85s;
}

@keyframes dc-build-mvp-launch-fill {
    to {
        background: rgba(0, 229, 255, 0.15);
        border-color: var(--accent-color);
        box-shadow: 0 0 16px rgba(0, 229, 255, 0.6);
    }
}

.dc-build-mvp-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 320px;
    margin-top: 10px;
}

.dc-build-mvp-label {
    width: 28px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
}

/* --- "Live" badge, lands last (reuses the launch-badge keyframes) --- */
.dc-build-mvp-live-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: rgba(13, 25, 43, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 8px 20px -6px rgba(0, 229, 255, 0.35);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-white, #fff);
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
    animation: dc-build-badge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-badge-glow 2.4s ease-in-out infinite;
    animation-delay: 2.3s, 2.8s;
}

.dc-build-mvp-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dc-build-mvp-track-fill { animation: none; transform: scaleX(1); }
    .dc-build-mvp-node { animation: none; background: var(--accent-color); border-color: var(--accent-color); }
    .dc-build-mvp-spark { animation: none; opacity: 1; transform: scale(1); }
    .dc-build-mvp-launch { animation: none; background: rgba(0, 229, 255, 0.15); border-color: var(--accent-color); }
    .dc-build-mvp-live-badge { animation: none; opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
    .dc-build-mvp-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-mvp-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-mvp-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-mvp-stage {
        transform: scale(0.75);
    }
}

/* ===== MODULAR SYSTEM ASSEMBLING (Build-scoped) — .dc-build-custom-* =====
   Hero visual for /build/custom-software-development — deliberately
   structured UNLIKE every other Build hero: no bounded glass panel/device
   at all. Five separate blocks of different sizes fly in from different
   directions onto a bento-style grid, three connector lines between them
   light up once their blocks have landed, and a soft "unifying glow"
   fades in last across the whole assembled grid — read as separate
   tailored pieces snapping together into one bespoke system, which is
   exactly the pitch for custom software (vs. the Web App browser window,
   the SaaS dashboard, the AI think/act panel, and the MVP idea-to-launch
   track). Same 400x340 base and 0.857/0.75 scale-whole-unit technique as
   every other Build hero visual so it still carries the same visual
   weight. Reuses the shared .dc-build-glow ambient backdrop underneath. */
.dc-build-custom-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-custom-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-custom-grid {
    position: relative;
    width: 280px;
    height: 220px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    z-index: 1;
}

.dc-build-custom-unify-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 260px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(0, 229, 255, 0.22), transparent 72%);
    filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    animation: dc-build-custom-unify-in 1s ease forwards;
    animation-delay: 1.6s;
}

@keyframes dc-build-custom-unify-in { to { opacity: 1; } }

/* --- The 5 blocks: each flies in from its own direction --- */
.dc-build-custom-block {
    position: relative;
    z-index: 2;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    animation: dc-build-custom-block-land 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes dc-build-custom-block-land {
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        border-color: rgba(0, 229, 255, 0.5);
        box-shadow: 0 10px 24px -10px rgba(0, 229, 255, 0.35);
    }
}

.dc-build-custom-block-a {
    grid-column: 1;
    grid-row: 1;
    transform: translate(-26px, -20px) scale(0.7);
    animation-delay: 0.2s;
}

.dc-build-custom-block-b {
    grid-column: 2;
    grid-row: 1 / 3;
    transform: translateY(-30px) scale(0.7);
    animation-delay: 0.42s;
}

.dc-build-custom-block-c {
    grid-column: 3;
    grid-row: 1;
    transform: translate(26px, -20px) scale(0.7);
    animation-delay: 0.64s;
}

.dc-build-custom-block-d {
    grid-column: 1;
    grid-row: 2;
    transform: translate(-26px, 20px) scale(0.7);
    animation-delay: 0.86s;
}

.dc-build-custom-block-e {
    grid-column: 3;
    grid-row: 2;
    transform: translate(26px, 20px) scale(0.7);
    animation-delay: 1.08s;
}

/* --- Connector lines: light up once their blocks have landed --- */
.dc-build-custom-line {
    position: absolute;
    z-index: 1;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    animation: dc-build-custom-line-on 0.4s ease forwards;
}

@keyframes dc-build-custom-line-on {
    to {
        opacity: 1;
        background: rgba(0, 229, 255, 0.55);
        box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
    }
}

.dc-build-custom-line-v1 {
    top: 0;
    left: calc(33.333% - 1px);
    width: 2px;
    height: 100%;
    animation-delay: 1.15s;
}

.dc-build-custom-line-v2 {
    top: 0;
    left: calc(66.666% - 1px);
    width: 2px;
    height: 100%;
    animation-delay: 1.3s;
}

.dc-build-custom-line-h {
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    animation-delay: 1.45s;
}

@media (prefers-reduced-motion: reduce) {
    .dc-build-custom-block { animation: none; opacity: 1; transform: translate(0, 0) scale(1); border-color: rgba(0, 229, 255, 0.5); }
    .dc-build-custom-line { animation: none; opacity: 1; background: rgba(0, 229, 255, 0.55); }
    .dc-build-custom-unify-glow { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-build-custom-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-custom-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-custom-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-custom-stage {
        transform: scale(0.75);
    }
}

/* ===== PHONE APP SCREENS (Build-scoped) — .dc-build-mobile-* =====
   Hero visual for /build/mobile-app-development — anchored on a PHONE
   frame (not a desktop browser), with a smaller second phone offset
   behind it for depth. A splash mark fades away to reveal a home screen
   (nav bar + two cards), a tap-ripple pulses on the second card, then a
   detail screen slides in from the right and covers the home screen —
   reading as real screen-to-screen app navigation. Distinct in kind from
   every prior Build hero (Web App's desktop browser, SaaS's dashboard,
   AI's think/act panel, MVP's track, Custom's block-grid — none of them
   are phone-shaped or show in-app navigation). Same 400x340 base and
   0.857/0.75 scale-whole-unit technique. Reuses the shared .dc-build-glow
   backdrop and the generic .dc-build-phone-notch already defined above. */
.dc-build-mobile-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-mobile-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-mobile-composition {
    position: relative;
    z-index: 1;
    width: 220px;
    height: 300px;
}

/* --- Smaller second phone, offset behind for depth --- */
.dc-build-mobile-phone-back {
    position: absolute;
    left: 0;
    top: 24px;
    width: 108px;
    height: 224px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateX(-10px);
    animation: dc-build-mobile-back-in 0.5s ease forwards;
    animation-delay: 0.1s;
}

@keyframes dc-build-mobile-back-in { to { opacity: 0.4; transform: translateX(0); } }

/* --- Main phone frame --- */
.dc-build-mobile-phone {
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: 300px;
    border-radius: 26px;
    background: rgba(13, 25, 43, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    animation: dc-build-mobile-phone-in 0.45s ease forwards;
    animation-delay: 0.05s;
}

@keyframes dc-build-mobile-phone-in { to { opacity: 1; transform: translateY(0) scale(1); } }

.dc-build-mobile-screen {
    position: absolute;
    inset: 22px 8px 8px 8px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
}

/* --- Splash layer: fades away to reveal the home screen beneath --- */
.dc-build-mobile-screen-splash {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 25, 43, 0.95);
    animation: dc-build-mobile-splash-out 0.4s ease forwards;
    animation-delay: 1s;
}

@keyframes dc-build-mobile-splash-out { to { opacity: 0; visibility: hidden; } }

.dc-build-mobile-splash-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.4), rgba(0, 229, 255, 0.08) 70%);
    border: 1.5px solid rgba(0, 229, 255, 0.55);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-build-mobile-splash-mark-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.25s;
}

@keyframes dc-build-mobile-splash-mark-in { to { opacity: 1; transform: scale(1); } }

/* --- Home screen: nav bar + two cards, revealed once the splash fades --- */
.dc-build-mobile-screen-home {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.dc-build-mobile-home-nav {
    height: 10px;
    width: 60%;
    border-radius: 4px;
    background: rgba(0, 229, 255, 0.35);
    opacity: 0;
    animation: dc-build-mobile-fade-up 0.4s ease forwards;
    animation-delay: 1.15s;
}

.dc-build-mobile-home-card {
    height: 46px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    opacity: 0;
    animation: dc-build-mobile-fade-up 0.4s ease forwards;
}

.dc-build-mobile-home-card:nth-of-type(2) { animation-delay: 1.3s; }
.dc-build-mobile-home-card:nth-of-type(3) { animation-delay: 1.45s; }

@keyframes dc-build-mobile-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dc-build-mobile-tap-ripple {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0;
    animation: dc-build-mobile-ripple 0.6s ease forwards;
    animation-delay: 1.85s;
}

@keyframes dc-build-mobile-ripple {
    0%   { opacity: 0.9; box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.6); }
    100% { opacity: 0; box-shadow: 0 0 0 14px rgba(0, 229, 255, 0); }
}

/* --- Detail screen: slides in from the right, covering the home screen --- */
.dc-build-mobile-screen-detail {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: rgba(13, 25, 43, 0.96);
    transform: translateX(100%);
    animation: dc-build-mobile-detail-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 2.15s;
}

@keyframes dc-build-mobile-detail-in { to { transform: translateX(0); } }

.dc-build-mobile-detail-header {
    height: 10px;
    width: 45%;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.22);
}

.dc-build-mobile-detail-block {
    flex: 1;
    border-radius: 10px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.25);
}

.dc-build-mobile-detail-line {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
}

.dc-build-mobile-detail-line.is-short { width: 55%; }

@media (prefers-reduced-motion: reduce) {
    .dc-build-mobile-phone-back { animation: none; opacity: 0.4; transform: translateX(0); }
    .dc-build-mobile-phone { animation: none; opacity: 1; transform: translateY(0) scale(1); }
    .dc-build-mobile-screen-splash { animation: none; opacity: 0; visibility: hidden; }
    .dc-build-mobile-splash-mark { animation: none; opacity: 1; transform: scale(1); }
    .dc-build-mobile-home-nav,
    .dc-build-mobile-home-card { animation: none; opacity: 1; transform: translateY(0); }
    .dc-build-mobile-tap-ripple { animation: none; opacity: 0; }
    .dc-build-mobile-screen-detail { animation: none; transform: translateX(0); }
}

@media (max-width: 900px) {
    .dc-build-mobile-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-mobile-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-mobile-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-mobile-stage {
        transform: scale(0.75);
    }
}

/* ===== API CONNECTION HUB (Build-scoped) — .dc-build-api-* =====
   Hero visual for /build/api-development — a hub-and-spoke network
   diagram: a central pulsing hub, five connector lines draw outward one
   by one, an endpoint node pops in as each line finishes, then small data
   packets travel back and forth along every line on an infinite loop —
   reading as "the connective layer between systems", literally what an
   API is. Distinct in kind from every prior Build hero (no window,
   dashboard, panel, track, block-grid or phone — this is a radial network
   graph). Same 400x340 base and 0.857/0.75 scale-whole-unit technique.
   Reuses the shared .dc-build-glow backdrop. Node/line positions are
   hardcoded per spoke (five points evenly spaced around a circle) rather
   than computed, matching the site's existing convention of named,
   explicit per-element values (see .dc-build-custom-block-a..e) over
   formulaic placement. */
.dc-build-api-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-api-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-api-hub-wrap {
    position: relative;
    z-index: 1;
    width: 300px;
    height: 300px;
}

.dc-build-api-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    background: radial-gradient(circle, rgba(0, 229, 255, 0.4), rgba(0, 229, 255, 0.08) 70%);
    border: 1.5px solid rgba(0, 229, 255, 0.6);
    opacity: 0;
    animation: dc-build-api-hub-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-api-hub-pulse 2.2s ease-in-out infinite;
    animation-delay: 0.15s, 0.6s;
}

@keyframes dc-build-api-hub-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes dc-build-api-hub-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
    50%      { box-shadow: 0 0 0 12px rgba(0, 229, 255, 0); }
}

/* --- Five spokes: line-wrap holds the rotation, bar draws outward,
       packet travels independently so the scaleX on the bar never
       distorts the packet's own translation. --- */
.dc-build-api-line-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 130px;
    height: 2px;
    transform-origin: left center;
}

.dc-build-api-line-bar {
    position: absolute;
    inset: 0;
    background: rgba(0, 229, 255, 0.4);
    transform-origin: left center;
    transform: scaleX(0);
    animation: dc-build-api-line-grow 0.4s ease forwards;
}

@keyframes dc-build-api-line-grow { to { transform: scaleX(1); } }

.dc-build-api-packet {
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.7);
    opacity: 0;
    transform: translateY(-50%) translateX(0);
    animation: dc-build-api-packet-fade 0.2s ease forwards,
               dc-build-api-packet-travel 1.8s ease-in-out infinite;
}

@keyframes dc-build-api-packet-fade { to { opacity: 1; } }
@keyframes dc-build-api-packet-travel {
    0%, 100% { transform: translateY(-50%) translateX(6px); }
    50%      { transform: translateY(-50%) translateX(120px); }
}

.dc-build-api-node {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(13, 25, 43, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    animation: dc-build-api-node-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dc-build-api-node-in {
    to {
        opacity: 1;
        border-color: rgba(0, 229, 255, 0.55);
        box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.4);
    }
}

/* Five spokes at 72° apart, starting from the top (0, 72, 144, 216, 288). */
.dc-build-api-line-wrap-1 { transform: rotate(-90deg); }
.dc-build-api-line-wrap-2 { transform: rotate(-18deg); }
.dc-build-api-line-wrap-3 { transform: rotate(54deg); }
.dc-build-api-line-wrap-4 { transform: rotate(126deg); }
.dc-build-api-line-wrap-5 { transform: rotate(198deg); }

.dc-build-api-line-wrap-1 .dc-build-api-line-bar { animation-delay: 0.4s; }
.dc-build-api-line-wrap-2 .dc-build-api-line-bar { animation-delay: 0.55s; }
.dc-build-api-line-wrap-3 .dc-build-api-line-bar { animation-delay: 0.7s; }
.dc-build-api-line-wrap-4 .dc-build-api-line-bar { animation-delay: 0.85s; }
.dc-build-api-line-wrap-5 .dc-build-api-line-bar { animation-delay: 1s; }

.dc-build-api-line-wrap-1 .dc-build-api-packet { animation-delay: 0.95s, 0.95s; }
.dc-build-api-line-wrap-2 .dc-build-api-packet { animation-delay: 1.1s, 1.1s; }
.dc-build-api-line-wrap-3 .dc-build-api-packet { animation-delay: 1.25s, 1.25s; }
.dc-build-api-line-wrap-4 .dc-build-api-packet { animation-delay: 1.4s, 1.4s; }
.dc-build-api-line-wrap-5 .dc-build-api-packet { animation-delay: 1.55s, 1.55s; }

.dc-build-api-node-1 { transform: translate(calc(-50% + 0px), calc(-50% - 130px)) scale(0.5); animation-delay: 0.75s; }
.dc-build-api-node-2 { transform: translate(calc(-50% + 124px), calc(-50% - 40px)) scale(0.5); animation-delay: 0.9s; }
.dc-build-api-node-3 { transform: translate(calc(-50% + 76px), calc(-50% + 105px)) scale(0.5); animation-delay: 1.05s; }
.dc-build-api-node-4 { transform: translate(calc(-50% - 76px), calc(-50% + 105px)) scale(0.5); animation-delay: 1.2s; }
.dc-build-api-node-5 { transform: translate(calc(-50% - 124px), calc(-50% - 40px)) scale(0.5); animation-delay: 1.35s; }

.dc-build-api-node-1.dc-build-api-node { animation-name: dc-build-api-node-in-1; }

@keyframes dc-build-api-node-in-1 {
    to {
        opacity: 1;
        transform: translate(calc(-50% + 0px), calc(-50% - 130px)) scale(1);
        border-color: rgba(0, 229, 255, 0.55);
        box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.4);
    }
}

@keyframes dc-build-api-node-in-2 {
    to {
        opacity: 1;
        transform: translate(calc(-50% + 124px), calc(-50% - 40px)) scale(1);
        border-color: rgba(0, 229, 255, 0.55);
        box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.4);
    }
}

@keyframes dc-build-api-node-in-3 {
    to {
        opacity: 1;
        transform: translate(calc(-50% + 76px), calc(-50% + 105px)) scale(1);
        border-color: rgba(0, 229, 255, 0.55);
        box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.4);
    }
}

@keyframes dc-build-api-node-in-4 {
    to {
        opacity: 1;
        transform: translate(calc(-50% - 76px), calc(-50% + 105px)) scale(1);
        border-color: rgba(0, 229, 255, 0.55);
        box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.4);
    }
}

@keyframes dc-build-api-node-in-5 {
    to {
        opacity: 1;
        transform: translate(calc(-50% - 124px), calc(-50% - 40px)) scale(1);
        border-color: rgba(0, 229, 255, 0.55);
        box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.4);
    }
}

.dc-build-api-node-2 { animation-name: dc-build-api-node-in-2; }
.dc-build-api-node-3 { animation-name: dc-build-api-node-in-3; }
.dc-build-api-node-4 { animation-name: dc-build-api-node-in-4; }
.dc-build-api-node-5 { animation-name: dc-build-api-node-in-5; }

@media (prefers-reduced-motion: reduce) {
    .dc-build-api-hub { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-build-api-line-bar { animation: none; transform: scaleX(1); }
    .dc-build-api-packet { animation: none; opacity: 0; }
    .dc-build-api-node-1 { animation: none; opacity: 1; transform: translate(calc(-50% + 0px), calc(-50% - 130px)) scale(1); border-color: rgba(0, 229, 255, 0.55); }
    .dc-build-api-node-2 { animation: none; opacity: 1; transform: translate(calc(-50% + 124px), calc(-50% - 40px)) scale(1); border-color: rgba(0, 229, 255, 0.55); }
    .dc-build-api-node-3 { animation: none; opacity: 1; transform: translate(calc(-50% + 76px), calc(-50% + 105px)) scale(1); border-color: rgba(0, 229, 255, 0.55); }
    .dc-build-api-node-4 { animation: none; opacity: 1; transform: translate(calc(-50% - 76px), calc(-50% + 105px)) scale(1); border-color: rgba(0, 229, 255, 0.55); }
    .dc-build-api-node-5 { animation: none; opacity: 1; transform: translate(calc(-50% - 124px), calc(-50% - 40px)) scale(1); border-color: rgba(0, 229, 255, 0.55); }
}

@media (max-width: 900px) {
    .dc-build-api-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-api-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-api-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-api-stage {
        transform: scale(0.75);
    }
}

/* ===== LIVE CHAT CONVERSATION (Build-scoped) — .dc-build-chatbot-* =====
   Hero visual for /build/ai-chatbot-development — a chat window where a
   real two-exchange conversation plays out: a user bubble slides in from
   the right, three typing dots appear on the left and hold, then fade to
   reveal a bot reply bubble sliding in from the left — repeated once more.
   A small glowing bot avatar sits in the header throughout. Deliberately
   built from message bubbles + a typing indicator, not a thinking node or
   task list, so it reads as a CONVERSATION rather than the AI Agents
   page's tool-using agent — the two pages sell different things and must
   look different. Also distinct from every other prior Build hero (no
   window/dashboard/track/block-grid/phone/hub). Same 400x340 base and
   0.857/0.75 scale-whole-unit technique. Reuses the shared .dc-build-glow
   backdrop. The typing-dots-to-bubble swap reuses the same "stack two
   states, fade one out as the other fades in" technique as the Mobile
   page's splash-to-home reveal, just applied to a chat reply instead of
   an app screen. */
.dc-build-chatbot-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-chatbot-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-build-chatbot-panel {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: dc-build-chatbot-panel-in 0.4s ease forwards;
    animation-delay: 0.05s;
}

@keyframes dc-build-chatbot-panel-in { to { opacity: 1; } }

.dc-build-chatbot-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-build-chatbot-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.45), rgba(0, 229, 255, 0.1) 70%);
    border: 1.5px solid rgba(0, 229, 255, 0.6);
    animation: dc-build-chatbot-avatar-pulse 2.2s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes dc-build-chatbot-avatar-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); }
}

.dc-build-chatbot-name {
    width: 70px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
}

.dc-build-chatbot-status {
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
}

.dc-build-chatbot-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 16px;
}

.dc-build-chatbot-row {
    display: flex;
}

.dc-build-chatbot-row.is-user { justify-content: flex-end; }
.dc-build-chatbot-row.is-bot { justify-content: flex-start; height: 30px; position: relative; }

.dc-build-chatbot-bubble {
    height: 26px;
    border-radius: 14px;
    opacity: 0;
}

.dc-build-chatbot-bubble.is-user {
    width: 118px;
    background: rgba(0, 229, 255, 0.25);
    border: 1px solid rgba(0, 229, 255, 0.4);
    transform: translateX(16px);
    animation: dc-build-chatbot-bubble-in-right 0.4s ease forwards;
}

@keyframes dc-build-chatbot-bubble-in-right { to { opacity: 1; transform: translateX(0); } }

.dc-build-chatbot-bubble.is-bot {
    width: 136px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transform: translateX(-16px);
    position: absolute;
    inset: 0 auto 0 0;
    animation: dc-build-chatbot-bubble-in-left 0.4s ease forwards;
}

@keyframes dc-build-chatbot-bubble-in-left { to { opacity: 1; transform: translateX(0); } }

.dc-build-chatbot-typing {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    width: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 0 12px;
    opacity: 0;
    animation: dc-build-chatbot-typing-show 1.1s ease forwards;
}

@keyframes dc-build-chatbot-typing-show {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; }
}

.dc-build-chatbot-typing-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.7);
    animation: dc-build-chatbot-typing-bounce 0.9s ease-in-out infinite;
}

.dc-build-chatbot-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.dc-build-chatbot-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes dc-build-chatbot-typing-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(-3px); opacity: 1; }
}

/* --- Exchange 1 timing --- */
.dc-build-chatbot-row-1 .dc-build-chatbot-bubble.is-user { animation-delay: 0.4s; }
.dc-build-chatbot-row-2 .dc-build-chatbot-typing { animation-delay: 0.9s; }
.dc-build-chatbot-row-2 .dc-build-chatbot-bubble.is-bot { animation-delay: 1.9s; }

/* --- Exchange 2 timing --- */
.dc-build-chatbot-row-3 .dc-build-chatbot-bubble.is-user { animation-delay: 2.3s; }
.dc-build-chatbot-row-4 .dc-build-chatbot-typing { animation-delay: 2.8s; }
.dc-build-chatbot-row-4 .dc-build-chatbot-bubble.is-bot { animation-delay: 3.8s; }

@media (prefers-reduced-motion: reduce) {
    .dc-build-chatbot-panel { animation: none; opacity: 1; }
    .dc-build-chatbot-avatar { animation: none; }
    .dc-build-chatbot-bubble.is-user,
    .dc-build-chatbot-bubble.is-bot { animation: none; opacity: 1; transform: translateX(0); }
    .dc-build-chatbot-typing { animation: none; opacity: 0; }
    .dc-build-chatbot-typing-dot { animation: none; opacity: 0.7; }
}

@media (max-width: 900px) {
    .dc-build-chatbot-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-chatbot-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-chatbot-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-chatbot-stage {
        transform: scale(0.75);
    }
}

/* ===== STORE / ADD-TO-CART / CHECKOUT (Build-scoped) — .dc-build-ecom-* =====
   Hero visual for /build/ecommerce-development — a product grid fades in,
   a small "fly" dot leaves the top-right product card and travels up into
   a cart badge in the header as its count ticks 1 -> 2, then an "Order
   Placed" pill glows in at the end — reading as browse -> add to cart ->
   checkout. Distinct in kind from every prior Build hero (no window,
   dashboard, panel, track, block-grid, phone, hub, or chat bubbles — this
   is a shopping/cart flow). Same 400x340 base and 0.857/0.75
   scale-whole-unit technique. Reuses the shared .dc-build-glow backdrop
   and the .dc-build-badge-in / .dc-build-badge-glow keyframes already
   defined above for the final confirmation pill. */
.dc-build-ecom-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-ecom-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-build-ecom-panel {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: dc-build-ecom-panel-in 0.4s ease forwards;
    animation-delay: 0.05s;
}

@keyframes dc-build-ecom-panel-in { to { opacity: 1; } }

.dc-build-ecom-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 29px;
    padding: 0 11px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-build-ecom-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.5);
}

.dc-build-ecom-cart {
    position: relative;
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.18);
    border: 1px solid rgba(0, 229, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-white, #fff);
}

.dc-build-ecom-cart-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-ecom-cart-count-1 { animation: dc-build-ecom-count-1-out 0.25s ease forwards; animation-delay: 1.5s; }
.dc-build-ecom-cart-count-2 { opacity: 0; animation: dc-build-ecom-count-2-in 0.25s ease forwards; animation-delay: 1.5s; }

@keyframes dc-build-ecom-count-1-out { to { opacity: 0; } }
@keyframes dc-build-ecom-count-2-in { to { opacity: 1; } }

.dc-build-ecom-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 16px;
}

.dc-build-ecom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.dc-build-ecom-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    animation: dc-build-ecom-card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dc-build-ecom-card-in { to { opacity: 1; transform: translateY(0) scale(1); } }

.dc-build-ecom-card-1 { animation-delay: 0.3s; }
.dc-build-ecom-card-2 { animation-delay: 0.45s; }
.dc-build-ecom-card-3 { animation-delay: 0.6s; }
.dc-build-ecom-card-4 { animation-delay: 0.75s; }

.dc-build-ecom-card-img {
    height: 34px;
    border-radius: 6px;
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid rgba(0, 229, 255, 0.25);
}

.dc-build-ecom-card-price {
    width: 55%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.dc-build-ecom-fly {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--accent-color);
    opacity: 0;
    animation: dc-build-ecom-fly-out 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 1.05s;
}

@keyframes dc-build-ecom-fly-out {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(70px, -60px) scale(0.4); }
}

.dc-build-ecom-checkout {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(13, 25, 43, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 8px 20px -6px rgba(0, 229, 255, 0.35);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-white, #fff);
    opacity: 0;
    transform: translateY(8px) scale(0.85);
    animation: dc-build-badge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-badge-glow 2.4s ease-in-out infinite;
    animation-delay: 1.9s, 2.4s;
}

.dc-build-ecom-checkout-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dc-build-ecom-panel { animation: none; opacity: 1; }
    .dc-build-ecom-card { animation: none; opacity: 1; transform: translateY(0) scale(1); }
    .dc-build-ecom-fly { animation: none; opacity: 0; }
    .dc-build-ecom-cart-count-1 { animation: none; opacity: 0; }
    .dc-build-ecom-cart-count-2 { animation: none; opacity: 1; }
    .dc-build-ecom-checkout { animation: none; opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
    .dc-build-ecom-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-ecom-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-ecom-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-ecom-stage {
        transform: scale(0.75);
    }
}

/* ===== CONTENT EDITOR -> LIVE PAGE (Build-scoped) — .dc-build-cms-* =====
   Hero visual for /build/cms-development — a split panel: a small block
   palette (text / image / button chips) on the left, a live page preview
   on the right. Each block "flies" from the palette into the preview,
   arriving as its matching preview row fills in — text, then image, then
   button — ending with a "Published" pill glowing in. Reads as build-a-
   page-visually, distinct from every prior Build hero (no window,
   dashboard, panel-with-single-content-type, track, block-grid, phone,
   hub, chat, or cart flow — this is an editor-to-live-page flow with two
   columns). Same 400x340 base and 0.857/0.75 scale-whole-unit technique.
   Reuses the shared .dc-build-glow backdrop and the .dc-build-badge-in /
   .dc-build-badge-glow keyframes for the final Published pill. The
   fly-then-fill technique reuses the same idea as the e-commerce page's
   cart-count swap, applied to three block types instead of one counter. */
.dc-build-cms-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-cms-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-build-cms-panel {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    opacity: 0;
    animation: dc-build-cms-panel-in 0.4s ease forwards;
    animation-delay: 0.05s;
}

@keyframes dc-build-cms-panel-in { to { opacity: 1; } }

.dc-build-cms-editor {
    position: relative;
    width: 96px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 16px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-build-cms-chip {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    transform: translateX(-8px);
    animation: dc-build-cms-chip-in 0.35s ease forwards;
}

@keyframes dc-build-cms-chip-in { to { opacity: 1; transform: translateX(0); } }

.dc-build-cms-chip-text { height: 14px; width: 100%; animation-delay: 0.3s; }
.dc-build-cms-chip-image { height: 34px; width: 100%; animation-delay: 0.45s; }
.dc-build-cms-chip-button { height: 16px; width: 60%; border-radius: 999px; background: rgba(0, 229, 255, 0.18); border-color: rgba(0, 229, 255, 0.35); animation-delay: 0.6s; }

.dc-build-cms-preview {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 18px 16px;
}

.dc-build-cms-preview-row {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.14);
}

.dc-build-cms-preview-row.is-filled {
    animation: dc-build-cms-row-fill 0.3s ease forwards;
}

@keyframes dc-build-cms-row-fill {
    to {
        background: rgba(0, 229, 255, 0.14);
        border: 1px solid rgba(0, 229, 255, 0.4);
    }
}

.dc-build-cms-preview-text { height: 10px; width: 85%; }
.dc-build-cms-preview-text.is-filled { animation-delay: 1.3s; }

.dc-build-cms-preview-image { height: 60px; }
.dc-build-cms-preview-image.is-filled { animation-delay: 1.9s; }

.dc-build-cms-preview-button { height: 18px; width: 45%; border-radius: 999px; }
.dc-build-cms-preview-button.is-filled { animation-delay: 2.5s; }

.dc-build-cms-fly {
    position: absolute;
    top: 50%;
    left: 96px;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--accent-color);
    opacity: 0;
    animation: dc-build-cms-fly-across 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes dc-build-cms-fly-across {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(90px, 6px) scale(0.5); }
}

.dc-build-cms-fly-1 { animation-delay: 0.9s; top: 26%; }
.dc-build-cms-fly-2 { animation-delay: 1.5s; top: 50%; }
.dc-build-cms-fly-3 { animation-delay: 2.1s; top: 76%; }

.dc-build-cms-published {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: rgba(13, 25, 43, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 8px 20px -6px rgba(0, 229, 255, 0.35);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-white, #fff);
    opacity: 0;
    transform: translateY(8px) scale(0.85);
    animation: dc-build-badge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-badge-glow 2.4s ease-in-out infinite;
    animation-delay: 2.9s, 3.4s;
}

.dc-build-cms-published-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dc-build-cms-panel { animation: none; opacity: 1; }
    .dc-build-cms-chip { animation: none; opacity: 1; transform: translateX(0); }
    .dc-build-cms-fly { animation: none; opacity: 0; }
    .dc-build-cms-preview-row.is-filled { animation: none; background: rgba(0, 229, 255, 0.14); border: 1px solid rgba(0, 229, 255, 0.4); }
    .dc-build-cms-published { animation: none; opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
    .dc-build-cms-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-cms-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-cms-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-cms-stage {
        transform: scale(0.75);
    }
}

/* ===== ASSISTANT-INTO-WORKSPACE (Build-scoped) — .dc-build-assistant-* =====
   Hero visual for /build/ai-assistants — a workspace split in two: your
   document on the left (static content lines, already there), a prompt +
   a single pulsing orb on the right. The orb "thinks" (pulse continues,
   then its border resolves solid), and only THEN does a summary block
   grow in on the LEFT, inside the document, followed by suggestion chips
   — the result visibly crossing from the assistant's side into the work
   itself, then a "Done" glow. Deliberately sparse on the assistant side
   (prompt + one orb, nothing else) so it reads as fundamentally different
   from both sibling AI pages: no radiating hub/tool-chips/task-checklist
   (that's .dc-build-ai-*, AI Agents) and no back-and-forth message
   bubbles (that's .dc-build-chatbot-*, AI Chatbot) — this is one AI
   producing output INTO a document, which is the whole point of an
   internal productivity assistant. Same 400x340 base and 0.857/0.75
   scale-whole-unit technique. Reuses the shared .dc-build-glow backdrop
   and the .dc-build-badge-in / .dc-build-badge-glow keyframes for the
   final Done pill. */
.dc-build-assistant-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-assistant-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-build-assistant-panel {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    opacity: 0;
    animation: dc-build-assistant-panel-in 0.4s ease forwards;
    animation-delay: 0.05s;
}

@keyframes dc-build-assistant-panel-in { to { opacity: 1; } }

.dc-build-assistant-doc {
    position: relative;
    flex: 1.3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 18px 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-build-assistant-line {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
    opacity: 0;
    transform: translateY(4px);
    animation: dc-build-assistant-line-in 0.35s ease forwards;
}

@keyframes dc-build-assistant-line-in { to { opacity: 1; transform: translateY(0); } }

.dc-build-assistant-line-1 { width: 90%; animation-delay: 0.2s; }
.dc-build-assistant-line-2 { width: 75%; animation-delay: 0.32s; }
.dc-build-assistant-line-3 { width: 82%; animation-delay: 0.44s; }
.dc-build-assistant-line-4 { width: 60%; animation-delay: 0.56s; margin-bottom: 4px; }

.dc-build-assistant-summary {
    height: 30px;
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.05);
    border: 1px dashed rgba(0, 229, 255, 0.25);
    opacity: 0;
    transform: scaleY(0.5);
    transform-origin: top;
    animation: dc-build-assistant-summary-in 0.4s ease forwards;
    animation-delay: 1.6s;
}

@keyframes dc-build-assistant-summary-in {
    to {
        opacity: 1;
        transform: scaleY(1);
        background: rgba(0, 229, 255, 0.14);
        border: 1px solid rgba(0, 229, 255, 0.4);
    }
}

.dc-build-assistant-chips {
    display: flex;
    gap: 6px;
}

.dc-build-assistant-chip {
    height: 14px;
    width: 30%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    transform: translateY(4px) scale(0.9);
    animation: dc-build-assistant-chip-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dc-build-assistant-chip-in { to { opacity: 1; transform: translateY(0) scale(1); } }

.dc-build-assistant-chip-1 { animation-delay: 2s; }
.dc-build-assistant-chip-2 { animation-delay: 2.15s; }
.dc-build-assistant-chip-3 { animation-delay: 2.3s; width: 22%; }

.dc-build-assistant-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px;
}

.dc-build-assistant-prompt {
    width: 80%;
    height: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    transform: translateY(-6px);
    animation: dc-build-assistant-prompt-in 0.35s ease forwards;
    animation-delay: 0.4s;
}

@keyframes dc-build-assistant-prompt-in { to { opacity: 1; transform: translateY(0); } }

.dc-build-assistant-orb {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.4), rgba(0, 229, 255, 0.08) 70%);
    border: 1.5px solid rgba(0, 229, 255, 0.5);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-build-assistant-orb-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-assistant-orb-pulse 1.6s ease-in-out infinite,
               dc-build-assistant-orb-resolve 0.3s ease forwards;
    animation-delay: 0.7s, 0.9s, 1.4s;
}

@keyframes dc-build-assistant-orb-in { to { opacity: 1; transform: scale(1); } }
@keyframes dc-build-assistant-orb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
    50%      { box-shadow: 0 0 0 10px rgba(0, 229, 255, 0); }
}
@keyframes dc-build-assistant-orb-resolve {
    to { border-color: rgba(0, 229, 255, 0.85); background: radial-gradient(circle, rgba(0, 229, 255, 0.55), rgba(0, 229, 255, 0.12) 70%); }
}

.dc-build-assistant-done {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: rgba(13, 25, 43, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 8px 20px -6px rgba(0, 229, 255, 0.35);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-white, #fff);
    opacity: 0;
    transform: translateY(8px) scale(0.85);
    animation: dc-build-badge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-badge-glow 2.4s ease-in-out infinite;
    animation-delay: 2.6s, 3.1s;
}

.dc-build-assistant-done-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dc-build-assistant-panel { animation: none; opacity: 1; }
    .dc-build-assistant-line { animation: none; opacity: 1; transform: translateY(0); }
    .dc-build-assistant-summary { animation: none; opacity: 1; transform: scaleY(1); background: rgba(0, 229, 255, 0.14); border: 1px solid rgba(0, 229, 255, 0.4); }
    .dc-build-assistant-chip { animation: none; opacity: 1; transform: translateY(0) scale(1); }
    .dc-build-assistant-prompt { animation: none; opacity: 1; transform: translateY(0); }
    .dc-build-assistant-orb { animation: none; opacity: 1; transform: scale(1); border-color: rgba(0, 229, 255, 0.85); }
    .dc-build-assistant-done { animation: none; opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
    .dc-build-assistant-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-assistant-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-assistant-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-assistant-stage {
        transform: scale(0.75);
    }
}

/* ===== AUTOMATION PIPELINE (Build-scoped) — .dc-build-flow-* =====
   Hero visual for /build/workflow-automation — a straight left-to-right
   chain of five stops (trigger, step, branch, step, action/done) joined
   by four connector segments. Each connector draws in turn as a packet
   dot travels the full row, lighting its destination node on arrival;
   the packet then loops continuously to read as "runs automatically,
   repeatedly" rather than a one-off sequence. No bordered glass panel at
   all — like Custom Software's block-grid, the pipeline floats directly
   on the stage over the ambient glow, which keeps it structurally unlike
   every panel-based Build hero (SaaS, AI Agents, AI Assistant, Chatbot,
   CMS, E-commerce). Also unlike API's radial hub-and-spoke (this is a
   straight line, not a circle) and unlike AI Agents' single central node
   with a vertical task list beneath it. Different node shapes (circle /
   rounded-square / diamond / rounded-square / circle) read as a real
   process line, not a repeated unit. Same 400x340 base and 0.857/0.75
   scale-whole-unit technique. Reuses the shared .dc-build-glow backdrop. */
.dc-build-flow-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-flow-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-flow-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 340px;
}

.dc-build-flow-connector {
    position: relative;
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 2px;
}

.dc-build-flow-connector-fill {
    position: absolute;
    inset: 0;
    background: rgba(0, 229, 255, 0.65);
    transform-origin: left;
    transform: scaleX(0);
    animation: dc-build-flow-connector-grow 0.35s ease forwards;
}

@keyframes dc-build-flow-connector-grow { to { transform: scaleX(1); } }

.dc-build-flow-connector-1 .dc-build-flow-connector-fill { animation-delay: 0.5s; }
.dc-build-flow-connector-2 .dc-build-flow-connector-fill { animation-delay: 1s; }
.dc-build-flow-connector-3 .dc-build-flow-connector-fill { animation-delay: 1.5s; }
.dc-build-flow-connector-4 .dc-build-flow-connector-fill { animation-delay: 2s; }

.dc-build-flow-node {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: rgba(13, 25, 43, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    animation: dc-build-flow-node-fill 0.35s ease forwards;
}

@keyframes dc-build-flow-node-fill {
    to {
        background: rgba(0, 229, 255, 0.16);
        border-color: rgba(0, 229, 255, 0.6);
        box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.4);
    }
}

.dc-build-flow-node-trigger {
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.6);
    animation: dc-build-flow-trigger-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.15s;
}

@keyframes dc-build-flow-trigger-in {
    to {
        opacity: 1;
        transform: scale(1);
        background: rgba(0, 229, 255, 0.16);
        border-color: rgba(0, 229, 255, 0.6);
        box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.4);
    }
}

.dc-build-flow-node-step {
    border-radius: 8px;
}

.dc-build-flow-node-step-1 { animation-delay: 0.85s; }
.dc-build-flow-node-step-2 { animation-delay: 1.85s; }

.dc-build-flow-node-branch {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    transform: rotate(45deg);
    animation-delay: 1.35s;
}

.dc-build-flow-node-action {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    animation-delay: 2.35s;
    animation-name: dc-build-flow-action-fill;
}

@keyframes dc-build-flow-action-fill {
    to {
        background: rgba(0, 229, 255, 0.22);
        border-color: var(--accent-color);
        box-shadow: 0 0 16px rgba(0, 229, 255, 0.6);
    }
}

.dc-build-flow-packet {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: dc-build-flow-packet-travel 3.2s ease-in-out infinite;
    animation-delay: 0.3s;
}

@keyframes dc-build-flow-packet-travel {
    0%   { opacity: 0; transform: translate(-50%, -50%); }
    4%   { opacity: 1; transform: translate(-50%, -50%); }
    92%  { opacity: 1; transform: translate(calc(-50% + 307px), -50%); }
    100% { opacity: 0; transform: translate(calc(-50% + 307px), -50%); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-build-flow-connector-fill { animation: none; transform: scaleX(1); }
    .dc-build-flow-node { animation: none; background: rgba(0, 229, 255, 0.16); border-color: rgba(0, 229, 255, 0.6); }
    .dc-build-flow-node-trigger { animation: none; opacity: 1; transform: scale(1); background: rgba(0, 229, 255, 0.16); border-color: rgba(0, 229, 255, 0.6); }
    .dc-build-flow-node-branch { transform: rotate(45deg); }
    .dc-build-flow-node-action { background: rgba(0, 229, 255, 0.22); border-color: var(--accent-color); }
    .dc-build-flow-packet { animation: none; opacity: 0; }
}

@media (max-width: 900px) {
    .dc-build-flow-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-flow-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-flow-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-flow-stage {
        transform: scale(0.75);
    }
}

/* ===== PROMPT -> GENERATION CORE -> OUTPUTS (Build-scoped) — .dc-build-genai-* =====
   Hero visual for /build/generative-ai-solutions — three columns: a small
   prompt on the left, a swirling particle "generation core" in the
   center (five particles orbiting continuously on a rotating ring, the
   core itself pulsing throughout — the one genuinely new visual idea
   introduced here, not reused from any sibling AI page), and three
   generated outputs on the right (text lines, an asset block, a code
   block) that materialize one at a time, each preceded by a small
   particle flying out from the core. Distinct from every prior Build
   hero, in particular the other four AI/automation visuals: not the
   single node + task checklist (AI Agents), not the two-column doc/orb
   workspace (AI Assistants), not chat bubbles (AI Chatbot), and not the
   linear pipeline (Workflow Automation) — this is a three-way input ->
   core -> multiple-outputs composition, and the only one with a
   continuously spinning ring. Same 400x340 base and 0.857/0.75
   scale-whole-unit technique, applied to the -stage element (not an
   inner row — the Workflow Automation page's hero originally scaled the
   wrong element and had to be corrected, so this one scales .dc-build-
   genai-stage directly from the start). Reuses the shared .dc-build-glow
   backdrop. */
.dc-build-genai-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-genai-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
}

.dc-build-genai-panel {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    align-items: center;
    opacity: 0;
    animation: dc-build-genai-panel-in 0.4s ease forwards;
    animation-delay: 0.05s;
}

@keyframes dc-build-genai-panel-in { to { opacity: 1; } }

.dc-build-genai-input {
    flex-shrink: 0;
    width: 70px;
    display: flex;
    justify-content: center;
    padding: 0 8px;
}

.dc-build-genai-input-bar {
    width: 100%;
    height: 20px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    transform: translateX(-6px);
    animation: dc-build-genai-input-in 0.35s ease forwards;
    animation-delay: 0.2s;
}

@keyframes dc-build-genai-input-in { to { opacity: 1; transform: translateX(0); } }

.dc-build-genai-core {
    position: relative;
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-genai-core-center {
    position: relative;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.5), rgba(0, 229, 255, 0.1) 70%);
    border: 1.5px solid rgba(0, 229, 255, 0.6);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-build-genai-core-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-genai-core-pulse 1.8s ease-in-out infinite;
    animation-delay: 0.4s, 0.7s;
}

@keyframes dc-build-genai-core-in { to { opacity: 1; transform: scale(1); } }
@keyframes dc-build-genai-core-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
    50%      { box-shadow: 0 0 0 12px rgba(0, 229, 255, 0); }
}

.dc-build-genai-particle-ring {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    animation: dc-build-genai-ring-in 0.4s ease forwards, dc-build-genai-ring-spin 7s linear infinite;
    animation-delay: 0.55s, 0.55s;
}

@keyframes dc-build-genai-ring-in { to { opacity: 1; } }
@keyframes dc-build-genai-ring-spin { to { transform: rotate(360deg); } }

.dc-build-genai-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.7);
    animation: dc-build-genai-particle-twinkle 1.6s ease-in-out infinite;
}

.dc-build-genai-particle-1 { transform: translate(-50%, -50%) rotate(0deg) translateX(30px); animation-delay: 0s; }
.dc-build-genai-particle-2 { transform: translate(-50%, -50%) rotate(72deg) translateX(30px); animation-delay: 0.2s; }
.dc-build-genai-particle-3 { transform: translate(-50%, -50%) rotate(144deg) translateX(30px); animation-delay: 0.4s; }
.dc-build-genai-particle-4 { transform: translate(-50%, -50%) rotate(216deg) translateX(30px); animation-delay: 0.6s; }
.dc-build-genai-particle-5 { transform: translate(-50%, -50%) rotate(288deg) translateX(30px); animation-delay: 0.8s; }

@keyframes dc-build-genai-particle-twinkle {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

.dc-build-genai-outputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 16px 18px 16px 8px;
}

.dc-build-genai-output {
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    transform: translateX(8px);
    animation: dc-build-genai-output-in 0.4s ease forwards;
}

@keyframes dc-build-genai-output-in { to { opacity: 1; transform: translateX(0); } }

.dc-build-genai-output-text { animation-delay: 1.3s; }
.dc-build-genai-output-asset { animation-delay: 1.9s; }
.dc-build-genai-output-code { animation-delay: 2.5s; }

.dc-build-genai-output-line {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.18);
}

.dc-build-genai-output-line.is-short { width: 60%; }

.dc-build-genai-output-asset .dc-build-genai-output-line {
    height: 28px;
    border-radius: 6px;
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid rgba(0, 229, 255, 0.3);
}

.dc-build-genai-output-code .dc-build-genai-output-line {
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 229, 255, 0.32);
}

.dc-build-genai-output-code .dc-build-genai-output-line.is-short { width: 40%; }

.dc-build-genai-flow {
    position: absolute;
    top: 50%;
    left: 154px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.7);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: dc-build-genai-flow-out 0.4s ease forwards;
}

@keyframes dc-build-genai-flow-out {
    0%   { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(calc(-50% + 70px), -50%); }
}

.dc-build-genai-flow-1 { top: 30%; animation-delay: 1.05s; }
.dc-build-genai-flow-2 { top: 55%; animation-delay: 1.65s; }
.dc-build-genai-flow-3 { top: 80%; animation-delay: 2.25s; }

@media (prefers-reduced-motion: reduce) {
    .dc-build-genai-panel { animation: none; opacity: 1; }
    .dc-build-genai-input-bar { animation: none; opacity: 1; transform: translateX(0); }
    .dc-build-genai-core-center { animation: none; opacity: 1; transform: scale(1); }
    .dc-build-genai-particle-ring { animation: none; opacity: 1; }
    .dc-build-genai-particle { animation: none; opacity: 0.7; }
    .dc-build-genai-output { animation: none; opacity: 1; transform: translateX(0); }
    .dc-build-genai-flow { animation: none; opacity: 0; }
}

@media (max-width: 900px) {
    .dc-build-genai-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-genai-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-genai-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-genai-stage {
        transform: scale(0.75);
    }
}

/* ===== AI PLUGGING INTO AN EXISTING APP (Build-scoped) — .dc-build-aiint-* =====
   Hero visual for /build/ai-integration — a plain existing app panel (neutral
   grey rows, no cyan) sits under a small external "AI" module chip perched
   at its top-right corner. A connector draws from the module down into the
   panel, then the panel responds: one existing card lights up neutral-to-
   cyan and gains a small AI badge dot, a brand-new "AI suggestion" row
   grows in (cyan from the start, since it didn't exist before), and a soft
   glow spreads across the whole panel at the end. This is the only Build
   hero built around a before/after transformation of existing content
   rather than assembling something from nothing — matching the "we add AI
   into what you already have, we don't rebuild it" pitch, and distinct
   from every other AI/automation visual (no thinking node, no chat
   bubbles, no split workspace, no pipeline, no particle core). Same
   400x340 base and 0.857/0.75 scale-whole-unit technique, applied to the
   -stage element. Reuses the shared .dc-build-glow backdrop and
   .dc-build-dot. */
.dc-build-aiint-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-aiint-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-aiint-scene {
    position: relative;
    z-index: 1;
    width: 320px;
    height: 260px;
}

.dc-build-aiint-panel {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: dc-build-aiint-panel-in 0.4s ease forwards;
    animation-delay: 0.05s;
}

@keyframes dc-build-aiint-panel-in { to { opacity: 1; } }

.dc-build-aiint-topbar {
    flex-shrink: 0;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-build-aiint-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 16px;
}

.dc-build-aiint-row {
    position: relative;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    transform: translateY(4px);
    animation: dc-build-aiint-row-in 0.35s ease forwards;
}

@keyframes dc-build-aiint-row-in { to { opacity: 1; transform: translateY(0); } }

.dc-build-aiint-row-1 { animation-delay: 0.2s; }
.dc-build-aiint-row-2 { animation-delay: 0.32s; }

.dc-build-aiint-row-2.is-lit {
    animation: dc-build-aiint-row-in 0.35s ease forwards, dc-build-aiint-row-light 0.4s ease forwards;
    animation-delay: 0.32s, 1.3s;
}

@keyframes dc-build-aiint-row-light {
    to {
        background: rgba(0, 229, 255, 0.14);
        border-color: rgba(0, 229, 255, 0.45);
        box-shadow: 0 0 12px -4px rgba(0, 229, 255, 0.4);
    }
}

.dc-build-aiint-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(13, 25, 43, 0.95);
    border: 1.5px solid rgba(0, 229, 255, 0.6);
    opacity: 0;
    transform: scale(0.5);
    animation: dc-build-aiint-badge-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.5s;
}

@keyframes dc-build-aiint-badge-in {
    to {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.6);
    }
}

.dc-build-aiint-row-new {
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px dashed rgba(0, 229, 255, 0.3);
    display: flex;
    align-items: center;
    padding: 0 12px;
    opacity: 0;
    transform: scaleY(0.4);
    transform-origin: top;
    animation: dc-build-aiint-new-in 0.4s ease forwards;
    animation-delay: 1.9s;
}

@keyframes dc-build-aiint-new-in {
    to {
        opacity: 1;
        transform: scaleY(1);
        background: rgba(0, 229, 255, 0.16);
        border: 1px solid rgba(0, 229, 255, 0.45);
    }
}

.dc-build-aiint-row-new-line {
    height: 6px;
    width: 65%;
    border-radius: 3px;
    background: rgba(0, 229, 255, 0.45);
}

.dc-build-aiint-module {
    position: absolute;
    top: -16px;
    right: 26px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.4), rgba(0, 229, 255, 0.1) 70%);
    border: 1.5px solid rgba(0, 229, 255, 0.6);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-build-aiint-module-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-aiint-module-pulse 2s ease-in-out infinite;
    animation-delay: 0.55s, 0.9s;
}

@keyframes dc-build-aiint-module-in { to { opacity: 1; transform: scale(1); } }
@keyframes dc-build-aiint-module-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
    50%      { box-shadow: 0 0 0 10px rgba(0, 229, 255, 0); }
}

.dc-build-aiint-connector {
    position: absolute;
    top: 3px;
    right: 44px;
    width: 2px;
    height: 26px;
    background: rgba(0, 229, 255, 0.5);
    transform-origin: top;
    transform: scaleY(0) rotate(28deg);
    animation: dc-build-aiint-connector-draw 0.4s ease forwards;
    animation-delay: 0.85s;
}

@keyframes dc-build-aiint-connector-draw { to { transform: scaleY(1) rotate(28deg); } }

.dc-build-aiint-spread {
    position: absolute;
    inset: -20px;
    z-index: 0;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.16), transparent 70%);
    opacity: 0;
    animation: dc-build-aiint-spread-in 1s ease forwards;
    animation-delay: 2.3s;
}

@keyframes dc-build-aiint-spread-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .dc-build-aiint-panel { animation: none; opacity: 1; }
    .dc-build-aiint-row { animation: none; opacity: 1; transform: translateY(0); }
    .dc-build-aiint-row-2.is-lit { animation: none; opacity: 1; transform: translateY(0); background: rgba(0, 229, 255, 0.14); border-color: rgba(0, 229, 255, 0.45); }
    .dc-build-aiint-badge { animation: none; opacity: 1; transform: scale(1); }
    .dc-build-aiint-row-new { animation: none; opacity: 1; transform: scaleY(1); background: rgba(0, 229, 255, 0.16); border-color: rgba(0, 229, 255, 0.45); }
    .dc-build-aiint-module { animation: none; opacity: 1; transform: scale(1); }
    .dc-build-aiint-connector { animation: none; transform: scaleY(1) rotate(28deg); }
    .dc-build-aiint-spread { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-build-aiint-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-aiint-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-aiint-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-aiint-stage {
        transform: scale(0.75);
    }
}

/* ===== MESSY DATA -> FUNNEL -> STRUCTURED STORE (Build-scoped) — .dc-build-data-* =====
   Hero visual for /build/data-engineering — six small particles stream
   continuously (infinite loop, staggered, each its own duration) from a
   scattered "messy data" zone on the left, through a pulsing funnel gate
   in the middle where they turn from grey to cyan, into a 3x3 grid on the
   right that fills in, one cell at a time, until the whole store glows
   "full". Deliberately a MANY-PARTICLES continuous stream through a single
   choke point, not a sequence of discrete named stops — the opposite
   structure from Workflow Automation's five-node linear pipeline, even
   though both are Build/automation-adjacent pages. Also distinct from
   Generative AI's five-particle orbiting ring (this stream travels in a
   straight line, not a circle, and particles are consumed by a filling
   grid rather than flying out to separate output blocks). Same 400x340
   base and 0.857/0.75 scale-whole-unit technique, applied to the -stage
   element. Reuses the shared .dc-build-glow backdrop. */
.dc-build-data-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-data-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-data-scene {
    position: relative;
    z-index: 1;
    width: 320px;
    height: 190px;
}

.dc-build-data-particle {
    position: absolute;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    opacity: 0;
    animation: dc-build-data-stream var(--dur, 2.8s) linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes dc-build-data-stream {
    0%   { opacity: 0; transform: translateX(0); background: rgba(255, 255, 255, 0.4); }
    8%   { opacity: 1; }
    44%  { background: rgba(255, 255, 255, 0.4); }
    50%  { background: var(--accent-color); }
    92%  { opacity: 1; transform: translateX(300px); background: var(--accent-color); }
    100% { opacity: 0; transform: translateX(300px); }
}

.dc-build-data-particle-1 { top: 18%; --dur: 2.6s; --delay: 0s; }
.dc-build-data-particle-2 { top: 34%; --dur: 3.1s; --delay: 0.4s; }
.dc-build-data-particle-3 { top: 50%; --dur: 2.9s; --delay: 0.8s; }
.dc-build-data-particle-4 { top: 66%; --dur: 3.3s; --delay: 1.2s; }
.dc-build-data-particle-5 { top: 82%; --dur: 2.7s; --delay: 1.6s; }
.dc-build-data-particle-6 { top: 46%; --dur: 3s; --delay: 2s; }

.dc-build-data-gate {
    position: absolute;
    top: 50%;
    left: 148px;
    width: 3px;
    height: 60px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: rgba(0, 229, 255, 0.4);
    animation: dc-build-data-gate-pulse 2s ease-in-out infinite;
    animation-delay: 0.3s;
}

@keyframes dc-build-data-gate-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(0, 229, 255, 0.4); opacity: 0.7; }
    50%      { box-shadow: 0 0 16px rgba(0, 229, 255, 0.8); opacity: 1; }
}

.dc-build-data-store {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 90px;
    height: 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
}

.dc-build-data-cell {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    animation: dc-build-data-cell-fill 0.3s ease forwards;
}

@keyframes dc-build-data-cell-fill {
    to {
        background: rgba(0, 229, 255, 0.28);
        border: 1px solid rgba(0, 229, 255, 0.55);
    }
}

.dc-build-data-cell-1 { animation-delay: 1.1s; }
.dc-build-data-cell-2 { animation-delay: 1.35s; }
.dc-build-data-cell-3 { animation-delay: 1.6s; }
.dc-build-data-cell-4 { animation-delay: 1.85s; }
.dc-build-data-cell-5 { animation-delay: 2.1s; }
.dc-build-data-cell-6 { animation-delay: 2.35s; }
.dc-build-data-cell-7 { animation-delay: 2.6s; }
.dc-build-data-cell-8 { animation-delay: 2.85s; }
.dc-build-data-cell-9 { animation-delay: 3.1s; }

.dc-build-data-store-glow {
    position: absolute;
    inset: -14px;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.22), transparent 70%);
    opacity: 0;
    animation: dc-build-data-store-glow-in 0.8s ease forwards;
    animation-delay: 3.3s;
}

@keyframes dc-build-data-store-glow-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .dc-build-data-particle { animation: none; opacity: 0; }
    .dc-build-data-gate { animation: none; box-shadow: 0 0 10px rgba(0, 229, 255, 0.6); opacity: 1; }
    .dc-build-data-cell { animation: none; background: rgba(0, 229, 255, 0.28); border: 1px solid rgba(0, 229, 255, 0.55); }
    .dc-build-data-store-glow { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-build-data-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-data-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-data-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-data-stage {
        transform: scale(0.75);
    }
}

/* ===== CHARTS DRAWING THEMSELVES (Build-scoped) — .dc-build-bi-* =====
   Hero visual for /build/bi-dashboards — a 2x2 grid of four independent
   chart widgets with NO surrounding dashboard chrome at all (no topbar,
   no sidebar) — deliberately unlike the SaaS page's dashboard-shell
   assembly (.dc-build-saas-*), which grows a bar chart as one element
   inside a browser-like app frame. Here the whole point is charts
   forming insight on their own: a bar chart grows bar-by-bar, a trend
   line draws left-to-right with a glowing current-point, a progress ring
   fills via an animated conic-gradient, and a big percentage counts up
   using a registered custom property + CSS counter() — a real digit
   animation, not a fake business number (it mirrors the ring's own fill
   percentage, so it reads as one illustrative metric, not a fabricated
   stat). Same 400x340 base and 0.857/0.75 scale-whole-unit technique,
   applied to the -stage element. Reuses the shared .dc-build-glow
   backdrop. Every animated value declares its finished state as the
   base/fallback (before any animation rule), so browsers without
   @property support — and prefers-reduced-motion — still render the
   correct final chart, just without the draw-in motion. */
.dc-build-bi-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-bi-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-bi-grid {
    position: relative;
    z-index: 1;
    width: 320px;
    height: 220px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
}

.dc-build-bi-widget {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 10px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(6px);
    animation: dc-build-bi-widget-in 0.4s ease forwards;
}

@keyframes dc-build-bi-widget-in { to { opacity: 1; transform: translateY(0); } }

.dc-build-bi-widget-bar { animation-delay: 0.15s; }
.dc-build-bi-widget-line { animation-delay: 0.3s; }
.dc-build-bi-widget-ring { animation-delay: 0.45s; }
.dc-build-bi-widget-count { animation-delay: 0.6s; }

/* --- Bar chart: grows bar by bar --- */
.dc-build-bi-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.dc-build-bi-bar {
    flex: 1;
    height: 100%;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, rgba(0, 229, 255, 0.5), rgba(0, 229, 255, 0.12));
    transform-origin: bottom;
    transform: scaleY(0);
    animation: dc-build-bi-bar-grow 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(1s + var(--n) * 0.12s);
}

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

/* --- Trend line: dots pop in left to right, segments draw between them --- */
.dc-build-bi-trend {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.dc-build-bi-trend-dot {
    position: relative;
    z-index: 1;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0;
    transform: scale(0.4);
    animation: dc-build-bi-dot-in 0.3s ease forwards;
    animation-delay: calc(1.1s + var(--n) * 0.18s);
}

.dc-build-bi-trend-dot.is-last {
    width: 8px;
    height: 8px;
    animation: dc-build-bi-dot-in 0.3s ease forwards, dc-build-bi-dot-pulse 1.8s ease-in-out infinite;
    animation-delay: calc(1.1s + var(--n) * 0.18s), 2.2s;
}

@keyframes dc-build-bi-dot-in { to { opacity: 1; transform: scale(1); } }
@keyframes dc-build-bi-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 229, 255, 0); }
}

/* --- Progress ring: conic-gradient fill animates via a registered
       custom property; the same 68% is the static base so unsupported
       browsers still render the finished ring. --- */
@property --dc-build-bi-ring-pct {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 68%;
}

.dc-build-bi-ring-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-bi-ring {
    --dc-build-bi-ring-pct: 68%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(var(--accent-color) var(--dc-build-bi-ring-pct), rgba(255, 255, 255, 0.1) 0);
    animation: dc-build-bi-ring-fill 1.1s ease forwards;
    animation-delay: 1.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes dc-build-bi-ring-fill {
    from { --dc-build-bi-ring-pct: 0%; }
    to   { --dc-build-bi-ring-pct: 68%; }
}

.dc-build-bi-ring-hole {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0d1b2b;
}

/* --- Count-up percentage: a registered integer custom property driving
       a CSS counter — mirrors the ring's own 68%, so it reads as one
       illustrative figure, never a fabricated business number. --- */
@property --dc-build-bi-num {
    syntax: '<integer>';
    inherits: false;
    initial-value: 68;
}

.dc-build-bi-count {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-bi-count-num {
    --dc-build-bi-num: 68;
    counter-reset: dc-build-bi-num var(--dc-build-bi-num);
    font-size: 26px;
    font-weight: 800;
    color: var(--accent-color);
    animation: dc-build-bi-count-up 1.4s ease-out forwards;
    animation-delay: 1.6s;
}

.dc-build-bi-count-num::after {
    content: counter(dc-build-bi-num) "%";
}

@keyframes dc-build-bi-count-up {
    from { --dc-build-bi-num: 0; }
    to   { --dc-build-bi-num: 68; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-build-bi-widget { animation: none; opacity: 1; transform: translateY(0); }
    .dc-build-bi-bar { animation: none; transform: scaleY(1); }
    .dc-build-bi-trend-dot { animation: none; opacity: 1; transform: scale(1); }
    .dc-build-bi-ring { animation: none; }
    .dc-build-bi-count-num { animation: none; }
}

@media (max-width: 900px) {
    .dc-build-bi-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-bi-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-bi-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-bi-stage {
        transform: scale(0.75);
    }
}

/* ===== SCHEMA / ER-DIAGRAM BUILDING (Build-scoped) — .dc-build-db-* =====
   Hero visual for /build/database-development — three table cards (each
   with a header bar and field rows, not blank blocks) appear one at a
   time in a triangular layout, then two relationship lines draw between
   specific field rows — like foreign keys forming — with small key-marker
   dots glowing at each connection point, ending with a soft glow across
   the whole connected schema. Distinct from every prior data-related
   Build hero: not Data Engineering's many-particle stream through a
   funnel into a filling grid, not BI's four independent chart widgets,
   and not Custom Software's plain uniform blocks-and-connectors bento
   grid (these cards carry real header+field structure and the lines
   connect specific rows, reading as an ER diagram, not generic modules
   assembling). Same 400x340 base and 0.857/0.75 scale-whole-unit
   technique, applied to the -stage element. Reuses the shared
   .dc-build-glow backdrop. */
.dc-build-db-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-db-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-db-scene {
    position: relative;
    z-index: 1;
    width: 320px;
    height: 230px;
}

.dc-build-db-schema-glow {
    position: absolute;
    inset: -20px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.18), transparent 70%);
    opacity: 0;
    animation: dc-build-db-glow-in 1s ease forwards;
    animation-delay: 2.4s;
}

@keyframes dc-build-db-glow-in { to { opacity: 1; } }

.dc-build-db-table {
    position: absolute;
    width: 116px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.85);
    animation: dc-build-db-table-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dc-build-db-table-in { to { opacity: 1; transform: scale(1); } }

.dc-build-db-table-a { top: 0; left: 0; animation-delay: 0.2s; }
.dc-build-db-table-b { top: 0; right: 0; animation-delay: 0.45s; }
.dc-build-db-table-c { bottom: 0; left: 50%; transform: translateX(-50%) scale(0.85); animation-delay: 0.7s; }

@keyframes dc-build-db-table-c-in { to { opacity: 1; transform: translateX(-50%) scale(1); } }
.dc-build-db-table-c { animation-name: dc-build-db-table-c-in; }

.dc-build-db-table-head {
    height: 18px;
    background: rgba(0, 229, 255, 0.16);
    border-bottom: 1px solid rgba(0, 229, 255, 0.3);
}

.dc-build-db-table-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.dc-build-db-table-row {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.18);
}

.dc-build-db-table-row.is-key {
    width: 55%;
    background: rgba(0, 229, 255, 0.4);
}

.dc-build-db-table-row.is-short { width: 65%; }

/* --- Relationship lines: draw between specific field rows --- */
.dc-build-db-link {
    position: absolute;
    height: 2px;
    background: rgba(0, 229, 255, 0.55);
    transform-origin: left center;
    transform: scaleX(0);
    animation: dc-build-db-link-draw 0.45s ease forwards;
}

@keyframes dc-build-db-link-draw { to { transform: scaleX(1); } }

.dc-build-db-link-ac {
    top: 47px;
    left: 58px;
    width: 96px;
    transform: rotate(53deg) scaleX(0);
    animation-delay: 1.05s;
}

@keyframes dc-build-db-link-ac-draw { to { transform: rotate(53deg) scaleX(1); } }
.dc-build-db-link-ac { animation-name: dc-build-db-link-ac-draw; }

.dc-build-db-link-bc {
    top: 47px;
    right: 58px;
    width: 96px;
    transform-origin: right center;
    transform: rotate(-53deg) scaleX(0);
    animation-delay: 1.65s;
}

@keyframes dc-build-db-link-bc-draw { to { transform: rotate(-53deg) scaleX(1); } }
.dc-build-db-link-bc { animation-name: dc-build-db-link-bc-draw; }

.dc-build-db-key {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
    opacity: 0;
    transform: scale(0.4);
    animation: dc-build-db-key-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dc-build-db-key-in { to { opacity: 1; transform: scale(1); } }

.dc-build-db-key-a { top: 43px; left: 54px; animation-delay: 1.45s; }
.dc-build-db-key-b { top: 43px; right: 54px; animation-delay: 2.05s; }
.dc-build-db-key-c { bottom: 47px; left: 50%; margin-left: -4px; animation-delay: 2.05s; }

@media (prefers-reduced-motion: reduce) {
    .dc-build-db-table { animation: none; opacity: 1; transform: scale(1); }
    .dc-build-db-table-c { transform: translateX(-50%) scale(1); }
    .dc-build-db-link-ac { animation: none; transform: rotate(53deg) scaleX(1); }
    .dc-build-db-link-bc { animation: none; transform: rotate(-53deg) scaleX(1); }
    .dc-build-db-key { animation: none; opacity: 1; transform: scale(1); }
    .dc-build-db-schema-glow { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
    .dc-build-db-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-db-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-db-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-db-stage {
        transform: scale(0.75);
    }
}

/* ===== SLOW -> FAST OPTIMIZATION (Build-scoped) — .dc-build-opt-* =====
   Hero visual for /build/software-optimization — the 18th and final Build
   page, and the only one built around a genuine BEFORE/AFTER transform of
   the SAME elements rather than something assembling or arriving from
   nothing: a speed-gauge needle starts pointing low ("slow"), a progress
   bar fills haltingly in visible jerky steps, and three content rows sit
   slightly tilted and offset ("cluttered") — then a diagonal light sweep
   crosses the panel once, and at that moment the needle swings up to
   "fast", the bar completes in one smooth glide, and the rows snap
   straight. Distinct from all 17 prior Build heroes: AI Integration
   transforms a UI by ADDING a new row into it; this transforms nothing by
   addition, only by improving the state of what's already there — the
   literal "existing software, made faster" pitch. Same 400x340 base and
   0.857/0.75 scale-whole-unit technique, applied to the -stage element.
   Reuses the shared .dc-build-glow backdrop and the .dc-build-badge-in /
   .dc-build-badge-glow keyframes for the final "Optimized" pill. The
   gauge/bar/rows all declare their FINISHED ("fast") state as the base,
   pre-animation declaration, so prefers-reduced-motion — which strips
   every animation below — renders the optimized end state directly. */
.dc-build-opt-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

.dc-build-opt-stage {
    position: relative;
    width: 400px;
    height: 340px;
    flex-shrink: 0;
    transform-origin: top center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-build-opt-panel {
    position: relative;
    z-index: 1;
    width: 280px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    opacity: 0;
    animation: dc-build-opt-panel-in 0.4s ease forwards;
    animation-delay: 0.05s;
}

@keyframes dc-build-opt-panel-in { to { opacity: 1; } }

/* --- Sweep: crosses the panel once, marking the optimize moment --- */
.dc-build-opt-sweep {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.dc-build-opt-sweep::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -30%;
    width: 40px;
    height: 140%;
    background: linear-gradient(100deg, transparent, rgba(0, 229, 255, 0.35), transparent);
    transform: translateX(-100px);
    animation: dc-build-opt-sweep-move 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 1.3s;
}

@keyframes dc-build-opt-sweep-move { to { transform: translateX(400px); } }

/* --- Speed gauge: a semicircle dial with a needle that swings up --- */
.dc-build-opt-gauge {
    position: relative;
    width: 96px;
    height: 48px;
    overflow: hidden;
}

.dc-build-opt-gauge-dial {
    position: absolute;
    inset: 0;
    border-radius: 96px 96px 0 0;
    border: 6px solid rgba(255, 255, 255, 0.12);
    border-bottom: none;
    box-sizing: border-box;
}

.dc-build-opt-gauge-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 40px;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(50deg);
    animation: dc-build-opt-needle-swing 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.6s;
}

@keyframes dc-build-opt-needle-swing {
    0%   { transform: translateX(-50%) rotate(-50deg); }
    100% { transform: translateX(-50%) rotate(50deg); }
}

.dc-build-opt-gauge-base {
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    transform: translateX(-50%);
}

/* --- Progress bar: halting/jerky, then one smooth glide to full --- */
.dc-build-opt-bar-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.dc-build-opt-bar-fill {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    background: linear-gradient(to right, rgba(0, 229, 255, 0.5), var(--accent-color));
    transform-origin: left;
    transform: scaleX(1);
    animation: dc-build-opt-bar-progress 2.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.4s;
}

@keyframes dc-build-opt-bar-progress {
    0%   { transform: scaleX(0); }
    10%  { transform: scaleX(0.08); }
    22%  { transform: scaleX(0.1); }
    34%  { transform: scaleX(0.22); }
    46%  { transform: scaleX(0.24); }
    58%  { transform: scaleX(0.3); }
    72%  { transform: scaleX(0.3); }
    100% { transform: scaleX(1); }
}

/* --- Content rows: start tilted/offset ("cluttered"), snap straight --- */
.dc-build-opt-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dc-build-opt-row {
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.14);
    transform: rotate(0deg) translateX(0);
    animation: dc-build-opt-row-straighten 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.7s;
}

@keyframes dc-build-opt-row-straighten {
    0%   { transform: rotate(var(--tilt, -3deg)) translateX(var(--shift, 5px)); }
    100% { transform: rotate(0deg) translateX(0); background: rgba(0, 229, 255, 0.32); }
}

.dc-build-opt-row-1 { width: 90%; --tilt: -3deg; --shift: 5px; animation-delay: 1.7s; }
.dc-build-opt-row-2 { width: 75%; --tilt: 2deg; --shift: -6px; animation-delay: 1.82s; }
.dc-build-opt-row-3 { width: 82%; --tilt: -2deg; --shift: 4px; animation-delay: 1.94s; }

/* --- "Optimized" badge, lands last --- */
.dc-build-opt-badge {
    position: absolute;
    bottom: -14px;
    right: -10px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: rgba(13, 25, 43, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 8px 20px -6px rgba(0, 229, 255, 0.35);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-white, #fff);
    opacity: 0;
    transform: translateY(8px) scale(0.85);
    animation: dc-build-badge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-build-badge-glow 2.4s ease-in-out infinite;
    animation-delay: 2.2s, 2.7s;
}

.dc-build-opt-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dc-build-opt-panel { animation: none; opacity: 1; }
    .dc-build-opt-sweep::before { animation: none; opacity: 0; }
    .dc-build-opt-gauge-needle { animation: none; transform: translateX(-50%) rotate(50deg); }
    .dc-build-opt-bar-fill { animation: none; transform: scaleX(1); }
    .dc-build-opt-row { animation: none; transform: rotate(0deg) translateX(0); background: rgba(0, 229, 255, 0.32); }
    .dc-build-opt-badge { animation: none; opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
    .dc-build-opt-stage-wrap {
        max-width: 343px;
        height: 291px;
    }
    .dc-build-opt-stage {
        transform: scale(0.857);
    }
}

@media (max-width: 480px) {
    .dc-build-opt-stage-wrap {
        max-width: 300px;
        height: 255px;
    }
    .dc-build-opt-stage {
        transform: scale(0.75);
    }
}