/* ============================================================
   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, lighthouse.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.
   ============================================================ */

/* 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: var(--font-sans);
    font-weight: var(--fw-bold);
    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: var(--fs-kicker);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
}

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

.hero-title {
    margin: 0;
    color: #f7f3f0;
    font-size: var(--fs-display);
    font-weight: var(--fw-display);
    font-variant-caps: normal;
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    text-transform: none;
}

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

.hero-title span {
    color: #d8d3d0;
    font-size: 0.75em;
    font-weight: var(--fw-light);
    font-variant-caps: normal;
    text-transform: none;
}

.hero-title strong {
    color: #ffffff;
    font-weight: var(--fw-display);
    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: var(--fs-lead);
    font-weight: var(--fw-medium);
    line-height: var(--lh-lead);
}

/* Hero: lighthouse overwatches bare metal + Hyper-V booting Ruckos Linux
   into a Kubernetes cluster that becomes a private cloud, with two
   established clusters faded in the background. */
.tree-hero {
    width: min(100%, 36rem);
    color: #f7f3f0;
}

.tree-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 26px 28px;
    border-radius: 24px;
    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);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

/* Lighthouse: cloud orchestrator console (top-right) listing the fleet */
.tree-beacon {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 190px;
    padding: 12px 15px 13px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(247, 243, 240, .45);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    transition: color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .25s ease;
}

.tree-beacon-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-bottom: 7px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: 1rem;
    font-weight: 800;
}

.tree-beacon-lamp {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 122, 36, .3);
    transition: background .4s ease, box-shadow .4s ease;
}

.tree-beacon-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: .5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: 0;
}

.tree-beacon-row i {
    font-size: .5rem;
    color: rgba(61, 220, 132, .5);
}

.tree-beacon-row small {
    font-size: .76rem;
    color: rgba(247, 243, 240, .4);
}

.tree-beacon-row-new i {
    color: rgba(255, 122, 36, .5);
}

.tree-beacon.is-lit {
    color: #f7f3f0;
    border-color: rgba(255, 122, 36, .55);
    box-shadow: 0 0 1.4rem rgba(255, 122, 36, .3);
}

.tree-beacon.is-lit .tree-beacon-lamp {
    background: #ff7a24;
    box-shadow: 0 0 .8rem rgba(255, 122, 36, .9);
}

.tree-beacon.is-lit .tree-beacon-row i {
    color: #3ddc84;
}

.tree-beacon:hover,
.tree-beacon:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    outline: none;
}

/* Cloud workloads card (top-left): same console styling, blue accent, icon rows */
.tree-beacon-apps {
    right: auto;
    left: 14px;
}

.tree-beacon-apps .tree-beacon-row {
    font-family: inherit;
    font-size: .84rem;
    font-weight: 700;
}

.tree-beacon-apps .tree-beacon-row i {
    width: 1rem;
    font-size: .8rem;
    text-align: center;
    color: rgba(79, 155, 208, .5);
}

.tree-beacon-apps.is-lit {
    border-color: rgba(79, 155, 208, .55);
    box-shadow: 0 0 1.4rem rgba(79, 155, 208, .28);
}

.tree-beacon-apps.is-lit .tree-beacon-row i {
    color: #4f9bd0;
}

.tree-beacon-apps:hover {
    transform: none;
}

/* Telemetry: cloud -> lighthouse, drawn once the cloud is online.
   Covers the panel; endpoints are routed in JS to the element borders. */
.tree-telemetry {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
}

.tree-telemetry.is-lit {
    opacity: 1;
}

.tree-telemetry-path {
    fill: none;
    stroke: rgba(79, 155, 208, .35);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Travelling signal, same pulse as .cloud-hybrid-link-line::before (motion + fade are SMIL, driven in cloud.html) */
.tree-telemetry-dot {
    fill: #7cbde6;
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(124, 189, 230, .9));
}

@media (prefers-reduced-motion: reduce) {
    .tree-telemetry-dot {
        display: none;
    }
}

