/* ===== SHARED HOSTING SCENE WRAPPER — .dc-host-scene / .dc-host-glow =====
   Generic centering wrapper + ambient glow shared by every Hosting hero
   visual, mirroring the .dc-build-scene / .dc-build-glow pattern used by
   Build pages. Cyan + navy only — no color beyond var(--accent-color) and
   white/navy tints. */
.dc-host-scene {
    display: flex;
    justify-content: center;
    width: 100%;
}

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

/* ===== WORDPRESS HOSTING HERO VISUAL — .dc-host-wp-* =====
   A hosting node sits connected to a single site card that is already
   live: the card's speed/uptime bars settle high and stay there (no
   jitter — reliability, not activity), a small "online" badge on the card
   holds a continuous pulsing ring once lit, and a small data dot loops
   back and forth along the connector forever, showing the node steadily
   serving the site. This is the first hosting/uptime visual on the site —
   distinct from every Hire/Build visual (none pair a single steady-state
   "online" ring with a looping serve-dot), and distinct from the other two
   Hosting visuals (Shared = one node + several cards; Website = site →
   node → globe). Self-contained — .dc-host-wp-* only appears here. */
.dc-host-wp-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-wp-node {
    position: absolute;
    left: 55px;
    top: 135px;
    width: 70px;
    height: 70px;
    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.22);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-wp-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.2s;
    z-index: 2;
}

.dc-host-wp-node i { font-size: 24px; color: var(--accent-color); }

@keyframes dc-host-wp-node-in { to { opacity: 1; transform: scale(1); } }

.dc-host-wp-connector {
    position: absolute;
    left: 125px;
    top: 169px;
    width: 75px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleX(0);
    transform-origin: left center;
    animation: dc-host-wp-connector-in 0.4s ease forwards;
    animation-delay: 0.5s;
    z-index: 1;
}

@keyframes dc-host-wp-connector-in { to { transform: scaleX(1); } }

.dc-host-wp-card {
    position: absolute;
    left: 200px;
    top: 95px;
    width: 150px;
    height: 150px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: translateY(10px);
    animation: dc-host-wp-card-in 0.45s ease forwards;
    animation-delay: 0.7s;
    z-index: 2;
}

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

.dc-host-wp-header {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 126px;
    height: 14px;
    border-radius: 3px;
    background: rgba(0, 229, 255, 0.28);
    transform: scaleX(0);
    transform-origin: left center;
    animation: dc-host-wp-header-in 0.35s ease forwards;
    animation-delay: 0.95s;
}

@keyframes dc-host-wp-header-in { to { transform: scaleX(1); } }

.dc-host-wp-line {
    position: absolute;
    left: 12px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: dc-host-wp-line-in 0.3s ease forwards;
}

.dc-host-wp-line-1 { top: 38px; width: 110px; animation-delay: 1.1s; }
.dc-host-wp-line-2 { top: 54px; width: 80px; animation-delay: 1.2s; }

@keyframes dc-host-wp-line-in { to { opacity: 1; } }

.dc-host-wp-bar {
    position: absolute;
    bottom: 16px;
    width: 10px;
    border-radius: 3px 3px 0 0;
    background: var(--accent-color);
    transform: scaleY(0);
    transform-origin: bottom center;
    opacity: 0.85;
    animation: dc-host-wp-bar-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dc-host-wp-bar-1 { left: 14px; height: 28px; animation-delay: 1.35s; }
.dc-host-wp-bar-2 { left: 30px; height: 38px; animation-delay: 1.45s; }
.dc-host-wp-bar-3 { left: 46px; height: 34px; animation-delay: 1.55s; }

@keyframes dc-host-wp-bar-in { to { transform: scaleY(1); } }

.dc-host-wp-badge {
    position: absolute;
    left: 328px;
    top: 95px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
    opacity: 0;
    transform: scale(0.5);
    animation: dc-host-wp-badge-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.75s;
    z-index: 3;
}

@keyframes dc-host-wp-badge-in { to { opacity: 1; transform: scale(1); } }

.dc-host-wp-badge-ring {
    position: absolute;
    left: 328px;
    top: 95px;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-color);
    opacity: 0;
    animation: dc-host-wp-ring-pulse 2s ease-out infinite;
    animation-delay: 2.05s;
    z-index: 3;
}

@keyframes dc-host-wp-ring-pulse {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.4); }
}

.dc-host-wp-flow {
    position: absolute;
    top: 169px;
    left: 125px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
    transform: translateY(-50%);
    opacity: 0;
    animation: dc-host-wp-flow-travel 1.8s ease-in-out infinite;
    animation-delay: 2.05s;
    z-index: 2;
}

@keyframes dc-host-wp-flow-travel {
    0%   { opacity: 0; left: 125px; }
    15%  { opacity: 1; }
    85%  { opacity: 1; left: 195px; }
    100% { opacity: 0; left: 195px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-host-wp-node, .dc-host-wp-card, .dc-host-wp-header, .dc-host-wp-line, .dc-host-wp-badge {
        animation: none; opacity: 1; transform: none;
    }
    .dc-host-wp-connector { animation: none; transform: scaleX(1); }
    .dc-host-wp-bar { animation: none; transform: scaleY(1); }
    .dc-host-wp-badge-ring { animation: none; opacity: 0; }
    .dc-host-wp-flow { animation: none; opacity: 0; }
}

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

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

/* ===== SHARED HOSTING HERO VISUAL — .dc-host-shared-* =====
   One hosting node sits behind a soft shared-coverage glow with a 2x2 grid
   of small site cards resting inside it — no connector lines at all, since
   the story here isn't "node feeds site" (that's WordPress Hosting) but
   "one resource, several sites, together" — so instead every card's live
   dot lights up and pulses in exact sync at the end, sharing one heartbeat.
   Distinct from WordPress Hosting (single card + traveling data dot) and
   Website Hosting (site → node → globe). Self-contained — .dc-host-shared-*
   only appears here. */
.dc-host-shared-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-shared-node {
    position: absolute;
    left: 30px;
    top: 140px;
    width: 70px;
    height: 70px;
    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.22);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-shared-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
    z-index: 3;
}

.dc-host-shared-node i { font-size: 24px; color: var(--accent-color); }

@keyframes dc-host-shared-node-in { to { opacity: 1; transform: scale(1); } }

.dc-host-shared-coverage {
    position: absolute;
    left: 150px;
    top: 50px;
    width: 250px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 229, 255, 0.1), transparent 72%);
    opacity: 0;
    animation: dc-host-shared-coverage-in 0.6s ease forwards;
    animation-delay: 0.7s;
    z-index: 1;
    pointer-events: none;
}

@keyframes dc-host-shared-coverage-in { to { opacity: 1; } }

