:root{color-scheme:dark;--bg:#080d17;--panel:#101925;--border:#25303d;--text:#f0f5f8;--muted:#a4b2c1;--mint:#83eee0;--violet:#aea1fc}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--mint);outline-offset:5px}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Manrope,sans-serif}h2{font-size:clamp(32px,4vw,52px);line-height:1.18;letter-spacing:-1.8px;font-weight:500}.header{height:96px;max-width:1440px;padding:0 5%;margin:auto;display:flex;align-items:center;gap:40px;position:relative;z-index:10}.brand{display:inline-flex;align-items:center;gap:11px;font-size:21px;font-weight:800;letter-spacing:2px;white-space:nowrap}.brandmark{width:31px;height:34px;display:grid;place-items:center;color:var(--mint);font:800 italic 36px/1 Manrope,sans-serif;transform:skew(-8deg);letter-spacing:-4px;padding-right:4px}.brand-dot{font-size:10px;color:#7a8c9c;align-self:flex-start;margin-left:-6px}nav{display:flex;gap:28px;margin-left:auto;font-size:14px;color:#b6c1cd}nav a:hover,footer a:hover{color:var(--mint)}.nav-cta{padding:10px 17px;border:1px solid #3b4c59;border-radius:6px;font-size:14px}.menu-toggle{display:none}.skip{position:fixed;top:-70px;z-index:100;background:var(--mint);color:#08131c;padding:10px}.skip:focus{top:0}.hero{position:relative;max-width:1440px;margin:auto;padding:75px 5% 0;overflow:hidden}.hero-art{position:absolute;top:-50px;right:-100px;width:75%;height:740px;background:radial-gradient(ellipse at 65% 45%,#123c493d,transparent 65%);z-index:-1;opacity:.85;background-size:cover;background-position:center}.hero-copy{position:relative;z-index:1;max-width:840px}.eyebrow{font-size:12px;letter-spacing:2.3px;font-weight:700;color:var(--mint);margin-bottom:25px;display:flex;align-items:center;gap:12px}.tiny-line{width:24px;height:1px;background:var(--mint)}h1{font-size:clamp(48px,6.6vw,88px);font-weight:500;line-height:1.08;letter-spacing:-4px}h1 em{font-style:normal;color:var(--mint)}.hero-copy>p{font-size:19px;line-height:1.7;color:#b1bdca;margin-top:28px}.hero-actions{display:flex;gap:30px;align-items:center;margin:31px 0 25px}.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:5px;font-weight:600;font-size:14px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--mint);color:#062521;box-shadow:0 4px 25px #71e5d715}.primary:hover{background:#affcf3}.text-link{font-size:14px;border-bottom:1px solid #728393;padding-bottom:4px}.release-label{display:flex;align-items:center;gap:12px;font-size:12px;color:#8596a7}.release-label>span{font-size:10px;letter-spacing:1px;background:#16232d;border:1px solid #2a3c48;padding:4px 8px;border-radius:3px;color:#c3d7e1}.hero-console{margin:55px 0 0 14%;position:relative;transform:perspective(1500px) rotateY(-3deg) rotateX(2deg);transform-origin:left center}.console-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.8px;color:#8caaaf;padding:0 4px 10px}.caption{font-size:12px;text-align:center;color:#8596a7;margin-top:12px}.hero-bottom{display:flex;gap:55px;border-bottom:1px solid var(--border);padding:36px 0 28px;font-size:10px;letter-spacing:1.5px;color:#8d9cac}.hero-bottom>span:first-child{margin-right:auto;color:#c8d2db}.section{max-width:1296px;margin:auto;padding:105px 4%}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:70px;margin-bottom:48px}.section-heading>p{max-width:390px;color:var(--muted);font-size:16px;line-height:1.8}.section-heading .eyebrow{margin-bottom:18px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product-card{position:relative;padding:28px;background:linear-gradient(145deg,#131e2b,#0b121d);border:1px solid var(--border);border-radius:9px}.product-no{font-size:10px;letter-spacing:1.5px;color:#8ea2b6}.product-symbol{margin:35px 0 20px;width:55px;height:55px;border:1px solid #31504e;background:#13313266;color:var(--mint);font-size:32px;text-align:center;line-height:53px;border-radius:12px}.server-symbol{color:#bbb0fa;border-color:#44415d;background:#24223b}h3{font-size:22px;font-weight:600}.product-card h3{font-size:30px;line-height:1.3}.product-card h3 span{font:600 10px 'DM Sans',sans-serif;letter-spacing:2px;color:#93a9b7;display:block;margin-bottom:8px}.product-card p{font-size:14px;color:var(--muted);margin-top:19px;line-height:1.9}.product-tag{font-size:12px;color:#c9d5df;display:block;padding-top:30px}.horizon-card{border-color:#456761;background:linear-gradient(145deg,#162e31,#0e1724)}.showcase{max-width:none;background:#0c1420;border-block:1px solid #1a2733;padding-left:max(5%,calc((100vw - 1192px)/2));padding-right:max(5%,calc((100vw - 1192px)/2))}.gallery-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px;gap:10px}.tabs{display:flex;gap:6px;padding:5px;background:#080f19;border:1px solid var(--border);border-radius:7px}.tabs button{background:none;border:0;padding:10px 19px;border-radius:4px;color:#91a3b5;font-size:14px}.tabs button[aria-selected=true]{background:#21362f;color:#a6f5df}.expand-button{border:0;background:none;font-size:13px;color:#b6c3d1}.expand-button span{font-size:22px;margin-left:9px}.gallery-caption{display:flex;justify-content:space-between;gap:30px;margin-top:24px;align-items:start}.gallery-caption p{font-size:14px;color:#c2d0db;max-width:510px}.gallery-caption>span{font-size:12px;color:#8293a4;text-align:right}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:45px;row-gap:45px}.feature-grid article{border-top:1px solid var(--border);padding-top:25px}.feature-icon{font-size:26px;color:var(--mint);display:block;margin-bottom:15px}.feature-grid h3{font-size:19px;margin-bottom:12px}.feature-grid p{font-size:15px;color:var(--muted);line-height:1.85}.about{border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1.2fr;gap:80px}.about p{margin-top:25px;color:var(--muted);font-size:17px}.large-z{font:800 italic 160px/1 Manrope;color:#83eee017;display:block;margin-top:30px;letter-spacing:-20px}.about-note{margin-top:25px;border-left:2px solid #659b95;padding-left:20px;color:#8095a6;font-size:13px}.closing{border-top:1px solid #273a43;background:radial-gradient(ellipse at 50% 100%,#173e4166,transparent 70%),#0e1823;text-align:center;position:relative;overflow:hidden;padding:80px 20px 110px}.closing .eyebrow{justify-content:center}.closing h2{font-size:clamp(45px,6vw,76px);letter-spacing:-2px}.closing p{margin:23px 0;color:#afbfca}.secondary{border:1px solid #628780;background:#1d3338;color:#d5f5ee}.closing-word{position:absolute;bottom:-75px;left:50%;transform:translateX(-50%);font:800 180px/1 Manrope;letter-spacing:12px;color:#78958c06;pointer-events:none}footer{max-width:1296px;margin:auto;display:flex;gap:40px;align-items:center;padding:40px 4%;font-size:12px;color:#8294a7}footer .brand{font-size:17px;color:#e2ebf0}footer>span:nth-of-type(1){margin-right:auto}footer .brandmark{font-size:28px}.app-shell{background:#0d1521;border:1px solid #32434d;border-radius:9px;box-shadow:0 20px 90px #0005;overflow:hidden;display:grid;grid-template-columns:160px 1fr;min-height:420px;font-size:12px;line-height:1.5}.app-side{border-right:1px solid #21303d;padding:20px 14px;background:#0b131e}.app-logo{font-weight:700;letter-spacing:1.5px;font-size:11px;margin-bottom:30px;display:flex;align-items:center;gap:8px}.app-logo b{color:var(--mint);font-size:24px;font-style:italic}.app-nav-label{font-size:9px;color:#5f7487;letter-spacing:1px;margin:20px 8px 10px}.app-nav-item{padding:10px 10px;color:#9cabbb;border-radius:4px;margin:3px 0;font-size:11px}.app-nav-item.active{color:#9cf0dc;background:#183a353d;border:1px solid #2a5149}.app-nav-item span{margin-right:10px;color:#92abae}.app-side-foot{color:#617a89;font-size:9px;margin:70px 6px 0}.app-content{min-width:0}.app-top{height:45px;border-bottom:1px solid #21303d;display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#8495a6;font-size:10px}.app-top>span:last-child{padding:3px 9px;background:#233334;border-radius:3px;color:#9bd4bf;font-size:9px}.app-body{padding:22px}.app-title{font:600 21px Manrope;margin-bottom:4px}.app-subtitle{color:#7e93a5;font-size:10px;margin-bottom:20px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat{border:1px solid #263441;background:#121e2c;border-radius:5px;padding:12px}.stat-label{font-size:9px;color:#a0b0c0}.stat-value{font-size:25px;margin:6px 0;line-height:1.1;letter-spacing:-1px}.stat-note{font-size:9px;color:#70cdb5}.stat-note.amber{color:#e3bd78}.app-lower{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;margin-top:15px}.app-panel{border:1px solid #243440;background:#101b28;border-radius:5px;padding:15px}.panel-title{display:flex;justify-content:space-between;color:#d1dce5;font-size:11px}.panel-title span{color:#8094a7;font-size:9px}.chart{width:100%;height:100px;margin-top:13px;display:block}.chart-labels{display:flex;justify-content:space-between;color:#637d90;font-size:8px}.activity-row{display:flex;gap:10px;align-items:center;font-size:10px;border-bottom:1px solid #20303c;padding:12px 0}.activity-row:last-child{border:0}.activity-row i{width:7px;height:7px;border-radius:50%;background:#79d7ba;flex-shrink:0}.activity-row i.warn{background:#dfb46c}.activity-row small{display:block;color:#6d8497;font-size:9px}.app-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:16px;text-align:left}.app-table th{color:#8298aa;font-size:9px;font-weight:400;padding:9px;background:#13212e}.app-table td{padding:13px 9px;border-bottom:1px solid #22313e;color:#bdcbd7}.status-pill{padding:3px 7px;border-radius:4px;background:#183a31;color:#90d8b9;font-size:9px;white-space:nowrap}.status-pill.offline{background:#26303b;color:#93a2b0}.customer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:22px}.customer-tile{border:1px solid #2b3e4b;border-radius:6px;padding:19px;background:#111f2c}.customer-avatar{display:grid;place-items:center;width:32px;height:32px;background:#26413f;color:#a3eadc;border-radius:8px;margin-bottom:15px}.customer-tile h4{font-size:12px;margin:0 0 8px}.customer-tile p{color:#7f98ab;font-size:10px}.customer-tile strong{display:block;margin-top:24px;font-size:22px;font-weight:500}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.metric-grid .chart{height:70px}.metric-number{font-size:25px;margin:8px 0;color:#d5e8ed}.metric-number small{font-size:11px;color:#7c94a9}.demo-note{font-size:9px;color:#7392a1;margin-top:17px}.app-filter{border:1px solid #2b3b49;background:#121f2c;padding:9px 12px;color:#849aab;font-size:10px;border-radius:5px;max-width:260px}dialog{width:min(1250px,95vw);max-height:92vh;background:#0c1521;border:1px solid #4d6e76;border-radius:12px;padding:20px;color:var(--text)}dialog::backdrop{background:#030811dc;backdrop-filter:blur(8px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:20px;font-size:14px}.dialog-top strong span{color:#8296a7;font-size:12px;margin-left:15px;font-weight:400}.dialog-top button{background:#21333f;border:1px solid #3c525e;border-radius:4px;padding:7px 15px}.dialog-top+.app-shell{min-height:500px}
@media(min-width:1450px){.hero{padding-top:100px}.hero-art{right:0}}@media(max-width:1000px){.header{gap:20px}nav{gap:16px}.nav-cta{display:none}.hero-console{margin-left:0}.section-heading{gap:40px}.hero-bottom{gap:25px}.app-shell{grid-template-columns:135px 1fr}.app-side{padding:17px 8px}.app-body{padding:16px}.about{gap:40px}.product-card{padding:22px}.product-card p{font-size:14px}footer{flex-wrap:wrap}}@media(max-width:700px){.header{height:78px;padding:0 6%}.brand{font-size:18px}.menu-toggle{display:block;margin-left:auto;background:none;border:1px solid #36515b;border-radius:4px;padding:6px 13px;font-size:13px}nav{display:none;position:absolute;top:70px;left:5%;right:5%;padding:20px;background:#12212d;border:1px solid #35545e;border-radius:6px;box-shadow:0 20px 50px #0008}nav.open{display:flex;flex-direction:column;gap:18px}.hero{padding:45px 6% 0}h1{font-size:49px;letter-spacing:-2.2px}.eyebrow{font-size:10px;letter-spacing:1.7px}.hero-copy>p{font-size:16px}.hero-actions{gap:18px;align-items:flex-start;flex-direction:column}.release-label{font-size:10px;align-items:start;flex-direction:column;gap:7px}.hero-console{margin-top:35px;transform:none}.hero-art{width:140%;right:-55%;opacity:.6}.hero-bottom{gap:18px;flex-wrap:wrap;font-size:9px;padding:22px 0}.hero-bottom>span:first-child{flex-basis:100%}.section{padding:65px 6%}.section-heading{display:block;margin-bottom:32px}.section-heading>p{margin-top:22px;font-size:15px}.product-grid{grid-template-columns:1fr}.product-card{padding:25px}.product-symbol{margin-top:22px}.product-card p{max-width:440px}.product-card h3{font-size:28px}.product-tag{padding-top:20px}.feature-grid{grid-template-columns:1fr 1fr;gap:28px 23px}.feature-grid h3{font-size:17px}.feature-grid p{font-size:14px}.gallery-toolbar{align-items:flex-start;flex-direction:column;gap:14px}.tabs{width:100%;gap:0;justify-content:space-between}.tabs button{padding:9px 8px;font-size:12px}.expand-button{align-self:flex-end}.app-shell{grid-template-columns:1fr;min-height:0}.app-side{display:none}.app-body{padding:14px}.app-top{padding:0 14px;height:37px}.app-title{font-size:18px}.stat-grid{grid-template-columns:1fr 1fr;gap:8px}.stat{padding:10px}.stat-value{font-size:22px}.app-lower{grid-template-columns:1fr}.app-lower>.app-panel:last-child{display:none}.hero-console .app-shell{max-height:480px}.gallery-caption{display:block}.gallery-caption>span{display:block;text-align:left;margin-top:10px;font-size:11px}.app-table{font-size:10px}.app-table td{padding:11px 6px}.app-table th{padding:8px 6px}.app-table .optional{display:none}.customer-grid{grid-template-columns:1fr}.customer-tile{display:grid;grid-template-columns:40px 1fr 40px;gap:5px;align-items:center;padding:13px}.customer-tile .customer-avatar{grid-row:span 2;margin:0}.customer-tile strong{grid-column:3;grid-row:1 / span 2;margin:0}.customer-tile h4{margin:0}.customer-tile p{grid-column:2}.metric-grid{gap:8px}.app-panel{padding:11px}.metric-grid .chart{height:50px}.metric-number{font-size:22px}.about{display:block}.large-z{display:none}.about h2{margin-top:25px}.about p{font-size:16px}.closing{padding:65px 6% 80px}.closing p{font-size:15px}.closing-word{font-size:95px;bottom:-33px}.closing h2{font-size:47px}footer{gap:22px;padding:30px 6%;font-size:11px}footer>span:nth-of-type(1){flex-basis:100%;order:3}dialog{padding:12px}.dialog-top strong span{display:none}.dialog-top{font-size:12px}.dialog-top+.app-shell{min-height:0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.hero{isolation:isolate}.hero-art{background-image:linear-gradient(90deg,#080d17 0%,transparent 35%),linear-gradient(0deg,#080d17 0%,transparent 40%),url('hero.webp');mask-image:linear-gradient(180deg,#000 65%,transparent);opacity:.8}

h1{letter-spacing:-.035em}.app-shell{font-size:14px}.app-nav-item,.panel-title,.app-table{font-size:12px}.app-top,.app-subtitle,.stat-label,.stat-note,.activity-row,.customer-tile p,.app-filter{font-size:12px}.app-logo,.app-nav-label,.app-side-foot,.app-table th,.status-pill,.panel-title span,.activity-row small,.demo-note,.chart-labels{font-size:12px}.app-top>span:last-child{font-size:12px}.hero-copy>p{max-width:650px}@media(max-width:700px){.app-table{font-size:12px}.app-table td{overflow-wrap:anywhere}.metric-grid .panel-title{display:block}.metric-grid .panel-title span{display:block}.tabs button{font-size:12px}}
/* =========================================================
   ZENVEXO V2
   NETWORK / MULTI-TENANT / ARCHITECTURE
========================================================= */

/* Network section */

.network-section {
    position: relative;
}

.network-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 38px;
}

.network-points > div {
    position: relative;
    padding: 22px;
    min-height: 125px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 34, 48, .95),
            rgba(10, 18, 29, .95)
        );

    border: 1px solid #263947;
    border-radius: 8px;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.network-points > div:hover {
    transform: translateY(-3px);
    border-color: #47766f;

    background:
        linear-gradient(
            145deg,
            rgba(24, 49, 51, .95),
            rgba(11, 22, 33, .95)
        );
}

.network-points strong {
    display: block;

    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-weight: 600;

    color: #e6f3f4;

    margin-bottom: 9px;
}

.network-points span {
    display: block;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   MULTI TENANT
========================================================= */

.tenant-flow {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: stretch;

    gap: 15px;

    margin-top: 25px;
}

.tenant-item {
    position: relative;

    min-height: 165px;

    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    border: 1px solid #293b48;
    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #121f2c,
            #0b131e
        );

    overflow: hidden;
}

.tenant-item::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -65px;
    right: -45px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(131, 238, 224, .14),
            transparent 70%
        );
}

