.hdv2-web-hosting-new {
    --whnew-ink: #111827;
    --whnew-muted: #5d6678;
    --whnew-line: #e3e8f1;
    --whnew-soft: #f5f7fb;
    --whnew-blue: #145ee8;
    --whnew-blue-dark: #0d3fa5;
    --whnew-green: #159b68;
    color: var(--whnew-ink);
    background: #fff;
    overflow-x: hidden;
}

.hdv2-web-hosting-new *,
.hdv2-web-hosting-new *::before,
.hdv2-web-hosting-new *::after {
    box-sizing: border-box;
}

.hdv2-web-hosting-new a {
    text-decoration: none;
}

.hdv2-web-hosting-new svg {
    display: block;
}

.hdv2-web-hosting-new .hdv2-home__container {
    width: min(1240px, calc(100% - 40px));
}

.hdv2-whnew-hero {
    position: relative;
    overflow: hidden;
    padding: 42px 0 76px;
    border-bottom: 1px solid var(--whnew-line);
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.hdv2-whnew-hero::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(#b8c7e5 .7px, transparent .7px);
    background-size: 24px 24px;
    opacity: .38;
    mask-image: linear-gradient(90deg, transparent 0, #000 35%, #000 65%, transparent 100%);
    content: "";
    pointer-events: none;
}

.hdv2-whnew-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(90% 80% at 0% 100%, hsl(252 83% 55% / 0.1) 0%, transparent 50%),
        linear-gradient(180deg, hsl(0 0% 100% / 0) 45%, #fbfcff 100%);
}

.hdv2-whnew-hero__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
    gap: 78px;
    align-items: center;
}

.hdv2-whnew-hero h1 {
    max-width: 700px;
    margin: 0;
    color: var(--whnew-ink);
    font-size: clamp(1.75rem, 2.8vw, 2.35rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.hdv2-whnew-hero__lead {
    max-width: 620px;
    margin: 24px 0 0;
    color: var(--whnew-muted);
    font-size: 18px;
    line-height: 1.75;
}

.hdv2-whnew-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.hdv2-whnew-button {
    display: inline-flex;
    min-height: 48px;
    padding: 0 20px;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 750;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.hdv2-whnew-button:hover {
    transform: translateY(-2px);
}

.hdv2-whnew-button svg {
    width: 18px;
    height: 18px;
}

.hdv2-whnew-button--primary {
    color: #fff;
    background: #111827;
    box-shadow: 0 10px 25px rgba(17, 24, 39, .18);
}

.hdv2-whnew-button--primary:hover {
    color: #fff;
    background: #000;
}

.hdv2-whnew-button--ghost {
    color: var(--whnew-ink);
    border-color: #d9e0eb;
    background: #fff;
}

.hdv2-whnew-button--ghost:hover {
    color: var(--whnew-blue);
    border-color: #9eb9ed;
}

.hdv2-whnew-hero__proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 25px;
    padding: 27px 0 0;
    margin: 31px 0 0;
    border-top: 1px solid var(--whnew-line);
    list-style: none;
}

.hdv2-whnew-hero__proof li {
    display: flex;
    min-width: 0;
    gap: 10px;
    align-items: flex-start;
    color: var(--whnew-muted);
    font-size: 12px;
    line-height: 1.45;
}

.hdv2-whnew-hero__proof svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--whnew-green);
}

.hdv2-whnew-hero__proof span,
.hdv2-whnew-hero__proof strong {
    display: block;
}

.hdv2-whnew-hero__proof strong {
    margin-bottom: 2px;
    color: var(--whnew-ink);
    font-size: 13px;
}

.hdv2-whnew-hero__visual {
    position: relative;
    min-height: 420px;
}

.hdv2-whnew-hero__media {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    overflow: visible;
    aspect-ratio: 1 / 1;
    margin: 0;
    border: 0;
    background: transparent;
    transform: perspective(1200px) translateY(-50%) rotateY(-5deg) rotateX(2deg);
    transform-origin: right center;
}

.hdv2-whnew-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

.hdv2-whnew-console__bar {
    display: flex;
    height: 47px;
    padding: 0 16px;
    gap: 7px;
    align-items: center;
    border-bottom: 1px solid #e1e7f0;
    background: #f8f9fc;
}

.hdv2-whnew-console__bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d6dce7;
}