.dc-host-shared-card {
    position: absolute;
    width: 90px;
    height: 60px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-shared-card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-host-shared-card-1 { left: 170px; top: 70px; animation-delay: 0.9s; }
.dc-host-shared-card-2 { left: 290px; top: 70px; animation-delay: 1.1s; }
.dc-host-shared-card-3 { left: 170px; top: 190px; animation-delay: 1.3s; }
.dc-host-shared-card-4 { left: 290px; top: 190px; animation-delay: 1.5s; }

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

.dc-host-shared-card-head {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 70px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.dc-host-shared-card-line {
    position: absolute;
    left: 10px;
    top: 26px;
    width: 46px;
    height: 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
}

.dc-host-shared-dot {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.dc-host-shared-card-1 .dc-host-shared-dot,
.dc-host-shared-card-2 .dc-host-shared-dot,
.dc-host-shared-card-3 .dc-host-shared-dot,
.dc-host-shared-card-4 .dc-host-shared-dot {
    animation: dc-host-shared-dot-lit 0.3s ease forwards, dc-host-shared-dot-pulse 1.8s ease-in-out infinite;
    animation-delay: 2s, 2.3s;
}

@keyframes dc-host-shared-dot-lit {
    to { background: var(--accent-color); box-shadow: 0 0 8px rgba(0, 229, 255, 0.7); }
}

@keyframes dc-host-shared-dot-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-host-shared-node, .dc-host-shared-coverage, .dc-host-shared-card {
        animation: none; opacity: 1; transform: none;
    }
    .dc-host-shared-dot {
        animation: none; background: var(--accent-color); box-shadow: 0 0 8px rgba(0, 229, 255, 0.7); transform: none;
    }
}

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

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

/* ===== WEBSITE HOSTING HERO VISUAL — .dc-host-web-* =====
   A site card connects to a hosting node, which connects on to a globe;
   the globe fades and scales in, then six small visitor points appear one
   by one around its circumference, each settling into its own gentle,
   staggered infinite pulse — representing a site reachable by visitors
   worldwide, at all times. Distinct from WordPress Hosting (single card,
   no globe) and Shared Hosting (one node, several cards, no globe).
   Self-contained — .dc-host-web-* only appears here. */
.dc-host-web-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-web-card {
    position: absolute;
    left: 20px;
    top: 135px;
    width: 90px;
    height: 70px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-web-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
    z-index: 2;
}

.dc-host-web-card-head {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 70px;
    height: 8px;
    border-radius: 2px;
    background: rgba(0, 229, 255, 0.3);
}

.dc-host-web-card-line {
    position: absolute;
    left: 10px;
    top: 26px;
    width: 50px;
    height: 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
}

@keyframes dc-host-web-pop-in { to { opacity: 1; transform: scale(1); } }

.dc-host-web-connector {
    position: absolute;
    top: 169px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleX(0);
    transform-origin: left center;
    animation: dc-host-web-connector-in 0.4s ease forwards;
}

.dc-host-web-connector-1 { left: 110px; width: 40px; animation-delay: 0.55s; }
.dc-host-web-connector-2 { left: 210px; width: 70px; animation-delay: 1s; }

@keyframes dc-host-web-connector-in { to { transform: scaleX(1); } }

.dc-host-web-node {
    position: absolute;
    left: 150px;
    top: 150px;
    width: 60px;
    height: 60px;
    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.22);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-web-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.75s;
    z-index: 3;
}

.dc-host-web-node i { font-size: 20px; color: var(--accent-color); }

@keyframes dc-host-web-node-in { to { opacity: 1; transform: scale(1); } }

.dc-host-web-globe {
    position: absolute;
    left: 280px;
    top: 120px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.08);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-web-globe-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.15s;
    z-index: 2;
}

.dc-host-web-globe i { font-size: 34px; color: var(--accent-color); }

@keyframes dc-host-web-globe-in { to { opacity: 1; transform: scale(1); } }

.dc-host-web-visitor {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
    opacity: 0;
    transform: scale(0.4);
    animation: dc-host-web-visitor-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, dc-host-web-visitor-pulse 2.2s ease-in-out infinite;
}

.dc-host-web-visitor-1 { left: 386px; top: 165px; animation-delay: 1.5s, 1.9s; }
.dc-host-web-visitor-2 { left: 358px; top: 112px; animation-delay: 1.65s, 2.05s; }
.dc-host-web-visitor-3 { left: 298px; top: 112px; animation-delay: 1.8s, 2.2s; }
.dc-host-web-visitor-4 { left: 270px; top: 165px; animation-delay: 1.95s, 2.35s; }
.dc-host-web-visitor-5 { left: 298px; top: 218px; animation-delay: 2.1s, 2.5s; }
.dc-host-web-visitor-6 { left: 358px; top: 218px; animation-delay: 2.25s, 2.65s; }

@keyframes dc-host-web-visitor-in { to { opacity: 1; transform: scale(1); } }
@keyframes dc-host-web-visitor-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(0, 229, 255, 0.7); } 50% { box-shadow: 0 0 14px rgba(0, 229, 255, 1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-host-web-card, .dc-host-web-node, .dc-host-web-globe, .dc-host-web-visitor {
        animation: none; opacity: 1; transform: none;
    }
    .dc-host-web-connector-1, .dc-host-web-connector-2 { animation: none; transform: scaleX(1); }
}

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

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

/* ===== WOOCOMMERCE HOSTING HERO VISUAL — .dc-host-woo-* =====
   A hosting node connects to a store card; inside the card, an order
   ticket appears in a dedicated "incoming orders" tray, holds, then a
   checkmark flashes over it and it clears — looping forever, showing the
   store continuously taking and processing orders while staying hosted.
   Distinct from Build's e-commerce visual (product grid → cart, no
   hosting) and from WordPress Hosting (single site, no order cycle, no
   order tray). Self-contained — .dc-host-woo-* only appears here. */
.dc-host-woo-node {
    position: absolute;
    left: 40px;
    top: 140px;
    width: 70px;
    height: 70px;
    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.22);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-woo-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.2s;
    z-index: 2;
}

.dc-host-woo-node i { font-size: 24px; color: var(--accent-color); }

@keyframes dc-host-woo-node-in { to { opacity: 1; transform: scale(1); } }

.dc-host-woo-connector {
    position: absolute;
    left: 110px;
    top: 174px;
    width: 70px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleX(0);
    transform-origin: left center;
    animation: dc-host-woo-connector-in 0.4s ease forwards;
    animation-delay: 0.5s;
    z-index: 1;
}

@keyframes dc-host-woo-connector-in { to { transform: scaleX(1); } }

.dc-host-woo-card {
    position: absolute;
    left: 180px;
    top: 90px;
    width: 170px;
    height: 160px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: translateY(10px);
    animation: dc-host-woo-card-in 0.45s ease forwards;
    animation-delay: 0.7s;
    z-index: 2;
}

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

.dc-host-woo-icon {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid rgba(0, 229, 255, 0.35);
    opacity: 0;
    animation: dc-host-woo-fade-in 0.3s ease forwards;
    animation-delay: 0.9s;
}

.dc-host-woo-icon i { font-size: 12px; color: var(--accent-color); }

.dc-host-woo-title {
    position: absolute;
    left: 46px;
    top: 16px;
    width: 112px;
    height: 10px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    animation: dc-host-woo-fade-in 0.3s ease forwards;
    animation-delay: 1s;
}

@keyframes dc-host-woo-fade-in { to { opacity: 1; } }

.dc-host-woo-line {
    position: absolute;
    left: 12px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    opacity: 0;
    animation: dc-host-woo-fade-in 0.3s ease forwards;
}

.dc-host-woo-line-1 { top: 52px; width: 146px; animation-delay: 1.1s; }
.dc-host-woo-line-2 { top: 68px; width: 110px; animation-delay: 1.2s; }

.dc-host-woo-tray {
    position: absolute;
    left: 12px;
    top: 108px;
    width: 146px;
    height: 40px;
    border-radius: 8px;
    border: 1.5px dashed rgba(255, 255, 255, 0.25);
    opacity: 0;
    animation: dc-host-woo-fade-in 0.35s ease forwards;
    animation-delay: 1.35s;
}

.dc-host-woo-ticket {
    position: absolute;
    left: 20px;
    top: 118px;
    width: 100px;
    height: 20px;
    border-radius: 5px;
    background: rgba(0, 229, 255, 0.18);
    border: 1px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-woo-ticket-cycle 2.6s ease-in-out infinite;
    animation-delay: 1.8s;
    z-index: 3;
}

@keyframes dc-host-woo-ticket-cycle {
    0%   { opacity: 0; transform: scale(0.7); }
    12%  { opacity: 1; transform: scale(1); }
    55%  { opacity: 1; transform: scale(1); }
    72%  { opacity: 0; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(0.7); }
}

.dc-host-woo-check {
    position: absolute;
    left: 128px;
    top: 118px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: dc-host-woo-check-cycle 2.6s ease-in-out infinite;
    animation-delay: 1.8s;
    z-index: 4;
}

.dc-host-woo-check i { font-size: 16px; color: var(--accent-color); }

@keyframes dc-host-woo-check-cycle {
    0%, 45% { opacity: 0; transform: scale(0.6); }
    55%     { opacity: 1; transform: scale(1.15); }
    70%     { opacity: 1; transform: scale(1); }
    85%, 100% { opacity: 0; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-host-woo-node, .dc-host-woo-connector, .dc-host-woo-card, .dc-host-woo-icon, .dc-host-woo-title, .dc-host-woo-line, .dc-host-woo-tray {
        animation: none; opacity: 1; transform: none;
    }
    .dc-host-woo-ticket { animation: none; opacity: 1; transform: scale(1); }
    .dc-host-woo-check { animation: none; opacity: 1; transform: scale(1); }
}

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

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

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

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

/* ===== BUSINESS EMAIL HOSTING HERO VISUAL — .dc-host-email-* =====
   A professional inbox panel with a branded "you@yourbrand.com" address
   pill, two settled inbox rows, and a top row that periodically arrives
   and softly highlights as new mail — plus a separate small "@yourbrand"
   domain badge fixed near the panel's corner, confirming the branded
   domain. Distinct from Growth's email-marketing visual (a send → deliver
   → open campaign flow) — this is a static branded inbox, not a campaign.
   Self-contained — .dc-host-email-* only appears here. */
.dc-host-email-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-email-card {
    position: absolute;
    left: 100px;
    top: 65px;
    width: 230px;
    height: 180px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: translateY(10px);
    animation: dc-host-email-card-in 0.45s ease forwards;
    animation-delay: 0.3s;
    z-index: 2;
}

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

.dc-host-email-icon {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid rgba(0, 229, 255, 0.35);
    opacity: 0;
    animation: dc-host-email-fade-in 0.3s ease forwards;
    animation-delay: 0.55s;
}

.dc-host-email-icon i { font-size: 12px; color: var(--accent-color); }

.dc-host-email-title {
    position: absolute;
    left: 48px;
    top: 18px;
    width: 140px;
    height: 10px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    animation: dc-host-email-fade-in 0.3s ease forwards;
    animation-delay: 0.65s;
}

@keyframes dc-host-email-fade-in { to { opacity: 1; } }

.dc-host-email-pill {
    position: absolute;
    left: 14px;
    top: 46px;
    width: 202px;
    height: 24px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.35);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-white);
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.85);
    animation: dc-host-email-pill-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.85s;
    z-index: 3;
}

