/* ==========================================================
   CUSTOMER WEBSITE V1
   DARK NAVY / CYAN PREMIUM UI
========================================================== */

:root {
    --site-bg: #030d17;
    --site-bg-2: #061421;
    --site-panel: #071724;
    --site-panel-2: #0a1d2c;

    --site-line: rgba(135, 177, 213, .15);
    --site-line-strong: rgba(72, 224, 222, .25);

    --site-text: #f5f8fc;
    --site-muted: #8ea5bc;
    --site-muted-2: #647d96;

    --site-accent: #0fe1d1;
    --site-accent-2: #01bdb7;

    --site-sidebar-width: 215px;
    --site-header-height: 70px;

    --site-radius: 18px;
    --site-radius-sm: 12px;

    --site-shadow:
        0 24px 70px rgba(0, 0, 0, .28);
}


/* ==========================================================
   RESET
========================================================== */

* {
    box-sizing: border-box;
}

html {
    background: var(--site-bg);
    color-scheme: dark;
}

body.site-v1 {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 75% 5%,
            rgba(0, 215, 205, .07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #04101c 0%,
            #020b14 100%
        );

    color: var(--site-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

button {
    color: inherit;
}


/* ==========================================================
   APP
========================================================== */

.site-app {
    min-height: 100vh;
}


/* ==========================================================
   HEADER
========================================================== */

.site-header {
    position: fixed;
    z-index: 100;

    top: 0;
    left: 0;
    right: 0;

    height: var(--site-header-height);

    display: grid;
    grid-template-columns:
        var(--site-sidebar-width)
        1fr
        auto;

    align-items: center;

    padding: 0 26px 0 18px;

    background:
        rgba(3, 14, 25, .90);

    border-bottom:
        1px solid var(--site-line);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}


/* ==========================================================
   LOGO
========================================================== */

.site-brand-logo {
    display: inline-flex;

    align-items: center;
    justify-content: flex-start;

    width: fit-content;
}

.site-brand-logo img {
    display: block;

    width: 50px;
    height: 50px;

    object-fit: contain;

    border-radius: 13px;
}


/* ==========================================================
   NAV
========================================================== */

.site-topnav {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;
}

.site-topnav a {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 44px;

    padding: 0 15px;

    color: #b8c8d9;

    font-size: 13px;
    font-weight: 600;

    border-radius: 10px;

    transition:
        color .18s ease,
        background .18s ease;
}

.site-topnav a:hover {
    color: white;

    background:
        rgba(255, 255, 255, .035);
}

.site-topnav a.is-active {
    color: white;
}

.site-topnav a.is-active::after {
    content: "";

    position: absolute;

    left: 16px;
    right: 16px;
    bottom: -13px;

    height: 3px;

    background:
        var(--site-accent);

    border-radius: 99px;

    box-shadow:
        0 0 14px rgba(15, 225, 209, .65);
}


/* ==========================================================
   HEADER ACTIONS
========================================================== */

.site-header-actions {
    display: flex;

    align-items: center;

    gap: 10px;
}

.site-icon-btn {
    border: 0;

    background: transparent;

    cursor: pointer;
}

.site-search-button {
    display: flex;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    border:
        1px solid var(--site-line);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .025);
}

.site-search-button svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.site-auth-actions {
    display: flex;
    gap: 8px;
}

.site-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    border:
        1px solid transparent;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        border .18s ease,
        box-shadow .18s ease;
}

.site-btn:hover {
    transform: translateY(-1px);
}

.site-btn-login {
    min-width: 82px;
    height: 42px;

    border:
        1px solid rgba(148, 184, 218, .20);

    border-radius: 12px;

    color: white;

    background:
        rgba(255, 255, 255, .018);
}

.site-btn-login:hover {
    background:
        rgba(255, 255, 255, .05);
}