.tenant-item > span {
    position: absolute;

    top: 18px;
    left: 20px;

    font-size: 10px;

    letter-spacing: 1.5px;

    color: var(--mint);
}

.tenant-item strong {
    font-family: Manrope, sans-serif;

    font-size: 20px;

    color: #eef6f7;
}

.tenant-item small {
    margin-top: 5px;

    color: #8094a7;

    font-size: 12px;
}

.tenant-arrow {
    display: grid;

    place-items: center;

    color: #5d817f;

    font-size: 22px;
}


/* =========================================================
   ARCHITECTURE
========================================================= */

.architecture-flow {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 14px;

    margin-top: 42px;
}

.architecture-node {
    position: relative;

    min-height: 145px;

    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    background:
        linear-gradient(
            145deg,
            #13222f,
            #0b141f
        );

    border: 1px solid #2b414d;

    border-radius: 8px;
}

.architecture-node > span {
    position: absolute;

    top: 18px;
    left: 20px;

    color: var(--mint);

    font-size: 10px;

    letter-spacing: 1.5px;
}

.architecture-node strong {
    font-family: Manrope, sans-serif;

    font-size: 17px;

    color: #e7f2f4;
}

.architecture-node small {
    margin-top: 6px;

    color: #8094a7;

    font-size: 11px;
}