.dc-host-email-pill span { color: var(--accent-color); }

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

.dc-host-email-row {
    position: absolute;
    left: 14px;
    width: 202px;
    height: 16px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    animation: dc-host-email-fade-in 0.3s ease forwards;
}

.dc-host-email-row-1 { top: 106px; animation-delay: 1.5s; }
.dc-host-email-row-2 { top: 128px; animation-delay: 1.6s; }

.dc-host-email-row-new {
    position: absolute;
    left: 14px;
    top: 84px;
    width: 202px;
    height: 16px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: translateY(-6px);
    animation: dc-host-email-new-cycle 3s ease-in-out infinite;
    animation-delay: 1.1s;
    z-index: 3;
}

@keyframes dc-host-email-new-cycle {
    0%   { opacity: 0; transform: translateY(-6px); background: rgba(255, 255, 255, 0.14); }
    15%  { opacity: 1; transform: translateY(0); background: rgba(0, 229, 255, 0.2); }
    50%  { opacity: 1; transform: translateY(0); background: rgba(0, 229, 255, 0.2); }
    75%  { opacity: 1; transform: translateY(0); background: rgba(255, 255, 255, 0.14); }
    100% { opacity: 1; transform: translateY(0); background: rgba(255, 255, 255, 0.14); }
}

.dc-host-email-domain-badge {
    position: absolute;
    left: 318px;
    top: 52px;
    width: 74px;
    height: 24px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid rgba(0, 229, 255, 0.4);
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-color);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-email-badge-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2s;
    z-index: 4;
}

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

@media (prefers-reduced-motion: reduce) {
    .dc-host-email-card, .dc-host-email-icon, .dc-host-email-title, .dc-host-email-pill, .dc-host-email-row, .dc-host-email-domain-badge {
        animation: none; opacity: 1; transform: none;
    }
    .dc-host-email-row-new { animation: none; opacity: 1; transform: none; background: rgba(0, 229, 255, 0.2); }
}

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

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

/* ===== MANAGED HOSTING HERO VISUAL — .dc-host-managed-* =====
   A small generic site card sits at the center of a soft protective
   "managed" frame; four task badges — Updates, Monitoring, Backups,
   Security — sit at the four compass points around the frame, popping in
   staggered and then each breathing in its own gentle, offset infinite
   pulse forever, showing continuous automated care. Distinct from
   WordPress Hosting (uptime ring + data flow), Shared Hosting (synced
   multi-card pulse) and Website Hosting (globe + visitor points) — this is
   a single card wrapped in a ring of automated maintenance tasks.
   Self-contained — .dc-host-managed-* only appears here. */
.dc-host-managed-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-managed-frame {
    position: absolute;
    left: 100px;
    top: 80px;
    width: 200px;
    height: 180px;
    border-radius: 24px;
    border: 1.5px dashed rgba(0, 229, 255, 0.3);
    background: radial-gradient(ellipse, rgba(0, 229, 255, 0.06), transparent 75%);
    opacity: 0;
    animation: dc-host-managed-frame-in 0.6s ease forwards;
    animation-delay: 0.3s;
    z-index: 1;
}

@keyframes dc-host-managed-frame-in { to { opacity: 1; } }

.dc-host-managed-card {
    position: absolute;
    left: 150px;
    top: 130px;
    width: 100px;
    height: 80px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-managed-card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.6s;
    z-index: 2;
}

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

.dc-host-managed-card-head {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 80px;
    height: 8px;
    border-radius: 2px;
    background: rgba(0, 229, 255, 0.3);
}

.dc-host-managed-card-line {
    position: absolute;
    left: 10px;
    top: 26px;
    width: 60px;
    height: 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
}

.dc-host-managed-badge {
    position: absolute;
    height: 24px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(0, 229, 255, 0.35);
    font-size: 8px;
    font-weight: 700;
    color: var(--text-white);
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-managed-badge-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, dc-host-managed-badge-pulse 2.4s ease-in-out infinite;
    z-index: 3;
}

.dc-host-managed-badge i { font-size: 10px; color: var(--accent-color); }

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

.dc-host-managed-badge-updates  { left: 170px; top: 50px;  width: 60px; animation-delay: 1s, 1.5s; }
.dc-host-managed-badge-monitor  { left: 300px; top: 150px; width: 78px; animation-delay: 1.2s, 1.7s; }
.dc-host-managed-badge-backups  { left: 168px; top: 262px; width: 66px; animation-delay: 1.4s, 1.9s; }
.dc-host-managed-badge-security { left: 20px;  top: 150px; width: 72px; animation-delay: 1.6s, 2.1s; }

@media (prefers-reduced-motion: reduce) {
    .dc-host-managed-frame, .dc-host-managed-card { animation: none; opacity: 1; transform: none; }
    .dc-host-managed-badge { animation: none; opacity: 1; transform: none; }
}

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

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

/* ===== CLOUD HOSTING HERO VISUAL — .dc-host-cloud-* =====
   A cloud sits above a connected app card, with a traffic meter on the
   side that continuously rises and falls; as it climbs, three capacity
   blocks fade in one by one flanking the cloud to absorb the load, then
   fade back out as the meter drops — looping forever, showing the cloud
   elastically scaling up and down with demand. Distinct from Enterprise's
   Cloud & Infrastructure visual (a one-shot deploy-packet flow that reveals
   three fixed scaling instances and settles on an uptime badge,
   .dc-ent-cloud-*) — this one is a live, continuously breathing meter-
   driven elastic cycle, not a single reveal. Self-contained page content
   — .dc-host-cloud-* only appears here. */
.dc-host-cloud-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-cloud-cloud {
    position: absolute;
    left: 140px;
    top: 36px;
    width: 120px;
    height: 74px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.08);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-cloud-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
    z-index: 3;
}

.dc-host-cloud-cloud i { font-size: 30px; color: var(--accent-color); }

@keyframes dc-host-cloud-pop-in { to { opacity: 1; transform: scale(1); } }

.dc-host-cloud-connector {
    position: absolute;
    left: 199px;
    top: 110px;
    width: 2px;
    height: 68px;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleY(0);
    transform-origin: top center;
    animation: dc-host-cloud-connector-in 0.4s ease forwards;
    animation-delay: 0.6s;
    z-index: 1;
}

@keyframes dc-host-cloud-connector-in { to { transform: scaleY(1); } }

.dc-host-cloud-card {
    position: absolute;
    left: 160px;
    top: 178px;
    width: 90px;
    height: 60px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-cloud-card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.9s;
    z-index: 2;
}

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

.dc-host-cloud-card i { position: absolute; left: 10px; top: 10px; font-size: 14px; color: var(--accent-color); }

.dc-host-cloud-card-line {
    position: absolute;
    left: 34px;
    top: 13px;
    width: 46px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
}

.dc-host-cloud-block {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.1);
    border: 1.5px solid rgba(0, 229, 255, 0.35);
    opacity: 0;
    transform: scale(0.6);
    z-index: 2;
}

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

.dc-host-cloud-block-1 { left: 70px; top: 55px; animation: dc-host-cloud-block-1-cycle 6s ease-in-out infinite; animation-delay: 1.4s; }
.dc-host-cloud-block-2 { left: 286px; top: 55px; animation: dc-host-cloud-block-2-cycle 6s ease-in-out infinite; animation-delay: 1.4s; }
.dc-host-cloud-block-3 { left: 178px; top: 4px; width: 44px; height: 34px; animation: dc-host-cloud-block-3-cycle 6s ease-in-out infinite; animation-delay: 1.4s; }