.site-btn-register {
    min-width: 82px;
    height: 42px;

    border-radius: 12px;

    color: #001816;

    background:
        linear-gradient(
            135deg,
            #13e7d7,
            #03c8c0
        );

    box-shadow:
        0 8px 26px rgba(0, 213, 201, .16);
}


/* ==========================================================
   SIDEBAR
========================================================== */

.site-sidebar {
    position: fixed;

    z-index: 90;

    top: var(--site-header-height);
    bottom: 0;
    left: 0;

    width: var(--site-sidebar-width);

    padding:
        22px 15px 25px;

    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            #061522 0%,
            #05111c 100%
        );

    border-right:
        1px solid var(--site-line);
}

.site-sidebar-head {
    display: none;
}

.site-side-nav {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.site-side-link {
    display: grid;

    grid-template-columns:
        31px
        1fr;

    align-items: center;

    min-height: 49px;

    padding: 0 13px;

    border:
        1px solid transparent;

    border-radius: 10px;

    color: #aebfd1;

    font-size: 13px;
    font-weight: 600;

    transition: .18s ease;
}

.site-side-link:hover {
    color: white;

    background:
        rgba(255, 255, 255, .025);
}

.site-side-link.is-active {
    color: white;

    border-color:
        rgba(0, 226, 212, .24);

    background:
        linear-gradient(
            90deg,
            rgba(10, 220, 209, .15),
            rgba(10, 220, 209, .04)
        );

    box-shadow:
        inset 3px 0 0 var(--site-accent);
}

.site-side-icon {
    display: inline-flex;

    width: 25px;
    height: 25px;

    align-items: center;
    justify-content: center;

    color: #9fb9d2;

    font-size: 17px;
}

.site-side-link.is-active .site-side-icon {
    color: var(--site-accent);
}

.site-sidebar-divider {
    height: 1px;

    margin: 20px 5px;

    background: var(--site-line);
}

.site-sidebar-block {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.site-sidebar-caption {
    padding: 0 13px 9px;

    color: #59728c;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .14em;
}

.site-sidebar-block > a {
    display: grid;

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

    align-items: center;

    min-height: 43px;

    padding: 0 13px;

    color: #90a8bf;

    font-size: 12px;

    border-radius: 10px;
}

.site-sidebar-block > a:hover {
    color: white;

    background:
        rgba(255, 255, 255, .025);
}

.site-count {
    display: flex;

    min-width: 19px;
    height: 19px;

    align-items: center;
    justify-content: center;

    border-radius: 99px;

    color: var(--site-accent);

    background:
        rgba(13, 214, 202, .10);

    font-size: 10px;
}


/* ==========================================================
   SIDEBAR FEATURE
========================================================== */

.site-sidebar-feature {
    position: relative;

    margin-top: 28px;

    padding: 22px 16px;

    overflow: hidden;

    border:
        1px solid rgba(107, 164, 204, .17);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 43, 64, .75),
            rgba(4, 19, 31, .95)
        );
}

.sidebar-feature-icon {
    margin-bottom: 15px;

    color: var(--site-accent);

    font-size: 32px;

    text-shadow:
        0 0 20px rgba(0, 226, 211, .35);
}

.site-sidebar-feature h3 {
    margin: 0 0 8px;

    color: white;

    font-size: 16px;
    line-height: 1.3;
}

.site-sidebar-feature p {
    margin: 0;

    color: #829bb2;

    font-size: 11px;
    line-height: 1.6;
}

.site-sidebar-feature > a {
    position: absolute;

    top: 19px;
    right: 15px;

    color: #5e7f98;

    font-size: 20px;
}


/* ==========================================================
   MAIN
========================================================== */

.site-main {
    margin-left:
        var(--site-sidebar-width);

    padding:
        calc(var(--site-header-height) + 20px)
        22px
        35px;

    min-height: 100vh;
}


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

