/* =========================================================
   Hosting Malaya - WHMCS theme (child of Nexus; also works with Twenty-One)
   css/custom.css

   Brand colours sampled from the official logo:
   blue #004AAD · yellow #FFCC00 · grey #E6E6E6 · navy #020A1C
   Fonts: Poppins (headings, buttons) + Inter (body)

   IMPORTANT: this file REPLACES templates/nexus/css/custom.css, so
   section 1 must keep defining every Nexus variable. Nexus Cart
   (WHMCS's single-page cart) reads the same variables.
   ========================================================= */

/* ---------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------- */
:root {
    --white: #fff;

    /* Neutral shades (blue-tinted greys) */
    --neutral-50: #F8FAFD;
    --neutral-100: #F4F7FC;
    --neutral-200: #E4E9F2;
    --neutral-300: #CDD7E8;
    --neutral-400: #93A1BA;
    --neutral-500: #5A6880;
    --neutral-600: #3A4A66;
    --neutral-700: #27354F;
    --neutral-800: #1C2638;
    --neutral-900: #0B1220;
    --neutral-950: #020A1C;

    /* Primary shades - Hosting Malaya blue #004AAD */
    --primary-50: #EEF4FF;
    --primary-100: #E8F0FF;
    --primary-200: #C6D5F2;
    --primary-300: #93B4EE;
    --primary-400: #5B8DE6;
    --primary-500: #2F6FDB;
    --primary-600: #1F5FD6;
    --primary-700: #004AAD;
    --primary-800: #003F94;
    --primary-900: #0A2E7A;
    --primary-950: #05163D;

    /* Primary colors */
    --primary: var(--primary-700);
    --primary-lifted: var(--primary-800);
    --primary-accented: var(--primary-900);

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #16A34A;
    --success-lifted: #15803D;
    --success-accented: #166534;

    /* Info colors */
    --info: #1F5FD6;
    --info-lifted: #004AAD;
    --info-accented: #0A2E7A;

    /* Notice colors */
    --notice: #7C3AED;
    --notice-lifted: #6D28D9;
    --notice-accented: #5B21B6;

    /* Warning colors */
    --warning: #E8590C;
    --warning-lifted: #C2410C;
    --warning-accented: #9A3412;

    /* Error colors */
    --error: #DC2626;
    --error-lifted: #B91C1C;
    --error-accented: #991B1B;

    /* "Grayscale" drives Nexus' dark UI (dark buttons, topbar) -> brand navy */
    --grayscale: #05163D;
    --grayscale-lifted: #0A2E7A;
    --grayscale-accented: #020A1C;

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-800);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: #E8EEF8;
    --bg-inverted: var(--neutral-950);

    /* Additional colors */
    --yellow-200: #FFE680;
    --yellow-300: #FFCC00;
    --teal-300: #3BE8FF;
    --teal-400: #0EC5DE;
    --emerald-300: #5EE9B5;
    --pink-400: #FB64B6;

    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.375rem;
    --rounding-md: 0.625rem;
    --rounding-lg: 1rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 40%;

    /* Hosting Malaya brand tokens (used by this theme only) */
    --hm-blue: #004AAD;
    --hm-blue-600: #1F5FD6;
    --hm-blue-bright: #2F7BFF;
    --hm-blue-soft: #E8F0FF;
    --hm-yellow: #FFCC00;
    --hm-yellow-hover: #FFD83D;
    --hm-cyan: #3BE8FF;
    --hm-green: #22D37A;
    --hm-wa: #25D366;
    --hm-purple: #B45CFF;
    --hm-navy-950: #020A1C;
    --hm-navy-900: #05163D;
    --hm-game-950: #050817;
    --hm-game-900: #0A0F2C;
    --hm-ink: #0B1220;
    --hm-text: #1C2638;
    --hm-muted: #5A6880;
    --hm-line: #E4E9F2;
    --hm-soft: #F4F7FC;
    --hm-font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hm-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hm-font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
    --hm-shadow-card: 0 12px 34px -26px rgba(2, 10, 28, .5);
    --hm-shadow-card-hover: 0 24px 54px -28px rgba(2, 10, 28, .55);
    --hm-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------
   2. Base
   --------------------------------------------------------- */
html,
body {
    background-color: var(--hm-navy-950);
}

body {
    font-family: var(--hm-font-body);
    color: var(--hm-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--hm-font-display);
    font-weight: 700;
    color: var(--hm-ink);
    letter-spacing: -.01em;
}

a {
    color: var(--hm-blue);
}

a:hover {
    color: var(--hm-blue-600);
}

::selection {
    background: rgba(255, 204, 0, .4);
    color: var(--hm-ink);
}

.text-muted {
    color: var(--hm-muted) !important;
}

.sr-only-focusable:focus,
:focus-visible {
    outline-color: var(--hm-blue-600);
}

/* ---------------------------------------------------------
   3. Bootstrap "primary" components (compiled blue -> brand)
   --------------------------------------------------------- */
.text-primary { color: var(--hm-blue) !important; }
a.text-primary:hover,
a.text-primary:focus { color: var(--primary-900) !important; }
.bg-primary { background-color: var(--hm-blue) !important; }
.border-primary { border-color: var(--hm-blue) !important; }
.badge-primary { background-color: var(--hm-blue); color: #fff; }
.badge-info { background-color: var(--hm-blue-600); color: #fff; }
.progress-bar { background-color: var(--hm-blue-600); }
.list-group-item.active { background-color: var(--hm-blue); border-color: var(--hm-blue); }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--hm-blue-soft); color: var(--hm-blue); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--hm-blue); }
.page-link { color: var(--hm-blue); border-color: var(--hm-line); }
.page-link:hover { color: var(--primary-900); background-color: var(--hm-soft); border-color: var(--hm-line); }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(31, 95, 214, .2); }
.page-item.active .page-link { background-color: var(--hm-blue); border-color: var(--hm-blue); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--hm-blue); border-color: var(--hm-blue); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(31, 95, 214, .22); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--primary-300); }
.custom-range::-webkit-slider-thumb { background-color: var(--hm-blue); }
.custom-range::-moz-range-thumb { background-color: var(--hm-blue); }
.form-control:focus,
.custom-select:focus {
    border-color: var(--primary-300);
    box-shadow: 0 0 0 .2rem rgba(31, 95, 214, .15);
}

/* ---------------------------------------------------------
   4. Buttons
   --------------------------------------------------------- */
.btn {
    font-family: var(--hm-font-display);
    font-weight: 600;
    border-radius: var(--rounding-md);
    transition: transform .2s var(--hm-ease), box-shadow .2s, background-color .2s, border-color .2s, color .2s;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background: linear-gradient(135deg, var(--hm-blue-600), var(--hm-blue));
    border-color: var(--hm-blue);
    color: #fff;
}

.btn-primary {
    box-shadow: 0 8px 20px -12px rgba(31, 95, 214, .85);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background: linear-gradient(135deg, #2A6BE3, var(--primary-800));
    border-color: var(--primary-800);
    color: #fff;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(31, 95, 214, .35);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background: #8FA9D6;
    border-color: #8FA9D6;
    color: #fff;
    box-shadow: none;
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--success-lifted);
    border-color: var(--success-lifted);
}

.btn-warning {
    background-color: var(--hm-yellow);
    border-color: var(--hm-yellow);
    color: #111827;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--hm-yellow-hover);
    border-color: var(--hm-yellow-hover);
    color: #111827;
}

.btn-info {
    background-color: var(--hm-blue-600);
    border-color: var(--hm-blue-600);
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--hm-blue);
    border-color: var(--hm-blue);
}

.btn-default {
    background-color: #fff;
    border-color: var(--border);
    color: var(--hm-text);
}

.btn-default:hover {
    background-color: var(--hm-soft);
    border-color: var(--primary-200);
    color: var(--hm-blue);
}

.btn-default:focus,
.btn-default.focus {
    background-color: #fff;
    border-color: var(--primary-300);
    color: var(--hm-text);
    box-shadow: 0 0 0 .2rem rgba(31, 95, 214, .15);
}