@keyframes dc-host-cloud-block-1-cycle {
    0%, 38%  { opacity: 0; transform: scale(0.6); }
    42%, 72% { opacity: 1; transform: scale(1); }
    82%, 100% { opacity: 0; transform: scale(0.6); }
}

@keyframes dc-host-cloud-block-2-cycle {
    0%, 48%  { opacity: 0; transform: scale(0.6); }
    52%, 75% { opacity: 1; transform: scale(1); }
    85%, 100% { opacity: 0; transform: scale(0.6); }
}

@keyframes dc-host-cloud-block-3-cycle {
    0%, 55%  { opacity: 0; transform: scale(0.6); }
    60%, 72% { opacity: 1; transform: scale(1); }
    80%, 100% { opacity: 0; transform: scale(0.6); }
}

.dc-host-cloud-meter-track {
    position: absolute;
    left: 340px;
    top: 130px;
    width: 18px;
    height: 120px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    animation: dc-host-cloud-fade-in 0.35s ease forwards;
    animation-delay: 1.1s;
    z-index: 2;
}

@keyframes dc-host-cloud-fade-in { to { opacity: 1; } }

.dc-host-cloud-meter-fill {
    position: absolute;
    left: 341px;
    bottom: 131px;
    width: 16px;
    border-radius: 8px;
    background: var(--gradient-accent);
    opacity: 0;
    transform-origin: bottom center;
    animation: dc-host-cloud-fade-in 0.3s ease forwards, dc-host-cloud-meter-cycle 6s ease-in-out infinite;
    animation-delay: 1.1s, 1.4s;
    z-index: 2;
}

@keyframes dc-host-cloud-meter-cycle {
    0%   { height: 20%; }
    45%  { height: 90%; }
    65%  { height: 100%; }
    100% { height: 20%; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-host-cloud-cloud, .dc-host-cloud-connector, .dc-host-cloud-card, .dc-host-cloud-meter-track {
        animation: none; opacity: 1; transform: none;
    }
    .dc-host-cloud-block { animation: none; opacity: 1; transform: scale(1); }
    .dc-host-cloud-meter-fill { animation: none; opacity: 1; height: 70%; }
}

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

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

/* ===== VPS HOSTING HERO VISUAL — .dc-host-vps-* =====
   A single "Your VPS" server block sits inside a larger dashed isolation
   boundary, with CPU and RAM meters that fill once to a healthy, steady
   level and stay there (no cycling — dedicated resources, not shared or
   elastic), plus a small "Running" status dot that settles into a steady
   pulse. Distinct from Shared Hosting (one node feeding several site
   cards, .dc-host-shared-*) and Cloud Hosting (a breathing, meter-driven
   scale cycle, .dc-host-cloud-*) — this is exactly one isolated, steady
   dedicated server. Self-contained — .dc-host-vps-* only appears here. */
.dc-host-vps-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-vps-boundary {
    position: absolute;
    left: 100px;
    top: 40px;
    width: 240px;
    height: 230px;
    border-radius: 20px;
    border: 1.5px dashed rgba(0, 229, 255, 0.3);
    opacity: 0;
    animation: dc-host-vps-fade-in 0.5s ease forwards;
    animation-delay: 0.3s;
    z-index: 1;
}

@keyframes dc-host-vps-fade-in { to { opacity: 1; } }

.dc-host-vps-block {
    position: absolute;
    left: 130px;
    top: 70px;
    width: 180px;
    height: 170px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(0, 229, 255, 0.35);
    opacity: 0;
    transform: scale(0.85);
    animation: dc-host-vps-block-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.6s;
    z-index: 2;
}

@keyframes dc-host-vps-block-in { to { opacity: 1; transform: scale(1); } }

.dc-host-vps-label {
    position: absolute;
    left: 14px;
    top: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--text-white);
    opacity: 0;
    animation: dc-host-vps-fade-in 0.3s ease forwards;
    animation-delay: 0.9s;
}

.dc-host-vps-icon {
    position: absolute;
    right: 14px;
    top: 10px;
    opacity: 0;
    animation: dc-host-vps-fade-in 0.3s ease forwards;
    animation-delay: 0.9s;
}

.dc-host-vps-icon i { font-size: 16px; color: var(--accent-color); }

.dc-host-vps-meter {
    position: absolute;
    left: 14px;
    width: 150px;
    height: 16px;
    opacity: 0;
    animation: dc-host-vps-fade-in 0.3s ease forwards;
}

.dc-host-vps-meter-cpu { top: 50px; animation-delay: 1.1s; }
.dc-host-vps-meter-ram { top: 82px; animation-delay: 1.3s; }

.dc-host-vps-meter-name {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.dc-host-vps-meter-track {
    position: relative;
    margin-top: 3px;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.dc-host-vps-meter-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transform-origin: left center;
    animation: dc-host-vps-meter-fill-in 0.6s ease forwards;
}

.dc-host-vps-meter-cpu .dc-host-vps-meter-fill { width: 85%; animation-delay: 1.3s; }
.dc-host-vps-meter-ram .dc-host-vps-meter-fill { width: 78%; animation-delay: 1.5s; }

@keyframes dc-host-vps-meter-fill-in { to { transform: scaleX(1); } }

.dc-host-vps-status {
    position: absolute;
    left: 14px;
    top: 130px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    animation: dc-host-vps-fade-in 0.3s ease forwards;
    animation-delay: 1.7s;
}

.dc-host-vps-status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

.dc-host-vps-status-ring {
    position: absolute;
    left: 14px;
    top: 130px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-color);
    opacity: 0;
    animation: dc-host-vps-ring-pulse 2.2s ease-out infinite;
    animation-delay: 2s;
}

@keyframes dc-host-vps-ring-pulse {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0; transform: scale(3.2); }
}

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

@media (prefers-reduced-motion: reduce) {
    .dc-host-vps-boundary, .dc-host-vps-block, .dc-host-vps-label, .dc-host-vps-icon, .dc-host-vps-meter, .dc-host-vps-status {
        animation: none; opacity: 1; transform: none;
    }
    .dc-host-vps-meter-fill { animation: none; transform: scaleX(1); }
    .dc-host-vps-status-ring { animation: none; opacity: 0; }
}

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

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

/* ===== MANAGED CLOUD HOSTING HERO VISUAL — .dc-host-mcloud-* =====
   A cloud with a connected app card and two capacity blocks that simply
   pop in and stay (the cloud CAN scale) is wrapped by three task badges —
   Monitoring, Updates, Security — arranged in a triangle around it, each
   popping in and then breathing in its own gentle infinite pulse. It fuses
   Cloud Hosting's cloud+capacity-block elements with Managed Hosting's
   task-badge motif into one composition that is neither: no breathing
   meter-driven cycle (.dc-host-cloud-*) and no dashed frame around a plain
   site card with four compass badges (.dc-host-managed-*). Self-contained
   — .dc-host-mcloud-* only appears here. */
.dc-host-mcloud-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-mcloud-cloud {
    position: absolute;
    left: 150px;
    top: 76px;
    width: 100px;
    height: 68px;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.08);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-mcloud-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
    z-index: 3;
}

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

@keyframes dc-host-mcloud-pop-in { to { opacity: 1; transform: scale(1); } }

.dc-host-mcloud-connector {
    position: absolute;
    left: 199px;
    top: 144px;
    width: 2px;
    height: 66px;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleY(0);
    transform-origin: top center;
    animation: dc-host-mcloud-connector-in 0.4s ease forwards;
    animation-delay: 0.6s;
    z-index: 1;
}

@keyframes dc-host-mcloud-connector-in { to { transform: scaleY(1); } }

.dc-host-mcloud-card {
    position: absolute;
    left: 165px;
    top: 210px;
    width: 70px;
    height: 50px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-mcloud-card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.9s;
    z-index: 2;
}

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

.dc-host-mcloud-block {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.1);
    border: 1.5px solid rgba(0, 229, 255, 0.35);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-mcloud-block-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 2;
}

.dc-host-mcloud-block-1 { left: 90px; top: 88px; animation-delay: 1.1s; }
.dc-host-mcloud-block-2 { left: 274px; top: 88px; animation-delay: 1.3s; }

@keyframes dc-host-mcloud-block-in { to { opacity: 1; transform: scale(1); } }

