/* ===== GROWTH PAGES (commercial "we grow your brand FOR you" section) =====
   Shared stylesheet for all /growth/* pages, loaded alongside learn.css so
   Growth pages 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
   Growth: the audience-inflow hero visual family. Cyan accents always use
   var(--accent-color) — never var(--primary-light), which resolves to dark
   navy (#132b45) and is the exact bug fixed in build.css. */

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

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

/* ===== GROWTH PROCESS (shared across Growth pages) — .dc-growth-process =====
   Equal-weight horizontal step sequence for "How We Grow"-style sections —
   ported from Build's .dc-build-process (same reasoning: every step matters
   as much as the first, so this is deliberately not the shrinking-bar
   .dc-learn-funnel component). Kept as its own Growth-scoped class rather
   than loading build.css on Growth pages. */
.dc-growth-process-inner {
    max-width: 980px;
}

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

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

.dc-growth-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-growth-process-name {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1.05rem;
    margin: 0 0 6px 0;
}

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

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

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

/* ===== DIGITAL MARKETING HERO VISUAL — .dc-growth-dm-* =====
   A central brand node with five marketing-channel chips around it. Channel
   chips pop in, thin paths reach in toward the brand node, then audience
   dots loop continuously FROM each channel TOWARD the center — audience
   being drawn in from multiple channels — and a small rising-bars "growth"
   readout lands under the brand node once the flow is established. This is
   the inverse of Build's API hub (outbound endpoints, single one-shot
   packet per spoke): here motion is inbound and continuous, and the payoff
   is a growth indicator, not a delivered-endpoint badge. Self-contained —
   .dc-growth-dm-* only appears here. */
.dc-growth-dm-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

/* --- Paths: thin line reaches in from each channel, dots loop inward --- */
.dc-growth-dm-path {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 128px;
    height: 0;
    transform-origin: left center;
    z-index: 1;
}

.dc-growth-dm-path-1 { transform: rotate(-90deg); }
.dc-growth-dm-path-2 { transform: rotate(-18deg); }
.dc-growth-dm-path-3 { transform: rotate(54deg); }
.dc-growth-dm-path-4 { transform: rotate(126deg); }
.dc-growth-dm-path-5 { transform: rotate(198deg); }

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

.dc-growth-dm-path-1 .dc-growth-dm-path-line { animation-delay: 0.45s; }
.dc-growth-dm-path-2 .dc-growth-dm-path-line { animation-delay: 0.6s; }
.dc-growth-dm-path-3 .dc-growth-dm-path-line { animation-delay: 0.75s; }
.dc-growth-dm-path-4 .dc-growth-dm-path-line { animation-delay: 0.9s; }
.dc-growth-dm-path-5 .dc-growth-dm-path-line { animation-delay: 1.05s; }

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

.dc-growth-dm-audience-dot {
    position: absolute;
    top: -2px;
    left: 100%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.75);
    opacity: 0;
    animation: dc-growth-dm-dot-travel 2.6s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes dc-growth-dm-dot-travel {
    0%   { opacity: 0; left: 100%; }
    12%  { opacity: 1; }
    82%  { opacity: 1; left: 6%; }
    100% { opacity: 0; left: 0%; }
}

/* --- Channel chips, arranged in a ring around the brand node --- */
.dc-growth-dm-channel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    z-index: 2;
}

.dc-growth-dm-channel i {
    font-size: 15px;
    color: var(--accent-color);
}

.dc-growth-dm-channel-label {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-white);
    opacity: 0.85;
}

.dc-growth-dm-channel-1 { transform: translate(calc(-50% + 0px), calc(-50% - 128px)) scale(0.5); animation: dc-growth-dm-channel-in-1 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.4s; }
.dc-growth-dm-channel-2 { transform: translate(calc(-50% + 122px), calc(-50% - 40px)) scale(0.5); animation: dc-growth-dm-channel-in-2 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.55s; }
.dc-growth-dm-channel-3 { transform: translate(calc(-50% + 75px), calc(-50% + 104px)) scale(0.5); animation: dc-growth-dm-channel-in-3 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.7s; }
.dc-growth-dm-channel-4 { transform: translate(calc(-50% - 75px), calc(-50% + 104px)) scale(0.5); animation: dc-growth-dm-channel-in-4 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.85s; }
.dc-growth-dm-channel-5 { transform: translate(calc(-50% - 122px), calc(-50% - 40px)) scale(0.5); animation: dc-growth-dm-channel-in-5 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 1s; }

@keyframes dc-growth-dm-channel-in-1 { to { opacity: 1; transform: translate(calc(-50% + 0px), calc(-50% - 128px)) scale(1); } }
@keyframes dc-growth-dm-channel-in-2 { to { opacity: 1; transform: translate(calc(-50% + 122px), calc(-50% - 40px)) scale(1); } }
@keyframes dc-growth-dm-channel-in-3 { to { opacity: 1; transform: translate(calc(-50% + 75px), calc(-50% + 104px)) scale(1); } }
@keyframes dc-growth-dm-channel-in-4 { to { opacity: 1; transform: translate(calc(-50% - 75px), calc(-50% + 104px)) scale(1); } }
@keyframes dc-growth-dm-channel-in-5 { to { opacity: 1; transform: translate(calc(-50% - 122px), calc(-50% - 40px)) scale(1); } }

/* --- Central brand node --- */
.dc-growth-dm-brand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    font-size: 22px;
    color: var(--accent-color);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    animation: dc-growth-dm-brand-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-dm-brand-pulse 2.6s ease-in-out infinite;
    animation-delay: 0.15s, 1.4s;
    z-index: 3;
}

@keyframes dc-growth-dm-brand-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes dc-growth-dm-brand-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.28); }
    50%      { box-shadow: 0 0 0 12px rgba(0, 229, 255, 0); }
}

/* --- Growth-metric readout, lands under the brand node once flow is established --- */
.dc-growth-dm-metric {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 6px 9px;
    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);
    opacity: 0;
    transform: translate(-50%, 40px) scale(0.85);
    animation: dc-growth-dm-metric-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-dm-metric-glow 2.4s ease-in-out infinite;
    animation-delay: 1.75s, 2.2s;
    z-index: 3;
}

@keyframes dc-growth-dm-metric-in { to { opacity: 1; transform: translate(-50%, 44px) scale(1); } }
@keyframes dc-growth-dm-metric-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-growth-dm-metric-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.dc-growth-dm-metric-bar {
    width: 3px;
    border-radius: 1px 1px 0 0;
    background: var(--accent-color);
    transform-origin: bottom;
    transform: scaleY(0);
    animation: dc-growth-dm-metric-bar-grow 0.4s ease forwards;
    animation-delay: calc(1.9s + var(--n) * 0.08s);
}

.dc-growth-dm-metric-bar:nth-child(1) { height: 6px; }
.dc-growth-dm-metric-bar:nth-child(2) { height: 10px; }
.dc-growth-dm-metric-bar:nth-child(3) { height: 14px; }

@keyframes dc-growth-dm-metric-bar-grow { to { transform: scaleY(1); } }

.dc-growth-dm-metric i {
    font-size: 9px;
    color: var(--accent-color);
    margin-left: 2px;
    margin-bottom: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .dc-growth-dm-channel-1 { animation: none; opacity: 1; transform: translate(calc(-50% + 0px), calc(-50% - 128px)) scale(1); }
    .dc-growth-dm-channel-2 { animation: none; opacity: 1; transform: translate(calc(-50% + 122px), calc(-50% - 40px)) scale(1); }
    .dc-growth-dm-channel-3 { animation: none; opacity: 1; transform: translate(calc(-50% + 75px), calc(-50% + 104px)) scale(1); }
    .dc-growth-dm-channel-4 { animation: none; opacity: 1; transform: translate(calc(-50% - 75px), calc(-50% + 104px)) scale(1); }
    .dc-growth-dm-channel-5 { animation: none; opacity: 1; transform: translate(calc(-50% - 122px), calc(-50% - 40px)) scale(1); }
    .dc-growth-dm-path-line { animation: none; transform: scaleX(1); }
    .dc-growth-dm-audience-dot { animation: none; opacity: 0; }
    .dc-growth-dm-brand { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: none; }
    .dc-growth-dm-metric { animation: none; opacity: 1; transform: translate(-50%, 44px) scale(1); }
    .dc-growth-dm-metric-bar { animation: none; transform: scaleY(1); }
}

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

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

/* ===== SEO SERVICES HERO VISUAL — .dc-growth-seo-* =====
   A single focused "growth over time" chart: a glass panel holding an SVG
   line that draws left-to-right and climbs, with a soft area-fill under it,
   a pulsing endpoint dot, a "Top Results" badge, a search/web marker at the
   line's low start, and small keyword dots that loop climbing along the
   line's rising path. Deliberately not a DOM list re-ordering (that's
   Learn SEO's SERP-row-climb) and not a multi-widget dashboard (that's
   Build's BI page) — one chart, one story: rankings and traffic trending
   up over time. Self-contained — .dc-growth-seo-* only appears here. */
.dc-growth-seo-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-seo-panel {
    position: absolute;
    top: 50px;
    left: 40px;
    width: 320px;
    height: 170px;
    padding: 16px;
    border-radius: 16px;
    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);
    opacity: 0;
    transform: translateY(14px);
    animation: dc-growth-seo-panel-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 0.15s;
}

@keyframes dc-growth-seo-panel-in { to { opacity: 1; transform: translateY(0); } }

.dc-growth-seo-chart-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dc-growth-seo-grid-line {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}

.dc-growth-seo-chart-area {
    opacity: 0;
    animation: dc-growth-seo-area-in 0.5s ease forwards;
    animation-delay: 1.1s;
}

@keyframes dc-growth-seo-area-in { to { opacity: 1; } }

.dc-growth-seo-chart-line {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: dc-growth-seo-line-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.45s;
}

@keyframes dc-growth-seo-line-draw { to { stroke-dashoffset: 0; } }

.dc-growth-seo-chart-dot {
    fill: var(--accent-color);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: dc-growth-seo-dot-in 0.4s ease forwards,
               dc-growth-seo-dot-pulse 2.2s ease-in-out infinite;
    animation-delay: 1.5s, 1.9s;
}

@keyframes dc-growth-seo-dot-in { to { opacity: 1; } }
@keyframes dc-growth-seo-dot-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.35); }
}

/* --- Search/web marker at the line's low start --- */
.dc-growth-seo-search-badge {
    position: absolute;
    top: 195px;
    left: 55px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: var(--accent-color);
    font-size: 13px;
    opacity: 0;
    transform: scale(0.6);
    animation: dc-growth-seo-badge-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
    z-index: 2;
}

@keyframes dc-growth-seo-badge-pop { to { opacity: 1; transform: scale(1); } }

/* --- "Top Results" badge, lands once the line has climbed --- */
.dc-growth-seo-top-badge {
    position: absolute;
    top: 14px;
    right: 30px;
    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);
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
    animation: dc-growth-seo-topbadge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-seo-topbadge-glow 2.4s ease-in-out infinite;
    animation-delay: 1.6s, 2.1s;
    z-index: 3;
}

.dc-growth-seo-top-badge i {
    color: var(--accent-color);
    font-size: 9px;
}

@keyframes dc-growth-seo-topbadge-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dc-growth-seo-topbadge-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); }
}

/* --- Keyword markers, loop climbing along the chart's rising path --- */
.dc-growth-seo-keyword {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.75);
    opacity: 0;
    z-index: 2;
}

.dc-growth-seo-keyword-1 { animation: dc-growth-seo-climb-1 3.2s ease-in-out infinite; animation-delay: 1.9s; }
.dc-growth-seo-keyword-2 { animation: dc-growth-seo-climb-2 3.2s ease-in-out infinite; animation-delay: 2.3s; }
.dc-growth-seo-keyword-3 { animation: dc-growth-seo-climb-3 3.2s ease-in-out infinite; animation-delay: 2.7s; }

@keyframes dc-growth-seo-climb-1 {
    0%   { opacity: 0; top: 118px; left: 34px; }
    12%  { opacity: 1; }
    88%  { opacity: 1; top: 62px; left: 94px; }
    100% { opacity: 0; top: 62px; left: 94px; }
}

@keyframes dc-growth-seo-climb-2 {
    0%   { opacity: 0; top: 100px; left: 104px; }
    12%  { opacity: 1; }
    88%  { opacity: 1; top: 52px; left: 174px; }
    100% { opacity: 0; top: 52px; left: 174px; }
}