body #main-body .btn-outline-primary,
.btn-outline-primary {
    color: var(--hm-blue);
    background-color: #fff;
    border: 1px solid var(--primary-200);
}

body #main-body .btn-outline-primary:hover,
body #main-body .btn-outline-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--hm-blue);
    background-color: var(--hm-blue-soft);
    border-color: var(--hm-blue);
}

.btn-link,
.btn-link:focus {
    color: var(--hm-blue);
}

.btn-link:hover {
    color: var(--primary-900);
}

body .sidebar .btn-success {
    background: linear-gradient(135deg, var(--hm-blue-600), var(--hm-blue));
    border-color: var(--hm-blue);
}

body .sidebar .btn-success:hover {
    background: var(--primary-800);
    border-color: var(--primary-800);
}

/* Brand buttons (homepage, header, widgets) */
.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: .8em 1.35em;
    border: 1.5px solid transparent;
    border-radius: 12px;
    font: 600 1rem/1.2 var(--hm-font-display);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s var(--hm-ease), box-shadow .2s, background-color .2s, border-color .2s, color .2s;
}

.hm-btn:hover,
.hm-btn:focus {
    text-decoration: none;
    transform: translateY(-2px);
}

.hm-btn:active {
    transform: translateY(0);
}

.hm-btn-lg { padding: 1em 1.6em; font-size: 1.05rem; border-radius: 14px; }
.hm-btn-sm { padding: .55em 1em; font-size: .9rem; border-radius: 10px; }
.hm-btn-block { display: flex; width: 100%; white-space: normal; }

.hm-btn-yellow,
.hm-btn-yellow:hover,
.hm-btn-yellow:focus { color: #111827; }
.hm-btn-yellow { background: var(--hm-yellow); box-shadow: 0 10px 28px -10px rgba(255, 204, 0, .7); }
.hm-btn-yellow:hover { background: var(--hm-yellow-hover); box-shadow: 0 16px 36px -12px rgba(255, 204, 0, .85); }

.hm-btn-wa,
.hm-btn-wa:hover,
.hm-btn-wa:focus { color: #052E16; }
.hm-btn-wa { background: var(--hm-wa); box-shadow: 0 10px 28px -12px rgba(37, 211, 102, .8); }
.hm-btn-wa:hover { background: #3BE07A; }

.hm-btn-blue,
.hm-btn-blue:hover,
.hm-btn-blue:focus { color: #fff; }
.hm-btn-blue { background: linear-gradient(135deg, var(--hm-blue-600), var(--hm-blue)); box-shadow: 0 10px 28px -12px rgba(31, 95, 214, .8); }
.hm-btn-blue:hover { box-shadow: 0 16px 36px -12px rgba(31, 95, 214, .9); }

.hm-btn-green,
.hm-btn-green:hover,
.hm-btn-green:focus { color: #fff; }
.hm-btn-green { background: #15803D; box-shadow: 0 10px 28px -12px rgba(21, 128, 61, .7); }
.hm-btn-green:hover { background: #166534; }

.hm-btn-outline,
.hm-btn-outline:hover,
.hm-btn-outline:focus { color: var(--hm-blue); }
.hm-btn-outline { background: #fff; border-color: var(--primary-200); }
.hm-btn-outline:hover { background: var(--hm-blue-soft); border-color: var(--hm-blue); }

.hm-btn-ghost,
.hm-btn-ghost:hover,
.hm-btn-ghost:focus { color: #fff; }
.hm-btn-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .24); }
.hm-btn-ghost:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .45); }

/* ---------------------------------------------------------
   5. Promo bar
   --------------------------------------------------------- */
.hm-promobar {
    background: linear-gradient(90deg, #FFCC00, #FFB703);
    color: #1A1300;
    font-size: .875rem;
}

.hm-promobar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
}

.hm-promobar p {
    margin: 0;
}

.hm-promobar-tag {
    display: inline-block;
    margin-right: 6px;
    padding: .35em .6em;
    border-radius: 6px;
    background: #111827;
    color: var(--hm-yellow);
    font: 700 .68rem/1 var(--hm-font-display);
    letter-spacing: .1em;
    vertical-align: 1px;
}

.hm-promobar a.hm-promobar-link,
.hm-promobar a.hm-promobar-link:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #111827;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   6. Header
   --------------------------------------------------------- */
#header.hm-header {
    position: relative;
    z-index: 1000;
    background:
        radial-gradient(900px 220px at 88% -60%, rgba(47, 123, 255, .3), transparent 70%),
        linear-gradient(180deg, #020A1C 0%, #041233 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #C3D0EA;
}

/* Logged-in top bar */
#header .topbar {
    padding: 2px 0;
    background: rgba(0, 0, 0, .28);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: #9FB3D9;
}

#header .topbar .btn,
#header .topbar .active-client .btn {
    color: #C3D0EA;
    font-family: var(--hm-font-body);
    font-weight: 500;
    font-size: .82rem;
}

#header .topbar .btn:hover {
    color: #fff;
}

#header .topbar .active-client .input-group-text {
    color: #8FA3C8;
}

#header .topbar .active-client .btn.btn-active-client span {
    border-bottom-color: rgba(195, 208, 234, .5);
}

/* Logo row */
#header .hm-navbar {
    min-height: 72px;
    padding: 12px 0;
}

#header .hm-navbar > .container {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
}

#header .navbar-brand {
    display: inline-flex;
    align-items: center;
    margin: 0 16px 0 0;
    padding: 0;
}

#header .logo-img {
    display: block;
    width: auto;
    height: 40px;
    max-width: none;
    max-height: none;
}

/* Knowledgebase search */
#header .search {
    width: 300px;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    transition: border-color .2s, background .2s;
}

#header .search:focus-within {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 204, 0, .6);
}

#header .search .form-control {
    height: 40px;
    background: transparent;
    border: 0;
    color: #fff;
    box-shadow: none;
}

#header .search .form-control::placeholder {
    color: #8FA3C8;
    opacity: 1;
}

#header .search .btn,
#header .search .btn:hover,
#header .search .btn:focus {
    height: 40px;
    background: transparent;
    border: 0;
    color: #8FA3C8;
    box-shadow: none;
}

#header .search .btn:hover {
    color: #fff;
}

/* Toolbar: order button, cart, menu toggle */
#header .toolbar {
    align-items: center;
    gap: 10px;
}

#header .toolbar .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    overflow: visible !important;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 11px;
    color: #fff;
    font-size: 1rem;
}

#header .toolbar .nav-link:hover,
#header .toolbar .nav-link:focus {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

#header .toolbar .nav-link .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 21px;
    padding: 4px 6px;
    background: var(--hm-yellow);
    border: 2px solid #020A1C;
    border-radius: 999px;
    color: #111827;
    font-family: var(--hm-font-display);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    opacity: 1;
}

#header .navbar a.hm-header-cta,
#header .navbar a.hm-header-cta:hover {
    height: 42px;
    color: #111827;
    font-size: .92rem;
}

/* Main navigation row (Nexus gives every header .navbar min-height: 70px; Twenty-One pads the collapse) */
#header .main-navbar-wrapper {
    min-height: 0;
    background: rgba(255, 255, 255, .025);
    border-top: 1px solid rgba(255, 255, 255, .07);
}

#header .main-navbar-wrapper .navbar-nav {
    margin-top: 0;
    margin-bottom: 0;
}

#nav {
    gap: 2px;
}

#header .main-navbar-wrapper .navbar-nav > li > a {
    color: #C3D0EA;
    font-family: var(--hm-font-display);
    font-weight: 500;
    text-decoration: none;
    transition: color .2s, background-color .2s;
}

#header .main-navbar-wrapper .navbar-nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav > li > a:focus,
#header .main-navbar-wrapper .navbar-nav > li.show > a {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

#header .main-navbar-wrapper .navbar-nav .badge {
    background: var(--hm-yellow);
    color: #111827;
}

#header .main-navbar-wrapper a.hm-btn-yellow,
#header .main-navbar-wrapper a.hm-btn-yellow:hover {
    color: #111827;
}

