/* ============================================================
   首页增强组件（2026-10-27）
   灵感来源：MotionSites（视频首屏）、React Bits（Shiny Text / Logo Loop）、
   Aceternity（Bento Grid / Timeline / World Map / Compare）、Uiverse（加载与成功反馈）
   全部原生 CSS + enhance.js，无框架、无外部依赖。
   铁律：所有文字都在 HTML 源码里；动画只改外观，不藏内容。
   系统开启「减少动态效果」时，所有动画关闭，内容照常显示。
   ============================================================ */

/* 1 首屏视频背景 ------------------------------------------------ */
.hero.has-video{position:relative;isolation:isolate;background:#0e1830;background-image:none;color:#fff;border-bottom:0;padding:92px 0 84px}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#0e1830 url(/assets/hero-poster.webp?v=1) center/cover no-repeat}
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity 1s ease}
.hero-bg video.ready{opacity:1}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,24,48,.94) 0%,rgba(14,24,48,.82) 48%,rgba(14,24,48,.5) 100%)}
.hero.has-video h1{color:#fff}
.hero.has-video .lead,.hero.has-video .trust{color:#d5dbe6}
.hero.has-video .trust li::before{color:#63d394}
.hero.has-video .cta .btn:not(.wa){background:var(--tag);color:var(--ink)}
.hero.has-video .cta .btn:not(.wa):hover{background:#ffc928}
.hero.has-video .tracker{background:#fff;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}

/* 2 关键词流光（React Bits Shiny Text） ------------------------- */
.shine{color:var(--tag);background:linear-gradient(100deg,var(--tag) 38%,#fff3c4 50%,var(--tag) 62%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 5.5s linear infinite}
@keyframes shine{from{background-position:150% 0}to{background-position:-60% 0}}

/* 3 产业带滚动条（React Bits Logo Loop） ------------------------ */
.clusters{background:var(--ink);color:#fff;padding:18px 0;border-top:1px solid rgba(255,255,255,.08);overflow:hidden}
.clusters .wrap{display:flex;align-items:center;gap:28px}
.clusters-label{flex:0 0 auto;margin:0;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tag);max-width:150px;line-height:1.3}
.marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-rail{display:flex;width:max-content}
.marquee ul{display:flex;flex:0 0 auto;gap:0;margin:0;padding:0;list-style:none}
.marquee li{display:flex;align-items:center;white-space:nowrap;font-size:.98rem;color:#d5dbe6;padding-right:34px}
.marquee li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tag);margin-right:34px;opacity:.85}
.marquee li b{color:#fff;font-weight:700;margin-right:7px}
.marquee.is-running .marquee-rail{animation:marquee 46s linear infinite}
.marquee.is-running:hover .marquee-rail{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee:not(.is-running) ul{flex-wrap:wrap;row-gap:6px}

/* 4 服务便当格（Aceternity Bento Grid） ------------------------- */
.services.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.services.bento article{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px 22px;display:flex;flex-direction:column;align-items:flex-start;transition:transform .28s var(--ui-ease),box-shadow .28s var(--ui-ease),border-color .28s}
.services.bento article:hover{border-color:var(--tag);transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(20,33,61,.45)}
.services.bento article .fee{margin-top:auto;padding-top:14px}
.services.bento article:nth-child(1){grid-column:span 2;grid-row:span 2;background:var(--ink);border-color:var(--ink);color:#fff;padding:30px 28px;position:relative;overflow:hidden}
.services.bento article:nth-child(1) h3{font-size:1.7rem;color:#fff}
.services.bento article:nth-child(1) p,.services.bento article:nth-child(1) li{color:#cfd5e1}
.services.bento article:nth-child(1) .fee{color:var(--tag)}
.services.bento article:nth-child(1) .svc-icon{color:var(--ink);background:var(--tag)}
.services.bento article:nth-child(1)::before{content:"";position:absolute;right:-60px;bottom:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(242,183,5,.22),transparent 70%);pointer-events:none}
.services.bento article:nth-child(4),.services.bento article:nth-child(5),.services.bento article:nth-child(6){grid-column:span 2}
.bento-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.bento-points li{position:relative;padding-left:28px;font-size:.98rem}
.bento-points li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;background:var(--tag) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%2314213d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:900px){
  .services.bento{grid-template-columns:repeat(2,1fr)}
  .services.bento article:nth-child(n){grid-column:span 1;grid-row:auto}
  .services.bento article:nth-child(1),.services.bento article:nth-child(6){grid-column:span 2}
}
@media (max-width:600px){
  .services.bento{grid-template-columns:1fr}
  .services.bento article:nth-child(n){grid-column:auto}
}

/* 5 流程时间线（Aceternity Timeline） --------------------------- */
.tl-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.tl-intro{position:sticky;top:calc(var(--header-h) + 32px)}
.tl-intro .lead{margin-bottom:24px}
.timeline{list-style:none;margin:0;padding:0;position:relative;counter-reset:tl}
.tl-list{position:relative}
.timeline::before,.tl-fill{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--line);border-radius:2px}
.tl-fill{background:linear-gradient(180deg,var(--tag),#e0a300);bottom:auto;height:calc(100% - 44px);transform-origin:top;z-index:1}
.timeline li{position:relative;padding:0 0 34px 72px;counter-increment:tl}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:counter(tl);position:absolute;left:0;top:0;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-stretch:75%;font-size:1.15rem;background:var(--ink);color:#fff;border:3px solid var(--white);box-shadow:0 0 0 1px var(--line);transition:background .35s,color .35s,transform .35s var(--ui-ease)}
.timeline h3{margin:8px 0 6px;font-size:1.3rem}
.timeline p{color:var(--steel);margin:0}
.timeline li small{display:inline-block;margin-top:8px;font-size:.82rem;font-weight:700;color:var(--ink);background:color-mix(in srgb,var(--tag) 28%,transparent);padding:2px 9px;border-radius:999px}
.tl-js .tl-fill{transform:scaleY(var(--p,0))}
.tl-js .timeline li::before{background:var(--white);color:var(--steel)}
.tl-js .timeline li.on::before{background:var(--tag);color:var(--ink);transform:scale(1.06)}
.tl-js .timeline li h3,.tl-js .timeline li p{transition:opacity .4s}
.tl-js .timeline li:not(.on) h3,.tl-js .timeline li:not(.on) p{opacity:.55}
@media (max-width:900px){
  .tl-wrap{grid-template-columns:1fr;gap:28px}
  .tl-intro{position:static}
}

/* 6 广州 → 全球航线地图（Aceternity World Map） ----------------- */
.routes{background:var(--ink);color:#fff;overflow:hidden}
.routes h2{color:#fff}
.routes .lead{color:#cfd5e1}
.routes-map{position:relative;margin:8px -8px 0}
.routes-map svg{display:block;width:100%;height:auto}
.routes-map .land{stroke:rgba(255,255,255,.2);stroke-width:3.3;stroke-linecap:round;fill:none}
.routes-map .arc{fill:none;stroke:var(--tag);stroke-width:1.6;stroke-linecap:round;opacity:.9;stroke-dasharray:var(--len);stroke-dashoffset:0}
.routes-map .city circle{fill:#fff}
.routes-map .city text{fill:#cfd5e1;font:600 11px var(--font);letter-spacing:.02em}
.routes-map .hub circle{fill:var(--tag)}
.routes-map .hub text{fill:#fff;font:800 13px var(--font)}
.routes-map .pulse{fill:none;stroke:var(--tag);stroke-width:2;transform-box:fill-box;transform-origin:center}
.routes-js .routes-map .arc{stroke-dashoffset:var(--len)}
.routes-js .routes-map .city{opacity:0;transition:opacity .4s}
.routes-js.in .routes-map .arc{transition:stroke-dashoffset 1.6s var(--ui-ease);transition-delay:calc(var(--i) * 140ms);stroke-dashoffset:0}
.routes-js.in .routes-map .city{opacity:1;transition-delay:calc(var(--i) * 140ms + 1.2s)}
.routes-js.in .routes-map .pulse{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(4.5);opacity:0}}
.lanes{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;padding:0;margin:22px 0 0}
.lanes li{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;font-size:.92rem;color:#e3e7ef}
.lanes li b{color:var(--tag);font-weight:700}
@media (max-width:600px){.routes-map .city text{display:none}.routes-map .city circle{r:5px}.routes-map .hub text{font-size:22px}.routes-map .arc{stroke-width:2.4}}

/* 7 验货对比滑块（Aceternity Compare） -------------------------- */
.cmp-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.cmp{position:relative;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:var(--paper);border:1px solid var(--line);--pos:50%;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.cmp-layer{position:absolute;inset:0}
.cmp-layer>*,.cmp-layer .media-slot,.cmp-layer img,.cmp-layer video,.cmp-layer svg{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.cmp-after{clip-path:inset(0 0 0 var(--pos))}
.cmp-tag{position:absolute;top:14px;z-index:3;font-size:.8rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:4px;pointer-events:none}
.cmp-tag.bad{left:14px;background:#b42318;color:#fff}
.cmp-tag.good{right:14px;background:var(--pass);color:#fff}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;z-index:2;pointer-events:none;box-shadow:0 0 0 1px rgba(20,33,61,.15)}
.cmp-handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6' fill='none' stroke='%2314213d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 6px 18px rgba(20,33,61,.35)}
.cmp{cursor:ew-resize}
.cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:4;pointer-events:none;-webkit-appearance:none;appearance:none}
.cmp input[type=range]:focus-visible+.cmp-handle::after{outline:3px solid var(--tag);outline-offset:2px}
.cmp-note{font-size:.82rem;color:var(--steel);margin:10px 0 0}
.defects{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.defects li{position:relative;padding-left:26px}
.defects li::before{content:"✕";position:absolute;left:0;top:0;color:#b42318;font-weight:800}
@media (max-width:900px){.cmp-grid{grid-template-columns:1fr;gap:24px}}

/* 8 表单提交反馈（Uiverse Loaders / Inputs） --------------------- */
form.inq .btn.is-loading{color:transparent;pointer-events:none}
form.inq .btn.is-loading::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form-msg.ok{display:flex;gap:14px;align-items:flex-start}
.ok-check{flex:0 0 auto;width:34px;height:34px}
.ok-check circle{fill:none;stroke:var(--pass);stroke-width:2.5;stroke-dasharray:101;stroke-dashoffset:101;animation:draw .6s var(--ui-ease) forwards}
.ok-check path{fill:none;stroke:var(--pass);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:draw .35s var(--ui-ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
form.inq label{transition:color .2s}
form.inq div:focus-within>label{color:var(--ink)}
form.inq div:focus-within>label::after{content:"";display:block;height:2px;width:24px;background:var(--tag);margin-top:3px;border-radius:2px}

/* 移动端首屏：视频不加载，用静态图；遮罩改为上下渐变 */
@media (max-width:760px){
  .hero.has-video{padding:48px 0 52px}
  .hero-bg::after{background:linear-gradient(180deg,rgba(14,24,48,.9),rgba(14,24,48,.82) 55%,rgba(14,24,48,.95))}
  .clusters .wrap{flex-direction:column;align-items:flex-start;gap:10px}
  .clusters-label{max-width:none}
  .marquee{width:100%}
}

/* 减少动态效果：全部静止，内容照常显示 */
@media (prefers-reduced-motion:reduce){
  .shine{animation:none;-webkit-text-fill-color:var(--tag);background:none}
  .marquee .marquee-rail{animation:none!important}
  .tl-js .tl-fill{transform:none}
  .tl-js .timeline li::before{background:var(--ink);color:#fff}
  .tl-js .timeline li:not(.on) h3,.tl-js .timeline li:not(.on) p{opacity:1}
  .routes-js .routes-map .arc{stroke-dashoffset:0}
  .routes-js .routes-map .city{opacity:1}
  .routes-js.in .routes-map .pulse{animation:none}
  .ok-check circle,.ok-check path{animation:none;stroke-dashoffset:0}
}