:root {
    --hc-bg: #070b14;
    --hc-bg-soft: #0d1322;
    --hc-panel: #121a2b;
    --hc-panel-2: #19243a;
    --hc-border: rgba(120, 146, 189, 0.28);
    --hc-text: #e8efff;
    --hc-text-soft: #9eafcf;
    --hc-accent: #4da3ff;
    --hc-accent-2: #7a68ff;
    --hc-z-header: 1030;
}

.hc-navbar.sticky-top {
    z-index: var(--hc-z-header);
    top: 0;
}

body {
    background: radial-gradient(circle at 0% 0%, #121c33 0%, var(--hc-bg) 45%) fixed;
    color: var(--hc-text);
}

/* Global heading rhythm — match dark template */
body h1,
body h2,
body h3,
body .title {
    color: var(--hc-text);
}

body h4,
body h5 {
    color: var(--hc-text-soft);
}

#wrapper {
    color: var(--hc-text);
}

.header {
    background: rgba(8, 13, 24, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hc-border);
}

.header .header-top {
    background: transparent;
    border-bottom: 1px solid var(--hc-border);
    color: var(--hc-text-soft);
    padding: 10px 0;
}

.header .header-top a {
    color: var(--hc-text);
}

.header .navbar {
    background: transparent !important;
    padding: 16px 0;
}

/* Header-1 hard reset against legacy Hostcloud navbar geometry */
.hc-header .hc-navbar {
    min-height: 0 !important;
    line-height: normal !important;
    /* Replace flat gray/navy slab with blended dark chrome */
    background: linear-gradient(
        180deg,
        rgba(13, 19, 34, 0.92) 0%,
        rgba(16, 23, 40, 0.9) 100%
    ) !important;
    border: 1px solid rgba(120, 146, 189, 0.2);
    border-left: 0;
    border-right: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(0, 0, 0, 0.25);
    overflow: visible !important;
}

.hc-header .hc-navbar .navbar-brand {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: 0 0 0 26px !important;
    padding: 0 12px 0 0 !important;
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    overflow: visible !important;
    z-index: 5;
}

.hc-header .hc-navbar .navbar-brand svg {
    display: none !important;
}

.hc-header .hc-navbar .navbar-brand img {
    display: block;
    width: auto !important;
    max-width: 300px;
    max-height: 52px !important;
    object-fit: contain;
}

.hc-header .hc-navbar .navbar-collapse {
    margin-left: auto;
    overflow: visible !important;
}

.hc-header .hc-navbar .navbar-toggler {
    margin-left: auto;
}

.hc-header {
    position: relative;
    z-index: 2500;
}

/* Dark navbar: visible toggler icon */
.header .navbar-dark .navbar-toggler {
    border-color: var(--hc-border);
}
.header .navbar-dark .navbar-toggler-icon {
    filter: invert(1) brightness(1.2);
}

.header .navbar .nav-item > a {
    color: var(--hc-text) !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 10px 14px !important;
    border-radius: 10px;
}

.header .navbar .nav-item > a:hover,
.header .navbar .nav-item.show > a {
    background: rgba(77, 163, 255, 0.14);
}

.header .dropdown-menu {
    background: var(--hc-panel);
    border: 1px solid var(--hc-border);
    border-radius: 14px;
    padding: 10px;
}

.hc-header .hc-navbar .dropdown-menu {
    z-index: 4000;
    min-width: 240px;
    margin-top: 8px;
    background: #111a2d !important;
    border: 1px solid rgba(120, 146, 189, 0.34) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

.hc-header .hc-navbar .dropdown-menu.show {
    display: block;
}

.header .dropdown-menu a,
.hc-header .hc-navbar .dropdown-menu a {
    color: #e8efff !important;
    border-radius: 8px;
    padding: 9px 11px;
    display: block;
    line-height: 1.45 !important;
    text-transform: none !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.header .dropdown-menu a:hover {
    background: rgba(77, 163, 255, 0.18) !important;
    color: #fff !important;
}

/* Desktop dropdown behavior and readability */
@media (min-width: 992px) {
    .hc-header .hc-navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }
    .hc-header .hc-navbar .nav-item > .dropdown-menu {
        top: calc(100% - 2px);
        left: 0;
    }
}

/* Dropdown should never be clipped by hero/slider below */
.hc-header,
.hc-header .hc-navbar,
.hc-header .hc-navbar .navbar-collapse,
.hc-header .hc-navbar .nav-item {
    overflow: visible !important;
}

.hc-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    margin-right: 14px;
}