/* Dropdown menus */
#header .dropdown-menu {
    min-width: 230px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 14px;
    box-shadow: 0 24px 50px -20px rgba(2, 10, 28, .45);
}

#header .dropdown-menu > li.dropdown-item {
    padding: 0;
    background: none;
}

#header .dropdown-menu > li > a.dropdown-item {
    display: block;
    padding: 8px 12px !important;
    border-radius: 9px;
    color: var(--hm-text);
    font-family: var(--hm-font-body);
    font-size: .92rem;
    white-space: nowrap;
}

#header .dropdown-menu > li > a.dropdown-item:hover,
#header .dropdown-menu > li > a.dropdown-item:focus {
    background: var(--hm-blue-soft);
    color: var(--hm-blue);
}

#header .dropdown-menu .dropdown-divider {
    margin: 6px 4px;
    border-top-color: var(--hm-line);
}

/* Desktop: keep each nav link under 30px tall - the parent theme's autoCollapse('#nav', 30)
   moves items into a "More" menu when the nav row is 30px or taller. */
@media (min-width: 1200px) {
    #header .main-navbar-wrapper {
        padding: 11px 0;
    }

    #header .main-navbar-wrapper .navbar-collapse {
        padding: 0;
    }

    /* padding-right needs !important to beat Twenty-One's .pr-4 utility on menu links */
    #header .main-navbar-wrapper .navbar-nav > li > a {
        display: block;
        padding: 3px 11px;
        padding-right: 11px !important;
        border-radius: 8px;
        font-size: 14.5px;
        line-height: 22px;
    }

    #header .main-navbar-wrapper .dropdown-menu {
        margin-top: 12px;
    }
}

/* Mobile & tablet menu */
@media (max-width: 1199.98px) {
    #header .main-navbar-wrapper {
        background: transparent;
        border-top: 0;
    }

    /* Bootstrap drops container padding inside collapsed navbars */
    #header .main-navbar-wrapper > .container {
        padding-right: 15px;
        padding-left: 15px;
    }

    #header .main-navbar-wrapper .navbar-collapse {
        padding: 0 0 6px;
    }

    #header .main-navbar-wrapper .navbar-collapse.show,
    #header .main-navbar-wrapper .navbar-collapse.collapsing {
        padding: 14px 0 18px;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    #header .main-navbar-wrapper .navbar-nav > li > a {
        display: block;
        padding: 11px 12px;
        padding-right: 12px !important;
        border-radius: 10px;
        font-size: 1rem;
    }

    #header .main-navbar-wrapper .dropdown-menu {
        margin: 4px 0 8px;
        background: rgba(255, 255, 255, .04);
        border-color: rgba(255, 255, 255, .08);
        box-shadow: none;
    }

    #header .main-navbar-wrapper .dropdown-menu > li > a.dropdown-item {
        color: #C3D0EA;
    }

    #header .main-navbar-wrapper .dropdown-menu > li > a.dropdown-item:hover,
    #header .main-navbar-wrapper .dropdown-menu > li > a.dropdown-item:focus {
        background: rgba(255, 255, 255, .08);
        color: #fff;
    }

    #header .main-navbar-wrapper .dropdown-divider {
        border-top-color: rgba(255, 255, 255, .08);
    }

    #header .main-navbar-wrapper .search {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    #header .hm-navbar {
        min-height: 64px;
        padding: 10px 0;
    }

    #header .logo-img {
        height: 34px;
    }
}

/* ---------------------------------------------------------
   7. Page shell & breadcrumb
   --------------------------------------------------------- */
.master-breadcrumb {
    background: #fff;
    border-bottom: 1px solid var(--hm-line);
}

.master-breadcrumb .breadcrumb {
    padding: 11px 0;
    background: transparent;
    font-size: .86rem;
}

.master-breadcrumb .breadcrumb a {
    color: var(--hm-muted);
}

.master-breadcrumb .breadcrumb a:hover {
    color: var(--hm-blue);
}

.master-breadcrumb .breadcrumb-item.active {
    color: var(--hm-ink);
    font-weight: 500;
}

.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    color: #B5C1D6;
}

section#main-body {
    padding: 32px 0 64px;
    background-color: var(--hm-soft);
}

section#main-body.hm-home {
    min-height: 0;
    padding: 0;
    background-color: #fff;
}

.network-issue-alert {
    margin: 0;
}

/* ---------------------------------------------------------
   8. Cards, sidebar, list groups
   --------------------------------------------------------- */
.primary-content .card,
.sidebar .card {
    border: 1px solid var(--hm-line);
    border-radius: 16px;
    box-shadow: var(--hm-shadow-card);
}

.card > .card-header:first-child {
    border-radius: 15px 15px 0 0;
}

.card > .card-footer:last-child {
    border-radius: 0 0 15px 15px;
}

.card > .list-group:last-child {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.primary-content .card-header {
    background-color: #fff;
    border-bottom-color: var(--hm-line);
}

.primary-content .card-footer {
    background-color: var(--neutral-50);
    border-top-color: var(--hm-line);
}

.primary-content .card-title {
    font-family: var(--hm-font-display);
    font-weight: 700;
    color: var(--hm-ink);
}

.header-lined h1,
.primary-content h1 {
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Sidebar */
.sidebar .card-header {
    padding: 14px 18px;
    background: transparent;
    border-bottom: 1px solid var(--hm-line);
    font-family: var(--hm-font-display);
}

.sidebar .card-title,
.sidebar .card-sidebar .panel-title {
    color: var(--hm-ink);
    font-size: .95rem;
}

.sidebar .list-group-item {
    padding: 10px 18px;
    color: var(--hm-text);
    transition: background-color .15s, color .15s;
}

.sidebar a.list-group-item:hover,
.sidebar a.list-group-item:focus {
    background-color: var(--hm-soft);
    color: var(--hm-blue);
}

.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    background-color: var(--hm-blue-soft);
    color: var(--hm-blue);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--hm-blue);
}

.sidebar .list-group-item .badge {
    border-radius: 999px;
    background-color: var(--hm-soft);
    color: var(--hm-muted);
}

.sidebar .list-group-item.active .badge {
    background-color: #fff;
    color: var(--hm-blue);
}

.sidebar .card-footer {
    background-color: var(--neutral-50);
    border-top: 1px solid var(--hm-line);
}

/* ---------------------------------------------------------
   9. Forms, tables, alerts, labels, tabs, modals
   --------------------------------------------------------- */
.form-control,
.custom-select {
    border-color: #D5DEEC;
    color: var(--hm-text);
}

.form-control::placeholder {
    color: #97A4BA;
}

label,
.form-control-label {
    color: var(--neutral-700);
    font-weight: 500;
}

.input-group-text {
    background-color: var(--hm-soft);
    border-color: #D5DEEC;
    color: var(--hm-muted);
}

.table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--hm-line);
    background-color: var(--hm-soft);
    color: var(--neutral-600);
    font-family: var(--hm-font-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.table td,
.table th {
    border-top-color: var(--hm-line);
    vertical-align: middle;
}

.table-hover tbody tr:hover,
.table-list > tbody > tr:hover > td {
    background-color: #F8FAFD;
}

.alert {
    border-radius: 12px;
}

.alert-info {
    background-color: #EEF4FF;
    border-color: #C6D5F2;
    color: #0A2E7A;
}

.alert-success {
    background-color: #ECFDF3;
    border-color: #ABEFC6;
    color: #166534;
}

.alert-warning {
    background-color: #FFF8DB;
    border-color: #FFE58A;
    color: #6B4E00;
}

.alert-danger {
    background-color: #FFF1F2;
    border-color: #FECDD3;
    color: #9F1239;
}

.alert a:not(.btn) {
    font-weight: 600;
    text-decoration: underline;
}

.nav-tabs .nav-link {
    font-family: var(--hm-font-display);
    font-weight: 500;
    color: var(--hm-muted);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--hm-blue);
    border-color: var(--hm-line) var(--hm-line) #fff;
}

.modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(2, 10, 28, .6);
}

.modal .modal-header {
    background-color: var(--hm-soft);
    border-bottom-color: var(--hm-line);
}