.dc-host-mcloud-badge {
    position: absolute;
    height: 24px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(0, 229, 255, 0.35);
    font-size: 8px;
    font-weight: 700;
    color: var(--text-white);
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-mcloud-badge-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, dc-host-mcloud-badge-pulse 2.4s ease-in-out infinite;
    z-index: 4;
}

.dc-host-mcloud-badge i { font-size: 10px; color: var(--accent-color); }

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

.dc-host-mcloud-badge-monitor  { left: 170px; top: 5px;   width: 76px; animation-delay: 1.6s, 2.1s; }
.dc-host-mcloud-badge-updates  { left: 20px;  top: 150px; width: 68px; animation-delay: 1.8s, 2.3s; }
.dc-host-mcloud-badge-security { left: 312px; top: 150px; width: 72px; animation-delay: 2s, 2.5s; }

@media (prefers-reduced-motion: reduce) {
    .dc-host-mcloud-cloud, .dc-host-mcloud-connector, .dc-host-mcloud-card, .dc-host-mcloud-block { animation: none; opacity: 1; transform: none; }
    .dc-host-mcloud-badge { animation: none; opacity: 1; transform: none; }
}

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

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

/* ===== SCALABLE CLOUD HOSTING HERO VISUAL — .dc-host-scale-* =====
   A base instance sits under a bolt "spike" trigger; on a loop, the bolt
   flashes, then three clone instances burst outward from the center
   simultaneously (fast overshoot, all at once — not staggered), hold while
   "handling" the spike, then shrink back to the center together and the
   cycle rests before repeating. Distinct from Cloud Hosting's cloud shape
   with a continuous meter and staggered fading blocks (.dc-host-cloud-*) —
   this has no cloud shape, no meter, and no gradual breathing: it's a
   single sudden multiply-and-retract burst triggered by a visible spike
   event. Self-contained — .dc-host-scale-* only appears here. */
.dc-host-scale-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-scale-node {
    position: absolute;
    left: 180px;
    top: 148px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.08);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-scale-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
    z-index: 3;
}

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

@keyframes dc-host-scale-node-in { to { opacity: 1; transform: scale(1); } }

.dc-host-scale-bolt {
    position: absolute;
    left: 184px;
    top: 40px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: dc-host-scale-bolt-in 0.3s ease forwards, dc-host-scale-bolt-flash 5s ease-in-out infinite;
    animation-delay: 0.6s, 1.2s;
    z-index: 3;
}

.dc-host-scale-bolt i { font-size: 24px; color: var(--accent-color); }

@keyframes dc-host-scale-bolt-in { to { opacity: 1; } }

@keyframes dc-host-scale-bolt-flash {
    0%, 14%  { opacity: 0.5; }
    18%      { opacity: 1; }
    22%      { opacity: 0.5; }
    26%, 100% { opacity: 0.5; }
}

.dc-host-scale-connector {
    position: absolute;
    width: 2px;
    background: rgba(0, 229, 255, 0.3);
    transform-origin: center;
    opacity: 0;
    animation: dc-host-scale-connector-cycle 5s ease-in-out infinite;
    animation-delay: 1.2s;
    z-index: 1;
}

.dc-host-scale-connector-1 { left: 118px; top: 108px; height: 76px; transform: rotate(-38deg); }
.dc-host-scale-connector-2 { left: 280px; top: 108px; height: 76px; transform: rotate(38deg); }
.dc-host-scale-connector-3 { left: 209px; top: 210px; height: 66px; }

@keyframes dc-host-scale-connector-cycle {
    0%, 24%  { opacity: 0; }
    30%, 62% { opacity: 1; }
    70%, 100% { opacity: 0; }
}

.dc-host-scale-clone {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.1);
    border: 1.5px solid rgba(0, 229, 255, 0.35);
    opacity: 0;
    transform: scale(0.3);
    animation: dc-host-scale-clone-cycle 5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
    animation-delay: 1.2s;
    z-index: 2;
}

.dc-host-scale-clone i { font-size: 17px; color: var(--accent-color); }

.dc-host-scale-clone-1 { left: 68px; top: 68px; }
.dc-host-scale-clone-2 { left: 282px; top: 68px; }
.dc-host-scale-clone-3 { left: 175px; top: 248px; }

@keyframes dc-host-scale-clone-cycle {
    0%, 24%  { opacity: 0; transform: scale(0.3); }
    32%, 62% { opacity: 1; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-host-scale-node { animation: none; opacity: 1; transform: scale(1); }
    .dc-host-scale-bolt { animation: none; opacity: 1; }
    .dc-host-scale-connector { animation: none; opacity: 1; }
    .dc-host-scale-clone { animation: none; opacity: 1; transform: scale(1); }
}

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

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

/* ===== APPLICATION HOSTING HERO VISUAL — .dc-host-app-* =====
   A left-to-right pipeline of three stages — Build, Deploy, Live — lights
   up one at a time with the connecting line filling in behind it, then a
   running app card settles in underneath with a steady status pulse.
   Distinct from every other Hosting visual (all node/card compositions,
   none a sequential left-to-right pipeline) — this is a linear process
   completing once, not a node network. Self-contained — .dc-host-app-*
   only appears here. */
.dc-host-app-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-app-step {
    position: absolute;
    top: 130px;
    width: 56px;
    height: 56px;
    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.22);
    opacity: 0;
    transform: scale(0.6);
    z-index: 3;
}

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

.dc-host-app-step-1 { left: 30px; animation: dc-host-app-step-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.3s; }
.dc-host-app-step-2 { left: 175px; animation: dc-host-app-step-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 1s; }
.dc-host-app-step-3 { left: 320px; animation: dc-host-app-step-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 1.7s; }

@keyframes dc-host-app-step-in {
    to {
        opacity: 1; transform: scale(1);
        border-color: var(--accent-color); background: rgba(0, 229, 255, 0.16); box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
    }
}

.dc-host-app-step-label {
    position: absolute;
    top: 192px;
    width: 70px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0;
    animation: dc-host-app-fade-in 0.3s ease forwards;
}

.dc-host-app-step-label-1 { left: 15px; animation-delay: 0.5s; }
.dc-host-app-step-label-2 { left: 160px; animation-delay: 1.2s; }
.dc-host-app-step-label-3 { left: 305px; animation-delay: 1.9s; }

@keyframes dc-host-app-fade-in { to { opacity: 1; } }

.dc-host-app-line {
    position: absolute;
    top: 157px;
    height: 2px;
    background: rgba(0, 229, 255, 0.4);
    transform: scaleX(0);
    transform-origin: left center;
    animation: dc-host-app-line-in 0.4s ease forwards;
}

.dc-host-app-line-1 { left: 86px; width: 89px; animation-delay: 0.7s; }
.dc-host-app-line-2 { left: 231px; width: 89px; animation-delay: 1.4s; }

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

.dc-host-app-card {
    position: absolute;
    left: 130px;
    top: 220px;
    width: 140px;
    height: 70px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: translateY(10px);
    animation: dc-host-app-card-in 0.4s ease forwards;
    animation-delay: 2.1s;
    z-index: 2;
}

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

.dc-host-app-card-line {
    position: absolute;
    left: 14px;
    height: 7px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: dc-host-app-fade-in 0.25s ease forwards;
}

.dc-host-app-card-line-1 { top: 16px; width: 90px; animation-delay: 2.3s; }
.dc-host-app-card-line-2 { top: 32px; width: 60px; animation-delay: 2.4s; }

.dc-host-app-card-status {
    position: absolute;
    left: 14px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    animation: dc-host-app-fade-in 0.3s ease forwards;
    animation-delay: 2.5s;
}

.dc-host-app-card-status-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

.dc-host-app-card-status-ring {
    position: absolute;
    left: 14px;
    bottom: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-color);
    opacity: 0;
    animation: dc-host-app-ring-pulse 2.2s ease-out infinite;
    animation-delay: 2.7s;
}

@keyframes dc-host-app-ring-pulse {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0; transform: scale(3.2); }
}

.dc-host-app-card-status span {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: reduce) {
    .dc-host-app-step { animation: none; opacity: 1; transform: scale(1); border-color: var(--accent-color); background: rgba(0, 229, 255, 0.16); box-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }
    .dc-host-app-step-label, .dc-host-app-card, .dc-host-app-card-line, .dc-host-app-card-status { animation: none; opacity: 1; transform: none; }
    .dc-host-app-line { animation: none; transform: scaleX(1); }
    .dc-host-app-card-status-ring { animation: none; opacity: 0; }
}

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

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