.architecture-line {
    color: var(--mint);

    opacity: .55;

    font-size: 22px;
}


/* =========================================================
   PRODUCT CARDS
========================================================= */

.product-card {
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.product-card:hover {
    transform: translateY(-5px);

    border-color: #405a64;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .22);
}

.horizon-card:hover {
    border-color: #58887e;
}


/* =========================================================
   HERO V2
========================================================= */

.hero {
    min-height: calc(100vh - 96px);
}

.hero-art {
    width: 82%;
    height: 820px;

    right: -80px;
    top: -90px;

    opacity: .9;

    background-position:
        center right;

    background-size:
        cover;
}

.hero-copy {
    padding-top: 15px;
}

.hero-copy h1 {
    max-width: 950px;
}

.hero-copy > p {
    max-width: 610px;
}

.hero-console {
    margin-top: 75px;
}


/* Give the hero image more depth */

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: -1;

    background:
        radial-gradient(
            ellipse at 75% 28%,
            rgba(24, 119, 177, .10),
            transparent 42%
        );
}


/* =========================================================
   SECTION DETAILS
========================================================= */

.features {
    position: relative;
}

.features::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -250px;
    top: 180px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(80, 195, 210, .05),
            transparent 70%
        );
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .tenant-flow {
        grid-template-columns: 1fr;
    }

    .tenant-arrow {
        height: 25px;

        transform: rotate(90deg);
    }

    .architecture-flow {
        grid-template-columns: 1fr;
    }

    .architecture-line {
        height: 25px;

        display: grid;

        place-items: center;

        transform: rotate(90deg);
    }

}