.modal-title {
    font-family: var(--hm-font-display);
    font-weight: 700;
}

.popover {
    border-color: var(--hm-line);
    border-radius: 12px;
    box-shadow: 0 20px 40px -20px rgba(2, 10, 28, .45);
}

/* ---------------------------------------------------------
   10. Client area dashboard
   --------------------------------------------------------- */
.tiles {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 16px;
    box-shadow: var(--hm-shadow-card);
}

.tiles .tile {
    padding: 18px 22px 16px;
    background-color: #fff;
    border-right: 1px solid var(--hm-line);
}

.tiles .tile:hover {
    background-color: #F8FAFD;
}

.tiles .tile .stat {
    margin-top: 14px;
    color: var(--hm-ink);
    font: 700 2.4rem/1 var(--hm-font-display);
}

.tiles .tile .title {
    margin-top: 6px;
    color: var(--hm-muted);
    font: 600 .74rem/1.3 var(--hm-font-display);
    letter-spacing: .08em;
}

.tiles .tile .highlight {
    height: 3px;
    margin-top: 10px;
    border-radius: 3px;
}

.tiles .tile i {
    top: 16px;
    right: 18px;
    color: #DCE6F7;
    font-size: 40px;
}

.tiles .tile:hover i {
    color: var(--hm-blue-600);
    font-size: 46px;
}

@media (max-width: 1199.98px) {
    .tiles div:nth-child(1) > .tile,
    .tiles div:nth-child(2) > .tile {
        border-bottom: 1px solid var(--hm-line);
    }
}

.client-home-cards .card-header {
    font-family: var(--hm-font-display);
}

/* Panel header buttons (btn-default + bg-color-*): Twenty-One gives them white text,
   which would be invisible on our white .btn-default - style them explicitly. */
.client-home-cards .card-header .btn {
    padding: .3rem .7rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--rounding-sm);
    color: var(--hm-text);
}

.client-home-cards .card-header .btn:hover,
.client-home-cards .card-header .btn:focus {
    background: var(--grayscale-lifted);
    border-color: var(--grayscale-lifted);
    color: #fff;
}

.client-home-cards .list-group {
    border-top-color: var(--hm-line) !important;
    border-bottom-color: var(--hm-line) !important;
}

.client-home-cards .list-group .list-group-item {
    border-bottom-color: var(--hm-line);
}

/* ---------------------------------------------------------
   11. Login, password reset & other single-card pages
   --------------------------------------------------------- */
.primary-content .card.mw-540 {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 30px 70px -35px rgba(2, 10, 28, .45);
}

.primary-content .card.mw-540::before {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(90deg, var(--hm-yellow), var(--hm-blue-bright) 60%, var(--hm-blue));
}

.login-form .h3 {
    font-weight: 800;
    letter-spacing: -.02em;
}

.login-form .card-footer {
    background-color: var(--hm-soft);
}

/* ---------------------------------------------------------
   11b. Contact, knowledgebase & toggle switches
   --------------------------------------------------------- */
/* Forms with side labels (e.g. Contact Us): labels carry .text-right, which looks
   odd on phones where each label sits above its field */
@media (max-width: 575.98px) {
    .primary-content .form-group.row > .col-form-label.text-right {
        padding-bottom: 4px;
        text-align: left !important;
    }
}

/* Knowledgebase article excerpts: Nexus colours them with a background token (near-white) */
.primary-content .kb-article-item small {
    color: var(--hm-muted);
    line-height: 1.5;
}

/* Yes/No toggle switches (bootstrap-switch, e.g. "Join our mailing list"):
   a pill with a round knob - green when on, grey when off */
.bootstrap-switch.bootstrap-switch-wrapper {
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;
}

.bootstrap-switch.bootstrap-switch-wrapper.bootstrap-switch-focused {
    border-color: var(--hm-blue-600);
    box-shadow: 0 0 0 3px rgba(31, 95, 214, .2);
}

.bootstrap-switch.bootstrap-switch-wrapper .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-wrapper .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-wrapper .bootstrap-switch-label {
    padding: 6px 12px;
    border-radius: 0;
    font-family: var(--hm-font-display);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
    background: var(--success);
    color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off {
    background: var(--neutral-200);
    color: var(--neutral-600);
}

.bootstrap-switch .bootstrap-switch-label {
    position: relative;
}

.bootstrap-switch .bootstrap-switch-label::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 50%;
    width: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(2, 10, 28, .3);
    transform: translateX(-50%);
}

/* ---------------------------------------------------------
   12. Footer
   --------------------------------------------------------- */
footer.footer.hm-footer {
    padding: 64px 0 28px;
    background-color: var(--hm-navy-950);
    color: #9FB3D9;
    font-size: .92rem;
}

.hm-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 32px;
}

.hm-footer-logo img {
    display: block;
    width: auto;
    height: 44px;
    margin-bottom: 14px;
}

.hm-footer-brand p {
    margin: 0 0 8px;
}

.hm-footer-company {
    color: #6E7FA6;
    font-size: .82rem;
}

.hm-footer-social {
    display: flex;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.hm-footer-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    color: #DCE6FA;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}

.hm-footer-social a:hover {
    background: var(--hm-yellow);
    border-color: var(--hm-yellow);
    color: #111827;
}

.hm-footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hm-footer-col h4 {
    margin: 0 0 6px;
    color: #fff;
    font: 700 .95rem var(--hm-font-display);
}

footer.hm-footer a {
    color: #9FB3D9;
    text-decoration: none;
}

footer.hm-footer a:hover {
    color: #fff;
}

.hm-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .84rem;
}

footer.hm-footer .copyright {
    margin: 0;
    color: #9FB3D9;
    font-size: .84rem;
    text-align: left;
}

.hm-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-footer-extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.hm-footer-extras .list-inline-item {
    margin: 0;
}

footer.hm-footer .hm-footer-extras .btn-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 9px;
    color: #DCE6FA;
}

footer.hm-footer .hm-footer-extras .btn-icon:hover {
    background: var(--hm-yellow);
    color: #111827;
}

footer.hm-footer .btn-outline-light {
    border-color: rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #DCE6FA;
    font-family: var(--hm-font-body);
    font-weight: 500;
}

footer.hm-footer .btn-outline-light:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* ---------------------------------------------------------
   13. Floating contact widget
   --------------------------------------------------------- */
.hm-has-contact #contact-us-btn,
.hm-has-contact #contact-us-panel {
    /* hide the older injected "Contact Us" button - this theme ships its own */
    display: none !important;
}

.hm-contact {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.hm-contact-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--hm-blue-600), var(--hm-blue));
    color: #fff;
    font: 600 .95rem/1 var(--hm-font-display);
    cursor: pointer;
    box-shadow: 0 14px 34px -10px rgba(0, 74, 173, .75), inset 0 0 0 1px rgba(255, 255, 255, .12);
    transition: transform .2s var(--hm-ease);
}

.hm-contact-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: hmRing 2.6s infinite;
}

.hm-contact.is-open .hm-contact-btn::before {
    animation: none;
}

.hm-contact-btn:hover {
    transform: translateY(-2px);
}

.hm-contact-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 204, 0, .8), 0 14px 34px -10px rgba(0, 74, 173, .75);
}

.hm-contact-btn i {
    font-size: 1.15rem;
}

.hm-contact .hm-ico-close,
.hm-contact.is-open .hm-ico-open {
    display: none;
}

.hm-contact.is-open .hm-ico-close {
    display: inline-block;
}

.hm-contact-panel {
    display: none;
    width: 300px;
    max-width: calc(100vw - 40px);
    padding: 14px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 20px;
    color: var(--hm-ink);
    box-shadow: 0 30px 70px -20px rgba(2, 10, 28, .55);
    transform-origin: bottom right;
}

.hm-contact.is-open .hm-contact-panel {
    display: block;
    animation: hmPop .22s var(--hm-ease);
}

.hm-contact-head {
    margin-bottom: 6px;
    padding: 4px 8px 12px;
    border-bottom: 1px solid var(--hm-line);
}

.hm-contact-head b {
    display: block;
    font: 700 1.05rem/1.3 var(--hm-font-display);
}

