/* ============================================================
   cloud.html — page-scoped styles.

   This page had common.css and oldruckosplatform.css commented out
   with no full replacement, so everything outside the hero
   diagram (added separately below) was rendering unstyled: base
   theme/fonts/reset and the back-to-top button from oldcommon.css,
   and the hero text column, buttons, section headings, and service
   cards from oldruckosplatform.css. Both are migrated verbatim
   below (same source used for index.html, infra.html, ruckos.html,
   gitops.html, observability.html, security.html, nytro.html).
   oldstyles.css was also checked and has no rules for any class
   cloud.html uses — it's an unrelated dark-theme file for other
   pages — so nothing was pulled from it.
   ============================================================ */

@font-face {
    font-family: Assistant-Regular;
    src: url('/assets/font/Assistant-Regular.ttf');
}

@font-face {
    font-family: Assistant-Bold;
    src: url('/assets/font/Assistant-Bold.ttf');
}

/* * {
    box-sizing: border-box;
    font-family: Assistant-Regular;
} */

h1, h2, h3, h4, h5, h6 {
    font-family: Assistant-Bold;
    font-variant-caps: all-small-caps;
}

/* Back-to-top button (rendered by the shared footer include on every
   page; styled here since this page no longer loads common.css). */
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    width: 44px;
    height: 44px;
    border: none;
    outline: none;
    border-radius: 50%;
    background: #0ea5e9;
    color: #e5e7eb;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: Assistant-Bold, Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    font-size: 18px;
}

#myBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(3, 105, 161, 0.35);
    background: #0284c7;
}

#myBtn:active,
#myBtn:focus {
    background: #0369a1;
    color: #e5e7eb;
    outline: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

#myBtn i {
    display: none;
}

/* ------------------------------------------------------------
   Hero text column (the galaxy diagram column is styled in the
   "cloud-" prefixed section further down)
   ------------------------------------------------------------ */
#hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    padding: 4.2rem 0 4rem;
    background:
        radial-gradient(circle at 84% 82%, rgba(255, 115, 35, 0.16), transparent 18rem),
        radial-gradient(circle at 8% 74%, rgba(255, 115, 35, 0.07), transparent 18rem),
        linear-gradient(180deg, #020202 0%, #010101 68%, #050100 100%);
}

#hero:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
}

#hero .hero-text {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    width: 100%;
    color: snow;
    text-align: left;
    transform: none;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.8rem;
    color: #4f9bd0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.hero-kicker span {
    width: 2rem;
    height: 1px;
    background: #ff7a24;
}

.hero-title {
    margin: 0;
    color: #f7f3f0;
    font-size: 4rem;
    font-weight: 800;
    font-variant-caps: normal;
    line-height: 0.98;
    text-transform: none;
}

.hero-title span,
.hero-title strong {
    display: block;
}

.hero-title span {
    color: #d8d3d0;
    font-size: 3rem;
    font-weight: 300;
    font-variant-caps: normal;
    text-transform: none;
}

.hero-title strong {
    color: #ffffff;
    font-weight: 100;
    font-variant-caps: normal;
    text-transform: none;
}

.hero-title em {
    color: #ff7a24;
    font-style: normal;
}

.hero-copy {
    max-width: 34rem;
    margin: 2rem 0 0;
    color: #aaa4a0;
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.7;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.cta-buttons {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
}

.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #4f9bd0, #ff7a24);
    color: white;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(79, 155, 208, 0.4);
}

#hero .btn-primary {
    background: #ff7a24;
    border: 1px solid #ff7a24;
    box-shadow: 0 1rem 2.4rem rgba(255, 122, 36, 0.24);
    text-transform: uppercase;
    letter-spacing: 0.06rem;
}

#hero .btn-primary:hover {
    box-shadow: 0 1.2rem 2.8rem rgba(255, 122, 36, 0.34);
}

#hero .btn-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    text-transform: uppercase;
    letter-spacing: 0.06rem;
}

