/* ============================================================
   floweriver.com — site.css   v2
   语言：Apple 官网的排版语法 —— 巨型字号 / 满幅视觉 / 黑白交替舞台
   · 视觉全部由 CSS + SVG + Canvas 生成（零图片请求、零外部依赖）
   · 深色舞台用 #050507，浅色舞台用 #fff，品牌紫 #8863EF 只做强调
   · 内容列 --wrap 1180px，段落最大 34em，标题最大 -0.045em 字距
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --paper:#ffffff;
  --paper-2:#f6f6f8;
  --void:#050507;
  --void-2:#0b0b0e;
  --void-3:#141418;

  --ink:#0a0a0b;
  --ink-2:#5b6069;
  --ink-3:#8b9099;

  --on-void:#f5f5f7;
  --on-void-2:#a1a1a6;
  --on-void-3:#6e6e76;

  --line:#e8e8ec;
  --line-void:rgba(255,255,255,.10);

  --brand:#8863EF;
  --brand-deep:#4B25D6;
  --brand-light:#B9A6FF;
  --cyan:#38D9F0;

  --grad:linear-gradient(96deg,#7B4CFF 0%,#9E6BFF 42%,#39D6F2 100%);
  --grad-soft:linear-gradient(180deg,rgba(136,99,239,.16),rgba(56,217,240,.06));

  --wrap:1180px;
  --pad:clamp(20px,4.4vw,72px);
  --hdr-h:48px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",
         "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 20px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.5;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

/* ---------- 3. 双语 ---------- */
body[data-lang="zh"] .i18n-en,
body[data-lang="en"] .i18n-zh{display:none!important}

/* ---------- 4. 版式原子 ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--pad) * 2);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:calc(940px + var(--pad) * 2)}
.center{text-align:center}
.kick{
  display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand);
}
.kick--dim{color:var(--ink-3)}
.kick--void{color:var(--brand-light)}

.d1{
  font-size:clamp(46px,7.4vw,116px);line-height:.96;font-weight:600;
  letter-spacing:-.045em;text-wrap:balance;
}
.d2{
  font-size:clamp(36px,5vw,76px);line-height:1.02;font-weight:600;
  letter-spacing:-.04em;text-wrap:balance;
}
.d3{
  font-size:clamp(26px,3.1vw,44px);line-height:1.1;font-weight:600;
  letter-spacing:-.032em;text-wrap:balance;
}
.lead{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--ink-2);letter-spacing:-.014em}
.lead--void{color:var(--on-void-2)}
.body{font-size:15.5px;line-height:1.68;color:var(--ink-2)}
.body--void{color:var(--on-void-2)}
.grad-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.dim{color:var(--ink-3)}
.dim--void{color:var(--on-void-3)}

/* ---------- 5. 顶栏（Apple 式：细、矮、半透明、小字） ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:120;height:var(--hdr-h);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.hdr__in{
  height:100%;display:flex;align-items:center;gap:clamp(10px,2vw,34px);
  max-width:calc(var(--wrap) + var(--pad) * 2);margin:0 auto;padding:0 var(--pad);
}
.hdr__nav{display:flex;align-items:center;gap:clamp(12px,2.1vw,30px);margin:0 auto}
.hdr__nav a{
  font-size:12.5px;color:var(--ink-2);letter-spacing:.005em;
  padding:6px 1px;transition:color .2s var(--ease);white-space:nowrap;
}
.hdr__nav a:hover,.hdr__nav a.is-active{color:var(--ink)}
.hdr__act{display:flex;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.brand img{width:19px;height:19px}
.brand b{font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.brand span{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}

/* 深色舞台上顶栏反色 */
body.is-dark .hdr{background:rgba(5,5,7,.62);border-bottom-color:var(--line-void)}
body.is-dark .hdr__nav a{color:var(--on-void-2)}
body.is-dark .hdr__nav a:hover,body.is-dark .hdr__nav a.is-active{color:#fff}
body.is-dark .brand b{color:#fff}
body.is-dark .brand span{color:var(--on-void-3)}

.lang{display:inline-flex;background:rgba(0,0,0,.05);border-radius:999px;padding:2px}
body.is-dark .lang{background:rgba(255,255,255,.10)}
.lang button{
  font-size:10.5px;font-weight:600;line-height:1;padding:5px 8px;border-radius:999px;
  color:var(--ink-3);transition:background .2s var(--ease),color .2s var(--ease);
}
.lang button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.10)}
body.is-dark .lang button{color:var(--on-void-3)}
body.is-dark .lang button[aria-pressed="true"]{background:rgba(255,255,255,.92);color:#0a0a0b}

.burger{display:none;width:30px;height:30px;position:relative}
.burger i{position:absolute;left:6px;width:18px;height:1.4px;background:currentColor;transition:transform .3s var(--ease)}
.burger i:nth-child(1){top:11px}
.burger i:nth-child(2){top:17px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.mnav{
  position:fixed;inset:var(--hdr-h) 0 auto;z-index:119;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line);padding:8px var(--pad) 22px;
}
.mnav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 0;font-size:21px;font-weight:600;letter-spacing:-.02em;
  border-bottom:1px solid var(--line);
}
.mnav a:last-child{border-bottom:0}
.mnav a i{font-style:normal;color:var(--ink-3);font-size:17px;font-weight:400}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:44px;padding:0 22px;border-radius:999px;
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .3s var(--ease-out),background .25s var(--ease),
             border-color .25s var(--ease),color .25s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:#000;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{box-shadow:0 10px 30px rgba(255,255,255,.18)}