/* ===== NODE.JS & PYTHON HOSTING HERO VISUAL — .dc-host-runtime-* =====
   Two labeled runtime cards — Node.js and Python — sit side by side, each
   connecting down to one shared hosting node beneath them; both cards
   settle into their own steady "running" pulse once connected. Distinct
   from Shared Hosting's single node feeding four identical unlabeled cards
   in a 2x2 grid with a single synchronized pulse (.dc-host-shared-*) — here
   there are exactly two cards, explicitly labeled and iconed differently
   by runtime, arranged side by side above one node rather than in a grid
   beside it. Self-contained — .dc-host-runtime-* only appears here. */
.dc-host-runtime-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-runtime-card {
    position: absolute;
    top: 50px;
    width: 150px;
    height: 110px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: translateY(10px);
    animation: dc-host-runtime-card-in 0.4s ease forwards;
    z-index: 2;
}

.dc-host-runtime-card-node { left: 40px; animation-delay: 0.5s; }
.dc-host-runtime-card-python { left: 210px; animation-delay: 0.8s; }

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

.dc-host-runtime-card-icon {
    position: absolute;
    left: 14px;
    top: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid rgba(0, 229, 255, 0.35);
}

.dc-host-runtime-card-icon i { font-size: 13px; color: var(--accent-color); }

.dc-host-runtime-card-label {
    position: absolute;
    left: 50px;
    top: 18px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-white);
}

.dc-host-runtime-card-line {
    position: absolute;
    left: 14px;
    height: 7px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
}

.dc-host-runtime-card-line-1 { top: 52px; width: 122px; }
.dc-host-runtime-card-line-2 { top: 68px; width: 90px; }

.dc-host-runtime-card-status {
    position: absolute;
    left: 14px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dc-host-runtime-card-status-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.dc-host-runtime-card-node .dc-host-runtime-card-status-dot { animation: dc-host-runtime-dot-lit 0.3s ease forwards; animation-delay: 1.6s; }
.dc-host-runtime-card-python .dc-host-runtime-card-status-dot { animation: dc-host-runtime-dot-lit 0.3s ease forwards; animation-delay: 1.8s; }

@keyframes dc-host-runtime-dot-lit { to { background: var(--accent-color); box-shadow: 0 0 8px rgba(0, 229, 255, 0.7); } }

.dc-host-runtime-card-status span {
    font-size: 8px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dc-host-runtime-connector {
    position: absolute;
    top: 160px;
    width: 2px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    transform-origin: top center;
}

.dc-host-runtime-connector-1 {
    left: 115px;
    transform: rotate(20deg) scaleY(0);
    animation: dc-host-runtime-connector-1-in 0.4s ease forwards;
    animation-delay: 1.1s;
}

.dc-host-runtime-connector-2 {
    left: 285px;
    transform: rotate(-20deg) scaleY(0);
    animation: dc-host-runtime-connector-2-in 0.4s ease forwards;
    animation-delay: 1.3s;
}

@keyframes dc-host-runtime-connector-1-in { to { transform: rotate(20deg) scaleY(1); } }
@keyframes dc-host-runtime-connector-2-in { to { transform: rotate(-20deg) scaleY(1); } }

.dc-host-runtime-node {
    position: absolute;
    left: 170px;
    top: 235px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.08);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-runtime-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.2s;
    z-index: 3;
}

.dc-host-runtime-node i { font-size: 22px; color: var(--accent-color); }

@keyframes dc-host-runtime-node-in { to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .dc-host-runtime-card, .dc-host-runtime-node { animation: none; opacity: 1; transform: none; }
    .dc-host-runtime-card-status-dot { animation: none; background: var(--accent-color); box-shadow: 0 0 8px rgba(0, 229, 255, 0.7); }
    .dc-host-runtime-connector-1 { animation: none; transform: rotate(20deg) scaleY(1); }
    .dc-host-runtime-connector-2 { animation: none; transform: rotate(-20deg) scaleY(1); }
}

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

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

/* ===== APP DEPLOYMENT HERO VISUAL — .dc-host-deploy-* =====
   A commit node pushes into a fanned stack of three version cards — two
   older versions behind, one current version on top, highlighted "LIVE" —
   then a "Rollback Ready" pill settles in beside the stack and pulses
   gently forever, showing that an older version is always one step away.
   Distinct from Application Hosting's linear Build→Deploy→Live pipeline
   (.dc-host-app-*) — this is a version-history stack, not a sequential
   process. Self-contained — .dc-host-deploy-* only appears here. */
.dc-host-deploy-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-deploy-commit {
    position: absolute;
    left: 40px;
    top: 150px;
    width: 60px;
    height: 60px;
    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.22);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-deploy-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.2s;
    z-index: 2;
}

.dc-host-deploy-commit i { font-size: 22px; color: var(--accent-color); }

@keyframes dc-host-deploy-pop-in { to { opacity: 1; transform: scale(1); } }

.dc-host-deploy-connector {
    position: absolute;
    left: 108px;
    top: 179px;
    width: 110px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleX(0);
    transform-origin: left center;
    animation: dc-host-deploy-connector-in 0.4s ease forwards;
    animation-delay: 0.5s;
    z-index: 1;
}

@keyframes dc-host-deploy-connector-in { to { transform: scaleX(1); } }

.dc-host-deploy-card {
    position: absolute;
    width: 110px;
    height: 70px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    transform: translateY(10px);
    animation: dc-host-deploy-card-in 0.35s ease forwards;
}

.dc-host-deploy-card-1 { left: 220px; top: 70px; animation-delay: 0.8s; z-index: 1; }
.dc-host-deploy-card-2 { left: 236px; top: 92px; animation-delay: 1s; z-index: 2; }

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

.dc-host-deploy-card-live {
    position: absolute;
    left: 252px;
    top: 114px;
    width: 118px;
    height: 76px;
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.08);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    animation: dc-host-deploy-live-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.2s;
    z-index: 3;
}

@keyframes dc-host-deploy-live-in { to { opacity: 1; transform: translateY(0) scale(1); } }

.dc-host-deploy-card-live-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--accent-color);
    opacity: 0;
    animation: dc-host-deploy-fade-in 0.3s ease forwards;
    animation-delay: 1.5s;
}

.dc-host-deploy-card-live-line {
    position: absolute;
    left: 10px;
    top: 30px;
    width: 90px;
    height: 7px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
    opacity: 0;
    animation: dc-host-deploy-fade-in 0.3s ease forwards;
    animation-delay: 1.6s;
}

@keyframes dc-host-deploy-fade-in { to { opacity: 1; } }

.dc-host-deploy-rollback {
    position: absolute;
    left: 220px;
    top: 215px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(0, 229, 255, 0.35);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-white);
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-deploy-rollback-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, dc-host-deploy-rollback-pulse 2.4s ease-in-out infinite;
    animation-delay: 1.9s, 2.4s;
    z-index: 3;
}

.dc-host-deploy-rollback i { font-size: 11px; color: var(--accent-color); }

@keyframes dc-host-deploy-rollback-in { to { opacity: 1; transform: scale(1); } }
@keyframes dc-host-deploy-rollback-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(0, 229, 255, 0); } 50% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.35); } }

@media (prefers-reduced-motion: reduce) {
    .dc-host-deploy-commit, .dc-host-deploy-connector, .dc-host-deploy-card, .dc-host-deploy-card-live, .dc-host-deploy-card-live-badge, .dc-host-deploy-card-live-line {
        animation: none; opacity: 1; transform: none;
    }
    .dc-host-deploy-rollback { animation: none; opacity: 1; transform: scale(1); }
}

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

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

/* ===== CLOUD DEPLOYMENT HERO VISUAL — .dc-host-clouddeploy-* =====
   A code node sits below a cloud; a small dot loops up a straight dashed
   path from the node to the cloud forever, and the cloud flashes brighter
   each time the dot arrives — a simple, repeatable "ship to the cloud"
   beat. Distinct from Cloud Hosting's cloud-plus-meter-plus-flanking-blocks
   composition (.dc-host-cloud-*) and from every other visual's node
   layout — this is a single vertical upload path with nothing beside it.
   Self-contained — .dc-host-clouddeploy-* only appears here. */
.dc-host-clouddeploy-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-clouddeploy-code {
    position: absolute;
    left: 170px;
    top: 230px;
    width: 60px;
    height: 60px;
    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.22);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-clouddeploy-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
    z-index: 2;
}

.dc-host-clouddeploy-code i { font-size: 22px; color: var(--accent-color); }

@keyframes dc-host-clouddeploy-pop-in { to { opacity: 1; transform: scale(1); } }