@keyframes dc-growth-seo-climb-3 {
    0%   { opacity: 0; top: 66px; left: 184px; }
    12%  { opacity: 1; }
    88%  { opacity: 1; top: 22px; left: 274px; }
    100% { opacity: 0; top: 22px; left: 274px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-growth-seo-panel { animation: none; opacity: 1; transform: translateY(0); }
    .dc-growth-seo-chart-area { animation: none; opacity: 1; }
    .dc-growth-seo-chart-line { animation: none; stroke-dashoffset: 0; }
    .dc-growth-seo-chart-dot { animation: none; opacity: 1; transform: scale(1); }
    .dc-growth-seo-search-badge { animation: none; opacity: 1; transform: scale(1); }
    .dc-growth-seo-top-badge { animation: none; opacity: 1; transform: translateY(0) scale(1); }
    .dc-growth-seo-keyword { animation: none; opacity: 0; }
}

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

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

/* ===== SOCIAL MEDIA MARKETING HERO VISUAL — .dc-growth-smm-* =====
   A social post card gaining live engagement: header + caption + image
   block, then a heart pulses, like/comment counters tick up (illustrative,
   registered via @property so the numbers interpolate smoothly — same
   proven technique as Build's BI count-up), a share icon pulses, reaction
   dots float up out of the image, and a small "Growing" follower badge
   lands last. Distinct from every prior visual: this is the only one built
   around a single social post gaining engagement over time. Self-contained
   — .dc-growth-smm-* only appears here. */
.dc-growth-smm-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-smm-card {
    position: absolute;
    top: 35px;
    left: 60px;
    width: 280px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 16px;
    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);
    opacity: 0;
    transform: translateY(14px);
    animation: dc-growth-smm-card-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 0.15s;
    z-index: 1;
}

@keyframes dc-growth-smm-card-in { to { opacity: 1; transform: translateY(0); } }

.dc-growth-smm-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dc-growth-smm-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.5), rgba(0, 229, 255, 0.12));
    border: 1px solid rgba(0, 229, 255, 0.4);
}

.dc-growth-smm-header-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.dc-growth-smm-header-line {
    height: 7px;
    width: 70%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
}

.dc-growth-smm-header-line.is-short {
    width: 40%;
    background: rgba(255, 255, 255, 0.12);
}

.dc-growth-smm-caption {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dc-growth-smm-caption-line {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
}

.dc-growth-smm-caption-line.is-short {
    width: 60%;
}

.dc-growth-smm-image {
    position: relative;
    height: 108px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(0, 229, 255, 0.04));
    border: 1px solid rgba(0, 229, 255, 0.2);
}

/* --- Reaction dots float up out of the image --- */
.dc-growth-smm-reaction {
    position: absolute;
    bottom: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.75);
    opacity: 0;
    animation: dc-growth-smm-reaction-float 2.6s ease-in-out infinite;
}

.dc-growth-smm-reaction-1 { left: 18%; animation-delay: 1.8s; }
.dc-growth-smm-reaction-2 { left: 42%; animation-delay: 2.15s; }
.dc-growth-smm-reaction-3 { left: 64%; animation-delay: 2.5s; }
.dc-growth-smm-reaction-4 { left: 84%; animation-delay: 2.85s; }

@keyframes dc-growth-smm-reaction-float {
    0%   { opacity: 0; transform: translateY(0) scale(0.8); }
    15%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-70px) scale(1.1); }
}

/* --- Engagement row: heart + like count, comment icon + count, share --- */
.dc-growth-smm-engagement {
    display: flex;
    align-items: center;
    gap: 18px;
    opacity: 0;
    animation: dc-growth-smm-engagement-in 0.4s ease forwards;
    animation-delay: 1.5s;
}

@keyframes dc-growth-smm-engagement-in { to { opacity: 1; } }

.dc-growth-smm-eng-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-white);
}

.dc-growth-smm-eng-item i {
    font-size: 12px;
    color: var(--accent-color);
}

.dc-growth-smm-heart {
    position: relative;
    width: 11px;
    height: 10px;
    flex-shrink: 0;
    animation: dc-growth-smm-heart-pulse 1.8s ease-in-out infinite;
    animation-delay: 1.7s;
}

.dc-growth-smm-heart::before,
.dc-growth-smm-heart::after {
    content: "";
    position: absolute;
    top: 0;
    width: 6px;
    height: 10px;
    border-radius: 6px 6px 0 0;
    background: var(--accent-color);
}

.dc-growth-smm-heart::before { left: 5px; transform: rotate(-45deg); transform-origin: 0 100%; }
.dc-growth-smm-heart::after  { left: 0;  transform: rotate(45deg);  transform-origin: 100% 100%; }

@keyframes dc-growth-smm-heart-pulse {
    0%, 100% { transform: scale(1); }
    15%      { transform: scale(1.3); }
    30%      { transform: scale(1); }
}

.dc-growth-smm-share {
    animation: dc-growth-smm-share-pulse 2.6s ease-in-out infinite;
    animation-delay: 2.2s;
}

@keyframes dc-growth-smm-share-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.2); opacity: 1; }
}

/* --- Illustrative count-up numbers (not claimed results) — same @property
   technique as Build's BI count-up: initial-value holds the finished state
   so browsers without @property support still show the correct number,
   just without the count-up motion. --- */
@property --dc-growth-smm-like-num {
    syntax: '<integer>';
    inherits: false;
    initial-value: 86;
}

@property --dc-growth-smm-comment-num {
    syntax: '<integer>';
    inherits: false;
    initial-value: 12;
}

.dc-growth-smm-like-count {
    --dc-growth-smm-like-num: 86;
    counter-reset: dc-growth-smm-like-c var(--dc-growth-smm-like-num);
    animation: dc-growth-smm-like-count-up 1s ease-out forwards;
    animation-delay: 1.7s;
}

.dc-growth-smm-like-count::after { content: counter(dc-growth-smm-like-c); }

@keyframes dc-growth-smm-like-count-up { from { --dc-growth-smm-like-num: 0; } }

.dc-growth-smm-comment-count {
    --dc-growth-smm-comment-num: 12;
    counter-reset: dc-growth-smm-comment-c var(--dc-growth-smm-comment-num);
    animation: dc-growth-smm-comment-count-up 1s ease-out forwards;
    animation-delay: 2s;
}

.dc-growth-smm-comment-count::after { content: counter(dc-growth-smm-comment-c); }

@keyframes dc-growth-smm-comment-count-up { from { --dc-growth-smm-comment-num: 0; } }

/* --- "Growing" follower badge, lands last --- */
.dc-growth-smm-follow-badge {
    position: absolute;
    top: 14px;
    right: 24px;
    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);
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
    animation: dc-growth-smm-badge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-smm-badge-glow 2.4s ease-in-out infinite;
    animation-delay: 2.3s, 2.8s;
    z-index: 3;
}

.dc-growth-smm-follow-badge i {
    color: var(--accent-color);
    font-size: 9px;
}

@keyframes dc-growth-smm-badge-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dc-growth-smm-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); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-growth-smm-card { animation: none; opacity: 1; transform: translateY(0); }
    .dc-growth-smm-reaction { animation: none; opacity: 0; }
    .dc-growth-smm-engagement { animation: none; opacity: 1; }
    .dc-growth-smm-heart { animation: none; transform: scale(1); }
    .dc-growth-smm-share { animation: none; transform: scale(1); opacity: 1; }
    .dc-growth-smm-like-count { animation: none; --dc-growth-smm-like-num: 86; }
    .dc-growth-smm-comment-count { animation: none; --dc-growth-smm-comment-num: 12; }
    .dc-growth-smm-follow-badge { animation: none; opacity: 1; transform: translateY(0) scale(1); }
}

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

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

/* ===== PAID ADS / PPC HERO VISUAL — .dc-growth-ads-* =====
   A three-phase story: an ad badge broadcasts (radar-ping rings), a loose
   scatter of audience dots appears, a corner-bracket targeting reticle
   narrows onto the right cluster of dots (they light cyan, the rest dim),
   then the targeted dots flow down into a conversions badge. The reticle
   is the signature novel element — nothing else on the site narrows a
   selection onto a subset like this. Distinct from Digital Marketing's
   continuous radial inflow, SEO's line chart, and Social's post-engagement
   card. Any count is illustrative. Self-contained — .dc-growth-ads-* only
   appears here. */
.dc-growth-ads-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-ads-badge {
    position: absolute;
    top: 18px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-white);
    opacity: 0;
    transform: translateX(-50%) scale(0.7);
    animation: dc-growth-ads-badge-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.15s;
    z-index: 3;
}

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

@keyframes dc-growth-ads-badge-in { to { opacity: 1; transform: translateX(-50%) scale(1); } }

.dc-growth-ads-ring {
    position: absolute;
    top: 31px;
    left: 200px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 229, 255, 0.5);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: dc-growth-ads-ring-ping 2.8s ease-out infinite;
    animation-delay: 0.6s;
}

.dc-growth-ads-ring-2 { animation-delay: 2s; }

@keyframes dc-growth-ads-ring-ping {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    80%  { opacity: 0; transform: translate(-50%, -50%) scale(7); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
}

/* --- Audience dots: dim by default, cyan once targeted --- */
.dc-growth-ads-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transform: scale(0.5);
    animation: dc-growth-ads-dot-in 0.4s ease forwards;
    animation-delay: var(--delay, 0s);
    z-index: 1;
}

@keyframes dc-growth-ads-dot-in { to { opacity: 1; transform: scale(1); } }

.dc-growth-ads-dot.is-dim {
    animation: dc-growth-ads-dot-in 0.4s ease forwards,
               dc-growth-ads-dot-fade 0.5s ease forwards;
    animation-delay: var(--delay, 0s), 1.9s;
}

@keyframes dc-growth-ads-dot-fade { to { opacity: 0.18; transform: scale(0.85); } }

.dc-growth-ads-dot.is-target {
    animation: dc-growth-ads-dot-in 0.4s ease forwards,
               dc-growth-ads-dot-light 0.4s ease forwards,
               dc-growth-ads-dot-convert 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--delay, 0s), 1.9s, 2.5s;
}

@keyframes dc-growth-ads-dot-light {
    to { background: var(--accent-color); box-shadow: 0 0 8px rgba(0, 229, 255, 0.8); transform: scale(1.3); }
}

@keyframes dc-growth-ads-dot-convert {
    0%   { transform: scale(1.3); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(var(--fall, 130px)) scale(0.6); }
}

/* --- Targeting reticle: narrows onto the right cluster, then fades --- */
.dc-growth-ads-reticle {
    position: absolute;
    top: 90px;
    left: 160px;
    width: 90px;
    height: 85px;
    opacity: 0;
    transform: scale(1.5);
    transform-origin: center;
    animation: dc-growth-ads-reticle-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
               dc-growth-ads-reticle-out 0.4s ease forwards;
    animation-delay: 1.35s, 2.15s;
    z-index: 2;
}

@keyframes dc-growth-ads-reticle-in { to { opacity: 1; transform: scale(1); } }
@keyframes dc-growth-ads-reticle-out { to { opacity: 0; } }

.dc-growth-ads-reticle-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent-color);
}

.dc-growth-ads-reticle-corner:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
.dc-growth-ads-reticle-corner:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
.dc-growth-ads-reticle-corner:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
.dc-growth-ads-reticle-corner:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }

/* --- Conversions badge, lands once the targeted dots arrive --- */
.dc-growth-ads-convert-zone {
    position: absolute;
    bottom: 22px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px;
    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);
    opacity: 0;
    transform: translateX(-50%) scale(0.7);
    animation: dc-growth-ads-convert-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-ads-convert-glow 2.4s ease-in-out infinite;
    animation-delay: 3s, 3.45s;
    z-index: 3;
}

.dc-growth-ads-convert-zone i {
    color: var(--accent-color);
    font-size: 12px;
}

@keyframes dc-growth-ads-convert-in { to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes dc-growth-ads-convert-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); }
}

/* Illustrative count-up, not a claimed result — same @property technique
   as Build's BI count-up and Social's like/comment counters. */
@property --dc-growth-ads-convert-num {
    syntax: '<integer>';
    inherits: false;
    initial-value: 4;
}

.dc-growth-ads-convert-count {
    --dc-growth-ads-convert-num: 4;
    counter-reset: dc-growth-ads-convert-c var(--dc-growth-ads-convert-num);
    animation: dc-growth-ads-convert-count-up 0.8s ease-out forwards;
    animation-delay: 3.1s;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-white);
}

.dc-growth-ads-convert-count::after { content: counter(dc-growth-ads-convert-c); }

@keyframes dc-growth-ads-convert-count-up { from { --dc-growth-ads-convert-num: 0; } }

@media (prefers-reduced-motion: reduce) {
    .dc-growth-ads-badge { animation: none; opacity: 1; transform: translateX(-50%) scale(1); }
    .dc-growth-ads-ring { animation: none; opacity: 0; }
    .dc-growth-ads-dot { animation: none; opacity: 1; transform: scale(1); }
    .dc-growth-ads-dot.is-dim { animation: none; opacity: 0.18; transform: scale(0.85); }
    .dc-growth-ads-dot.is-target { animation: none; opacity: 0; }
    .dc-growth-ads-reticle { animation: none; opacity: 0; }
    .dc-growth-ads-convert-zone { animation: none; opacity: 1; transform: translateX(-50%) scale(1); }
    .dc-growth-ads-convert-count { animation: none; --dc-growth-ads-convert-num: 4; }
}

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

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

