:root{--package-blue:#075ff0;--package-ink:#0a1b40;--package-muted:#526685;--package-line:#d5e3f8}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;font-family:'Noto Sans CJK SC','Microsoft YaHei',sans-serif;background:#f5f9ff;color:var(--package-ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.packages-page h1,.packages-page h2,.packages-page h3,.packages-page p{margin:0}.package-shell{width:min(1400px,100%);margin:0 auto;padding-inline:clamp(22px,5vw,74px)}.package-icon{display:inline-block;width:32px;height:32px;vertical-align:middle;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--package-blue)}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}.package-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.package-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:9px;background:linear-gradient(115deg,#117bff,#004ae5);padding:13px 28px;font-size:16px;font-weight:800;color:white;line-height:1.45;white-space:nowrap;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 20px #1269eb13}.package-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px #1269eb25}.package-button.outline{background:#ffffffa8;color:#0759df;border-color:#72a2f7;box-shadow:none}.package-button.white{background:#fff;color:#0759df}.package-button.light-outline{background:transparent;border-color:#c6ddff;color:#fff;box-shadow:none}:focus-visible{outline:3px solid #12adff;outline-offset:4px}.package-skip{position:absolute;z-index:60;left:12px;top:-80px;padding:12px;background:white}.package-skip:focus{top:12px}
.package-hero{background:linear-gradient(112deg,#edf5ff,#e1eeff 45%,#a9cfff);overflow:hidden}.hero-layout{display:grid;grid-template-columns:1fr 1.12fr;gap:30px;align-items:center;min-height:410px}.hero-copy{position:relative;z-index:1;padding:42px 0 48px}.hero-label{display:inline-block;border-radius:25px;background:#d6e7ff;color:#0660e8;font-size:14px;font-weight:800;padding:7px 17px;margin-bottom:17px}.packages-page .hero-copy h1{font-size:clamp(38px,4.1vw,58px);line-height:1.24;letter-spacing:-1.4px;font-weight:900}.packages-page .hero-copy>p{font-size:18px;line-height:1.85;max-width:600px;margin:20px 0 26px;color:#233f67}.hero-visual{position:relative;min-width:0;margin-right:-30px;aspect-ratio:1.55;display:flex;align-items:center}.hero-visual>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 73% 68%,#000 52%,transparent 88%)}.hero-feature{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:120px;min-height:100px;border:2px solid #fff;border-radius:19px;background:linear-gradient(145deg,#ffffffdd,#d2e6ffed);box-shadow:5px 7px 0 #81b4f23d,0 10px 26px #2c77d322;backdrop-filter:blur(8px);font-size:17px;font-weight:850;transform:skew(-5deg)}.hero-feature .package-icon{width:38px;height:38px;stroke-width:1.7}.feature-analysis{top:6%;left:7%}.feature-design{top:5%;right:7%}.feature-development{bottom:4%;left:3%}.feature-maintenance{bottom:3%;right:4%}
.workflow-section{padding:35px 0 38px;background:linear-gradient(115deg,#f7fbff,#edf5ff)}.package-heading{text-align:center;margin-bottom:30px}.packages-page .package-heading h2{font-size:clamp(29px,2.85vw,40px);font-weight:900;line-height:1.4;letter-spacing:-.8px;text-wrap:balance}.packages-page .package-heading>p{font-size:17px;line-height:1.8;color:var(--package-muted);margin-top:9px}.workflow-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:43px;list-style:none;padding:0;margin:0}.workflow-list>li{position:relative;display:flex;gap:16px;align-items:center}.workflow-icon{display:grid;place-items:center;flex:0 0 70px;height:70px;border-radius:50%;background:linear-gradient(140deg,#e1f1ff,#dbeaff)}.workflow-icon .package-icon{width:38px;height:38px}.packages-page .workflow-list h3{font-size:21px;line-height:1.4;font-weight:850;margin-bottom:7px}.packages-page .workflow-list p{font-size:13px;line-height:1.75;color:#506784}.workflow-list>li:not(:last-child):after{content:'→';position:absolute;right:-31px;top:25%;font-size:27px;font-weight:300;color:#6c9adb}
.packages-content{background:radial-gradient(ellipse at 35% 40%,#fff,#eef6ff 85%)}.plans-section{padding:36px 0 28px}.plans-section .package-heading{margin-bottom:35px}.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px;align-items:stretch}.plan-card{display:flex;flex-direction:column;position:relative;background:linear-gradient(145deg,#fbfdff,#f0f7ff);border:1px solid #d3e1f3;border-radius:18px;padding:27px 29px 25px;box-shadow:0 9px 20px #265d9c08;transition:box-shadow .2s,transform .2s}.plan-card:hover{transform:translateY(-3px);box-shadow:0 13px 25px #265d9c17}.plan-card.featured{border:2px solid #3288ff;background:linear-gradient(145deg,#f7fbff,#ddecff);box-shadow:0 12px 25px #1492ff27;padding:26px 28px 24px}.plan-ribbon{position:absolute;top:-12px;right:-2px;border-radius:22px 18px 0 20px;padding:8px 22px;background:linear-gradient(105deg,#2b94ff,#0751eb);color:white;font-size:14px;line-height:1.4;font-weight:800}.plan-title{display:flex;align-items:center;gap:18px;margin-bottom:18px}.plan-title>.package-icon{width:43px;height:43px;stroke-width:1.8;filter:drop-shadow(0 3px 0 #bcd9ff)}.packages-page .plan-title h3{font-size:27px;line-height:1.4;font-weight:900;margin-bottom:2px}.packages-page .plan-title p{font-family:Arial,sans-serif;font-size:16px;line-height:1.5;color:#405879}.packages-page .plan-description{font-size:16px;line-height:1.75;border-bottom:1px solid #d5e3f3;padding-bottom:16px;margin-bottom:13px}.plan-features{list-style:none;display:grid;gap:9px;padding:0;margin:0 0 30px;flex:1;align-content:start}.plan-features>li{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.7}.plan-features .package-icon{width:19px;height:19px;stroke-width:2.5;margin-top:3px}.plan-card>.package-button{width:100%;margin-top:auto;font-size:16px;padding:12px 15px}.plan-card>.package-button.outline{background:#ffffff9c}
.benefits-section{padding:8px 0 25px}.benefits-strip{display:grid;grid-template-columns:1.1fr 2.6fr;align-items:center;gap:30px;background:linear-gradient(105deg,#edf5ff,#e5effb);border-radius:19px;padding:28px 30px}.packages-page .benefits-strip>h2{position:relative;font-size:25px;line-height:1.5;letter-spacing:-.4px;padding-left:26px;font-weight:900}.benefits-strip>h2:before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;background:#0b59ee;border-radius:3px}.benefits-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center}.benefits-list>div{padding:0 14px;border-right:1px solid #b8d1f3}.benefits-list>div:last-child{border:0}.benefits-list .package-icon{width:34px;height:34px;margin-bottom:7px}.packages-page .benefits-list h3{font-size:19px;line-height:1.45;margin-bottom:3px}.packages-page .benefits-list p{font-size:13px;line-height:1.7;color:#506785}
.package-faq-section{padding:18px 0 40px}.faq-layout{display:grid;grid-template-columns:.95fr 1.7fr;gap:40px;align-items:center}.faq-intro{display:flex;align-items:center;justify-content:space-between;gap:10px}.packages-page .faq-intro h2{font-size:32px;font-weight:900;line-height:1.4;margin-bottom:10px}.packages-page .faq-intro p{font-size:17px;color:#526886;line-height:1.8;margin-bottom:17px}.faq-toggle{padding:10px 20px;font-size:15px}.faq-art{position:relative;flex:0 0 125px;height:130px;align-self:center}.faq-art>span{position:absolute;width:85px;height:70px;border-radius:50%;left:0;bottom:12px;background:linear-gradient(145deg,#d7efff,#a1d3ff)}.faq-art>span:after{content:'';position:absolute;left:7px;bottom:-7px;border:12px solid transparent;border-left-color:#a1d3ff;transform:rotate(15deg)}.faq-art>b{position:absolute;right:0;top:12px;display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 28% 20%,#c1e2ff,#498dff);font-family:Arial,sans-serif;font-size:57px;line-height:1;color:white;box-shadow:inset 3px 3px 0 #d2e7ff,inset -4px -6px 8px #1764da2a;text-shadow:0 4px 0 #286acf40}.faq-art>b:after{content:'';position:absolute;right:6px;bottom:-8px;border:13px solid transparent;border-right-color:#5c9aff;transform:rotate(-12deg)}.package-faq-list{display:grid;gap:9px}.package-faq-list details{border:1px solid #cfdef3;border-radius:11px;background:#ffffffb0;box-shadow:0 3px 8px #0b58a405}.package-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;padding:12px 20px;font-size:16px;font-weight:750;line-height:1.5}.package-faq-list summary::-webkit-details-marker{display:none}.faq-plus{color:#5a89d2;font-size:22px;font-weight:400;line-height:1;transition:transform .2s}.package-faq-list details[open] .faq-plus{transform:rotate(45deg)}.packages-page .package-faq-list details>p{font-size:15px;line-height:1.85;color:#536c8d;padding:0 20px 16px}
.package-cta{padding:32px 0;background:linear-gradient(105deg,#0750c1,#127aff);color:#fff;position:relative;overflow:hidden}.package-cta:before{content:'';position:absolute;inset:0 0 0 43%;background:url('../images/packages-price/packages-globe.jpg') center 53%/cover;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent,#000 30%);opacity:.9}.package-cta>.package-shell{position:relative}.packages-page .package-cta h2{font-size:clamp(28px,3vw,40px);line-height:1.45;font-weight:850;max-width:1050px}.packages-page .package-cta p{font-size:17px;line-height:1.8;margin:8px 0 18px;color:#e1eeff}.package-cta .package-button{font-size:15px;padding:11px 25px}
@media(min-width:1600px){.hero-layout{min-height:450px}}
@media(max-width:1200px){.hero-layout{gap:20px;grid-template-columns:1fr 1fr}.hero-visual{margin-right:-20px}.hero-feature{width:95px;min-height:85px;font-size:15px;border-radius:15px;gap:8px}.hero-feature .package-icon{width:30px;height:30px}.hero-copy .package-actions{gap:14px}.package-button{font-size:14px;padding:12px 20px}.workflow-list{gap:30px}.workflow-icon{flex-basis:56px;height:56px}.workflow-icon .package-icon{width:30px;height:30px}.workflow-list>li{gap:10px}.packages-page .workflow-list h3{font-size:18px}.workflow-list>li:not(:last-child):after{right:-24px;font-size:23px}.plans-grid{gap:17px}.plan-card{padding:25px 21px}.plan-card.featured{padding:24px 20px}.plan-title{gap:13px}.packages-page .plan-title h3{font-size:24px}.plan-features>li{font-size:15px;gap:8px}.plan-title>.package-icon{width:35px;height:35px}.benefits-strip{grid-template-columns:1fr 2.5fr;padding:25px 23px;gap:20px}.packages-page .benefits-strip>h2{font-size:21px;padding-left:19px}.packages-page .benefits-list h3{font-size:18px}.benefits-list>div{padding:0 9px}.faq-layout{gap:25px;grid-template-columns:1fr 1.6fr}.faq-art{flex-basis:100px;transform:scale(.9);transform-origin:right center}.packages-page .faq-intro p{font-size:15px}.package-faq-list summary{font-size:15px}}
@media(max-width:900px){.hero-layout{grid-template-columns:1fr 1fr}.packages-page .hero-copy h1{font-size:36px;letter-spacing:-.7px}.packages-page .hero-copy>p{font-size:16px}.hero-feature{width:80px;min-height:75px;font-size:13px}.hero-feature .package-icon{width:27px;height:27px}.workflow-list{grid-template-columns:1fr 1fr;gap:25px 45px}.workflow-list>li:nth-child(2):after{display:none}.plans-grid{gap:13px}.plan-card{padding:25px 16px}.plan-card.featured{padding:24px 15px}.plan-title{gap:10px}.packages-page .plan-title h3{font-size:22px}.plan-title>.package-icon{width:30px;height:30px}.packages-page .plan-description{font-size:14px;min-height:72px}.plan-features>li{font-size:14px}.plan-card>.package-button{font-size:14px}.benefits-strip{grid-template-columns:1fr;gap:23px}.packages-page .benefits-strip>h2{font-size:24px}.benefits-strip h2 br{display:none}.benefits-list{width:100%}.faq-layout{grid-template-columns:1fr}.faq-intro{justify-content:flex-start;gap:35px}.package-faq-list summary{font-size:16px}}
@media(max-width:700px){.hero-layout{grid-template-columns:1fr;gap:0}.hero-copy{padding:32px 0 18px}.packages-page .hero-copy h1{font-size:clamp(36px,8vw,48px)}.packages-page .hero-copy>p{font-size:16px;margin:18px 0 24px;line-height:1.85}.hero-visual{width:100%;max-width:550px;margin:0 auto 18px;aspect-ratio:1.5}.hero-feature{width:100px;min-height:86px;font-size:15px}.hero-feature .package-icon{width:30px;height:30px}.workflow-section{padding-block:32px}.packages-page .package-heading h2{font-size:30px;letter-spacing:-.5px}.packages-page .package-heading>p{font-size:16px}.workflow-list{gap:24px 28px}.workflow-list>li:not(:last-child):after{display:none}.workflow-list>li{align-items:flex-start}.packages-page .workflow-list h3{font-size:18px}.workflow-icon{flex-basis:46px;height:46px}.workflow-icon .package-icon{width:26px;height:26px}.packages-page .workflow-list p{font-size:13px}.plans-grid{grid-template-columns:1fr;gap:25px}.plan-card,.plan-card.featured{padding:28px}.packages-page .plan-title h3{font-size:27px}.plan-title>.package-icon{width:40px;height:40px}.packages-page .plan-description{font-size:16px;min-height:0}.plan-features>li{font-size:16px}.plan-card>.package-button{font-size:16px}.benefits-strip{padding:25px 22px}.benefits-list{grid-template-columns:1fr 1fr;gap:23px 0}.benefits-list>div:nth-child(2){border:0}.packages-page .benefits-list h3{font-size:19px}.packages-page .benefits-list p{font-size:13px}.package-faq-section{padding-top:10px;padding-bottom:32px}.packages-page .package-cta h2{font-size:29px}.packages-page .package-cta p{font-size:16px}.package-cta:before{inset:0;opacity:.2}.package-actions{gap:13px}.package-faq-list summary{padding:13px 16px;font-size:15px}.packages-page .package-faq-list details>p{padding:0 16px 16px}.hero-label{font-size:13px}}
@media(max-width:390px){.hero-feature{width:84px;min-height:76px;font-size:13px}.hero-feature .package-icon{width:28px;height:28px}.workflow-list{grid-template-columns:1fr;gap:22px}.workflow-icon{flex-basis:56px;height:56px}.workflow-list>li{align-items:center}.packages-page .workflow-list h3{font-size:20px}.packages-page .workflow-list p{font-size:14px}.plan-card,.plan-card.featured{padding:25px 22px}.packages-page .benefits-strip>h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}