#hero .btn-secondary:hover {
    color: #ffffff;
    background: rgba(255, 122, 36, 0.12);
    border-color: rgba(255, 122, 36, 0.38);
    transform: translateY(-3px);
}

/* ------------------------------------------------------------
   Section shell + shared headings
   ------------------------------------------------------------ */
.sections {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #0a0a0a;
    padding: 4rem 0;
}

.section-head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 3.5rem;
}

.section-head .portal-kicker {
    margin-bottom: 1.2rem;
}

.section-head .portal-headline {
    font-size: 2.6rem;
    margin-bottom: 1.2rem;
}

.section-head .portal-sub {
    margin: 0 auto;
}

.portal-kicker {
    display: inline-block;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(79, 155, 208, 0.3);
    background: rgba(79, 155, 208, 0.1);
    border-radius: 50px;
    color: #4f9bd0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.portal-headline {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 1.5rem;
}

.portal-gradient {
    background: linear-gradient(135deg, #4f9bd0, #ff7a24 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.portal-sub {
    max-width: 720px;
    color: #b8b8b8;
    font-size: 1.2rem;
    line-height: 1.75;
    margin: 0 0 3rem;
}

/* ------------------------------------------------------------
   Service cards (#essentials, #future)
   ------------------------------------------------------------ */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.nytro-grid {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
    .nytro-grid {
        grid-template-columns: 1fr;
    }
}

.service-card {
    background: rgba(15, 15, 15, 0.6);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border-color: rgba(79, 155, 208, 0.3);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #4f9bd0, #ff7a24);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4f9bd0, #ff7a24);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: white;
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
    font-weight: 700;
}

.card-content {
    color: #a0a0a0;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------
   Responsive (hero text + section headings + cards)
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 3.5rem;
    }

    .hero-title span {
        font-size: 2.6rem;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    #hero {
        padding: 6rem 0 5rem;
    }
}

@media (max-width: 768px) {
    #hero {
        min-height: auto;
    }

    .hero-kicker {
        align-items: flex-start;
        font-size: 0.72rem;
        line-height: 1.5;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-title span {
        font-size: 2.15rem;
    }

    .hero-copy {
        font-size: 1rem;
    }

    .section-head .portal-headline {
        font-size: 2rem;
    }

    .portal-headline {
        font-size: 2.3rem;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Hero layout (two-column grid) and the platform galaxy diagram.
   All selectors are prefixed with "cloud-" so nothing here can
   collide with the shared ruckosplatform.css rules this page also
   loads (which use unprefixed .hero-layout / .arch-stack / etc.
   for other pages).
   ============================================================ */

.cloud-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2rem, 6vw, 5rem);
    min-height: calc(100vh - 8.8rem);
    padding-top: 4.4rem;
}

.cloud-hero-copy-col {
    max-width: 34rem;
}

.cloud-hero-diagram-col {
    display: flex;
    justify-content: center;
    min-width: 0;
}

@media (max-width: 992px) {
    .cloud-hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 3rem;
        padding-top: 0;
    }

    .cloud-hero-copy-col {
        max-width: none;
    }

    .cloud-hero-diagram-col {
        justify-content: flex-start;
    }
}

/* ------------------------------------------------------------
   Platform galaxy diagram: radial ring of platform-capability
   links around the Ruckos core, with telemetry beams pulsing
   inward. Same visual as index.html, kept as its own copy here
   so cloud.html has no dependency on index.css.
   ------------------------------------------------------------ */
.cloud-arch-stack {
    position: relative;
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    padding: clamp(1.2rem, 3vw, 2rem);
    isolation: isolate;
}

.cloud-arch-stack::before {
    content: "";
    position: absolute;
    inset: 10% 14%;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from 210deg,
        rgba(255, 122, 36, 0.26),
        rgba(79, 155, 208, 0.28),
        rgba(255, 122, 36, 0.26));
    filter: blur(60px);
    opacity: 0.4;
    pointer-events: none;
}

.cloud-arch-galaxy {
    --orbit: clamp(7rem, 26cqw, 10.5rem);
    --chip-orbit: calc(var(--orbit) * 1.18);
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(var(--chip-orbit) * 2 + 5rem);
}