/* ===== GRAPHIC DESIGN HERO VISUAL — .dc-growth-gd-* =====
   Multiple deliverables forming a brand kit around a central brand mark: a
   diamond brand mark anchors first, then a poster card and a business card
   appear either side of it, then a tonal palette row fills in swatch by
   swatch, and finally a dashed "kit" frame fades in around the whole group
   — like a design tool's group-selection outline — tying the pieces
   together. Deliberately NOT a single canvas assembling block-by-block
   (that's Learn Graphic Design's .dc-gd-canvas) — this is several finished
   deliverables coming together as a set. Palette swatches stay within the
   cyan+navy palette (graduated tints of the accent color, not off-brand
   hues). Self-contained — .dc-growth-gd-* only appears here. */
.dc-growth-gd-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

/* --- Central brand mark: a rotated-square "logo mark", anchors first --- */
.dc-growth-gd-mark {
    position: absolute;
    top: 108px;
    left: 168px;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    transform: rotate(45deg) scale(0.5);
    opacity: 0;
    animation: dc-growth-gd-mark-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.25s;
    z-index: 2;
}

@keyframes dc-growth-gd-mark-in { to { opacity: 1; transform: rotate(45deg) scale(1); } }

.dc-growth-gd-mark i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 20px;
    color: var(--accent-color);
}

/* --- Poster / social-post card, upper-left --- */
.dc-growth-gd-poster {
    position: absolute;
    top: 20px;
    left: 40px;
    width: 90px;
    height: 118px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-10px);
    animation: dc-growth-gd-poster-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 0.75s;
    z-index: 1;
}

@keyframes dc-growth-gd-poster-in { to { opacity: 1; transform: translateY(0); } }

.dc-growth-gd-poster-block {
    flex: 1;
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(0, 229, 255, 0.28), rgba(0, 229, 255, 0.06));
    border: 1px solid rgba(0, 229, 255, 0.22);
}

.dc-growth-gd-poster-line {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.16);
}

.dc-growth-gd-poster-line.is-short { width: 55%; }

/* --- Business card, lower-right --- */
.dc-growth-gd-card {
    position: absolute;
    top: 182px;
    left: 250px;
    width: 110px;
    height: 64px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(10px);
    animation: dc-growth-gd-card-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 1.05s;
    z-index: 1;
}

@keyframes dc-growth-gd-card-in { to { opacity: 1; transform: translateY(0); } }

.dc-growth-gd-card-mark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(0, 229, 255, 0.3);
    border: 1px solid rgba(0, 229, 255, 0.5);
}

.dc-growth-gd-card-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dc-growth-gd-card-line {
    height: 5px;
    width: 100%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.18);
}

.dc-growth-gd-card-line.is-short { width: 60%; background: rgba(255, 255, 255, 0.1); }

/* --- Tonal palette row, fills swatch by swatch --- */
.dc-growth-gd-palette {
    position: absolute;
    top: 272px;
    left: 100px;
    display: flex;
    gap: 8px;
}

.dc-growth-gd-swatch {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(0, 229, 255, 0.35);
    opacity: 0;
    transform: scale(0.5);
    animation: dc-growth-gd-swatch-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dc-growth-gd-swatch:nth-child(1) { background: rgba(0, 229, 255, 0.85); animation-delay: 1.35s; }
.dc-growth-gd-swatch:nth-child(2) { background: rgba(0, 229, 255, 0.62); animation-delay: 1.47s; }
.dc-growth-gd-swatch:nth-child(3) { background: rgba(0, 229, 255, 0.4); animation-delay: 1.59s; }
.dc-growth-gd-swatch:nth-child(4) { background: rgba(255, 255, 255, 0.28); animation-delay: 1.71s; }
.dc-growth-gd-swatch:nth-child(5) { background: rgba(11, 28, 45, 0.9); border-color: rgba(0, 229, 255, 0.5); animation-delay: 1.83s; }

@keyframes dc-growth-gd-swatch-in { to { opacity: 1; transform: scale(1); } }

/* --- Dashed "kit" frame, groups the whole composition last --- */
.dc-growth-gd-kit-frame {
    position: absolute;
    top: 8px;
    left: 22px;
    width: 356px;
    height: 302px;
    border-radius: 20px;
    border: 1.5px dashed rgba(0, 229, 255, 0.35);
    opacity: 0;
    animation: dc-growth-gd-kit-in 0.6s ease forwards,
               dc-growth-gd-kit-pulse 3s ease-in-out infinite;
    animation-delay: 2.1s, 2.7s;
}

@keyframes dc-growth-gd-kit-in { to { opacity: 1; } }
@keyframes dc-growth-gd-kit-pulse {
    0%, 100% { border-color: rgba(0, 229, 255, 0.35); }
    50%      { border-color: rgba(0, 229, 255, 0.65); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-growth-gd-mark { animation: none; opacity: 1; transform: rotate(45deg) scale(1); }
    .dc-growth-gd-poster { animation: none; opacity: 1; transform: translateY(0); }
    .dc-growth-gd-card { animation: none; opacity: 1; transform: translateY(0); }
    .dc-growth-gd-swatch { animation: none; opacity: 1; transform: scale(1); }
    .dc-growth-gd-kit-frame { animation: none; opacity: 1; }
}

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

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

/* ===== VIDEO EDITING HERO VISUAL — .dc-growth-ve-* =====
   A finished video PLAYER, not an editing workspace: a play button pops in,
   pulses, then fades as playback "starts" — a progress bar fills across
   on a loop, a quick cyan flash fires at the midpoint to suggest a scene
   cut, an engagement badge (rising bars) appears, and two format tags
   (16:9 / 9:16) peek out beneath the frame. No icon font for the play
   glyph exists in the curated set, so it's hand-drawn from CSS borders —
   same technique Learn Video Editing already uses for its own play
   triangle, but here it sits inside a circular glass button on a finished
   player, never a multi-track timeline. Deliberately the opposite of
   Learn's .dc-ve-editor (tracks + playhead + waveform) — this is the
   output being watched, not the workspace. Self-contained —
   .dc-growth-ve-* only appears here. */
.dc-growth-ve-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-ve-player {
    position: absolute;
    top: 50px;
    left: 40px;
    width: 320px;
    height: 190px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(0, 229, 255, 0.14), rgba(11, 28, 45, 0.5));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(14px);
    animation: dc-growth-ve-player-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 0.15s;
}

@keyframes dc-growth-ve-player-in { to { opacity: 1; transform: translateY(0); } }

.dc-growth-ve-flash {
    position: absolute;
    inset: 0;
    background: rgba(0, 229, 255, 0.5);
    opacity: 0;
    animation: dc-growth-ve-flash-cut 4s ease-in-out infinite;
    animation-delay: 1.3s;
}

@keyframes dc-growth-ve-flash-cut {
    0%, 46% { opacity: 0; }
    48%     { opacity: 0.5; }
    50%     { opacity: 0; }
    100%    { opacity: 0; }
}

.dc-growth-ve-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 25, 43, 0.7);
    border: 1.5px solid rgba(0, 229, 255, 0.5);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    animation: dc-growth-ve-play-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-ve-play-pulse 1.6s ease-in-out infinite,
               dc-growth-ve-play-out 0.4s ease forwards;
    animation-delay: 0.5s, 0.5s, 1.25s;
    z-index: 2;
}

@keyframes dc-growth-ve-play-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes dc-growth-ve-play-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.3); }
    50%      { box-shadow: 0 0 0 10px rgba(0, 229, 255, 0); }
}
@keyframes dc-growth-ve-play-out { to { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } }

.dc-growth-ve-play-triangle {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid var(--accent-color);
}

/* --- Progress bar, loops as if the video keeps playing --- */
.dc-growth-ve-progress-track {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    animation: dc-growth-ve-progress-track-in 0.4s ease forwards;
    animation-delay: 1.3s;
    z-index: 2;
}

@keyframes dc-growth-ve-progress-track-in { to { opacity: 1; } }

.dc-growth-ve-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: 2px;
    background: var(--accent-color);
    animation: dc-growth-ve-progress-fill 4s linear infinite;
    animation-delay: 1.3s;
}

@keyframes dc-growth-ve-progress-fill {
    0%   { width: 0%; }
    100% { width: 100%; }
}

.dc-growth-ve-progress-fill::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.8);
}

/* --- Engagement badge: rising bars only, no fabricated number --- */
.dc-growth-ve-engage {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(13, 25, 43, 0.75);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    transform: scale(0.8);
    animation: dc-growth-ve-engage-in 0.4s ease forwards;
    animation-delay: 1.6s;
    z-index: 2;
}

@keyframes dc-growth-ve-engage-in { to { opacity: 1; transform: scale(1); } }

.dc-growth-ve-engage-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.dc-growth-ve-engage-bar {
    width: 3px;
    border-radius: 1px 1px 0 0;
    background: var(--accent-color);
    transform-origin: bottom;
    transform: scaleY(0);
    animation: dc-growth-ve-engage-bar-grow 0.4s ease forwards;
    animation-delay: calc(1.75s + var(--n) * 0.08s);
}

.dc-growth-ve-engage-bar:nth-child(1) { height: 5px; }
.dc-growth-ve-engage-bar:nth-child(2) { height: 9px; }
.dc-growth-ve-engage-bar:nth-child(3) { height: 12px; }

@keyframes dc-growth-ve-engage-bar-grow { to { transform: scaleY(1); } }

/* --- Format tags, peek out beneath the frame --- */
.dc-growth-ve-format {
    position: absolute;
    bottom: -14px;
    padding: 3px 7px;
    border-radius: 5px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.3);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-white);
    opacity: 0;
    animation: dc-growth-ve-format-in 0.4s ease forwards;
    z-index: 2;
}

.dc-growth-ve-format-1 { left: 14px; animation-delay: 2s; }
.dc-growth-ve-format-2 { left: 62px; animation-delay: 2.15s; }

@keyframes dc-growth-ve-format-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .dc-growth-ve-player { animation: none; opacity: 1; transform: translateY(0); }
    .dc-growth-ve-flash { animation: none; opacity: 0; }
    .dc-growth-ve-play-btn { animation: none; opacity: 0; }
    .dc-growth-ve-progress-track { animation: none; opacity: 1; }
    .dc-growth-ve-progress-fill { animation: none; width: 62%; }
    .dc-growth-ve-engage { animation: none; opacity: 1; transform: scale(1); }
    .dc-growth-ve-engage-bar { animation: none; transform: scaleY(1); }
    .dc-growth-ve-format { animation: none; opacity: 1; }
}

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

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

/* ===== BRANDING & LOGO DESIGN HERO VISUAL — .dc-growth-brand-* =====
   A single logo mark being constructed with precision, not a spread of
   deliverables: three identical curved strokes (one shape, rotated 0/120/
   240deg around a shared center) draw in sequence via stroke-dashoffset
   into a triangular pinwheel mark, the mark then settles with a glow, a
   name lockup (dot + text bars) fades in beneath it, and finally two small
   "locked in" applications — a favicon-size chip and a wordmark pill —
   pop into place either side, with a soft ambient glow tying the whole
   identity together. Deliberately narrower and more focused than Growth
   Graphic Design's .dc-growth-gd-* (which spreads a poster, a business
   card and a palette row around a static mark inside a dashed kit frame)
   — this page is about the mark and its lockup, not a range of output.
   Self-contained — .dc-growth-brand-* only appears here. */
.dc-growth-brand-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

/* --- The mark: one curved stroke, drawn three times at 0/120/240deg --- */
.dc-growth-brand-mark-wrap {
    position: absolute;
    top: 30px;
    left: 150px;
    width: 100px;
    height: 100px;
    opacity: 0;
    animation: dc-growth-brand-mark-glow-in 0.6s ease forwards;
    animation-delay: 1.35s;
}

@keyframes dc-growth-brand-mark-glow-in { to { opacity: 1; } }

.dc-growth-brand-mark-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dc-growth-brand-stroke {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    /* transform-box defaults to view-box for SVG elements, so this origin
       is in the <svg>'s own viewBox units (50,50 = its center) — rotating
       each copy of the same stroke around that shared point is what makes
       three identical strokes form one radial pinwheel mark. */
    transform-origin: 50px 50px;
    animation: dc-growth-brand-stroke-draw 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.dc-growth-brand-stroke-1 { transform: rotate(0deg); animation-delay: 0.3s; }
.dc-growth-brand-stroke-2 { transform: rotate(120deg); animation-delay: 0.55s; }
.dc-growth-brand-stroke-3 { transform: rotate(240deg); animation-delay: 0.8s; }

@keyframes dc-growth-brand-stroke-draw { to { stroke-dashoffset: 0; } }

.dc-growth-brand-mark-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: radial-gradient(circle, rgba(0, 229, 255, 0.3), transparent 70%);
    opacity: 0;
    animation: dc-growth-brand-glow-pulse-in 0.6s ease forwards,
               dc-growth-brand-glow-pulse 2.8s ease-in-out infinite;
    animation-delay: 1.35s, 2s;
    z-index: -1;
}

