html { scroll-behavior: smooth; }
.hosting-ldp { font: 400 16px/1.55 Inter, Arial, sans-serif; color: #1a2233; overflow: clip; }
.hosting-ldp *, .hosting-ldp *::before, .hosting-ldp *::after { box-sizing: border-box; }
.hosting-ldp button, .hosting-ldp a { font: inherit; }
.hosting-ldp a { color: #1768d8; }
.hosting-ldp button { cursor: pointer; }
.hosting-ldp img { max-width: 100%; }
.hosting-container { width: min(1344px, calc(100% - 48px)); margin-inline: auto; }
.hosting-section { padding-bottom: 60px; text-align: center; }
.hosting-section h2 { font-size: 36px; line-height: 1.25; font-weight: 700; margin: 0 0 18px; }
.hosting-section h2 span { color: #296ee0; }
.hosting-section h3 { font-size: 19px; line-height: 1.3; font-weight: 700; }
.hosting-eyebrow { letter-spacing: .22em; font-size: 12px; font-weight: 600; margin: 0 0 10px; }
.hosting-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; border: 0; color: #fff !important; background: linear-gradient(80.05deg, #6648E9 -13.77%, #0BCAFF 115.49%); border-radius: 100px; min-height: 44px; min-width: 170px; padding: 9px 24px; font-weight: 600 !important; font-size: 14px !important; transition: filter .2s; }
.hosting-button:hover { filter: brightness(.92); }
.hosting-button-outline { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(80.05deg, #6648E9 -13.77%, #0BCAFF 115.49%) border-box; border: 1.5px solid transparent !important; color: #1A50EA !important; }
.hosting-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.hosting-header-inner { width: min(1524px, calc(100% - 48px)); height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hosting-brand { display: flex; align-items: center; flex: none; gap: 15px; }
.hosting-brand a { display: flex; align-items: center; }
.hosting-brand a img { width: 174px; height: auto; }
.hosting-brand-divider { height: 29px; width: 1px; }
.hosting-brand .award-tip { display: inline-flex; align-items: center; position: relative; outline-offset: 4px; }
.hosting-brand .brand-badge { width: 54px; height: 33px; }
.hosting-brand .award-tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: 340px; max-width: calc(100vw - 32px); padding: 12px 15px; border-radius: 6px; background: #182d48; color: #fff; font-size: 13px; line-height: 1.5; box-shadow: 0 6px 20px #182d4833; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; z-index: 20; }
.hosting-brand .award-tip:hover::after, .hosting-brand .award-tip:focus-visible::after { opacity: 1; visibility: visible; }
.hosting-nav { display: flex; align-items: center; gap: 44px; }
.hosting-nav > a:not(.hosting-button) { position: relative; text-decoration: none; color: #151515; font-size: 16px; font-weight: 500; line-height: 150%; padding-bottom: 4px; }
.hosting-nav > a:not(.hosting-button)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #256bdd; transform: scaleX(0); transition: transform 0.3s ease; }
.hosting-nav > a:not(.hosting-button):hover::after, .hosting-nav > a:not(.hosting-button).active::after { transform: scaleX(1); }
.hosting-nav > a:not(.hosting-button):hover, .hosting-nav > a:not(.hosting-button).active { color: #256bdd; }
.hosting-nav .hosting-button { min-width: 189px; min-height: 40px; font-size: 16px !important;font-weight: 500; line-height: 150%; padding: 6px 23px!important; }
.hosting-menu-toggle { display: none; background: none; border: 0; }
.hosting-hero { min-height: max(685px, 43.85vw); background: #f0f8ff url('/landing/hosting_new/images/banner.svg') center top / cover no-repeat; display: flex; align-items: center; position: relative; }
.hosting-hero::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0;height: clamp(40px, 0.23vw, 140px); background: linear-gradient(180deg, rgba(255,255,255,0), #fff); pointer-events: none; z-index: 1; }
.hosting-hero-inner { position: relative; z-index: 2; padding-block: 125px 90px; display: flex; flex-direction: column; align-items: flex-start; }
.hosting-hero h1 { font-size: 54px; line-height: 1.2; font-weight: 700; margin: 0 0 24px; max-width: 721px; color: #151515; animation: hosting-hero-content-in 650ms cubic-bezier(.2, .7, .2, 1) both; }
.hosting-hero h1 span { color: #23a9e9; position: relative; white-space: nowrap; }
.hosting-hero h1 .hosting-hero-title-text { position: relative; z-index: 1; background: linear-gradient(80.05deg, #1a7aea -13.77%, #0BCAFF 115.49%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hosting-hero h1 span img { position: absolute; left: 0; bottom: -8px; width: 100%; height: auto; z-index: 0; }
.hosting-hero ul { list-style: none; display: grid; gap: 8px; margin: 0 0 40px; padding: 0; max-width: 721px; font-family: Inter, sans-serif; font-size: 18px; font-weight: 400; line-height: 27px; color: #151515; }
.hosting-hero li { padding-left: 22px; position: relative; font-weight: 400; animation: hosting-hero-content-in 560ms cubic-bezier(.2, .7, .2, 1) both; }
.hosting-hero li:nth-child(1) { animation-delay: 140ms; }
.hosting-hero li:nth-child(2) { animation-delay: 230ms; }
.hosting-hero li:nth-child(3) { animation-delay: 320ms; }
.hosting-hero li:nth-child(4) { animation-delay: 410ms; }
.hosting-hero li:nth-child(5) { animation-delay: 500ms; }
/* .hosting-hero li:nth-child(2), .hosting-hero li:nth-child(5) { font-weight: 600; } */
.hosting-hero-emphasis { font-weight: 600; }
.hosting-hero li::before { content: ''; width: 8px; height: 8px; border: 2px solid #1a50ea; border-radius: 50%; position: absolute; left: 0; top: .55em; }
.hosting-actions { display: flex; gap: 20px; flex-wrap: wrap; }
.hosting-actions .hosting-button { animation: hosting-hero-content-in 560ms cubic-bezier(.2, .7, .2, 1) 620ms both; }
.hosting-actions .hosting-button:nth-child(2) { animation-delay: 730ms; }
.hosting-actions .hosting-button { width: 212px; min-height: 48px; font-size: 16px !important; font-weight: 500 !important; }
.hosting-hero-badges { position: absolute; inset: 0; max-width: 1920px; width: 100%; margin: auto; pointer-events: none; z-index: 2; }
.hosting-hero-badges img { position: absolute; width: clamp(85px, 6.5vw, 125px); height: auto; }
.hosting-hero-badge-setup { left: 54.9%; top: 40%; animation: hosting-badge-float 5.2s ease-in-out 0s infinite; }
.hosting-hero-badge-support { left: 67%; top: 59.4%; animation: hosting-badge-float 5.8s ease-in-out -1.7s infinite; }
.hosting-hero-badge-uptime { left: 78%; top: 33%; animation: hosting-badge-float 5.5s ease-in-out -3.1s infinite; }
@keyframes hosting-badge-float {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
50% { transform: translate3d(0, -10px, 0) rotate(1deg); }
}
@keyframes hosting-hero-content-in {
from { opacity: 0; transform: translate3d(0, 16px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hosting-hero h1,
.hosting-hero li,
.hosting-actions .hosting-button,
.hosting-hero-badge-setup,
.hosting-hero-badge-support,
.hosting-hero-badge-uptime { animation: none; }
}
.hosting-finder { display: flex; flex-direction: column; align-items: center; gap: 40px; padding-block: 0; position: relative; z-index: 2; margin-top: -28px; }
.hosting-finder-heading { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.hosting-finder .hosting-eyebrow { margin: 0; color: #151515; font-size: 18px; font-weight: 400; line-height: 23px; letter-spacing: 5px; }
.hosting-finder h2 { margin: 0; color: #151515; font-size: 40px; font-weight: 600; line-height: 48px; }
.hosting-finder-heading > p:last-child { margin: 0; color: #151515; font-size: 18px; font-weight: 500; line-height: 23px; }
.hosting-use-cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; text-align: left; margin: 0; }
.hosting-use-cases button { display: flex; align-items: center; gap: 20px; min-width: 0; height: 132px; background: #fff; border: 1.5px solid #d6e8fd; border-radius: 24px; padding: 24px; color: #151515; text-align: left; }
.hosting-use-cases button:hover, .hosting-use-cases button:focus-visible { border-color: #4ea8ef; box-shadow: 0 5px 18px #1768d822; }
.hosting-use-case-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 82px; height: 82px; border-radius: 50%; background: #eef6ff; }
.hosting-use-case-icon img { width: 48px; height: 48px; }
.hosting-use-cases button > span:last-child { min-width: 0; }
.hosting-use-cases strong, .hosting-use-cases small { display: block; }
.hosting-use-cases strong { font-size: 20px; font-weight: 600; line-height: 28px; }
.hosting-use-cases small { font-size: 16px; font-weight: 400; line-height: 24px; margin-top: 8px; }
.hosting-finder > .hosting-button { width: 212px; height: 48px; padding: 11px 30px; font-size: 16px !important; font-weight: 500 !important; }
/* Stagger the finder content into view, matching the hero entrance. */
.hosting-finder .hosting-eyebrow,
.hosting-finder h2,
.hosting-finder-heading > p:last-child,
.hosting-use-cases button,
.hosting-finder > .hosting-button {
animation: hosting-hero-content-in 560ms cubic-bezier(.2, .7, .2, 1) both;
}
.hosting-finder h2 { animation-delay: 100ms; }
.hosting-finder-heading > p:last-child { animation-delay: 190ms; }
.hosting-use-cases button:nth-child(1) { animation-delay: 300ms; }
.hosting-use-cases button:nth-child(2) { animation-delay: 390ms; }
.hosting-use-cases button:nth-child(3) { animation-delay: 480ms; }
.hosting-use-cases button:nth-child(4) { animation-delay: 570ms; }
.hosting-finder > .hosting-button { animation-delay: 690ms; }
@media (prefers-reduced-motion: reduce) {
.hosting-finder .hosting-eyebrow,
.hosting-finder h2,
.hosting-finder-heading > p:last-child,
.hosting-use-cases button,
.hosting-finder > .hosting-button { animation: none; }
}
#comparison { display: flex; flex-direction: column; align-items: stretch; gap: 40px; padding-top: 120px;}
#comparison h2 { margin: 0; color: #151515; font-size: 40px; font-weight: 600; line-height: 48px; }
#comparison h2 span { color: #1a50ea; }
.hosting-table-scroll { overflow-x: auto; overflow-y: hidden; border: 1.5px solid #d6e0fd; border-radius: 32px; background: #f0f7ff; text-align: left; }
#comparison.hosting-comparison-text-ready h2 { opacity: 0; transform: translate3d(0, 8px, 0); }
#comparison.hosting-comparison-text-visible h2 { animation: hosting-comparison-text-in 520ms cubic-bezier(.2, .7, .2, 1) both; }
.hosting-comparison-text-ready th,
.hosting-comparison-text-ready td { opacity: 0; transform: translate3d(0, 5px, 0); }
.hosting-comparison-text-visible th,
.hosting-comparison-text-visible td {
animation: hosting-comparison-text-in 480ms cubic-bezier(.2, .7, .2, 1) var(--comparison-text-delay, 0ms) both;
}
@keyframes hosting-comparison-text-in {
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
#comparison.hosting-comparison-text-ready h2,
.hosting-comparison-text-ready th,
.hosting-comparison-text-ready td {
opacity: 1;
transform: none;
animation: none;
}
}
.hosting-comparison { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1341px; table-layout: fixed; }
.hosting-comparison col.hosting-comparison-label { width: 210px; }
.hosting-comparison th, .hosting-comparison td { padding: 15px; }
.hosting-comparison thead th { height: 70px; padding: 16px 10px; vertical-align: middle; text-align: center; color: #fff; background: #8fc7ff; font-size: 16px; font-weight: 600; white-space: nowrap; }
.hosting-comparison thead th:first-child { background: #dae9ff; border-right: 1px solid #e8f0ff; }
.hosting-comparison thead th:nth-child(3) { background: #70b7ff; }
.hosting-comparison thead th:nth-child(4) { background: #4aa4ff; }
.hosting-comparison thead th:nth-child(5) { background: #2e95fb; }
.hosting-comparison thead th:nth-child(6) { background: #117be5; }
.hosting-comparison thead th:last-child { background: #0468ca; }
.hosting-comparison tbody tr { background: #fff; }
.hosting-comparison tbody tr:nth-child(even) { background: #f5f9ff; }
.hosting-comparison tbody tr:first-child { height: 192px; }
.hosting-comparison tbody tr:nth-child(n+2):nth-child(-n+4) { height: 72px; }
.hosting-comparison tbody tr:nth-child(5), .hosting-comparison tbody tr:nth-child(6), .hosting-comparison tbody tr:nth-child(8), .hosting-comparison tbody tr:nth-child(9), .hosting-comparison tbody tr:nth-child(11) { height: 54px; }
.hosting-comparison tbody tr:nth-child(7), .hosting-comparison tbody tr:nth-child(10) { height: 54px; }
.hosting-comparison tbody th { vertical-align: middle; border-right: 1px solid #e8f0ff; color: #012c73; font-size: 16px; font-weight: 500; line-height: 1.4; }
.hosting-comparison tbody td { vertical-align: middle; color: #151515; font-size: 14px; font-weight: 400; line-height: 1.4; }
.hosting-comparison tbody tr:first-child td { vertical-align: top; }
.hosting-comparison tbody td:nth-child(3) { background: #f0f5fe; }
.hosting-comparison tbody tr:nth-child(even) td:nth-child(3) { background: #e8f0ff; }
.hosting-comparison tbody td a { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: #1a50ea; font-size: 16px; font-weight: 500; line-height: 24px; text-decoration: none; }
.hosting-comparison tbody td a img { width: 10px; height: 6px; }
.hosting-comparison-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hosting-stars { display: inline-flex; align-items: center; gap: 5px; height: 24px; vertical-align: middle; }
.hosting-stars img { display: block; width: 19px; height: 18px; flex: none; }
.hosting-soft-band { background: linear-gradient(#f0f5fc, #fff 52%, #f0f5fc); }
.hosting-pricing-header { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(1190px, 100%); margin: 0 auto; }
.hosting-pricing-header h2 { margin: 0; color: #151515; font-size: 40px; font-weight: 600; line-height: 48px; }
.hosting-tabs-scroll { width: 100%; display: flex; justify-content: center; }
.hosting-tabs { display: flex; align-items: center; width: min(1190px, 100%); height: 68px; margin: 0; border: 1px solid #ebf0ff; border-radius: 100px; overflow-x: auto; scrollbar-width: none; }
.hosting-pricing-enter .hosting-pricing-header h2,
.hosting-pricing-enter .hosting-tabs { opacity: 0; transform: translate3d(0, 12px, 0); }
.hosting-pricing-visible .hosting-pricing-header h2,
.hosting-pricing-visible .hosting-tabs,
.hosting-pricing-visible .hosting-pricing-panel:not([hidden]) .hosting-price {
animation: hosting-pricing-enter 600ms cubic-bezier(.2, .7, .2, 1) both;
}
.hosting-pricing-visible .hosting-tabs { animation-delay: 120ms; }
.hosting-pricing-visible .hosting-pricing-panel:not([hidden]) .hosting-price:nth-child(1) { animation-delay: 260ms; }
.hosting-pricing-visible .hosting-pricing-panel:not([hidden]) .hosting-price:nth-child(2) { animation-delay: 370ms; }
.hosting-pricing-visible .hosting-pricing-panel:not([hidden]) .hosting-price:nth-child(3) { animation-delay: 480ms; }
.hosting-pricing-visible .hosting-pricing-panel:not([hidden]) .hosting-price:nth-child(4) { animation-delay: 590ms; }
.hosting-pricing-visible .hosting-pricing-panel:not([hidden]) .hosting-price:nth-child(5) { animation-delay: 700ms; }
@keyframes hosting-pricing-enter {
from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.99); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.hosting-pricing-enter .hosting-pricing-header h2,
.hosting-pricing-enter .hosting-tabs,
.hosting-pricing-visible .hosting-pricing-header h2,
.hosting-pricing-visible .hosting-tabs,
.hosting-pricing-visible .hosting-pricing-panel:not([hidden]) .hosting-price {
opacity: 1;
transform: none;
animation: none;
}
}
.hosting-tabs::-webkit-scrollbar { display: none; }
.hosting-tabs button { position: relative; flex: 1 0 0; height: 68px; min-width: 0; border: 0; background: transparent; border-radius: 100px; padding: 12px 20px; color: #151515; font-size: 16px; font-weight: 500; line-height: 1.4; text-align: center; }
.hosting-tabs button[aria-selected="true"] { background: linear-gradient(80.05deg, #eeeffd -13.77%, #e7f6fe 115.49%); color: #295ef1; font-weight: 500; }
.hosting-tab-new { position: absolute; right: 13px; top: 12px; width: 26px; height: 14px; }
.hosting-pricing-panel[hidden] { display: none; }
.hosting-prices { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 3); gap: 32px; align-items: end; width: min(1340px, 100%); margin: 0 auto; padding-top: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; text-align: center; }
.hosting-prices::-webkit-scrollbar { display: none; }
.hosting-price { display: flex; flex-direction: column; min-width: 0; min-height: 526px; padding: 20px 30px; background: #fff; border: 2px solid #dfedfd; border-radius: 32px; scroll-snap-align: start; }
.hosting-price-featured { min-height: 573px; padding: 0 1px 1px; border: 0; background: linear-gradient(80.05deg,#6648e9 -13.77%,#0bcaff 115.49%); }
.hosting-popular { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; color: #fff; font-size: 16px; line-height: 1; font-weight: 600; letter-spacing: .1em; }
.hosting-popular img { width: 29px; height: 30px; }
.hosting-price-content { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 482px; }
.hosting-price-featured .hosting-price-content { flex: 1; min-height: 526px; padding: 20px 30px; background: #fff; border-radius: 32px; }
.hosting-price-main { display: flex; flex-direction: column; gap: 0px; }
.hosting-price-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hosting-price h3 { margin: 0; color: #151515; font-size: 24px; line-height: 34px; font-weight: 600; }
.hosting-amount { display: flex; justify-content: center; align-items: center; gap: 12px; height: 32px; margin: 0; color: #295ef1; font-size: 32px; line-height: 32px; font-weight: 700; }
.hosting-amount small { color: #151515; opacity: .5; font-size: 18px; font-weight: 400; white-space: nowrap; }
.hosting-price .hosting-price-description { margin: 0; color: #151515; opacity: .8; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px;height:48px; }
.hosting-price-offer { display: flex; flex-direction: column; gap: 16px; }
.hosting-price .hosting-gift { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; margin: 0; color: #e80800; font-size: 16px; line-height: 24px; font-weight: 600; }
.hosting-gift img { width: 30px; height: 30px; flex: none; }
.hosting-price .hosting-button { width: 100%; min-height: 48px; border-radius: 100px; font-size: 16px !important; font-weight: 500 !important; }
.hosting-price-specs { display: flex; flex-direction: column; gap: 14px; }
.hosting-price-features { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.hosting-price dl div { display: flex; justify-content: space-between; align-items: center; min-height: 24px; gap: 10px; text-align: left; }
.hosting-price dt { display: flex; align-items: center; gap: 8px; color: #151515; opacity: .8; font-size: 16px; font-weight: 400; line-height: 24px; }
.hosting-price dt img { width: 14px; height: 10px; flex: none; }
.hosting-price dd { margin: 0; color: #151515; opacity: .8; font-size: 16px; font-weight: 600; line-height: 24px; text-align: right; }
.hosting-price-more { display: flex; flex-direction: column; }
.hosting-price-more dl { display: flex; flex-direction: column; gap: 14px; margin: 0 0 24px; }
.hosting-price-more dl[hidden] { display: none; }
.hosting-price-more dt::before { content: ''; flex: 0 0 14px; width: 14px; height: 10px; background: url('/landing/hosting_new/images/icon_tick_xanh.svg') center / contain no-repeat; }
.hosting-price-toggle { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 30px; padding: 0; border: 0; background: none; color: #1a50ea; font-size: 16px; line-height: 24px; font-weight: 500; cursor: pointer; }
.hosting-price-toggle img { width: 30px; height: 30px; }
.hosting-price-toggle .hosting-price-collapse, .hosting-price-toggle[aria-expanded="true"] .hosting-price-expand { display: none; }
.hosting-price-toggle[aria-expanded="true"] .hosting-price-collapse { display: inline; }
.hosting-price-note { margin: 32px 0 0; font-size: 16px; font-style: italic; line-height: 22px; }
.hosting-pricing-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; height: 18px; margin-top: 40px; }
.hosting-pricing-pagination button { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; background: none; }
.hosting-pricing-pagination button img { width: 10px; height: 10px; }
.hosting-pricing-pagination button[aria-current="true"] img { width: 18px; height: 18px; }
.hosting-offers {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
gap: 40px;
max-width: 1342px;
margin: 0 auto;
padding-bottom: 120px;
}
.hosting-offers-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
}
.hosting-offers-header h2 {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 30px;
line-height: 1.2;
text-align: center;
color: #151515;
margin: 0;
}
.hosting-offers-header p {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.5;
text-align: center;
color: #151515;
margin: 0;
}
.hosting-offer-grid {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 28px;
width: 100%;
}
.hosting-offer-card {
display: flex;
flex-direction: row;
align-items: flex-start;
width: 100%;
max-width: 658px;
height: 162px;
background: #FFFFFF;
border-radius: 16px;
box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}
.offers-motion-visible .hosting-offer-card {
animation: hosting-voucher-float 4.8s ease-in-out infinite;
will-change: transform;
}
.offers-motion-visible .hosting-offer-card:nth-child(2) {
animation-delay: 1.2s;
}
@keyframes hosting-voucher-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.offers-motion-visible .hosting-offer-card {
animation: none;
will-change: auto;
}
}
.hosting-offer-img {
width: 221px;
height: 162px;
background: url('/landing/hosting_new/images/radial.svg') left center / 100% 100% no-repeat;
display: flex;
justify-content: center;
align-items: center;
position: relative;
flex: none;
}
.hosting-offer-img img {
position: absolute;
width: 100%;
height: 146px;
object-fit: contain;
transform: scale(1.1);
}
.hosting-offer-content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding: 24px;
gap: 16px;
flex: 1;
height: 162px;
background: #EDF6FE;
border-radius: 0px 16px 16px 0px;
margin-left: -5px;
}
.hosting-offer-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.hosting-offer-text h3 {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 1.3;
color: #E80800;
margin: 0;
}
.hosting-offer-text p {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: #000000;
margin: 0;
}
.hosting-offer-text strong {
font-weight: 600;
}
.hosting-coupon {
display: flex;
flex-direction: row;
align-items: center;
padding: 0;
width: 100%;
max-width: 351px;
height: 36px;
background: #FFFFFF;
border-radius: 10px;
}
.hosting-coupon-code {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
gap: 10px;
flex: 1;
height: 36px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 14px;
color: #0050CB;
}
.hosting-coupon-btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
gap: 6px;
width: 163px;
height: 36px;
background: linear-gradient(80.05deg, #6648E9 -13.77%, #0BCAFF 115.49%);
border-radius: 10px;
border: none;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
.hosting-coupon-btn svg {
flex-shrink: 0;
}
.hosting-benefits-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
max-width: 1344px;
margin: 0 auto;
padding-top: 120px;
padding-bottom: 120px;
}
.hosting-benefits-section h2 {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 40px;
line-height: 1.2;
text-align: center;
color: #151515;
margin: 0;
/* padding-top: 120px; */
}
.hosting-benefits-section h2 span {
color: #1A50EA;
}
.hosting-benefits {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
}
.hosting-benefits-dots { display: none; }
.hosting-benefit-card {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 32px;
gap: 24px;
background: #FFFFFF;
border-radius: 24px;
transition: box-shadow 0.3s ease;
}
.hosting-benefit-card:hover {
box-shadow: 0px 0px 20px #CFE6F6;
}
#benefits.benefits-card-cycle-active .hosting-benefit-card { animation: hosting-benefit-card-cycle 6s ease-in-out infinite; }
#benefits.benefits-card-cycle-active .hosting-benefit-card:nth-child(2) { animation-delay: -5s; }
#benefits.benefits-card-cycle-active .hosting-benefit-card:nth-child(3) { animation-delay: -4s; }
#benefits.benefits-card-cycle-active .hosting-benefit-card:nth-child(4) { animation-delay: -3s; }
#benefits.benefits-card-cycle-active .hosting-benefit-card:nth-child(5) { animation-delay: -2s; }
#benefits.benefits-card-cycle-active .hosting-benefit-card:nth-child(6) { animation-delay: -1s; }
@keyframes hosting-benefit-card-cycle {
0%, 2%, 10%, 100% {
transform: translate3d(0, 0, 0);
box-shadow: none;
}
5%, 7% {
transform: translate3d(0, -10px, 0);
box-shadow: 0px 0px 20px #CFE6F6;
}
}
@media (prefers-reduced-motion: reduce) {
#benefits.benefits-card-cycle-active .hosting-benefit-card {
animation: none;
transform: none;
}
}
.hosting-benefit-icon {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 82px;
height: 82px;
background: #EEF6FF;
border-radius: 150px;
}
.hosting-benefit-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.hosting-benefit-text h3 {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 1.4;
text-align: center;
color: #151515;
margin: 0;
}
.hosting-benefit-text p {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
text-align: center;
color: #151515;
margin: 0;
}
.hosting-migration {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding: 60px 80px;
max-width: 1344px;
height: 484px;
background: url('/landing/hosting_new/images/banner_contact.svg') right center / auto 100% no-repeat, #ECF5FE;
border-radius: 32px;
margin: 0px auto 120px;
position: relative;
box-sizing: border-box;
}
.hosting-migration-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
max-width: 624px;
z-index: 2;
}
.hosting-migration-text {
display: flex;
flex-direction: column;
gap: 16px;
}
.hosting-migration-text h2 {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 40px;
line-height: 1.2;
color: #000000;
margin: 0;
}
.hosting-migration-text p {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #3B3B3B;
margin: 0;
}
.hosting-migration-list {
display: flex;
flex-direction: column;
gap: 16px;
list-style: none;
padding: 0;
margin: 0;
}
.hosting-migration-list li {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.hosting-migration-list li span {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.5;
color: #151515;
}
.hosting-migration-list li strong {
font-weight: 600;
color: #E80800;
}
.hosting-migration-btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 31px;
height: 48px;
background: linear-gradient(80.05deg, #6648E9 -13.77%, #0BCAFF 115.49%);
border-radius: 99px;
border: none;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF!important;
cursor: pointer;
}
#migration.migration-motion-ready .hosting-migration-text h2,
#migration.migration-motion-ready .hosting-migration-text p,
#migration.migration-motion-ready .hosting-migration-list li,
#migration.migration-motion-ready .hosting-migration-btn,
#migration.migration-motion-ready .hosting-migration-mobile-art,
#migration.migration-motion-ready .hosting-migration-mascot {
opacity: 0;
transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1);
}
#migration.migration-motion-ready .hosting-migration-text h2,
#migration.migration-motion-ready .hosting-migration-text p,
#migration.migration-motion-ready .hosting-migration-list li,
#migration.migration-motion-ready .hosting-migration-btn,
#migration.migration-motion-ready .hosting-migration-mobile-art { transform: translate3d(0, 12px, 0); }
#migration.migration-motion-ready .hosting-migration-text p { transition-delay: 100ms; }
#migration.migration-motion-ready .hosting-migration-list li:first-child { transition-delay: 220ms; }
#migration.migration-motion-ready .hosting-migration-list li:nth-child(2) { transition-delay: 340ms; }
#migration.migration-motion-ready .hosting-migration-btn { transition-delay: 460ms; }
#migration.migration-motion-ready .hosting-migration-mobile-art { transition-delay: 260ms; }
#migration.migration-motion-visible .hosting-migration-text h2,
#migration.migration-motion-visible .hosting-migration-text p,
#migration.migration-motion-visible .hosting-migration-list li,
#migration.migration-motion-visible .hosting-migration-btn,
#migration.migration-motion-visible .hosting-migration-mobile-art,
#migration.migration-motion-visible .hosting-migration-mascot {
opacity: 1;
transform: translate3d(0, 0, 0);
}
#migration.migration-motion-active .hosting-migration-mascot { animation: hosting-mascot-heartbeat 1.8s ease-in-out 700ms infinite; }
@keyframes hosting-mascot-heartbeat {
0%, 100% { transform: scale(1); }
12% { transform: scale(1.045); }
24% { transform: scale(1); }
36% { transform: scale(1.06); }
52% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
#migration.migration-motion-ready .hosting-migration-text h2,
#migration.migration-motion-ready .hosting-migration-text p,
#migration.migration-motion-ready .hosting-migration-list li,
#migration.migration-motion-ready .hosting-migration-btn,
#migration.migration-motion-ready .hosting-migration-mobile-art,
#migration.migration-motion-ready .hosting-migration-mascot {
opacity: 1;
transform: none;
transition: none;
animation: none;
}
}
.hosting-migration-mascot {
position: absolute;
width: 222px;
height: auto;
left: 61%;
bottom: 15px;
z-index: 2;
}
.hosting-migration-mobile-art { display: none; }
.hosting-section-lead { max-width: 750px; margin: 0 auto; }
.hosting-awards-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
max-width: 1344px;
margin: 0 auto;
padding-bottom: 80px;
}
.hosting-awards-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.hosting-awards-header .hosting-eyebrow {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.3;
letter-spacing: 5px;
text-transform: uppercase;
color: #151515;
margin: 0;
}
.hosting-awards-header h2 {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 40px;
line-height: 1.2;
color: #151515;
margin: 0;
}
.hosting-awards-header h2 span {
color: #1A50EA;
}
.hosting-awards-header h2 span { color: #1A50EA; }
.hosting-awards-header .hosting-section-lead {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.4;
color: #151515;
margin: 0;
max-width: none;
}
.hosting-awards-carousel {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
width: 100%;
}
.hosting-awards-track {
display: flex;
flex-direction: row;
gap: 40px;
width: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding-bottom: 20px;
}
.hosting-awards-track::-webkit-scrollbar {
display: none;
}
.hosting-award-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 306px;
flex: 0 0 auto;
scroll-snap-align: start;
}
.hosting-award-img-wrapper {
width: 268px;
height: 268px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hosting-award-circle {
position: absolute;
width: 268px;
height: 221px;
/* border-radius: 50%; */
/* background: linear-gradient(180deg, #D7EBF9 0%, rgba(215, 235, 249, 0) 80%); */
}
.hosting-award-img-wrapper img {
position: relative;
z-index: 1;
width: 268px;
height: 221px;
object-fit: contain;
}
.hosting-award-card p {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
text-align: center;
color: #151515;
margin: 0;
width: 270px;
}
.hosting-awards-dots {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 14px;
height: 20px;
}
.hosting-awards-dot {
width: 10px;
height: 10px;
background: url('/landing/hosting_new/images/paginate.svg') center center / contain no-repeat;
background-color: transparent;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
border: none;
}
.hosting-awards-dot.active {
width: 18px;
height: 18px;
background: url('/landing/hosting_new/images/paginate_active.svg') center center / contain no-repeat;
background-color: transparent;
box-shadow: none;
}
.hosting-numbers-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
max-width: 1344px;
margin: 0 auto;
padding-bottom: 0px;
}
.hosting-numbers-section h2 {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 40px;
line-height: 1.2;
color: #151515;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hosting-numbers-section h2 span {
color: #1A50EA;
margin-right: 8px;
}
.hosting-numbers {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 24px 40px;
width: 100%;
background: #FFFFFF;
border: 1.5px solid #D6E8FD;
border-radius: 100px;
margin: 0;
}
.hosting-numbers-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
.hosting-numbers-icon {
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
background: #EEF8FF;
border-radius: 150px;
flex: none;
}
.hosting-numbers-icon img {
width: 70px;
height: 70px;
}
.hosting-numbers-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.hosting-numbers-text strong {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1.4;
color: #1A50EA;
margin: 0;
}
.hosting-numbers-text p {
text-align: start;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4;
color: #151515;
margin: 0;
}
.hosting-numbers-slash {
display: block;
flex: none;
}
.hosting-reviews-section {
width: 100%;
overflow: hidden;
padding: 80px 0px 120px 0px;
}
.hosting-reviews-container {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 40px;
width: min(1344px, calc(100% - 48px));
margin: 0 auto;
}
.hosting-reviews-intro {
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
width: 444px;
height: 360px;
flex: none;
}
.hosting-reviews-intro h2 {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 40px;
line-height: 1.2;
color: #151515;
margin: 0;
}
.hosting-reviews-intro h2 span { color: #1A50EA; }
.hosting-reviews-intro p {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.4;
color: #151515;
margin: 0;
}
.hosting-reviews-controls {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
margin-top: 10px;
}
.hosting-review-prev, .hosting-review-next {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 20px;
border: 1px solid #0150E4;
background: transparent;
cursor: pointer;
padding: 0;
transition: all 0.3s ease;
}
.hosting-review-page {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 18px;
color: #0150E4;
}
.hosting-reviews-track-wrapper {
flex: 1;
position: relative;
height: 360px;
}
.hosting-reviews-track {
display: flex;
flex-direction: row;
gap: 25px;
position: absolute;
top: 0;
left: 0;
width: calc(100vw - 48px - 484px);
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 20px;
}
.hosting-reviews-track::after {
content: '';
display: block;
flex: 0 0 calc(100vw - 460px);
width: calc(100vw - 460px);
}
@media (min-width: 1344px) {
.hosting-reviews-track {
width: calc(100% + (100vw - 1344px) / 2);
}
}
.hosting-reviews-track::-webkit-scrollbar {
display: none;
}
.hosting-review-card {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 40px;
gap: 16px;
width: 460px;
height: 360px;
background: #FFFFFF;
border-radius: 24px;
flex: 0 0 auto;
scroll-snap-align: start;
transition: opacity 0.3s ease;
}
.hosting-reviews-motion-ready .hosting-reviews-intro > * {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .25, 1);
}
.hosting-reviews-motion-ready .hosting-reviews-track .hosting-review-card {
filter: blur(3px);
transform: translate3d(22px, 12px, 0);
transition: opacity 450ms ease, filter 650ms ease, transform 700ms cubic-bezier(.2, .7, .25, 1), box-shadow 350ms ease;
transition-delay: var(--review-card-delay, 0ms);
}
.hosting-reviews-motion-visible .hosting-reviews-intro > * {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.hosting-reviews-motion-visible .hosting-reviews-intro > *:nth-child(2) { transition-delay: 100ms; }
.hosting-reviews-motion-visible .hosting-reviews-intro > *:nth-child(3) { transition-delay: 180ms; }
.hosting-reviews-motion-visible .hosting-reviews-intro > *:nth-child(4) { transition-delay: 260ms; }
.hosting-reviews-motion-visible .hosting-reviews-track .hosting-review-card {
filter: blur(0);
transform: translate3d(0, 0, 0);
}
.hosting-review-card-current {
box-shadow: 0 8px 28px rgba(31, 89, 180, 0.1);
}
@media (prefers-reduced-motion: reduce) {
.hosting-reviews-motion-ready .hosting-reviews-intro > *,
.hosting-reviews-motion-ready .hosting-reviews-track .hosting-review-card {
opacity: 1;
filter: none;
transform: none;
transition: none;
}
}
.hosting-review-stars {
display: flex;
gap: 0px;
}
.hosting-review-stars img {
width: 24px;
height: 24px;
}
.hosting-review-text {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1.5;
color: #151515;
margin: 0;
height: 150px;
overflow: hidden;
}
.hosting-review-line {
width: 100%;
height: auto;
}
.hosting-review-author {
display: flex;
flex-direction: column;
gap: 4px;
}
.hosting-review-author strong {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 1.4;
color: #151515;
}
.hosting-review-author strong b {
font-weight: 600;
}
.hosting-review-author span {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4;
color: #585858;
opacity: 0.8;
}
.hosting-faq {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
max-width: 1344px;
margin: 0 auto;
padding-bottom: 120px;
padding-top: 120px;
}
.hosting-faq h2 {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 40px;
line-height: 48px;
text-align: center;
color: #151515;
margin: 0;
}
.hosting-faq-list {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.hosting-faq-item {
box-sizing: border-box;
background: #FFFFFF;
border: 1px solid #D6E8FD;
border-radius: 16px;
text-align: left;
overflow: hidden;
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease;
}
.hosting-faq-item.open {
background: #ECF3FF;
border-color: #ECF3FF;
}
.hosting-faq-summary {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 1.4;
color: #151515;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 24px;
transition: padding-bottom 0.3s ease;
}
.hosting-faq-item.open .hosting-faq-summary {
padding-bottom: 3px;
}
.hosting-faq-summary .faq-icon {
display: inline-block;
width: 32px;
height: 32px;
background: url('/landing/hosting_new/images/icon_cong.svg') center center no-repeat;
flex-shrink: 0;
transition: background-image 0.3s ease;
}
.hosting-faq-item.open .hosting-faq-summary .faq-icon {
background-image: url('/landing/hosting_new/images/icon_tru.svg');
}
.hosting-faq-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.hosting-faq-item.open .hosting-faq-content {
width: 95%;
grid-template-rows: 1fr;
}
.hosting-faq-content-inner {
overflow: hidden;
}
.hosting-faq-content-inner p {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #151515;
margin: 0;
padding: 0 24px 24px 24px;
}
.hosting-dialog[hidden] { display: none; }
.hosting-dialog { position: fixed; inset: 0; z-index: 99999; background: #0009; display: grid; place-items: center; padding: 16px; }
.hosting-dialog-card { background: #fff; border-radius: 14px; position: relative; width: min(760px,100%); max-height: 90vh; overflow-y: auto; padding: 38px; }
.hosting-dialog-close { position: absolute; right: 14px; top: 10px; background: none; border: 0; font-size: 30px !important; line-height: 1; }
.hosting-contact-shell { position: relative; width: min(1284px, calc(100vw - 32px)); }
.hosting-dialog-body { display: flex; align-items: center; gap: 20px; }
.hosting-dialog-body > div { flex: 1; }
.hosting-dialog-body h2 { font-size: 25px; }
.hosting-survey-choices { display: grid; gap: 9px; margin: 20px 0; }
.hosting-survey-choices label { padding: 10px; border: 1px solid #dce8f7; border-radius: 6px; cursor: pointer; }
.hosting-survey-result { background: #eff7ff; border-radius: 8px; padding: 14px; }
.hosting-survey-result[hidden] { display: none; }
.hosting-contact-new {
width: 100%;
min-height: 705px;
background: #F0F7FF;
border-radius: 32px;
padding: 30px;
display: flex;
justify-content: center;
align-items: stretch;
gap: 0px;
position: relative;
max-height: none;
overflow: visible;
}
.contact-close-new {
position: absolute;
top: -20px;
right: -20px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, .15);
border: none;
cursor: pointer;
z-index: 10;
}
.thanks-close {
display: none;
position: absolute;
top: -20px;
right: -20px;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
z-index: 10;
}
.thanks-close img { display: block; width: 48px; height: 48px; }
.contact-new-intro {
flex: 1;
display: flex;
flex-direction: column;
gap: 0px;
max-width: 638px;
}
.contact-new-intro h2 {
font-weight: 500;
font-size: 36px;
line-height: 130%;
margin: 48px 0 8px;
color: #151515;
}
.contact-subtitle {
font-weight: 500;
font-size: 16px;
line-height: 150%;
color: #151515;
margin: 0;
width: 90%;
padding-bottom: 40px;
}
.contact-benefits {
display: flex;
flex-direction: column;
gap: 24px;
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 20px;
}
.benefit-icon {
width: 62px;
height: 62px;
border: 1px solid #AECCFF;
border-radius: 9999px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.benefit-text {
display: flex;
flex-direction: column;
gap: 8px;
}
.benefit-text strong {
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: #151515;
}
.benefit-text p {
font-weight: 400;
font-size: 16px;
line-height: 140%;
color: #151515;
margin: 0;
}
.contact-new-form {
background: #FFFFFF;
border-radius: 32px;
padding: 40px;
width: 586px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.05);
}
.contact-new-form h3 {
font-weight: 600;
font-size: 24px;
line-height: 29px;
text-align: center;
color: #151515;
margin: 0;
}
.contact-new-form .form-group { margin: 0; }
.contact-new-form .g-recaptcha { position: absolute; }
.form-group-row {
display: flex;
gap: 16px;
width: 100%;
}
.form-group-row.two-cols > .form-group {
flex: 1;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.form-group label {
font-weight: 500;
font-size: 16px;
line-height: 150%;
color: #151515;
margin: 0;
}
.input-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
border: 1px solid rgba(21, 21, 21, 0.15);
border-radius: 10px;
background: #FFFFFF;
}
.input-wrapper.select-wrapper {
padding-right: 16px;
}
.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
width: 100%;
border: none;
background: transparent;
padding: 10px 16px 10px 4px;
font-weight: 400;
font-size: 16px;
line-height: 140%;
color: #151515;
outline: none;
}
.input-wrapper input::placeholder,
.input-wrapper textarea::placeholder {
color: rgba(21, 21, 21, 0.4);
}
.input-icon {
margin-left: 16px;
width: 30px;
height: 30px;
opacity: 0.4;
}
.input-icon-right {
position: absolute;
right: 16px;
pointer-events: none;
}
.input-wrapper select {
appearance: none;
cursor: pointer;
}
.input-wrapper textarea {
resize: vertical;
min-height: 78px;
}
.contact-new-submit {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
max-width: 278px;
height: 48px;
margin: 8px auto 0;
background: linear-gradient(80.05deg, #6648E9 -13.77%, #0BCAFF 115.49%);
border-radius: 999px;
border: none;
color: #FFFFFF;
font-weight: 500;
font-size: 16px;
cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.contact-new-submit:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.contact-new-thanks {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #FFFFFF;
border-radius: 32px;
width: 100%;
min-height: 393px;
padding: 60px;
text-align: center;
margin: auto;
position: relative;
}
.contact-new-thanks[hidden] {
display: none;
}
.thanks-icon {
width: 170px;
margin-bottom: 24px;
}
.contact-new-thanks p {
font-weight: 400;
font-size: 20px;
line-height: 150%;
color: #151515;
margin: 0;
}
.contact-close-new img { display: block; width: 48px; height: 48px; }
.hosting-contact-new:has(.contact-new-thanks:not([hidden])) {
padding: 0;
background: transparent;
min-height: 393px;
}
.hosting-contact-shell:has(.contact-new-thanks:not([hidden])) { width: min(757px, calc(100vw - 32px)); }
.hosting-contact-shell:has(.contact-new-thanks:not([hidden])) > .contact-close-new { display: none; }
.hosting-contact-shell:has(.contact-new-thanks:not([hidden])) > .thanks-close { display: flex; }
@media (max-width: 1400px) {
.hosting-migration-mascot {
position: absolute;
width: 180px;
height: auto;
left: 50%;
bottom: 30px;
z-index: 2;
}
.hosting-migration-text h2 {
font-size: 20px;
}
.hosting-migration-text p {
font-size : 14px;
width: 90%;
}
.hosting-migration-list li span {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: #151515;
}
.hosting-migration-list {
gap: 8px;
}
.hosting-use-cases { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 1200px) {
.hosting-tab-new {
right: 13px;
top: 5px;
}
}
@media (max-width: 1024px) {
.hosting-contact-shell { width: min(100%, 600px); max-height: calc(100vh - 32px); }
.hosting-contact-new { flex-direction: column; justify-content: flex-start; align-items: center; min-height: 0; max-height: calc(100vh - 32px); overflow-y: auto; padding: 30px; gap: 20px; }
.contact-close-new, .thanks-close { top: -16px; right: -16px; }
.form-group-row.two-cols { flex-direction: column; }
.contact-new-intro { max-width: 100%; width: 100%; }
.contact-new-form { max-width: 100%; width: 100%; }
.hosting-tabs button {
padding: 12px 16px;
}
.hosting-price-expand {
font-size: 14px;
font-weight: 500;
}
}
@media (max-width: 768px) {
.hosting-dialog-card.hosting-contact-new { box-sizing: border-box; width: min(100%, 600px); min-width: 0; padding: 16px; gap: 0; border-radius: 16px; background: #f5f9fc; }
.hosting-contact-new, .contact-new-intro, .contact-new-form,
.contact-new-form .form-group-row, .contact-new-form .form-group,
.contact-new-form .custom-select-wrapper { box-sizing: border-box; min-width: 0; max-width: 100%; }
.contact-new-form { width: 100%; }
.contact-new-form .form-group-row, .contact-new-form .form-group,
.contact-new-form .custom-select-wrapper { width: 100%; }
.contact-new-form .custom-select-trigger { box-sizing: border-box; display: block; flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-close-new, .thanks-close { top: -12px; right: -12px; width: 40px; height: 40px; padding: 0; }
.contact-close-new img, .thanks-close img { width: 40px; height: 40px; max-width: 100%; }
.thanks-close {top: 5px!important; right: 5px!important; }
.contact-new-intro { align-items: center; text-align: center; }
.contact-new-intro h2 { margin: 16px 24px 16px; font-size: 22px; line-height: 1.3; }
.contact-subtitle { width: 100%; padding: 0; color: #666; font-size: 14px; font-weight: 400; line-height: 1.5; }
.contact-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; width: 100%; margin: 24px 0; text-align: left; }
.benefit-item { align-items: center; gap: 8px; min-width: 0; }
.benefit-icon, .benefit-icon img { width: 40px; height: 40px; }
.benefit-icon { flex: 0 0 40px; }
.benefit-text { gap: 0; }
.benefit-text strong { font-size: 14px; font-weight: 400; line-height: 1.4; }
.benefit-text p { display: none; }
.contact-new-form { padding: 16px; gap: 8px; box-shadow: none; }
.contact-new-form h3 { margin: 0 0 8px; font-size: 16px; font-weight: 500; line-height: 1.3; text-align: center; }
.contact-new-form .form-group { gap: 4px; }
.contact-new-form .form-group label { font-size: 14px; font-weight: 400; line-height: 20px; }
.contact-new-form .form-group-row.two-cols { gap: 8px; }
.contact-new-form .input-wrapper input, .contact-new-form .custom-select-trigger { height: 40px; font-size: 14px; line-height: 24px; }
.contact-new-form .input-wrapper input { padding: 8px 12px 8px 8px; }
.contact-new-form .input-icon { width: 24px; height: 24px; margin-left: 12px; }
.contact-new-form .custom-select-trigger { padding: 8px 40px 8px 16px; }
.contact-new-form .custom-option { font-size: 14px; }
.contact-new-form .input-wrapper textarea { height: 80px; min-height: 80px; padding: 12px 16px; resize: none; font-size: 14px; line-height: 24px; }
.contact-new-form .contact-new-submit { margin-top: 8px; }
.hosting-price-more dl {
gap: 8px;
}
.hosting-price-specs {
gap: 8px;
}
}
@media (max-width: 1199px) {
.hosting-hero-badges { display: none; }
.hosting-hero ul { max-width: 630px; font-size: 16px; }
}
@media (max-width: 991px) {
.hosting-section h2 { font-size: 30px; }
.hosting-hero h1 { font-size: 44px; }
.hosting-brand > img, .hosting-brand .award-tip { display: none; }
.hosting-brand a img { width: 150px; }
.hosting-use-cases { grid-template-columns: repeat(2,1fr); }
.hosting-tabs button { flex: 0 0 170px; }
.hosting-hero { background-position: 45% top; }
.hosting-hero-inner { background: linear-gradient(90deg,#ffffffd9,#ffffff55 65%,transparent); }
.hosting-benefits { grid-template-columns: repeat(2,1fr); }
.hosting-numbers-section h2 { font-size: 28px; flex-direction: column; text-align: center; }
.hosting-numbers-section h2 span { margin-right: 0; margin-bottom: 8px; }
.hosting-numbers { flex-direction: column; align-items: stretch; border-radius: 24px; padding: 24px; gap: 24px; height: auto; }
.hosting-numbers-item { justify-content: flex-start; }
.hosting-numbers-slash { display: none; }
.hosting-migration-content { max-width: 65%; }
}
@media (max-width: 768px) {
.hosting-container { width: min(100% - 32px, 736px); }
.hosting-section { padding-block: 48px; }
.hosting-header-inner { height: 60px; }
.hosting-brand a img { width: 125px; }
.hosting-menu-toggle { display: block; }
.hosting-nav { display: none; position: absolute; top: 60px; left: 0; right: 0; background: white; padding: 20px; flex-direction: column; align-items: stretch; gap: 18px; box-shadow: 0 12px 18px #142e5422; }
.hosting-nav.is-open { display: flex; }
.hosting-hero { min-height: 690px; align-items: start; background: #f0f8ff url('/landing/hosting_new/images/banner_mb.svg') center calc(100% + 80px) / cover no-repeat; }
.hosting-hero-inner { padding-top: 95px; padding-bottom: 265px; background: none; }
.hosting-hero h1 { font-size: 34px; max-width: 390px; }
.hosting-hero ul { font-size: 13px; line-height: 1.5; gap: 5px; margin-bottom: 28px; }
.hosting-hero li { font-size: 13px; }
.hosting-hero-badges { display: none; }
.hosting-actions { gap: 8px; width: 100%; max-width: 444px; }
.hosting-actions .hosting-button { min-width: 0; width: auto; flex: 1; padding-inline: 9px; font-size: 12px !important; }
.hosting-finder { gap: 28px; margin-top: -18px; }
.hosting-finder-heading { gap: 10px; }
.hosting-finder .hosting-eyebrow { font-size: 12px; line-height: 18px; letter-spacing: 3px; }
.hosting-finder h2 { font-size: 28px; line-height: 1.2; }
.hosting-finder-heading > p:last-child { font-size: 14px; line-height: 1.4; }
.hosting-use-cases { gap: 10px; }
.hosting-use-cases button { height: auto; min-height: 170px; padding: 12px; gap: 8px; flex-direction: column; align-items: flex-start; border-radius: 16px; }
.hosting-use-case-icon { width: 60px; height: 60px; }
.hosting-use-case-icon img { width: 38px; height: 38px; }
.hosting-use-cases strong { font-size: 15px; line-height: 20px; }
.hosting-use-cases small { font-size: 13px; line-height: 18px; margin-top: 4px; }
.hosting-pricing-header h2 { font-size: 28px; line-height: 1.2; }
.hosting-tabs button { font-size: 14px; padding-inline: 12px; }
.hosting-prices { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 25px 3px 5px; gap: 15px; }
.hosting-price { min-width: min(83vw, 330px); scroll-snap-align: center; }
.hosting-offer-grid { flex-direction: column; align-items: stretch; }
.hosting-offer-card { max-width: 100%; height: auto; flex-direction: column; }
.hosting-offer-img { width: 100%; height: 180px; }
.hosting-offer-content { border-radius: 0 0 16px 16px; height: auto; padding: 20px; }
.hosting-coupon { max-width: 100%; }
.hosting-benefits, .hosting-review-list { grid-template-columns: 1fr; }
.hosting-benefits { gap: 12px; }
.hosting-benefit-card { padding: 24px 16px; gap: 16px; }
.hosting-benefits-section h2 { font-size: 28px; }
.hosting-migration {
height: auto;
min-height: 690px;
background: #e3f5ff url('/landing/hosting_new/images/banner_contact_mb.svg') center bottom / cover no-repeat;
padding: 24px;
margin-block: 25px 45px;
}
.hosting-migration-content { max-width: 100%; gap: 24px; }
.hosting-migration-text h2 { font-size: 25px; }
.hosting-migration-text p { font-size: 13px; }
.hosting-migration-list li span { font-size: 16px; }
.hosting-migration-mascot {
left: 24px;
bottom: 15px;
width: 160px;
height: auto;
}
.hosting-awards-header h2 { font-size: 25px; }
.hosting-awards-header .hosting-eyebrow { font-size: 12px; }
.hosting-awards-header .hosting-section-lead { font-size: 14px; }
.hosting-awards-track { gap: 16px; }
.hosting-award-card { width: 220px; }
.hosting-award-card p { width: 100%; font-size: 13px; }
.hosting-award-img-wrapper { width: 180px; height: 180px; }
.hosting-award-circle { width: 180px; height: 180px; }
.hosting-award-img-wrapper img { max-width: 120px; max-height: 140px; }
.hosting-numbers { gap: 16px; padding: 16px; }
.hosting-numbers-item { flex-direction: column; text-align: center; gap: 8px; }
.hosting-numbers-text { align-items: center; }
.hosting-numbers-text p { font-size: 14px; text-align: center; }
.hosting-reviews-section { padding: 40px 0; }
.hosting-reviews-container { flex-direction: column; gap: 24px; width: 100%; }
.hosting-reviews-intro { width: 100%; height: auto; align-items: center; text-align: center; gap: 8px; }
.hosting-reviews-intro h2 { font-size: 28px; }
.hosting-reviews-intro p { font-size: 15px; }
.hosting-reviews-track-wrapper { width: 100%; height: auto; }
.hosting-reviews-track { position: relative; width: 100vw; margin-left: -24px; padding-left: 24px; padding-right: 0; }
.hosting-reviews-track::after { flex: 0 0 calc(100vw - 320px); width: calc(100vw - 320px); }
.hosting-review-card { width: 320px; height: auto; padding: 24px; gap: 16px; }
.hosting-review-text { font-size: 16px; height: auto; min-height: 120px; }
.hosting-dialog-card { padding: 25px 18px; }
.hosting-dialog-body > img { display: none; }
.hosting-contact-card { grid-template-columns: 1fr; gap: 10px; }
.hosting-contact-intro h2 { font-size: 20px; }
.hosting-contact-intro ul { display: none; }
}
@media (max-width: 768px) {
.hosting-header-inner { width: 100%; height: 46px; padding: 8px 16px; }
.hosting-brand { position: relative; gap: 8px; }
.hosting-brand a img { width: 110px; }
.hosting-brand .award-tip { display: inline-flex; position: static; }
.hosting-brand .brand-badge { width: 32px; height: 20px; }
.hosting-brand .award-tip::after { top: calc(100% + 12px); left: 0; transform: none; width: 280px; max-width: calc(100vw - 32px); padding: 10px 12px; font-size: 12px; line-height: 1.45; }
.hosting-brand-divider { display: none; }
.hosting-menu-toggle { width: 30px; height: 30px; padding: 0; }
.hosting-menu-toggle img { width: 30px; height: 30px; }
.hosting-nav { top: 46px; }
.hosting-hero { min-height: 860px; height: auto; background: #f0f8ff url('/landing/hosting_new/images/banner_mb.svg') center top / cover no-repeat; }
.hosting-hero::after { height: 54px; }
.hosting-hero-inner { width: 100%; max-width: none; margin-top: 78px; padding: 0 16px; }
.hosting-hero h1 { max-width: none; width: 100%; margin: 0 0 32px; font-size: 40px; line-height: 48px; text-align: center; }
.hosting-hero ul { width: 100%; max-width: none; gap: 8px; margin: 0 0 24px; font-size: 14px; line-height: 20px; }
.hosting-hero li { min-height: 40px; padding-left: 14px; font-size: 14px; line-height: 20px; }
.hosting-hero li::before { width: 6px; height: 6px; border-width: 1.5px; top: 7px; }
.hosting-actions { width: 100%; max-width: none; gap: 12px; flex-wrap: nowrap; }
.hosting-actions .hosting-button { width: calc((100% - 12px) / 2); height: 40px; min-height: 40px; padding: 0; flex: 1 1 0; font-size: 14px !important; white-space: nowrap; }
.hosting-finder { gap: 24px; margin-top: 40px; padding: 0;padding-bottom: 40px; }
.hosting-finder-heading { gap: 8px; }
.hosting-finder .hosting-eyebrow { font-size: 12px; line-height: 16px; letter-spacing: 4px; }
.hosting-finder h2 { font-size: 24px; font-weight: 500; line-height: 29px; }
.hosting-finder-heading > p:last-child { font-size: 14px; font-weight: 400; line-height: 18px; }
.hosting-use-cases { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hosting-use-cases button { flex-direction: row; align-items: center; width: 100%; height: 72px; min-height: 72px; gap: 12px; padding: 12px; border-radius: 16px; }
.hosting-use-case-icon { width: 48px; height: 48px; }
.hosting-use-case-icon img { width: 32px; height: 32px; }
.hosting-use-cases strong { font-size: 16px; font-weight: 500; line-height: 22px; }
.hosting-use-cases small { margin-top: 0; font-size: 14px; line-height: 21px; }
.hosting-finder > .hosting-button { width: 343px; height: 40px; min-height: 40px; padding: 0; font-size: 14px !important; }
#comparison { gap: 24px; padding: 0;padding-bottom : 40px; }
#comparison h2 { align-self: center; min-width: 343px; font-size: 24px; font-weight: 500; line-height: 29px; text-align: center; }
.hosting-table-scroll { min-height: 725px; background: transparent; border: none; border-radius: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
.hosting-table-scroll::-webkit-scrollbar { display: none; }
.hosting-comparison { width: 100%; min-width: 1341px; table-layout: fixed; border: 1.5px solid #d6e0fd; border-radius: 20px; background: transparent; border-collapse: separate; border-spacing: 0; }
.hosting-comparison thead tr:first-child th:first-child { border-top-left-radius: 18.5px; }
.hosting-comparison tbody tr:last-child th:first-child { border-bottom-left-radius: 18.5px; }
.hosting-comparison thead tr:first-child th:last-child { border-top-right-radius: 18.5px; }
.hosting-comparison tbody tr:last-child td:last-child { border-bottom-right-radius: 18.5px; }
.hosting-comparison col.hosting-comparison-label { width: 110px; }
.hosting-comparison th, .hosting-comparison td { padding: 12px; }
.hosting-comparison thead th { height: 40px; padding: 10px 12px; font-size: 14px; line-height: 20px; position: sticky; top: 0; z-index: 1; }
.hosting-comparison tbody tr:first-child { height: 126px; }
.hosting-comparison tbody tr:nth-child(n+2):nth-child(-n+4) { height: 64px; }
.hosting-comparison tbody tr:nth-child(n+5):nth-child(-n+10) { height: 54px; }
.hosting-comparison tbody tr:nth-child(11) { height: 40px; }
.hosting-comparison tbody tr:nth-child(n+5):nth-child(-n+10) > * { padding: 7px 12px; }
.hosting-comparison tbody tr:nth-child(11) > * { padding: 8px 12px; }
.hosting-comparison tbody th { font-size: 14px; line-height: 20px; background: #fff; }
.hosting-comparison tbody tr:nth-child(even) th { background: #f5f9ff; }
.hosting-comparison tbody td { font-size: 12px; line-height: 17px; }
.hosting-comparison tbody td:nth-child(n+4) { font-size: 14px; line-height: 20px; }
.hosting-comparison tbody tr:first-child td { font-size: 12px; line-height: 17px; }
.hosting-comparison tbody td a { font-size: 14px; line-height: 21px; }
.hosting-stars { gap: 4px; height: 20px; }
.hosting-stars img { width: 16px; height: 16px; }
#pricing { padding: 0; padding-bottom: 40px; }
.hosting-pricing-header { gap: 12px; width: 100%; }
.hosting-pricing-header h2 { font-size: 24px; font-weight: 500; line-height: 29px; }
.hosting-tabs-scroll {
width: calc(100% + 32px);
max-width: 100vw;
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.hosting-tabs-scroll::-webkit-scrollbar {
display: none;
}
.hosting-tabs {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0;
width: 1100px;
min-width: 1100px;
height: 64px;
border: 1px solid #ebf0ff;
border-radius: 100px;
flex: none;
background: #ffffff;
overflow: visible;
}
.hosting-tabs button {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 64px;
border: 0;
background: transparent;
border-radius: 100px;
color: #151515;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: center;
cursor: pointer;
flex: none;
transition: all 0.2s ease;
white-space: normal;
}
.hosting-tabs button[data-hosting-tab="linux"] {
width: 140px;
padding: 12px;
gap: 10px;
}
.hosting-tabs button[data-hosting-tab="windows"] {
width: 140px;
padding: 12px 0;
gap: 8px;
}
.hosting-tabs button[data-hosting-tab="vibe"] {
width: 140px;
padding: 12px;
gap: 10px;
}
.hosting-tabs button[data-hosting-tab="wordpress"] {
width: 170px;
padding: 12px 20px;
}
.hosting-tabs button[data-hosting-tab="nvme"] {
width: 170px;
padding: 12px 20px;
}
.hosting-tabs button[data-hosting-tab="seo"] {
width: 170px;
padding: 12px 20px;
}
.hosting-tabs button[data-hosting-tab="secureweb"] {
width: 170px;
padding: 12px 20px;
}
.hosting-tabs button[aria-selected="true"] {
background: linear-gradient(80.05deg, #eeeffd -13.77%, #e7f6fe 115.49%);
color: #295ef1;
font-weight: 500;
border-radius: 99px;
}
.hosting-tab-new {
position: absolute;
top: 12px;
right: 6px;
width: 26px;
height: 14px;
pointer-events: none;
z-index: 1;
}
.hosting-prices { display: flex; flex-direction: row; align-items: stretch; width: 100%; gap: 16px; padding: 24px 0 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.hosting-prices::-webkit-scrollbar { display: none; }
.hosting-price { display: flex; flex: 0 0 100%; flex-direction: column; width: 100%; min-width: 100%; height: auto; min-height: 389px; padding: 16px; border: 1px solid #dfedfd; border-radius: 20px; scroll-snap-align: start; margin-top: 46px; }
.hosting-price-featured { height: auto; min-height: 435px; padding: 0 1px 1px; border: 0; margin-top: 0; }
.hosting-popular { min-height: 46px; font-size: 14px; }
.hosting-price-content { min-height: 0; gap: 14px; }
.hosting-price-featured .hosting-price-content { min-height: 0; padding: 16px; border-radius: 20px; }
.hosting-price-main { gap: 12px; }
.hosting-price-head { gap: 8px; }
.hosting-price h3 { font-size: 18px; line-height: 25px; }
.hosting-amount { height: 24px; gap: 4px; font-size: 24px; line-height: 24px; }
.hosting-amount small { font-size: 14px; }
.hosting-price .hosting-price-description { height: auto; min-height: 24px; font-size: 14px; line-height: 24px; }
.hosting-price-offer { gap: 8px; }
.hosting-price .hosting-gift { min-height: 24px; font-size: 14px; line-height: 21px; }
.hosting-gift img { width: 23px; height: 24px; }
.hosting-price .hosting-button { height: 40px; min-height: 40px; font-size: 14px !important; }
.hosting-price-specs { gap: 8px; }
.hosting-price-features { gap: 8px; }
.hosting-price dl div { min-height: 20px; }
.hosting-price dt, .hosting-price dd { font-size: 14px; line-height: 20px; }
.hosting-price-toggle { min-height: 24px; gap: 10px; font-size: 14px; line-height: 21px; }
.hosting-price-toggle img { width: 24px; height: 24px; }
.hosting-price-note { margin-top: 12px; font-size: 12px; line-height: 17px; }
.hosting-pricing-pagination { display: flex; width: 100%; height: 18px; gap: 6px; margin-top: 16px; }
.hosting-pricing-pagination button { flex: 0 0 18px; }
.hosting-offers { width: 100%; gap: 24px; padding: 0px 16px 40px 16px; }
.hosting-offers-header { gap: 8px; }
.hosting-offers-header h2 { font-size: 24px; font-weight: 500; line-height: 29px; padding: 0 36px; }
.hosting-offers-header p { font-size: 14px; font-weight: 400; line-height: 18px; padding: 0 32px; }
.hosting-offer-grid { gap: 16px; }
.hosting-offer-card { width: 100%; max-width: none; height: auto; flex-direction: column; border-radius: 16px; box-shadow: none; }
.hosting-offer-img { display: none; }
.hosting-offer-content { width: 100%; height: auto; flex: none; padding: 16px; gap: 16px; margin: 0; border-radius: 16px; }
.hosting-offer-text { gap: 4px; width: 100%; align-items: center; text-align: center; }
.hosting-offer-text h3 { font-size: 16px; line-height: 26px; }
.hosting-offer-card:nth-child(1) .hosting-offer-text p { font-size: 14px; line-height: 20px; padding: 0 16%; }
.hosting-offer-card:nth-child(2) .hosting-offer-text p { font-size: 14px; line-height: 20px; padding: 0; }
.hosting-coupon { width: 100%; height: 36px; }
.hosting-coupon-btn { width: 52%; height: 36px; font-size: 14px; }
.hosting-text-blue { color: #0050CB; }
.hosting-benefits-section { gap: 24px; padding: 0; padding-top: 40px; }
.hosting-benefits-section h2 { max-width: 343px; padding: 0; font-size: 24px; font-weight: 500; line-height: 29px; }
.hosting-benefits { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-columns: 100%; align-items: stretch; width: 100%; column-gap: 12px; row-gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: 0; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.hosting-benefits::-webkit-scrollbar { display: none; }
.hosting-benefit-card { width: 100%; min-width: 0; height: auto; min-height: 92px; padding: 12px; flex-direction: row; align-items: center; text-align: left; gap: 12px; border-radius: 16px; scroll-snap-align: start; }
.hosting-benefit-card:nth-child(1) { order: 1 !important; }
.hosting-benefit-card:nth-child(4) { order: 2 !important; }
.hosting-benefit-card:nth-child(2) { order: 3 !important; }
.hosting-benefit-card:nth-child(5) { order: 4 !important; }
.hosting-benefit-card:nth-child(3) { order: 5 !important; }
.hosting-benefit-card:nth-child(6) { order: 6 !important; }
.hosting-benefit-icon, .hosting-benefit-icon img { width: 60px; height: 60px; flex: none; }
.hosting-benefit-text { text-align: left; gap: 4px; display: flex; flex-direction: column; }
.hosting-benefit-text h3 { font-size: 16px; line-height: 22px; text-align: left; }
.hosting-benefit-text p { font-size: 14px; line-height: 21px; }
.hosting-benefits-dots { display: flex; align-items: center; justify-content: center; gap: 6px; height: 12px; }
.hosting-benefits-dots button { display: flex; align-items: center; justify-content: center; flex: 0 0 12px; width: 12px; height: 12px; padding: 0; border: 0; background: transparent; }
.hosting-benefits-dots button img { display: block; width: 6px; height: 6px; }
.hosting-benefits-dots button[aria-current="true"] img { width: 12px; height: 12px; }
.hosting-migration { flex-direction: column; align-items: center; gap: 24px; width: 100%; height: auto; min-height: 0; padding: 24px 16px; margin: 40px auto; border-radius: 16px; background: transparent; isolation: isolate; }
.hosting-migration::before { content: ''; position: absolute; inset: 0 16px; z-index: 0; border-radius: 16px; background: linear-gradient(269.46deg, rgba(224, 245, 255, 0) 31.58%, #e0f5ff 50.07%), #ecf5fe; pointer-events: none; }
.hosting-migration-content { align-items: center; width: 100%; gap: 0; }
.hosting-migration-text { display: contents; text-align: center; }
.hosting-migration-text h2 { margin-bottom: 16px; font-size: 24px; font-weight: 500; line-height: 29px; width: 85%; }
.hosting-migration-text p { margin-bottom: 12px; font-size: 14px; line-height: 21px; text-align: center; width: 90%;}
.hosting-migration-list { align-self: stretch; align-items: center; width: 100%; gap: 12px; margin-bottom: 20px; }
.hosting-migration-list li { gap: 4px; }
.hosting-migration-list li svg { flex: none; width: 24px; height: 24px; }
.hosting-migration-list li span { font-size: 16px; line-height: 24px; }
.hosting-migration-btn { width: 311px; min-width: 0; height: 48px; }
.hosting-migration-mobile-art { display: block; position: relative; z-index: 2; flex: none; width: 90.7%; max-width: 311px; height: auto; border-radius: 18px; }
.hosting-migration-mascot { display: none; }
.hosting-awards-section { gap: 24px; padding: 0; }
.hosting-awards-header { gap: 8px; }
.hosting-awards-header .hosting-eyebrow { font-size: 12px; line-height: 16px; letter-spacing: 4px; }
.hosting-awards-header h2 { color: #151515; font-size: 24px; font-weight: 500; line-height: 29px; }
.hosting-awards-header .hosting-section-lead { font-size: 14px; font-weight: 400; line-height: 18px; }
.hosting-awards-carousel { gap: 20px; }
.hosting-awards-track { gap: 12px; padding-bottom: 0; }
.hosting-award-card { width: calc((100% - 12px) / 2); gap: 16px; }
.hosting-award-img-wrapper { width: 152px; height: 125.34px; }
.hosting-award-circle { top: 0; left: 0;}
.hosting-award-img-wrapper img { width: 152px; height: 125px; max-width: 152px; max-height: 125px; }
.hosting-award-card p { width: 100%; font-size: 14px; line-height: 21px; }
.hosting-awards-dots { gap: 6px; height: 12px; }
.hosting-awards-dot { width: 6px; height: 6px; }
.hosting-awards-dot.active { width: 12px; height: 12px; }
.hosting-numbers-section { gap: 24px; padding: 0; margin: 40px auto 0; }
.hosting-numbers-section h2 { font-size: 24px; font-weight: 500; line-height: 29px; width:75%;}
.hosting-numbers-section h2 span { margin: 0; }
.hosting-numbers { gap: 16px; padding: 16px; border-radius: 16px; }
.hosting-numbers-item { flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; }
.hosting-numbers-icon, .hosting-numbers-icon img { width: 46px; height: 46px; }
.hosting-numbers-icon img { width: 46px; height: 46px; }
.hosting-numbers-text { align-items: flex-start; gap: 0; }
.hosting-numbers-text strong { font-size: 16px; line-height: 22px; }
.hosting-numbers-text p { font-size: 14px; line-height: 20px; text-align: left; }
.hosting-numbers-text br { display: none; }
.hosting-reviews-section { padding: 40px 0px; }
.hosting-reviews-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hosting-reviews-intro { display: contents; }
.hosting-reviews-intro h2 { grid-row: 1; font-size: 24px; font-weight: 500; line-height: 29px; }
.hosting-reviews-intro p { grid-row: 2; font-size: 14px; line-height: 18px; }
.hosting-reviews-track-wrapper { grid-row: 3; width: 100%; }
.hosting-reviews-track { width: 100%; margin: 0; padding: 0 16px; }
.hosting-review-card { width: calc(100vw - 32px); height: 230px; padding: 16px; gap: 10px; }
.hosting-review-text { height: auto; min-height: 0; font-size: 14px; line-height: 21px; text-align: center; }
.hosting-review-author strong { font-size: 16px; line-height: 22px; }
.hosting-review-author span { font-size: 14px; line-height: 20px; }
.hosting-reviews-controls { grid-row: 4; justify-self: center; margin-top: 0; }
.hosting-faq { gap: 24px; padding: 40px 0px; }
.hosting-faq h2 { font-size: 24px; font-weight: 500; line-height: 29px; }
.hosting-faq-list { gap: 12px; }
.hosting-faq-summary { gap: 12px; padding: 16px; font-size: 14px; font-weight: 500; line-height: 20px; }
.hosting-faq-summary .faq-icon { width: 24px; height: 24px; background-size: 24px; }
.hosting-faq-item.open .hosting-faq-summary { padding-bottom: 12px; }
.hosting-faq-content-inner p { padding: 0 16px 16px; font-size: 14px; line-height: 21px; }
.hosting-faq-item:nth-child(4) { min-height: 64px; }
}
/* FOOTER OVERRIDES */
.tg_footer_2024 ul,
.tg_footer_2024 li {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
text-align: left !important;
}
/* Remove fixed width breakpoints for container */
.container {
width: 100% !important;
max-width: 1344px !important;
}
.tg_footer_2024 .family_site .family_bg {
left: -270px!important;
bottom: 40px!important;
}
/* SURVEY POPUP CSS */
.survey-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.survey-popup-overlay[hidden] {
display: none !important;
}
.survey-popup-shell {
position: relative;
width: min(1080px, 95vw);
}
.survey-popup-modal {
position: relative;
width: 100%;
height: 801px;
background: #F0F7FF;
box-shadow: 0px 12px 40px rgba(0, 28, 128, 0.08);
border-radius: 32px;
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 30px;
gap: 24px;
max-height: 100vh;
}
.survey-close-btn {
position: absolute;
top: -15px;
right: -15px;
background: transparent;
border: none;
cursor: pointer;
z-index: 10;
padding: 0;
}
.survey-close-btn img {
max-width: 90%;
display: block;
}
.survey-title {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 36px;
line-height: 44px;
color: #151515;
margin: 0;
width: 100%;
text-align: center;
}
.survey-progress-wrapper {
display: flex;
flex-direction: column;
width: 1020px;
gap: 7px;
}
.survey-progress-text {
display: flex;
justify-content: space-between;
width: 100%;
}
.survey-question-label {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 18px;
color: #000000;
}
.survey-percentage {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 18px;
color: #7B7B7B;
}
.survey-progress-bar-bg {
width: 100%;
height: 3px;
background: #E4EAEE;
border-radius: 30px;
position: relative;
}
.survey-progress-bar-fill {
height: 100%;
background: linear-gradient(80.05deg, #6648E9 -13.77%, #0BCAFF 115.49%);
border-radius: 30px;
box-shadow: 0px 10px 20px rgba(89, 170, 255, 0.2);
transition: width 0.3s ease;
}
.survey-content-box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 30px;
gap: 50px;
width: 1020px;
height: 535px;
background: #FFFFFF;
border-radius: 32px;
}
.survey-question-col {
display: flex;
flex-direction: column;
gap: 24px;
width: 540px;
height: 475px;
}
.survey-q-title {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 1.5;
color: #000000;
margin: 0;
}
.survey-options {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.survey-option {
display: flex;
align-items: center;
padding: 12px 20px;
gap: 10px;
width: 100%;
height: 48px;
border: 1.5px solid #E8E9EB;
border-radius: 16px;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 0px!important;
}
.survey-option.active {
border-color: #1A50EA;
}
.survey-option span {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
color: #000000;
}
.survey-option.active span {
color: #0150E4;
}
.survey-option input[type="radio"] {
display: none;
}
.survey-image-col {
width: 370px;
height: 475px;
display: flex;
justify-content: center;
align-items: center;
}
.survey-image-col img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.survey-footer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 24px;
width: 100%;
margin-top: auto;
}
.survey-btn-back {
background: transparent;
border: none;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 16px;
color: #2755EE;
cursor: pointer;
padding: 12px 20px;
}
.survey-btn-next {
background: linear-gradient(80.05deg, #6648E9 -13.77%, #0BCAFF 115.49%);
border-radius: 99px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 18px;
color: #FFFFFF!important;
border: none;
padding: 12px 40px;
cursor: pointer;
transition: filter 0.2s;
}
.survey-btn-next:hover {
filter: brightness(0.92);
}
.survey-btn-next:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.survey-result-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
width: 100%;
gap: 20px;
}
.survey-result-icon {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.survey-result-title {
font-family: 'Inter', sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1.4;
color: #151515;
}
.survey-result-title .highlight {
color: #1A50EA;
}
.survey-result-reason {
font-family: 'Inter', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #555;
}
.survey-result-actions {
display: flex;
gap: 16px;
margin-top: 20px;
}
.survey-retake-btn {
border: 1px solid #2755EE;
border-radius: 99px;
}
.survey-view-pricing-btn {
display: inline-flex;
text-decoration: none;
}
@media (max-width: 1100px) {
.survey-popup-modal { width: 95%; height: 90vh; overflow-y: auto; padding: 24px; }
.survey-popup-shell { width: 95vw; }
.survey-popup-modal { width: 100%; }
.survey-progress-wrapper, .survey-content-box { width: 100%; }
.survey-content-box { flex-direction: column; height: auto; }
.survey-question-col { width: 100%; height: auto; }
.survey-image-col { width: 100%; height: 250px; }
.survey-close-btn {
right: -15px;
top: -15px;
}
}
@media (max-width: 768px) {
.survey-popup-modal {
width: 100%;
max-height: calc(100vh - 32px);
height: auto;
overflow-y: auto;
padding: 20px 14px 16px;
gap: 14px;
border-radius: 20px;
}
.survey-popup-shell { width: min(calc(100vw - 32px), 480px); }
.survey-close-btn {
top: -12px;
right: -12px;
width: 40px;
height: 40px;
padding: 0;
display: grid;
place-items: center;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, .15);
}
.survey-close-btn img {
width: 32px;
height: 32px;
max-width: 100%;
}
.survey-title {
font-size: 20px;
line-height: 26px;
margin-bottom: 2px;
}
.survey-progress-wrapper {
width: 100%;
gap: 6px;
}
.survey-question-label {
font-size: 13.5px;
font-weight: 600;
}
.survey-percentage {
font-size: 13.5px;
font-weight: 500;
}
.survey-progress-bar-bg {
height: 3px;
}
.survey-content-box {
width: 100%;
height: auto;
padding: 16px 12px;
gap: 12px;
border-radius: 16px;
flex-direction: column;
min-height: auto;
}
.survey-question-col {
width: 100%;
height: auto;
gap: 10px;
}
.survey-q-title {
font-size: 15px;
line-height: 1.4;
text-align: center;
margin-bottom: 2px;
}
.survey-options {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.survey-option {
min-height: 42px;
height: auto;
padding: 8px 12px;
border-radius: 12px;
border: 1.5px solid #E8E9EB;
justify-content: center;
text-align: center;
width: 100%;
}
.survey-option span {
font-size: 13px;
line-height: 1.4;
text-align: center;
display: block;
width: 100%;
}
.survey-option.active span {
font-weight: 500;
color: #0150E4;
}
.survey-image-col {
width: 100%;
height: 130px;
margin-top: 4px;
}
.survey-image-col img {
max-height: 130px;
width: auto;
object-fit: contain;
}
.survey-footer {
gap: 16px;
margin-top: 4px;
width: 100%;
}
.survey-btn-back {
font-size: 14px;
padding: 9px 16px;
}
.survey-btn-next {
font-size: 14px;
padding: 9px 28px;
}
.survey-result-box {
text-align: center;
align-items: center;
gap: 12px;
}
.survey-result-title {
font-size: 17px;
line-height: 1.4;
text-align: center;
}
.survey-result-reason {
font-size: 13.5px;
line-height: 1.5;
text-align: start;
}
.survey-result-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: 12px;
}
.survey-retake-btn {
padding: 9px 18px !important;
font-size: 13.5px !important;
}
.survey-view-pricing-btn {
padding: 9px 24px !important;
font-size: 13.5px !important;
}
}
/* Custom Select Dropdown */
.custom-select-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
border: 1px solid rgba(21, 21, 21, 0.15);
border-radius: 10px;
background: #FFFFFF;
}
.custom-select-trigger {
width: 100%;
border: none;
background: transparent;
padding: 10px 44px 10px 16px;
font-size: 16px;
color: rgba(21, 21, 21, 0.4);
cursor: pointer;
font-weight: 400;
line-height: 140%;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.custom-select-wrapper .input-icon-right {
position: absolute;
right: 16px;
pointer-events: none;
width: 24px;
height: 24px;
transition: transform 0.2s;
}
.custom-select-wrapper.open .input-icon-right {
transform: rotate(180deg);
}
.custom-options-container {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #fff;
border: 1px solid rgba(21, 21, 21, 0.1);
border-radius: 8px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
max-height: 250px;
overflow-y: auto;
z-index: 10;
display: none;
}
.custom-select-wrapper.open .custom-options-container {
display: block;
}
.custom-option {
padding: 10px 16px;
cursor: pointer;
color: #151515;
font-size: 16px;
transition: background 0.2s;
text-align: left;
}
.custom-option:hover {
background: #f3f3f3;
}
.custom-option.selected {
background-color: #EAF3FF;
color: #151515;
font-weight: 500;
}
.custom-options-container::-webkit-scrollbar {
width: 6px;
}
.custom-options-container::-webkit-scrollbar-track {
background: transparent;
}
.custom-options-container::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2);
border-radius: 10px;
}
@media (min-width: 400px) and (max-width: 440px) {
.hosting-hero {
background: #f0f8ff url('/landing/hosting_new/images/banner_mb_400.png') center top / cover no-repeat !important;
}
}
@media (min-width: 441px) and (max-width: 520px) {
.hosting-hero {
background: #f0f8ff url('/landing/hosting_new/images/banner_mb_480.png') center top / cover no-repeat !important;
}
}
@media (min-width: 521px) and (max-width: 600px) {
.hosting-hero {
background: #f0f8ff url('/landing/hosting_new/images/banner_mb_560.png') center top / cover no-repeat !important;
}
}
@media (min-width: 601px) and (max-width: 670px) {
.hosting-hero {
background: #f0f8ff url('/landing/hosting_new/images/banner_mb_640.png') center top / cover no-repeat !important;
}
}
@media (min-width: 671px) and (max-width: 730px) {
.hosting-hero {
background: #f0f8ff url('/landing/hosting_new/images/banner_mb_700.png') center top / cover no-repeat !important;
}
}
@media (min-width: 731px) and (max-width: 768px) {
.hosting-hero {
background: #f0f8ff url('/landing/hosting_new/images/banner_mb_768.png') center top / cover no-repeat !important;
}
}
@media (min-width: 600px) and (max-width: 1024px) {
.hosting-prices {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.hosting-prices::-webkit-scrollbar { display: none; }
.hosting-price {
flex: 0 0 calc((100% - 16px) / 2);
width: calc((100% - 16px) / 2);
min-width: 0;
scroll-snap-align: start;
margin-top: 46px;
}
.hosting-price-featured { margin-top: 0; }
.hosting-pricing-pagination { display: flex; }
}
@media (max-width: 599px) {
.hosting-prices {
padding-inline: max(0px, calc((100% - 343px) / 2));
}
.hosting-price {
flex: 0 0 min(343px, 100%);
width: min(343px, 100%);
min-width: 0;
}
}
/* Tablet: retain the desktop treatment while arranging the four metrics in two rows. */
@media (min-width: 550px) and (max-width: 991px) {
.hosting-numbers {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: 32px 48px;
padding: 32px 40px;
border-radius: 40px;
}
.hosting-numbers-slash.hosting-numbers-slash-row {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 80px;
height: 23px;
transform: translate(-50%, -50%) rotate(90deg);
pointer-events: none;
}
.hosting-numbers-item {
flex-direction: row;
justify-content: flex-start;
gap: 16px;
text-align: left;
}
.hosting-numbers-icon,
.hosting-numbers-icon img {
width: 70px;
height: 70px;
}
.hosting-numbers-text {
align-items: flex-start;
gap: 4px;
}
.hosting-numbers-text strong {
font-size: 24px;
}
.hosting-numbers-text p {
font-size: 16px;
text-align: left;
}
.hosting-numbers-text br {
display: initial;
}
.hosting-numbers-slash {
display: none;
}
}
/* Customer reviews: mobile measurements from the Figma 375px frame. */
@media (max-width: 768px) {
.custom-options-container {
max-height: 130px;
}
.hosting-reviews-container {
width: calc(100% - 32px);
/* max-width: 343px; */
gap: 0;
}
.hosting-reviews-intro h2 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 58px;
margin: 0 0 8px;
text-align: center;
}
.hosting-reviews-intro p {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
margin: 0 0 24px;
text-align: center;
}
.hosting-reviews-track-wrapper {
margin-bottom: 20px;
background: transparent;
}
.hosting-reviews-track {
width: 100%;
padding: 0;
background: transparent;
}
.hosting-review-card {
width: 100%;
height: 230px;
padding: 16px;
gap: 0;
align-items: stretch;
justify-content: center;
box-shadow: none !important;
}
.hosting-review-card-current {
box-shadow: none !important;
}
.hosting-review-stars {
justify-content: center;
margin-bottom: 12px;
}
.hosting-review-text {
height: 84px;
margin-bottom: 16px;
}
.hosting-review-line {
height: 1px;
margin-bottom: 16px;
}
.hosting-review-author {
align-items: center;
text-align: center;
}
.hosting-reviews-controls {
width: 101px;
height: 24px;
gap: 16px;
}
.hosting-review-prev,
.hosting-review-next {
width: 24px;
height: 24px;
padding: 6px;
}
.hosting-review-prev img,
.hosting-review-next img {
max-width: 24px!important;
width: 24px!important;
height: 24px!important;
}
.hosting-review-page {
font-size: 14px;
line-height: 17px;
}
}
/* Use a dedicated title line break for the mobile Figma layout. */
.hosting-reviews-title-mobile {
display: none;
}
@media (max-width: 768px) {
.hosting-reviews-intro .hosting-reviews-title-desktop {
display: none;
}
.hosting-reviews-intro .hosting-reviews-title-mobile {
display: flex;
grid-row: 1;
}
}
@media (max-width: 768px) {
.hosting-reviews-intro .hosting-reviews-title-mobile {
flex-direction: column;
flex-wrap: nowrap;
}
.hosting-reviews-title-mobile b,
.hosting-reviews-title-mobile span {
display: block;
font: inherit;
white-space: nowrap;
}
.hosting-section h3 {
font-size: 18px;
}
}
/* Keep the review carousel proportionate on tablet and small-desktop screens. */
@media (min-width: 769px) and (max-width: 1024px) {
.hosting-reviews-section {
padding: 56px 0;
}
.hosting-reviews-container {
width: min(976px, calc(100% - 48px));
gap: 24px;
}
.hosting-reviews-intro {
width: clamp(320px, 35vw, 360px);
height: 300px;
gap: 12px;
}
.hosting-reviews-intro h2 {
font-size: 32px;
}
.hosting-reviews-intro p {
font-size: 16px;
}
.hosting-reviews-controls {
gap: 12px;
margin-top: 6px;
}
.hosting-review-prev,
.hosting-review-next {
width: 32px;
height: 32px;
border-radius: 16px;
}
.hosting-review-prev img,
.hosting-review-next img {
width: 32px;
height: 32px;
}
.hosting-review-page {
font-size: 16px;
}
.hosting-reviews-track-wrapper {
height: 300px;
}
.hosting-reviews-track {
width: 100%;
gap: 25px;
}
/* Keeps enough trailing scroll space for the fifth card to become active. */
.hosting-reviews-track::after {
flex: 0 0 40px;
width: 40px;
}
.hosting-review-card {
width: min(360px, 100%);
height: 300px;
padding: 28px;
gap: 12px;
}
.hosting-review-text {
height: 112px;
font-size: 16px;
line-height: 1.4;
}
.hosting-review-author strong {
font-size: 18px;
}
.hosting-review-author span {
font-size: 14px;
}
}
/* Stack the two voucher cards on tablet while retaining their desktop card layout. */
@media (min-width: 769px) and (max-width: 1024px) {
.hosting-offers {
gap: 32px;
padding-bottom: 80px;
}
.hosting-offers-header h2 {
font-size: 28px;
}
.hosting-offers-header p {
font-size: 16px;
}
.hosting-offer-grid {
flex-direction: column;
align-items: center;
gap: 24px;
}
.hosting-offer-card {
width: min(100%, 658px);
max-width: 658px;
}
}
/* Mobile menu follows the cp_new_iid overlay treatment while preserving hosting links. */
.hosting-mobile-menu {
display: none;
}
@media (max-width: 768px) {
.hosting-nav {
display: none !important;
}
.hosting-mobile-menu {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
flex-direction: column;
min-height: 100dvh;
background: #E5F0FF url('/landing/hosting_new/images/background_menu_mb.svg') center / cover no-repeat;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease, visibility .2s ease;
}
.hosting-mobile-menu.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.hosting-mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
}
.hosting-mobile-menu-brand {
display: flex;
align-items: center;
gap: 8px;
}
.hosting-mobile-menu-logo,
.hosting-mobile-menu-logo img {
display: block;
width: 128px;
height: 28px;
}
.hosting-mobile-menu-award {
width: 28px;
height: 20px;
object-fit: contain;
}
.hosting-mobile-menu-close {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.hosting-mobile-menu-close img {
width: 24px;
height: 24px;
}
.hosting-mobile-menu-content {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.hosting-mobile-menu-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.hosting-mobile-menu-links a {
color: #333;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-decoration: none;
}
.hosting-mobile-menu-links a.active {
font-size: 16px;
line-height: 22px;
background: linear-gradient(80.05deg, #6648E9 -13.77%, #0BCAFF 115.49%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hosting-mobile-menu-register {
display: inline-flex;
align-items: center;
justify-content: center;
width: 160px;
height: 40px;
box-sizing: border-box;
margin-top: 30px;
border: 1px solid #0B91FF;
border-radius: 100px;
background: transparent;
color: #0059DF;
font: 500 14px/14px Inter, sans-serif;
cursor: pointer;
}
body.hosting-mobile-menu-open {
overflow: hidden;
}
}
/* Keep the brand cluster fixed when the mobile menu opens. */
@media (max-width: 768px) {
.hosting-mobile-menu-header {
height: 46px;
box-sizing: border-box;
padding: 8px 16px;
}
.hosting-mobile-menu-logo,
.hosting-mobile-menu-logo img {
width: 110px;
height: 24px;
}
.hosting-mobile-menu-award {
width: 32px;
height: 20px;
}
.contact-new-thanks p {
font-size: 14px;
}
.contact-new-thanks {
min-height: 350px;
}
.hosting-contact-thanks {
position: relative;
background: #ffffff;
border-radius: 24px;
padding: 36px 32px;
max-width: 600px;
width: 90%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
}