.dc-host-clouddeploy-path {
    position: absolute;
    left: 199px;
    top: 110px;
    width: 2px;
    height: 120px;
    background-image: linear-gradient(rgba(0, 229, 255, 0.3) 50%, transparent 50%);
    background-size: 2px 12px;
    opacity: 0;
    animation: dc-host-clouddeploy-fade-in 0.4s ease forwards;
    animation-delay: 0.6s;
    z-index: 1;
}

@keyframes dc-host-clouddeploy-fade-in { to { opacity: 1; } }

.dc-host-clouddeploy-dot {
    position: absolute;
    left: 200px;
    top: 224px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: dc-host-clouddeploy-travel 2.2s ease-in-out infinite;
    animation-delay: 1s;
    z-index: 2;
}

@keyframes dc-host-clouddeploy-travel {
    0%   { opacity: 0; top: 224px; }
    12%  { opacity: 1; }
    75%  { opacity: 1; top: 108px; }
    88%  { opacity: 0; top: 100px; }
    100% { opacity: 0; top: 224px; }
}

.dc-host-clouddeploy-cloud {
    position: absolute;
    left: 150px;
    top: 40px;
    width: 100px;
    height: 68px;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.08);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-clouddeploy-cloud-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, dc-host-clouddeploy-cloud-flash 2.2s ease-in-out infinite;
    animation-delay: 0.5s, 1s;
    z-index: 3;
}

.dc-host-clouddeploy-cloud i { font-size: 28px; color: var(--accent-color); }

@keyframes dc-host-clouddeploy-cloud-in { to { opacity: 1; transform: scale(1); } }

@keyframes dc-host-clouddeploy-cloud-flash {
    0%, 68%  { box-shadow: none; }
    78%      { box-shadow: 0 0 24px rgba(0, 229, 255, 0.55); }
    92%, 100% { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-host-clouddeploy-code, .dc-host-clouddeploy-path { animation: none; opacity: 1; transform: none; }
    .dc-host-clouddeploy-dot { animation: none; opacity: 0; }
    .dc-host-clouddeploy-cloud { animation: none; opacity: 1; transform: scale(1); box-shadow: none; }
}

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

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

/* ===== HOSTING SETUP & MIGRATION HERO VISUAL — .dc-host-migrate-* =====
   Two hosts face each other across a dashed transfer path; three small
   file markers travel once from the old host to the new host, and as they
   land, the old host fades down to a dim, inactive state while the new
   host settles into a steady, lit "live" pulse — a one-shot move-and-
   settle, not a repeating loop. Distinct from every other Hosting visual
   (none show a fading source and a brightening destination in one
   completing transfer). Self-contained — .dc-host-migrate-* only appears
   here. */
.dc-host-migrate-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-migrate-old {
    position: absolute;
    left: 40px;
    top: 150px;
    width: 64px;
    height: 64px;
    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.22);
    opacity: 0;
    transform: scale(0.6);
    animation: dc-host-migrate-old-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, dc-host-migrate-old-fade 0.6s ease forwards;
    animation-delay: 0.3s, 2.2s;
    z-index: 2;
}

.dc-host-migrate-old i { font-size: 24px; color: var(--accent-color); }

@keyframes dc-host-migrate-old-in { to { opacity: 1; transform: scale(1); } }
@keyframes dc-host-migrate-old-fade { to { opacity: 0.3; } }

.dc-host-migrate-path {
    position: absolute;
    left: 108px;
    top: 179px;
    width: 184px;
    height: 2px;
    background-image: linear-gradient(90deg, rgba(0, 229, 255, 0.3) 50%, transparent 50%);
    background-size: 12px 2px;
    opacity: 0;
    animation: dc-host-migrate-fade-in 0.4s ease forwards;
    animation-delay: 0.6s;
    z-index: 1;
}

@keyframes dc-host-migrate-fade-in { to { opacity: 1; } }

.dc-host-migrate-file {
    position: absolute;
    top: 172px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
    opacity: 0;
    animation: dc-host-migrate-file-travel 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.dc-host-migrate-file-1 { left: 110px; animation-delay: 0.9s; }
.dc-host-migrate-file-2 { left: 110px; animation-delay: 1.15s; }
.dc-host-migrate-file-3 { left: 110px; animation-delay: 1.4s; }

@keyframes dc-host-migrate-file-travel {
    0%   { opacity: 1; left: 110px; }
    85%  { opacity: 1; left: 276px; }
    100% { opacity: 0; left: 286px; }
}

.dc-host-migrate-new {
    position: absolute;
    left: 296px;
    top: 150px;
    width: 64px;
    height: 64px;
    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.22);
    opacity: 0.4;
    transform: scale(0.85);
    animation: dc-host-migrate-new-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, dc-host-migrate-new-lit 0.5s ease forwards;
    animation-delay: 0.5s, 2.2s;
    z-index: 2;
}

.dc-host-migrate-new i { font-size: 24px; color: var(--accent-color); }

@keyframes dc-host-migrate-new-in { to { opacity: 0.4; transform: scale(1); } }
@keyframes dc-host-migrate-new-lit {
    to { opacity: 1; border-color: var(--accent-color); background: rgba(0, 229, 255, 0.14); box-shadow: 0 0 16px rgba(0, 229, 255, 0.4); }
}

.dc-host-migrate-badge {
    position: absolute;
    left: 296px;
    top: 226px;
    width: 64px;
    text-align: center;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--accent-color);
    text-transform: uppercase;
    opacity: 0;
    animation: dc-host-migrate-fade-in 0.3s ease forwards;
    animation-delay: 2.6s;
}

@media (prefers-reduced-motion: reduce) {
    .dc-host-migrate-old { animation: none; opacity: 0.3; transform: scale(1); }
    .dc-host-migrate-path { animation: none; opacity: 1; }
    .dc-host-migrate-file { animation: none; opacity: 0; }
    .dc-host-migrate-new {
        animation: none; opacity: 1; transform: scale(1);
        border-color: var(--accent-color); background: rgba(0, 229, 255, 0.14); box-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
    }
    .dc-host-migrate-badge { animation: none; opacity: 1; }
}

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

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

/* ===== SERVER CONFIGURATION HERO VISUAL — .dc-host-config-* =====
   A tall server card holds four labeled toggle switches that flip from
   off to on one at a time, each knob sliding across and lighting up, then
   a "Configured" badge settles in once all four are set. The only Hosting
   visual built from toggle switches rather than bars, dots or cards —
   distinct from every other page in this family. Self-contained —
   .dc-host-config-* only appears here. */
.dc-host-config-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-config-card {
    position: absolute;
    left: 125px;
    top: 40px;
    width: 150px;
    height: 260px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: translateY(10px);
    animation: dc-host-config-card-in 0.45s ease forwards;
    animation-delay: 0.3s;
    z-index: 1;
}

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

.dc-host-config-icon {
    position: absolute;
    left: 60px;
    top: 18px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid rgba(0, 229, 255, 0.35);
    opacity: 0;
    animation: dc-host-config-fade-in 0.3s ease forwards;
    animation-delay: 0.6s;
}

.dc-host-config-icon i { font-size: 14px; color: var(--accent-color); }

@keyframes dc-host-config-fade-in { to { opacity: 1; } }

.dc-host-config-row {
    position: absolute;
    left: 16px;
    width: 118px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    animation: dc-host-config-fade-in 0.3s ease forwards;
}

.dc-host-config-row-1 { top: 76px; animation-delay: 0.9s; }
.dc-host-config-row-2 { top: 114px; animation-delay: 1.5s; }
.dc-host-config-row-3 { top: 152px; animation-delay: 2.1s; }
.dc-host-config-row-4 { top: 190px; animation-delay: 2.7s; }