.hc-btn-primary,
.hc-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hc-btn-primary {
    color: #fff;
    background: linear-gradient(120deg, var(--hc-accent), var(--hc-accent-2));
}

.hc-btn-ghost {
    color: var(--hc-text);
    border: 1px solid var(--hc-border);
    background: rgba(255, 255, 255, 0.03);
}

.shopping-cart {
    background: var(--hc-panel);
    border: 1px solid var(--hc-border);
    color: var(--hc-text) !important;
    border-radius: 10px;
    padding: 9px 12px;
}

.shopping-cart small {
    background: var(--hc-accent);
    color: #fff;
}

/* Basket in nav: prevent legacy absolute 75x68 cart block */
.hc-header .hc-nav-actions .shopping-cart {
    position: relative !important;
    top: 0 !important;
    right: auto !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 38px !important;
    padding: 0 !important;
    font-size: 1rem !important;
    text-align: center;
    flex: 0 0 auto;
    display: inline-block !important;
    margin-left: 2px;
    vertical-align: middle;
    background: rgba(77, 163, 255, 0.14) !important;
    border-color: rgba(77, 163, 255, 0.45) !important;
}

.hc-header .hc-nav-actions .shopping-cart i {
    line-height: 38px;
    color: #f3f7ff !important;
    font-size: 15px;
    opacity: 1 !important;
}

.hc-header .hc-navbar .nav.navbar-nav {
    margin-right: 14px;
}

.hc-header .hc-nav-actions .shopping-cart small {
    position: absolute;
    top: -6px;
    right: -6px;
    left: auto;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

/* Hero + infra: kill any light “gutter” between slider and next section */
section.page-head.index {
    background-color: #070b14 !important;
    background-image: none !important;
    overflow-x: clip;
}

section.page-head.index .page-slider {
    background-color: transparent !important;
}

section.page-head.index .page-slider .owl-stage-outer,
section.page-head.index .page-slider .owl-stage,
section.page-head.index .page-slider .owl-item {
    background-color: transparent !important;
}

/* --- Hero → infra: soften hard cut (diagonal ::before ends flat at slide bottom) --- */
section.page-head.index .page-slider {
    position: relative;
    z-index: 1;
}

section.page-head.index .page-slider .item {
    position: relative;
}

section.page-head.index .page-slider .item img.background {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.page-head.index .page-slider .item .slider-container {
    position: absolute;
    inset: 0;
    z-index: 1;
}

section.page-head.index .page-slider .item .slider-container::before {
    z-index: 0;
}

/* Scrim under copy only: fades diagonal + photo into page canvas (#070b14) */
section.page-head.index .page-slider .item .slider-container::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 42%;
    background: linear-gradient(
        to bottom,
        rgba(7, 11, 20, 0) 0%,
        rgba(7, 11, 20, 0.25) 35%,
        rgba(7, 11, 20, 0.75) 72%,
        #070b14 100%
    );
    z-index: 1;
    pointer-events: none;
}

section.page-head.index .page-slider .item .slider-container .slider-content {
    z-index: 2;
}

/*
 * Infrastructure strip: style.css uses var(--slider-bottom) + cloud PNG on .title.
 * Cards used rgba(255,…,0.04) — on a light parent that reads as white; use opaque panels.
 */
section.page-head.index .slider-bottom {
    position: relative;
    z-index: 2;
    /* Pull up into hero fade so there’s no “straight cut” between slide and strip */
    margin: -52px 12px 0;
    padding-top: 56px;
    background-color: #0f1628 !important;
    border: 1px solid rgba(120, 146, 189, 0.22);
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0;
    backdrop-filter: blur(12px);
    color: #e8efff !important;
    /* Vertical handoff from #070b14 + horizontal panel depth */
    background-image:
        linear-gradient(180deg, rgba(7, 11, 20, 0.97) 0%, rgba(15, 22, 40, 0.55) 42%, transparent 72%),
        linear-gradient(92deg, #0a0e1a, #121a2b) !important;
    box-shadow: 0 -20px 48px rgba(7, 11, 20, 0.65);
    overflow: visible;
}

/* Bottom blend tail: avoid hard cut under infra strip */
section.page-head.index .slider-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -28px;
    height: 34px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(10, 14, 26, 0.82) 0%,
        rgba(10, 14, 26, 0.38) 52%,
        rgba(7, 11, 20, 0) 100%
    );
    z-index: 1;
}