@keyframes dc-growth-brand-glow-pulse-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes dc-growth-brand-glow-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.9; }
}

/* --- Name lockup: mini mark dot + two text bars --- */
.dc-growth-brand-name {
    position: absolute;
    top: 148px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translate(-50%, -8px);
    animation: dc-growth-brand-name-in 0.45s ease forwards;
    animation-delay: 1.65s;
}

@keyframes dc-growth-brand-name-in { to { opacity: 1; transform: translate(-50%, 0); } }

.dc-growth-brand-name-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
    flex-shrink: 0;
}

.dc-growth-brand-name-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dc-growth-brand-name-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
}

.dc-growth-brand-name-bar.is-short { width: 55%; background: rgba(255, 255, 255, 0.12); }

/* --- Two small "locked in" application chips --- */
.dc-growth-brand-favicon {
    position: absolute;
    top: 210px;
    left: 120px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-growth-brand-chip-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.05s;
}

.dc-growth-brand-favicon-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent-color);
}

.dc-growth-brand-wordmark {
    position: absolute;
    top: 210px;
    left: 210px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-growth-brand-chip-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.25s;
}

@keyframes dc-growth-brand-chip-in { to { opacity: 1; transform: scale(1); } }

.dc-growth-brand-wordmark-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
}

.dc-growth-brand-wordmark-bar {
    width: 46px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .dc-growth-brand-mark-wrap { animation: none; opacity: 1; }
    .dc-growth-brand-stroke { animation: none; stroke-dashoffset: 0; }
    .dc-growth-brand-mark-glow { animation: none; opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    .dc-growth-brand-name { animation: none; opacity: 1; transform: translate(-50%, 0); }
    .dc-growth-brand-favicon { animation: none; opacity: 1; transform: scale(1); }
    .dc-growth-brand-wordmark { animation: none; opacity: 1; transform: scale(1); }
}

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

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

/* ===== MOTION GRAPHICS HERO VISUAL — .dc-growth-motion-* =====
   Two-phase story: first, three geometric shapes (a floating circle, a
   morphing/rotating square, an orbiting triangle) move and morph freely
   while a dot traces a curved path between them — motion for its own
   sake. Then everything fades, a flourish ring flashes outward once, and
   a small two-shape mark reveals itself beside a name lockup, settling
   into a soft ambient glow — an animated logo reveal. Distinct from every
   prior visual: Video Editing shows a finished player, Branding
   constructs one mark via a single drawn stroke pinwheel; this one is
   about many shapes actively moving/morphing, then resolving. Self-
   contained — .dc-growth-motion-* only appears here. */
.dc-growth-motion-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

@keyframes dc-growth-motion-pop-in { to { opacity: 1; } }
@keyframes dc-growth-motion-fade-out { to { opacity: 0; } }

.dc-growth-motion-circle {
    position: absolute;
    top: 55px;
    left: 70px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.16);
    border: 2px solid rgba(0, 229, 255, 0.55);
    opacity: 0;
    animation: dc-growth-motion-pop-in 0.4s ease forwards,
               dc-growth-motion-float 3.2s ease-in-out infinite,
               dc-growth-motion-fade-out 0.4s ease forwards;
    animation-delay: 0.25s, 0.65s, 1.8s;
}

@keyframes dc-growth-motion-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

.dc-growth-motion-square {
    position: absolute;
    top: 190px;
    left: 290px;
    width: 40px;
    height: 40px;
    background: rgba(0, 229, 255, 0.14);
    border: 2px solid rgba(0, 229, 255, 0.5);
    opacity: 0;
    animation: dc-growth-motion-pop-in 0.4s ease forwards,
               dc-growth-motion-morph 2.6s ease-in-out infinite,
               dc-growth-motion-fade-out 0.4s ease forwards;
    animation-delay: 0.4s, 0.8s, 1.8s;
}

@keyframes dc-growth-motion-morph {
    0%, 100% { border-radius: 8px; transform: rotate(0deg); }
    50%      { border-radius: 50%; transform: rotate(180deg); }
}

.dc-growth-motion-triangle {
    position: absolute;
    top: 90px;
    left: 300px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 34px solid rgba(0, 229, 255, 0.5);
    opacity: 0;
    animation: dc-growth-motion-pop-in 0.4s ease forwards,
               dc-growth-motion-orbit 3s linear infinite,
               dc-growth-motion-fade-out 0.4s ease forwards;
    animation-delay: 0.55s, 0.95s, 1.8s;
}

@keyframes dc-growth-motion-orbit {
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(-14px, 10px) rotate(180deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

.dc-growth-motion-path-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    animation: dc-growth-motion-pop-in 0.4s ease forwards,
               dc-growth-motion-fade-out 0.4s ease forwards;
    animation-delay: 0.7s, 1.8s;
}

.dc-growth-motion-path-line {
    fill: none;
    stroke: rgba(0, 229, 255, 0.25);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
}

.dc-growth-motion-path-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.75);
    opacity: 0;
    offset-path: path("M60,250 Q200,180 340,240");
    offset-rotate: 0deg;
    animation: dc-growth-motion-pop-in 0.3s ease forwards,
               dc-growth-motion-trace 2.4s ease-in-out infinite,
               dc-growth-motion-fade-out 0.4s ease forwards;
    animation-delay: 0.9s, 1s, 1.8s;
}

@keyframes dc-growth-motion-trace {
    0%   { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}

/* --- Flourish ring, flashes outward once as the reveal begins --- */
.dc-growth-motion-flourish-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: dc-growth-motion-flourish 0.9s ease-out forwards;
    animation-delay: 1.95s;
}

@keyframes dc-growth-motion-flourish {
    0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(9); }
}

/* --- The reveal: a small two-shape mark + name lockup --- */
.dc-growth-motion-reveal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    animation: dc-growth-motion-reveal-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.15s;
    z-index: 2;
}

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

.dc-growth-motion-reveal-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.14);
    border: 1.5px solid rgba(0, 229, 255, 0.5);
}

.dc-growth-motion-reveal-square {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

.dc-growth-motion-reveal-name {
    position: absolute;
    top: 50%;
    left: calc(50% + 46px);
    display: flex;
    flex-direction: column;
    gap: 5px;
    transform: translateY(-50%) translateX(-8px);
    opacity: 0;
    animation: dc-growth-motion-name-in 0.4s ease forwards;
    animation-delay: 2.4s;
    z-index: 2;
}

@keyframes dc-growth-motion-name-in { to { opacity: 1; transform: translateY(-50%) translateX(0); } }

.dc-growth-motion-reveal-name-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
}

.dc-growth-motion-reveal-name-bar:nth-child(1) { width: 60px; }
.dc-growth-motion-reveal-name-bar:nth-child(2) { width: 38px; background: rgba(255, 255, 255, 0.12); }

.dc-growth-motion-reveal-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 229, 255, 0.28), transparent 70%);
    opacity: 0;
    animation: dc-growth-motion-glow-in 0.6s ease forwards,
               dc-growth-motion-glow-pulse 2.6s ease-in-out infinite;
    animation-delay: 2.15s, 2.75s;
    z-index: 1;
}

@keyframes dc-growth-motion-glow-in { to { opacity: 1; } }
@keyframes dc-growth-motion-glow-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-growth-motion-circle,
    .dc-growth-motion-square,
    .dc-growth-motion-triangle,
    .dc-growth-motion-path-svg,
    .dc-growth-motion-path-dot { animation: none; opacity: 0; }
    .dc-growth-motion-flourish-ring { animation: none; opacity: 0; }
    .dc-growth-motion-reveal { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-growth-motion-reveal-name { animation: none; opacity: 1; transform: translateY(-50%) translateX(0); }
    .dc-growth-motion-reveal-glow { animation: none; opacity: 0.7; }
}

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

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

/* ===== UI/UX DESIGN HERO VISUAL — .dc-growth-uiux-* =====
   One screen mockup that designs itself in place: a header, a hero block,
   three text lines and a button all start in a plain, low-opacity
   "wireframe" state (grey, unstyled) and — staggered — each transitions
   its own background/border/shadow into a polished cyan-accented state,
   ending with an ambient glow. Deliberately a single frame transforming
   itself, not two panels with items flying between them (that's Build's
   CMS visual, .dc-build-cms-*) and not a dashboard being assembled from
   scratch (SaaS) — this is the same screen, low-fidelity becoming
   high-fidelity. Self-contained — .dc-growth-uiux-* only appears here. */
.dc-growth-uiux-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-uiux-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 260px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(0, 229, 255, 0.18), transparent 70%);
    opacity: 0;
    animation: dc-growth-uiux-glow-in 0.6s ease forwards,
               dc-growth-uiux-glow-pulse 2.6s ease-in-out infinite;
    animation-delay: 2.3s, 2.9s;
    z-index: -1;
}

@keyframes dc-growth-uiux-glow-in { to { opacity: 1; } }
@keyframes dc-growth-uiux-glow-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.85; }
}

.dc-growth-uiux-screen {
    position: absolute;
    top: 45px;
    left: 50px;
    width: 300px;
    height: 220px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(14px);
    animation: dc-growth-uiux-screen-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 0.15s;
}

@keyframes dc-growth-uiux-screen-in { to { opacity: 1; transform: translateY(0); } }

.dc-growth-uiux-header {
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding: 0 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    animation: dc-growth-uiux-header-polish 0.5s ease forwards;
    animation-delay: 1.3s;
}

@keyframes dc-growth-uiux-header-polish {
    to { background: rgba(0, 229, 255, 0.14); border-color: rgba(0, 229, 255, 0.4); }
}

.dc-growth-uiux-header-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0;
    animation: dc-growth-uiux-dot-in 0.3s ease forwards;
}

.dc-growth-uiux-header-dot:nth-child(1) { animation-delay: 1.6s; }
.dc-growth-uiux-header-dot:nth-child(2) { animation-delay: 1.7s; }

@keyframes dc-growth-uiux-dot-in { to { opacity: 1; } }

.dc-growth-uiux-hero-block {
    position: relative;
    height: 72px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    animation: dc-growth-uiux-hero-polish 0.5s ease forwards;
    animation-delay: 1.5s;
}

@keyframes dc-growth-uiux-hero-polish {
    to {
        background: linear-gradient(135deg, rgba(0, 229, 255, 0.28), rgba(0, 229, 255, 0.06));
        border-color: rgba(0, 229, 255, 0.35);
    }
}

.dc-growth-uiux-hero-chip {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 36px;
    height: 10px;
    border-radius: 5px;
    background: var(--accent-color);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-growth-uiux-chip-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.85s;
}

@keyframes dc-growth-uiux-chip-in { to { opacity: 1; transform: scale(1); } }

.dc-growth-uiux-text-line {
    height: 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    animation: dc-growth-uiux-text-polish 0.4s ease forwards;
}

.dc-growth-uiux-text-line:nth-child(1) { width: 100%; animation-delay: 1.7s; }
.dc-growth-uiux-text-line:nth-child(2) { width: 80%; animation-delay: 1.8s; }
.dc-growth-uiux-text-line:nth-child(3) { width: 55%; animation-delay: 1.9s; }

@keyframes dc-growth-uiux-text-polish {
    to { background: rgba(255, 255, 255, 0.32); border-color: transparent; }
}

.dc-growth-uiux-btn {
    width: 70px;
    height: 24px;
    align-self: flex-start;
    border-radius: 6px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    animation: dc-growth-uiux-btn-polish 0.4s ease forwards;
    animation-delay: 2s;
}

@keyframes dc-growth-uiux-btn-polish {
    to {
        background: var(--accent-color);
        border-color: var(--accent-color);
        box-shadow: 0 6px 16px -6px rgba(0, 229, 255, 0.6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dc-growth-uiux-screen { animation: none; opacity: 1; transform: translateY(0); }
    .dc-growth-uiux-header { animation: none; background: rgba(0, 229, 255, 0.14); border-color: rgba(0, 229, 255, 0.4); }
    .dc-growth-uiux-header-dot { animation: none; opacity: 1; }
    .dc-growth-uiux-hero-block { animation: none; background: linear-gradient(135deg, rgba(0, 229, 255, 0.28), rgba(0, 229, 255, 0.06)); border-color: rgba(0, 229, 255, 0.35); }
    .dc-growth-uiux-hero-chip { animation: none; opacity: 1; transform: scale(1); }
    .dc-growth-uiux-text-line { animation: none; background: rgba(255, 255, 255, 0.32); border-color: transparent; }
    .dc-growth-uiux-btn { animation: none; background: var(--accent-color); border-color: var(--accent-color); }
    .dc-growth-uiux-glow-ring { animation: none; opacity: 0.7; }
}

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

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

/* ===== CONTENT MARKETING HERO VISUAL — .dc-growth-cm-* =====
   One content piece — a small article card — publishes at the center,
   ripple rings spread outward from it as "reach", and a scatter of
   audience dots at varied, organic positions around the edges loop
   continuously inward toward the card, arriving as a small traffic/leads
   indicator rises. Distinct from Digital Marketing's .dc-growth-dm-* (five
   fixed, labeled channel chips in a pentagon feeding a brand node) — here
   there are no channel labels, no fixed geometry, and the source is one
   published piece of content, not many marketing channels. Self-contained
   — .dc-growth-cm-* only appears here. */
.dc-growth-cm-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-cm-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 100px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    animation: dc-growth-cm-card-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.2s;
    z-index: 2;
}

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

.dc-growth-cm-card-headline {
    height: 9px;
    width: 80%;
    border-radius: 3px;
    background: var(--accent-color);
    opacity: 0.85;
}

.dc-growth-cm-card-line {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.dc-growth-cm-card-line.is-short { width: 60%; }

.dc-growth-cm-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 229, 255, 0.45);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: dc-growth-cm-ripple-out 3.2s ease-out infinite;
    animation-delay: 0.9s;
}