.hdv2-whnew-console__bar span {
    padding: 6px 34px;
    margin: 0 auto;
    border: 1px solid #e0e5ee;
    border-radius: 6px;
    color: #8993a5;
    background: #fff;
    font-size: 10px;
}

.hdv2-whnew-console__body {
    display: grid;
    height: calc(100% - 47px);
    grid-template-columns: 62px 1fr;
}

.hdv2-whnew-console__sidebar {
    display: flex;
    padding-top: 28px;
    gap: 18px;
    align-items: center;
    flex-direction: column;
    border-right: 1px solid #edf0f5;
    background: #fbfcfe;
}

.hdv2-whnew-console__sidebar i {
    width: 22px;
    height: 6px;
    border-radius: 4px;
    background: #dfe5ef;
}

.hdv2-whnew-console__sidebar i:first-child {
    height: 22px;
    background: #dce8ff;
}

.hdv2-whnew-console__main {
    padding: 40px 35px;
}

.hdv2-whnew-console__status {
    display: flex;
    gap: 9px;
    align-items: center;
    color: #273247;
    font-size: 13px;
}

.hdv2-whnew-console__status span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #26ad77;
    box-shadow: 0 0 0 5px rgba(38, 173, 119, .12);
}

.hdv2-whnew-console__metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
    margin-top: 30px;
}

.hdv2-whnew-console__metrics span {
    padding: 18px;
    border: 1px solid #e7ebf2;
    border-radius: 11px;
}

.hdv2-whnew-console__metrics small,
.hdv2-whnew-console__metrics strong {
    display: block;
}

.hdv2-whnew-console__metrics small {
    color: #8a93a4;
    font-size: 10px;
}

.hdv2-whnew-console__metrics strong {
    margin-top: 4px;
    color: #1b2638;
    font-size: 22px;
}

.hdv2-whnew-console__chart {
    display: flex;
    height: 115px;
    padding: 18px 20px 0;
    gap: 11px;
    align-items: flex-end;
    margin-top: 15px;
    border-radius: 11px;
    background: #f3f6fb;
}

.hdv2-whnew-console__chart i {
    width: 12.5%;
    border-radius: 4px 4px 0 0;
    background: #a9c4f6;
}

.hdv2-whnew-console__chart i:nth-child(1) { height: 34%; }
.hdv2-whnew-console__chart i:nth-child(2) { height: 51%; }
.hdv2-whnew-console__chart i:nth-child(3) { height: 43%; }
.hdv2-whnew-console__chart i:nth-child(4) { height: 68%; }
.hdv2-whnew-console__chart i:nth-child(5) { height: 59%; }
.hdv2-whnew-console__chart i:nth-child(6) { height: 82%; }
.hdv2-whnew-console__chart i:nth-child(7) { height: 74%; }
.hdv2-whnew-console__chart i:nth-child(8) { height: 96%; background: var(--whnew-blue); }

.hdv2-whnew-float {
    position: absolute;
    display: flex;
    min-height: 45px;
    padding: 0 14px;
    gap: 8px;
    align-items: center;
    border: 1px solid #dce3ee;
    border-radius: 10px;
    color: #33405a;
    background: #fff;
    box-shadow: 0 13px 30px rgba(41, 59, 89, .14);
    font-size: 12px;
    font-weight: 750;
}

.hdv2-whnew-float svg {
    width: 19px;
    height: 19px;
}

.hdv2-whnew-float--ssl {
    right: -18px;
    bottom: 40px;
    color: #137d58;
}

.hdv2-whnew-float--speed {
    top: 0;
    left: -10px;
    color: var(--whnew-blue);
}

.hdv2-whnew-section-head {
    max-width: 750px;
    margin: 0 auto 42px;
    text-align: center;
}

.hdv2-whnew-section-head h2 {
    margin: 0;
    color: var(--whnew-ink);
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.13;
    letter-spacing: -.035em;
}

.hdv2-whnew-section-head p {
    margin: 14px 0 0;
    color: var(--whnew-muted);
    font-size: 16px;
    line-height: 1.75;
}