.hm-contact-head span {
    color: var(--hm-muted);
    font-size: .84rem;
}

a.hm-cp-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 8px;
    border-radius: 12px;
    color: var(--hm-ink);
    text-decoration: none;
    transition: background .15s;
}

a.hm-cp-link:hover {
    background: var(--hm-soft);
    color: var(--hm-ink);
    text-decoration: none;
}

.hm-cp-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.2rem;
}

.hm-cp-wa .hm-cp-ico { background: #E7F9EF; color: #1DAA52; }
.hm-cp-tg .hm-cp-ico { background: #E4F3FC; color: #229ED9; }
.hm-cp-fb .hm-cp-ico { background: #E8F0FE; color: #1877F2; }
.hm-cp-mail .hm-cp-ico { background: #FDECEA; color: #EA4335; }
.hm-cp-ticket .hm-cp-ico { background: #FFF4C2; color: #9A7000; }

a.hm-cp-link b {
    display: block;
    font: 600 .95rem/1.3 var(--hm-font-display);
}

a.hm-cp-link small {
    display: block;
    color: var(--hm-muted);
    font-size: .8rem;
}

@keyframes hmRing {
    0% { box-shadow: 0 0 0 0 rgba(47, 123, 255, .5); }
    70% { box-shadow: 0 0 0 14px rgba(47, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 123, 255, 0); }
}

@keyframes hmPop {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   14. Homepage
   --------------------------------------------------------- */
.hm-home .container {
    position: relative;
}

/* Hero */
.hm-hero {
    position: relative;
    overflow: hidden;
    padding: 76px 0 132px;
    background: var(--hm-navy-950);
    color: #fff;
}

.hm-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 520px at 85% 8%, rgba(47, 123, 255, .38), transparent 60%),
        radial-gradient(700px 420px at 8% 95%, rgba(255, 204, 0, .11), transparent 60%),
        radial-gradient(760px 420px at 50% 125%, rgba(0, 74, 173, .65), transparent 70%),
        linear-gradient(180deg, #020A1C 0%, #05163D 100%);
}

.hm-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 65% 30%, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 70% at 65% 30%, #000 25%, transparent 78%);
}

.hm-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.hm-eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 7px 15px 7px 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: #C9D6F0;
    font: 500 .84rem/1.3 var(--hm-font-display);
}

.hm-pulse {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hm-green);
    animation: hmPulse 2s infinite;
}

@keyframes hmPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 211, 122, .6); }
    70% { box-shadow: 0 0 0 10px rgba(34, 211, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 211, 122, 0); }
}

.hm-hero h1 {
    margin: 0 0 22px;
    color: #fff;
    font: 800 clamp(2.3rem, 3.5vw, 2.9rem)/1.1 var(--hm-font-display);
    letter-spacing: -.025em;
}

.hm-text-yellow {
    color: var(--hm-yellow);
}

.hm-text-grad {
    background: linear-gradient(90deg, #3BE8FF, #B45CFF 55%, #FF5CA8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hm-hero-lead {
    max-width: 36em;
    margin: 0 0 30px;
    color: #B9C7E3;
    font-size: 1.12rem;
    line-height: 1.65;
}

.hm-hero-lead strong {
    color: #fff;
}

.hm-hero-ctas,
.hm-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hm-hero-ctas {
    margin-bottom: 26px;
}

.hm-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    color: #C9D6F0;
    font-size: .92rem;
    list-style: none;
}

.hm-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hm-hero-points i {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(34, 211, 122, .15);
    color: var(--hm-green);
    font-size: 10px;
}

.hm-hero-media {
    position: relative;
}

.hm-browser {
    position: relative;
    overflow: hidden;
    background: #0B1A3F;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(47, 123, 255, .15), 0 0 90px -20px rgba(47, 123, 255, .55);
    transform: perspective(1600px) rotateY(-7deg) rotateX(2deg);
    transition: transform .7s var(--hm-ease);
}

.hm-hero-media:hover .hm-browser {
    transform: perspective(1600px) rotateY(0) rotateX(0);
}

.hm-browser img {
    display: block;
    width: 100%;
    height: auto;
}

.hm-browser-bar,
.hm-terminal-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hm-browser-dots {
    display: inline-flex;
    gap: 6px;
}

.hm-browser-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF5F57;
}

.hm-browser-dots i:nth-child(2) { background: #FEBC2E; }
.hm-browser-dots i:nth-child(3) { background: #28C840; }

.hm-browser-url {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 280px;
    margin: 0 auto;
    padding: 5px 10px;
    background: rgba(0, 0, 0, .28);
    border-radius: 8px;
    color: #9FB3D9;
    font: 500 .78rem/1.2 var(--hm-font-body);
}

.hm-browser-url i {
    color: var(--hm-green);
    font-size: .7rem;
}

.hm-hero-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(8, 22, 58, .86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    color: #fff;
    font: 600 .84rem/1 var(--hm-font-display);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
    animation: hmFloat 6s ease-in-out infinite;
}

.hm-hero-badge i {
    color: var(--hm-cyan);
}

.hm-hb-1 { left: -28px; bottom: 16%; }
.hm-hb-2 { right: 12%; top: -20px; animation-delay: -3s; }
.hm-hb-2 i { color: var(--hm-yellow); }

.hm-price-sticker {
    position: absolute;
    right: -20px;
    bottom: -34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--hm-yellow);
    color: #111827;
    box-shadow: 0 20px 40px -12px rgba(255, 204, 0, .6), inset 0 0 0 4px rgba(255, 255, 255, .5);
    transform: rotate(-12deg);
    animation: hmSticker 5s ease-in-out infinite;
}

.hm-price-sticker b {
    font: 800 1.95rem/1 var(--hm-font-display);
    letter-spacing: -.02em;
}

.hm-price-sticker small {
    font: 700 .7rem/1.25 var(--hm-font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
}

@keyframes hmFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes hmSticker {
    0%, 100% { transform: rotate(-12deg) scale(1); }
    50% { transform: rotate(-7deg) scale(1.05); }
}

/* Service paths */
.hm-paths {
    position: relative;
    z-index: 2;
    margin-top: -70px;
}

.hm-paths-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

a.hm-path-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 22px 20px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 18px;
    color: var(--hm-ink);
    text-decoration: none;
    box-shadow: 0 22px 50px -26px rgba(2, 10, 28, .5);
    transition: transform .25s var(--hm-ease), box-shadow .25s, border-color .25s;
}

a.hm-path-card:hover {
    border-color: var(--primary-200);
    color: var(--hm-ink);
    text-decoration: none;
    box-shadow: 0 28px 60px -26px rgba(2, 10, 28, .6);
    transform: translateY(-4px);
}

.hm-path-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border-radius: 13px;
    font-size: 1.25rem;
}

.hm-pi-blue { background: var(--hm-blue-soft); color: var(--hm-blue-600); }
.hm-pi-purple { background: #F1E9FF; color: #7C3AED; }
.hm-pi-cyan { background: #E0F8FC; color: #0E7490; }
.hm-pi-yellow { background: #FFF4C2; color: #9A7000; }

.hm-path-title {
    font: 700 1.08rem/1.3 var(--hm-font-display);
}

.hm-path-desc {
    color: var(--hm-muted);
    font-size: .92rem;
    line-height: 1.45;
}

.hm-path-price {
    margin-top: auto;
    padding-top: 10px;
    color: var(--hm-blue);
    font: 700 1.12rem/1.2 var(--hm-font-display);
}

.hm-path-price small {
    color: var(--hm-muted);
    font-size: .74em;
    font-weight: 600;
}

.hm-path-go {
    position: absolute;
    top: 22px;
    right: 20px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--hm-soft);
    color: var(--hm-blue);
    font-size: .85rem;
    transition: background .2s, color .2s, transform .2s;
}

a.hm-path-card:hover .hm-path-go {
    background: var(--hm-blue);
    color: #fff;
    transform: translateX(3px);
}

/* Trust strip */
.hm-trust {
    padding: 40px 0 34px;
}

.hm-trust-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-trust-list li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #33415C;
    font: 600 .95rem/1.2 var(--hm-font-display);
    white-space: nowrap;
}

.hm-trust-list i {
    color: var(--hm-blue-600);
    font-size: 1.05rem;
}

/* Sections */
.hm-section {
    position: relative;
    padding: 96px 0;
}

.hm-section-tight {
    padding: 24px 0 72px;
}

.hm-section-soft {
    background: var(--hm-soft);
}

#hm-web-hosting {
    background: linear-gradient(180deg, var(--hm-soft) 0%, #fff 70%);
}

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

.hm-eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--hm-blue-soft);
    color: var(--hm-blue-600);
    font: 700 .76rem/1.3 var(--hm-font-display);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.hm-eyebrow-neon {
    background: rgba(180, 92, 255, .14);
    border: 1px solid rgba(180, 92, 255, .38);
    color: #DDBDFF;
}