.cloud-galaxy-core {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
}

.cloud-arch-galaxy::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: calc(var(--orbit) * 2);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px dashed rgba(124, 189, 230, 0.18);
    pointer-events: none;
}

.cloud-galaxy-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.1rem 0.2rem;
}

.cloud-galaxy-brand::before {
    content: "";
    position: absolute;
    inset: -0.9rem -1.4rem;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 122, 36, 0.32), transparent);
    pointer-events: none;
}

.cloud-galaxy-brand > i {
    color: #ff7a24;
    font-size: 1.5rem;
    line-height: 1;
}

.cloud-galaxy-core-title {
    margin-top: 0.25rem;
    color: #ff7a24;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.cloud-portal-node {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
}

.cloud-portal-chip {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 6rem;
    color: #e5e2df;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transform:
        translate(-50%, -50%)
        rotate(var(--angle))
        translateY(calc(var(--chip-orbit) * -1))
        rotate(calc(var(--angle) * -1));
    transition: color 0.2s ease;
}

.cloud-portal-beam {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--chip-orbit);
    height: 0;
    border-top: 1px solid rgba(124, 189, 230, 0.16);
    transform-origin: 0 0;
    transform: rotate(calc(var(--angle) - 90deg));
    pointer-events: none;
    z-index: -1;
}

.cloud-portal-beam::after {
    content: "";
    position: absolute;
    top: -2px;
    left: var(--chip-orbit);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7cbde6;
    box-shadow: 0 0 6px 1px rgba(124, 189, 230, 0.8);
    animation: cloud-telemetry-pulse 3.6s linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes cloud-telemetry-pulse {
    0%   { left: var(--chip-orbit); opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { left: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cloud-portal-beam::after {
        animation: none;
        opacity: 0;
    }
}

.cloud-portal-chip i {
    color: #7cbde6;
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.2s ease, scale 0.2s ease, filter 0.2s ease;
}

.cloud-portal-chip:hover,
.cloud-portal-chip:focus-visible {
    color: #ffffff;
    outline: none;
}

.cloud-portal-chip:hover i,
.cloud-portal-chip:focus-visible i {
    scale: 1.15;
    color: #ffffff;
    filter: drop-shadow(0 0 0.7rem rgba(124, 189, 230, 0.7));
}

.cloud-portal-chip-primary {
    color: #ffffff;
}

.cloud-portal-chip-primary i {
    color: #ff7a24;
}

.cloud-portal-chip-primary:hover i,
.cloud-portal-chip-primary:focus-visible i {
    filter: drop-shadow(0 0 0.7rem rgba(255, 122, 36, 0.7));
}

.cloud-portal-chip[data-tip]::before,
.cloud-portal-chip[data-tip]::after {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0.35rem);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    z-index: 5;
}

.cloud-portal-chip[data-tip]::before {
    content: attr(data-tip);
    width: max-content;
    max-width: 15rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: #16161f;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.4);
    color: #e5e2df;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
}

.cloud-portal-chip[data-tip]::after {
    content: "";
    bottom: calc(100% + 0.3rem);
    border: 6px solid transparent;
    border-top-color: #16161f;
}

.cloud-portal-chip[data-tip]:hover::before,
.cloud-portal-chip[data-tip]:hover::after,
.cloud-portal-chip[data-tip]:focus-visible::before,
.cloud-portal-chip[data-tip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (max-width: 768px) {
    .cloud-arch-galaxy {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        gap: 1.5rem 0.5rem;
        min-height: 0;
    }

    .cloud-arch-galaxy::before {
        content: none;
    }

    .cloud-portal-node {
        position: static;
        width: auto;
        height: auto;
    }

    .cloud-portal-beam {
        display: none;
    }

    .cloud-galaxy-core {
        position: static;
        translate: none;
        grid-column: 1 / -1;
        margin-bottom: 0.5rem;
    }

    .cloud-portal-chip {
        position: static;
        width: 100%;
        transform: none;
    }
}

/* ============================================================
   Ruckos Hybrid Cloud section — on-prem-to-Azure connectivity
   diagram (Site-to-Site VPN / ExpressRoute into a GPU-enabled
   RuckOS VM, Azure Databricks, and other Azure services).
   ============================================================ */

.cloud-hybrid-diagram {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr);
    align-items: center;
    gap: 2rem;
    max-width: 68rem;
    margin: 3.5rem auto 0;
}

.cloud-hybrid-zone {
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem 1.75rem;
    text-align: center;
    backdrop-filter: blur(10px);
}

.cloud-hybrid-zone-azure {
    border-color: rgba(79, 155, 208, 0.25);
}

.cloud-hybrid-zone-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4f9bd0, #ff7a24);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
    font-size: 1.6rem;
    color: #ffffff;
}

.cloud-hybrid-zone-icon-azure {
    background: linear-gradient(135deg, #0078d4, #50aaea);
    box-shadow: 0 0 1.6rem rgba(0, 120, 212, 0.45);
}

.cloud-hybrid-zone-label {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
}

.cloud-hybrid-zone-sub {
    color: #a0a0a0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.cloud-hybrid-links {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    padding: 0 0.5rem;
}

.cloud-hybrid-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    min-width: 9rem;
}

.cloud-hybrid-link-label {
    font-size: 0.72rem;
    color: #b8b8b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.cloud-hybrid-link-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(79, 155, 208, 0.7), rgba(255, 122, 36, 0.7));
    overflow: visible;
}

.cloud-hybrid-link-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7cbde6;
    box-shadow: 0 0 6px 1px rgba(124, 189, 230, 0.8);
    transform: translateY(-50%);
    animation: cloud-hybrid-pulse 2.6s linear infinite;
}

