@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

body[data-page="hosting"]{
 --h-blue:#159fe3;
 --h-purple:#8247df;
 --h-cyan:#25c6d9;
 --h-orange:#ff8a2b;
 --h-green:#31b879;
 --h-ink:#101827;
 --h-copy:#475461;
 --h-line:#cddae2;

 color-scheme:light!important;
 color:var(--h-ink)!important;
 font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
 background:
  radial-gradient(740px 470px at 12% 18%,rgba(28,194,215,.12),transparent 70%),
  radial-gradient(650px 430px at 80% 15%,rgba(130,71,223,.10),transparent 70%),
  linear-gradient(rgba(68,112,142,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(68,112,142,.055) 1px,transparent 1px),
  #f9fcff!important;
 background-size:auto,auto,52px 52px,52px 52px,auto!important;
 -webkit-font-smoothing:antialiased;
}

body[data-page="hosting"] .container{max-width:1420px!important}

/* NAV */
body[data-page="hosting"] .nav{
 position:relative!important;z-index:1000!important;
 background:rgba(255,255,255,.96)!important;
 border-bottom:1px solid #e2e8ec!important;
 box-shadow:0 4px 18px rgba(31,50,64,.05)!important;
}
body[data-page="hosting"] .nav .container.in{
 max-width:1420px!important;min-height:74px!important;
 padding:9px 24px!important;display:flex!important;align-items:center!important;gap:22px!important;
}
body[data-page="hosting"] .nav .brand{flex:0 0 220px!important;min-width:0!important}
body[data-page="hosting"] .nav #brand{color:#101827!important;font-size:16px!important;font-weight:800!important}
body[data-page="hosting"] .nav #tagline{color:#60717e!important;font-size:8px!important}
body[data-page="hosting"] .nav #menu{flex:1!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:2px!important}
body[data-page="hosting"] .nav #menu>a.link{
 display:inline-flex!important;visibility:visible!important;opacity:1!important;filter:none!important;
 align-items:center!important;min-height:37px!important;padding:0 7px!important;
 color:#29343e!important;-webkit-text-fill-color:#29343e!important;
 background:transparent!important;border-radius:8px!important;font-size:11px!important;font-weight:600!important;
}
body[data-page="hosting"] .nav #menu>a.link:hover{background:#f2f7fa!important}
body[data-page="hosting"] .nav #menu>a.link.is-on{color:#101827!important;-webkit-text-fill-color:#101827!important;font-weight:800!important}
body[data-page="hosting"] .nav #menu>a.link.is-on::after{background:var(--h-blue)!important;box-shadow:none!important}
body[data-page="hosting"] .nav #menu>.btn{
 min-height:39px!important;margin-left:4px!important;padding:0 13px!important;
 border-radius:999px!important;font-size:10px!important;font-weight:700!important;
}
body[data-page="hosting"] .nav #menu>.btn:not(.primary):not(.ghost){color:#fff!important;background:linear-gradient(135deg,#734ad3,#8d46dc)!important;border:0!important}
body[data-page="hosting"] .nav #menu>.btn.ghost{color:#29343e!important;background:#fff!important;border:1px solid #d2dde4!important}
body[data-page="hosting"] .nav #menu>.btn.primary{color:#fff!important;background:linear-gradient(90deg,#ff9224,#ff653c)!important;border:0!important}