.hm-eyebrow-cyan {
    background: rgba(59, 232, 255, .1);
    border: 1px solid rgba(59, 232, 255, .32);
    color: #A5F3FC;
}

.hm-section h2 {
    margin: 0 0 16px;
    color: var(--hm-ink);
    font: 800 clamp(1.95rem, 3.6vw, 2.9rem)/1.13 var(--hm-font-display);
    letter-spacing: -.022em;
    text-wrap: balance;
}

.hm-section-sub {
    margin: 0;
    color: var(--hm-muted);
    font-size: 1.08rem;
    text-wrap: pretty;
}

/* Domain box */
.hm-domain-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 22px 34px;
    align-items: center;
    overflow: hidden;
    padding: 34px;
    border-radius: 24px;
    background: linear-gradient(135deg, #004AAD 0%, #0A2E7A 55%, #05163D 100%);
    color: #fff;
    box-shadow: 0 30px 70px -40px rgba(0, 74, 173, .9);
}

.hm-domain-box::after {
    content: "";
    position: absolute;
    top: -160px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 204, 0, .22), transparent 65%);
    pointer-events: none;
}

.hm-domain-box > * {
    position: relative;
    z-index: 1;
}

.hm-domain-copy {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.hm-domain-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 204, 0, .16);
    color: var(--hm-yellow);
    font-size: 1.4rem;
}

.hm-section .hm-domain-copy h2 {
    margin: 0 0 6px;
    color: #fff;
    font: 800 1.45rem/1.25 var(--hm-font-display);
    letter-spacing: -.01em;
}

.hm-domain-copy p {
    margin: 0;
    color: #BFD1F5;
    font-size: .95rem;
}

.hm-domain-form {
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: 16px;
    background: #fff;
    transition: box-shadow .2s;
}

.hm-domain-form:focus-within {
    box-shadow: 0 0 0 4px rgba(255, 204, 0, .55);
}

.hm-domain-input {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0 12px;
    color: #6B7A93;
}

.hm-domain-input input {
    flex: 1;
    min-width: 0;
    padding: 12px 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--hm-ink);
    font: 500 1.05rem var(--hm-font-body);
}

body #frmDomainHomepage.hm-domain-box .hm-btn {
    flex: none;
    border-radius: 12px !important;
}

body #frmDomainHomepage #btnTransfer.hm-btn-ghost {
    background: var(--hm-blue-soft);
    border-color: var(--hm-blue-soft);
    color: var(--hm-blue);
}

body #frmDomainHomepage #btnTransfer.hm-btn-ghost:hover,
body #frmDomainHomepage #btnTransfer.hm-btn-ghost:focus {
    background: #D6E4FF;
    border-color: #D6E4FF;
    color: var(--hm-blue);
    box-shadow: none;
}

.hm-domain-box .domainchecker-homepage-captcha,
.hm-domain-box > .row,
.hm-domain-box > .text-center {
    grid-column: 1 / -1;
}

.hm-tld-list {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-tld-list li {
    padding: 8px 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    color: #DCE6FA;
    font-size: .9rem;
}

.hm-tld-list b {
    margin-right: 5px;
    color: var(--hm-yellow);
    font-family: var(--hm-font-display);
}

a.hm-domain-all {
    grid-column: 1 / -1;
    justify-self: start;
    color: #DCE6FA;
    font: 600 .9rem var(--hm-font-display);
}

a.hm-domain-all:hover {
    color: #fff;
}

/* Value callout */
.hm-value-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    max-width: 840px;
    margin: 0 auto 40px;
    padding: 22px 28px;
    background: #fff;
    border: 1.5px dashed var(--primary-200);
    border-radius: 22px;
    box-shadow: var(--hm-shadow-card);
}

.hm-vc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.hm-vc-item b {
    color: var(--hm-ink);
    font: 800 1.75rem/1.1 var(--hm-font-display);
}

.hm-vc-item span {
    margin-top: 4px;
    color: var(--hm-muted);
    font-size: .85rem;
}

.hm-vc-main b {
    color: var(--hm-blue);
    font-size: 2.4rem;
}

.hm-vc-eq {
    color: #9AA9C3;
    font: 700 1.5rem/1 var(--hm-font-display);
}

.hm-vc-note {
    flex-basis: 100%;
    margin: 4px 0 0;
    color: var(--hm-muted);
    font-size: .95rem;
    text-align: center;
}

/* Web hosting plans */
.hm-plans-scroller {
    margin: 0 -15px;
    padding: 18px 15px 10px;
}

.hm-plans {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 20px 22px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 20px;
    box-shadow: var(--hm-shadow-card);
    transition: transform .25s var(--hm-ease), box-shadow .25s;
}

.hm-plan:hover {
    box-shadow: var(--hm-shadow-card-hover);
    transform: translateY(-5px);
}

.hm-plan-hot { border: 2px solid var(--hm-yellow); box-shadow: 0 20px 50px -26px rgba(255, 184, 0, .75); }
.hm-plan-featured { border: 2px solid var(--hm-blue-bright); box-shadow: 0 20px 50px -26px rgba(47, 123, 255, .7); }
.hm-plan-gift { border: 2px solid #22C55E; box-shadow: 0 20px 50px -26px rgba(34, 197, 94, .6); }

.hm-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    padding: 5px 12px;
    border-radius: 999px;
    font: 700 .68rem/1.3 var(--hm-font-display);
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
}

.hm-badge-yellow { background: var(--hm-yellow); color: #1A1300; }
.hm-badge-blue { background: var(--hm-blue); color: #fff; }
.hm-badge-green { background: #15803D; color: #fff; }

.hm-section .hm-plan-name {
    margin: 0;
    color: var(--hm-ink);
    font: 700 1.25rem/1.2 var(--hm-font-display);
}

.hm-plan-for {
    min-height: 2.7em;
    margin: 4px 0 12px;
    color: var(--hm-muted);
    font-size: .86rem;
    line-height: 1.35;
}

.hm-plan-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0;
    color: var(--hm-ink);
    font-family: var(--hm-font-display);
}

.hm-plan-price .hm-cur {
    align-self: flex-start;
    margin-top: .4em;
    font-size: 1.05rem;
    font-weight: 700;
}

.hm-plan-price .hm-amt {
    font-size: 2.65rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}

.hm-plan-price .hm-per {
    margin-left: 3px;
    color: var(--hm-muted);
    font-size: .9rem;
    font-weight: 600;
}

.hm-plan-eq {
    margin: 6px 0 16px;
    color: #16803C;
    font-size: .86rem;
    font-weight: 600;
}

.hm-plan .hm-btn {
    padding: .8em 1em;
    font-size: .95rem;
    white-space: nowrap;
}

.hm-plan-specs {
    display: grid;
    gap: 9px;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px dashed var(--hm-line);
    color: #3A4A66;
    font-size: .88rem;
    list-style: none;
}

.hm-plan-specs li {
    position: relative;
    padding-left: 23px;
    line-height: 1.45;
}

.hm-plan-specs li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 15px;
    height: 15px;
    background: #22C55E;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hm-plan-specs b {
    color: var(--hm-ink);
}

.hm-plan-specs .hm-spec-gift {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #ECFDF3;
    color: #166534;
    font-size: .82rem;
    font-weight: 600;
}

.hm-plan-specs .hm-spec-gift::before {
    display: none;
}

.hm-plan-specs .hm-spec-gift i {
    color: #16A34A;
}

.hm-swipe-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 6px 0 0;
    color: var(--hm-muted);
    font-size: .85rem;
}