@keyframes cloud-hybrid-pulse {
    0%   { left: 0; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cloud-hybrid-link-line::before {
        animation: none;
        opacity: 0;
    }
}

.cloud-hybrid-link-icon {
    position: relative;
    z-index: 1;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #16161f;
    border: 1px solid rgba(79, 155, 208, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f9bd0;
    font-size: 0.85rem;
}

.cloud-hybrid-nodes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.35rem 0;
}

.cloud-hybrid-node {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.8rem 1.1rem;
    text-align: left;
}

.cloud-hybrid-node i {
    flex: 0 0 auto;
    width: 1.4rem;
    color: #ff7a24;
    font-size: 1.2rem;
    text-align: center;
}

.cloud-hybrid-node span {
    color: #e5e2df;
    font-size: 0.92rem;
    font-weight: 600;
}

.cloud-hybrid-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.cloud-hybrid-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 50px;
    background: rgba(79, 155, 208, 0.08);
    border: 1px solid rgba(79, 155, 208, 0.25);
    color: #7cbde6;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.cloud-hybrid-chip i {
    font-size: 0.75rem;
}

@media (max-width: 900px) {
    .cloud-hybrid-diagram {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cloud-hybrid-links {
        flex-direction: row;
        justify-content: center;
        gap: 2.5rem;
        padding: 0.5rem 0;
    }

    .cloud-hybrid-link {
        min-width: 0;
        width: 8rem;
    }
}

@media (max-width: 480px) {
    .cloud-hybrid-links {
        flex-direction: column;
        align-items: center;
    }

    .cloud-hybrid-link {
        width: 100%;
        max-width: 14rem;
    }
}
/* ------------------------------------------------------------
   #architecture section: "Easy to install and manage, built
   layer by layer" stacked architecture diagram (Immutable Linux
   Kernel -> Infrastructure Automation -> GitOps Automation ->
   Developer Portal, with an AI/Observability/Security overlay
   running across every layer). Migrated verbatim from index.css,
   where this exact .arch-* component is defined -- .bg-accent
   migrated verbatim from the common oldruckosplatform.css pattern
   (same as ai.css's bg-accent).
   ------------------------------------------------------------ */
.bg-accent {
    background: rgba(15, 15, 15, 0.8);
    position: relative;
    overflow: hidden;
}

.bg-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(79, 155, 208, 0.05) 0%, rgba(255, 122, 36, 0.05) 100%);
    z-index: 0;
}

