:root { --hosting-violet: #8559E6; --hosting-violet-dark: #6840c8; --hosting-lavender: #f4efff; --hosting-ink: #132d63; --hosting-card-border: #e5dcfb; --hosting-card-radius: .8rem; --hosting-card-padding: 1.25rem; }
.hosting-page { background: #fff; color: #243b66; }
.hosting-page section { padding: clamp(3.5rem, 7vw, 6.25rem) 0; }
.hosting-hero { background: linear-gradient(100deg, #fff 0%, #f5f1ff 58%, #e6f1ff 100%); overflow: hidden; padding-top: clamp(1rem, 2vw, 1.5rem) !important; }
.hosting-hero__layout { align-items: center; display: grid; gap: 2rem; grid-template-columns: minmax(0, .85fr) minmax(23rem, 1.15fr); }
.hosting-eyebrow { color: #df4b22; font-size: .77rem; font-weight: 800; letter-spacing: .04em; margin: 0 0 .45rem; text-transform: uppercase; }
.hosting-hero h1, .hosting-page h2, .hosting-page h3 { color: var(--hosting-ink); }
.hosting-hero h1 { font-size: clamp(2.25rem, 4vw, 4.3rem); line-height: 1.05; margin-bottom: 1rem; max-width: 12ch; }
.hosting-hero__lead { font-size: 1.05rem; line-height: 1.65; max-width: 39rem; }
.hosting-page .btn-main.hosting-button { align-items: center; background: var(--hosting-violet); border: 2px solid var(--hosting-violet); border-radius: .45rem; color: #fff !important; display: inline-flex; justify-content: center; line-height: 1.2; min-height: 2.9rem; text-decoration: none !important; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.hosting-page .btn-main.hosting-button:hover, .hosting-page .btn-main.hosting-button:focus-visible { background: var(--hosting-violet-dark); border-color: var(--hosting-violet-dark); color: #fff !important; transform: translateY(-1px); }
.hosting-button:focus-visible { outline: 3px solid #123f8d; outline-offset: 3px; }
.hosting-page .btn-main.hosting-button[disabled] { cursor: not-allowed; opacity: .58; transform: none; }
.hosting-icon-sprite { height: 0; overflow: hidden; position: absolute; width: 0; }
.hosting-hero__media { aspect-ratio: 1200 / 659; min-height: 0; position: relative; }
.hosting-hero__media > img { border-radius: 0; box-shadow: none; display: block; height: auto; mix-blend-mode: multiply; object-fit: contain; width: 100%; }
.hosting-hero__benefits { bottom: 1.2rem; list-style: none; margin: 0; padding: 0; position: absolute; right: -1rem; width: min(19.5rem, 80%); }
.hosting-hero__benefits li { align-items: center; background: #fff; border-radius: .6rem; box-shadow: 0 .55rem 1.2rem rgba(27, 52, 98, .13); display: grid; gap: 0 .75rem; grid-template-columns: 2.35rem 1fr; margin-top: .65rem; padding: .68rem .82rem; }
.hosting-hero__benefits span, .hosting-plan-card__icon, .hosting-info-card__icon { align-items: center; background: var(--hosting-violet); border-radius: .5rem; color: #fff; display: inline-flex; fill: none; flex: 0 0 auto; height: 2rem; justify-content: center; overflow: visible; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 2rem; }
.hosting-hero__benefits span { height: 2.35rem; width: 2.35rem; }
.hosting-hero__benefits strong { color: var(--hosting-ink); font-size: .9rem; }
.hosting-hero__benefits small { color: #587096; font-size: .75rem; grid-column: 2; line-height: 1.25; }
.hosting-domain { background: #eaf4ff; }
.hosting-domain__layout { align-items: center; display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(16rem, .9fr) minmax(22rem, 1.4fr); }
.hosting-domain h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); margin: 0 0 .25rem; }
.hosting-domain p { margin: 0; }
.whois-form { display: grid; gap: .65rem; grid-template-columns: 1fr auto; }
.whois-form input { background: #fff; border: 1px solid #c8d7ee; border-radius: .45rem; color: #243b66; min-height: 2.9rem; padding: .5rem .85rem; }
.whois-form input:focus-visible { outline: 3px solid rgba(133, 89, 230, .3); outline-offset: 2px; }
.hosting-domain__result { color: #405f8d; font-size: .96rem; font-weight: 650; grid-column: 1 / -1; }
.hosting-domain__result.is-visible { align-items: flex-start; background: #fff; border: 1px solid #c8d7ee; border-radius: .45rem; display: grid; gap: .2rem; padding: .8rem .9rem; }
.hosting-domain__result strong { color: var(--hosting-ink); }
.hosting-domain__result span { font-size: .88rem; font-weight: 600; line-height: 1.4; }
.hosting-domain__result.is-available { border-color: #75c798; color: #176b3b; }
.hosting-domain__result.is-taken { border-color: #e6a5a5; color: #9f2929; }
.hosting-domain__result.is-loading { border-color: #9bb5e6; color: #31598d; }
.hosting-domain__extensions { display: flex; flex-wrap: wrap; gap: .65rem; grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; }
.hosting-domain__extensions li { align-items: center; background: #fff; border: 1px solid #c8d7ee; border-radius: .42rem; color: #31598d; display: inline-flex; font-size: .95rem; font-weight: 800; justify-content: center; min-height: 2.7rem; padding: .45rem .95rem; }
.vps-page .hosting-plans { padding-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.vps-page .hosting-trust { padding-bottom: clamp(2.5rem, 4vw, 3.75rem); padding-top: clamp(2.5rem, 4vw, 3.75rem); }
.hosting-section-heading { margin: 0 auto clamp(2rem, 4vw, 3.25rem); max-width: 52rem; text-align: center; }
.hosting-section-heading h2 { font-size: clamp(1.85rem, 3.5vw, 3rem); line-height: 1.12; margin-bottom: .75rem; }
.hosting-section-heading p:last-child { margin: 0; }
.hosting-plan-grid, .hosting-strength-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hosting-plan-card, .hosting-info-card { border: 1px solid var(--hosting-card-border); border-radius: var(--hosting-card-radius); min-width: 0; padding: var(--hosting-card-padding); }
.hosting-plan-card { background: var(--hosting-lavender); }
.hosting-info-card { background: #fff; }
.hosting-plan-card { display: flex; flex-direction: column; }
.hosting-plan-card__heading { align-items: flex-start; display: flex; gap: .75rem; }
.hosting-plan-card__icon, .hosting-info-card__icon { box-sizing: border-box; flex: 0 0 auto; height: 2.5rem; padding: .5625rem; width: 2.5rem; }
.hosting-plan-card h3 { font-size: 1.2rem; line-height: 1.2; margin: .1rem 0 .2rem; }
.hosting-plan-card__heading p { color: #587096; font-size: .84rem; line-height: 1.35; margin: 0; }
.hosting-plan-resources { border-bottom: 1px solid #ddd1fb; border-top: 1px solid #ddd1fb; display: grid; gap: .6rem; margin: 1rem 0; padding: .75rem 0; }
.hosting-plan-resources div { align-items: baseline; display: flex; gap: .5rem; justify-content: space-between; }
.hosting-plan-resources dt { color: #425a81; font-size: .8rem; font-weight: 600; }
.hosting-plan-resources dd { color: var(--hosting-ink); font-size: .82rem; font-weight: 800; margin: 0; text-align: right; }
.hosting-plan-features { flex: 1; list-style: none; margin: 0; padding: 0; }
.hosting-plan-features li { border-bottom: 1px solid rgba(133, 89, 230, .12); color: #365172; font-size: .78rem; line-height: 1.35; padding: .3rem 0; }
.hosting-plan-features span { color: var(--hosting-violet); font-weight: 900; margin-right: .38rem; }
.hosting-plan-card__footer { margin-top: 1rem; }
.hosting-plan-price { color: var(--hosting-violet); font-size: 1.28rem; font-weight: 900; margin: 0 0 .7rem; }
.hosting-plan-price span, .hosting-plan-price small { color: #5b7193; display: block; font-size: .72rem; font-weight: 600; }
.hosting-plan-card__footer .hosting-button { width: 100%; }
.hosting-strengths { background: #edf6ff; }
.hosting-strength-grid { align-items: stretch; }
.hosting-info-card { align-items: center; display: flex; flex-direction: column; height: 100%; text-align: center; }
.hosting-info-card__icon { margin-bottom: 1.1rem; }
.hosting-info-card h3 { font-size: 1.08rem; line-height: 1.25; margin: 0 0 .2rem; }
.hosting-info-card__subtitle { color: #587096; font-size: .84rem; line-height: 1.35; margin: 0 0 .75rem; }
.hosting-info-card p:last-child { color: #365172; font-size: .84rem; line-height: 1.45; margin: 0; }
.hosting-migration { background: #fff; }
.hosting-migration__layout { align-items: center; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); }
.hosting-migration__content { min-width: 0; }
.hosting-migration h2 { font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.1; margin-bottom: .65rem; max-width: 18ch; }
.hosting-migration p:not(.hosting-eyebrow) { margin: 0; max-width: 45rem; }
.hosting-migration__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }
.hosting-migration__media { margin: 0; }
.hosting-migration__media img { display: block; height: auto; margin: 0 auto; max-width: 100%; width: 100%; }
.hosting-button--secondary { background: transparent; color: var(--hosting-violet) !important; }
.hosting-button--secondary:hover, .hosting-button--secondary:focus-visible { color: #fff !important; }
@media (max-width: 991.98px) { .hosting-hero__layout, .hosting-domain__layout, .hosting-migration__layout { grid-template-columns: 1fr; } .hosting-hero h1 { max-width: 16ch; } .hosting-hero__media { max-width: 42rem; width: 100%; } .hosting-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hosting-migration__media { max-width: 42rem; width: 100%; } }
@media (max-width: 767.98px) { .hosting-page section { padding: 3.25rem 0; } .hosting-hero { padding-top: .75rem !important; } .hosting-hero__media { aspect-ratio: auto; } .hosting-hero__benefits { position: static; right: auto; width: 100%; } .whois-form { grid-template-columns: 1fr; } .hosting-domain__extensions li { flex: 1 1 calc(33.333% - .65rem); } .hosting-plan-grid, .hosting-strength-grid { grid-template-columns: 1fr; } .hosting-migration__actions { width: 100%; } .hosting-migration__actions .hosting-button { flex: 1 1 13rem; } }