/* Included features */
.hm-included {
    margin-top: 64px;
    padding: 40px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 24px;
    box-shadow: var(--hm-shadow-card);
}

.hm-section .hm-included-title {
    margin: 0 0 30px;
    color: var(--hm-ink);
    font: 800 1.5rem/1.3 var(--hm-font-display);
    text-align: center;
}

.hm-included-title span {
    color: var(--hm-blue);
}

.hm-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-feature-grid li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.hm-fi {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #E3EDFF, #F3F7FF);
    color: var(--hm-blue);
    font-size: 1.1rem;
}

.hm-feature-grid b {
    display: block;
    margin-bottom: 2px;
    color: var(--hm-ink);
    font: 700 1rem/1.3 var(--hm-font-display);
}

.hm-feature-grid p {
    margin: 0;
    color: var(--hm-muted);
    font-size: .88rem;
    line-height: 1.5;
}

/* Game hosting */
.hm-section-game {
    overflow: hidden;
    background: var(--hm-game-950);
    color: #fff;
}

.hm-game-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(820px 520px at 12% 0%, rgba(180, 92, 255, .3), transparent 60%),
        radial-gradient(720px 520px at 92% 18%, rgba(47, 123, 255, .3), transparent 60%),
        radial-gradient(1000px 420px at 50% 100%, rgba(59, 232, 255, .14), transparent 70%),
        linear-gradient(180deg, var(--hm-game-950), var(--hm-game-900));
}

.hm-game-bg::after {
    content: "";
    position: absolute;
    right: -30%;
    bottom: -2px;
    left: -30%;
    height: 420px;
    background-image:
        linear-gradient(rgba(180, 92, 255, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 92, 255, .5) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: .5;
    transform: perspective(420px) rotateX(62deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
    mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}

.hm-game-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.hm-section-game h2,
.hm-section-navy h2 {
    color: #fff;
}

.hm-section-game h2 .hm-text-grad {
    display: block;
    margin-top: 10px;
    font-size: .62em;
    line-height: 1.25;
}

.hm-section-game .hm-section-sub,
.hm-section-navy .hm-section-sub {
    color: #A9B8D6;
}

.hm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 28px;
    padding: 0;
    list-style: none;
}

.hm-chips li {
    padding: 6px 13px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: #C9D6F0;
    font-size: .86rem;
    font-weight: 500;
}

.hm-chips .hm-chip-hot {
    background: rgba(255, 204, 0, .14);
    border-color: rgba(255, 204, 0, .4);
    color: var(--hm-yellow);
    font-weight: 600;
}

.hm-gplans {
    display: grid;
    gap: 14px;
}

a.hm-gplan {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    color: #fff;
    text-decoration: none;
    transition: transform .2s var(--hm-ease), border-color .2s, background .2s;
}

a.hm-gplan:hover {
    background: rgba(180, 92, 255, .07);
    border-color: rgba(180, 92, 255, .55);
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px);
}

a.hm-gplan.hm-gplan-featured {
    background: rgba(255, 204, 0, .06);
    border: 2px solid rgba(255, 204, 0, .7);
    box-shadow: 0 20px 50px -26px rgba(255, 204, 0, .55);
}

.hm-gplan .hm-plan-badge {
    top: -11px;
    left: auto;
    right: 18px;
    transform: none;
}

.hm-gplan-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
}

.hm-gplan-head b {
    font: 700 1.12rem/1.3 var(--hm-font-display);
}

.hm-gplan-price {
    color: var(--hm-yellow);
    font: 800 1.45rem/1.1 var(--hm-font-display);
}

.hm-gplan-price small,
.hm-vps-price small {
    margin-left: 2px;
    color: #8EA0C5;
    font: 600 .8rem var(--hm-font-body);
}

.hm-gplan-for {
    color: #A9B8D6;
    font-size: .88rem;
}

.hm-gplan-specs,
.hm-vps-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.hm-gplan-specs span {
    padding: 5px 10px;
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
    color: #DCE6FA;
    font-size: .8rem;
}

.hm-gplans-note,
.hm-vps-common {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 0;
    padding: 14px 18px;
    background: rgba(34, 211, 122, .08);
    border: 1px solid rgba(34, 211, 122, .25);
    border-radius: 14px;
    color: #BBF7D0;
    font-size: .86rem;
}

.hm-gplans-note i,
.hm-vps-common i {
    margin-top: 2px;
    color: var(--hm-green);
}

/* VPS */
.hm-section-navy {
    overflow: hidden;
    background:
        radial-gradient(800px 520px at 100% 0%, rgba(59, 232, 255, .13), transparent 60%),
        radial-gradient(700px 500px at 0% 100%, rgba(0, 74, 173, .45), transparent 65%),
        linear-gradient(180deg, var(--hm-navy-900), var(--hm-navy-950));
    color: #fff;
}

.hm-vps-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.hm-vps-copy .hm-section-sub {
    margin-bottom: 26px;
}

.hm-terminal {
    overflow: hidden;
    background: #030915;
    border: 1px solid rgba(59, 232, 255, .25);
    border-radius: 16px;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 50px -20px rgba(59, 232, 255, .4);
}

.hm-terminal-bar {
    color: #7F91B8;
    font: 500 .78rem var(--hm-font-mono);
}

.hm-terminal-body {
    margin: 0;
    padding: 18px 20px;
    overflow-x: auto;
    background: transparent;
    border: 0;
    color: #DCE6FA;
    font: 500 .86rem/1.8 var(--hm-font-mono);
    white-space: pre;
}

.hm-t-prompt { color: var(--hm-green); }
.hm-t-dim { color: #7F91B8; }
.hm-t-cyan { color: var(--hm-cyan); }
.hm-t-green { color: var(--hm-green); font-weight: 700; }

.hm-t-cursor {
    display: inline-block;
    width: 9px;
    height: 1.1em;
    background: #DCE6FA;
    vertical-align: -3px;
    animation: hmBlink 1s steps(1) infinite;
}

@keyframes hmBlink {
    50% { opacity: 0; }
}

.hm-vps-plans {
    display: grid;
    gap: 16px;
}

a.hm-vps-plan {
    display: grid;
    gap: 12px;
    padding: 22px 24px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    color: #fff;
    text-decoration: none;
    transition: border-color .2s, transform .2s var(--hm-ease), background .2s;
}

a.hm-vps-plan:hover {
    background: rgba(59, 232, 255, .05);
    border-color: rgba(59, 232, 255, .5);
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px);
}

.hm-vps-plan-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.hm-vps-plan-head b {
    font: 700 1.2rem/1.2 var(--hm-font-display);
}

.hm-vps-price {
    font: 800 1.6rem/1 var(--hm-font-display);
}

.hm-vps-specs {
    gap: 8px 18px;
    margin: 0;
    color: #C9D6F0;
    font-size: .87rem;
}

.hm-vps-specs b {
    color: var(--hm-cyan);
}

/* Why us */
.hm-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-why-card {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 20px;
    box-shadow: var(--hm-shadow-card);
}

.hm-why-ico {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--hm-blue-600), var(--hm-blue));
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 12px 24px -12px rgba(0, 74, 173, .7);
}

.hm-section .hm-why-card h3 {
    margin: 0 0 8px;
    color: var(--hm-ink);
    font: 700 1.12rem/1.3 var(--hm-font-display);
}

.hm-why-card p {
    margin: 0;
    color: var(--hm-muted);
    font-size: .93rem;
}

/* Product groups (automatic) */
.hm-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

a.hm-group-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 18px;
    color: var(--hm-ink);
    text-decoration: none;
    box-shadow: var(--hm-shadow-card);
    transition: transform .2s var(--hm-ease), border-color .2s, box-shadow .2s;
}

a.hm-group-card:hover {
    border-color: var(--primary-200);
    color: var(--hm-ink);
    text-decoration: none;
    box-shadow: var(--hm-shadow-card-hover);
    transform: translateY(-3px);
}