.tree-stack {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.tree-capstone {
    position: relative;
    display: block;
    width: 130px;
    height: 74px;
    color: #fff;
    text-decoration: none;
    opacity: .35;
    filter: saturate(.3);
    transition: opacity .4s ease, filter .4s ease, transform .25s ease;
}

.tree-cloud-shape {
    display: block;
    width: 100%;
    height: 100%;
}

.tree-cloud-label {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .02em;
}

.tree-capstone.is-lit {
    opacity: 1;
    filter: drop-shadow(0 16px 24px rgba(255, 122, 36, .28));
}

.tree-capstone:hover,
.tree-capstone:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    outline: none;
}

.tree-connector {
    display: block;
    width: 2px;
    height: 22px;
    margin: 6px 0;
    background: linear-gradient(180deg, rgba(79, 155, 208, .2), rgba(79, 155, 208, .5), rgba(79, 155, 208, .2));
    opacity: .35;
    transition: opacity .4s ease;
}

.tree-connector.is-lit,
.tree-input .tree-connector {
    opacity: 1;
}

/* Full-width OS and Kubernetes layers */
.tree-band {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: .8rem;
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(247, 243, 240, .4);
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
    transition: color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .25s ease;
}

.tree-band i {
    font-size: 1.2rem;
    color: rgba(79, 155, 208, .4);
    transition: color .35s ease;
}

.tree-band small {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(247, 243, 240, .35);
    transition: color .35s ease;
}

.tree-band-os i {
    color: rgba(255, 122, 36, .4);
}

.tree-band.is-lit {
    color: #f7f3f0;
    border-color: rgba(79, 155, 208, .55);
    box-shadow: 0 0 1.2rem rgba(79, 155, 208, .28);
}

.tree-band.is-lit i {
    color: #4f9bd0;
}

.tree-band.is-lit small {
    color: rgba(247, 243, 240, .7);
}

.tree-band-os.is-lit {
    border-color: rgba(255, 122, 36, .6);
    box-shadow: 0 0 1.4rem rgba(255, 122, 36, .32);
}

.tree-band-os.is-lit i {
    color: #ff7a24;
}

.tree-band:hover,
.tree-band:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    outline: none;
}

/* Platform services band: five linked chips */
.tree-band-platform {
    cursor: default;
}

.tree-band-platform:hover {
    transform: none;
}

.tree-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.tree-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    color: rgba(247, 243, 240, .45);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    transition: color .35s ease, border-color .35s ease, transform .25s ease;
}

.tree-chip i {
    font-size: .7rem;
    color: rgba(79, 155, 208, .5);
    transition: color .35s ease;
}

.tree-band.is-lit .tree-chip {
    color: rgba(247, 243, 240, .85);
    border-color: rgba(79, 155, 208, .4);
}

.tree-band.is-lit .tree-chip i {
    color: #4f9bd0;
}

.tree-chip:hover,
.tree-chip:focus-visible {
    color: #fff;
    border-color: #ff7a24;
    transform: translateY(-1px);
    outline: none;
}

.tree-chip:hover i,
.tree-chip:focus-visible i {
    color: #ff7a24;
}

/* Hardware inputs */
/* One bare-metal tile under the hypervisor row (hero and provision diagrams). */
.tree-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    width: 100%;
    max-width: none;
}

.tree-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: inherit;
    text-decoration: none;
    opacity: .35;
    transition: opacity .4s ease, transform .25s ease;
}

.tree-input.is-lit {
    opacity: 1;
}

.tree-input:hover,
.tree-input:focus-visible {
    color: inherit;
    transform: translateY(-2px);
    outline: none;
}