/* HERO */
body[data-page="hosting"] .container.hero{
 position:relative!important;overflow:hidden;
 margin-top:28px!important;padding:55px 48px!important;
 min-height:390px!important;border:1px solid #c7dce5!important;border-radius:24px!important;
 background:
  radial-gradient(450px 280px at 76% 48%,rgba(91,89,226,.17),transparent 70%),
  radial-gradient(420px 280px at 58% 30%,rgba(20,185,216,.14),transparent 70%),
  rgba(248,253,255,.88)!important;
 box-shadow:0 18px 45px rgba(39,70,88,.09)!important;
}
body[data-page="hosting"] .container.hero::after{
 content:""!important;position:absolute!important;right:6%!important;top:55px!important;
 width:38%!important;height:275px!important;
 background:
  radial-gradient(circle at 52% 50%,rgba(100,92,229,.20),transparent 42%),
  radial-gradient(circle at 50% 50%,rgba(28,192,220,.14),transparent 62%)!important;
 opacity:1!important;mix-blend-mode:normal!important;border-radius:50%!important;
 pointer-events:none!important;
}
body[data-page="hosting"] .heroGrid{display:grid!important;grid-template-columns:1.05fr .95fr!important;gap:40px!important;position:relative;z-index:2}
body[data-page="hosting"] .pretitle{
 color:#fff!important;background:linear-gradient(90deg,#149ddf,#7950da)!important;
 border:0!important;font-size:10px!important;font-weight:800!important;
}
body[data-page="hosting"] .kicker{margin-top:18px;color:#357289!important;font-size:10px!important}
body[data-page="hosting"] .h1{
 color:var(--h-ink)!important;font-size:clamp(42px,4.4vw,65px)!important;
 line-height:1.03!important;letter-spacing:-.05em!important;font-weight:800!important;
}
body[data-page="hosting"] .h1 br + *{color:var(--h-purple)}
body[data-page="hosting"] .sub{
 max-width:650px!important;color:var(--h-copy)!important;font-size:14px!important;line-height:1.65!important;
}
body[data-page="hosting"] .hero .cta .btn{
 min-height:46px!important;padding:0 21px!important;border-radius:999px!important;font-size:12px!important;
}
body[data-page="hosting"] .hero .cta .btn.primary{
 color:#fff!important;background:linear-gradient(90deg,var(--h-blue),var(--h-purple))!important;border:0!important;
 box-shadow:0 10px 22px rgba(52,102,207,.20)!important;
}
body[data-page="hosting"] .hero .cta .btn.ghost{
 color:#34414c!important;background:#fff!important;border:1px solid #c9d7df!important;
}

/* steps = operating status / trust */
body[data-page="hosting"] .container.section:first-of-type{
 padding-top:25px!important;padding-bottom:28px!important;
}
body[data-page="hosting"] .container.section:first-of-type .h2{
 color:var(--h-ink)!important;font-size:25px!important;font-weight:800!important;
}
body[data-page="hosting"] .prhSteps{
 display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:13px!important;
}
body[data-page="hosting"] .prhStep{
 padding:18px!important;border:1px solid #d0dce3!important;border-radius:16px!important;
 background:#fff!important;box-shadow:0 9px 22px rgba(38,61,76,.06)!important;
}
body[data-page="hosting"] .prhStep em{
 color:#fff!important;background:linear-gradient(135deg,var(--h-blue),var(--h-purple))!important;
}
body[data-page="hosting"] .prhStep b{color:var(--h-ink)!important}
body[data-page="hosting"] .prhStep p{color:#62707b!important}

/* packages */
body[data-page="hosting"] #hostingPackages{
 padding-top:35px!important;padding-bottom:45px!important;
}
body[data-page="hosting"] #hostingPackages .h2{
 color:var(--h-ink)!important;font-size:32px!important;font-weight:800!important;letter-spacing:-.03em!important;
}
body[data-page="hosting"] #prhHostingPackagesGrid{
 display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:15px!important;margin-top:22px!important;
}
body[data-page="hosting"] .prhPkgCard{
 min-height:455px!important;padding:20px!important;display:flex!important;flex-direction:column!important;
 border:1px solid #cedae2!important;border-top:3px solid var(--h-blue)!important;
 border-radius:18px!important;background:#fff!important;
 box-shadow:0 13px 28px rgba(39,61,76,.08)!important;backdrop-filter:none!important;
}
body[data-page="hosting"] .prhPkgCard:nth-child(2){border-top-color:var(--h-purple)!important}
body[data-page="hosting"] .prhPkgCard:nth-child(3){border-top-color:var(--h-orange)!important}
body[data-page="hosting"] .prhPkgCard:nth-child(4){border-top-color:var(--h-green)!important}
body[data-page="hosting"] .prhPkgBadge{
 width:max-content;color:#257392!important;background:#e9f8fd!important;border:1px solid #b8e2ee!important;
}
body[data-page="hosting"] .prhPkgName{color:var(--h-ink)!important;font-size:23px!important}
body[data-page="hosting"] .prhPkgPrice{color:var(--h-blue)!important;font-size:36px!important}
body[data-page="hosting"] .prhPkgNote{color:#65727d!important}
body[data-page="hosting"] .prhPkgUl{margin-bottom:20px!important}
body[data-page="hosting"] .prhPkgUl li{color:#33404b!important;font-size:12px!important}
body[data-page="hosting"] .prhPkgUl li::before{background-color:#e8f8fd!important;border-color:#b9e4ef!important}
body[data-page="hosting"] .prhPkgCta{margin-top:auto!important}
body[data-page="hosting"] .prhOrderBtn{
 min-height:43px!important;padding:0 19px!important;color:#fff!important;
 background:linear-gradient(90deg,var(--h-blue),var(--h-purple))!important;
 border:0!important;border-radius:999px!important;font-size:12px!important;
}

/* billing toggle stays functional, visual only */
body[data-page="hosting"] .prhCardBilling{
 background:#f3f8fb!important;border:1px solid #d0dce3!important;
 box-shadow:none!important;backdrop-filter:none!important;
}
body[data-page="hosting"] .prhCardBilling .prhCardBillBtn{
 color:#46535f!important;background:#fff!important;border:1px solid #d0dce3!important;
}
body[data-page="hosting"] .prhCardBilling .prhCardBillBtn.isActive{
 color:#fff!important;background:linear-gradient(90deg,var(--h-blue),var(--h-purple))!important;
 border-color:transparent!important;
}

/* footer */
body[data-page="hosting"] .prhFoot{
 margin-top:20px!important;padding-top:27px!important;background:#fbfdff!important;
 border-top:1px solid #dfe7eb!important;color:#34414c!important;
}
body[data-page="hosting"] .prhFoot .prhFeatBar{
 background:#fff!important;border:1px solid #cedbe2!important;
 box-shadow:0 8px 20px rgba(40,62,76,.05)!important;
}
body[data-page="hosting"] .prhFeatItem b{color:var(--h-ink)!important}
body[data-page="hosting"] .prhFeatItem>div span{color:#66737e!important}
body[data-page="hosting"] .prhFootBrand b,
body[data-page="hosting"] .prhFootCol h3{color:#17212b!important}
body[data-page="hosting"] .prhFootBrand small,
body[data-page="hosting"] .prhFootBrand p,
body[data-page="hosting"] .prhFootCol a,
body[data-page="hosting"] .prhFootLegal,
body[data-page="hosting"] .prhFootLegal a{color:#606d78!important}
body[data-page="hosting"] .prhFootCol h3::after{
 background:linear-gradient(90deg,var(--h-blue),var(--h-purple))!important;box-shadow:none!important;
}

@media(max-width:1100px){
 body[data-page="hosting"] #prhHostingPackagesGrid{grid-template-columns:1fr 1fr!important}
 body[data-page="hosting"] .heroGrid{grid-template-columns:1fr!important}
 body[data-page="hosting"] .container.hero::after{opacity:.25!important}
}
@media(max-width:700px){
 body[data-page="hosting"] .container.hero{margin:16px!important;padding:32px 20px!important}
 body[data-page="hosting"] .h1{font-size:40px!important}
 body[data-page="hosting"] .prhSteps,
 body[data-page="hosting"] #prhHostingPackagesGrid{grid-template-columns:1fr!important}
}