.hm-group-name {
    font: 700 1.08rem/1.3 var(--hm-font-display);
}

.hm-group-tagline {
    color: var(--hm-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.hm-group-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    color: var(--hm-blue);
    font: 600 .9rem var(--hm-font-display);
}

.hm-group-cta i {
    font-size: .8rem;
    transition: transform .2s;
}

a.hm-group-card:hover .hm-group-cta i {
    transform: translateX(3px);
}

/* Help & account */
.hm-help-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
}

.hm-section .hm-help-title {
    margin: 0 0 18px;
    color: var(--hm-ink);
    font: 700 1.35rem/1.3 var(--hm-font-display);
    letter-spacing: -.01em;
}

.hm-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.hm-action-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 10px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 16px;
    color: var(--hm-text);
    font: 600 .86rem/1.3 var(--hm-font-display);
    text-align: center;
    text-decoration: none;
    transition: transform .2s var(--hm-ease), border-color .2s, box-shadow .2s, color .2s;
}

.hm-action-grid a i {
    color: var(--hm-blue-600);
    font-size: 1.8rem;
}

.hm-action-grid a:hover {
    border-color: var(--primary-200);
    color: var(--hm-blue);
    text-decoration: none;
    box-shadow: var(--hm-shadow-card-hover);
    transform: translateY(-3px);
}

/* News */
.hm-news-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 20px;
    margin-bottom: 18px;
}

.hm-news-head .hm-help-title {
    margin: 0;
}

a.hm-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 .92rem var(--hm-font-display);
}

.hm-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

a.hm-news-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 18px;
    color: var(--hm-text);
    text-decoration: none;
    transition: transform .2s var(--hm-ease), border-color .2s, box-shadow .2s;
}

a.hm-news-card:hover {
    border-color: var(--primary-200);
    color: var(--hm-text);
    text-decoration: none;
    box-shadow: var(--hm-shadow-card-hover);
    transform: translateY(-3px);
}

.hm-news-card time {
    color: var(--hm-blue-600);
    font: 600 .8rem var(--hm-font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hm-section .hm-news-card h3 {
    margin: 0;
    color: var(--hm-ink);
    font: 700 1.05rem/1.35 var(--hm-font-display);
}

.hm-news-card p {
    margin: 0;
    color: var(--hm-muted);
    font-size: .9rem;
}

/* Final call to action */
.hm-final {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: var(--hm-blue);
    color: #fff;
    text-align: center;
}

.hm-final-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 420px at 18% 0%, rgba(255, 204, 0, .26), transparent 60%),
        radial-gradient(800px 520px at 100% 100%, rgba(59, 232, 255, .24), transparent 60%),
        linear-gradient(135deg, #004AAD, #05163D);
}

.hm-final-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
}

.hm-final-inner {
    max-width: 860px;
}

.hm-final-logo {
    display: block;
    width: auto;
    height: 56px;
    margin: 0 auto 26px;
}

.hm-final h2 {
    margin: 0 0 14px;
    color: #fff;
    font: 800 clamp(2rem, 4.2vw, 3.2rem)/1.1 var(--hm-font-display);
    letter-spacing: -.02em;
}

.hm-final p {
    max-width: 40em;
    margin: 0 auto 30px;
    color: #CBDAF7;
    font-size: 1.1rem;
}

.hm-final-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.hm-final-contacts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.hm-final-contacts a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #DCE6FA;
    font-weight: 500;
    text-decoration: none;
}

.hm-final-contacts a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ---------------------------------------------------------
   15. Responsive
   --------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .hm-plans-scroller {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .hm-plans-scroller::-webkit-scrollbar {
        display: none;
    }

    .hm-plans {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(238px, 1fr);
    }

    .hm-plan {
        scroll-snap-align: start;
        scroll-margin-left: 15px;
    }

    .hm-swipe-hint {
        display: flex;
    }

    .hm-hb-1 {
        left: -12px;
    }
}

@media (max-width: 1080px) {
    .hm-hero-grid {
        gap: 40px;
    }

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

    .hm-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hm-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .hm-hero {
        padding: 56px 0 120px;
    }

    .hm-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hm-hero-media {
        width: 100%;
        max-width: 660px;
        margin: 8px auto 0;
    }

    .hm-browser,
    .hm-hero-media:hover .hm-browser {
        transform: none;
    }

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

    .hm-domain-box {
        grid-template-columns: minmax(0, 1fr);
    }

    .hm-game-grid,
    .hm-vps-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

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

    .hm-help-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

@media (max-width: 767.98px) {
    .hm-section {
        padding: 72px 0;
    }

    .hm-section-tight {
        padding: 16px 0 56px;
    }

    .hm-section-head {
        margin-bottom: 36px;
    }

    .hm-section-sub {
        font-size: 1rem;
    }

    .hm-promobar {
        font-size: .8rem;
    }

    .hm-hero {
        padding: 40px 0 104px;
    }

    .hm-hero h1 {
        font-size: clamp(2rem, 8.6vw, 2.6rem);
    }

    .hm-hero-lead {
        font-size: 1rem;
    }

    .hm-hero-ctas .hm-btn {
        flex: 1 1 100%;
    }

    .hm-hero-points {
        gap: 8px 16px;
        font-size: .86rem;
    }

    .hm-hb-1 { left: 8px; bottom: -18px; }
    .hm-hb-2 { top: -18px; right: auto; left: 8px; }

    .hm-hero-badge {
        padding: 8px 11px;
        font-size: .76rem;
    }

    .hm-price-sticker {
        right: -4px;
        bottom: -40px;
        width: 94px;
        height: 94px;
    }

    .hm-price-sticker b { font-size: 1.5rem; }
    .hm-price-sticker small { font-size: .6rem; }

    .hm-paths {
        margin-top: -64px;
    }

    .hm-paths-grid {
        gap: 12px;
    }

    a.hm-path-card {
        padding: 16px;
        border-radius: 16px;
    }

    .hm-path-icon { width: 40px; height: 40px; margin-bottom: 6px; font-size: 1.1rem; }
    .hm-path-go { top: 16px; right: 14px; width: 30px; height: 30px; }
    .hm-path-title { font-size: 1rem; }
    .hm-path-desc { font-size: .84rem; }
    .hm-path-price { font-size: 1rem; }

    .hm-trust {
        padding: 30px 0 22px;
    }

    .hm-trust-list {
        gap: 12px 22px;
    }

    .hm-trust-list li {
        font-size: .88rem;
    }

    .hm-domain-box {
        padding: 26px 20px;
    }

    .hm-value-callout {
        gap: 8px 14px;
        padding: 18px 16px;
    }

    .hm-vc-item b { font-size: 1.35rem; }
    .hm-vc-main b { font-size: 1.8rem; }
    .hm-vc-eq { font-size: 1.1rem; }

    .hm-plans {
        grid-auto-columns: 80%;
    }

    .hm-included {
        margin-top: 48px;
        padding: 28px 20px;
    }

    .hm-feature-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .hm-terminal-body {
        padding: 16px;
        font-size: .74rem;
    }

    .hm-why-grid,
    .hm-news-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hm-final {
        padding: 76px 0;
    }

    .hm-final-ctas .hm-btn {
        flex: 1 1 100%;
    }

    .hm-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    footer.footer.hm-footer {
        padding-bottom: 96px;
    }

    .hm-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .hm-contact {
        right: 14px;
        bottom: 14px;
    }

    .hm-contact-btn {
        justify-content: center;
        width: 56px;
        height: 56px;
        padding: 0;
    }

    .hm-contact-btn > span {
        display: none;
    }

    .hm-contact-btn i {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .hm-domain-form {
        flex-direction: column;
    }

    .hm-domain-form .hm-btn {
        width: 100%;
    }

    .hm-domain-input input {
        padding: 14px 0;
    }
}

@media (max-width: 380px) {
    .hm-paths-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------
   16. Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hm-theme *,
    .hm-theme *::before,
    .hm-theme *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .hm-browser {
        transform: none;
    }
}