.site-hero {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(470px, .9fr)
        minmax(500px, 1.1fr);

    min-height: 440px;

    overflow: hidden;

    border:
        1px solid rgba(74, 155, 181, .24);

    border-radius:
        var(--site-radius);

    background:
        linear-gradient(
            110deg,
            #071b2b 0%,
            #062132 44%,
            #052c32 100%
        );

    box-shadow:
        var(--site-shadow);
}

.site-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 72% 50%,
            rgba(0, 230, 215, .11),
            transparent 35%
        );
}

.site-hero-copy {
    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        55px 30px 45px 68px;
}

.site-eyebrow {
    display: inline-block;

    margin-bottom: 17px;

    color: var(--site-accent);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .23em;
}

.site-hero h1 {
    max-width: 670px;

    margin:
        0 0 17px;

    color: white;

    font-size:
        clamp(44px, 4vw, 69px);

    line-height: .96;

    letter-spacing: -.045em;
}

.site-hero h1 span {
    color: var(--site-accent);

    text-shadow:
        0 0 32px rgba(8, 225, 210, .15);
}

.site-hero-copy > p {
    max-width: 570px;

    margin:
        0 0 27px;

    color: #adc0d1;

    font-size: 14px;
    line-height: 1.75;
}

.site-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.site-btn-lg {
    min-height: 51px;

    padding:
        0 24px;

    border-radius: 11px;

    font-size: 13px;
}

.site-btn-primary {
    color: #001b19;

    background:
        linear-gradient(
            135deg,
            #16e8d9,
            #00beb8
        );

    box-shadow:
        0 10px 34px rgba(0, 214, 203, .19);
}

.site-btn-primary:hover {
    box-shadow:
        0 14px 38px rgba(0, 214, 203, .28);
}

.site-btn-secondary {
    color: white;

    border:
        1px solid rgba(133, 179, 210, .30);

    background:
        rgba(4, 19, 31, .52);
}

.site-btn-secondary:hover {
    border-color:
        rgba(14, 222, 210, .42);
}


/* ==========================================================
   HERO FEATURES
========================================================== */

.site-hero-features {
    display: flex;

    align-items: center;

    gap: 35px;

    margin-top: 38px;
}

.hero-feature {
    display: flex;

    align-items: center;

    gap: 11px;
}

.hero-feature-icon {
    display: flex;

    width: 37px;
    height: 37px;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 99px;

    color: var(--site-accent);

    background:
        rgba(0, 220, 208, .08);

    box-shadow:
        inset 0 0 0 1px rgba(0, 222, 211, .12);

    font-size: 18px;
}

.hero-feature div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.hero-feature strong {
    color: #33d9d1;

    font-size: 11px;
}

.hero-feature small {
    color: #6f8da4;

    font-size: 9px;
}


/* ==========================================================
   HERO ART
========================================================== */

.site-hero-art {
    position: relative;

    z-index: 2;

    min-height: 440px;

    overflow: hidden;
}

.site-hero-image {
    position: absolute;

    z-index: 3;

    width: 95%;
    height: 100%;

    top: 0;
    right: 0;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(1.04)
        contrast(1.03);

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            black 18%,
            black 100%
        );
}

.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}

.hero-glow-one {
    width: 330px;
    height: 330px;

    right: 90px;
    top: 50px;

    background:
        rgba(0, 224, 208, .16);
}

.hero-glow-two {
    width: 180px;
    height: 180px;

    right: 310px;
    bottom: 20px;

    background:
        rgba(217, 170, 83, .09);
}

.hero-orbit {
    position: absolute;

    z-index: 1;

    border:
        1px solid rgba(0, 221, 210, .13);

    border-radius: 50%;
}

.orbit-one {
    width: 470px;
    height: 470px;

    right: 60px;
    top: -15px;
}

.orbit-two {
    width: 350px;
    height: 350px;

    right: 120px;
    top: 45px;
}

.hero-side-copy {
    position: absolute;

    z-index: 7;

    top: 75px;
    right: 32px;

    color: rgba(23, 229, 218, .77);

    font-size: 10px;
    font-weight: 700;

    line-height: 2;

    letter-spacing: .45em;
}