.tree-input-label {
    width: 100%;
    padding: 8px 8px;
    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;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.tree-input-label small {
    display: block;
    margin-top: 2px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .03em;
    color: rgba(247, 243, 240, .55);
}

.tree-input-image {
    width: 100%;
    height: 96px;
    margin-top: 8px;
    object-fit: contain;
    filter: saturate(.6) brightness(.8);
    transition: filter .4s ease;
}

.tree-input.is-lit .tree-input-image {
    filter: none;
}

@media (max-width: 768px) {
    .tree-panel {
        padding: 60px 18px 22px;
    }

    .tree-beacon-apps {
        display: none;
    }
}

/* Wide variant: the #node-lifecycle provision diagram — same tree, full container width,
   with the complete platform-service fan-out and node sizing between Kubernetes and the OS. */
.tree-wide {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto 4rem;
}

.tree-wide .tree-panel {
    padding: 48px 34px 40px;
}

.tree-wide .tree-stack {
    max-width: 820px;
}

.tree-wide .tree-capstone {
    width: 200px;
    height: 92px;
}

.tree-wide .tree-cloud-label {
    font-size: .95rem;
}

.tree-wide .tree-band {
    padding: 14px 20px;
    font-size: 1rem;
}

.tree-wide .tree-band i {
    font-size: 1.4rem;
}

.tree-wide .tree-band small {
    font-size: .78rem;
}

.tree-wide .tree-band-platform {
    grid-template-columns: auto 1fr;
    row-gap: 14px;
}

.tree-wide .tree-chips {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.tree-wide .tree-chip {
    justify-content: center;
    padding: 9px 10px;
    border-radius: 12px;
    font-size: .78rem;
}

.tree-wide .tree-chip i {
    font-size: .9rem;
}

.tree-wide .vm-spec-grid {
    width: 100%;
    margin-top: 0;
}

.tree-wide .tree-inputs {
    max-width: none;
}

/* The Ruckos Linux VMs band labels the sized VM cards under it. */
.tree-wide .tree-band-os + .vm-spec-grid {
    margin-top: 12px;
}

.tree-wide .tree-input-label {
    padding: 10px;
    font-size: 14px;
}

.tree-wide .tree-input-label small {
    font-size: 11px;
}

.tree-wide .tree-input-image {
    height: 140px;
}

@media (max-width: 900px) {
    .tree-wide .tree-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

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

.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 12px;
    font-size: var(--fs-btn);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-btn);
    text-transform: uppercase;
    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: var(--ls-btn);
}

#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: var(--ls-btn);
}

#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 {
    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: var(--fs-kicker);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.portal-headline {
    font-size: var(--fs-h2);
    font-weight: var(--fw-display);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    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: var(--fs-lead);
    line-height: var(--lh-lead);
    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;
}

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

@media (max-width: 767px) {
    .lighthouse-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: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h3);
    margin-bottom: 1rem;
    color: white;
}

.card-content {
    color: #a0a0a0;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------
   Responsive (hero text + section headings + cards)
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
    .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;
        line-height: 1.5;
    }

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

/* Hero and provision diagrams, bottom up: bare metal, the hypervisor (Ruckos Virtualization or
   Hyper-V), the Ruckos Linux VMs (hero: control plane with stacked etcd, and workers), then Kubernetes. */
.tree-logo {
    width: 1.2rem;
    height: 1.2rem;
    opacity: .4;
    transition: opacity .35s ease;
}

.tree-band.is-lit .tree-logo,
.tree-input.is-lit .tree-logo {
    opacity: 1;
}

.tree-input-label .tree-logo {
    width: .9rem;
    height: .9rem;
    vertical-align: -2px;
}

.tree-band-vms {
    row-gap: 10px;
}

.tree-vms {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

.tree-vm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
    border: 1px solid rgba(79, 155, 208, .35);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: rgba(247, 243, 240, .85);
    font-size: .6rem;
    font-weight: 700;
    white-space: nowrap;
}

.tree-vm img {
    width: 1rem;
    height: 1rem;
}

.tree-vm-cp {
    border-color: rgba(255, 122, 36, .5);
}

.tree-hosts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

/* Phones: the workload box is hidden, so the telemetry lines go too, and the Lighthouse box
   sits above the cloud instead of on top of it. */
@media (max-width: 768px) {
    .tree-telemetry {
        display: none;
    }

    .tree-panel {
        padding-top: 22px;
    }

    .tree-beacon {
        position: static;
        align-self: stretch;
        margin-bottom: 18px;
    }
}

@media (max-width: 576px) {
    .tree-vms {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tree-hosts {
        grid-template-columns: 1fr;
    }
}

/* The tool rows link to the Ruckos tools section; they keep the box's text style. */
.tree-beacon-apps a.tree-beacon-row {
    color: inherit;
    text-decoration: none;
}

@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;
    align-items: center;
    min-width: 0;
}