section.page-head.index .slider-bottom .row,
section.page-head.index .hc-infra-strip__row {
    background: transparent !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

section.page-head.index .slider-bottom [class*="col-"] {
    background: transparent !important;
}

section.page-head.index .slider-bottom .title {
    background: transparent !important;
    background-image: none !important;
    padding: 1.35rem 1.25rem 1.35rem 1.5rem !important;
    border-right: 1px solid rgba(120, 146, 189, 0.2);
    display: flex;
    align-items: center;
    min-height: 100%;
}

section.page-head.index .slider-bottom .item {
    border-left: 0 !important;
    padding: 10px 8px;
    display: flex;
    align-items: stretch;
}

section.page-head.index .slider-bottom .item:last-child {
    padding-right: 12px;
}

section.page-head.index .slider-bottom .item .item-content {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    height: auto !important;
    min-height: 92px;
    padding: 1rem 1.1rem !important;
    margin: 0;
    background-color: #141f33 !important;
    background-image: none !important;
    border: 1px solid rgba(120, 146, 189, 0.35) !important;
    border-radius: 14px;
    color: #e8efff !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

section.page-head.index .slider-bottom .item .item-content:hover {
    border-color: rgba(77, 163, 255, 0.55) !important;
    background-color: #182544 !important;
    transform: translateY(-2px);
}

section.page-head.index .slider-bottom .item .item-content .icon {
    float: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 14px 0 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    border-radius: 12px;
    color: #b9d7ff !important;
    background: linear-gradient(145deg, rgba(77, 163, 255, 0.18), rgba(122, 104, 255, 0.12)) !important;
    border: 1px solid rgba(77, 163, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

section.page-head.index .slider-bottom .item .item-content:hover .icon {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.35);
}

section.page-head.index .slider-bottom .item-content .clear {
    display: none !important;
}

.page-head.index .background {
    object-fit: cover;
    object-position: center;
    filter: brightness(0.75) saturate(1.05);
}

.page-head.index .slider-content h2 {
    color: var(--hc-text);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.page-head.index .slider-content h4 {
    color: var(--hc-text-soft);
    font-weight: 500;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.page-head.index .item-image img {
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    border: 1px solid var(--hc-border);
    background: var(--hc-panel);
    filter: saturate(0.95) contrast(1.02);
}

/* Hero layout: keep text readable and place visual more to the right */
section.page-head.index .page-slider .item .slider-container .slider-content .container {
    max-width: 1160px;
    gap: 20px;
}

section.page-head.index .page-slider .item .slider-container .slider-content .container > div:first-child {
    max-width: 470px;
}

section.page-head.index .page-slider .item .slider-container .slider-content .container .item-image {
    width: 52%;
    justify-content: flex-end;
}

section.page-head.index .page-slider .item .slider-container .slider-content .container .item-image img {
    width: min(560px, 48vw);
    height: auto !important;
    max-height: 360px;
    transform: translateX(34px);
}

section.page-head.index .slider-bottom .title h4 {
    color: #f2f6ff !important;
    font-weight: 800;
    letter-spacing: 0.04em;
    opacity: 1 !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
    margin: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    text-transform: uppercase;
}

section.page-head.index .slider-bottom .item .item-content .text {
    float: none !important;
    display: block;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding: 0 !important;
    color: #e8efff !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    section.page-head.index .slider-bottom .title {
        border-right: 0;
        border-bottom: 1px solid rgba(120, 146, 189, 0.2);
        justify-content: center;
        text-align: center;
    }

    section.page-head.index .slider-bottom .item {
        padding: 6px 12px 12px;
    }

    section.page-head.index .page-slider .item .slider-container .slider-content .container .item-image img {
        transform: none;
    }
}

/* Hero “Details” CTA — single pill, FA5 arrow (replaces boxed legacy icon) */
.page-head.index .slider-content a.detail-button.hc-hero-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    margin: 22px 0 !important;
    padding: 11px 22px 11px 14px !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 10px 32px rgba(77, 163, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.page-head.index .slider-content a.detail-button.hc-hero-cta .icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.page-head.index .slider-content a.detail-button.hc-hero-cta .icon i {
    font-size: 14px;
    line-height: 1;
}

.page-head.index .slider-content a.detail-button.hc-hero-cta .text {
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 800;
}

.page-head.detail {
    background-color: var(--hc-bg-soft) !important;
    /* Product/category headers: ignore old inline purple image background and keep unified dark canvas */
    background-image: linear-gradient(135deg, #0a1020 0%, #121a2b 52%, #0d1425 100%) !important;
    background-blend-mode: normal;
    border-top: 1px solid rgba(120, 146, 189, 0.2);
    border-bottom: 1px solid rgba(120, 146, 189, 0.2);
}

.page-head.detail::before {
    background: linear-gradient(
        180deg,
        rgba(7, 11, 20, 0.18) 0%,
        rgba(7, 11, 20, 0.66) 100%
    ) !important;
    opacity: 1 !important;
}

.page-head.detail .title,
.page-head.detail .desc,
.page-head.detail .breadcrumbs,
.page-head.detail .breadcrumbs a {
    color: var(--hc-text);
}

.page-head.detail .breadcrumbs {
    opacity: 0.9;
}

/* Product header visuals: make mixed-source images sit on same theme surface */
.page-head.detail .float-left img,
.page-head.detail .float-right img {
    background: linear-gradient(145deg, rgba(77, 163, 255, 0.12), rgba(122, 104, 255, 0.08)) !important;
    border: 1px solid rgba(120, 146, 189, 0.35);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

.page-head.detail .float-right img {
    filter: saturate(1.08) contrast(1.04) brightness(1.06);
}

.about-us .title,
.top-sellers .title,
.services .title,
.domain-form .title {
    color: var(--hc-text);
}

.domain-form .desc,
.about-us p {
    color: var(--hc-text-soft);
}

.domain-form input[type="text"] {
    background: var(--hc-bg-soft);
    border: 1px solid var(--hc-border);
    color: var(--hc-text);
    border-radius: 10px;
}

/* Legacy light “cloud” strips from style.css — keep domain + services on dark canvas */
section.domain-form {
    background: var(--hc-bg-soft) !important;
}

section.domain-form::before,
section.domain-form::after {
    display: none !important;
}

section.services {
    background-color: var(--hc-bg-soft) !important;
    background-image: none !important;
}

section.services .services-slider {
    color: var(--hc-text-soft);
}

section.services .services-slider .item h3.services-title {
    color: var(--hc-text);
}

section.why-choose-us {
    background: var(--hc-bg-soft) !important;
    background-image: none !important;
    color: var(--hc-text);
    margin: 0 !important;
    padding-top: 2.75rem;
}

section.why-choose-us h2.title {
    color: var(--hc-text);
}

section.why-choose-us .item .text {
    color: var(--hc-text-soft);
}

section.why-choose-us .item .text h4 {
    color: var(--hc-text);
}

.detail-button .text {
    color: inherit;
}

.header .detail-button,
.page-head .detail-button,
.packages .buy,
.domain-form button[type="submit"] {
    background: linear-gradient(120deg, var(--hc-accent), var(--hc-accent-2)) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700;
    padding: 12px 22px !important;
    box-shadow: 0 8px 24px rgba(77, 163, 255, 0.25);
}

.hc-footer-tagline {
    color: var(--hc-text-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-top: 0.75rem;
}

.packages .package,
.software-packages .item,
.why-choose-us .item,
.happy-customers .customer-item,
.blog-posts .item {
    background: var(--hc-panel);
    border: 1px solid var(--hc-border);
    border-radius: 14px;
}

.packages .package-title,
.software-packages .title,
.why-choose-us h4,
.blog-posts .title a {
    color: var(--hc-text);
}

.packages .desc,
.software-packages .desc,
.why-choose-us span,
.blog-posts .text,
.about-us p {
    color: var(--hc-text-soft);
}

.detail-button,
.buy,
button,
input[type="submit"] {
    border-radius: 10px !important;
}

.page-footer {
    background: transparent;
    border-top: 1px solid var(--hc-border);
    margin-top: 0 !important;
}

.page-footer .footer-top {
    background: #090f1d;
    color: var(--hc-text-soft);
    padding-top: 55px;
    padding-bottom: 35px;
}

.page-footer .title,
.page-footer .footer-top h4.title,
.page-footer .footer-top p,
.page-footer .footer-top a {
    color: var(--hc-text);
}

.page-footer .footer-top ul li a {
    color: var(--hc-text-soft);
}

.page-footer .footer-top ul li a:hover {
    color: var(--hc-accent);
}

.page-footer .line {
    background: linear-gradient(120deg, var(--hc-accent), var(--hc-accent-2));
}

.page-footer .social-media a {
    background: var(--hc-panel);
    border: 1px solid var(--hc-border);
    color: var(--hc-text);
    border-radius: 10px;
}

.page-footer .footer-bottom {
    background: #070b14;
    border-top: 1px solid var(--hc-border);
}

.page-footer .footer-bottom a {
    color: var(--hc-text-soft);
}

/* --- Homepage: product tabs, domain strip, sections --- */
.packages {
    padding: 3rem 0;
}

/* Beat style.css `section.packages h2.title { color: var(--logo-background); }` (0,2,2) */
section.packages.hc-packages > .container > h2.title,
section.packages.hc-packages .container h2.title {
    color: #e8efff !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    opacity: 1 !important;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}

section.packages.hc-packages > .container > span.desc,
section.packages.hc-packages .container > span.desc {
    color: #c5d4f0 !important;
    display: block;
    margin: 0.35rem auto 1.75rem;
    max-width: 46rem;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.65;
    opacity: 1 !important;
    text-align: center;
}

.packages .title {
    color: var(--hc-text);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.packages .desc {
    color: var(--hc-text-soft);
    display: block;
    margin-bottom: 1.5rem;
    max-width: 42rem;
}

/* --- Product group / pricing cards: readable text on dark panels --- */
/* style.css uses color: var(--logo-background) on .package-group .package → dark-on-dark with site-v2 panels */
section.packages {
    background-color: var(--hc-bg-soft) !important;
    background-image: none !important;
    position: relative;
    overflow: hidden;
    margin-top: 0 !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* Homepage product strip: same top canvas as section.page-head.index (#070b14), then ease into --hc-bg-soft */
section.packages.hc-packages,
body#home section.packages.hc-packages,
body#home section.hc-packages {
    background-color: #070b14 !important;
    background-image: linear-gradient(
        180deg,
        #070b14 0%,
        #070b14 14%,
        #080d18 38%,
        var(--hc-bg-soft) 100%
    ) !important;
    padding-top: 2.25rem;
}

section.packages::before {
    display: none !important;
}

section.packages > .container {
    position: relative;
    z-index: 1;
}

/* Core may wrap index in #wrapper; custom blocks sometimes add cloud backgrounds */
body#home #wrapper {
    background-color: transparent !important;
    background-image: none !important;
}

body#home section.hc-packages h2.title,
body#home section.packages.hc-packages h2.title {
    color: #e8efff !important;
    opacity: 1 !important;
}

body#home section.hc-packages .desc,
body#home section.packages.hc-packages .desc {
    color: #c5d4f0 !important;
    opacity: 1 !important;
}

.packages .package-group .package:not(.active) {
    color: var(--hc-text) !important;
    background: var(--hc-panel) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.32) !important;
}

.packages .package-group .package:not(.active) h3.package-title {
    color: var(--hc-text) !important;
}

.packages .package-group .package:not(.active) .line {
    background: linear-gradient(90deg, var(--hc-accent), var(--hc-accent-2)) !important;
    opacity: 1 !important;
}

.packages .package-group .package:not(.active) span.price,
.packages .package-group .package:not(.active) span.price small {
    color: var(--hc-text) !important;
}

.packages .package-group .package:not(.active) .packet-features,
.packages .package-group .package:not(.active) .packet-features span {
    color: var(--hc-text-soft) !important;
}

.packages .package-group .package:not(.active) .packet-features strong {
    color: var(--hc-text) !important;
}

.packages .package-group .package:not(.active) .products_features {
    color: var(--hc-text-soft) !important;
}

.packages .package-group .package:not(.active) a.buy {
    background: linear-gradient(120deg, var(--hc-accent), var(--hc-accent-2)) !important;
    color: #fff !important;
}

.packages .package-group .package:not(.active) a.buy:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.packages .package-group .package:not(.active) .icon {
    color: var(--hc-accent) !important;
    opacity: 0.14 !important;
}

.packages .package-group .package.active {
    background: linear-gradient(145deg, rgba(77, 163, 255, 0.22) 0%, var(--hc-panel-2) 45%, #141c33 100%) !important;
    color: var(--hc-text) !important;
    border: 1px solid rgba(77, 163, 255, 0.45) !important;
    box-shadow: 0 22px 56px rgba(77, 163, 255, 0.18) !important;
}

.packages .package-group .package.active h3.package-title,
.packages .package-group .package.active span.price,
.packages .package-group .package.active span.price small {
    color: var(--hc-text) !important;
}

.packages .package-group .package.active .packet-features,
.packages .package-group .package.active .packet-features span {
    color: var(--hc-text-soft) !important;
}

.packages .package-group .package.active .packet-features strong {
    color: var(--hc-text) !important;
}

.packages .package-group .package.active .products_features {
    color: var(--hc-text-soft) !important;
}

.packages .package-group .package.active .line {
    background: rgba(255, 255, 255, 0.22) !important;
}

.packages .package-group .package.active .icon {
    color: var(--hc-text) !important;
    opacity: 0.12 !important;
}

.packages .package-group .package.active a.buy {
    background: linear-gradient(120deg, var(--hc-accent), var(--hc-accent-2)) !important;
    color: #fff !important;
}

.packages .package-group .package.active .popular {
    background: rgba(77, 163, 255, 0.35) !important;
    color: var(--hc-text) !important;
    border: 1px solid var(--hc-border);
}

/* Extra specificity for admin “custom CSS” / late stylesheets */
body#home section.hc-packages .package-group .package:not(.active),
body#home section.packages.hc-packages .package-group .package:not(.active) {
    color: #e8efff !important;
}

body#home section.hc-packages .package-group .package:not(.active) h3.package-title,
body#home section.hc-packages .package-group .package:not(.active) span.price,
body#home section.hc-packages .package-group .package:not(.active) span.price small,
body#home section.packages.hc-packages .package-group .package:not(.active) h3.package-title,
body#home section.packages.hc-packages .package-group .package:not(.active) span.price,
body#home section.packages.hc-packages .package-group .package:not(.active) span.price small {
    color: #e8efff !important;
}

body#home section.hc-packages .package-group .package:not(.active) .packet-features,
body#home section.hc-packages .package-group .package:not(.active) .packet-features span,
body#home section.packages.hc-packages .package-group .package:not(.active) .packet-features,
body#home section.packages.hc-packages .package-group .package:not(.active) .packet-features span {
    color: #9eafcf !important;
}

body#home section.hc-packages .package-group .package:not(.active) .packet-features strong,
body#home section.packages.hc-packages .package-group .package:not(.active) .packet-features strong {
    color: #e8efff !important;
}

body#home section.hc-packages .package-group .package:not(.active) .products_features,
body#home section.packages.hc-packages .package-group .package:not(.active) .products_features {
    color: #9eafcf !important;
}

body#home section.hc-packages .package-group .package:not(.active) a.buy,
body#home section.packages.hc-packages .package-group .package:not(.active) a.buy {
    background: linear-gradient(120deg, #4da3ff, #7a68ff) !important;
    color: #ffffff !important;
    border: 1px solid rgba(77, 163, 255, 0.45) !important;
    text-decoration: none !important;
}

body#home section.hc-packages .package-group .package:not(.active) a.buy:hover,
body#home section.packages.hc-packages .package-group .package:not(.active) a.buy:hover {
    color: #ffffff !important;
    filter: brightness(1.08);
}

body#home section.hc-packages .package-group .package:not(.active) a.buy.no-stock,
body#home section.packages.hc-packages .package-group .package:not(.active) a.buy.no-stock {
    background: rgba(120, 40, 40, 0.45) !important;
    border-color: rgba(255, 120, 120, 0.35) !important;
    color: #ffffff !important;
}

body#home section.hc-packages .package-group .package.active a.buy,
body#home section.packages.hc-packages .package-group .package.active a.buy {
    color: #ffffff !important;
    background: linear-gradient(120deg, #4da3ff, #7a68ff) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body#home section.hc-packages .paketline,
body#home section.packages.hc-packages .paketline {
    border: 0;
    border-top: 1px solid rgba(120, 146, 189, 0.28);
    margin: 10px 0;
    height: 0;
    background: transparent !important;
}

.packages .packages-slogan {
    color: var(--hc-text-soft);
    margin-top: 2rem;
    font-size: 0.95rem;
}

.packages .packages-slogan a {
    color: var(--hc-accent);
    font-weight: 600;
}

.packages .packages-slogan a:hover {
    color: #fff;
}

/* Tab strip: match card chrome (beats style.css pill tabs) */
.packages .tab-group .tabs .tab-button {
    background: var(--hc-panel);
    border: 1px solid var(--hc-border);
    color: var(--hc-text-soft);
    border-radius: 10px;
    padding: 10px 18px;
    margin: 4px;
    font-weight: 600;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.packages .tab-group .tabs .tab-button.tab-active,
.packages .tab-group .tabs .tab-button:hover {
    background: rgba(77, 163, 255, 0.2);
    border-color: var(--hc-accent);
    color: var(--hc-text);
}

body#home section.hc-packages .tab-group .tabs .tab-button,
body#home section.packages.hc-packages .tab-group .tabs .tab-button {
    background: var(--hc-panel) !important;
    border: 1px solid var(--hc-border) !important;
    color: var(--hc-text-soft) !important;
}

body#home section.hc-packages .tab-group .tabs .tab-button.tab-active,
body#home section.hc-packages .tab-group .tabs .tab-button:hover,
body#home section.packages.hc-packages .tab-group .tabs .tab-button.tab-active,
body#home section.packages.hc-packages .tab-group .tabs .tab-button:hover {
    background: rgba(77, 163, 255, 0.22) !important;
    border-color: var(--hc-accent) !important;
    color: #e8efff !important;
}