.dc-growth-cm-ripple-2 { animation-delay: 2.1s; }

@keyframes dc-growth-cm-ripple-out {
    0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    80%  { opacity: 0; transform: translate(-50%, -50%) scale(6.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(6.5); }
}

.dc-growth-cm-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
    opacity: 0;
    animation-duration: 3.4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: var(--delay, 0s);
}

/* Each dot travels from its own scattered edge position to just outside
   the card, fading color from neutral grey to cyan as it "arrives" —
   six separate keyframes (not one shared one) because each starts
   somewhere different, same technique already proven on the Paid Ads
   targeting visual. */
.dc-growth-cm-dot-1 { top: 80px;  left: 60px;  animation-name: dc-growth-cm-travel-1; }
.dc-growth-cm-dot-2 { top: 70px;  left: 330px; animation-name: dc-growth-cm-travel-2; }
.dc-growth-cm-dot-3 { top: 200px; left: 40px;  animation-name: dc-growth-cm-travel-3; }
.dc-growth-cm-dot-4 { top: 210px; left: 350px; animation-name: dc-growth-cm-travel-4; }
.dc-growth-cm-dot-5 { top: 280px; left: 100px; animation-name: dc-growth-cm-travel-5; }
.dc-growth-cm-dot-6 { top: 285px; left: 290px; animation-name: dc-growth-cm-travel-6; }

@keyframes dc-growth-cm-travel-1 {
    0%   { opacity: 0; top: 80px; left: 60px; background: rgba(255, 255, 255, 0.32); }
    12%  { opacity: 1; }
    80%  { opacity: 1; top: 128px; left: 158px; background: var(--accent-color); }
    100% { opacity: 0; top: 128px; left: 158px; background: var(--accent-color); }
}
@keyframes dc-growth-cm-travel-2 {
    0%   { opacity: 0; top: 70px; left: 330px; background: rgba(255, 255, 255, 0.32); }
    12%  { opacity: 1; }
    80%  { opacity: 1; top: 128px; left: 242px; background: var(--accent-color); }
    100% { opacity: 0; top: 128px; left: 242px; background: var(--accent-color); }
}
@keyframes dc-growth-cm-travel-3 {
    0%   { opacity: 0; top: 200px; left: 40px; background: rgba(255, 255, 255, 0.32); }
    12%  { opacity: 1; }
    80%  { opacity: 1; top: 155px; left: 162px; background: var(--accent-color); }
    100% { opacity: 0; top: 155px; left: 162px; background: var(--accent-color); }
}
@keyframes dc-growth-cm-travel-4 {
    0%   { opacity: 0; top: 210px; left: 350px; background: rgba(255, 255, 255, 0.32); }
    12%  { opacity: 1; }
    80%  { opacity: 1; top: 155px; left: 238px; background: var(--accent-color); }
    100% { opacity: 0; top: 155px; left: 238px; background: var(--accent-color); }
}
@keyframes dc-growth-cm-travel-5 {
    0%   { opacity: 0; top: 280px; left: 100px; background: rgba(255, 255, 255, 0.32); }
    12%  { opacity: 1; }
    80%  { opacity: 1; top: 178px; left: 175px; background: var(--accent-color); }
    100% { opacity: 0; top: 178px; left: 175px; background: var(--accent-color); }
}
@keyframes dc-growth-cm-travel-6 {
    0%   { opacity: 0; top: 285px; left: 290px; background: rgba(255, 255, 255, 0.32); }
    12%  { opacity: 1; }
    80%  { opacity: 1; top: 178px; left: 225px; background: var(--accent-color); }
    100% { opacity: 0; top: 178px; left: 225px; background: var(--accent-color); }
}

.dc-growth-cm-lead-badge {
    position: absolute;
    top: 26px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    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);
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
    animation: dc-growth-cm-lead-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-cm-lead-glow 2.4s ease-in-out infinite;
    animation-delay: 1.9s, 2.4s;
    z-index: 3;
}

@keyframes dc-growth-cm-lead-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dc-growth-cm-lead-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-growth-cm-lead-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 13px;
}

.dc-growth-cm-lead-bar {
    width: 3px;
    border-radius: 1px 1px 0 0;
    background: var(--accent-color);
    transform-origin: bottom;
    transform: scaleY(0);
    animation: dc-growth-cm-lead-bar-grow 0.4s ease forwards;
    animation-delay: calc(2.05s + var(--n) * 0.08s);
}

.dc-growth-cm-lead-bar:nth-child(1) { height: 6px; }
.dc-growth-cm-lead-bar:nth-child(2) { height: 9px; }
.dc-growth-cm-lead-bar:nth-child(3) { height: 13px; }

@keyframes dc-growth-cm-lead-bar-grow { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-growth-cm-card { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-growth-cm-ripple { animation: none; opacity: 0; }
    .dc-growth-cm-dot { animation: none; opacity: 0; }
    .dc-growth-cm-lead-badge { animation: none; opacity: 1; transform: translateY(0) scale(1); }
    .dc-growth-cm-lead-bar { animation: none; transform: scaleY(1); }
}

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

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

/* ===== EMAIL MARKETING HERO VISUAL — .dc-growth-email-* =====
   A compose card assembles, an envelope badge pulses then "sends" — six
   dots fly outward and down to a row of recipient chips (delivery), a
   subset of which then pick up a small checkmark badge (opened), and an
   open-rate readout lands last. Outbound send → deliver → open, the
   inverse of Paid Ads' inward-narrowing reticle and unrelated to Digital
   Marketing's continuous radial inflow — this is a one-shot outbound
   broadcast with a clear delivered/opened distinction. Self-contained —
   .dc-growth-email-* only appears here. */
.dc-growth-email-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-email-compose {
    position: absolute;
    top: 20px;
    left: 150px;
    width: 100px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-10px);
    animation: dc-growth-email-compose-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 0.15s;
    z-index: 2;
}

@keyframes dc-growth-email-compose-in { to { opacity: 1; transform: translateY(0); } }

.dc-growth-email-compose-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dc-growth-email-compose-header i {
    font-size: 11px;
    color: var(--accent-color);
}

.dc-growth-email-compose-subject {
    height: 7px;
    flex: 1;
    border-radius: 3px;
    background: rgba(0, 229, 255, 0.28);
}

.dc-growth-email-compose-line {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.16);
}

.dc-growth-email-compose-line.is-short { width: 65%; }

.dc-growth-email-send-badge {
    position: absolute;
    top: 108px;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.12);
    border: 1.5px solid rgba(0, 229, 255, 0.5);
    opacity: 0;
    transform: translateX(-50%) scale(0.6);
    animation: dc-growth-email-send-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-email-send-pulse 1s ease-in-out infinite,
               dc-growth-email-send-out 0.35s ease forwards;
    animation-delay: 0.9s, 0.9s, 1.35s;
    z-index: 2;
}

.dc-growth-email-send-badge i {
    font-size: 15px;
    color: var(--accent-color);
}

@keyframes dc-growth-email-send-in { to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes dc-growth-email-send-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.3); }
    50%      { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); }
}
@keyframes dc-growth-email-send-out { to { opacity: 0; transform: translateX(-50%) scale(0.7); } }

.dc-growth-email-fly-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.75);
    opacity: 0;
}

.dc-growth-email-fly-dot-1 { animation: dc-growth-email-fly-1 0.55s ease-in forwards; animation-delay: 1.2s; }
.dc-growth-email-fly-dot-2 { animation: dc-growth-email-fly-2 0.55s ease-in forwards; animation-delay: 1.25s; }
.dc-growth-email-fly-dot-3 { animation: dc-growth-email-fly-3 0.55s ease-in forwards; animation-delay: 1.3s; }
.dc-growth-email-fly-dot-4 { animation: dc-growth-email-fly-4 0.55s ease-in forwards; animation-delay: 1.35s; }
.dc-growth-email-fly-dot-5 { animation: dc-growth-email-fly-5 0.55s ease-in forwards; animation-delay: 1.4s; }
.dc-growth-email-fly-dot-6 { animation: dc-growth-email-fly-6 0.55s ease-in forwards; animation-delay: 1.45s; }

@keyframes dc-growth-email-fly-1 { 0% { opacity: 0; top: 128px; left: 200px; } 15% { opacity: 1; } 100% { opacity: 0; top: 262px; left: 30px; } }
@keyframes dc-growth-email-fly-2 { 0% { opacity: 0; top: 128px; left: 200px; } 15% { opacity: 1; } 100% { opacity: 0; top: 262px; left: 96px; } }
@keyframes dc-growth-email-fly-3 { 0% { opacity: 0; top: 128px; left: 200px; } 15% { opacity: 1; } 100% { opacity: 0; top: 262px; left: 162px; } }
@keyframes dc-growth-email-fly-4 { 0% { opacity: 0; top: 128px; left: 200px; } 15% { opacity: 1; } 100% { opacity: 0; top: 262px; left: 228px; } }
@keyframes dc-growth-email-fly-5 { 0% { opacity: 0; top: 128px; left: 200px; } 15% { opacity: 1; } 100% { opacity: 0; top: 262px; left: 294px; } }
@keyframes dc-growth-email-fly-6 { 0% { opacity: 0; top: 128px; left: 200px; } 15% { opacity: 1; } 100% { opacity: 0; top: 262px; left: 360px; } }

.dc-growth-email-recipient {
    position: absolute;
    top: 270px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    opacity: 0;
    animation: dc-growth-email-recipient-in 0.3s ease forwards;
}

.dc-growth-email-recipient-1 { left: 20px;  animation: dc-growth-email-recipient-in 0.3s ease forwards, dc-growth-email-deliver 0.3s ease forwards; animation-delay: 0.3s, 1.75s; }
.dc-growth-email-recipient-2 { left: 86px;  animation: dc-growth-email-recipient-in 0.3s ease forwards, dc-growth-email-deliver 0.3s ease forwards; animation-delay: 0.35s, 1.8s; }
.dc-growth-email-recipient-3 { left: 152px; animation: dc-growth-email-recipient-in 0.3s ease forwards, dc-growth-email-deliver 0.3s ease forwards; animation-delay: 0.4s, 1.85s; }
.dc-growth-email-recipient-4 { left: 218px; animation: dc-growth-email-recipient-in 0.3s ease forwards, dc-growth-email-deliver 0.3s ease forwards; animation-delay: 0.45s, 1.9s; }
.dc-growth-email-recipient-5 { left: 284px; animation: dc-growth-email-recipient-in 0.3s ease forwards, dc-growth-email-deliver 0.3s ease forwards; animation-delay: 0.5s, 1.95s; }
.dc-growth-email-recipient-6 { left: 350px; animation: dc-growth-email-recipient-in 0.3s ease forwards, dc-growth-email-deliver 0.3s ease forwards; animation-delay: 0.55s, 2s; }

@keyframes dc-growth-email-recipient-in { to { opacity: 1; } }
@keyframes dc-growth-email-deliver { to { background: rgba(0, 229, 255, 0.22); border-color: rgba(0, 229, 255, 0.55); } }

.dc-growth-email-open-mark {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 25, 43, 0.95);
    border: 1px solid rgba(0, 229, 255, 0.5);
    opacity: 0;
    transform: scale(0.5);
    animation: dc-growth-email-open-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dc-growth-email-open-mark i {
    font-size: 7px;
    color: var(--accent-color);
}

.dc-growth-email-recipient-2 .dc-growth-email-open-mark { animation-delay: 2.3s; }
.dc-growth-email-recipient-4 .dc-growth-email-open-mark { animation-delay: 2.45s; }
.dc-growth-email-recipient-5 .dc-growth-email-open-mark { animation-delay: 2.6s; }

@keyframes dc-growth-email-open-in { to { opacity: 1; transform: scale(1); } }

.dc-growth-email-rate-badge {
    position: absolute;
    bottom: 8px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    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);
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(0.85);
    animation: dc-growth-email-rate-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-email-rate-glow 2.4s ease-in-out infinite;
    animation-delay: 2.7s, 3.15s;
    z-index: 3;
}

.dc-growth-email-rate-badge i {
    font-size: 12px;
    color: var(--accent-color);
}

@keyframes dc-growth-email-rate-in { to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes dc-growth-email-rate-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-growth-email-rate-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 13px;
}