/* Each tier: accent stripe, icon, title/meta, and a tag column saying what lives there.
   Widths step out toward the kernel so the foundation reads as the widest layer. */
.arch-layer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 1.2rem;
    width: 100%;
    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 {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

a.arch-layer {
    color: inherit;
    text-decoration: none;
}

.arch-block-icon img {
    width: 1.5rem;
    height: 1.5rem;
}

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

.arch-layer-portal { width: 88%; }
.arch-layer-gitops { width: 92%; }
.arch-layer-infra  { width: 96%; }

/* 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-layer-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-layer-gitops::before { background: #ffab6b; }

.arch-layer-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-layer-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-layer-gitops .arch-block-icon { background: #ffab6b; }
.arch-layer-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;
}

.arch-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    max-width: 14rem;
}

.arch-tag {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.28);
    color: #e5e2df;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Cross-cutting rails: AI, Observability and Security each run the full
   height of the stack as a vertical rail — icon at the top, a line that
   spans every layer, and a vertical label — so "runs across every layer"
   is drawn rather than captioned. */
.arch-rails {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 0.9rem;
    padding: 0.4rem 0;
}

.arch-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: 3.4rem;
    color: #e5e2df;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.arch-rail:hover,
.arch-rail:focus-visible {
    color: #ffffff;
    transform: translateY(-3px);
    outline: none;
}

.arch-rail-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);
}

.arch-rail-line {
    flex: 1;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--rail) 0%, rgba(255, 255, 255, 0.08) 100%);
}

.arch-rail-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

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

.arch-rail-icon { background: var(--rail); }

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

    .arch-layer-portal,
    .arch-layer-gitops,
    .arch-layer-infra {
        width: 100%;
    }

    .arch-layer {
        grid-template-columns: auto 1fr;
        row-gap: 0.8rem;
    }

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

    .arch-tags {
        grid-column: 1 / -1;
        justify-content: flex-start;
        max-width: none;
    }

    .arch-rails {
        flex-direction: column;
        gap: 0.6rem;
    }

    .arch-rail {
        flex-direction: row;
        width: 100%;
    }

    .arch-rail-line {
        flex: 1;
        width: auto;
        height: 3px;
        background: linear-gradient(90deg, var(--rail) 0%, rgba(255, 255, 255, 0.08) 100%);
    }

    .arch-rail-label {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

/* ============================================================
   #node-lifecycle node sizing cards (etcd / control-plane / worker),
   rendered inside the wide tree diagram between Kubernetes and the OS.
   ============================================================ */

.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-image {
  display: block;
  width: 100%;
  height: 110px;
  margin: 0 auto 10px;
  object-fit: contain;
}

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

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

/* ------------------------------------------------------------
   Carried over from lighthouse.css (Lighthouse diagram, feature cards, business value metrics)
   and gitops.css (card notes)
   ------------------------------------------------------------ */
:root {
  --accent: #4f9bd0;
  --accent-2: #ff7a24;
  --ink: #f7f3f0;
  --muted: #b9b4b0;
}

/* Lighthouse flow: where changes come from -> Lighthouse (desired state) -> the clusters.
   The links between them are drawn by the page script (drawLighthouseFlow). */
.lh-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem) minmax(0, 1fr);
  align-items: center;
  gap: 4.5rem;
  margin: 0 0 3rem;
  padding: 2.2rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  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);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