.packages .package {
    padding: 1.25rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.packages .package:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.packages .package .price {
    color: var(--hc-text);
}

/* Product pages (non-home too): force package copy to landing-page readable colors */
section.packages .package-group .package,
body section.packages .package-group .package {
    color: #e8efff !important;
}

section.packages .package-group .package h3.package-title,
section.packages .package-group .package span.price,
section.packages .package-group .package span.price small,
section.packages .package-group .package .products_features,
section.packages .package-group .package .products_features * {
    color: #e8efff !important;
}

section.packages .package-group .package .packet-features,
section.packages .package-group .package .packet-features span,
section.packages .package-group .package .packet-features li,
section.packages .package-group .package .packet-features p {
    color: #b8c8e6 !important;
}

section.packages .package-group .package .packet-features strong {
    color: #e8efff !important;
}

section.packages .package-group .package a.buy,
section.packages .package-group .package a.buy:hover {
    color: #ffffff !important;
}

/* --- Mid-page content block (About Us + Customer Feedback) --- */
section.about-us,
section.happy-customers {
    background-color: var(--hc-bg-soft) !important;
    background-image: none !important;
    margin: 0 !important;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
}

section.about-us::before,
section.happy-customers::before {
    display: none !important;
}

section.about-us > .container,
section.happy-customers > .container {
    position: relative;
    z-index: 1;
}

section.about-us h2.title,
section.happy-customers h3.title {
    color: var(--hc-text) !important;
}

section.about-us .line,
section.happy-customers .line {
    background: linear-gradient(120deg, var(--hc-accent), var(--hc-accent-2)) !important;
}

section.about-us p,
section.happy-customers span.desc {
    color: var(--hc-text-soft) !important;
}

section.about-us .detail-button {
    margin-top: 14px !important;
}

section.happy-customers .comments .item {
    background: linear-gradient(145deg, rgba(77, 163, 255, 0.2), rgba(122, 104, 255, 0.18)) !important;
    border: 1px solid rgba(120, 146, 189, 0.3);
    opacity: 0.65;
}

section.happy-customers .comments .item.active {
    opacity: 1;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
}

section.happy-customers .comments .item .content h4.name,
section.happy-customers .comments .item .content span.comment {
    color: #e8efff !important;
}

section.happy-customers .comments .item .content span.company {
    color: #b9d7ff !important;
}

section.happy-customers .comments .owl-dots button.owl-dot {
    background: var(--hc-accent) !important;
}

/* Keep this mid-page run as one continuous panel */
section.about-us + section.happy-customers {
    margin-top: 0 !important;
    border-top: none !important;
}

section.happy-customers + section,
section.happy-customers + footer {
    margin-top: 0 !important;
    border-top: none !important;
}

/* White strip source before footer (show_brand output) */
.hc-brand-strip {
    display: none !important;
}

footer.page-footer {
    margin-top: 0 !important;
}

/* Legacy templates add vertical section margins that show white page gaps */
section.about-us,
section.happy-customers,
section.top-sellers,
section.blog-posts,
section.why-choose-us,
section.software-packages,
section.services {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.domain-form .domain-right {
    color: var(--hc-accent);
    font-weight: 600;
}

.domain-form .domain-right:hover {
    color: #fff;
}

.domain-form .bottom-desc {
    color: var(--hc-text-soft);
}

.domain-form .domain-list .item {
    background: var(--hc-panel);
    border: 1px solid var(--hc-border);
    border-radius: 10px;
    color: var(--hc-text);
}

.why-choose-us,
.happy-customers,
.blog-posts,
.top-sellers,
.software-packages {
    padding: 2.5rem 0;
}

.why-choose-us .title,
.happy-customers .title,
.blog-posts h2,
.top-sellers .title,
.software-packages .title {
    color: var(--hc-text);
}

.happy-customers .customer-item .name,
.happy-customers .customer-item .comment {
    color: var(--hc-text-soft);
}

.table-packages .table {
    color: var(--hc-text);
    background: var(--hc-panel);
    border-radius: 12px;
    overflow: hidden;
}

.table-packages .table thead th {
    background: var(--hc-bg-soft);
    border-color: var(--hc-border);
    color: var(--hc-text);
}

.table-packages .table td {
    border-color: var(--hc-border);
}

/* --- Header style 2 (Corporate / #fullwidth) --- */
#fullwidth.header.hc-header-v2 {
    background-color: var(--hc-bg) !important;
}

#fullwidth.header.hc-header-v2[style*="background-image"] {
    background-color: rgba(7, 11, 20, 0.88) !important;
    background-blend-mode: multiply;
}

