:root{--hosting-blue:#0763f6;--hosting-ink:#081c40;--hosting-muted:#5a6d8a;--hosting-line:#d8e6fa;--hosting-shadow:0 7px 18px #1459bc0d}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;color:var(--hosting-ink);background:#f7faff;font-family:'Noto Sans CJK SC','Microsoft YaHei',sans-serif;-webkit-font-smoothing:antialiased}.hosting-page h1,.hosting-page h2,.hosting-page h3,.hosting-page p{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}:focus-visible{outline:3px solid #12a4ff;outline-offset:4px}[hidden]{display:none!important}.hosting-shell{width:min(1400px,100%);padding-inline:clamp(22px,5vw,74px);margin:auto}.hosting-section{padding:42px 0}.hosting-page h2{font-size:clamp(30px,2.8vw,40px);font-weight:900;line-height:1.4;letter-spacing:-.8px;text-wrap:balance}.hosting-heading{margin-bottom:24px}.hosting-heading>p{font-size:16px;line-height:1.85;color:var(--hosting-muted);margin-top:8px}.hosting-icon{display:inline-block;width:29px;height:29px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;color:var(--hosting-blue)}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}.hosting-button{display:inline-flex;justify-content:center;align-items:center;gap:9px;border:1px solid transparent;border-radius:30px;background:linear-gradient(115deg,#1081ff,#0052e8);padding:13px 24px;color:#fff;font-size:15px;font-weight:800;line-height:1.4;white-space:nowrap;box-shadow:0 6px 15px #1064ef1a;transition:transform .18s,box-shadow .18s}.hosting-button:hover{transform:translateY(-2px);box-shadow:0 9px 20px #1064ef33}.hosting-button.outline{border-color:#3885ff;background:#ffffffb8;color:#0562ed;box-shadow:none}.hosting-button.dark-outline{border-color:#b7d4ff;background:#ffffff0b;color:#fff;box-shadow:none}.hosting-button .hosting-icon{color:inherit;width:20px;height:20px}.hosting-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.hosting-skip{position:absolute;top:-80px;left:12px;background:#fff;padding:12px;z-index:60}.hosting-skip:focus{top:10px}.check-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}.check-list>li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:#455a7b;line-height:1.65}.check-list .hosting-icon{width:16px;height:16px;stroke-width:2.4;margin-top:4px}.check-list strong{color:#152e55;font-weight:750}
.hosting-hero{position:relative;background:linear-gradient(110deg,#f6faff,#e4f0ff 52%,#b9daff);overflow:hidden}.hero-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:0;align-items:center;min-height:430px}.hero-copy{position:relative;z-index:1;padding:50px 0 28px}.hosting-page .hero-copy h1{font-size:clamp(35px,3.55vw,51px);font-weight:900;line-height:1.3;letter-spacing:-1.4px;max-width:750px}.hero-copy h1 span{color:#0664ec}.hosting-page .hero-copy>p{font-size:17px;line-height:1.85;max-width:635px;color:#314b72;margin:18px 0 24px}.hero-art{align-self:stretch;display:flex;align-items:center;margin-right:-65px}.hero-art img{width:115%;max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover;mix-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 90%,transparent)}.hero-trust{display:flex;list-style:none;padding:0;margin:30px 0 0;gap:0;flex-wrap:wrap;row-gap:15px}.hero-trust li{display:flex;align-items:center;gap:8px;border-right:1px solid #adcaf0;padding:0 16px;font-size:13px;font-weight:700;color:#2c4977}.hero-trust li:first-child{padding-left:0}.hero-trust li:last-child{border:0}.hero-trust .hosting-icon{width:24px;height:24px}
.types-section{background:linear-gradient(130deg,#f4f9ff,#edf4ff)}.hosting-types{display:grid;grid-template-columns:1fr 1fr;gap:16px}.type-card{display:flex;align-items:center;gap:24px;padding:26px;background:linear-gradient(130deg,#fff,#f5f9ff);border:1px solid var(--hosting-line);border-bottom-color:#bed8ff;border-radius:15px;box-shadow:var(--hosting-shadow);transition:transform .2s,box-shadow .2s}.type-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #1459bc16}.type-art{display:grid;place-items:center;width:100px;height:100px;flex:0 0 100px;position:relative;background:linear-gradient(145deg,#f4fbff,#b8dcff);border-radius:24px;box-shadow:inset 0 2px 3px #fff,0 12px 18px #2368c914;transform:perspective(500px) rotateY(-12deg) rotateX(5deg)}.type-art:after{content:'';position:absolute;inset:8px;border:1px solid #ffffffa8;border-radius:18px}.type-art .hosting-icon{width:62px;height:62px;stroke-width:1.3;filter:drop-shadow(3px 5px 0 #fff)}.wordpress-mark{display:grid;place-items:center;font-family:Georgia,serif;font-weight:700;font-size:48px;line-height:1;color:#fff;border-radius:50%;width:66px;height:66px;background:#0872f8;border:3px solid #b7e0ff;box-shadow:0 5px 9px #0763f633}.hosting-page .type-card h3{font-size:22px;font-weight:850;line-height:1.5;margin-bottom:10px;letter-spacing:-.2px}.type-card h3 small{font-size:15px;font-weight:700;white-space:normal}.type-card .check-list{gap:8px}
.advisor-section{position:relative;overflow:hidden;background:radial-gradient(ellipse at 65% 70%,#1569c8,#0a3b8a 48%,#072b68);color:#fff;padding:36px 0}.advisor-section .hosting-heading>p{color:#c5ddff}.advisor-layout{display:grid;grid-template-columns:1fr 1.02fr .35fr;gap:28px;align-items:start;position:relative}.advisor-form{position:relative;z-index:2;display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:13px 10px;padding:25px;background:linear-gradient(130deg,#fff,#edf5ff);border:1px solid #c8ddfb;border-radius:14px;box-shadow:0 15px 28px #03276222;color:#102952}.advisor-form label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:750}.advisor-form label .hosting-icon{width:23px;height:23px;border-radius:5px}.advisor-form select{min-width:0;width:100%;min-height:42px;padding:9px 12px;border:1px solid #c4d9fa;background:#f6faff;border-radius:7px;color:#314b73;font-size:13px}.advisor-form>.hosting-button{grid-column:1/-1;border-radius:7px;margin-top:3px;padding:13px}.advisor-answer{position:relative;z-index:2}.recommendation{padding:20px;background:linear-gradient(130deg,#d3e9ffc9,#a7d1ffcf);border:1px solid #d6eaff;border-radius:15px;color:#0d2d5a;box-shadow:0 14px 35px #00285b2b;backdrop-filter:blur(5px)}.hosting-page .recommendation>h3{font-size:22px;display:flex;align-items:center;gap:10px;margin:0 0 13px}.recommendation-inner{border-radius:12px;padding:18px;background:#f4f9ffed}.recommendation-title{display:flex;gap:12px;align-items:center;margin-bottom:12px}.recommendation-title>.hosting-icon{width:40px;height:40px}.recommendation-title p{font-size:17px;line-height:1.6;font-weight:750}.recommendation-title strong{color:#0764ef}.recommendation-inner .check-list{gap:8px}.recommendation-inner .check-list>li{font-size:13px;line-height:1.7}.recommendation-link{display:inline-block;font-size:13px;color:#0b5ce6;font-weight:750;margin:15px 0 0 24px;text-underline-offset:4px}.recommendation-link:hover{text-decoration:underline}.hosting-page .advisor-note{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.6;color:#c8dfff;margin-top:12px}.advisor-note .hosting-icon{color:#a4d1ff;width:18px;height:18px;margin-top:1px}.advisor-art{position:absolute;width:42%;max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover;right:-110px;top:0;mix-blend-mode:screen;mask-image:radial-gradient(ellipse 65% 70%,#000 35%,transparent 80%);pointer-events:none;z-index:0}
.providers-section{background:linear-gradient(125deg,#f7fbff,#eaf3ff)}.provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.provider-card{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:20px 22px;border:1px solid #d4e3fa;border-bottom-color:#bad1fa;border-radius:12px;background:#ffffffa8;box-shadow:var(--hosting-shadow);scroll-margin-top:110px;transition:border-color .2s,box-shadow .2s}.provider-card:target{border-color:#096fff;box-shadow:0 0 0 3px #096fff20}.provider-body{min-width:0}.hosting-page .provider-body h3{display:flex;align-items:center;gap:12px;font-size:23px;font-family:Arial,'Microsoft YaHei',sans-serif;margin-bottom:8px}.provider-mark{display:inline-flex;align-items:center;justify-content:center;width:35px;height:30px;color:#6a3ce5;font-size:30px;font-weight:1000;line-height:1}.provider-mark .hosting-icon{width:36px;height:32px;stroke-width:2.2;color:inherit}.provider-siteground .provider-mark{color:#719f12}.provider-cloudways .provider-mark{color:#0a63ff}.provider-vercel .provider-mark{color:#050a16}.provider-cloudflare .provider-mark{color:#f48a17}.provider-vultr .provider-mark{color:#0867f3}.provider-card .check-list{gap:3px}.provider-card .check-list li{font-size:13px;line-height:1.65}.provider-card .check-list .hosting-icon{width:14px;height:14px}.provider-link{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid #b9d6ff;background:#edf5ff;color:#0860eb;border-radius:24px;padding:9px 13px;font-size:12px;font-weight:800;white-space:nowrap}.provider-link:hover{background:#d9ebff}
.steps-section{background:#f7faff}.purchase-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:0;gap:40px}.purchase-steps>li{display:flex;position:relative;align-items:flex-start;gap:16px;background:linear-gradient(130deg,#fff,#edf5ff);border:1px solid #d6e6fa;border-bottom-color:#b0cfff;border-radius:12px;box-shadow:var(--hosting-shadow);padding:22px 20px}.purchase-steps>li>.hosting-icon{width:36px;height:36px;stroke-width:1.5}.step-number{display:block;color:#065ef2;font-size:22px;font-weight:850;line-height:1.1;margin-bottom:4px}.hosting-page .purchase-steps h3{font-size:19px;line-height:1.4}.hosting-page .purchase-steps p{font-size:14px;line-height:1.75;color:var(--hosting-muted);margin-top:10px}.purchase-steps>li:not(:last-child):after{content:'→';position:absolute;top:40%;right:-30px;color:#0869ff;font-size:24px;font-weight:700}
.location-section{padding-block:26px;background:linear-gradient(120deg,#eaf4ff,#f7faff)}.location-layout{display:grid;grid-template-columns:.65fr 1fr;gap:35px;align-items:center}.location-layout>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;mix-blend-mode:multiply;border-radius:12px}.hosting-page .location-layout h2{font-size:29px}.location-layout .hosting-heading{margin-bottom:20px}.location-layout .hosting-heading>p{font-size:15px}.location-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.location-grid article{padding:0 15px;border-right:1px solid #bfd6f8}.location-grid article:first-child{padding-left:0}.location-grid article:last-child{border:0;padding-right:0}.hosting-page .location-grid h3{font-size:16px;line-height:1.5}.location-grid h3 .hosting-icon{display:block;width:28px;height:28px;margin-bottom:10px}.hosting-page .location-grid p{font-size:13px;color:var(--hosting-muted);line-height:1.75;margin-top:8px}
.setup-section{background:linear-gradient(120deg,#f3f8ff,#e7f1ff);padding-block:32px}.split-layout{display:grid;grid-template-columns:1fr 1fr;gap:36px}.split-layout>div+div{border-left:1px solid #b9d6ff;padding-left:36px}.hosting-page .split-layout h2{font-size:29px;letter-spacing:-.5px}.connection-flow{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;padding:28px 18px;margin:20px 0 0;background:linear-gradient(130deg,#e6f1ff,#cddfff);border:1px solid #d5e7ff;border-radius:16px;gap:15px}.connection-flow li{text-align:center;position:relative;flex:1}.connection-flow li>.hosting-icon{width:45px;height:45px;stroke-width:1.3;filter:drop-shadow(3px 5px 0 #fff);margin-bottom:16px}.hosting-page .connection-flow h3{font-size:16px;white-space:nowrap}.hosting-page .connection-flow p{font-size:11px;color:#4c6180;line-height:1.5;margin-top:5px}.connection-flow li:not(:last-child):after{content:'→';color:#0e68f6;position:absolute;top:15px;right:-15px;font-size:21px}.hosting-page .setup-checklist h2{font-size:24px;margin-bottom:15px}.setup-checklist .check-list{gap:6px}.setup-checklist .check-list li{font-size:13px}
.maintenance-section{padding-block:35px;background:#f5f9ff}.maintenance-section .hosting-heading{margin-bottom:18px}.maintenance-section .hosting-heading>p{font-size:14px}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mini-grid article{display:flex;gap:12px;padding:16px 14px;border:1px solid #e0eafa;border-radius:11px;background:#ffffffa6;box-shadow:0 5px 12px #1459bc06}.mini-grid .hosting-icon{width:28px;height:28px;margin-top:3px}.hosting-page .mini-grid h3{font-size:16px;line-height:1.45;margin-bottom:6px}.hosting-page .mini-grid p{font-size:12px;line-height:1.7;color:var(--hosting-muted)}
.hosting-faq-section{padding-block:35px;background:linear-gradient(120deg,#eef6ff,#f9fbff)}.hosting-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 30px;align-items:start}.hosting-faq-grid details{border:1px solid #cddffa;border-radius:8px;background:#ffffffb8;box-shadow:0 3px 9px #0b58a408}.hosting-faq-grid summary{display:flex;align-items:center;gap:10px;list-style:none;padding:11px 15px;cursor:pointer;font-size:14px;font-weight:750;line-height:1.6}.hosting-faq-grid summary::-webkit-details-marker{display:none}.hosting-faq-grid summary>.hosting-icon{width:17px;height:17px;stroke-width:2}.faq-chevron{margin-left:auto;color:#6185b7;font-size:16px;transition:transform .2s}.hosting-faq-grid details[open] .faq-chevron{transform:rotate(180deg)}.hosting-page .hosting-faq-grid details>p{padding:0 18px 16px;margin-left:26px;font-size:14px;line-height:1.85;color:var(--hosting-muted)}
.hosting-cta{background:#05337a;color:#fff;position:relative;overflow:hidden;padding:32px 0}.hosting-cta:before{content:'';position:absolute;inset:0 0 0 45%;background:linear-gradient(90deg,#05337a,transparent),url('../images/hosting-guide/hosting-hero.jpg') center 43%/cover;mix-blend-mode:luminosity;opacity:.65}.hosting-cta>.hosting-shell{position:relative}.hosting-page .hosting-cta h2{font-size:34px;max-width:1000px}.hosting-page .hosting-cta p{font-size:15px;line-height:1.85;color:#d1e3ff;margin:8px 0 20px}.hosting-cta .hosting-button{font-size:14px;padding:11px 20px}
@media(max-width:1200px){.hero-layout{grid-template-columns:1.2fr 1fr}.hosting-page .hero-copy h1{font-size:40px}.hosting-page .hero-copy>p{font-size:16px}.hero-trust{gap:12px 0}.hero-trust li{font-size:12px;padding-inline:10px}.type-card{gap:18px;padding:22px}.type-art{width:72px;height:85px;flex-basis:72px;border-radius:18px}.type-art .hosting-icon{width:48px;height:48px}.wordpress-mark{width:53px;height:53px;font-size:39px}.type-card h3 small{display:block;font-size:13px}.hosting-page .type-card h3{font-size:21px}.advisor-layout{grid-template-columns:1fr 1fr;gap:25px}.advisor-art{display:none}.advisor-form{grid-template-columns:115px 1fr;padding:22px}.provider-card{flex-direction:column;align-items:stretch;gap:12px}.provider-link{align-self:flex-end}.purchase-steps{gap:24px}.purchase-steps>li{gap:10px;padding:20px 15px}.purchase-steps>li>.hosting-icon{width:28px;height:28px}.purchase-steps>li:not(:last-child):after{right:-20px;font-size:20px}.hosting-page .purchase-steps h3{font-size:17px}.location-layout{grid-template-columns:.5fr 1fr;gap:25px}.split-layout{gap:24px}.split-layout>div+div{padding-left:24px}.hosting-page .split-layout h2{font-size:25px}.hosting-page .setup-checklist h2{font-size:22px}.connection-flow{gap:10px;padding:24px 10px}.connection-flow li>.hosting-icon{width:35px;height:35px}.hosting-page .connection-flow h3{font-size:13px}.hosting-page .connection-flow p{font-size:10px}.connection-flow li:not(:last-child):after{right:-12px;font-size:18px}.mini-grid{grid-template-columns:1fr}}
@media(max-width:900px){.hosting-page .hero-copy h1{font-size:36px}.hero-layout{grid-template-columns:1.2fr 1fr}.hero-art{margin-right:-40px}.hosting-actions{gap:12px}.hero-trust li{border:0;padding:0 14px 0 0}.hero-copy{padding-top:35px}.hosting-types{gap:13px}.type-card{display:block;padding:22px}.type-art{margin-bottom:18px;width:72px;height:72px}.hosting-page .type-card h3{font-size:20px}.advisor-form{grid-template-columns:1fr;gap:8px;padding:22px}.advisor-form label{margin-top:4px}.advisor-form select{font-size:14px}.advisor-form>.hosting-button{margin-top:10px}.recommendation{padding:16px}.recommendation-inner{padding:16px}.purchase-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.purchase-steps>li:not(:last-child):after{display:none}.purchase-steps>li{padding:24px}.purchase-steps>li>.hosting-icon{width:35px;height:35px}.hosting-page .purchase-steps h3{font-size:20px}.location-layout{grid-template-columns:1fr}.location-layout>img{max-width:500px;margin:auto}.split-layout{grid-template-columns:1fr;gap:30px}.split-layout>div+div{padding-left:0;border:0}.mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hosting-page .split-layout h2{font-size:29px}.connection-flow{max-width:700px;margin-inline:auto;padding:30px 24px;gap:24px}.connection-flow li>.hosting-icon{width:45px;height:45px}.hosting-page .connection-flow h3{font-size:16px}.hosting-page .connection-flow p{font-size:12px}.connection-flow li:not(:last-child):after{right:-23px;font-size:23px}.hosting-faq-grid{gap:10px 20px}.hosting-page .hosting-cta h2{font-size:29px}}
@media(max-width:700px){.hero-layout{display:flex;flex-direction:column;align-items:stretch}.hero-copy{padding:35px 0 18px}.hero-art{margin:0 -22px;display:block}.hero-art img{display:block;width:100%;max-width:100%}.hosting-page .hero-copy h1{font-size:clamp(34px,6.4vw,44px);line-height:1.35;letter-spacing:-1px}.hosting-page .hero-copy>p{font-size:16px;line-height:1.85}.hosting-page h2{font-size:31px;line-height:1.4;letter-spacing:-.5px}.hosting-heading>p{font-size:15px}.hosting-section{padding-block:35px}.hero-trust{margin-top:24px}.hero-trust li{font-size:12px}.hero-trust .hosting-icon{width:22px;height:22px}.hosting-types{grid-template-columns:1fr}.type-card{display:flex;gap:20px}.type-art{margin:0;flex-basis:70px}.hosting-page .type-card h3{font-size:21px}.type-card .check-list>li{font-size:14px}.advisor-layout{grid-template-columns:1fr;gap:20px}.advisor-form{grid-template-columns:140px minmax(0,1fr);gap:14px 10px}.advisor-form select{font-size:14px}.advisor-answer{margin:0}.recommendation-inner .check-list>li{font-size:14px}.provider-grid{grid-template-columns:1fr}.provider-card{display:flex;flex-direction:row;align-items:center;gap:15px}.provider-card .check-list li{font-size:14px}.provider-link{font-size:12px;align-self:center}.location-grid{grid-template-columns:1fr 1fr;gap:25px 0}.location-grid article:nth-child(2n){border:0}.location-grid article:nth-child(3){padding-left:0}.location-grid article:last-child{padding-right:15px}.hosting-page .location-grid h3{display:flex;align-items:center;gap:10px;font-size:17px}.location-grid h3 .hosting-icon{margin:0;width:26px;height:26px}.hosting-page .location-grid p{font-size:14px}.mini-grid{grid-template-columns:1fr 1fr}.hosting-page .mini-grid h3{font-size:17px}.hosting-page .mini-grid p{font-size:13px}.mini-grid article{padding:18px 14px}.hosting-faq-grid{grid-template-columns:1fr}.hosting-faq-grid summary{font-size:15px;padding:13px 15px}.hosting-page .hosting-faq-grid details>p{font-size:15px;margin-left:0}.hosting-cta:before{left:20%;opacity:.25}.hosting-cta .hosting-actions{gap:12px}.hosting-page .hosting-cta h2{font-size:29px}.hosting-page .setup-checklist h2{font-size:26px}.setup-checklist .check-list li{font-size:14px}}
@media(max-width:480px){.type-card{align-items:flex-start;padding:22px 18px;gap:15px}.type-art{flex-basis:58px;width:58px;height:68px}.type-art .hosting-icon{width:42px;height:42px}.wordpress-mark{width:46px;height:46px;font-size:34px}.type-card h3 small{font-size:12px}.advisor-form{grid-template-columns:1fr;padding:22px;gap:8px}.advisor-form select{font-size:16px;min-height:45px}.advisor-form label{font-size:15px}.provider-card{flex-direction:column;align-items:stretch;padding:20px}.provider-link{align-self:flex-end;font-size:13px}.purchase-steps{grid-template-columns:1fr}.purchase-steps>li{padding:24px;gap:18px}.connection-flow{flex-wrap:wrap;justify-content:center;gap:22px 12px;padding:24px 15px}.connection-flow li{flex:0 0 calc(33.333% - 12px)}.connection-flow li:nth-child(3):after{display:none}.connection-flow li:not(:last-child):after{right:-13px;font-size:19px}.hosting-page .connection-flow h3{font-size:14px}.hosting-page .connection-flow p{font-size:10px}.mini-grid{grid-template-columns:1fr}.mini-grid article{padding:20px}.hosting-page .mini-grid p{font-size:14px}.hosting-actions .hosting-button{font-size:14px;padding:12px 18px}.hero-trust{display:grid;grid-template-columns:1fr 1fr;gap:14px 8px}.hero-trust li{padding:0;font-size:11px}.hosting-page .hero-copy h1{font-size:34px}.hosting-page .location-layout h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}