.hero-slider-control {
    position: absolute;

    z-index: 7;

    right: 30px;
    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 9px;
}

.hero-slider-control button {
    border: 0;

    color: #b2c8da;

    background: transparent;

    font-size: 21px;

    cursor: pointer;
}

.hero-slider-control span {
    width: 6px;
    height: 6px;

    border:
        1px solid rgba(185, 215, 229, .60);

    border-radius: 50%;
}

.hero-slider-control span.is-active {
    width: 17px;

    border-color:
        var(--site-accent);

    border-radius: 99px;

    background:
        var(--site-accent);

    box-shadow:
        0 0 12px rgba(0, 219, 208, .5);
}


/* ==========================================================
   CATEGORY GRID
========================================================== */

.site-category-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 12px;

    margin-top: 16px;
}

.site-category-card {
    position: relative;

    height: 151px;

    overflow: hidden;

    border:
        1px solid rgba(108, 160, 195, .18);

    border-radius: 13px;

    background: #071623;

    transition:
        transform .2s ease,
        border .2s ease,
        box-shadow .2s ease;
}

.site-category-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(14, 220, 210, .32);

    box-shadow:
        0 16px 30px rgba(0, 0, 0, .18);
}

.site-category-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}

.site-category-card:hover img {
    transform: scale(1.045);
}

.site-category-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(1, 7, 13, .05) 0%,
            rgba(2, 11, 19, .18) 30%,
            rgba(2, 11, 19, .94) 100%
        );
}

.site-category-copy {
    position: absolute;

    z-index: 4;

    left: 15px;
    right: 45px;
    bottom: 13px;

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.site-category-copy strong {
    color: white;

    font-size: 14px;
}

.site-category-copy span {
    color: #97adc1;

    font-size: 10px;
}

.site-category-arrow {
    position: absolute;

    z-index: 5;

    right: 12px;
    bottom: 14px;

    display: flex;

    width: 28px;
    height: 28px;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(195, 223, 235, .42);

    border-radius: 50%;

    color: #dce7ef;

    font-size: 14px;
}


/* ==========================================================
   PROVIDER SECTION
========================================================== */

.site-provider-section {
    margin-top: 17px;

    padding: 21px;

    border:
        1px solid rgba(98, 151, 187, .17);

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 25, 39, .88),
            rgba(5, 18, 29, .92)
        );
}

.site-provider-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 17px;
}

.site-provider-head .site-eyebrow {
    margin-bottom: 7px;
}

.site-provider-head h2 {
    margin: 0;

    color: white;

    font-size: 18px;
}

.site-provider-head > a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #8fa7bc;

    font-size: 11px;
}

.site-provider-head > a span {
    color: var(--site-accent);

    font-size: 18px;
}

.site-provider-list {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(120px, 1fr));

    gap: 9px;
}

.provider-card {
    display: flex;

    height: 72px;

    align-items: center;
    justify-content: center;

    padding: 13px;

    border:
        1px solid rgba(100, 153, 190, .13);

    border-radius: 10px;

    background:
        rgba(4, 16, 26, .58);

    transition:
        background .18s ease,
        border .18s ease,
        transform .18s ease;
}

.provider-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(0, 216, 204, .23);

    background:
        rgba(6, 28, 41, .85);
}

.provider-card img {
    max-width: 115px;
    max-height: 38px;

    object-fit: contain;
}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer {
    position: relative;

    display: grid;

    grid-template-columns:
        1.6fr
        repeat(3, .85fr)
        1.1fr;

    gap: 45px;

    margin-left:
        var(--site-sidebar-width);

    padding:
        37px 32px 56px;

    border-top:
        1px solid var(--site-line);

    background:
        #030d17;
}

.site-footer-brand img {
    width: 54px;
    height: 54px;

    object-fit: contain;

    margin-bottom: 11px;
}