#fullwidth .fullwidthhead {
    background: rgba(7, 11, 20, 0.92);
    border-bottom: 1px solid var(--hc-border);
}

#fullwidth .fullwidthhead .headbutonlar a,
#fullwidth .fullwidthhead .headbutonlar .borderedbtn {
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}

#fullwidth .fullwidthhead .headbutonlar a:hover,
#fullwidth .fullwidthhead .headbutonlar .borderedbtn:hover {
    background: rgba(77, 163, 255, 0.15);
}

#fullwidth .menu {
    background: rgba(13, 19, 34, 0.95);
    border-bottom: 1px solid var(--hc-border);
}

#fullwidth .menu .menucolor {
    opacity: 0.35;
    background: linear-gradient(90deg, var(--hc-accent), var(--hc-accent-2)) !important;
}

#fullwidth #mobsabitmenus > li > a,
#fullwidth #mobsabitmenus > li > a span {
    color: var(--hc-text) !important;
}

#fullwidth #mobsabitmenus > li > a:hover {
    background: rgba(77, 163, 255, 0.12);
    border-radius: 8px;
}

#fullwidth #sepeticon {
    background: var(--hc-panel);
    border: 1px solid var(--hc-border);
    border-radius: 10px;
    color: var(--hc-text) !important;
}