.dc-growth-email-rate-bar {
    width: 3px;
    border-radius: 1px 1px 0 0;
    background: var(--accent-color);
    transform-origin: bottom;
    transform: scaleY(0);
    animation: dc-growth-email-rate-bar-grow 0.4s ease forwards;
    animation-delay: calc(2.85s + var(--n) * 0.08s);
}

.dc-growth-email-rate-bar:nth-child(1) { height: 6px; }
.dc-growth-email-rate-bar:nth-child(2) { height: 9px; }
.dc-growth-email-rate-bar:nth-child(3) { height: 13px; }

@keyframes dc-growth-email-rate-bar-grow { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-growth-email-compose { animation: none; opacity: 1; transform: translateY(0); }
    .dc-growth-email-send-badge { animation: none; opacity: 0; }
    .dc-growth-email-fly-dot-1, .dc-growth-email-fly-dot-2, .dc-growth-email-fly-dot-3,
    .dc-growth-email-fly-dot-4, .dc-growth-email-fly-dot-5, .dc-growth-email-fly-dot-6 { animation: none; opacity: 0; }
    .dc-growth-email-recipient { animation: none; opacity: 1; background: rgba(0, 229, 255, 0.22); border-color: rgba(0, 229, 255, 0.55); }
    .dc-growth-email-open-mark { animation: none; opacity: 1; transform: scale(1); }
    .dc-growth-email-rate-badge { animation: none; opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    .dc-growth-email-rate-bar { animation: none; transform: scaleY(1); }
}

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

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

/* ===== CONTENT WRITING HERO VISUAL — .dc-growth-write-* =====
   A document page where the words write themselves: a headline and three
   body lines each reveal left-to-right via a stepped clip-path (a genuine
   typewriter cadence, not a smooth wipe), while a blinking cursor jumps
   down to whichever row is currently "typing", and a key phrase within
   the last line lights up cyan once everything is written. The only
   visual on the site built from progressive text-reveal + a traveling
   caret — distinct from Content Marketing's audience-attraction and every
   other page. Self-contained — .dc-growth-write-* only appears here. */
.dc-growth-write-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-write-page {
    position: absolute;
    top: 40px;
    left: 70px;
    width: 260px;
    height: 160px;
    border-radius: 12px;
    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);
    opacity: 0;
    transform: translateY(14px);
    animation: dc-growth-write-page-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 0.2s;
}

@keyframes dc-growth-write-page-in { to { opacity: 1; transform: translateY(0); } }

.dc-growth-write-headline {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 165px;
    height: 12px;
    border-radius: 3px;
    background: var(--accent-color);
    opacity: 0.9;
    clip-path: inset(0 100% 0 0);
    animation: dc-growth-write-reveal 0.5s steps(20, end) forwards;
    animation-delay: 0.5s;
}

.dc-growth-write-line {
    position: absolute;
    left: 20px;
    height: 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.26);
    clip-path: inset(0 100% 0 0);
    animation: dc-growth-write-reveal 0.5s steps(20, end) forwards;
}

.dc-growth-write-line-1 { top: 44px; width: 220px; animation-delay: 1s; }
.dc-growth-write-line-2 { top: 63px; width: 176px; animation-delay: 1.5s; }
.dc-growth-write-line-3 { top: 82px; width: 132px; animation-delay: 2s; }

@keyframes dc-growth-write-reveal { to { clip-path: inset(0 0% 0 0); } }

.dc-growth-write-cursor {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 2px;
    height: 12px;
    background: var(--accent-color);
    box-shadow: 0 0 5px rgba(0, 229, 255, 0.7);
    opacity: 0;
    animation: dc-growth-write-cursor-in 0.2s ease forwards,
               dc-growth-write-cursor-blink 0.9s step-end infinite,
               dc-growth-write-cursor-move 2s steps(1, end) forwards,
               dc-growth-write-cursor-out 0.2s ease forwards;
    animation-delay: 0.5s, 0.5s, 0.5s, 2.5s;
}

@keyframes dc-growth-write-cursor-in { to { opacity: 1; } }
@keyframes dc-growth-write-cursor-blink { 50% { opacity: 0; } }
@keyframes dc-growth-write-cursor-out { to { opacity: 0; } }

@keyframes dc-growth-write-cursor-move {
    0%   { top: 20px; }
    24%  { top: 20px; }
    25%  { top: 44px; }
    49%  { top: 44px; }
    50%  { top: 63px; }
    74%  { top: 63px; }
    75%  { top: 82px; }
    100% { top: 82px; }
}

.dc-growth-write-highlight {
    position: absolute;
    top: 82px;
    left: 20px;
    width: 70px;
    height: 7px;
    border-radius: 3px;
    background: var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    animation: dc-growth-write-highlight-in 0.4s ease forwards,
               dc-growth-write-highlight-glow 2.2s ease-in-out infinite;
    animation-delay: 2.7s, 3.1s;
    z-index: 1;
}

@keyframes dc-growth-write-highlight-in { to { opacity: 1; transform: scaleX(1); } }
@keyframes dc-growth-write-highlight-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.5); }
    50%      { box-shadow: 0 0 16px rgba(0, 229, 255, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-growth-write-page { animation: none; opacity: 1; transform: translateY(0); }
    .dc-growth-write-headline,
    .dc-growth-write-line { animation: none; clip-path: inset(0 0% 0 0); }
    .dc-growth-write-cursor { animation: none; opacity: 0; }
    .dc-growth-write-highlight { animation: none; opacity: 1; transform: scaleX(1); }
}

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

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

/* ===== CRO HERO VISUAL — .dc-growth-cro-* =====
   Two page-variant mockups side by side. Visitor dots stream into both;
   variant B's button fills cyan partway through (the optimized version
   "activating"), its conversion bar grows taller than A's, and B finally
   gets a winner glow + badge. Distinct from Paid Ads' targeting reticle
   and every other visual — this is a straight A/B comparison, not
   targeting or a single funnel. All figures illustrative. Self-contained
   — .dc-growth-cro-* only appears here. */
.dc-growth-cro-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-cro-card {
    position: absolute;
    top: 55px;
    width: 130px;
    height: 165px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-10px);
    animation: dc-growth-cro-card-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.dc-growth-cro-card-a { left: 45px; animation-delay: 0.2s; }
.dc-growth-cro-card-b {
    left: 225px;
    animation: dc-growth-cro-card-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
               dc-growth-cro-card-glow 2.2s ease-in-out infinite;
    animation-delay: 0.35s, 2.75s;
}

@keyframes dc-growth-cro-card-in { to { opacity: 1; transform: translateY(0); } }

.dc-growth-cro-card-header {
    height: 9px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.dc-growth-cro-card-line {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
}

.dc-growth-cro-card-line.is-short { width: 65%; }

.dc-growth-cro-card-button {
    margin-top: auto;
    height: 22px;
    border-radius: 6px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.dc-growth-cro-card-b .dc-growth-cro-card-button {
    animation: dc-growth-cro-button-fill 0.45s ease forwards;
    animation-delay: 1.3s;
}

@keyframes dc-growth-cro-button-fill {
    to { background: var(--accent-color); border-color: var(--accent-color); box-shadow: 0 6px 16px -6px rgba(0, 229, 255, 0.6); }
}

.dc-growth-cro-visitor {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
    opacity: 0;
}

.dc-growth-cro-visitor-a1 { animation: dc-growth-cro-fly-a 1.8s ease-in-out infinite; animation-delay: 1s; }
.dc-growth-cro-visitor-a2 { animation: dc-growth-cro-fly-a 1.8s ease-in-out infinite; animation-delay: 1.5s; }
.dc-growth-cro-visitor-b1 { animation: dc-growth-cro-fly-b 1.8s ease-in-out infinite; animation-delay: 1.1s; }
.dc-growth-cro-visitor-b2 { animation: dc-growth-cro-fly-b 1.8s ease-in-out infinite; animation-delay: 1.6s; }

@keyframes dc-growth-cro-fly-a {
    0%   { opacity: 0; top: 20px; left: 200px; }
    15%  { opacity: 1; }
    85%  { opacity: 1; top: 90px; left: 110px; }
    100% { opacity: 0; top: 90px; left: 110px; }
}
@keyframes dc-growth-cro-fly-b {
    0%   { opacity: 0; top: 20px; left: 200px; }
    15%  { opacity: 1; }
    85%  { opacity: 1; top: 90px; left: 290px; }
    100% { opacity: 0; top: 90px; left: 290px; }
}

.dc-growth-cro-bar-track {
    position: absolute;
    top: 232px;
    width: 130px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
}

.dc-growth-cro-bar-track-a { left: 45px; }
.dc-growth-cro-bar-track-b { left: 225px; }

.dc-growth-cro-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.4);
    transform-origin: left;
    transform: scaleX(0);
    animation: dc-growth-cro-bar-grow 0.5s ease forwards;
}

.dc-growth-cro-bar-track-a .dc-growth-cro-bar-fill { width: 35%; animation-delay: 1.8s; }
.dc-growth-cro-bar-track-b .dc-growth-cro-bar-fill { width: 68%; background: var(--accent-color); animation-delay: 1.9s; }

@keyframes dc-growth-cro-bar-grow { to { transform: scaleX(1); } }

.dc-growth-cro-winner {
    position: absolute;
    top: 40px;
    left: 320px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 7px;
    border-radius: 999px;
    background: rgba(13, 25, 43, 0.9);
    border: 1px solid rgba(0, 229, 255, 0.5);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-white);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-growth-cro-winner-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-cro-winner-glow 2.2s ease-in-out infinite;
    animation-delay: 2.3s, 2.75s;
}

.dc-growth-cro-winner i {
    font-size: 10px;
    color: var(--accent-color);
}

@keyframes dc-growth-cro-winner-in { to { opacity: 1; transform: scale(1); } }
@keyframes dc-growth-cro-winner-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(0, 229, 255, 0); }
    50%      { box-shadow: 0 0 14px rgba(0, 229, 255, 0.5); }
}

@keyframes dc-growth-cro-card-glow {
    0%, 100% { border-color: rgba(255, 255, 255, 0.14); }
    50%      { border-color: rgba(0, 229, 255, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-growth-cro-card { animation: none; opacity: 1; transform: translateY(0); }
    .dc-growth-cro-card-b .dc-growth-cro-card-button { animation: none; background: var(--accent-color); border-color: var(--accent-color); }
    .dc-growth-cro-visitor-a1, .dc-growth-cro-visitor-a2,
    .dc-growth-cro-visitor-b1, .dc-growth-cro-visitor-b2 { animation: none; opacity: 0; }
    .dc-growth-cro-bar-fill { animation: none; transform: scaleX(1); }
    .dc-growth-cro-winner { animation: none; opacity: 1; transform: scale(1); }
}

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

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

/* ===== LANDING PAGE OPTIMIZATION HERO VISUAL — .dc-growth-lp-* =====
   A single portrait page mockup assembles top-to-bottom: headline, hero
   block, trust stars, then a CTA button that lands with a pop and keeps
   pulsing, then a form field — each element glowing as it lands, ending
   with one bigger "convert" ring expanding from the CTA. One focused page,
   not a spread of deliverables (that's Graphic Design) and not a
   comparison (that's CRO). Self-contained — .dc-growth-lp-* only appears
   here. */
.dc-growth-lp-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-lp-page {
    position: absolute;
    top: 30px;
    left: 110px;
    width: 180px;
    height: 280px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 12px;
    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);
    opacity: 0;
    transform: translateY(14px);
    animation: dc-growth-lp-page-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 0.15s;
}

@keyframes dc-growth-lp-page-in { to { opacity: 1; transform: translateY(0); } }

.dc-growth-lp-headline {
    height: 14px;
    width: 80%;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.28);
    opacity: 0;
    transform: scale(0.85);
    animation: dc-growth-lp-land 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.5s;
}

.dc-growth-lp-hero-block {
    height: 68px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.16), rgba(0, 229, 255, 0.04));
    border: 1px solid rgba(0, 229, 255, 0.2);
    opacity: 0;
    transform: scale(0.85);
    animation: dc-growth-lp-land 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.85s;
}

.dc-growth-lp-trust {
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: scale(0.85);
    animation: dc-growth-lp-land 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.2s;
}

.dc-growth-lp-trust i {
    font-size: 10px;
    color: var(--accent-color);
}

.dc-growth-lp-cta {
    height: 30px;
    border-radius: 7px;
    background: var(--accent-color);
    opacity: 0;
    transform: scale(0.8);
    animation: dc-growth-lp-land 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-lp-cta-pulse 1.6s ease-in-out infinite;
    animation-delay: 1.55s, 2s;
}

@keyframes dc-growth-lp-cta-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-growth-lp-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: scale(0.85);
    animation: dc-growth-lp-land 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.9s;
}

