/* Clear Hosting precompiled override stylesheet. No npm/Vite build required. */
html { color-scheme: dark; background:#040913; }
body { margin:0; overflow-x:hidden; background:radial-gradient(circle at 20% 0%,rgba(15,91,255,.18),transparent 34rem),radial-gradient(circle at 90% 20%,rgba(0,190,255,.12),transparent 30rem),#040913; }
::selection { color:#fff; background:rgba(30,111,255,.68); }
input,select,textarea { color:#eef5ff!important; background-color:rgba(5,13,28,.88)!important; border-color:rgba(118,165,255,.22)!important; border-radius:.9rem!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
input:focus,select:focus,textarea:focus { border-color:rgba(72,139,255,.8)!important; box-shadow:0 0 0 4px rgba(30,111,255,.14),0 0 30px rgba(17,97,255,.12)!important; }
input::placeholder,textarea::placeholder { color:#60708b!important; }
label { color:#c7d6ef; font-weight:700; }
.card { border-radius:1rem; border:1px solid rgba(111,159,255,.16); color:#edf5ff; background:linear-gradient(145deg,rgba(12,25,49,.92),rgba(5,13,28,.96)); box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035); }
:root {
    --clear-blue: #166dff;
    --clear-blue-light: #5ea3ff;
    --clear-cyan: #45d2ff;
    --clear-bg: #040913;
    --clear-card: rgba(7, 17, 35, 0.88);
    --clear-border: rgba(111, 159, 255, 0.17);
    --clear-text: #edf5ff;
    --clear-muted: #8191ad;
}

[x-cloak] {
    display: none !important;
}

.clearhosting-app {
    position: relative;
    isolation: isolate;
    color: var(--clear-text);
}

.clearhosting-main {
    position: relative;
    z-index: 2;
}

.clearhosting-background {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(4, 9, 19, 0.72), rgba(4, 9, 19, 0.96)),
        radial-gradient(circle at 50% -10%, rgba(30, 112, 255, 0.18), transparent 34rem);
}

.clearhosting-grid {
    position: absolute;
    inset: 0;
    opacity: 0.19;
    background-image:
        linear-gradient(rgba(88, 146, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88, 146, 255, 0.1) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.clearhosting-orb {
    position: absolute;
    display: block;
    width: 36rem;
    height: 36rem;
    border-radius: 999px;
    filter: blur(100px);
    opacity: 0.2;
    animation: clearhosting-float 13s ease-in-out infinite;
}

.clearhosting-orb-one {
    top: -16rem;
    left: -10rem;
    background: #0e65ff;
}

.clearhosting-orb-two {
    top: 10rem;
    right: -17rem;
    background: #00a9ff;
    animation-delay: -5s;
}

@keyframes clearhosting-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(1rem, 2rem, 0) scale(1.08); }
}

.clearhosting-brand {
    text-decoration: none;
}

.clearhosting-brand-mark {
    display: grid;
    place-items: center;
    filter: drop-shadow(0 0 20px rgba(40, 119, 255, 0.42));
    transition: transform 180ms ease;
}

.clearhosting-brand:hover .clearhosting-brand-mark {
    transform: translateY(-1px) scale(1.03);
}

.clearhosting-brand-text {
    display: inline-flex;
    align-items: baseline;
    font-size: 1.15rem;
    letter-spacing: -0.035em;
    color: #ffffff;
}

.clearhosting-brand-text strong {
    font-weight: 900;
}

.clearhosting-brand-text span {
    margin-left: 0.22rem;
    font-weight: 650;
    color: #74aaff;
}

.clearhosting-auth-shell {
    width: min(1180px, calc(100% - 2rem));
    min-height: calc(100vh - 7rem);
    margin: 0 auto;
    padding: 4rem 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

.clearhosting-auth-intro {
    max-width: 610px;
}

.clearhosting-eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.62rem 0.9rem;
    border: 1px solid rgba(98, 157, 255, 0.2);
    border-radius: 999px;
    color: #9fc3ff;
    background: rgba(17, 53, 107, 0.2);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.clearhosting-status-dot {
    width: 0.47rem;
    height: 0.47rem;
    border-radius: 999px;
    background: #3ff09a;
    box-shadow: 0 0 16px rgba(63, 240, 154, 0.82);
}

.clearhosting-auth-intro h1 {
    margin: 1.45rem 0 1rem;
    max-width: 720px;
    color: #ffffff;
    font-size: clamp(2.65rem, 5vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
    font-weight: 900;
}

.clearhosting-auth-intro > p {
    max-width: 570px;
    margin: 0;
    color: #8999b5;
    font-size: 1.06rem;
    line-height: 1.78;
}

.clearhosting-auth-benefits {
    margin-top: 2.1rem;
    display: grid;
    gap: 0.85rem;
}

.clearhosting-auth-benefit {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.clearhosting-auth-benefit:hover {
    transform: translateX(4px);
    border-color: rgba(87, 149, 255, 0.16);
    background: rgba(11, 29, 59, 0.32);
}

.clearhosting-auth-benefit > span {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(86, 151, 255, 0.23);
    border-radius: 0.85rem;
    color: #7fb0ff;
    background: rgba(15, 66, 149, 0.2);
    font-size: 0.7rem;
    font-weight: 900;
}

.clearhosting-auth-benefit strong {
    display: block;
    margin-top: 0.1rem;
    color: #f3f8ff;
    font-size: 0.96rem;
}

.clearhosting-auth-benefit p {
    margin: 0.32rem 0 0;
    color: #7485a2;
    font-size: 0.86rem;
    line-height: 1.55;
}

.clearhosting-back-link {
    width: fit-content;
    margin-top: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: #8eadde;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 750;
    transition: color 160ms ease, transform 160ms ease;
}

.clearhosting-back-link:hover {
    color: #ffffff;
    transform: translateX(-3px);
}

.clearhosting-auth-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid rgba(111, 159, 255, 0.18);
    border-radius: 1.55rem;
    background:
        linear-gradient(150deg, rgba(13, 30, 60, 0.94), rgba(5, 13, 28, 0.96));
    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.46),
        0 0 70px rgba(20, 94, 255, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(18px);
}

.clearhosting-auth-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255,255,255,0.045), transparent 24%),
        radial-gradient(circle at 90% 0%, rgba(56, 139, 255, 0.16), transparent 15rem);
}

.clearhosting-auth-card > * {
    position: relative;
    z-index: 1;
}

.clearhosting-auth-card-header {
    display: grid;
    gap: 1.55rem;
    margin-bottom: 1.8rem;
}

.clearhosting-kicker {
    display: block;
    margin-bottom: 0.35rem;
    color: #6fa7ff;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.clearhosting-auth-card h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.75rem, 3vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-weight: 900;
}

.clearhosting-auth-card-header p {
    margin: 0.55rem 0 0;
    color: #8393af;
    font-size: 0.91rem;
    line-height: 1.6;
}

.clearhosting-form-stack {
    display: grid;
    gap: 1.05rem;
}

.clearhosting-auth-options {
    margin: 1rem 0 1.3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.clearhosting-auth-options a {
    margin-left: auto;
    color: #78adff;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}

.clearhosting-auth-options a:hover {
    color: #ffffff;
}

.clearhosting-primary-button {
    min-height: 3.1rem !important;
    margin-top: 1.15rem;
    border: 1px solid rgba(121, 176, 255, 0.34) !important;
    border-radius: 0.95rem !important;
    color: #ffffff !important;
    background:
        linear-gradient(135deg, #0c5de8, #1679ff 58%, #188eff) !important;
    box-shadow:
        0 14px 34px rgba(10, 92, 238, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-weight: 850 !important;
    transition:
        transform 160ms ease,
        filter 160ms ease,
        box-shadow 160ms ease !important;
}

.clearhosting-primary-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 18px 42px rgba(10, 92, 238, 0.38),
        0 0 28px rgba(50, 137, 255, 0.18);
}

.clearhosting-auth-divider {
    position: relative;
    margin: 1.5rem 0 1rem;
    text-align: center;
}

.clearhosting-auth-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(111, 159, 255, 0.14);
}

.clearhosting-auth-divider span {
    position: relative;
    padding: 0 0.85rem;
    color: #667794;
    background: #081326;
    font-size: 0.72rem;
    font-weight: 750;
}

.clearhosting-oauth-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.clearhosting-oauth-button {
    min-height: 2.8rem;
    flex: 1 1 8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(111, 159, 255, 0.16);
    border-radius: 0.85rem;
    color: #d9e8ff;
    background: rgba(9, 22, 44, 0.72);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 760;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease;
}

.clearhosting-oauth-button:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 158, 255, 0.45);
    background: rgba(14, 41, 84, 0.76);
}

.clearhosting-oauth-button img {
    width: 1.2rem;
    height: 1.2rem;
}

.clearhosting-auth-footer {
    margin-top: 1.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(111, 159, 255, 0.12);
    color: #7e8da8;
    text-align: center;
    font-size: 0.84rem;
}

.clearhosting-auth-footer a {
    margin-left: 0.25rem;
    color: #75abff;
    font-weight: 800;
    text-decoration: none;
}

.clearhosting-auth-footer a:hover {
    color: #ffffff;
}

.clearhosting-secure-note {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #53627d;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.clearhosting-secure-note span {
    color: #42dc98;
    text-shadow: 0 0 10px rgba(66, 220, 152, 0.7);
}

.clearhosting-register-card {
    margin: 1rem 0;
}

nav,
header {
    backdrop-filter: blur(16px);
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: linear-gradient(#176fff, #44bfff) padding-box;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

@media (max-width: 980px) {
    .clearhosting-auth-shell {
        grid-template-columns: 1fr;
        width: min(620px, calc(100% - 2rem));
        padding: 2.2rem 0 3.5rem;
        gap: 2rem;
    }

    .clearhosting-auth-intro {
        text-align: center;
    }

    .clearhosting-eyebrow,
    .clearhosting-back-link {
        margin-left: auto;
        margin-right: auto;
    }

    .clearhosting-auth-intro > p {
        margin-left: auto;
        margin-right: auto;
    }

    .clearhosting-auth-benefits {
        text-align: left;
    }

    .clearhosting-auth-intro h1 {
        font-size: clamp(2.4rem, 10vw, 4rem);
    }
}

@media (max-width: 560px) {
    .clearhosting-auth-shell {
        width: min(100% - 1rem, 620px);
        padding-top: 1.25rem;
    }

    .clearhosting-auth-intro {
        padding: 0 0.7rem;
    }

    .clearhosting-auth-benefits {
        display: none;
    }

    .clearhosting-auth-card {
        padding: 1.35rem;
        border-radius: 1.2rem;
    }

    .clearhosting-auth-options {
        align-items: flex-start;
        flex-direction: column;
    }

    .clearhosting-auth-options a {
        margin-left: 0;
    }

    .clearhosting-brand-text {
        font-size: 1rem;
    }
}


/* =========================================================
   CLEAR HOSTING PACK 03 — HOMEPAGE, BRANDING & FOOTER
   ========================================================= */

/* Hide Paymenter's extra application-name text next to our custom logo. */
.clearhosting-brand + span,
.clearhosting-brand + div > span:first-child {
    display: none !important;
}

.ch-home {
    overflow: hidden;
}

.ch-home-hero {
    position: relative;
    min-height: 680px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(101, 154, 255, .14);
    background:
        radial-gradient(circle at 10% 0%, rgba(20, 95, 255, .24), transparent 32rem),
        radial-gradient(circle at 92% 52%, rgba(0, 187, 255, .18), transparent 33rem),
        linear-gradient(180deg, rgba(3, 10, 23, .68), rgba(3, 9, 19, .96));
}

.ch-home-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .16;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(74, 136, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 136, 255, .16) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.ch-home-glow {
    position: absolute;
    width: 30rem;
    height: 30rem;
    border-radius: 999px;
    filter: blur(100px);
    opacity: .18;
    pointer-events: none;
}

.ch-home-glow-one { left: -12rem; top: -12rem; background:#126dff; }
.ch-home-glow-two { right: -12rem; bottom: -12rem; background:#00b7ff; }

.ch-home-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(430px, .97fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}

.ch-home-pill {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .95rem;
    border: 1px solid rgba(91, 154, 255, .26);
    border-radius: 999px;
    color: #a7c7ff;
    background: rgba(15, 52, 112, .25);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .115em;
    text-transform: uppercase;
}

.ch-home-pill span {
    width: .48rem;
    height: .48rem;
    border-radius: 999px;
    background: #44ec9d;
    box-shadow: 0 0 16px rgba(68, 236, 157, .72);
}

.ch-home-copy h1 {
    max-width: 760px;
    margin: 1.35rem 0 1.15rem;
    color: #fff;
    font-size: clamp(3.2rem, 6vw, 6.1rem);
    line-height: .94;
    letter-spacing: -.073em;
    font-weight: 950;
}

.ch-home-copy > p {
    max-width: 650px;
    margin: 0;
    color: #91a2c0;
    font-size: 1.08rem;
    line-height: 1.78;
}

.ch-home-actions,
.ch-final-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

.ch-home-button {
    min-height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .78rem 1.35rem;
    border: 1px solid transparent;
    border-radius: .9rem;
    text-decoration: none !important;
    font-size: .88rem;
    font-weight: 850;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.ch-home-button:hover { transform: translateY(-2px); }

.ch-home-button-primary {
    color: #fff !important;
    border-color: rgba(112, 175, 255, .35);
    background: linear-gradient(135deg, #0957df, #147dff 60%, #1aa1ff);
    box-shadow: 0 17px 38px rgba(10, 91, 230, .28), inset 0 1px 0 rgba(255,255,255,.2);
}

.ch-home-button-primary:hover {
    box-shadow: 0 22px 52px rgba(10, 91, 230, .38), 0 0 30px rgba(53, 145, 255, .17);
}

.ch-home-button-secondary {
    color: #dceaff !important;
    border-color: rgba(107, 157, 238, .2);
    background: rgba(7, 18, 38, .7);
}

.ch-home-button-secondary:hover {
    border-color: rgba(107, 167, 255, .46);
    background: rgba(13, 38, 78, .72);
}

.ch-home-trust {
    margin-top: 1.55rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.15rem;
    color: #70819e;
    font-size: .75rem;
    font-weight: 750;
}

.ch-home-trust span { display:inline-flex; align-items:center; gap:.45rem; }
.ch-home-trust i { width:.34rem; height:.34rem; border-radius:999px; background:#4d9cff; box-shadow:0 0 10px rgba(77,156,255,.58); }

.ch-home-visual { position:relative; min-height:480px; display:grid; place-items:center; }

.ch-server-rack {
    position: relative;
    z-index: 2;
    width: min(100%, 530px);
    padding: 1.25rem;
    border: 1px solid rgba(102, 160, 255, .25);
    border-radius: 1.6rem;
    background: linear-gradient(145deg, rgba(17, 39, 77, .94), rgba(4, 13, 29, .98));
    box-shadow: 0 45px 110px rgba(0,0,0,.52), 0 0 80px rgba(17, 101, 255, .12), inset 0 1px 0 rgba(255,255,255,.06);
    transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
}

.ch-server-rack::after {
    content:"";
    position:absolute;
    inset:12% 8%;
    z-index:-1;
    border-radius:999px;
    background:#0a67ff;
    filter:blur(90px);
    opacity:.18;
}

.ch-server-rack-top,
.ch-hardware-panel-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem;
    color:#8da2c3;
    font-size:.75rem;
    font-weight:800;
}

.ch-server-rack-top strong,
.ch-hardware-panel-header b {
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    color:#60e4a8;
    font-size:.7rem;
}

.ch-server-rack-top i,
.ch-hardware-panel-header i {
    width:.46rem;
    height:.46rem;
    border-radius:999px;
    background:#3fe99d;
    box-shadow:0 0 13px rgba(63,233,157,.74);
}

.ch-server-unit {
    min-height:78px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:1rem;
    margin-top:.75rem;
    padding:1rem 1.05rem;
    border:1px solid rgba(100, 151, 235, .16);
    border-radius:1rem;
    background:linear-gradient(180deg, rgba(14, 30, 58, .9), rgba(5, 14, 30, .96));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.ch-server-lights { display:flex; gap:.32rem; }
.ch-server-lights i { width:.47rem; height:.47rem; border-radius:999px; background:#1d74ff; box-shadow:0 0 12px rgba(29,116,255,.72); }
.ch-server-lights i:nth-child(2) { background:#3fe99d; box-shadow:0 0 12px rgba(63,233,157,.72); }
.ch-server-lights i:nth-child(3) { background:#3fe99d; box-shadow:0 0 12px rgba(63,233,157,.72); }

.ch-server-lines { display:grid; gap:.36rem; }
.ch-server-lines span { display:block; height:3px; border-radius:999px; background:linear-gradient(90deg, rgba(56,136,255,.65), rgba(52,213,255,.12)); }
.ch-server-lines span:nth-child(2){width:82%}
.ch-server-lines span:nth-child(3){width:62%}
.ch-server-unit b { color:#dbe9ff; font-size:.74rem; }

.ch-server-stats {
    margin-top:1rem;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.7rem;
}

.ch-server-stats div {
    padding:.9rem;
    border:1px solid rgba(102, 158, 248, .14);
    border-radius:.85rem;
    background:rgba(5,15,32,.7);
}
.ch-server-stats span { display:block; color:#677995; font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; font-weight:850; }
.ch-server-stats strong { display:block; margin-top:.28rem; color:#f0f6ff; font-size:.82rem; }

.ch-floating-card {
    position:absolute;
    z-index:3;
    min-width:220px;
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:.9rem 1rem;
    border:1px solid rgba(100,160,255,.23);
    border-radius:1rem;
    background:rgba(6,17,36,.9);
    box-shadow:0 22px 55px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter:blur(14px);
    animation:ch-float-card 5s ease-in-out infinite;
}
.ch-floating-card-one { left:-2.2rem; top:5.5rem; }
.ch-floating-card-two { right:-2rem; bottom:5rem; animation-delay:-2.4s; }
.ch-floating-icon { width:2.35rem; height:2.35rem; display:grid; place-items:center; border-radius:.72rem; background:rgba(21,94,226,.22); }
.ch-floating-card strong { display:block; color:#edf5ff; font-size:.76rem; }
.ch-floating-card small { display:block; margin-top:.18rem; color:#71829d; font-size:.64rem; }
@keyframes ch-float-card { 0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)} }

.ch-services-section,
.ch-why-section,
.ch-hardware-section,
.ch-final-cta {
    position:relative;
    padding:6rem 0;
}

.ch-services-section { background:linear-gradient(180deg,#040a15,#061021); }
.ch-why-section { border-top:1px solid rgba(98,151,239,.1); border-bottom:1px solid rgba(98,151,239,.1); background:rgba(5,12,25,.82); }
.ch-hardware-section { background:radial-gradient(circle at 10% 50%,rgba(17,93,255,.12),transparent 30rem),#040a15; }

.ch-section-heading {
    margin-bottom:2.2rem;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:2rem;
}
.ch-section-heading-centered { justify-content:center; text-align:center; }
.ch-section-kicker { display:block; margin-bottom:.65rem; color:#65a4ff; font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.ch-section-heading h2,
.ch-hardware-copy h2,
.ch-final-cta h2 {
    margin:0;
    max-width:760px;
    color:#fff;
    font-size:clamp(2.15rem,4vw,3.65rem);
    line-height:1.05;
    letter-spacing:-.052em;
    font-weight:900;
}
.ch-section-heading > p { max-width:470px; margin:0; color:#7e8fa9; line-height:1.7; font-size:.92rem; }

.ch-category-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.15rem;
}
.ch-category-card {
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:100%;
    border:1px solid rgba(104,157,245,.16);
    border-radius:1.25rem;
    background:linear-gradient(145deg,rgba(11,27,54,.94),rgba(5,14,30,.98));
    box-shadow:0 22px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.ch-category-card:hover { transform:translateY(-7px); border-color:rgba(76,145,255,.46); box-shadow:0 30px 75px rgba(0,0,0,.36),0 0 35px rgba(27,106,255,.1); }
.ch-category-media { position:relative; min-height:190px; overflow:hidden; background:linear-gradient(135deg,#102b59,#071429); }
.ch-category-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(5,14,30,.94)); }
.ch-category-media img { width:100%; height:220px; display:block; object-fit:cover; transition:transform .45s ease; }
.ch-category-card:hover .ch-category-media img { transform:scale(1.055); }
.ch-category-placeholder { height:220px; display:grid; place-items:center; background:radial-gradient(circle,rgba(38,126,255,.32),transparent 55%); }
.ch-category-placeholder span { color:#7db3ff; font-size:2.4rem; font-weight:950; letter-spacing:-.06em; }
.ch-category-live { position:absolute; z-index:2; top:1rem; left:1rem; display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .65rem; border:1px solid rgba(79,224,159,.25); border-radius:999px; color:#8af0bd; background:rgba(3,22,20,.72); font-size:.62rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.ch-category-live i { width:.4rem; height:.4rem; border-radius:999px; background:#42e99d; box-shadow:0 0 12px rgba(66,233,157,.72); }
.ch-category-content { flex:1; display:flex; flex-direction:column; padding:1.25rem; }
.ch-category-topline { display:flex; justify-content:space-between; color:#617491; font-size:.62rem; font-weight:850; text-transform:uppercase; letter-spacing:.09em; }
.ch-category-topline b { color:#4e8df0; }
.ch-category-content h3 { margin:.65rem 0 .55rem; color:#fff; font-size:1.35rem; letter-spacing:-.035em; font-weight:900; }
.ch-category-description { min-height:3.2rem; color:#7e8ea8; font-size:.83rem; line-height:1.6; }
.ch-category-description p { margin:.2rem 0; }
.ch-category-features { margin:1rem 0; display:flex; flex-wrap:wrap; gap:.45rem; }
.ch-category-features span { padding:.38rem .55rem; border:1px solid rgba(102,155,241,.13); border-radius:.55rem; color:#8194b2; background:rgba(8,23,48,.6); font-size:.62rem; font-weight:750; }
.ch-category-button { margin-top:auto; min-height:2.8rem; display:flex; align-items:center; justify-content:center; gap:.7rem; border:1px solid rgba(84,151,255,.3); border-radius:.8rem; color:#fff!important; background:linear-gradient(135deg,#0e5ee8,#168cff); text-decoration:none!important; font-size:.78rem; font-weight:850; transition:filter .18s ease,transform .18s ease; }
.ch-category-button:hover { transform:translateY(-2px); filter:brightness(1.08); }
.ch-empty-products { grid-column:1/-1; padding:4rem 2rem; border:1px dashed rgba(105,157,244,.24); border-radius:1.2rem; text-align:center; background:rgba(7,18,38,.55); }
.ch-empty-products span { color:#64a4ff; font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.ch-empty-products h3 { margin:.7rem 0 .5rem; color:#fff; font-size:1.8rem; }
.ch-empty-products p { margin:0; color:#7e8da7; }

.ch-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.ch-feature-card { position:relative; padding:1.35rem; border:1px solid rgba(100,154,241,.14); border-radius:1.15rem; background:linear-gradient(145deg,rgba(11,27,53,.82),rgba(5,14,29,.95)); transition:transform .2s ease,border-color .2s ease; }
.ch-feature-card:hover { transform:translateY(-6px); border-color:rgba(76,144,255,.4); }
.ch-feature-number { position:absolute; top:1rem; right:1rem; color:#3c69a8; font-size:.62rem; font-weight:900; }
.ch-feature-icon { width:3rem; height:3rem; display:grid; place-items:center; border:1px solid rgba(91,154,255,.24); border-radius:.9rem; background:rgba(17,75,170,.22); font-size:1.2rem; }
.ch-feature-card h3 { margin:1rem 0 .55rem; color:#fff; font-size:1rem; font-weight:850; }
.ch-feature-card p { margin:0; color:#7789a5; font-size:.8rem; line-height:1.65; }

.ch-hardware-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); gap:clamp(3rem,7vw,7rem); align-items:center; }
.ch-hardware-copy > p { max-width:650px; color:#8292ad; line-height:1.75; }
.ch-hardware-list { margin-top:1.6rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.ch-hardware-list div { padding:1rem; border:1px solid rgba(99,151,238,.14); border-radius:.85rem; background:rgba(7,20,42,.64); }
.ch-hardware-list span { display:block; color:#5f9eff; font-size:.62rem; font-weight:900; text-transform:uppercase; letter-spacing:.09em; }
.ch-hardware-list strong { display:block; margin-top:.35rem; color:#dce9fc; font-size:.78rem; }

.ch-hardware-panel { padding:1.4rem; border:1px solid rgba(104,160,251,.21); border-radius:1.35rem; background:linear-gradient(145deg,rgba(13,31,61,.94),rgba(5,14,30,.98)); box-shadow:0 35px 90px rgba(0,0,0,.34),0 0 50px rgba(14,91,232,.08); }
.ch-hardware-panel-header { padding-bottom:1rem; border-bottom:1px solid rgba(101,151,233,.13); }
.ch-hardware-panel-header span { display:block; color:#647792; font-size:.62rem; text-transform:uppercase; letter-spacing:.09em; }
.ch-hardware-panel-header strong { display:block; margin-top:.22rem; color:#edf5ff; font-size:.9rem; }
.ch-metric { margin-top:1.15rem; }
.ch-metric > div { display:flex; justify-content:space-between; color:#8193b0; font-size:.7rem; font-weight:750; }
.ch-metric strong { color:#dbe9fe; }
.ch-metric > i { height:.42rem; display:block; margin-top:.5rem; overflow:hidden; border-radius:999px; background:#0a1830; }
.ch-metric > i b { height:100%; display:block; border-radius:999px; background:linear-gradient(90deg,#0e64ed,#30bcff); box-shadow:0 0 14px rgba(36,143,255,.4); }
.ch-hardware-badges { margin-top:1.3rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.ch-hardware-badges span { padding:.45rem .6rem; border:1px solid rgba(95,151,240,.14); border-radius:.6rem; color:#7f91ac; background:rgba(5,16,34,.72); font-size:.62rem; font-weight:750; }

.ch-final-cta { padding-top:2rem; background:#040a15; }
.ch-final-cta-card { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2.2rem; border:1px solid rgba(104,161,255,.24); border-radius:1.5rem; background:radial-gradient(circle at 80% 20%,rgba(16,117,255,.24),transparent 23rem),linear-gradient(145deg,#102b58,#07162e); box-shadow:0 35px 90px rgba(0,0,0,.34); }
.ch-final-cta-card p { max-width:680px; margin:.75rem 0 0; color:#8b9bb6; line-height:1.65; }
.ch-final-actions { margin-top:0; justify-content:flex-end; }

.ch-footer { width:100%; margin-top:auto; border-top:1px solid rgba(100,153,241,.14); background:#030812; }
.ch-footer-inner { padding-top:3.2rem; padding-bottom:2.4rem; display:flex; justify-content:space-between; gap:3rem; }
.ch-footer-brand { max-width:420px; }
.ch-footer-brand p { margin:1rem 0 0; color:#71819c; font-size:.82rem; line-height:1.65; }
.ch-footer-links { display:grid; grid-template-columns:repeat(2,minmax(140px,1fr)); gap:3rem; }
.ch-footer-links div { display:grid; align-content:start; gap:.6rem; }
.ch-footer-links strong { margin-bottom:.25rem; color:#dce9fb; font-size:.75rem; }
.ch-footer-links a { color:#71829e!important; text-decoration:none!important; font-size:.76rem; }
.ch-footer-links a:hover { color:#fff!important; }
.ch-footer-bottom { padding-top:1rem; padding-bottom:1.5rem; display:flex; justify-content:space-between; gap:1rem; border-top:1px solid rgba(99,151,239,.11); color:#53637d; font-size:.66rem; }

@media (max-width:1100px) {
    .ch-home-hero-inner,.ch-hardware-grid { grid-template-columns:1fr; }
    .ch-home-copy { text-align:center; }
    .ch-home-pill,.ch-home-actions,.ch-home-trust { margin-left:auto; margin-right:auto; justify-content:center; }
    .ch-home-copy > p { margin-left:auto; margin-right:auto; }
    .ch-home-visual { width:min(680px,100%); margin:0 auto; }
    .ch-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ch-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
    .ch-home-hero { min-height:auto; }
    .ch-home-hero-inner { padding-top:3.4rem; padding-bottom:3.4rem; }
    .ch-home-copy h1 { font-size:clamp(2.75rem,13vw,4.6rem); }
    .ch-home-visual { min-height:420px; }
    .ch-floating-card { display:none; }
    .ch-server-rack { transform:none; }
    .ch-section-heading { align-items:flex-start; flex-direction:column; }
    .ch-category-grid,.ch-feature-grid,.ch-hardware-list { grid-template-columns:1fr; }
    .ch-final-cta-card,.ch-footer-inner,.ch-footer-bottom { align-items:flex-start; flex-direction:column; }
    .ch-final-actions { justify-content:flex-start; }
}

@media (max-width:520px) {
    .ch-home-actions,.ch-final-actions { flex-direction:column; width:100%; }
    .ch-home-button { width:100%; }
    .ch-home-trust { gap:.7rem; }
    .ch-server-rack { padding:.85rem; }
    .ch-server-unit { grid-template-columns:auto 1fr; }
    .ch-server-unit b { grid-column:1/-1; }
    .ch-server-stats { grid-template-columns:1fr; }
    .ch-services-section,.ch-why-section,.ch-hardware-section,.ch-final-cta { padding:4rem 0; }
    .ch-footer-links { grid-template-columns:1fr 1fr; gap:1.5rem; }
}