/* Bright technology: ice, cyan and a small violet accent; no new image assets. */
:root{--ink:#173450;--muted:#526c86;--ice:#eaf5ff;--line:#cddfed}
body{background:#f5f9fe}
main{background:radial-gradient(ellipse 90% 680px at 100% 0%,#dcecff9c,transparent 80%)}
.site-header{background:rgba(247,252,255,.94);border-bottom:1px solid #b9d3ed66;backdrop-filter:blur(12px);color:var(--ink)}
.logo img,.footer-brand img{filter:none;mix-blend-mode:multiply}
.nav-link{transition:color .2s}.nav-link:hover,.nav-link[aria-current=page],.nav-link.is-current{color:#1753df}
.nav-link[aria-current=page]:after,.nav-link.is-current:after{background:linear-gradient(90deg,#2262ee,#20c7de);width:24px}
.dropdown{background:#f8fcff;border-color:#c7dcf4;box-shadow:0 18px 45px #1748721a;color:var(--ink)}
.dropdown a:hover{background:#e5f1ff;color:#1455d7}
.menu-toggle{color:var(--ink);border-color:#b9d2ec}
.button.solid{background:linear-gradient(115deg,#1857ed,#147de5);box-shadow:0 5px 18px #0756ed20}
.button.solid:hover{background:linear-gradient(115deg,#204cce,#0869d5)}
/* A continuous light surface from the navigation into the glass sail. */
body:has(.hero) .site-header{margin-bottom:-88px;background:transparent;border-bottom-color:transparent;backdrop-filter:none;transition:background .3s,border-color .3s}
body:has(.hero) .site-header.is-scrolled{background:rgba(246,252,255,.95);border-bottom-color:#bed5ef77;backdrop-filter:blur(12px)}
.hero-header-marker{position:absolute;top:24px;left:0;width:1px;height:1px;pointer-events:none}
.hero{background:radial-gradient(ellipse at 82% 65%,#c3edff 0,transparent 56%),radial-gradient(ellipse at 48% 0%,#e5e1ff99,transparent 60%),linear-gradient(115deg,#f5fcff,#eaf4ff);color:var(--ink)}
.hero,.hero-inner{min-height:748px}.hero-inner{padding-top:130px}
.hero:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#518fdc0a 1px,transparent 1px),linear-gradient(90deg,#518fdc0a 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(110deg,transparent,#000)}
.hero .eyebrow{color:#527ba3}.hero .lead{color:#3f6485}
.hero .button{border-color:#82b4e8;background:#ffffff70;color:#1854c9;box-shadow:0 8px 25px #478be411}
.hero .button:hover{background:#195eec;border-color:#195eec;color:white}
.hero-art{filter:none;mix-blend-mode:multiply;opacity:.94;mask-image:linear-gradient(to right,transparent 0%,#000 35%,#000 95%)}
.hero-side,.hero-meta{color:#53799e}.hero-meta:after{background:linear-gradient(90deg,#339bf0,#339bf000)}
.hero-meta:before{content:'';width:5px;height:5px;background:#178edc;box-shadow:0 0 9px #36befc88;flex-shrink:0}
/* Light in motion; controlled by visibility, with a reduced-motion fallback. */
.motion-region{--fx-state:paused}.motion-region.fx-visible{--fx-state:running}html.fx-paused .motion-region{--fx-state:paused}
.hero-aurora{position:absolute;pointer-events:none;z-index:-1;inset:8% -5% 0 25%;background:radial-gradient(ellipse at 72% 30%,#827fff2e,transparent 58%),radial-gradient(ellipse at 35% 65%,#22dfe52e,transparent 55%);animation:aurora-drift 13s ease-in-out infinite alternate;animation-play-state:var(--fx-state,paused);transform-origin:60% 50%}
.hero-traces{position:absolute;pointer-events:none;right:-3%;top:0;width:73%;height:100%;z-index:1;opacity:.65;overflow:visible}
.trace-base{stroke-width:.7;opacity:.35}.trace-signal{stroke-width:1.4;stroke-dasharray:7 93;animation:signal-flow 9s linear infinite;animation-play-state:var(--fx-state,paused)}
.trace-signal-later{animation-duration:12s;animation-delay:-5s;opacity:.65}
@supports(background-clip:text){
 .hero h1 .blue{width:fit-content;background:linear-gradient(110deg,#1655e5 5%,#08799f 35%,#6855c9 65%,#1655e5 95%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:title-spectrum 10s ease-in-out infinite alternate;animation-play-state:var(--fx-state,paused)}
 .company-introduction h1{width:fit-content;background:linear-gradient(110deg,#173954 10%,#1859cf 60%,#117e9c);background-clip:text;-webkit-background-clip:text;color:transparent}
 .culture-grid h3{width:fit-content;background:linear-gradient(125deg,#1558d9,#176fb4 60%,#785ad2);background-clip:text;-webkit-background-clip:text;color:transparent}
}
/* Colored areas use luminous blue or translucent ice, never a dark backdrop. */
.home-portfolio{background:radial-gradient(ellipse at 100% 10%,#e0dcff6b,transparent 60%),linear-gradient(150deg,#f8fcff,#e9f5fe)}
.services-band{background:radial-gradient(ellipse at 95% 0%,#b1a0ff40,transparent 60%),linear-gradient(120deg,#255ce4,#176ac7 65%,#167398);border-block:1px solid #3874dc30}
.services-band .eyebrow,.services-band .eyebrow .num{color:#d5e9ff}.services-band .text-link{color:#fff}
.service-card{isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#ffffff21,#ffffff0a);border:1px solid #d0eaff66;border-radius:12px;padding:30px 26px;transition:transform .35s,border-color .35s,box-shadow .35s}
.service-card .index{color:#dfedff}.service-card p{color:#fff}.service-card .badge{color:#fff}
.service-card:before{content:'';position:absolute;left:8%;top:0;width:65%;height:1px;background:linear-gradient(90deg,transparent,#b2fbff,#e0d6ff,transparent);opacity:.7;transition:transform .5s,opacity .5s;pointer-events:none}
.service-card:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at 100% 0%,#bbffff30,transparent 65%);opacity:0;transition:opacity .35s;pointer-events:none}
.service-card:focus-within{border-color:#d3fbff;box-shadow:0 14px 36px #06307822}.service-card:focus-within:after{opacity:1}
.about-band{background:radial-gradient(ellipse at 0% 30%,#b9eaff6b,transparent 60%),radial-gradient(ellipse at 100% 80%,#ded4ff5c,transparent 60%),#edf5fd}
.company-facts{background:linear-gradient(115deg,#dcecffb3,#e4f7fa85 55%,#ece6ff6b);padding:30px 24px;border:1px solid #c5d9ee;border-radius:10px}
.office-addresses h3{color:#183759}
.about-ai-hero,.agent-section{background:radial-gradient(ellipse at 92% 10%,#d4ccff66,transparent 60%),linear-gradient(120deg,#e3f3ff,#e4f6f9);color:var(--ink);border-block:1px solid #c4dbed}
.about-ai-hero .eyebrow,.agent-section .eyebrow,.agent-section .eyebrow .num{color:#47749d}
.about-position{color:#167092}.about-intro,.about-culture-line,.brand-thesis span{color:#476580}
.brand-thesis,.brand-thesis div{border-color:#a9c5de}.brand-thesis strong{color:#126ec1}
.agent-section .head-description,.agent-section .steps p{color:#526c86}.agent-section .steps li{border-top-color:#a8c8e4}.agent-section .steps li>span{color:#157ca9}
.handoff-panel{background:linear-gradient(125deg,#ffffffb3,#f3f7ff80);border-color:#bdd3e8;color:var(--ink)}
.handoff-checks p{color:#526c86}.handoff-checks strong{color:#106e91}
.collaboration-grid article{background:linear-gradient(150deg,#fff9,#e5edfc99);padding:28px;border:1px solid #cbdced;border-radius:10px}
.culture-grid article{border-top-color:#adcce9}
.web-hero{background:radial-gradient(ellipse at 90% 15%,#9786ef45,transparent 68%),linear-gradient(115deg,#2862e6,#218ccc);border-block:1px solid #5aa3e75c}
.fanfan-hero{background:radial-gradient(ellipse at 82% 40%,#c5eaff,transparent 65%),linear-gradient(115deg,#edf5ff,#e5edff);color:var(--ink);border-block:1px solid #c6dcec}
.fanfan-hero .phone-stage{background:radial-gradient(ellipse,#69befc33,transparent 72%)}
.trade-flow{background:linear-gradient(135deg,#dfedfc,#f4f9ff);border-color:#abcbed;box-shadow:0 20px 60px #18538c12}
.engine-card{background:linear-gradient(140deg,#e2edff,#f7fbff);border-color:#bdd3ef;box-shadow:0 12px 35px #13599c08}
.engine-card.agent-card{background:linear-gradient(140deg,#dff3fa,#f0fbff);border-color:#b3dce9}
.mission-section{background:radial-gradient(ellipse at 95% 10%,#d9d2ff80,transparent 60%),linear-gradient(120deg,#e3f2ff,#dceff7);color:var(--ink);border-block:1px solid #c5dced}
.mission-section:before{display:none}.mission-section .eyebrow{color:#4b7b9f}.mission-section h2 span{color:#087eaa}
.mission-footer{border-color:#b3cde3}.mission-footer p{color:#496782}.mission-footer .button{color:#1b61c9;border-color:#77a7d8}.mission-footer .button:hover{background:#1a63d7;color:#fff}
.contact-strip{background:linear-gradient(105deg,#d6eaff,#e6f7fc);border-top:1px solid #c0d8f0}
/* Preserve the individual palettes of the case studies. */
.portfolio-filter button{background:#e5edf8;border-color:#d3e0f0;color:#546b88}.portfolio-filter button.active{background:#185cdb;border-color:#185cdb;color:white}
.portfolio-card .portfolio-art{border-color:#cbdcec;box-shadow:0 10px 28px #123d610c}
.case-study-stage{background:linear-gradient(130deg,#dae6f4,#edf2fa);border-color:#c9d8ea}
main:has(.contact-page){background:radial-gradient(ellipse at 0% 25%,#bbe7fb66,transparent 58%),radial-gradient(ellipse at 100% 0%,#dcd3ff55,transparent 65%),#edf5fd}
.form-card{background:linear-gradient(145deg,#f4faff,#ffffff 60%);border:1px solid #c5dcf2;border-radius:16px;box-shadow:0 20px 65px #2a578014;position:relative}
.form-card:before{content:'';position:absolute;left:28px;right:28px;top:0;height:2px;background:linear-gradient(90deg,transparent,#58bee8,#a6a5e8,transparent)}
.wechat-block img{border-radius:6px;padding:5px;background:white}
.site-footer{background:linear-gradient(115deg,#e8f2fc,#edf5ff 55%,#e9eefb);border-top:1px solid #cadced;color:var(--ink)}
.footer-brand p,.footer-qr>span{color:#536e89}.footer-bottom{border-top-color:#c5d7e9;color:#526e8b}.site-footer .preview-note{color:#526e8b}
.button .arrow,.text-link .arrow{display:inline-block;transition:transform .25s}.button:hover .arrow,.text-link:hover .arrow{transform:translate(3px,-3px)}
@media(hover:hover) and (pointer:fine){.service-card:hover{transform:translateY(-6px);border-color:#d3fbff;box-shadow:0 18px 42px #07377529}.service-card:hover:before{transform:translateX(25%);opacity:1}.service-card:hover:after{opacity:1}.engine-card{transition:transform .3s,box-shadow .3s}.engine-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px #18538c16}}
@keyframes aurora-drift{from{transform:translate3d(-2%,1%,0) scale(.98);opacity:.6}to{transform:translate3d(3%,-2%,0) scale(1.06);opacity:1}}
@keyframes signal-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:-100}}
@keyframes title-spectrum{from{background-position:0% 50%}to{background-position:100% 50%}}
@media(max-width:1000px){.service-card{padding:26px 20px}.hero-art{opacity:.8}}
@media(max-width:760px){
 body:has(.hero) .site-header{margin-bottom:-72px}.hero,.hero-inner{min-height:867px}.hero-inner{padding-top:134px}
 .main-nav{background:#f4faff;border-bottom-color:#c2d8ed}.main-nav>.nav-link,.nav-group{border-bottom-color:#d4e4f2}.dropdown{background:#e6f1fe}
 .hero-art{opacity:.94;height:48%;right:-12%;mask-image:linear-gradient(to bottom,transparent,#000 25%),linear-gradient(to right,transparent,#000 18%);mask-composite:intersect}
 .hero-aurora{inset:20% -5% 0 0}.hero-traces{width:105%;height:53%;top:auto;bottom:0;right:-8%;opacity:.5}.trace-signal-later{display:none}
 .service-card{min-height:210px;padding:24px}.company-facts{padding:24px 20px}.collaboration-grid{gap:16px}.collaboration-grid article{padding:24px}.form-card{padding:26px 22px}.brand-thesis{border-top-color:#a9c5de}
}
@media(prefers-reduced-motion:reduce){.hero-aurora,.hero h1 .blue,.trace-signal{animation:none!important}.trace-signal{display:none}.service-card:hover,.engine-card:hover{transform:none}}
@media print{body,main,.site-header,.site-footer{background:white!important;color:#173450}.hero-aurora,.hero-traces{display:none}}

@media(min-width:761px){.hero-art{mask-image:linear-gradient(to right,transparent 0%,#000 35%,#000 95%),linear-gradient(to bottom,transparent,#000 22%);mask-composite:intersect}}
.web-hero{background:radial-gradient(ellipse at 95% 5%,#d8d0ff66,transparent 65%),linear-gradient(115deg,#e5edff,#ddf3ff);color:var(--ink);border-color:#bdd6ed}
.web-hero .eyebrow,.web-hero p{color:#4c6c8b}.web-hero .button,.web-hero .text-link{color:#175dce;border-color:#7da8df}.web-hero .button:hover{background:#195ddb;color:#fff}

/* Service navigation: a translucent panel with a small, deliberate entrance. */
.dropdown{display:block;width:360px;right:-96px;top:calc(100% - 3px);padding:18px 12px 12px;border:1px solid #fff;border-radius:16px;background:linear-gradient(135deg,#f8fcfff5,#eaf4fff0 60%,#eeedfff0);backdrop-filter:blur(16px);box-shadow:0 20px 55px #164e7d1c,0 0 0 1px #b8d3ed66;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(10px) scale(.98);transform-origin:65% 0;transition:opacity .2s ease,transform .25s ease,visibility .2s}
.dropdown:before{content:'';position:absolute;left:24px;right:24px;top:0;height:2px;background:linear-gradient(90deg,transparent,#71c9f5,#aba3ed,transparent);border-radius:2px;pointer-events:none}
.dropdown.open{display:block;visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.dropdown-heading{display:flex;justify-content:space-between;align-items:center;padding:0 14px 13px;color:#506d89;font-size:12px;line-height:1.5}
.dropdown-heading span:last-child{font-size:9px;letter-spacing:.16em;color:#6988aa}
.dropdown a{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:10px;transition:background .22s,box-shadow .22s}
.dropdown a+a{margin-top:3px}
.menu-service-icon{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;color:#2863d5;background:linear-gradient(135deg,#ddeaff,#edf6ff);border:1px solid #c6dcf4;transition:transform .25s,background .25s}
.menu-service-icon svg{width:23px;height:23px}
.dropdown a:nth-of-type(2) .menu-service-icon{color:#147c9a;background:linear-gradient(135deg,#d8f1f7,#edfafd);border-color:#c2e4ed}
.dropdown a:nth-of-type(3) .menu-service-icon{color:#6956c0;background:linear-gradient(135deg,#e8e2fb,#f3f0ff);border-color:#d8cff0}
.menu-service-copy{display:block;min-width:0}
.menu-service-copy strong{display:block;font-size:16px;line-height:1.4;font-weight:550;color:#173954}
.menu-service-copy small{display:block;margin-top:5px;font-size:11px;line-height:1.5;color:#5a7590}
.menu-service-arrow{margin-left:auto;color:#668bad;font-size:19px;opacity:.6;transition:transform .25s,opacity .25s,color .25s}
.dropdown a:hover,.dropdown a:focus-visible{background:#fff9;box-shadow:0 4px 16px #5285b00c}
.dropdown a:hover .menu-service-icon{transform:translateY(-2px)}
.dropdown a:hover .menu-service-arrow,.dropdown a:focus-visible .menu-service-arrow{opacity:1;color:#1d65d8;transform:translate(2px,-2px)}
@media(max-width:760px){.dropdown{display:none;position:static;width:100%;padding:16px 8px 10px;margin-top:2px;margin-bottom:14px;border-radius:12px;box-shadow:none;backdrop-filter:none;transform:none;background:linear-gradient(135deg,#eaf4ff,#eef1fb);border:1px solid #d2e2f0}.dropdown.open{display:block}.dropdown:before{display:none}.dropdown-heading{padding:0 10px 10px}.dropdown a{gap:12px;padding:13px 10px}.menu-service-copy strong{font-size:15px}.menu-service-copy small{font-size:11px}.menu-service-icon{width:38px;height:38px}.menu-service-arrow{font-size:17px}}

/* Consistent interaction language: reveal, lift, zoom, then settle. */
.reveal{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.js .reveal.pending{opacity:0;transform:translateY(20px)}
.portfolio-card .portfolio-art{transform-origin:center;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .4s}
.portfolio-card .v3-project-screen img,.moment-photo img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.portfolio-card h3{transition:color .25s}
.portfolio-card .portfolio-direction{transition:color .3s,transform .3s}
.portfolio-card:focus-visible .portfolio-art{transform:translateY(-5px) scale(1.015);box-shadow:0 18px 40px #1957961c;border-color:#8db9e6}
.portfolio-card:focus-visible h3{color:#155ecd}
.engine-card,.collaboration-grid article,.feature-grid article,.culture-grid article{position:relative;transition:opacity .65s,transform .45s,border-color .35s,box-shadow .35s}
.collaboration-grid article{overflow:hidden}
.collaboration-grid article:after{content:'';position:absolute;top:0;left:14%;right:14%;height:2px;background:linear-gradient(90deg,transparent,#5fc7e6,#a195ed,transparent);opacity:.45;transform:scaleX(.7);transition:transform .4s,opacity .4s}
.button{position:relative;isolation:isolate;overflow:hidden}
.button:before{content:'';position:absolute;inset:-50%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#ffffff3b 50%,transparent 65%);transform:translateX(-85%);transition:transform .65s}
.button:hover:before,.button:focus-visible:before{transform:translateX(85%)}
.field label{transition:color .2s}.field:focus-within label{color:#195bc5}
.field input,.field select{transition:border-color .2s,box-shadow .2s,background .2s}
.field input:not([aria-invalid=true]):focus,.field select:focus{border-color:#72a4ec;box-shadow:0 0 0 4px #4f9be91a;background:#fff}
.portfolio-filter button{transition:background .25s,color .25s,box-shadow .25s,transform .25s}
.portfolio-filter button:focus-visible{box-shadow:0 0 0 4px #579ff021}
@media(hover:hover) and (pointer:fine){
 .portfolio-card:hover .portfolio-art{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 45px #19579620;border-color:#8db9e6}
 .portfolio-card:hover .v3-project-screen img{transform:scale(1.055)}
 .portfolio-card:hover h3{color:#155ecd}.portfolio-card:hover .portfolio-direction{color:#326fb3;transform:translateX(4px)}
 .moments-gallery figure:hover .moment-photo img{transform:scale(1.035)}
 .collaboration-grid article:hover{transform:translateY(-5px);border-color:#9bc8e6;box-shadow:0 14px 35px #1e6da013}
 .collaboration-grid article:hover:after{opacity:1;transform:scaleX(1)}
 .feature-grid article:hover{transform:translateY(-4px)}
 .culture-grid article:hover{transform:translateY(-4px);border-color:#5aace0}
 .portfolio-filter button:hover{transform:translateY(-2px);box-shadow:0 5px 14px #3677ba14}
 .dropdown.open a{animation:menu-item-in .32s ease both}.dropdown.open a:nth-of-type(2){animation-delay:.035s}.dropdown.open a:nth-of-type(3){animation-delay:.07s}
}
@keyframes menu-item-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@supports(animation-timeline:scroll()){
 .site-header:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;background:linear-gradient(90deg,#2d6cef,#32b8d8,#9b7de3);transform-origin:left;animation:reading-progress linear both;animation-timeline:scroll(root block)}
 @keyframes reading-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media(max-width:760px){.js .reveal.pending{transform:translateY(12px)}.reveal{transition-duration:.4s}.portfolio-card .portfolio-art{transform:none}}
@media(prefers-reduced-motion:reduce){
 .js .reveal.pending{opacity:1;transform:none}
 .portfolio-card:hover .portfolio-art,.portfolio-card:focus-visible .portfolio-art,.portfolio-card:hover .v3-project-screen img,.portfolio-card:hover .portfolio-direction,.moments-gallery figure:hover .moment-photo img,.collaboration-grid article:hover,.feature-grid article:hover,.culture-grid article:hover,.portfolio-filter button:hover,.button:hover .arrow,.text-link:hover .arrow,.dropdown a:hover .menu-service-icon,.dropdown a:hover .menu-service-arrow{transform:none}
 .button:before,.site-header:after{display:none}
}
.portfolio-art{position:relative}
.portfolio-cursor{display:none}
@media(min-width:761px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .portfolio-cursor{position:absolute;z-index:4;left:0;top:0;width:76px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:50%;background:linear-gradient(140deg,#2462e8ed,#357bbdeb);border:1px solid #c9eaffb3;color:#fff;box-shadow:0 6px 22px #14467d26;font-size:12px;line-height:1.4;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .2s,transform .25s}
 .portfolio-cursor>span:last-child{font-size:21px;font-weight:300}
 .pointer-active .portfolio-cursor{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* Brand voyage: open skies, wind-filled sails and a luminous forward wake. */
.hero-sailing{background:radial-gradient(ellipse at 77% 55%,#d9f3ff,transparent 62%),linear-gradient(115deg,#f3faff,#e7f3ff)}
.hero-sailing .hero-voyage{position:absolute;z-index:-1;pointer-events:none;right:-2%;top:0;width:86%;height:100%;mask-image:linear-gradient(90deg,transparent 0%,#000 39%,#000 100%),linear-gradient(180deg,transparent 0%,#000 19%,#000 88%,transparent 100%);mask-composite:intersect;transition:translate .65s cubic-bezier(.22,.61,.36,1)}
.hero-sailing .hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:100% 100%;opacity:1;filter:none;mix-blend-mode:normal;mask-image:none;animation:none;transform:none}
.hero-sailing .hero-traces{right:-5%;top:auto;bottom:0;width:80%;height:94%;opacity:.8}
.hero-sailing .trace-base{stroke-width:1;opacity:.28}
.hero-sailing .trace-signal{stroke-width:1.6;stroke-dasharray:5 95;animation-duration:7s}
.hero-sailing .trace-signal-later{animation-duration:10s;animation-delay:-4s}
/* Use the continuous hero background; an inset animated glow leaves visible seams. */
.hero-sailing .hero-aurora{display:none}
.hero-sailing .hero-side{font-size:10px;line-height:2;letter-spacing:.2em;top:117px;right:10px;color:#427aab}
.hero-sailing .hero-meta{color:#487da4}
.hero-sailing .hero-copy{padding-bottom:22px}

@media(min-width:761px) and (max-width:1100px){
 .hero-sailing .hero-voyage{right:-5%;width:105%;mask-image:linear-gradient(90deg,transparent 0%,#000 44%),linear-gradient(180deg,transparent,#000 20%,#000 88%,transparent);mask-composite:intersect}
 .hero-sailing .hero-copy{max-width:560px}
}
@media(max-width:760px){
 .hero-sailing,.hero-sailing .hero-inner{min-height:850px}
 .hero-sailing .hero-inner{padding-top:130px;padding-bottom:430px}
 .hero-sailing .hero-copy{padding-bottom:0}
 .hero-sailing .hero-voyage{top:auto;bottom:36px;right:-4%;width:145%;height:auto;aspect-ratio:3/2;mask-image:linear-gradient(180deg,transparent,#000 17%,#000 82%,transparent);transition:none}
 .hero-sailing .hero-art{object-fit:contain;object-position:100% 50%;animation:none;transform:none}
 .hero-sailing .hero-traces{width:125%;height:54%;right:-10%;bottom:7px;opacity:.55}
 .hero-sailing .hero-meta{bottom:22px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .hero-sailing .hero-art{animation:none;transform:none}
 .hero-sailing .hero-voyage{translate:none!important;transition:none}
}

/* Small reflected highlights, confined to the sea in the original image. */
.sea-shimmer{position:absolute;pointer-events:none;mix-blend-mode:screen}
.sea-motion-toggle{position:absolute;right:0;bottom:24px;z-index:2;min-height:36px;padding:7px 13px;border:1px solid #7cbbdb66;border-radius:30px;background:#f3faffb8;color:#376786;font:inherit;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.08em;cursor:pointer;transition:background .2s,border-color .2s}
.sea-motion-toggle:hover{background:#fff;border-color:#70bfe6}
.sea-motion-toggle:focus-visible{outline:2px solid #1674dc;outline-offset:4px}
@media(max-width:760px){.sea-motion-toggle{right:0;bottom:12px;min-height:40px;font-size:10px}}

/* One slow forward move on hover. Image and sea highlights travel together. */
@media(min-width:761px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero-sailing .hero-voyage{transform-origin:72% 68%;transition:transform 1.65s cubic-bezier(.2,.65,.25,1)}
 .hero-sailing.voyage-engaged .hero-voyage{transform:translate3d(9px,-3px,0) scale(1.026)}
}
@media(prefers-reduced-motion:reduce){.hero-sailing .hero-voyage{transform:none!important}}

/* Match the masked box to the image aspect ratio: no opaque letterbox seam. */
@media(min-width:761px){
 .hero-sailing .hero-voyage{width:auto;height:100%;aspect-ratio:3/2;mask-image:linear-gradient(90deg,transparent 0%,#00000008 8%,#00000030 18%,#00000085 30%,#000 47%),linear-gradient(180deg,transparent 0%,#000 19%,#000 88%,transparent 100%);mask-composite:intersect}
}

/* Each service is identified by its own product/platform mark. */
.service-brand{height:154px;display:flex;align-items:center;justify-content:center;margin:-2px 0 26px;border-radius:10px;background:linear-gradient(135deg,#fff,#edf4ff);border:1px solid #fff8;position:relative;overflow:hidden}
.service-brand:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#fff7 48%,transparent 61%);transform:translateX(-110%);transition:transform .9s;pointer-events:none}
.service-brand img{width:82%;max-width:260px;height:auto;object-fit:contain;transition:transform .6s}
.service-brand-fanfan img{width:118px;border-radius:50%}.service-brand-websites img{width:82%;max-width:255px}
.service-card .index{font-size:10px;min-height:38px;letter-spacing:.05em;line-height:1.6}.service-card h3{font-size:clamp(21px,2vw,29px);min-height:70px;line-height:1.4}.service-card .badge{display:table;margin:9px 0 0;font-size:10px}.service-card>p{font-size:14px;min-height:50px;line-height:1.9}.service-card .service-foot{margin-top:28px}
@media(hover:hover) and (pointer:fine){.service-card:hover .service-brand img{transform:scale(1.04)}.service-card:hover .service-brand:after{transform:translateX(110%)}}
@media(max-width:760px){.service-brand{height:150px}.service-card .index,.service-card h3,.service-card>p{min-height:0}.service-card h3{margin-block:17px}.service-card .service-foot{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.service-brand:after{display:none}.service-brand img,.service-card:hover .service-brand img{transform:none;transition:none}}

.case-category-tabs{display:flex;gap:38px;border-bottom:1px solid #c6d9ec;margin-bottom:35px}.case-category-tabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:16px 3px;color:#6b819b;font-size:23px;font-weight:550;transition:color .2s,border-color .2s}.case-category-tabs button span{font-size:11px;vertical-align:super;padding-left:8px;opacity:.6}.case-category-tabs button[aria-selected=true]{color:#215bce;border-bottom-color:#2676e9}.case-category-intro{margin-bottom:32px}.case-category-intro h2{font-size:24px;margin-bottom:10px}.case-category-intro p{font-size:12px;line-height:1.8;color:#7b8ba0;max-width:850px}.official-case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:50px 32px}.official-case-card{display:block;min-width:0}.official-case-art{position:relative;overflow:hidden;min-height:280px;border-radius:12px;background:linear-gradient(125deg,#e0eeff,#d1dff8);border:1px solid #d4e5f4;padding:26px 30px;isolation:isolate}.official-case-tag{font-size:11px;color:#517499;letter-spacing:.04em}.official-metric{display:flex;flex-direction:column;padding-block:23px;position:relative;z-index:1}.official-metric strong{font-size:clamp(40px,4vw,63px);font-weight:600;line-height:1.2;letter-spacing:-.04em;color:#275bb0}.official-metric>span{font-size:13px;color:#69809c;margin-top:10px}.official-case-focus{font-size:11px;color:#6982a6;border-top:1px solid #a4bedb66;display:block;padding-top:13px}.official-case-lines{position:absolute;right:-12%;top:10%;width:70%;height:100%;z-index:-1;transform:rotate(-22deg);opacity:.7}.official-case-lines i{position:absolute;inset:0;border:1px solid #fff9;border-radius:30% 60% 35% 60%;background:linear-gradient(135deg,#fff2,#5791e333)}.official-case-lines i:nth-child(2){inset:15%;transform:rotate(25deg)}.official-case-lines i:nth-child(3){inset:30%;transform:rotate(50deg)}
.official-netease-toys{background:linear-gradient(125deg,#e9e9ff,#dcd3f5)}.official-netease-toys .official-metric strong{color:#7260b5}.official-netease-logistics{background:linear-gradient(125deg,#def2f2,#bedde7)}.official-netease-logistics .official-metric strong{color:#257a87}.official-netease-machinery{background:linear-gradient(125deg,#e4eaf0,#ccd5df)}.official-netease-machinery .official-metric strong{color:#506984}
.official-case-card h3{font-size:23px;line-height:1.45;margin:10px 0}.official-case-card>p{font-size:14px;color:#6d839c;margin-bottom:20px}.official-case-banner{padding:45px;background:linear-gradient(120deg,#dfedff,#ecebff);border:1px solid #c8def0;border-radius:14px}.official-case-banner>span{font-size:13px;color:#5a79a5;display:block}.official-case-banner>strong{font-size:64px;line-height:1.4;color:#2b65c2}.official-case-banner p{font-size:14px;color:#66829f}.official-case-detail .cms-source{padding:0 0 40px}
@media(hover:hover) and (pointer:fine){.official-case-card .official-case-lines{transition:transform .7s}.official-case-card:hover .official-case-lines{transform:rotate(-12deg) scale(1.07)}.official-case-card:hover h3{color:#2563c6}}
@media(max-width:760px){.case-category-tabs{gap:30px}.case-category-tabs button{font-size:20px}.case-category-intro h2{font-size:22px}.official-case-grid{grid-template-columns:1fr;gap:35px}.official-case-art{min-height:250px;padding:23px}.official-metric strong{font-size:48px}.official-case-card h3{font-size:21px}.official-case-banner{padding:28px}.official-case-banner>strong{font-size:50px}}
@media(prefers-reduced-motion:reduce){.official-case-card .official-case-lines,.official-case-card:hover .official-case-lines{transform:rotate(-22deg);transition:none}}

/* Screen-relative wash keeps copy legible even when the image extends offscreen. */
@media(min-width:761px){.hero-sailing:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#f3fafff5 0%,#f3faffe0 15%,#f0f8ffc4 30%,#eef7ff60 46%,#eef7ff00 65%)}}
.official-case-art{padding:24px 26px;aspect-ratio:1.8;min-height:280px;border:0;background:#234467;display:flex;flex-direction:column;justify-content:space-between}
.official-case-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.official-case-art:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#071c32db,#071c3233 80%)}
.official-case-lines{display:none}.official-case-tag{color:#fff;font-size:11px}.official-metric{padding:20px 0 10px}.official-case-art .official-metric strong{color:#fff;font-size:clamp(40px,4vw,58px)}.official-metric>span,.official-case-focus{color:#fff}.official-case-focus{border-color:#ffffff50;padding-top:12px}
.official-detail-photo{margin:0 0 28px;border-radius:14px;overflow:hidden}.official-detail-photo img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}
.official-contact{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:32px;background:linear-gradient(120deg,#e6f3ff,#efedff);border:1px solid #d9e5f6;border-radius:12px;margin-bottom:40px}.official-contact h2{font-size:25px}.official-contact p{font-size:14px;color:#6d839c;margin-top:10px}.official-contact .button{white-space:nowrap}
@media(hover:hover) and (pointer:fine){.official-case-card:hover .official-case-photo{transform:scale(1.035)}}
@media(max-width:760px){.official-case-art{min-height:245px}.official-contact{align-items:start;flex-direction:column;padding:25px}.official-contact h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.official-case-card:hover .official-case-photo{transform:none}.official-case-photo{transition:none}}
.case-service-next{margin-top:42px;padding:30px;border:1px solid #d8e5f5;border-radius:14px;background:linear-gradient(120deg,#f0f6ff,#f6faff)}.case-service-next h2{font-size:26px;line-height:1.5}.case-service-next p{margin:15px 0 20px;font-size:15px;line-height:1.9}.case-service-next .text-link{font-size:15px}@media(max-width:760px){.case-service-next{padding:23px}.case-service-next h2{font-size:23px}.service-options label{align-items:flex-start}}