@media (max-width: 700px) {

    .network-points {
        grid-template-columns: 1fr;
    }

    .network-points > div {
        min-height: auto;
    }

    .tenant-item {
        min-height: 135px;
    }

    .architecture-node {
        min-height: 125px;
    }

    .hero {
        min-height: auto;
    }

    .hero-art {
        width: 160%;

        height: 650px;

        right: -75%;

        top: -80px;

        opacity: .65;
    }

}


/* =========================================================
   ZENVEXO HORIZON V3
   COMPLETE PRODUCT VISION
========================================================= */

/* Make Horizon a stronger visual part of the website */

.showcase {
    max-width: 1500px;
}

.showcase #gallery-panel {
    margin-top: 18px;
}

.showcase .app-shell {
    min-height: 720px;
}

.hero-console {
    width: min(1120px, 92%);
}

.hero-console .app-shell {
    min-height: 560px;
}


/* =========================================================
   HORIZON SHELL
========================================================= */

.app-shell {
    background: #09111b;
    border: 1px solid #263846;
    border-radius: 8px;
    box-shadow:
        0 35px 100px rgba(0, 0, 0, .35),
        inset 0 1px rgba(255, 255, 255, .025);
}

.app-side {
    width: 185px;
    min-width: 185px;
    background:
        linear-gradient(
            180deg,
            #0b151f 0%,
            #09111a 100%
        );
}

.app-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-logo > div {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.app-logo small {
    margin-top: 3px;
    color: #557083;
    font-size: 7px;
    letter-spacing: 1.4px;
}

.app-nav-item {
    font-size: 10px;
    min-height: 31px;
}

.app-nav-item span {
    width: 19px;
    text-align: center;
}

.app-nav-item.active {
    background:
        linear-gradient(
            90deg,
            rgba(89, 229, 210, .12),
            rgba(89, 229, 210, .025)
        );
}

.app-content {
    min-width: 0;
}


/* =========================================================
   TOP BAR
========================================================= */

.app-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-breadcrumb {
    color: #7990a1;
    font-size: 9px;
    letter-spacing: .5px;
}

.app-top-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.system-health {
    color: #71d9c5;
    font-size: 8px;
    letter-spacing: .7px;
}

.customer-selector {
    padding: 6px 9px;
    border: 1px solid #283c48;
    border-radius: 4px;
    background: #0e1924;
    color: #a9bbc5;
    font-size: 8px;
}


/* =========================================================
   PAGE HEADING
========================================================= */

.app-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.app-live {
    color: #6ee5d0;
    font-size: 8px;
    letter-spacing: 1px;
    padding-top: 5px;
}


/* =========================================================
   SUMMARY CARDS
========================================================= */

.horizon-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 17px;
    margin-bottom: 13px;
}

.horizon-summary .stat {
    min-height: 87px;
    padding: 14px;
}

.horizon-summary .stat.warning {
    border-color: rgba(229, 177, 104, .35);
    background:
        linear-gradient(
            145deg,
            rgba(58, 42, 27, .4),
            rgba(14, 23, 32, .95)
        );
}

.horizon-summary .stat-value {
    font-size: 25px;
    margin-top: 7px;
}

.horizon-summary .stat-note {
    margin-top: 3px;
}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.horizon-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 11px;
}

.horizon-dashboard-grid .app-panel {
    min-height: 190px;
}

.performance-panel {
    grid-column: span 2;
}

.activity-panel {
    grid-column: span 2;
}


/* =========================================================
   DEVICE HEALTH
========================================================= */

.health-content {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 20px;
    padding-top: 18px;
}

.health-score {
    width: 95px;
    height: 95px;
    border-radius: 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: 7px solid rgba(104, 238, 229, .2);

    box-shadow:
        inset 0 0 0 2px rgba(104, 238, 229, .35),
        0 0 30px rgba(104, 238, 229, .04);
}

.health-score strong {
    font-family: Manrope, sans-serif;
    font-size: 22px;
    color: #e8f6f5;
}

.health-score span {
    margin-top: 2px;
    color: #7e999d;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.health-list {
    display: grid;
    gap: 11px;
}