.dc-growth-lp-form-field {
    height: 14px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

@keyframes dc-growth-lp-land { to { opacity: 1; transform: scale(1); } }

.dc-growth-lp-convert-ring {
    position: absolute;
    top: 155px;
    left: 50%;
    width: 40px;
    height: 30px;
    border-radius: 7px;
    border: 2px solid var(--accent-color);
    transform: translateX(-50%) scale(1);
    opacity: 0;
    animation: dc-growth-lp-ring-out 1s ease-out infinite;
    animation-delay: 2.3s;
}

@keyframes dc-growth-lp-ring-out {
    0%   { opacity: 0.7; transform: translateX(-50%) scale(1); }
    80%  { opacity: 0; transform: translateX(-50%) scale(2.4); }
    100% { opacity: 0; transform: translateX(-50%) scale(2.4); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-growth-lp-page { animation: none; opacity: 1; transform: translateY(0); }
    .dc-growth-lp-headline,
    .dc-growth-lp-hero-block,
    .dc-growth-lp-trust,
    .dc-growth-lp-form { animation: none; opacity: 1; transform: scale(1); }
    .dc-growth-lp-cta { animation: none; opacity: 1; transform: scale(1); }
    .dc-growth-lp-convert-ring { animation: none; opacity: 0; }
}

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

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

/* ===== LEAD GENERATION HERO VISUAL — .dc-growth-lead-* =====
   A genuine funnel shape (a clipped trapezoid with two angled wall lines,
   not a rectangle) — seven visitor dots fall through its wide mouth,
   converging as they go; three fade away at the narrow exit while four
   continue into a "captured leads" tray below, lighting cyan as they
   land, with an illustrative lead counter alongside. Deliberately NOT
   Build's Data Engineering visual (.dc-build-data-*), which streams
   particles horizontally into a 3x3 grid with no funnel shape at all —
   this has a real tapering funnel silhouette and a landing tray. Self-
   contained — .dc-growth-lead-* only appears here. */
.dc-growth-lead-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

@keyframes dc-growth-lead-shape-in { to { opacity: 1; } }

.dc-growth-lead-funnel-body {
    position: absolute;
    top: 30px;
    left: 100px;
    width: 200px;
    height: 150px;
    clip-path: polygon(0 0, 100% 0, 68% 100%, 32% 100%);
    background: linear-gradient(to bottom, rgba(0, 229, 255, 0.08), rgba(0, 229, 255, 0.02));
    opacity: 0;
    animation: dc-growth-lead-shape-in 0.6s ease forwards;
    animation-delay: 0.2s;
}

.dc-growth-lead-funnel-rim {
    position: absolute;
    top: 30px;
    left: 100px;
    width: 200px;
    height: 1.5px;
    background: linear-gradient(to right, transparent, rgba(0, 229, 255, 0.5), transparent);
    opacity: 0;
    animation: dc-growth-lead-shape-in 0.5s ease forwards;
    animation-delay: 0.15s;
}

.dc-growth-lead-funnel-wall {
    position: absolute;
    top: 30px;
    width: 163px;
    height: 1.5px;
    background: linear-gradient(to right, rgba(0, 229, 255, 0.5), rgba(0, 229, 255, 0.15));
    transform-origin: 0% 50%;
    opacity: 0;
    animation: dc-growth-lead-shape-in 0.5s ease forwards;
}

.dc-growth-lead-funnel-wall-left  { left: 100px; transform: rotate(67deg);  animation-delay: 0.3s; }
.dc-growth-lead-funnel-wall-right { left: 300px; transform: rotate(113deg); animation-delay: 0.45s; }

.dc-growth-lead-tray {
    position: absolute;
    top: 205px;
    left: 165px;
    width: 70px;
    height: 35px;
    border-radius: 6px 6px 10px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(0, 229, 255, 0.35);
    opacity: 0;
    animation: dc-growth-lead-shape-in 0.5s ease forwards;
    animation-delay: 1.2s;
}

.dc-growth-lead-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
    opacity: 0;
    animation-duration: 3.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.dc-growth-lead-dot-1 { animation-name: dc-growth-lead-fall-1; animation-delay: 1.4s; }
.dc-growth-lead-dot-2 { animation-name: dc-growth-lead-fall-2; animation-delay: 1.55s; }
.dc-growth-lead-dot-3 { animation-name: dc-growth-lead-fall-3; animation-delay: 1.7s; }
.dc-growth-lead-dot-4 { animation-name: dc-growth-lead-fall-4; animation-delay: 1.85s; }
.dc-growth-lead-dot-5 { animation-name: dc-growth-lead-fall-5; animation-delay: 2s; }
.dc-growth-lead-dot-6 { animation-name: dc-growth-lead-fall-6; animation-delay: 2.15s; }
.dc-growth-lead-dot-7 { animation-name: dc-growth-lead-fall-7; animation-delay: 2.3s; }

/* Leads (1, 3, 5, 7) fall through the funnel and continue into the tray,
   lighting cyan as they land. Non-leads (2, 4, 6) fade away at the
   funnel's narrow exit — many enter, fewer become captured leads. */
@keyframes dc-growth-lead-fall-1 {
    0%   { opacity: 0; top: 38px;  left: 115px; background: rgba(255, 255, 255, 0.35); }
    10%  { opacity: 1; }
    45%  { top: 175px; left: 175px; background: rgba(255, 255, 255, 0.35); }
    55%  { background: var(--accent-color); }
    88%  { opacity: 1; top: 218px; left: 180px; background: var(--accent-color); }
    100% { opacity: 0; top: 218px; left: 180px; background: var(--accent-color); }
}
@keyframes dc-growth-lead-fall-2 {
    0%   { opacity: 0; top: 35px; left: 150px; background: rgba(255, 255, 255, 0.35); }
    10%  { opacity: 1; }
    45%  { opacity: 1; top: 175px; left: 185px; }
    60%  { opacity: 0; top: 175px; left: 185px; }
    100% { opacity: 0; top: 175px; left: 185px; }
}
@keyframes dc-growth-lead-fall-3 {
    0%   { opacity: 0; top: 40px;  left: 180px; background: rgba(255, 255, 255, 0.35); }
    10%  { opacity: 1; }
    45%  { top: 175px; left: 195px; background: rgba(255, 255, 255, 0.35); }
    55%  { background: var(--accent-color); }
    88%  { opacity: 1; top: 218px; left: 195px; background: var(--accent-color); }
    100% { opacity: 0; top: 218px; left: 195px; background: var(--accent-color); }
}
@keyframes dc-growth-lead-fall-4 {
    0%   { opacity: 0; top: 36px; left: 210px; background: rgba(255, 255, 255, 0.35); }
    10%  { opacity: 1; }
    45%  { opacity: 1; top: 175px; left: 205px; }
    60%  { opacity: 0; top: 175px; left: 205px; }
    100% { opacity: 0; top: 175px; left: 205px; }
}
@keyframes dc-growth-lead-fall-5 {
    0%   { opacity: 0; top: 42px;  left: 240px; background: rgba(255, 255, 255, 0.35); }
    10%  { opacity: 1; }
    45%  { top: 175px; left: 215px; background: rgba(255, 255, 255, 0.35); }
    55%  { background: var(--accent-color); }
    88%  { opacity: 1; top: 218px; left: 210px; background: var(--accent-color); }
    100% { opacity: 0; top: 218px; left: 210px; background: var(--accent-color); }
}
@keyframes dc-growth-lead-fall-6 {
    0%   { opacity: 0; top: 38px; left: 265px; background: rgba(255, 255, 255, 0.35); }
    10%  { opacity: 1; }
    45%  { opacity: 1; top: 175px; left: 225px; }
    60%  { opacity: 0; top: 175px; left: 225px; }
    100% { opacity: 0; top: 175px; left: 225px; }
}
@keyframes dc-growth-lead-fall-7 {
    0%   { opacity: 0; top: 40px;  left: 285px; background: rgba(255, 255, 255, 0.35); }
    10%  { opacity: 1; }
    45%  { top: 175px; left: 230px; background: rgba(255, 255, 255, 0.35); }
    55%  { background: var(--accent-color); }
    88%  { opacity: 1; top: 218px; left: 220px; background: var(--accent-color); }
    100% { opacity: 0; top: 218px; left: 220px; background: var(--accent-color); }
}

.dc-growth-lead-counter {
    position: absolute;
    top: 250px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    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);
    opacity: 0;
    transform: translateX(-50%) scale(0.85);
    animation: dc-growth-lead-counter-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-lead-counter-glow 2.4s ease-in-out infinite;
    animation-delay: 2.4s, 2.85s;
}

@keyframes dc-growth-lead-counter-in { to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes dc-growth-lead-counter-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-growth-lead-counter-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 13px;
}

.dc-growth-lead-counter-bar {
    width: 3px;
    border-radius: 1px 1px 0 0;
    background: var(--accent-color);
    transform-origin: bottom;
    transform: scaleY(0);
    animation: dc-growth-lead-counter-bar-grow 0.4s ease forwards;
    animation-delay: calc(2.55s + var(--n) * 0.08s);
}

.dc-growth-lead-counter-bar:nth-child(1) { height: 6px; }
.dc-growth-lead-counter-bar:nth-child(2) { height: 9px; }
.dc-growth-lead-counter-bar:nth-child(3) { height: 13px; }

@keyframes dc-growth-lead-counter-bar-grow { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-growth-lead-funnel-body,
    .dc-growth-lead-funnel-rim,
    .dc-growth-lead-funnel-wall,
    .dc-growth-lead-tray { animation: none; opacity: 1; }
    .dc-growth-lead-dot { animation: none; opacity: 0; }
    .dc-growth-lead-counter { animation: none; opacity: 1; transform: translateX(-50%) scale(1); }
    .dc-growth-lead-counter-bar { animation: none; transform: scaleY(1); }
}

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

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

/* ===== GROWTH STRATEGY HERO VISUAL — .dc-growth-strategy-* =====
   A rising staircase roadmap: a drawn line climbs left-to-right through
   three numbered milestone nodes that light up in sequence as the line
   reaches them, ending at a larger "goal" marker that glows once reached.
   Distinct from SEO's smooth continuous area-chart (traffic over time,
   no discrete stages) — this is a staged plan with visible numbered
   milestones and one clear destination. Self-contained —
   .dc-growth-strategy-* only appears here. */
.dc-growth-strategy-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-strategy-path-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dc-growth-strategy-path-line {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
    animation: dc-growth-strategy-line-draw 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.3s;
}

@keyframes dc-growth-strategy-line-draw { to { stroke-dashoffset: 0; } }

.dc-growth-strategy-milestone {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.6);
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-white);
    opacity: 0;
    animation: dc-growth-strategy-milestone-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dc-growth-strategy-milestone-1 { top: 260px; left: 60px;  animation-delay: 0.3s; }
.dc-growth-strategy-milestone-2 { top: 205px; left: 160px; animation-delay: 0.63s; }
.dc-growth-strategy-milestone-3 { top: 140px; left: 260px; animation-delay: 0.97s; }

@keyframes dc-growth-strategy-milestone-in {
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); background: rgba(0, 229, 255, 0.16); border-color: var(--accent-color); }
}

.dc-growth-strategy-goal {
    position: absolute;
    top: 70px;
    left: 350px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.6);
    background: rgba(0, 229, 255, 0.14);
    border: 1.5px solid rgba(0, 229, 255, 0.5);
    font-size: 20px;
    color: var(--accent-color);
    opacity: 0;
    animation: dc-growth-strategy-goal-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               dc-growth-strategy-goal-pulse 2.4s ease-in-out infinite;
    animation-delay: 1.35s, 1.85s;
}

@keyframes dc-growth-strategy-goal-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes dc-growth-strategy-goal-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.3); }
    50%      { box-shadow: 0 0 0 12px rgba(0, 229, 255, 0); }
}

.dc-growth-strategy-goal-label {
    position: absolute;
    top: 38px;
    left: 350px;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(13, 25, 43, 0.9);
    border: 1px solid rgba(0, 229, 255, 0.4);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-white);
    opacity: 0;
    animation: dc-growth-strategy-label-in 0.4s ease forwards;
    animation-delay: 1.6s;
}

@keyframes dc-growth-strategy-label-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .dc-growth-strategy-path-line { animation: none; stroke-dashoffset: 0; }
    .dc-growth-strategy-milestone { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); background: rgba(0, 229, 255, 0.16); border-color: var(--accent-color); }
    .dc-growth-strategy-goal { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .dc-growth-strategy-goal-label { animation: none; opacity: 1; }
}

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

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

/* ===== MARKETING AUTOMATION HERO VISUAL — .dc-growth-mktauto-* =====
   A trigger flows to an email node, into a diamond condition node, which
   then genuinely FORKS into two separate diagonal paths ending in two
   different action nodes (tagged / converted) — a real branching
   customer journey. Deliberately NOT Build's Workflow Automation
   (.dc-build-flow-*), which is a single straight row of generic step
   nodes with no fork and no email-specific iconography. Tokens loop
   continuously along the trunk and both branches. Self-contained —
   .dc-growth-mktauto-* only appears here. */