.site-footer-brand p {
    margin: 0;

    color: #71899f;

    font-size: 11px;
    line-height: 1.5;
}

.site-footer-column {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.site-footer-column strong,
.site-footer-social > strong {
    margin-bottom: 5px;

    color: #dfe9f2;

    font-size: 9px;

    letter-spacing: .12em;
}

.site-footer-column a {
    color: #7890a6;

    font-size: 10px;
}

.site-footer-column a:hover {
    color: white;
}

.footer-social-icons {
    display: flex;

    gap: 10px;

    margin-top: 7px;
}

.footer-social-icons a {
    display: flex;

    width: 29px;
    height: 29px;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(124, 170, 200, .16);

    border-radius: 50%;

    color: #9db3c7;
}

.footer-legal {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    color: #667e94;

    font-size: 9px;
}

.footer-legal span:first-child {
    display: flex;

    width: 27px;
    height: 27px;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(121, 164, 195, .3);

    border-radius: 50%;
}

.site-footer-bottom {
    position: absolute;

    left: 32px;
    right: 32px;
    bottom: 17px;

    padding-top: 12px;

    border-top:
        1px solid rgba(116, 158, 186, .08);

    color: #50677c;

    font-size: 9px;
}


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

.site-support-float {
    position: fixed;

    z-index: 130;

    right: 19px;
    bottom: 18px;

    display: flex;

    min-height: 42px;

    align-items: center;

    gap: 8px;

    padding: 0 16px;

    border:
        1px solid rgba(0, 226, 212, .28);

    border-radius: 99px;

    color: white;

    background:
        rgba(4, 38, 46, .94);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .28);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.site-support-float > span {
    display: flex;

    width: 20px;
    height: 20px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #00201e;

    background:
        var(--site-accent);
}


/* ==========================================================
   SEARCH OVERLAY
========================================================== */

.site-search-overlay {
    position: fixed;

    z-index: 180;

    inset: 0;

    display: none;

    align-items: flex-start;
    justify-content: center;

    padding-top: 95px;

    background:
        rgba(1, 8, 14, .72);

    backdrop-filter: blur(14px);
}

.site-search-overlay[aria-hidden="false"] {
    display: flex;
}

.site-search-box {
    width:
        min(720px, calc(100vw - 40px));

    overflow: hidden;

    border:
        1px solid rgba(94, 171, 199, .26);

    border-radius: 17px;

    background:
        #071723;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, .5);
}

.site-search-head {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px;

    border-bottom:
        1px solid var(--site-line);
}

.site-search-head input {
    width: 100%;

    height: 47px;

    padding: 0 15px;

    outline: none;

    border:
        1px solid rgba(112, 168, 201, .17);

    border-radius: 10px;

    color: white;

    background:
        rgba(255, 255, 255, .025);
}

.site-search-results {
    min-height: 150px;

    padding: 20px;
}

.site-empty-mini {
    color: #6e879e;

    font-size: 12px;
}


/* ==========================================================
   SKIP
========================================================== */

.site-skip {
    position: fixed;

    z-index: 1000;

    top: -100px;
    left: 20px;

    padding: 10px 14px;

    border-radius: 8px;

    color: #001b19;

    background: var(--site-accent);
}

.site-skip:focus {
    top: 20px;
}


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

.site-mobile-menu {
    display: none;
}


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

@media (max-width: 1350px) {

    .site-hero {
        grid-template-columns:
            .9fr
            1.1fr;
    }

    .site-hero-copy {
        padding-left: 45px;
    }

    .site-hero-features {
        gap: 18px;
    }

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

    .site-provider-list {
        grid-template-columns:
            repeat(4, 1fr);
    }
}


@media (max-width: 1120px) {

    :root {
        --site-sidebar-width: 0px;
    }

    .site-header {
        grid-template-columns:
            auto
            1fr
            auto;

        padding-left: 15px;
    }

    .site-mobile-menu {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: 38px;
        height: 38px;

        margin-right: 10px;
    }

    .site-brand-logo {
        display: none;
    }

    .site-sidebar {
        width: 225px;

        transform:
            translateX(-100%);

        transition:
            transform .22s ease;
    }

    .site-sidebar.is-open {
        transform:
            translateX(0);
    }

    .site-sidebar-head {
        display: flex;

        align-items: center;
        justify-content: space-between;

        margin-bottom: 15px;
    }

    .site-topnav {
        justify-content: flex-start;

        overflow-x: auto;
    }

    .site-main,
    .site-footer {
        margin-left: 0;
    }
}


@media (max-width: 850px) {

    .site-topnav {
        display: none;
    }

    .site-header {
        grid-template-columns:
            auto
            1fr
            auto;
    }

    .site-brand-logo {
        display: inline-flex;
    }

    .site-hero {
        display: block;

        min-height: auto;
    }

    .site-hero-copy {
        padding:
            45px 28px 40px;
    }

    .site-hero-art {
        min-height: 340px;
    }

    .site-hero-features {
        flex-wrap: wrap;
    }

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

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

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


@media (max-width: 560px) {

    .site-header {
        height: 64px;

        padding:
            0 10px;
    }

    .site-brand-logo img {
        width: 43px;
        height: 43px;
    }

    .site-btn-login,
    .site-btn-register {
        min-width: 65px;
        height: 38px;

        font-size: 11px;
    }

    .site-search-button {
        width: 38px;
        height: 38px;
    }

    .site-main {
        padding:
            77px 10px 25px;
    }

    .site-hero-copy {
        padding:
            34px 20px;
    }

    .site-hero h1 {
        font-size: 39px;
    }

    .site-hero-copy > p {
        font-size: 12px;
    }

    .site-btn-lg {
        width: 100%;
    }

    .site-hero-features {
        display: grid;

        grid-template-columns:
            1fr;
    }

    .site-hero-art {
        min-height: 260px;
    }

    .site-category-grid {
        grid-template-columns:
            1fr 1fr;

        gap: 9px;
    }

    .site-category-card {
        height: 135px;
    }

    .site-provider-list {
        grid-template-columns:
            1fr 1fr;
    }

    .site-provider-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer {
        grid-template-columns:
            1fr 1fr;

        gap: 27px;

        padding:
            30px 20px 60px;
    }

    .site-footer-brand,
    .site-footer-social {
        grid-column:
            1 / -1;
    }
}
/* ==========================================================
   DIAMOND DESKTOP V1 — PTT CMS integration layer
   The source design above is preserved; this layer connects
   runtime game cards, plugin menu and CMS blocks.
========================================================== */
html[data-site-template="diamond"]{min-width:1180px}
body.template-diamond{min-width:1180px}
.diamond-plugin-menu{margin-top:0}.diamond-plugin-menu>a span:nth-child(2){white-space:nowrap}.diamond-plugin-menu .site-side-icon{color:var(--site-accent)}
.site-wallet{height:42px;min-width:110px;padding:5px 12px;border:1px solid var(--site-line);border-radius:12px;display:grid;align-content:center;background:rgba(255,255,255,.025)}.site-wallet small{font-size:9px;color:var(--site-muted)}.site-wallet strong{font-size:12px;color:#fff}
.site-state-banner{margin:0 0 18px;padding:14px 18px;border:1px solid var(--site-line);border-radius:12px;background:rgba(9,31,47,.86);display:flex;gap:12px;align-items:center}.site-state-banner b{font-size:11px;color:var(--site-accent)}.site-state-banner span{font-size:12px;color:var(--site-muted)}
.diamond-game-section{margin-top:25px;padding:26px 0 5px}.diamond-game-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);grid-template-rows:1fr;gap:12px;overflow-x:auto;scrollbar-width:thin;padding:4px 2px 16px}.site-game-card{min-width:170px;border:1px solid var(--site-line);border-radius:14px;overflow:hidden;background:rgba(7,23,36,.86);box-shadow:0 14px 30px rgba(0,0,0,.16)}.site-game-cover{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(145deg,#0b2636,#061521)}.site-game-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .28s ease}.site-game-card:hover .site-game-cover img{transform:scale(1.035)}.site-game-fallback{height:100%;display:grid;place-content:center;text-align:center;gap:7px;color:var(--site-muted)}.site-game-fallback b{font-size:36px;color:var(--site-accent)}.site-game-play{position:absolute;inset:auto 12px 12px 12px;display:flex;justify-content:center;padding:10px;border-radius:9px;background:rgba(4,16,27,.82);color:#fff;font-size:11px;font-weight:800;backdrop-filter:blur(10px);opacity:0;transform:translateY(6px);transition:.2s}.site-game-card:hover .site-game-play{opacity:1;transform:none}.site-game-info{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px}.site-game-info>div{display:grid;gap:3px;min-width:0}.site-game-info b{font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-game-info span{font-size:9px;color:var(--site-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-favorite{border:0;background:transparent;color:var(--site-muted);font-size:20px;cursor:pointer}.site-favorite.is-favorite{color:var(--site-accent)}
.diamond-provider-card{display:grid!important;place-content:center;text-align:center;gap:5px;padding:16px!important}.diamond-provider-card span{font-weight:800;font-size:13px;color:#e8f4fb}.diamond-provider-card small{font-size:9px;color:#68859a;letter-spacing:.08em}.diamond-empty{padding:25px;border:1px dashed var(--site-line);border-radius:12px;color:var(--site-muted);font-size:12px}
.diamond-promo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.diamond-promo-card{padding:24px;border:1px solid var(--site-line);border-radius:14px;background:linear-gradient(145deg,#081f30,#061521);display:grid;gap:9px}.diamond-promo-card>span{font-size:9px;color:var(--site-accent);letter-spacing:.13em}.diamond-promo-card h2{margin:0;color:#fff;font-size:20px}.diamond-promo-card p{margin:0;color:var(--site-muted);font-size:12px;line-height:1.6}.diamond-promo-card b{margin-top:7px;color:var(--site-accent);font-size:11px}
.diamond-content-card,.diamond-cta,.diamond-banner{margin-top:20px;border:1px solid var(--site-line);border-radius:14px;background:rgba(7,23,36,.78);padding:25px;color:var(--site-text)}.diamond-content-card h2,.diamond-cta h2,.diamond-banner h2{margin:0 0 10px;color:#fff}.diamond-content-card p,.diamond-cta p,.diamond-banner p{color:var(--site-muted);line-height:1.7}.diamond-cta{display:flex;align-items:center;justify-content:space-between;gap:25px}.diamond-banner{display:flex;gap:20px;align-items:center;overflow:hidden}.diamond-banner img{width:220px;height:120px;object-fit:cover;border-radius:10px}.diamond-spacer--sm{height:18px}.diamond-spacer--md{height:38px}.diamond-spacer--lg{height:72px}.diamond-image-block{display:block;margin-top:20px}.diamond-image-block img{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:14px;border:1px solid var(--site-line)}.diamond-feature-grid{display:grid;grid-template-columns:repeat(var(--diamond-cols,3),minmax(0,1fr));gap:12px;margin-top:20px}.diamond-feature-grid a{display:grid;gap:7px;padding:20px;border:1px solid var(--site-line);border-radius:14px;background:rgba(7,23,36,.76)}.diamond-feature-grid span{font-size:9px;color:var(--site-accent);letter-spacing:.12em}.diamond-feature-grid strong{color:#fff}.diamond-feature-grid p{margin:0;color:var(--site-muted);font-size:11px;line-height:1.6}
.diamond-block[data-cms-hidden="1"]{display:none!important}