.health-list > div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 7px;
    color: #8398a8;
    font-size: 9px;
}

.health-list strong {
    color: #c5d4da;
}

.health-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.health-dot.good {
    background: #70dfc8;
    box-shadow: 0 0 8px rgba(112, 223, 200, .4);
}

.health-dot.warning {
    background: #e4b168;
}

.health-dot.offline {
    background: #697885;
}


/* =========================================================
   ALERTS
========================================================= */

.alert-panel {
    overflow: hidden;
}

.alert-row {
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 9px;
    align-items: center;

    padding: 10px 0;
    border-bottom: 1px solid #1c2c38;
}

.alert-row:last-child {
    border-bottom: 0;
}

.alert-icon {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    font-size: 9px;
}

.alert-row.warning .alert-icon {
    color: #e9bc7c;
    background: rgba(226, 168, 91, .1);
    border: 1px solid rgba(226, 168, 91, .22);
}

.alert-row.info .alert-icon {
    color: #7fc7e9;
    background: rgba(85, 170, 216, .1);
    border: 1px solid rgba(85, 170, 216, .2);
}

.alert-row strong {
    display: block;
    color: #bdccd2;
    font-size: 9px;
    font-weight: 500;
}

.alert-row small {
    display: block;
    margin-top: 3px;
    color: #617687;
    font-size: 7px;
}


/* =========================================================
   PERFORMANCE
========================================================= */

.performance-panel .chart {
    height: 85px;
}

.performance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    margin-bottom: -5px;
}

.performance-row span {
    color: #6e8493;
    font-size: 8px;
}

.performance-row strong {
    color: #d6e5e8;
    font-family: Manrope, sans-serif;
    font-size: 17px;
}

.performance-footer {
    display: flex;
    justify-content: space-between;
    color: #5f7484;
    font-size: 7px;
    margin-top: 3px;
}


/* =========================================================
   NETWORK HEALTH
========================================================= */

.network-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 17px;
}

.network-status-grid > div {
    padding: 12px;
    background: #0b1620;
    border: 1px solid #21333f;
    border-radius: 5px;
}

.network-status-icon {
    display: block;
    color: #68ded0;
    font-size: 15px;
    margin-bottom: 9px;
}

.network-status-grid strong {
    display: block;
    color: #b9cbd1;
    font-size: 8px;
}

.network-status-grid small {
    display: block;
    margin-top: 3px;
    font-size: 7px;
}

.good-text {
    color: #69d5bd !important;
}

.warning-text {
    color: #e3b26e !important;
}


/* =========================================================
   ACTIVITY
========================================================= */

.activity-panel .activity-row {
    padding: 10px 0;
}


/* =========================================================
   TOOLBAR
========================================================= */

.view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    margin-bottom: 10px;
}

.view-toolbar .app-filter {
    margin: 0;
    flex: 1;
}

.view-counter {
    color: #6c8292;
    font-size: 8px;
    white-space: nowrap;
}


/* =========================================================
   NETWORK VIEW
========================================================= */

.network-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.topology-panel {
    min-height: 405px;
}

.topology {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px 5px;
}

.topology-node {
    min-width: 145px;
    padding: 11px 14px;
    text-align: center;

    background:
        linear-gradient(
            145deg,
            #112330,
            #0c1721
        );

    border: 1px solid #2b4652;
    border-radius: 6px;
}

.topology-node > span {
    display: block;
    color: #6fe4d4;
    font-size: 15px;
    margin-bottom: 4px;
}

.topology-node strong {
    display: block;
    color: #c4d5da;
    font-size: 8px;
}

.topology-node small {
    display: block;
    margin-top: 3px;
    color: #6c8392;
    font-size: 7px;
}

.topology-node.internet {
    border-color: rgba(104, 238, 229, .32);
}

.topology-link {
    width: 1px;
    height: 20px;
    background: #315260;
}

.topology-branches {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    width: 100%;
    margin-top: 20px;
}

.topology-branches::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 16%;
    right: 16%;
    height: 1px;
    background: #315260;
}

.topology-node.small {
    min-width: 0;
}

.network-detail {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    padding: 14px 0;
    border-bottom: 1px solid #1e303b;

    font-size: 8px;
}

.network-detail span {
    color: #718796;
}

.network-detail strong {
    color: #c0d0d5;
    font-weight: 500;
}


/* =========================================================
   MONITORING
========================================================= */

.metric-grid {
    margin-top: 12px;
}

.metric-grid .app-panel {
    min-height: 215px;
}

.metric-grid .chart {
    height: 80px;
}


/* =========================================================
   REMOTE SUPPORT
========================================================= */

.remote-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

.remote-main {
    min-height: 385px;
}

.remote-device {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;

    padding: 16px;
    margin-top: 15px;

    border: 1px solid #253b47;
    border-radius: 6px;

    background:
        linear-gradient(
            145deg,
            #10202c,
            #0c1721
        );
}

.remote-device-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    color: #75e2d2;
    background: rgba(100, 225, 208, .08);
    border: 1px solid rgba(100, 225, 208, .17);
}

.remote-device strong {
    display: block;
    color: #d1e0e3;
    font-size: 10px;
}

.remote-device span {
    display: block;
    color: #6c8291;
    font-size: 7px;
    margin-top: 3px;
}

.remote-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 13px;
}

.remote-info-grid > div {
    padding: 12px;
    background: #0a151f;
    border: 1px solid #1e303c;
    border-radius: 5px;
}

.remote-info-grid span {
    display: block;
    color: #617786;
    font-size: 7px;
    margin-bottom: 4px;
}

.remote-info-grid strong {
    color: #b7c9cf;
    font-size: 8px;
    font-weight: 500;
}

.remote-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 13px;
}

.remote-actions button {
    padding: 10px 7px;

    color: #9fc5c4;
    background: #0c1a24;

    border: 1px solid #28414a;
    border-radius: 5px;

    font: inherit;
    font-size: 7px;

    cursor: default;
}

.session-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;

    padding: 13px 0;
    border-bottom: 1px solid #1d2e39;

    color: #a8bac1;
    font-size: 8px;
}

.session-row i {
    width: 6px;
    height: 6px;
    margin-top: 3px;

    border-radius: 50%;
    background: #6cddc7;
}