.lh-links {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lh-col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lh-source,
.lh-cluster {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  color: #f7f3f0;
  font-size: .9rem;
  font-weight: 700;
}

.lh-source {
  display: flex;
  align-items: center;
  gap: .8rem;
  border: 1px solid rgba(79, 155, 208, .35);
}

.lh-source i {
  width: 1.4rem;
  color: #4f9bd0;
  font-size: 1.1rem;
  text-align: center;
}

.lh-source small,
.lh-cluster small {
  display: block;
  color: rgba(247, 243, 240, .55);
  font-size: .7rem;
  font-weight: 600;
}

.lh-hub {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.6rem 1.2rem;
  border: 1px solid rgba(255, 122, 36, .55);
  border-radius: 18px;
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 0 1.6rem rgba(255, 122, 36, .3);
  color: #f7f3f0;
  text-align: center;
}

.lh-hub img {
  width: 2.6rem;
  height: 2.6rem;
}

.lh-hub-title {
  font-size: 1.2rem;
  font-weight: 800;
}

.lh-hub small {
  color: rgba(247, 243, 240, .6);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lh-hub-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: .4rem;
}

.lh-hub-tags span {
  padding: 3px 9px;
  border: 1px solid rgba(79, 155, 208, .4);
  border-radius: 999px;
  color: rgba(247, 243, 240, .85);
  font-size: .66rem;
  font-weight: 700;
}

.lh-cluster {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 4px;
  border: 1px solid rgba(63, 199, 139, .45);
}

.lh-cluster small {
  grid-column: 1 / -1;
}

.lh-cluster-name {
  font-size: .95rem;
  font-weight: 800;
}

.lh-status {
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: #3fc78b;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lh-drift {
  border-color: rgba(255, 122, 36, .55);
}

.lh-drift .lh-status {
  color: #ff7a24;
}

@media (max-width: 900px) {
  .lh-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
    padding: 1.4rem;
  }

  .lh-links {
    display: none;
  }
}

.lighthouse-feature-grid {
  margin-top:1rem;
}

.lighthouse-feature-card {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:1.6rem 1.5rem 1.45rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:
  radial-gradient(circle at top right, rgba(255,122,36,.1), transparent 30%),
  linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 22px 42px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.lighthouse-feature-card::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity:.9;
}

.lighthouse-feature-card:hover {
  transform:translateY(-6px);
  border-color:rgba(79,155,208,.3);
  box-shadow:0 28px 48px rgba(0,0,0,.34);
}

.lighthouse-feature-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:1.1rem;
}

.lighthouse-feature-tag,
.lighthouse-feature-metric {
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:.3rem .75rem;
  border-radius:999px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.lighthouse-feature-tag {
  color:var(--accent);
  background:rgba(79,155,208,.12);
  border:1px solid rgba(79,155,208,.22);
}

.lighthouse-feature-metric {
  color:var(--accent-2);
  background:rgba(255,122,36,.12);
  border:1px solid rgba(255,122,36,.22);
}

.lighthouse-feature-card .feature-icon {
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.15rem;
  border-radius:18px;
  font-size:1.45rem;
  color:var(--accent-2);
  background:rgba(255,122,36,.1);
  border:1px solid rgba(255,122,36,.2);
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}

.lighthouse-feature-card h3 {
  margin:0 0 .8rem;
  color:var(--ink);
  font-size:var(--fs-h3);
  font-weight:var(--fw-bold);
  line-height:var(--lh-h3);
}

.lighthouse-feature-card p {
  margin:0;
  flex:1 1 auto;
  color:var(--muted);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}

.lighthouse-feature-footer {
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.08);
  color:#d8d3d0;
  font-size:var(--fs-small);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-small);
}

@media (max-width: 767px) {
  .lighthouse-feature-topline {
    align-items:flex-start;
    flex-direction:column;
  }
}

.metrics-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(10px);
}

.metrics-title {
  margin: 0 0 1.75rem;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
}

.azuresnap {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.azuresnap li {
  gap: 1rem;
}

.metric-label {
  flex: 0 0 auto;
  min-width: 15rem;
  color: #b9b4b0;
  font-size: 0.92rem;
  font-weight: 600;
}

.azuresnap .progress {
  flex: 1 1 auto;
  height: 1.5rem;
  background: rgba(255, 255, 255, 0.06);
}

.azuresnap .progress-bar {
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 575px) {
  .azuresnap li {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }
}

@media (max-width: 575px) {
  .metric-label {
    min-width: 0;
  }
}

@media (max-width: 575px) {
  .azuresnap .progress {
    width: 100%;
  }
}

.ai-enhancement {
  background: rgba(79, 155, 208, 0.1);
  border: 1px solid rgba(79, 155, 208, 0.2);
  border-radius: 8px;
  padding: 0.8rem;
  margin-top: auto;
  font-size: 0.9rem;
  color: #4f9bd0;
}