.btn--ghost{border:1px solid var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:#cfd2d8;background:var(--paper-2)}
.btn--ghost-void{border:1px solid rgba(255,255,255,.22);color:var(--on-void)}
.btn--ghost-void:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
.btn--grad{background:var(--grad);color:#fff;box-shadow:0 8px 26px rgba(123,76,255,.35)}
.btn--grad:hover{box-shadow:0 14px 38px rgba(123,76,255,.48)}
.btn--lg{height:52px;padding:0 30px;font-size:16px}
.btn .arw{transition:transform .3s var(--ease-out)}
.btn:hover .arw{transform:translateX(3px)}

/* ---------- 7. 舞台：首屏 ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--void);color:var(--on-void);
  min-height:min(100svh,940px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--hdr-h) + clamp(40px,7vh,90px));
}
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;
  opacity:.95;
}
.hero__glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 46% at 50% 8%,rgba(123,76,255,.30),transparent 62%),
    radial-gradient(52% 38% at 84% 22%,rgba(56,217,240,.20),transparent 66%),
    linear-gradient(180deg,rgba(5,5,7,.10) 0%,rgba(5,5,7,.30) 46%,rgba(5,5,7,.92) 88%,var(--void) 100%);
}
.hero__in{position:relative;z-index:1;padding-bottom:clamp(30px,5vh,64px);text-align:center}
.hero__eyebrow{justify-content:center}
.hero__eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:clamp(18px,2.4vw,30px)}
.hero__dot{
  width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 4px rgba(56,217,240,.16);animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{margin:0 auto;max-width:19em}
.hero__sub{
  margin:clamp(18px,2vw,26px) auto 0;max-width:33em;
  font-size:clamp(16px,1.5vw,21px);line-height:1.55;color:#b9b9c0;letter-spacing:-.015em;
}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.2vw,40px);justify-content:center}
.hero__meta{
  margin-top:clamp(30px,4.4vw,54px);padding-top:18px;
  border-top:1px solid var(--line-void);
  display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--on-void-3);text-transform:uppercase;
}
.hero__meta b{color:var(--on-void-2);font-weight:500}

/* 首屏底部滚动条 */
.hero__scroll{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:1px;height:44px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.42));
  overflow:hidden;
}
.hero__scroll::after{
  content:"";position:absolute;inset:0;background:#fff;
  animation:drip 2.4s var(--ease) infinite;
}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- 8. 通用区段 ---------- */
.sec{position:relative}
.sec--paper{background:var(--paper);color:var(--ink);padding:clamp(74px,9vw,138px) 0}
.sec--paper2{background:var(--paper-2);color:var(--ink);padding:clamp(74px,9vw,138px) 0}
.sec--void{background:var(--void);color:var(--on-void);padding:clamp(74px,9vw,138px) 0}
.sec--void2{background:var(--void-2);color:var(--on-void);padding:clamp(74px,9vw,138px) 0}
.sec__head{max-width:38em;margin-bottom:clamp(34px,4.4vw,62px)}
.sec__head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec__head .kick{margin-bottom:16px}
.sec__head .d2 + .lead{margin-top:20px}
.hairline{height:1px;background:var(--line);border:0;margin:0}
.hairline--void{background:var(--line-void)}