.session-row small {
    display: block;
    margin-top: 3px;
    color: #607585;
    font-size: 7px;
}


/* =========================================================
   TABLE IMPROVEMENTS
========================================================= */

.app-table {
    font-size: 8px;
}

.app-table th {
    font-size: 7px;
    letter-spacing: .45px;
}

.app-table td {
    padding-top: 11px;
    padding-bottom: 11px;
}

.status-pill.warn {
    color: #e3b16c;
    border-color: rgba(226, 174, 100, .3);
    background: rgba(226, 174, 100, .08);
}


/* =========================================================
   PRODUCT PREVIEW LABEL
========================================================= */

.demo-note {
    opacity: .7;
    letter-spacing: .65px;
}


/* =========================================================
   LARGE SCREENS
========================================================= */

@media (min-width: 1200px) {

    .showcase {
        padding-left: 70px;
        padding-right: 70px;
    }

    .showcase .app-body {
        padding: 25px 28px 18px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .horizon-summary {
        grid-template-columns: repeat(3, 1fr);
    }

    .horizon-dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }

    .performance-panel,
    .activity-panel {
        grid-column: span 1;
    }

    .network-layout,
    .remote-layout {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE HORIZON
========================================================= */

@media (max-width: 700px) {

    .app-side {
        width: 105px;
        min-width: 105px;
    }

    .app-logo {
        font-size: 8px;
    }

    .app-nav-item {
        font-size: 7px;
        padding-left: 8px;
        padding-right: 5px;
    }

    .app-nav-item span {
        width: 13px;
    }

    .app-nav-label {
        font-size: 6px;
    }

    .app-top-actions {
        gap: 5px;
    }

    .system-health {
        display: none;
    }

    .horizon-summary {
        grid-template-columns: 1fr 1fr;
    }

    .horizon-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .health-content {
        grid-template-columns: 80px 1fr;
    }

    .health-score {
        width: 70px;
        height: 70px;
    }

    .health-score strong {
        font-size: 17px;
    }

    .network-status-grid {
        grid-template-columns: 1fr 1fr;
    }

    .topology-branches {
        grid-template-columns: 1fr;
    }

    .topology-branches::before {
        display: none;
    }

    .remote-info-grid {
        grid-template-columns: 1fr;
    }

    .remote-actions {
        grid-template-columns: 1fr 1fr;
    }

    .view-counter {
        display: none;
    }

}
/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    position: relative;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 30px;
}

.contact-card {
    position: relative;
    min-height: 320px;
    padding: 28px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            #12212d,
            #0a141e
        );

    border: 1px solid #293e49;
    border-radius: 8px;

    overflow: hidden;
}

.contact-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    top: -110px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(105, 229, 211, .10),
            transparent 70%
        );

    pointer-events: none;
}

.contact-number {
    color: var(--mint);
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-bottom: 30px;
}

.contact-card h3 {
    margin: 22px 0 12px;

    font-family: Manrope, sans-serif;
    font-size: 24px;
    color: #e7f2f4;
}

.contact-card p {
    max-width: 520px;
    color: var(--muted);
    line-height: 1.75;
}

.contact-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: auto;
    padding-top: 22px;

    border-top: 1px solid #263945;

    color: #75e3d3;
    text-decoration: none;

    font-family: Manrope, sans-serif;
    font-size: 15px;
}

.contact-card > a span {
    font-size: 20px;
    transition: transform .2s ease;
}

.contact-card > a:hover span {
    transform: translateX(5px);
}


/* Make clickable Horizon navigation behave like navigation */