.dc-host-config-row-label {
    font-size: 8px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.dc-host-config-toggle {
    position: relative;
    width: 26px;
    height: 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.dc-host-config-toggle-knob {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-white);
    transform: translateX(0);
}

.dc-host-config-row-1 .dc-host-config-toggle-knob { animation: dc-host-config-knob-on 0.3s ease forwards; animation-delay: 1.1s; }
.dc-host-config-row-2 .dc-host-config-toggle-knob { animation: dc-host-config-knob-on 0.3s ease forwards; animation-delay: 1.7s; }
.dc-host-config-row-3 .dc-host-config-toggle-knob { animation: dc-host-config-knob-on 0.3s ease forwards; animation-delay: 2.3s; }
.dc-host-config-row-4 .dc-host-config-toggle-knob { animation: dc-host-config-knob-on 0.3s ease forwards; animation-delay: 2.9s; }

@keyframes dc-host-config-knob-on { to { transform: translateX(13px); background: #05131f; } }

.dc-host-config-row-1 .dc-host-config-toggle { animation: dc-host-config-toggle-on 0.3s ease forwards; animation-delay: 1.1s; }
.dc-host-config-row-2 .dc-host-config-toggle { animation: dc-host-config-toggle-on 0.3s ease forwards; animation-delay: 1.7s; }
.dc-host-config-row-3 .dc-host-config-toggle { animation: dc-host-config-toggle-on 0.3s ease forwards; animation-delay: 2.3s; }
.dc-host-config-row-4 .dc-host-config-toggle { animation: dc-host-config-toggle-on 0.3s ease forwards; animation-delay: 2.9s; }

@keyframes dc-host-config-toggle-on { to { background: var(--accent-color); border-color: var(--accent-color); } }

.dc-host-config-badge {
    position: absolute;
    left: 125px;
    top: 314px;
    width: 150px;
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent-color);
    opacity: 0;
    animation: dc-host-config-fade-in 0.3s ease forwards;
    animation-delay: 3.2s;
}

@media (prefers-reduced-motion: reduce) {
    .dc-host-config-card, .dc-host-config-icon, .dc-host-config-row, .dc-host-config-badge { animation: none; opacity: 1; }
    .dc-host-config-toggle { animation: none; background: var(--accent-color); border-color: var(--accent-color); }
    .dc-host-config-toggle-knob { animation: none; transform: translateX(13px); background: #05131f; }
}

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

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

/* ===== SSL & DOMAIN SETUP HERO VISUAL — .dc-host-ssl-* =====
   A domain name connects to a globe; below it, "http://" fades out as
   "https://" fades in, accent-colored, with a checkmark confirming the
   switch — a one-shot http-to-https transition (no lock icon exists in the
   curated set, so security is shown through the protocol text and color
   change, not an icon). Distinct from every other Hosting visual — the
   only one built around a literal text-string transition. Self-contained
   — .dc-host-ssl-* only appears here. */
.dc-host-ssl-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-ssl-domain {
    position: absolute;
    left: 50px;
    top: 60px;
    height: 30px;
    padding: 0 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-white);
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.85);
    animation: dc-host-ssl-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
    z-index: 2;
}

@keyframes dc-host-ssl-pop-in { to { opacity: 1; transform: scale(1); } }

.dc-host-ssl-arrow {
    position: absolute;
    left: 180px;
    top: 75px;
    width: 90px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleX(0);
    transform-origin: left center;
    animation: dc-host-ssl-arrow-in 0.4s ease forwards;
    animation-delay: 0.6s;
    z-index: 1;
}

@keyframes dc-host-ssl-arrow-in { to { transform: scaleX(1); } }

.dc-host-ssl-globe {
    position: absolute;
    left: 280px;
    top: 40px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.08);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    opacity: 0;
    transform: scale(0.7);
    animation: dc-host-ssl-globe-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.9s;
    z-index: 2;
}

.dc-host-ssl-globe i { font-size: 26px; color: var(--accent-color); }

@keyframes dc-host-ssl-globe-in { to { opacity: 1; transform: scale(1); } }

.dc-host-ssl-bar {
    position: absolute;
    left: 90px;
    top: 170px;
    width: 220px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    animation: dc-host-ssl-fade-in 0.4s ease forwards;
    animation-delay: 1.3s;
    z-index: 1;
}

@keyframes dc-host-ssl-fade-in { to { opacity: 1; } }

.dc-host-ssl-proto {
    position: absolute;
    left: 0;
    top: 0;
    width: 220px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dc-host-ssl-http {
    color: var(--text-muted);
    opacity: 0;
    animation: dc-host-ssl-http-cycle 0.4s ease forwards;
    animation-delay: 1.6s;
}

@keyframes dc-host-ssl-http-cycle {
    0%   { opacity: 0; }
    40%, 60% { opacity: 1; }
    100% { opacity: 0; }
}

.dc-host-ssl-https {
    color: var(--accent-color);
    opacity: 0;
    animation: dc-host-ssl-fade-in 0.4s ease forwards;
    animation-delay: 2.1s;
}

.dc-host-ssl-check {
    position: absolute;
    left: 326px;
    top: 182px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    animation: dc-host-ssl-check-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.3s;
    z-index: 2;
}

.dc-host-ssl-check i { font-size: 18px; color: var(--accent-color); }

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

@media (prefers-reduced-motion: reduce) {
    .dc-host-ssl-domain, .dc-host-ssl-globe, .dc-host-ssl-bar, .dc-host-ssl-check { animation: none; opacity: 1; transform: none; }
    .dc-host-ssl-arrow { animation: none; transform: scaleX(1); }
    .dc-host-ssl-http { animation: none; opacity: 0; }
    .dc-host-ssl-https { animation: none; opacity: 1; }
}

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

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

/* ===== UPTIME & PERFORMANCE MONITORING HERO VISUAL — .dc-host-monitor-* =====
   A monitoring dashboard card holds five bars that continuously rise and
   fall out of sync, like a live activity readout, next to a steady
   "Monitoring Active" status pulse — deliberately shows no specific uptime
   percentage anywhere (an honest, non-fabricated visual). Distinct from
   WordPress Hosting's bars, which rise once to a fixed height and stay
   (.dc-host-wp-bar) — these dance continuously, forever, like a live
   feed. Self-contained — .dc-host-monitor-* only appears here. */
.dc-host-monitor-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 340px;
    display: flex;
    justify-content: center;
}

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

.dc-host-monitor-card {
    position: absolute;
    left: 100px;
    top: 60px;
    width: 200px;
    height: 150px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: translateY(10px);
    animation: dc-host-monitor-card-in 0.45s ease forwards;
    animation-delay: 0.3s;
    z-index: 1;
}

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

.dc-host-monitor-icon {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid rgba(0, 229, 255, 0.35);
    opacity: 0;
    animation: dc-host-monitor-fade-in 0.3s ease forwards;
    animation-delay: 0.6s;
}

.dc-host-monitor-icon i { font-size: 12px; color: var(--accent-color); }

.dc-host-monitor-title {
    position: absolute;
    left: 50px;
    top: 20px;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-white);
    opacity: 0;
    animation: dc-host-monitor-fade-in 0.3s ease forwards;
    animation-delay: 0.7s;
}

@keyframes dc-host-monitor-fade-in { to { opacity: 1; } }

.dc-host-monitor-bar {
    position: absolute;
    bottom: 40px;
    width: 14px;
    border-radius: 3px 3px 0 0;
    background: var(--accent-color);
    opacity: 0;
    transform: scaleY(0.3);
    transform-origin: bottom center;
    animation: dc-host-monitor-bar-in 0.3s ease forwards, dc-host-monitor-bar-dance 2.6s ease-in-out infinite;
}

.dc-host-monitor-bar-1 { left: 20px; height: 36px; animation-delay: 1s, 1.6s; }
.dc-host-monitor-bar-2 { left: 44px; height: 52px; animation-delay: 1.1s, 1.75s; }
.dc-host-monitor-bar-3 { left: 68px; height: 30px; animation-delay: 1.2s, 1.9s; }
.dc-host-monitor-bar-4 { left: 92px; height: 60px; animation-delay: 1.3s, 2.05s; }
.dc-host-monitor-bar-5 { left: 116px; height: 42px; animation-delay: 1.4s, 2.2s; }

@keyframes dc-host-monitor-bar-in { to { opacity: 0.85; transform: scaleY(1); } }

@keyframes dc-host-monitor-bar-dance {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.5); }
}

.dc-host-monitor-status {
    position: absolute;
    left: 150px;
    bottom: 14px;
    width: 36px;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0;
    animation: dc-host-monitor-fade-in 0.3s ease forwards;
    animation-delay: 2.4s;
}

.dc-host-monitor-status-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
    flex-shrink: 0;
}

.dc-host-monitor-status-ring {
    position: absolute;
    left: 150px;
    bottom: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-color);
    opacity: 0;
    animation: dc-host-monitor-ring-pulse 2.2s ease-out infinite;
    animation-delay: 2.6s;
}

@keyframes dc-host-monitor-ring-pulse {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0; transform: scale(3.2); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-host-monitor-card, .dc-host-monitor-icon, .dc-host-monitor-title, .dc-host-monitor-status { animation: none; opacity: 1; }
    .dc-host-monitor-bar { animation: none; opacity: 0.85; transform: scaleY(1); }
    .dc-host-monitor-status-ring { animation: none; opacity: 0; }
}

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

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