.bg-accent > * {
    position: relative;
    z-index: 1;
}

.arch-stack {
    display: flex;
    align-items: stretch;
    gap: 1.6rem;
    max-width: 56rem;
    margin: 0 auto;
}

.arch-layers {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}

.arch-layer,
.arch-block {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.3rem 1.6rem 1.3rem 1.9rem;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.arch-layer::before,
.arch-block::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.arch-layer:hover,
.arch-block:hover {
    transform: translateX(6px);
    box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.3);
}

.arch-layer-narrow {
    align-self: center;
    width: 100%;
}

/* Bottom-to-top progression follows the site's brand blue -> orange
   gradient (same family as .stack-layer on the home page), so the
   stack reads as one cohesive system instead of a mixed color legend. */
.arch-layer-kernel {
    background: linear-gradient(120deg, rgba(47, 90, 130, 0.24), rgba(47, 90, 130, 0.06) 70%);
    border: 1px solid rgba(79, 155, 208, 0.35);
}

.arch-layer-kernel::before { background: #2f5a82; }

.arch-layer-infra {
    background: linear-gradient(120deg, rgba(79, 155, 208, 0.2), rgba(79, 155, 208, 0.04) 70%);
    border: 1px solid rgba(79, 155, 208, 0.4);
}

.arch-layer-infra::before { background: #4f9bd0; }

.arch-block-gitops {
    background: linear-gradient(120deg, rgba(255, 171, 107, 0.2), rgba(255, 171, 107, 0.04) 70%);
    border: 1px solid rgba(255, 171, 107, 0.4);
}

.arch-block-gitops::before { background: #ffab6b; }

.arch-block-portal {
    background: linear-gradient(120deg, rgba(255, 122, 36, 0.22), rgba(255, 122, 36, 0.05) 70%);
    border: 1px solid rgba(255, 122, 36, 0.4);
}

.arch-block-portal::before { background: #ff7a24; }

.arch-block-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    font-size: 1.25rem;
    color: #ffffff;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.3);
}

.arch-layer-kernel > .arch-block-icon { background: #2f5a82; }
.arch-layer-infra > .arch-block-icon { background: #4f9bd0; }
.arch-block-gitops .arch-block-icon { background: #ffab6b; }
.arch-block-portal .arch-block-icon { background: #ff7a24; }

.arch-block-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.arch-block-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

.arch-block-meta {
    margin-top: 0.2rem;
    color: #b9b4b0;
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Overlay: AI + Observability + Security run across every layer, so
   its panel uses the same brand blue -> orange gradient rather than
   a separate multi-hue legend, tying it visually to the stack. */
.arch-overlay {
    flex: 0 0 12rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    padding: 1.5rem 1.2rem;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(79, 155, 208, 0.16), rgba(255, 122, 36, 0.16));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.3);
}

.arch-overlay-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.05rem;
    color: #ffffff;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease;
}

.arch-overlay-icon:hover { transform: translateY(-3px); }

.arch-overlay-icon-ai            { background: #4f9bd0; }
.arch-overlay-icon-observability { background: #8cc7ec; }
.arch-overlay-icon-security      { background: #ff7a24; }

.arch-overlay-label {
    flex-basis: 100%;
    margin-top: 0.25rem;
    color: #e5e2df;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .arch-stack {
        flex-direction: column;
    }

    .arch-layer-narrow {
        width: 100%;
    }

    .arch-layer:hover,
    .arch-block:hover {
        transform: none;
    }

    .arch-overlay {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ============================================================
   #node-lifecycle diagram — copied from nytro.css, where this
   section originated (now commented out there; the HTML now
   lives here on cloud.html instead). cloud.css already has the
   shared .sections/.section-head/.portal-kicker/.portal-headline/
   .portal-gradient/.portal-sub header vocabulary above, so only
   the diagram-specific pieces below were missing. Trimmed to just
   the rules this section's markup actually uses — nytro.css also
   has sibling classes (.band, .groups, .stage-number,
   .boot-spinner-*, .provision-band-single) that belong to other
   diagrams there and have no matching HTML here, so those were
   left out.

   nytro.css defines these colors as CSS custom properties
   (--ink, --panel, --border, --shadow, --accent, --accent-2,
   --line, --muted on its :root); cloud.css doesn't use variables
   anywhere else, so the values are inlined literally here instead
   of introducing a :root block just for this one section.
   ------------------------------------------------------------
   --ink:      #f7f3f0
   --muted:    #b9b4b0
   --accent:   #4f9bd0
   --accent-2: #ff7a24
   --line:     rgba(79,155,208,.5)
   --panel:    rgba(14,14,14,.88)
   --border:   rgba(255,255,255,.12)
   --shadow:   0 24px 60px rgba(0,0,0,.4)
   ============================================================ */

.diagram {
  max-width: 1040px;
  margin: 0 auto 4rem;
}

body > .diagram {
  padding: 48px 24px 0;
}

.panel,
.diagram,
.diagram .chip {
  color: #f7f3f0;
}

.panel {
  background:
    radial-gradient(circle at top right, rgba(255, 122, 36, .08), transparent 32%),
    radial-gradient(circle at bottom left, rgba(79, 155, 208, .08), transparent 36%),
    rgba(14, 14, 14, .88);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  padding: 34px 34px 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  backdrop-filter: blur(12px);
}

.inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 6px;
}

.inputs-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.input {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.input .glyph {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  color: #ff7a24;
  background: rgba(255, 122, 36, .1);
  border: 1px solid rgba(255, 122, 36, .24);
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}

.connector {
  width: 2px;
  height: 22px;
  background: linear-gradient(180deg, rgba(79, 155, 208, .2), rgba(79, 155, 208, .5), rgba(79, 155, 208, .2));
  position: relative;
  margin: 6px 0;
}

.trunk {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
}

.trunk .connector {
  height: 20px;
}

.chip {
  width: 100%;
  padding: 12px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  color: #f7f3f0;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.chip small {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  color: #b9b4b0;
  font-size: 11px;
}

.stage-label {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 2.2rem 0 1.1rem;
  color: #f7f3f0;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .01em;
}

.stage-label:first-child {
  margin-top: 0;
}

/* VM sizing cards for etcd / control-plane / worker nodes */
.vm-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.vm-spec-card {
  padding: 18px 18px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .24);
  text-align: center;
}

.vm-spec-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(79, 155, 208, .12);
  border: 1px solid rgba(79, 155, 208, .28);
  color: #4f9bd0;
  font-size: 1.15rem;
}

.vm-spec-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #f7f3f0;
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: 10px;
}

.vm-spec-count {
  padding: .15rem .5rem;
  border-radius: 999px;
  background: rgba(255, 122, 36, .14);
  border: 1px solid rgba(255, 122, 36, .3);
  color: #ff7a24;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.vm-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #b9b4b0;
  font-size: .82rem;
}

.vm-spec-row:first-of-type {
  border-top: none;
}

.vm-spec-row span:last-child {
  color: #f7f3f0;
  font-weight: 700;
}

/* Platform fan-out: everything Bootstrap Platform installs */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}

.platform-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 14px 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  color: #f7f3f0;
  font-size: .76rem;
  font-weight: 700;
  text-align: center;
}

.platform-chip i {
  font-size: 1.1rem;
  color: #4f9bd0;
}

.cloud-capstone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  max-width: 260px;
  margin: 0 auto;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f9bd0, #ff7a24 80%);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  box-shadow: 0 16px 32px rgba(255, 122, 36, .28);
}

@media (max-width: 900px) {
  .vm-spec-grid {
    grid-template-columns: 1fr;
  }

  .platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inputs-two {
    grid-template-columns: 1fr;
    max-width: 280px;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .platform-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}