.app-nav-button {
    width: 100%;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.app-nav-button:hover {
    color: #c8e3e1;
    background: rgba(92, 217, 203, .055);
}


@media (max-width: 700px) {

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

    .contact-card {
        min-height: 280px;
    }

}
/* =========================================================
   ZENVEXO HORIZON — INTERACTIVE PRODUCT PREVIEW
   Customer > Site > Device > Remote Desktop
========================================================= */

/* ---------- CLICKABLE LISTS ---------- */

.zen-click-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zen-list-row {
    width: 100%;
    min-height: 68px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 24px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid #263a46;
    border-radius: 7px;
    background: linear-gradient(135deg, #101d28, #0b151f);
    color: #dce9ec;
    font: inherit;
    text-align: left;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

button.zen-list-row {
    cursor: pointer;
}

button.zen-list-row:hover {
    border-color: #4f887f;
    background: linear-gradient(135deg, #142631, #0d1a24);
    transform: translateY(-1px);
}

.zen-list-row.static {
    grid-template-columns: 42px minmax(0, 1fr) auto;
}

.zen-row-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #31505a;
    border-radius: 5px;
    background: #10222b;
    color: #79e5d2;
    font-size: 15px;
}

.zen-row-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zen-row-main strong {
    color: #e9f3f5;
    font-size: 12px;
    font-weight: 700;
}

.zen-row-main small {
    color: #718895;
    font-size: 9px;
    letter-spacing: .15px;
}

.zen-chevron {
    color: #75e3d3;
    font-size: 22px;
}

.zen-empty {
    padding: 42px 20px;
    text-align: center;
    color: #718895;
}


/* ---------- BREADCRUMB / BACK ---------- */

.zen-back-row {
    margin-bottom: 12px;
}

.zen-back {
    border: 0;
    background: transparent;
    color: #74dccc;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
    padding: 5px 0;
}

.zen-back:hover {
    color: #a3f5e8;
}


/* ---------- DEVICE HEADER ---------- */

.zen-device-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;
    margin: 6px 0 20px;
    padding: 22px 24px;
    border: 1px solid #293d48;
    border-radius: 8px;
    background:
        radial-gradient(circle at 85% 20%, rgba(94, 231, 208, .08), transparent 30%),
        linear-gradient(135deg, #101d28, #0a141d);
}

.zen-device-header h3 {
    margin: 8px 0 5px;
    color: #edf7f8;
    font-family: Manrope, sans-serif;
    font-size: 25px;
    line-height: 1;
}

.zen-device-header p {
    margin: 0;
    color: #758d98;
    font-size: 10px;
}

.zen-device-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zen-connect-button,
.zen-connect-large {
    border: 1px solid #4d9c8f;
    border-radius: 5px;
    background: linear-gradient(135deg, #173b3b, #102c31);
    color: #8af0dd;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.zen-connect-button {
    padding: 10px 14px;
    font-size: 9px;
}

.zen-connect-large {
    min-width: 260px;
    padding: 14px 20px;
    font-size: 10px;
    letter-spacing: .4px;
}

.zen-connect-button:hover,
.zen-connect-large:hover {
    border-color: #78e7d3;
    background: #173d3c;
    color: #c5fff4;
    box-shadow: 0 0 24px rgba(105, 230, 210, .08);
}


/* ---------- DEVICE TABS ---------- */

.zen-device-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    overflow-x: auto;
}

.zen-device-tabs button {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid #263945;
    border-radius: 4px;
    background: #0d1821;
    color: #738995;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
}

.zen-device-tabs button:hover {
    color: #b5d6d6;
    border-color: #3d625f;
}

.zen-device-tabs button.active {
    color: #8cebd9;
    border-color: #4a887f;
    background: #122b2d;
}


/* ---------- DEVICE INFORMATION ---------- */

.zen-device-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.zen-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.zen-mini-stats > div {
    padding: 10px;
    border: 1px solid #243945;
    border-radius: 5px;
    background: #0c1821;
}

.zen-mini-stats span {
    display: block;
    margin-bottom: 5px;
    color: #6f8792;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.zen-mini-stats strong {
    color: #dff2f1;
    font-size: 17px;
}

.zen-success-state {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.zen-success-state > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border: 1px solid #3f7b70;
    border-radius: 50%;
    background: #102b29;
    color: #75e5d0;
    font-size: 18px;
}

.zen-success-state strong {
    color: #dff2ef;
    font-size: 13px;
}

.zen-success-state small {
    margin-top: 5px;
    color: #718895;
    font-size: 9px;
}


/* ---------- REMOTE SUPPORT START ---------- */

.zen-remote-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #253944;
}

.zen-remote-start small {
    color: #627b86;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .8px;
}


/* =========================================================
   ACTIVE REMOTE SESSION
========================================================= */

.zen-remote-session {
    overflow: hidden;
    border: 1px solid #35505c;
    border-radius: 8px;
    background: #060b11;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .3),
        0 0 40px rgba(74, 207, 189, .025);
}


/* ---------- SESSION HEADER ---------- */

.zen-remote-session-top {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 15px;
    border-bottom: 1px solid #273b46;
    background: linear-gradient(90deg, #0c1720, #101f28);
}

.zen-remote-session-top > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zen-remote-session-top strong {
    color: #78e8d3;
    font-size: 9px;
    letter-spacing: 1px;
}

.zen-remote-session-top small {
    color: #8399a2;
    font-size: 9px;
}

.zen-connected-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    background: #68dfc8;
    box-shadow: 0 0 10px rgba(104, 223, 200, .6);
}

.zen-session-info {
    color: #8499a3;
    font-size: 9px;
    white-space: nowrap;
}


/* ---------- REMOTE TOOLBAR ---------- */

.zen-remote-toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    overflow-x: auto;
    border-bottom: 1px solid #263a45;
    background: #0a131b;
}

.zen-remote-toolbar button {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid #263c48;
    border-radius: 4px;
    background: #101d27;
    color: #a2b5bd;
    font: inherit;
    font-size: 8px;
    cursor: pointer;
}

.zen-remote-toolbar button:hover {
    border-color: #47746f;
    color: #8ce7d6;
    background: #13272d;
}

.zen-remote-toolbar .zen-disconnect {
    margin-left: auto;
    border-color: #694044;
    background: #261417;
    color: #e79797;
}

.zen-remote-toolbar .zen-disconnect:hover {
    border-color: #a35a61;
    color: #ffb0b0;
    background: #35191d;
}


/* =========================================================
   SIMULATED REMOTE WINDOWS DESKTOP
========================================================= */

.zen-desktop-frame {
    padding: 12px;
    background:
        radial-gradient(circle at center, rgba(65, 104, 126, .08), transparent 60%),
        #050a0f;
}

.zen-windows-desktop {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid #263d4b;
    background:
        radial-gradient(
            ellipse at 72% 44%,
            rgba(38, 137, 191, .7) 0,
            rgba(18, 84, 133, .55) 17%,
            transparent 39%
        ),
        radial-gradient(
            ellipse at 68% 45%,
            rgba(69, 180, 224, .24),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            #071421 0%,
            #0a2134 42%,
            #092f50 67%,
            #071625 100%
        );
}


/* subtle Windows-style light */

.zen-windows-desktop::before {
    content: "";
    position: absolute;
    width: 43%;
    height: 135%;
    right: 9%;
    top: -20%;
    border: 1px solid rgba(111, 209, 245, .18);
    border-radius: 50%;
    transform: rotate(25deg);
    box-shadow:
        0 0 80px rgba(72, 174, 220, .12),
        inset 0 0 70px rgba(71, 177, 225, .08);
}

.zen-windows-desktop::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.012) 1px,
            transparent 1px
        );
    background-size: 4px 100%;
    opacity: .25;
}


/* ---------- DESKTOP BRAND ---------- */

.zen-wallpaper-brand {
    position: absolute;
    right: 5%;
    top: 7%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: .7;
}

.zen-wallpaper-brand > span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(125, 234, 218, .5);
    color: #8cebd9;
    font-weight: 800;
}

.zen-wallpaper-brand strong {
    color: rgba(219, 247, 246, .8);
    font-size: 10px;
    letter-spacing: 1.2px;
}

.zen-wallpaper-brand small {
    color: rgba(143, 187, 195, .7);
    font-size: 6px;
    letter-spacing: 1px;
}


/* ---------- DESKTOP ICONS ---------- */

.zen-desktop-icons {
    position: absolute;
    z-index: 4;
    top: 18px;
    left: 14px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.zen-desktop-icons > div {
    width: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #fff;
    text-align: center;
}

.zen-desktop-icons span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: rgba(23, 89, 135, .65);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
    font-size: 14px;
}

.zen-desktop-icons small {
    color: rgba(255,255,255,.92);
    font-size: 7px;
    text-shadow: 0 1px 3px #000;
}


/* ---------- WINDOWS APP WINDOW ---------- */

.zen-demo-window {
    position: absolute;
    z-index: 5;
    width: min(440px, 60%);
    min-height: 210px;
    left: 23%;
    top: 18%;
    overflow: hidden;
    border: 1px solid rgba(176, 202, 216, .35);
    border-radius: 5px;
    background: rgba(243, 247, 250, .97);
    box-shadow: 0 18px 45px rgba(0,0,0,.32);
}