.hdv2-whnew-section-head--left {
    max-width: 670px;
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new {
    --whnew-ink: #f3f5f8;
    --whnew-muted: #aab2c0;
    --whnew-line: #303541;
    --whnew-soft: #1c1f25;
    --whnew-blue: #6d9ef5;
    --whnew-blue-dark: #4e80dd;
    background: #17191e;
}

:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-hero,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-pricing,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-web-hosting-compare,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-how,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-related {
    background: #17191e;
}

:root[data-hdv2-theme="dark"] .hdv2-whnew-hero::after {
    background:
        radial-gradient(90% 80% at 0% 100%, hsl(252 83% 55% / 0.14) 0%, transparent 50%),
        linear-gradient(180deg, hsl(0 0% 0% / 0) 45%, var(--hdv2-home-bg, #17191e) 100%);
}

:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-float,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-button--ghost,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-home-plan,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-platform__grid article,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-advantages__list article,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-info__feature,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-info__grid article,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-related__grid > a {
    color: var(--whnew-ink);
    border-color: var(--whnew-line);
    background: #22252c;
}

:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-platform__grid article:first-child,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-home-plan--featured {
    background: #202b40;
}

:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-console__bar,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-console__sidebar,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-console__chart,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-web-hosting-compare__table thead th {
    border-color: var(--whnew-line);
    background: #1d2026;
}

:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-console__bar span,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-console__metrics span {
    border-color: var(--whnew-line);
    color: var(--whnew-muted);
    background: #252830;
}

:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-console__status,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-console__metrics strong,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-button--ghost {
    color: var(--whnew-ink);
}

:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-whnew-notice__inner {
    border-color: #344158;
    background: #1d2738;
}

:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-web-hosting-compare__wrap {
    border-color: var(--whnew-line);
    box-shadow: none;
}

:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-web-hosting-compare__table th,
:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-web-hosting-compare__table td {
    color: var(--whnew-muted);
    border-color: var(--whnew-line);
    background: #202329;
}

:root[data-hdv2-theme="dark"] .hdv2-web-hosting-new .hdv2-web-hosting-compare__table .hdv2-web-hosting-compare__col--featured {
    background: #222e43;
}

@media (max-width: 1020px) {
    .hdv2-whnew-hero {
        padding: 1.35rem 0 1.75rem;
    }

    .hdv2-whnew-hero__layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .hdv2-whnew-hero__copy {
        display: contents;
        max-width: none;
    }

    .hdv2-whnew-hero__copy > .hdv2-landing-hero__breadcrumb {
        order: 0;
        margin-bottom: 0;
    }

    .hdv2-whnew-hero h1 {
        order: 1;
        max-width: 780px;
    }

    .hdv2-whnew-hero__lead {
        order: 2;
        max-width: 780px;
        margin-top: 16px;
    }

    .hdv2-whnew-hero__visual {
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-self: center;
        width: min(640px, 100%);
        min-height: 0;
        margin: 0 auto;
        overflow: visible;
    }

    .hdv2-whnew-hero__media {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        display: block;
        width: min(100%, 24rem);
        max-width: 24rem;
        margin: 0 auto;
        aspect-ratio: auto;
        transform: none;
        transform-origin: center center;
    }

    .hdv2-whnew-hero__media img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
        transform: none;
        object-fit: contain;
        object-position: center;
    }

    .hdv2-whnew-hero__actions {
        order: 4;
        margin-top: 8px;
    }

    .hdv2-whnew-float {
        display: none;
    }
}

@media (max-width: 640px) {
    .hdv2-web-hosting-new .hdv2-home__container {
        width: min(100% - 28px, 1240px);
    }

    .hdv2-whnew-hero {
        padding: 1.25rem 0 1.5rem;
    }

    .hdv2-whnew-hero h1 {
        font-size: clamp(1.55rem, 6.5vw, 1.95rem);
    }

    .hdv2-whnew-hero__lead {
        font-size: 16px;
    }

    .hdv2-whnew-hero__actions,
    .hdv2-whnew-hero__actions a {
        width: 100%;
    }

    .hdv2-whnew-hero__proof {
        grid-template-columns: 1fr;
    }

    .hdv2-whnew-hero__media {
        width: min(100%, 20rem);
        max-width: 20rem;
    }

    .hdv2-whnew-console__main {
        padding: 26px 18px;
    }

    .hdv2-whnew-console__sidebar {
        display: none;
    }

    .hdv2-whnew-console__body {
        grid-template-columns: 1fr;
    }

    .hdv2-whnew-console__chart {
        height: 85px;
    }
}