#fullwidth #sepeticon .basket-count {
    background: var(--hc-accent);
    color: #fff;
}

#fullwidth .menuAc {
    color: var(--hc-text) !important;
}

#fullwidth #mobmenu {
    background: var(--hc-bg-soft);
    border: 1px solid var(--hc-border);
}

#fullwidth #mobmenu a {
    color: var(--hc-text);
}

#fullwidth .sayfaustheader#header2 {
    background-color: var(--hc-bg-soft) !important;
    background-size: cover;
}

#fullwidth .sayfaustheader#header2 .sayfabaslik h1,
#fullwidth .sayfaustheader#header2 .sayfabaslik a {
    color: var(--hc-text);
}

/* Scroll-to-top: match accent gradient instead of flat theme cyan */
body#home a.cd-top {
    background: linear-gradient(120deg, var(--hc-accent), var(--hc-accent-2)) !important;
    border: 1px solid var(--hc-border);
    opacity: 0.85;
}

body#home a.cd-top:hover {
    opacity: 1;
}

@media (max-width: 991px) {
    .header .navbar-collapse {
        background: #0b1324;
        border: 1px solid var(--hc-border);
        border-radius: 14px;
        padding: 16px;
        margin-top: 12px;
    }

    .hc-nav-actions {
        margin-left: 0;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .packages .tab-group .tabs .tab-button {
        display: inline-block;
        margin-bottom: 8px;
    }
}