.zen-window-title {
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid #d4dce1;
    background: #f8fafb;
    color: #27313a;
    font-size: 8px;
}

.zen-window-title span:last-child {
    letter-spacing: 7px;
    color: #53616a;
}

.zen-window-content {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 30px;
    color: #18252d;
}

.zen-window-content h4 {
    margin: 0 0 10px;
    color: #16262e;
    font-size: 16px;
}

.zen-window-content p {
    margin: 4px 0;
    color: #5a6870;
    font-size: 8px;
}

.zen-win-logo {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(145deg, #1584c7, #075d9a);
    color: white;
    font-size: 29px;
}


/* ---------- WINDOWS TASKBAR ---------- */

.zen-taskbar {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-top: 1px solid rgba(255,255,255,.15);
    background: rgba(10, 30, 46, .82);
    backdrop-filter: blur(14px);
    color: white;
}

.zen-taskbar-left,
.zen-taskbar-right {
    display: flex;
    align-items: center;
    gap: 13px;
}

.zen-taskbar span {
    font-size: 11px;
}

.zen-taskbar-right span {
    font-size: 8px;
}

.zen-start {
    color: #55b9ed;
    font-size: 16px !important;
}


/* ---------- REMOTE FOOTER ---------- */

.zen-remote-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    overflow-x: auto;
    border-top: 1px solid #263a45;
    background: #09121a;
    color: #657d88;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.zen-remote-footer span:first-child {
    color: #6bdcc7;
}


/* ---------- GENERIC SUPPORT ---------- */

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 4px 7px;
    border: 1px solid #35685f;
    border-radius: 999px;
    background: #102824;
    color: #75ddca;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.status-pill.warn {
    border-color: #745d35;
    background: #292113;
    color: #e5bd6b;
}

.status-pill.offline {
    border-color: #604149;
    background: #24161a;
    color: #d58b97;
}

.good-text {
    color: #72dfca !important;
}

.warning-text {
    color: #dfb867 !important;
}


/* =========================================================
   RESPONSIVE HORIZON
========================================================= */

@media (max-width: 900px) {

    .zen-device-grid {
        grid-template-columns: 1fr;
    }

    .zen-device-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .zen-device-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .zen-windows-desktop {
        min-height: 300px;
    }

    .zen-demo-window {
        width: 65%;
        left: 22%;
    }
}


@media (max-width: 650px) {

    .zen-list-row {
        grid-template-columns: 35px minmax(0, 1fr) auto 15px;
        gap: 8px;
        padding: 10px;
    }

    .zen-row-icon {
        width: 31px;
        height: 31px;
    }

    .zen-row-main small {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .zen-device-header h3 {
        font-size: 19px;
    }

    .zen-device-header-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .zen-connect-large {
        width: 100%;
        min-width: 0;
    }

    .zen-mini-stats {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .zen-remote-session-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .zen-remote-session-top > div:first-child {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .zen-windows-desktop {
        min-height: 250px;
    }

    .zen-demo-window {
        width: 68%;
        min-height: 150px;
        left: 22%;
        top: 17%;
    }

    .zen-window-content {
        gap: 10px;
        padding: 18px;
    }

    .zen-win-logo {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .zen-window-content h4 {
        font-size: 11px;
    }

    .zen-wallpaper-brand {
        display: none;
    }

    .zen-taskbar {
        height: 32px;
    }
}
/* Mobile demo: all functions remain reachable with touch. */
body,h1,h2,h3{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.demo-intro{margin:24px 0;color:var(--muted)}.product-card .button{margin-top:24px}.faq{margin-top:48px;max-width:850px}details{padding:18px 0;border-bottom:1px solid var(--border)}summary{cursor:pointer;min-height:44px;font-weight:600}details p{padding:12px 0;color:var(--muted)}.tool-feedback{padding:16px;color:var(--mint);font-size:14px}.zen-remote-session:fullscreen{overflow:auto;padding:20px}.app-content,.app-panel,.horizon-dashboard-grid>*{min-width:0}.app-body{overflow-x:auto}
@media(max-width:700px){
h1{font-size:clamp(36px,9.5vw,60px)}.hero-console .app-shell{max-height:360px}.hero-console{pointer-events:none}
#gallery-screen,#dialog-screen{display:flex;flex-direction:column}
#gallery-screen .app-side,#dialog-screen .app-side{display:flex;width:100%;min-width:0;gap:8px;overflow-x:auto;padding:12px;border-right:0;border-bottom:1px solid var(--border)}
.app-side .app-logo,.app-side .app-nav-label,.app-side .app-side-foot,.app-side>div.app-nav-item{display:none}
.app-side .app-nav-button{width:auto;flex:0 0 auto;font-size:13px;min-height:44px;padding:10px 14px;white-space:nowrap}.app-side .app-nav-item span{width:auto}
.app-shell .app-lower>.app-panel:last-child{display:block}.tabs{overflow-x:auto;justify-content:flex-start}.tabs button{flex-shrink:0;min-height:44px}
.app-top{height:auto;min-height:44px;flex-wrap:wrap;gap:8px;padding:10px}.app-title{font-size:22px}.app-subtitle,.demo-note,.zen-row-main small{font-size:12px}.zen-row-main strong{font-size:14px}
.zen-back,.zen-device-tabs button,.zen-connect-button,.zen-connect-large{font-size:13px;min-height:44px}.zen-remote-toolbar button{font-size:12px;min-height:44px}.status-pill{font-size:10px}.app-table{min-width:520px}
.zen-device-header{padding:16px}.zen-row-main small{white-space:normal}.feature-grid,.network-status-grid,.metric-grid{grid-template-columns:1fr}.app-heading-row,.app-top-actions{flex-wrap:wrap}.zen-demo-window{left:20%;width:76%}.zen-window-content{padding:12px;overflow-wrap:anywhere}.menu-toggle,#navigation a,.dialog-top button{min-height:44px}.console-label{gap:12px;font-size:9px}
}
html{overflow-x:clip}.app-shell{max-width:100%}.remote-layout>*{min-width:0}
body{overflow-x:clip}.closing-word{max-width:100%;font-size:clamp(48px,12vw,180px)}