.dc-growth-mktauto-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-mktauto-node {
    position: absolute;
    top: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    animation: dc-growth-mktauto-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dc-growth-mktauto-node-in {
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); background: rgba(0, 229, 255, 0.12); border-color: rgba(0, 229, 255, 0.45); }
}

.dc-growth-mktauto-node-trigger {
    left: 40px;
    width: 36px;
    height: 36px;
    font-size: 14px;
    color: var(--accent-color);
    animation-delay: 0.2s;
}

.dc-growth-mktauto-node-email {
    left: 130px;
    width: 36px;
    height: 36px;
    font-size: 14px;
    color: var(--accent-color);
    animation-delay: 0.65s;
}

.dc-growth-mktauto-node-condition {
    left: 220px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.6);
    animation-name: dc-growth-mktauto-condition-in;
    animation-delay: 1.1s;
}

@keyframes dc-growth-mktauto-condition-in {
    to { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); background: rgba(0, 229, 255, 0.12); border-color: rgba(0, 229, 255, 0.45); }
}

.dc-growth-mktauto-node-action {
    width: 34px;
    height: 34px;
    font-size: 13px;
    color: var(--accent-color);
}

.dc-growth-mktauto-node-action-a { left: 310px; top: 100px; animation-delay: 1.7s; }
.dc-growth-mktauto-node-action-b { left: 310px; top: 240px; animation-delay: 1.7s; }

.dc-growth-mktauto-action-label {
    position: absolute;
    left: 310px;
    transform: translateX(-50%);
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(13, 25, 43, 0.9);
    border: 1px solid rgba(0, 229, 255, 0.35);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-white);
    opacity: 0;
    animation: dc-growth-mktauto-label-in 0.4s ease forwards;
    animation-delay: 1.95s;
}

.dc-growth-mktauto-action-label-a { top: 72px; }
.dc-growth-mktauto-action-label-b { top: 268px; }

@keyframes dc-growth-mktauto-label-in { to { opacity: 1; } }

.dc-growth-mktauto-connector {
    position: absolute;
    top: 170px;
    height: 1.5px;
    background: linear-gradient(to right, rgba(0, 229, 255, 0.15), rgba(0, 229, 255, 0.45));
    transform-origin: 0% 50%;
    opacity: 0;
    animation: dc-growth-mktauto-connector-in 0.4s ease forwards;
}

.dc-growth-mktauto-connector-1 { left: 58px;  width: 54px; animation-delay: 0.5s; }
.dc-growth-mktauto-connector-2 { left: 148px; width: 57px; animation-delay: 0.95s; }
.dc-growth-mktauto-connector-a { left: 220px; width: 114px; transform: rotate(-37.9deg); animation-delay: 1.4s; }
.dc-growth-mktauto-connector-b { left: 220px; width: 114px; transform: rotate(37.9deg);  animation-delay: 1.4s; }

@keyframes dc-growth-mktauto-connector-in { to { opacity: 1; } }

.dc-growth-mktauto-token {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.75);
    opacity: 0;
    animation-duration: 2.2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.dc-growth-mktauto-token-trunk { animation-name: dc-growth-mktauto-trunk; animation-delay: 1.9s; }
.dc-growth-mktauto-token-a     { animation-name: dc-growth-mktauto-branch-a; animation-delay: 2.2s; }
.dc-growth-mktauto-token-b     { animation-name: dc-growth-mktauto-branch-b; animation-delay: 2.2s; }

@keyframes dc-growth-mktauto-trunk {
    0%   { opacity: 0; top: 170px; left: 40px; }
    10%  { opacity: 1; }
    90%  { opacity: 1; top: 170px; left: 220px; }
    100% { opacity: 0; top: 170px; left: 220px; }
}
@keyframes dc-growth-mktauto-branch-a {
    0%   { opacity: 0; top: 170px; left: 220px; }
    10%  { opacity: 1; }
    90%  { opacity: 1; top: 100px; left: 310px; }
    100% { opacity: 0; top: 100px; left: 310px; }
}
@keyframes dc-growth-mktauto-branch-b {
    0%   { opacity: 0; top: 170px; left: 220px; }
    10%  { opacity: 1; }
    90%  { opacity: 1; top: 240px; left: 310px; }
    100% { opacity: 0; top: 240px; left: 310px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-growth-mktauto-node { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); background: rgba(0, 229, 255, 0.12); border-color: rgba(0, 229, 255, 0.45); }
    .dc-growth-mktauto-node-condition { animation: none; opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); background: rgba(0, 229, 255, 0.12); border-color: rgba(0, 229, 255, 0.45); }
    .dc-growth-mktauto-action-label { animation: none; opacity: 1; }
    .dc-growth-mktauto-connector { animation: none; opacity: 1; }
    .dc-growth-mktauto-token { animation: none; opacity: 0; }
}

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

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

/* ===== ANALYTICS & TRACKING HERO VISUAL — .dc-growth-analytics-* =====
   Three source icons (page, ad, form) at the top; event dots fall from
   each into a horizontal "tracking layer" bar that pulses as it captures
   them; then the captured signal continues down into two illustrative
   KPI counters and a small trend sparkline. A top-to-bottom capture
   pipeline — sources become metrics — not Build's BI Dashboards
   (.dc-build-bi-*), which is a 2x2 grid of already-populated chart
   widgets with no "events being captured" story. Self-contained —
   .dc-growth-analytics-* only appears here. */
.dc-growth-analytics-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-growth-analytics-source {
    position: absolute;
    top: 35px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    font-size: 12px;
    color: var(--accent-color);
    opacity: 0;
    transform: translateX(-50%) scale(0.7);
    animation: dc-growth-analytics-source-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dc-growth-analytics-source-1 { left: 110px; animation-delay: 0.2s; }
.dc-growth-analytics-source-2 { left: 200px; animation-delay: 0.35s; }
.dc-growth-analytics-source-3 { left: 290px; animation-delay: 0.5s; }

@keyframes dc-growth-analytics-source-in { to { opacity: 1; transform: translateX(-50%) scale(1); } }

.dc-growth-analytics-event {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
    opacity: 0;
    animation-duration: 2.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.dc-growth-analytics-event-1 { animation-name: dc-growth-analytics-fall-1; animation-delay: 0.9s; }
.dc-growth-analytics-event-2 { animation-name: dc-growth-analytics-fall-2; animation-delay: 1.05s; }
.dc-growth-analytics-event-3 { animation-name: dc-growth-analytics-fall-3; animation-delay: 1.2s; }

@keyframes dc-growth-analytics-fall-1 { 0% { opacity: 0; top: 49px; left: 110px; } 15% { opacity: 1; } 85% { opacity: 1; top: 100px; left: 110px; background: var(--accent-color); } 100% { opacity: 0; top: 100px; left: 110px; } }
@keyframes dc-growth-analytics-fall-2 { 0% { opacity: 0; top: 49px; left: 200px; } 15% { opacity: 1; } 85% { opacity: 1; top: 100px; left: 200px; background: var(--accent-color); } 100% { opacity: 0; top: 100px; left: 200px; } }
@keyframes dc-growth-analytics-fall-3 { 0% { opacity: 0; top: 49px; left: 290px; } 15% { opacity: 1; } 85% { opacity: 1; top: 100px; left: 290px; background: var(--accent-color); } 100% { opacity: 0; top: 100px; left: 290px; } }

.dc-growth-analytics-tracker {
    position: absolute;
    top: 88px;
    left: 90px;
    width: 220px;
    height: 26px;
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.06);
    border: 1.5px solid rgba(0, 229, 255, 0.3);
    opacity: 0;
    animation: dc-growth-analytics-tracker-in 0.5s ease forwards,
               dc-growth-analytics-tracker-pulse 2.2s ease-in-out infinite;
    animation-delay: 0.65s, 1.4s;
}

@keyframes dc-growth-analytics-tracker-in { to { opacity: 1; } }
@keyframes dc-growth-analytics-tracker-pulse {
    0%, 100% { border-color: rgba(0, 229, 255, 0.3); }
    50%      { border-color: rgba(0, 229, 255, 0.6); }
}

.dc-growth-analytics-flow-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.75);
    opacity: 0;
    animation-duration: 2.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.dc-growth-analytics-flow-dot-a { animation-name: dc-growth-analytics-flow-a; animation-delay: 1.75s; }
.dc-growth-analytics-flow-dot-b { animation-name: dc-growth-analytics-flow-b; animation-delay: 1.9s; }

@keyframes dc-growth-analytics-flow-a { 0% { opacity: 0; top: 114px; left: 150px; } 15% { opacity: 1; } 85% { opacity: 1; top: 180px; left: 150px; } 100% { opacity: 0; top: 180px; left: 150px; } }
@keyframes dc-growth-analytics-flow-b { 0% { opacity: 0; top: 114px; left: 250px; } 15% { opacity: 1; } 85% { opacity: 1; top: 180px; left: 250px; } 100% { opacity: 0; top: 180px; left: 250px; } }

.dc-growth-analytics-kpi {
    position: absolute;
    top: 180px;
    width: 80px;
    height: 62px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: translateY(10px);
    animation: dc-growth-analytics-kpi-in 0.4s ease forwards;
}

.dc-growth-analytics-kpi-1 { left: 110px; animation-delay: 1.85s; }
.dc-growth-analytics-kpi-2 { left: 210px; animation-delay: 2s; }

@keyframes dc-growth-analytics-kpi-in { to { opacity: 1; transform: translateY(0); } }

.dc-growth-analytics-kpi-label {
    height: 5px;
    width: 55%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
}

/* Illustrative KPI count-ups (not claimed results) — same @property
   technique proven on Build's BI count-up and Social's engagement counts. */
@property --dc-growth-analytics-kpi1-num {
    syntax: '<integer>';
    inherits: false;
    initial-value: 24;
}
@property --dc-growth-analytics-kpi2-num {
    syntax: '<integer>';
    inherits: false;
    initial-value: 8;
}

.dc-growth-analytics-kpi-num-1 {
    --dc-growth-analytics-kpi1-num: 24;
    counter-reset: dc-growth-analytics-kpi1-c var(--dc-growth-analytics-kpi1-num);
    animation: dc-growth-analytics-kpi1-count-up 0.8s ease-out forwards;
    animation-delay: 2.15s;
}
.dc-growth-analytics-kpi-num-1::after { content: counter(dc-growth-analytics-kpi1-c); }
@keyframes dc-growth-analytics-kpi1-count-up { from { --dc-growth-analytics-kpi1-num: 0; } }

.dc-growth-analytics-kpi-num-2 {
    --dc-growth-analytics-kpi2-num: 8;
    counter-reset: dc-growth-analytics-kpi2-c var(--dc-growth-analytics-kpi2-num);
    animation: dc-growth-analytics-kpi2-count-up 0.8s ease-out forwards;
    animation-delay: 2.3s;
}
.dc-growth-analytics-kpi-num-2::after { content: counter(dc-growth-analytics-kpi2-c); }
@keyframes dc-growth-analytics-kpi2-count-up { from { --dc-growth-analytics-kpi2-num: 0; } }

.dc-growth-analytics-kpi-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent-color);
}

.dc-growth-analytics-trend {
    position: absolute;
    top: 258px;
    left: 50%;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 22px;
    opacity: 0;
    transform: translateX(-50%);
    animation: dc-growth-analytics-trend-in 0.4s ease forwards;
    animation-delay: 2.5s;
}

@keyframes dc-growth-analytics-trend-in { to { opacity: 1; } }

.dc-growth-analytics-trend-bar {
    width: 5px;
    border-radius: 1px 1px 0 0;
    background: var(--accent-color);
    transform-origin: bottom;
    transform: scaleY(0);
    animation: dc-growth-analytics-trend-grow 0.4s ease forwards;
    animation-delay: calc(2.6s + var(--n) * 0.08s);
}

.dc-growth-analytics-trend-bar:nth-child(1) { height: 8px; }
.dc-growth-analytics-trend-bar:nth-child(2) { height: 14px; }
.dc-growth-analytics-trend-bar:nth-child(3) { height: 11px; }
.dc-growth-analytics-trend-bar:nth-child(4) { height: 22px; }

@keyframes dc-growth-analytics-trend-grow { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-growth-analytics-source { animation: none; opacity: 1; transform: translateX(-50%) scale(1); }
    .dc-growth-analytics-event-1, .dc-growth-analytics-event-2, .dc-growth-analytics-event-3,
    .dc-growth-analytics-flow-dot-a, .dc-growth-analytics-flow-dot-b { animation: none; opacity: 0; }
    .dc-growth-analytics-tracker { animation: none; opacity: 1; }
    .dc-growth-analytics-kpi { animation: none; opacity: 1; transform: translateY(0); }
    .dc-growth-analytics-kpi-num-1 { animation: none; --dc-growth-analytics-kpi1-num: 24; }
    .dc-growth-analytics-kpi-num-2 { animation: none; --dc-growth-analytics-kpi2-num: 8; }
    .dc-growth-analytics-trend { animation: none; opacity: 1; }
    .dc-growth-analytics-trend-bar { animation: none; transform: scaleY(1); }
}

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

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