/* ---------- 9. 首屏下方的"一句话"巨幅标识 ---------- */
.billboard{
  background:var(--void);color:var(--on-void);
  padding:0 0 clamp(56px,7vw,104px);
}
.billboard__marquee{
  display:flex;gap:clamp(24px,3vw,52px);overflow:hidden;
  border-top:1px solid var(--line-void);border-bottom:1px solid var(--line-void);
  padding:16px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.billboard__track{
  display:flex;gap:clamp(24px,3vw,52px);flex:0 0 auto;
  animation:slide 38s linear infinite;
}
.billboard__track span{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-void-3);white-space:nowrap;display:inline-flex;align-items:center;gap:12px;
}
.billboard__track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--brand);opacity:.7}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 10. 能力区：左侧粘性标题 + 右侧视觉面板 ---------- */
.cap{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,5vw,84px);align-items:start}
.cap__aside{position:sticky;top:calc(var(--hdr-h) + 42px)}
.cap__aside .d2{margin-top:14px}
.cap__aside .lead{margin-top:18px;max-width:26em}
.cap__list{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px)}
.capcard{
  position:relative;overflow:hidden;border-radius:22px;
  background:#fff;border:1px solid #e6e6ec;
  box-shadow:0 1px 2px rgba(16,16,32,.05),0 22px 46px -34px rgba(24,20,60,.45);
  color:var(--ink);
  transition:border-color .4s var(--ease),transform .5s var(--ease-out),box-shadow .4s var(--ease);
}
.capcard:hover{
  border-color:#d5cdf5;transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(16,16,32,.06),0 30px 60px -32px rgba(70,40,170,.42);
}
.capcard__stage{
  position:relative;height:clamp(220px,25vw,320px);overflow:hidden;
  background:
    radial-gradient(80% 70% at 50% 26%,rgba(70,46,150,.42),transparent 70%),
    linear-gradient(180deg,#0e0e16,#08080d);
}
.capcard__stage canvas{width:100%;height:100%}
.capcard__no{
  position:absolute;top:14px;left:16px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.55);
}
.capcard__body{padding:clamp(20px,2.2vw,30px)}
.capcard__body h3{
  font-size:clamp(19px,1.8vw,25px);font-weight:600;letter-spacing:-.025em;
  display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--ink);
}
.capcard__body h3 em{
  font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.capcard__body p{margin-top:10px;font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.capcard__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.capcard__tags span{
  font-size:11.5px;letter-spacing:.01em;color:var(--ink-2);
  padding:5px 10px;border:1px solid #e6e6ec;border-radius:999px;background:#fafafb;
}

/* ---------- 11. 技术：规格表 ---------- */
.specs{border-top:1px solid var(--line)}
.spec{
  display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);
  gap:clamp(16px,3vw,48px);align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.spec__k{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.spec__v{font-size:clamp(15.5px,1.5vw,19px);font-weight:500;letter-spacing:-.02em}
.spec__v small{display:block;margin-top:6px;font-size:13.5px;font-weight:400;color:var(--ink-2);letter-spacing:-.005em}
.specs--void{border-top-color:var(--line-void)}
.specs--void .spec{border-bottom-color:var(--line-void)}
.specs--void .spec__k{color:var(--on-void-3)}
.specs--void .spec__v{color:var(--on-void)}
.specs--void .spec__v small{color:var(--on-void-2)}

/* ---------- 12. 产品：满幅交替舞台 ---------- */
.prod{
  position:relative;overflow:hidden;
  padding:clamp(56px,7vw,96px) 0 clamp(60px,7.5vw,104px);
}
.prod--a{background:var(--void);color:var(--on-void)}
.prod--b{background:var(--paper);color:var(--ink)}
.prod--c{background:var(--void-2);color:var(--on-void)}
.prod__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.4vw,72px);align-items:center;
}
.prod__grid--flip .prod__art{order:2}
.prod__art{
  position:relative;border-radius:28px;overflow:hidden;
  aspect-ratio:1/1;max-height:min(52vw,520px);
  background:#0a0a0d;
}
.prod--b .prod__art{background:#0b0b10}
.prod__art canvas{position:absolute;inset:0;width:100%;height:100%}
.prod__art-label{
  position:absolute;left:18px;bottom:16px;z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.prod__copy h3{
  font-size:clamp(30px,3.6vw,52px);line-height:1.04;font-weight:600;letter-spacing:-.038em;
}
.prod__copy h3 small{
  display:block;margin-top:10px;font-family:var(--mono);font-size:11.5px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.prod--a .prod__copy h3 small,.prod--c .prod__copy h3 small{color:var(--on-void-3)}
.prod__copy .body{margin-top:18px;max-width:30em}
.prod__feats{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.prod__feats li{
  display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.6;
  color:var(--ink-2);letter-spacing:-.005em;
}
.prod--a .prod__feats li,.prod--c .prod__feats li{color:var(--on-void-2)}
.prod__feats li::before{
  content:"";flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:50%;
  background:var(--grad);opacity:.9;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 44%);
  mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 44%);
}
.prod__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}

/* ---------- 13. 数字 ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,3vw,40px);
  padding:clamp(34px,4.4vw,58px) 0;
}
.stat b{
  display:block;font-size:clamp(38px,5.4vw,74px);line-height:1;font-weight:600;
  letter-spacing:-.05em;
}
.stat span{
  display:block;margin-top:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.sec--void .stat span,.sec--void2 .stat span{color:var(--on-void-3)}

/* ---------- 14. 引用 / 大字宣言 ---------- */
.manifesto{position:relative;overflow:hidden;background:var(--void);color:var(--on-void)}
.manifesto__glow{
  position:absolute;inset:-20% -10%;pointer-events:none;
  background:radial-gradient(46% 40% at 50% 50%,rgba(123,76,255,.22),transparent 68%);
}
.manifesto p{
  position:relative;font-size:clamp(23px,3.2vw,44px);line-height:1.28;font-weight:500;
  letter-spacing:-.035em;text-wrap:balance;
}
.manifesto p em{font-style:normal;color:var(--brand-light)}
.manifesto figcaption{
  position:relative;margin-top:clamp(26px,3.4vw,44px);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-void-3);
}

/* ---------- 15. 关于：双列 ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,5vw,84px);align-items:start}
.mvv{display:grid;gap:clamp(18px,2.4vw,28px)}
.mvv__cell{padding:clamp(20px,2.4vw,30px);border:1px solid var(--line);border-radius:20px;background:#fff}
.mvv__cell h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);
}
.mvv__cell p{margin-top:12px;font-size:15px;line-height:1.62;color:var(--ink-2)}

/* ---------- 16. CTA ---------- */
.cta{
  position:relative;overflow:hidden;background:var(--void);color:var(--on-void);
  padding:clamp(80px,10vw,150px) 0;text-align:center;
}
.cta__glow{
  position:absolute;inset:auto -10% -60% ;height:120%;
  background:radial-gradient(50% 50% at 50% 100%,rgba(123,76,255,.30),transparent 70%);
  pointer-events:none;
}
.cta h2{position:relative}
.cta .lead{position:relative;margin:22px auto 0;max-width:30em}
.cta__acts{position:relative;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(30px,4vw,46px)}
.cta__fine{
  position:relative;margin-top:clamp(26px,3.4vw,40px);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-void-3);
}

/* ---------- 17. 页脚 ---------- */
.foot{background:#f5f5f7;color:var(--ink);padding:clamp(46px,5.6vw,72px) 0 34px;font-size:12.5px}
.foot__cols{
  display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,52px);padding-bottom:clamp(30px,3.6vw,46px);
  border-bottom:1px solid #e2e2e6;
}
.foot__col h4{
  font-size:12px;font-weight:600;letter-spacing:-.005em;color:var(--ink);margin-bottom:14px;
}
.foot__col li + li{margin-top:9px}
.foot__col a,.foot__col span{color:#6e6e76}
.foot__col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.foot__brand{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.foot__brand img{width:18px;height:18px}
.foot__brand b{font-size:14px;font-weight:600;letter-spacing:-.02em}
.foot__note{color:#6e6e76;line-height:1.6;max-width:22em}
.foot__legal{
  padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 24px;
  justify-content:space-between;color:#86868b;font-size:11.5px;
}
.foot__legal a{color:#86868b}
.foot__legal a:hover{color:var(--ink)}
.foot__icp{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.foot__icp img{width:14px;height:14px;opacity:.7;vertical-align:-2px;margin-right:4px}

/* ---------- 18. 入场动效 ---------- */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
[data-rv].is-in{opacity:1;transform:none}
[data-rv-d="1"]{transition-delay:.08s}
[data-rv-d="2"]{transition-delay:.16s}
[data-rv-d="3"]{transition-delay:.24s}
[data-rv-d="4"]{transition-delay:.32s}

.skip{
  position:fixed;top:-80px;left:16px;z-index:200;background:#fff;color:#0a0a0b;
  padding:10px 18px;border-radius:999px;font-size:13px;
  transition:top .25s var(--ease);box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.skip:focus{top:10px}

/* ---------- 19. 响应式 ---------- */
@media (max-width:1080px){
  .cap{grid-template-columns:1fr;gap:clamp(26px,4vw,44px)}
  .cap__aside{position:static}
  .about{grid-template-columns:1fr}
  .prod__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  .prod__grid--flip .prod__art{order:0}
  .prod__art{aspect-ratio:16/11;max-height:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .foot__cols{grid-template-columns:1fr 1fr}
  .foot__col--brand{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--hdr-h:44px}
  body{font-size:16px}
  .hdr__nav{display:none}
  .burger{display:block}
  .hdr__act .btn{display:none}
  .hero{min-height:min(92svh,760px)}
  .hero__meta{font-size:10.5px;gap:8px 18px}
  .hero__scroll{display:none}
  .spec{grid-template-columns:1fr;gap:6px}
  .foot__legal{flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  [data-rv]{opacity:1;transform:none}
}

/* ---------- 20. 技术管线图 ---------- */
.flow{
  position:relative;margin-top:clamp(34px,4.4vw,58px);
  padding:clamp(16px,2.2vw,26px) clamp(14px,1.8vw,22px);
  border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(180deg,#ffffff,#fafafc);
  box-shadow:0 1px 2px rgba(16,16,32,.04),0 26px 50px -40px rgba(24,20,60,.5);
  overflow:hidden;
}
.flow canvas{width:100%;height:clamp(132px,15vw,172px)}
.flow__cap{
  margin-top:14px;text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}

/* ---------- 21. 技术区两栏 ---------- */
.tech{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,5vw,80px);align-items:start;
}
.tech__aside{position:sticky;top:calc(var(--hdr-h) + 42px)}
.tech__aside .d2{margin-top:14px;font-size:clamp(32px,4vw,58px)}
.tech__aside .lead{margin-top:18px;max-width:26em}
@media (max-width:1080px){
  .tech{grid-template-columns:1fr}
  .tech__aside{position:static}
}

/* ---------- 22. 技术规格：卡片网格 ---------- */
.specs--cards{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:0;
}
.specs--cards .spec{
  display:block;padding:20px 20px 22px;border:1px solid #e8e8ec;border-radius:18px;
  background:#fff;box-shadow:0 1px 2px rgba(16,16,32,.04);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .4s var(--ease-out);
}
.specs--cards .spec:hover{border-color:#d8d2f2;box-shadow:0 18px 36px -28px rgba(60,30,140,.5);transform:translateY(-2px)}
.specs--cards .spec__k{display:block;margin-bottom:10px}
.specs--cards .spec__v{display:block;font-size:16.5px;line-height:1.42}
.specs--cards .spec__v small{font-size:13px;line-height:1.5}
@media (max-width:760px){.specs--cards{grid-template-columns:1fr}}

/* ---------- 23. 关于区：通栏数字带 ---------- */
.stats--band{
  margin-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--line-void);border-bottom:1px solid var(--line-void);
  padding:clamp(28px,3.4vw,44px) 0;
}
.stats--band b{font-size:clamp(42px,6vw,84px)}
.stats--band .stat span{color:var(--on-void-3)}

/* ---------- 24. 技术区标题通栏 ---------- */
.tech__head{max-width:36em;margin-bottom:clamp(26px,3.4vw,42px)}
.tech__head .d2{margin-top:14px;font-size:clamp(34px,4.4vw,64px)}
.tech__head .lead{margin-top:18px}

/* ---------- 25. 关于区地球 ---------- */
.globe{
  position:relative;margin-bottom:clamp(34px,4.6vw,60px);overflow:hidden;
  border-radius:26px;border:1px solid var(--line-void);
  background:radial-gradient(70% 90% at 30% 30%,rgba(70,40,160,.34),rgba(6,6,10,.92) 70%),#06060a;
  display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1fr);
  align-items:center;gap:clamp(20px,3.4vw,52px);
  padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,40px) clamp(18px,2.4vw,28px) 0;
  min-height:clamp(230px,26vw,300px);
}
.globe__stage{position:relative;min-width:0}
.globe__stage canvas{width:100%;height:clamp(220px,25vw,300px)}
.globe__copy{min-width:0}
.globe__meta{
  margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-void-3);
}
@media (max-width:860px){
  .globe{grid-template-columns:1fr;padding:0 0 22px}
  .globe__stage canvas{height:clamp(200px,46vw,260px)}
  .globe__copy{padding:0 20px}
}
