/* =========================================================
   广为海洋 GW-OCEAN 官网原型 · 方向一 深蓝破浪沉浸
   设计系统严格忠于《广为海洋VI》：主色 #1d50a2 / 思源黑体 /
   灰白辅助 / A1.9 深藏青暗底 / A1.6 蓝阶渐变 / GW 母题
   ========================================================= */

:root{
  /* —— VI 标准色 —— */
  --gw-blue:        #1d50a2;   /* A1.6 主色 深海蓝 */
  --gw-blue-bright: #2f6fd0;   /* 蓝阶较浅档（A1.6 授权 10 级阶） */
  --gw-blue-soft:   #6c9bdc;
  --gw-blue-deep:   #123a7a;
  --gw-navy:        #0a1a3a;   /* A1.9 深藏青暗底 */
  --gw-midnight:    #050d20;   /* 潜入水下 */
  --gw-ink:         #0b1326;   /* 正文深色（A1.6 黑阶） */
  --gw-gray:        #dcdddd;   /* A1.7 辅助灰 */
  --gw-mist:        #eef3fb;   /* 蓝白浅底（蓝阶最浅档衍生） */
  --gw-mist-2:      #f6f9fe;
  --white:          #ffffff;

  /* —— 中性令牌：全部派生自 VI 黑阶/辅助灰，且满足 WCAG AA 对比度 —— */
  --text:        #2d3a4f;            /* 强正文（白底 ≈9:1） */
  --text-soft:   #51607a;            /* 次要正文（白底 ≈5:1） */
  --text-mute:   #5b6678;            /* 注释/英文副标（白底 ≈4.6:1，AA 下限） */
  --line:        rgba(11,19,38,.09); /* 边框/分隔（派生自黑阶） */
  --line-2:      rgba(11,19,38,.16);
  --hair-blue:   rgba(29,80,162,.22);/* 蓝色描边（派生自主色） */

  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1200px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-out: cubic-bezier(.22,1,.36,1);

  --font-cn: "Noto Sans SC","Source Han Sans SC","Source Han Sans","PingFang SC","Microsoft YaHei",sans-serif;
  --font-en: "Helvetica Neue",Helvetica,Arial,"PingFang SC",sans-serif; /* VI 规范：英文=Helvetica */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--font-cn);
  color:var(--gw-ink);
  background:var(--gw-navy);
  line-height:1.7;
  overflow-x:hidden;
}
/* 英文页正文默认西文字体（VI：英文=Helvetica）；残留中文（语言切换/备案号/装饰带）经 font-en 里的 PingFang SC 兜底正常显示。修正大字号标题里 ’ 撇号被 CJK 字体渲染成全角的问题。 */
html[lang="en"] body{ font-family:var(--font-en); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; color:var(--gw-blue); }
::selection{ background:var(--gw-blue); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* —— 通用按钮 —— */
.btn{
  --bg:var(--gw-blue);
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-cn); font-weight:500; font-size:15px;
  padding:13px 26px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:.35s var(--ease); white-space:nowrap;
  background:transparent; color:inherit;
}
.btn .arr,.btn .arr i{ transition:.35s var(--ease); }
.btn--primary{ background:var(--gw-blue); color:#fff; box-shadow:0 8px 28px -10px rgba(29,80,162,.7); }
.btn--primary:hover{ background:var(--gw-blue-bright); transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(47,111,208,.8); }
.btn--primary:hover .arr{ transform:translateX(4px); }
.btn--ghost{ border-color:rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(6px); }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); transform:translateY(-2px); }
.btn--sm{ padding:9px 18px; font-size:13.5px; background:var(--gw-blue); color:#fff; }
.btn--sm:hover{ background:var(--gw-blue-bright); }
.btn--lg{ padding:16px 34px; font-size:16px; }
.arr{ font-style:normal; display:inline-block; }

/* =========================================================
   加载器 + 母题描边
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:var(--gw-navy);
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.done{ opacity:0; visibility:hidden; }
/* logo：先淡入，再「呼吸式」脉冲 + 蓝色光晕（栅格图用 opacity/filter 做，不用 scale 以免边缘逐帧重采样抖动）。 */
.loader__img{
  width:128px; height:auto; opacity:0;
  animation:loaderIn .7s .1s ease forwards, loaderPulse 1.9s .85s ease-in-out infinite;
}
@keyframes loaderIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes loaderPulse{
  0%,100%{ opacity:1;   filter:drop-shadow(0 0 2px rgba(108,155,220,.25)); }
  50%    { opacity:.55; filter:drop-shadow(0 0 22px rgba(108,155,220,.65)); }
}
.loader__mark{ width:96px; height:72px; }
.loader__mark path,.loader__mark rect{
  stroke:var(--gw-blue-soft); stroke-width:3; fill:transparent;
}
.loader__mark .draw{
  stroke-dasharray:240; stroke-dashoffset:240;
  animation:draw 1.5s var(--ease-out) forwards;
}
.loader__mark .draw:nth-child(2){ animation-delay:.18s; }
.loader__mark .draw:nth-child(3){ animation-delay:.36s; }
.loader__mark .draw:nth-child(4){ animation-delay:.54s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.loader__txt{ font-family:var(--font-en); letter-spacing:.4em; font-size:13px; color:var(--gw-blue-soft); padding-left:.4em; opacity:0; animation:fadeUp .6s .7s forwards; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:.9; transform:none;} }
/* 「加载中 •••」状态提示：文字淡入 + 三圆点依次跳动 */
.loader__loading{
  display:inline-flex; align-items:center; gap:9px; margin-top:-10px;
  font-family:var(--font-en); font-size:11.5px; letter-spacing:.26em; padding-left:.26em;
  color:var(--gw-blue-soft); opacity:0; animation:fadeUp .6s .95s forwards;
}
.loader__dots{ display:inline-flex; gap:5px; font-style:normal; }
.loader__dots b{
  width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.3;
  animation:loaderDot 1.4s ease-in-out infinite;
}
.loader__dots b:nth-child(2){ animation-delay:.16s; }
.loader__dots b:nth-child(3){ animation-delay:.32s; }
@keyframes loaderDot{ 0%,75%,100%{ opacity:.3; transform:translateY(0); } 38%{ opacity:1; transform:translateY(-4px); } }

/* =========================================================
   导航
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:.4s var(--ease);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__logo img{ height:60px; width:auto; transition:.4s; filter:brightness(0) invert(1); }
.nav__menu{ display:flex; gap:24px; margin-left:auto; }
.nav__menu a{
  font-size:15px; font-weight:500; color:rgba(255,255,255,.86); position:relative; padding:4px 0;
  transition:.3s;
}
.nav__menu a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--gw-blue-bright); transition:.3s var(--ease); }
.nav__menu a:hover{ color:#fff; }
.nav__menu a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:16px; }
.nav__lang{ background:none; border:none; cursor:pointer; font-family:var(--font-en); font-size:13px; letter-spacing:.05em; color:rgba(255,255,255,.8); transition:.3s; }
.nav__lang span{ opacity:.55; }
.nav__lang:hover{ color:#fff; }
.nav__burger{ display:none; width:30px; height:24px; background:none; border:none; cursor:pointer; position:relative; }
.nav__burger span{ position:absolute; left:0; width:100%; height:2px; background:#fff; transition:.3s var(--ease); }
.nav__burger span:nth-child(1){ top:2px; } .nav__burger span:nth-child(2){ top:11px; } .nav__burger span:nth-child(3){ top:20px; }

/* 滚动后：玻璃拟态导航岛，切回品牌蓝 logo */
.nav.scrolled{ }
.nav.scrolled .nav__inner{
  margin:12px auto; max-width:1040px; width:calc(100% - 32px); border-radius:999px;
  padding:11px 22px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(29,80,162,.12);
  box-shadow:0 12px 40px -16px rgba(10,26,58,.35);
}
.nav.scrolled .nav__logo img{ filter:none; height:50px; }
.nav.scrolled .nav__menu a{ color:var(--gw-ink); }
.nav.scrolled .nav__lang{ color:var(--gw-ink); }
.nav.scrolled .nav__burger span{ background:var(--gw-ink); }
/* —— 导航搜索按钮（在「获取方案」右侧） —— */
.nav__search{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:none; background:none; cursor:pointer; color:rgba(255,255,255,.85); border-radius:50%; transition:.3s var(--ease); }
.nav__search svg{ width:19px; height:19px; }
.nav__search:hover{ color:#fff; background:rgba(255,255,255,.1); }
.nav.scrolled .nav__search{ color:var(--gw-ink); }
.nav.scrolled .nav__search:hover{ background:rgba(10,26,58,.06); }

/* —— 全站搜索浮层 —— */
.search{ position:fixed; inset:0; z-index:10000; display:flex; align-items:flex-start; justify-content:center; opacity:0; transition:opacity .25s var(--ease); }
.search.is-open{ opacity:1; }
.search[hidden]{ display:none; }
.search__backdrop{ position:absolute; inset:0; background:rgba(5,13,32,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.search__panel{ position:relative; width:calc(100% - 40px); max-width:640px; margin-top:12vh;
  background:rgba(12,26,56,.94); border:1px solid rgba(108,155,220,.28); border-radius:18px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.7); overflow:hidden;
  transform:translateY(-12px) scale(.985); transition:transform .3s var(--ease); }
.search.is-open .search__panel{ transform:none; }
.search__bar{ display:flex; align-items:center; gap:12px; padding:18px; border-bottom:1px solid rgba(255,255,255,.08); }
.search__icon{ width:22px; height:22px; color:var(--gw-blue-soft); flex:none; }
.search__input{ flex:1; min-width:0; background:none; border:none; outline:none; color:#fff; font-family:var(--font-cn); font-size:18px; font-weight:300; }
.search__input::placeholder{ color:rgba(255,255,255,.4); }
.search__close{ flex:none; font-family:var(--font-en); font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:7px; padding:5px 9px; cursor:pointer; transition:.3s; }
.search__close:hover{ color:#fff; background:rgba(255,255,255,.15); }
.search__results{ max-height:56vh; overflow-y:auto; }
.search__item{ display:block; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.05); transition:background .2s; }
.search__item:hover,.search__item:focus-visible{ background:rgba(108,155,220,.12); outline:none; }
.search__type{ display:inline-block; font-family:var(--font-en); font-size:11px; letter-spacing:.04em; color:var(--gw-blue-soft); background:rgba(108,155,220,.14); border-radius:4px; padding:2px 8px; margin-bottom:6px; }
.search__t{ display:block; font-size:15.5px; font-weight:500; color:#fff; line-height:1.4; }
.search__d{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; font-weight:300; color:rgba(255,255,255,.6); line-height:1.5; margin-top:3px; }
.search__t mark,.search__d mark{ background:rgba(47,111,208,.45); color:#fff; border-radius:2px; padding:0 1px; }
.search__hint{ padding:18px 20px 22px; font-size:13px; color:rgba(255,255,255,.4); }
.search__empty{ padding:28px 20px; font-size:14px; color:rgba(255,255,255,.5); text-align:center; }
@media (max-width:760px){ .search__panel{ margin-top:8vh; width:calc(100% - 24px); } .search__input{ font-size:16px; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; background:var(--gw-navy); }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero__fallback{ position:absolute; inset:0; }
.hero__fallback div{
  position:absolute; inset:0;
  /* 顶层深蓝 scrim 压暗保证白标题可读；中层＝生成的破晓海面降级海报；底层＝原渐变（海报缺失时兜底） */
  background:
    linear-gradient(170deg, rgba(5,13,32,.32) 0%, rgba(5,13,32,.16) 42%, rgba(10,26,58,.62) 100%),
    url("/assets/img/gen/home-hero-deep-ocean.jpg") center/cover no-repeat,
    radial-gradient(120% 90% at 70% -10%, var(--gw-blue-bright) 0%, transparent 55%),
    linear-gradient(180deg, var(--gw-blue-deep) 0%, var(--gw-navy) 55%, var(--gw-midnight) 100%);
}
.hero__grain{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 80% at 50% 120%, rgba(5,13,32,.85), transparent 70%); }

/* —— 深海视频层（混合架构：下潜深时淡入接管深海段） —— */
.deepsea{ position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; will-change:opacity; transition:opacity 1.1s var(--ease); }
/* 视频/占位就绪后整体淡入，盖住下层 WebGL 海面（未就绪时露 WebGL 作动态加载态） */
.deepsea.is-ready{ opacity:1; }
/* 纯 CSS 深海占位：视频未加载/降级/低端机时的美观兜底，零下载、立即渲染、永不 404 */
.deepsea__fallback{ position:absolute; inset:0;
  background:
    radial-gradient(120% 72% at 50% -8%, rgba(120,180,255,.32) 0%, rgba(47,111,208,.14) 28%, transparent 60%),
    radial-gradient(85% 65% at 50% 42%, transparent 48%, rgba(3,8,20,.6) 100%),
    linear-gradient(180deg, #0e2a5e 0%, var(--gw-navy) 46%, var(--gw-midnight) 100%); }
/* 缓慢丁达尔光柱（CSS 模拟体积光，reduce 下停） */
.deepsea__rays{ position:absolute; inset:-12%; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:
    linear-gradient(168deg, transparent 41%, rgba(150,200,255,.11) 47%, transparent 53%),
    linear-gradient(194deg, transparent 39%, rgba(120,175,255,.08) 45%, transparent 51%);
  animation:deepsea-rays 16s var(--ease) infinite alternate; }
@keyframes deepsea-rays{ from{ transform:translateX(-3%) scale(1.02); } to{ transform:translateX(3%) scale(1.06); } }
/* 悬浮颗粒纹理：复用 VI A1.8 白线母题，极淡，呼应品牌 */
.deepsea__motes{ position:absolute; inset:0; pointer-events:none; opacity:.03;
  background:url(../img/motif-white.png) repeat; background-size:300px 208px; }
/* 视频：ready('playing') 后淡入盖住 CSS 占位 */
.deepsea__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s var(--ease); background:var(--gw-midnight); }
.deepsea.is-ready .deepsea__video{ opacity:1; }
/* —— 首屏「海面涌动」环境循环层（boomerang：水涌向镜头→退去，反复）——
   静止(dive≈0)时显示、一滚动下潜即淡出让位深海视频；位于深海层之上、文字(z:5)之下。opacity 由 deepsea.js 按 dive 逐帧驱动。 */
.hero-idle{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s linear; pointer-events:none; background:var(--gw-midnight); }

.hero__device{
  position:absolute; right:-60px; bottom:-60px; width:46vw; max-width:560px; height:auto; opacity:.14; z-index:2;
  color:#fff; pointer-events:none;
}
.hero__device path{ fill:currentColor; }

.hero__content{
  position:absolute; left:0; right:0; bottom:21%; z-index:5;
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-en); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.82); margin-bottom:22px;
  opacity:0; animation:heroUp .9s .2s var(--ease-out) forwards;
}
.hero__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--gw-blue-bright); box-shadow:0 0 0 4px rgba(47,111,208,.3); }
.hero__title{
  font-size:clamp(46px, 8.2vw, 110px); font-weight:900; line-height:.98; letter-spacing:.01em;
  color:#fff; text-shadow:0 8px 40px rgba(5,13,32,.5);
  opacity:0; animation:heroUp 1s .35s var(--ease-out) forwards;
}
.hero__en{
  font-family:var(--font-en); font-weight:700; font-size:clamp(15px,2.2vw,24px); letter-spacing:.42em;
  color:var(--gw-blue-soft); margin-top:18px;
  opacity:0; animation:heroUp 1s .5s var(--ease-out) forwards;
}
.hero__desc{
  margin-top:26px; max-width:none; font-weight:300; font-size:clamp(15px,1.5vw,18px); color:rgba(255,255,255,.86);
  opacity:0; animation:heroUp 1s .65s var(--ease-out) forwards;
}
@media (min-width:768px){ .hero__desc{ white-space:nowrap; } } /* PC 单行 */
.hero__cta{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; animation:heroUp 1s .8s var(--ease-out) forwards; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(34px); } to{ opacity:1; transform:none; } }

.hero__scroll{
  /* 居中不能用 left:50%+translateX(-50%)：入场动画 heroUp 的 to{transform:none}
     会清掉定位变换导致整体偏右（桌面端同样受益于此修复） */
  position:absolute; left:0; right:0; bottom:104px; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:12.5px; letter-spacing:.1em; color:rgba(255,255,255,.62);
  /* 贴字阴影（与 hero__title 同式）：防亮海面波光压白字 */
  text-shadow:0 0 2px rgba(5,13,32,.5), 0 1px 4px rgba(5,13,32,.45), 0 3px 12px rgba(5,13,32,.22);
  opacity:0; animation:heroUp 1s 1.1s forwards;
}
.hero__scroll-line{ width:1px; height:42px; background:linear-gradient(rgba(255,255,255,.7),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:#fff; animation:scrolldown 1.8s var(--ease) infinite; }
@keyframes scrolldown{ 0%{ top:-50%; } 100%{ top:110%; } }

.hero__marquee{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:18px 0;
  border-top:1px solid rgba(255,255,255,.1);
  background:linear-gradient(rgba(5,13,32,0), rgba(5,13,32,.45));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; gap:48px; width:max-content; animation:marquee 32s linear infinite; }
.marquee__track span{ font-size:14px; color:rgba(255,255,255,.55); white-space:nowrap; display:inline-flex; align-items:center; gap:48px; font-weight:300; }
.marquee__track span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gw-blue-bright); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =========================================================
   通用 section / 标题
   ========================================================= */
.section{ position:relative; padding:clamp(72px,9vw,128px) 0; background:var(--white); }
.sec-head{ max-width:760px; margin-bottom:54px; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-kicker{ font-family:var(--font-en); font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gw-blue); margin-bottom:16px; }
.sec-kicker.light{ color:var(--gw-blue-soft); }
.sec-title{ font-size:clamp(28px,4vw,50px); font-weight:900; line-height:1.12; letter-spacing:.005em; }
.sec-title.light{ color:#fff; }
.sec-sub{ margin-top:20px; font-weight:300; font-size:16px; color:var(--text-soft); }
.stats .sec-sub,.mission .sec-sub{ color:rgba(255,255,255,.7); }
.todo-flag{ display:inline-block; margin-left:12px; font-size:12px; font-weight:400; letter-spacing:0; color:var(--gw-blue-soft); padding:2px 11px; border:1px dashed var(--hair-blue); border-radius:999px; vertical-align:middle; }

/* —— 滚动揭示 —— */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   核心业务 Bento
   ========================================================= */
.biz{ background:var(--white); }
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.bento__card{
  position:relative; overflow:hidden;
  background:var(--gw-mist-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 32px; min-height:220px;
  transition:.45s var(--ease); display:flex; flex-direction:column;
}
.bento__card--lg{ grid-row:span 2; background:linear-gradient(160deg,var(--gw-blue) 0%, var(--gw-blue-deep) 100%); border-color:transparent; color:#fff; }
.bento__card--wide{ grid-column:span 2; }
.bento__card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -24px rgba(10,26,58,.3); border-color:var(--hair-blue); }
.bento__card--lg:hover{ box-shadow:0 28px 60px -20px rgba(29,80,162,.6); }
.bento__ix{ font-family:var(--font-en); font-weight:700; font-size:14px; letter-spacing:.1em; color:var(--gw-blue); opacity:.6; margin-bottom:auto; }
.bento__card--lg .bento__ix{ color:#fff; opacity:.7; }
.bento__card h3{ font-size:21px; font-weight:700; margin:38px 0 12px; line-height:1.35; }
.bento__card h3 span{ display:block; font-family:var(--font-en); font-size:12.5px; font-weight:500; letter-spacing:.05em; color:var(--text-mute); margin-top:5px; }
.bento__card--lg h3{ font-size:25px; } .bento__card--lg h3 span{ color:rgba(255,255,255,.7); }
.bento__card p{ font-size:14.5px; font-weight:300; color:var(--text-soft); }
.bento__card--lg p{ color:rgba(255,255,255,.85); font-weight:300; }
.bento__motif[data-motif]{ position:absolute; right:-30px; bottom:-30px; width:180px; height:180px; opacity:.32; pointer-events:none; }
/* —— 全幅配图卡：实景图 + 深蓝 scrim + 白字（图均为「便于叠字」的负空间构图） —— */
.bento__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.bento__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.bento__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(165deg, rgba(7,18,40,.58) 0%, rgba(7,18,40,.42) 38%, rgba(5,13,32,.85) 100%); }
.bento__card--img{ border-color:transparent; color:#fff; }
.bento__card--img > :not(.bento__media){ position:relative; z-index:1; }
.bento__card--img:hover .bento__media img{ transform:scale(1.04); }
.bento__card--img .bento__ix{ color:#fff; opacity:.82; }
.bento__card--img h3{ color:#fff; }
.bento__card--img h3 span{ color:rgba(255,255,255,.78); }
.bento__card--img p{ color:rgba(255,255,255,.9); }
/* 卡片作为链接（数智海洋/渔业/海渔装备 → 对应产品页）：去下划线、继承色 */
a.bento__card{ text-decoration:none; color:inherit; }
/* PC（横向空间足够）：核心业务/产品三线/新闻总览 标题单行不换行 */
@media (min-width:981px){ .biz .sec-head{ max-width:none; } }
@media (min-width:1100px){
  .biz .sec-title,.biz .sec-sub,
  .lines-sec .sec-title,
  .news-all .sec-title{ white-space:nowrap; }
}
/* 英文文案更长，强制单行会撑破页面 → 英文版一律恢复正常换行（高特异性，覆盖上面的 nowrap） */
html[lang="en"] .biz .sec-title,
html[lang="en"] .biz .sec-sub,
html[lang="en"] .lines-sec .sec-title,
html[lang="en"] .news-all .sec-title{ white-space:normal; }

/* =========================================================
   数据成就（深色 + 母题水印）
   ========================================================= */
.stats{ background:var(--gw-navy); overflow:hidden; }
.stats__pattern[data-pattern]{ position:absolute; inset:0; opacity:.16; pointer-events:none; }
/* 真实 A1.8 辅助图形上缓慢扫过的光泽（让数据底纹有生命，几何仍是 VI 原图） */
.stats__sheen{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:linear-gradient(105deg, transparent 38%, rgba(108,155,220,.16) 50%, transparent 62%);
  background-size:260% 100%; animation:sheen 7s var(--ease) infinite; }
@keyframes sheen{ 0%{ background-position:130% 0; } 100%{ background-position:-30% 0; } }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.stat{ text-align:center; padding:20px; border-left:1px solid rgba(255,255,255,.1); }
.stat:first-child{ border-left:none; }
.stat__num{ font-family:var(--font-en); font-weight:800; font-size:clamp(40px,5.5vw,68px); line-height:1; color:#fff;
  background:linear-gradient(180deg,#fff,var(--gw-blue-soft)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat__label{ margin-top:14px; font-size:14px; font-weight:300; color:rgba(255,255,255,.62); }

/* =========================================================
   企业宣传片（B 站嵌入 · 深蓝影院风，首屏视频下方）
   ========================================================= */
.film{ position:relative; overflow:hidden; background:linear-gradient(180deg,var(--gw-navy) 0%, var(--gw-blue-deep) 120%); }
.film__pattern[data-pattern]{ position:absolute; inset:0; opacity:.10; pointer-events:none; }
.film .wrap{ position:relative; z-index:1; }
.film .sec-sub{ color:rgba(255,255,255,.72); }
.film__player{
  position:relative; max-width:960px; margin:42px auto 0; aspect-ratio:16/9;
  border-radius:var(--radius); overflow:hidden; background:#000;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 44px 100px -44px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.film__player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* =========================================================
   解决方案
   ========================================================= */
.solutions{ background:var(--gw-mist); }
/* 删掉小字描述后，收紧大标题与图片卡之间的间距，避免标题下方留空过大 */
.solutions .sec-head{ margin-bottom:36px; }
.sol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sol{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:26px 24px 56px; transition:.4s var(--ease); overflow:hidden;
}
.sol::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--gw-blue); transform:scaleX(0); transform-origin:left; transition:.4s var(--ease); }
.sol:hover{ transform:translateY(-5px); box-shadow:0 24px 44px -22px rgba(10,26,58,.28); }
.sol:hover::before{ transform:scaleX(1); }
.sol__ix{ font-family:var(--font-en); font-weight:700; font-size:13px; color:var(--gw-blue); opacity:.55; }
.sol h3{ font-size:18px; font-weight:700; margin:14px 0 6px; }
.sol p{ font-family:var(--font-en); font-size:12px; color:var(--text-mute); letter-spacing:.02em; }
.sol__arr{ position:absolute; right:22px; bottom:20px; font-style:normal; color:var(--gw-blue); opacity:0; transform:translateX(-6px); transition:.4s var(--ease); }
.sol:hover .sol__arr{ opacity:1; transform:none; }
/* —— 全幅配图卡：实景图 + 深蓝 scrim + 白字 —— */
.sol--img{ color:#fff; border-color:transparent; min-height:188px; }
.sol--img .sol__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.sol--img .sol__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.sol--img .sol__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(7,18,40,.48) 0%, rgba(7,18,40,.40) 40%, rgba(5,13,32,.84) 100%); }
.sol--img:hover .sol__media img{ transform:scale(1.05); }
.sol--img > :not(.sol__media){ position:relative; z-index:1; }
.sol--img::before{ z-index:2; }
.sol--img .sol__ix{ color:#fff; opacity:.85; }
.sol--img h3{ color:#fff; }
.sol--img p{ color:rgba(255,255,255,.8); }
.sol--img .sol__arr{ color:#fff; opacity:.9; }
/* —— 暂无详情的方案卡（div 渲染不可点击）：关闭悬停上浮/顶条/图片缩放等「可前往」暗示 —— */
.sol--soon{ cursor:default; }
.sol--soon:hover{ transform:none; box-shadow:none; }
.sol--soon:hover::before{ transform:scaleX(0); }
.sol--soon:hover .sol__media img{ transform:none; }
/* 左下角「完善中，敬请期待」角标：白描边小胶囊，跟在副标题下方的文档流里。
   注意不能用 position:absolute——会被上方 `.sol--img > :not(.sol__media)`（特异性更高）
   的 position:relative 覆盖，导致 right/bottom 变成相对偏移叠到副标题上。 */
.sol__soon{ display:inline-block; margin-top:14px; font-size:12px; letter-spacing:.04em;
  color:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.32); border-radius:999px; padding:3px 10px; }

/* =========================================================
   使命专题
   ========================================================= */
.mission{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; text-align:center;
  /* 背景＝「向海图强」破浪科考船实景 + 基础压暗渐变；veil 再叠一层径向暗角，双层保证白大标题可读 */
  background:
    linear-gradient(180deg, rgba(5,13,32,.40) 0%, rgba(8,20,46,.56) 100%),
    url("/assets/img/gen/home-mission-sea-power.jpg") center/cover no-repeat,
    var(--gw-navy); }
.mission__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.mission__veil{ position:absolute; inset:0; background:radial-gradient(80% 80% at 50% 40%, rgba(5,13,32,.2), rgba(5,13,32,.82)); }
.mission__inner{ position:relative; z-index:3; }
.mission__cn{ font-weight:300; font-size:clamp(15px,2vw,20px); letter-spacing:1.1em; color:var(--gw-blue-soft); padding-left:1.1em; margin-bottom:24px; }
.mission__title{ font-size:clamp(36px,6vw,82px); font-weight:900; color:#fff; line-height:1.05; text-shadow:0 10px 50px rgba(0,0,0,.5); }
.mission__desc{ margin:26px auto 38px; max-width:560px; font-weight:300; color:rgba(255,255,255,.82); font-size:clamp(15px,1.6vw,18px); }

/* =========================================================
   案例
   ========================================================= */
.cases{ background:#fff; }
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.case{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; transition:.45s var(--ease); }
.case:hover{ transform:translateY(-5px); box-shadow:0 28px 54px -26px rgba(10,26,58,.3); }
.case__img{ position:relative; aspect-ratio:16/10; background:linear-gradient(150deg,var(--gw-blue) 0%, var(--gw-blue-deep) 100%); overflow:hidden; }
.case__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.case:hover .case__img img{ transform:scale(1.05); }
.case__body{ padding:24px 26px 30px; }
.case__tag{ display:inline-block; font-size:12px; color:var(--gw-blue); background:var(--gw-mist); padding:4px 12px; border-radius:999px; margin-bottom:14px; }
.case__body h3{ font-size:19px; font-weight:700; line-height:1.4; margin-bottom:10px; }
.case__body p{ font-size:14px; font-weight:300; color:var(--text-soft); }

/* =========================================================
   信任墙
   ========================================================= */
.trust{ background:var(--gw-mist); }
.trust__head{ max-width:760px; margin-bottom:46px; }
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:54px; }
.cert{ position:relative; aspect-ratio:4/3; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:.4s var(--ease); }
.cert:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -22px rgba(10,26,58,.25); }
.cert span{ position:relative; z-index:2; font-size:14px; color:var(--text-mute); letter-spacing:.05em; }
/* 资质墙：真实证书扫描件，统一高度、保留各自比例、居中排列 */
.trust__wall{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-bottom:54px; }
.cert-tile{ display:block; height:240px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.cert-tile img{ height:100%; width:auto; display:block; }
.cert-tile:hover{ transform:translateY(-5px); box-shadow:0 24px 46px -24px rgba(10,26,58,.3); border-color:var(--hair-blue); }
@media (max-width:560px){ .cert-tile{ height:170px; } }
.trust__partners-label{ font-size:14px; color:var(--text-mute); margin-bottom:18px; letter-spacing:.04em; }
.partners{ display:flex; flex-wrap:wrap; gap:14px; }
.partners span{ flex:1 1 150px; min-width:130px; height:74px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--text-mute); font-size:13px; letter-spacing:.1em; }

/* =========================================================
   新闻
   ========================================================= */
.news{ background:#fff; }
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.newsi{ display:block; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--gw-mist-2); transition:.4s var(--ease); }
.newsi:hover{ transform:translateY(-4px); background:#fff; box-shadow:0 24px 46px -24px rgba(10,26,58,.26); }
.newsi__thumb{ display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(150deg,var(--gw-blue) 0%, var(--gw-blue-deep) 100%); }
.newsi__thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.newsi:hover .newsi__thumb img{ transform:scale(1.05); }
.newsi__body{ display:block; padding:24px 28px 30px; }
.newsi__date{ font-family:var(--font-en); font-size:13px; color:var(--gw-blue); letter-spacing:.04em; }
.newsi h3{ font-size:19px; font-weight:700; line-height:1.45; margin:14px 0 12px; }
.newsi p{ font-size:14px; font-weight:300; color:var(--text-soft); }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--gw-blue) 0%, var(--gw-blue-deep) 60%, var(--gw-navy) 100%); padding:clamp(64px,8vw,108px) 0; text-align:center; }
.cta-band__pattern[data-pattern]{ position:absolute; inset:0; opacity:.16; pointer-events:none; }
.cta-band__inner{ position:relative; z-index:2; }
.cta-band h2{ font-size:clamp(26px,3.6vw,46px); font-weight:900; color:#fff; line-height:1.2; }
.cta-band p{ margin:18px auto 34px; max-width:540px; font-weight:300; color:rgba(255,255,255,.82); }
.cta-band__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-band .btn--ghost{ font-family:var(--font-en); letter-spacing:.04em; }

/* =========================================================
   页脚
   ========================================================= */
.foot{ position:relative; background:var(--gw-navy); color:rgba(255,255,255,.7); padding:74px 0 0; overflow:hidden; }
/* 页脚底纹：同 VI 母题瓦片；属性限定升特异性（L22：防后方 [data-pattern]{position:relative} 基础规则压制） */
.foot__pattern[data-pattern]{ position:absolute; inset:0; opacity:.12; pointer-events:none; }
.foot__grid,.foot__bar{ position:relative; }  /* 内容抬到纹路之上 */
.foot__grid{ display:grid; grid-template-columns:1.3fr 0.9fr 1.6fr; gap:18px 44px; padding-bottom:54px; align-items:start; }
/* 导航：两列 × 每列 3 个（按列填充）—— 列1 产品与技术/解决方案/特色产品，列2 关于广为/新闻中心/联系我们 */
.foot__nav-links{ display:grid; grid-template-columns:repeat(2,max-content); grid-template-rows:repeat(3,auto); grid-auto-flow:column; gap:14px 30px; }
.foot__nav-links a{ margin-bottom:0; white-space:nowrap; }
/* 联系：两列 × 每列 3 项（办公地点，按列填充）；1fr 等分列填满整块、铺到右缘，长地址自动换行不溢出 */
.foot__contact{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto); grid-auto-flow:column; gap:14px 28px; }
.foot__contact p{ margin-bottom:0; }
/* 导航链接与办公地点统一字号/行高/行距 → 两块的三行严格对齐 */
.foot__nav-links a,.foot__contact p{ font-size:14px; line-height:1.5; }
.foot__logo{ height:36px; width:auto; filter:brightness(0) invert(1); margin-bottom:22px; }
.foot__spirit{ font-size:15px; color:rgba(255,255,255,.9); letter-spacing:.06em; }
.foot__en{ font-family:var(--font-en); font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.4); margin-top:10px; }
.foot__col h4{ font-size:14px; font-weight:600; color:#fff; margin-bottom:18px; letter-spacing:.04em; }
.foot__col a{ display:block; font-size:14px; font-weight:300; color:rgba(255,255,255,.62); margin-bottom:11px; transition:.3s; }
.foot__col a:hover{ color:#fff; padding-left:4px; }
.foot__col p{ font-size:13.5px; font-weight:300; color:rgba(255,255,255,.62); margin-bottom:9px; }
.foot__qr{ display:flex; justify-content:flex-end; }
.qr{ width:118px; height:118px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.qr span{ font-size:12px; text-align:center; color:rgba(255,255,255,.65); line-height:1.5; position:relative; z-index:2; }
.foot__bar{ border-top:1px solid rgba(255,255,255,.1); padding:24px 0; }
.foot__bar .wrap,.foot__bar{ }
.foot__bar{ display:flex; }
.foot__bar p{ font-size:12.5px; color:rgba(255,255,255,.6); }
.foot__bar{ max-width:var(--maxw); margin:0 auto; padding:24px 28px; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.foot__beian{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.foot__beian a{ color:rgba(255,255,255,.55); transition:.3s; }
.foot__beian a:hover{ color:#fff; }
.foot__gongan{ display:inline-flex; align-items:center; gap:6px; }
.foot__gongan i{ width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.3); display:inline-block; }

/* =========================================================
   全站右侧快捷联系浮动按钮（电话 / 邮件）
   ========================================================= */
.fab{ position:fixed; right:18px; bottom:24px; z-index:80; display:flex; flex-direction:column; gap:12px; }
.fab__btn{ width:52px; height:52px; border-radius:15px; background:var(--gw-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(29,80,162,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition:background .3s var(--ease), transform .3s var(--ease); }
.fab__btn:hover{ background:var(--gw-blue-bright); transform:translateY(-3px); }
.fab__btn svg{ width:23px; height:23px; display:block; }
@media (max-width:760px){ .fab{ right:12px; gap:10px; } .fab__btn{ width:46px; height:46px; } .fab__btn svg{ width:21px; height:21px; } }

/* =========================================================
   移动端菜单 + 响应式
   ========================================================= */
@media (max-width:980px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento__card--lg{ grid-row:span 1; grid-column:span 2; }
  .bento__card--wide{ grid-column:span 2; }
  .sol-grid{ grid-template-columns:repeat(2,1fr); }
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:30px 16px; }
  .stat:nth-child(odd){ border-left:none; }
  .case-grid,.news-grid{ grid-template-columns:1fr; }
  .trust__grid{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  /* 窄屏：办公地点改单列逐行，避免两列地址过窄折成多行/拥挤 */
  .foot__contact{ grid-template-columns:1fr; grid-auto-flow:row; }
  .foot__qr{ justify-content:flex-start; }
}
@media (max-width:760px){
  .nav__menu{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:340px; height:100vh;
    flex-direction:column; gap:8px; padding:100px 32px; margin:0;
    background:var(--gw-navy); transform:translateX(100%); transition:transform .45s var(--ease), visibility .45s;
    visibility:hidden; /* 关闭态移出 Tab 序，避免键盘焦点泄漏到屏外 */
  }
  .nav__menu.open{ transform:none; visibility:visible; box-shadow:-30px 0 60px -20px rgba(0,0,0,.5); }
  .nav__menu a{ color:#fff !important; font-size:18px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav__menu a::after{ display:none; }
  .nav__burger{ display:block; z-index:950; }
  .nav.scrolled .nav__inner{ width:calc(100% - 20px); padding:10px 18px; }
  .nav .btn--sm{ display:none; }
  .hero__content{ bottom:24%; }
  .hero__marquee{ display:none; }
  /* 移动端保留「向下滑动」提示：缩小贴底+避让安全区（marquee 已隐藏，底部空间充足；
     随下潜淡出由 main.js 统一驱动，与桌面一致） */
  .hero__scroll{ bottom:calc(28px + env(safe-area-inset-bottom)); gap:9px; font-size:11px; }
  .hero__scroll-line{ height:34px; }
  .bento,.sol-grid,.trust__grid{ grid-template-columns:1fr; }
  /* 单列下必须重置 --lg/--wide 的 span，否则 span2 制造幻影第二列，把 02/03 拉伸到上千 px */
  .bento__card--lg,.bento__card--wide{ grid-column:auto; grid-row:auto; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .wrap{ padding:0 20px; }
  .foot__grid{ grid-template-columns:1fr; gap:30px; }
  .foot__bar{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   震撼层 · 钉住式滚动叙事 / 巨型动态排版 / 氛围与交互
   ========================================================= */

/* —— 顶部滚动进度 + 自定义光标 + 胶片颗粒 —— */
.scrollbar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; background:rgba(255,255,255,.05); }
.scrollbar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gw-blue-bright),var(--gw-blue-soft)); box-shadow:0 0 14px var(--gw-blue-bright); transition:width .1s linear; }
.cursor{ position:fixed; top:0; left:0; width:26px; height:26px; border:1.5px solid rgba(255,255,255,.7); border-radius:50%; pointer-events:none; z-index:10001; transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease), background .25s, border-color .25s; mix-blend-mode:difference; }
.cursor.is-hover{ width:56px; height:56px; background:rgba(255,255,255,.16); border-color:transparent; }
.grain{ position:fixed; inset:0; z-index:9996; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>"); background-size:180px; }
@media (hover:none){ .cursor{ display:none; } }

/* —— 钉住式首屏叙事场景 —— */
.hero-scene{ position:relative; height:260vh; background:var(--gw-navy); }
.hero{ position:sticky; top:0; height:100svh; min-height:600px; }
.hero__device{ transition:opacity .5s, transform .5s; }

.hero__beats{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.beat{
  position:absolute; left:0; right:0; bottom:20%;
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  opacity:0; transform:translateY(40px) scale(.98); will-change:opacity,transform;
}
.beat.is-on{ pointer-events:auto; }
.beat__no{ font-family:var(--font-en); font-weight:700; letter-spacing:.34em; font-size:13px; color:var(--gw-blue-soft); margin-bottom:20px; }
.beat__title{ font-size:clamp(58px,12vw,164px); font-weight:900; color:#fff; line-height:.92; letter-spacing:.01em; text-shadow:0 16px 70px rgba(5,13,32,.65); }
.beat__sub{ margin-top:24px; max-width:540px; font-weight:300; font-size:clamp(15px,1.8vw,21px); color:rgba(255,255,255,.88); }

/* 首屏标题：遮罩式逐行揭起（更有冲击力） */
/* 阴影：描边贴字式（0模糊紧边给亮背景描清边缘 + 极小落影），移动端亮视频帧上也不外扩成光晕 */
.hero__title{ font-size:clamp(50px,9.5vw,132px); font-weight:900; line-height:.92; letter-spacing:.01em; color:#fff; animation:none; opacity:1; text-shadow:0 0 2px rgba(5,13,32,.5), 0 1px 4px rgba(5,13,32,.45), 0 3px 12px rgba(5,13,32,.22); }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero__title .line > span{ display:block; transform:translateY(115%); animation:lineUp 1s .35s var(--ease-out) forwards; }
.hero__title .line:nth-child(2) > span{ animation-delay:.48s; }
@keyframes lineUp{ to{ transform:none; } }

/* 潜入深度指示（右侧细条） */
.hero__progress{ position:absolute; right:34px; top:50%; transform:translateY(-50%); width:2px; height:170px; background:rgba(255,255,255,.16); border-radius:2px; overflow:hidden; z-index:6; }
.hero__progress i{ position:absolute; top:0; left:0; width:100%; height:0; background:linear-gradient(var(--gw-blue-soft),#fff); box-shadow:0 0 12px var(--gw-blue-soft); }

/* —— 巨型动态排版带 —— */
.kinetic{ background:var(--gw-navy); padding:clamp(44px,7vw,96px) 0; overflow:hidden; position:relative; }
.kinetic::before,.kinetic::after{ content:""; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none; }
.kinetic::before{ left:0; background:linear-gradient(90deg,var(--gw-navy),transparent); }
.kinetic::after{ right:0; background:linear-gradient(270deg,var(--gw-navy),transparent); }
.kinetic__row{ display:flex; gap:.45em; width:max-content; white-space:nowrap; font-family:var(--font-cn); font-weight:900; line-height:1; }
.kinetic__row span{ padding-right:.45em; color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.30); }
.kinetic__row span.o{ color:var(--gw-blue-bright); -webkit-text-stroke:0; }
.kinetic__row--a{ font-size:clamp(46px,10vw,138px); animation:ktrack 42s linear infinite; }
.kinetic__row--b{ font-size:clamp(18px,3vw,40px); margin-top:.25em; opacity:.6; animation:ktrack 32s linear infinite reverse; }
.kinetic__row--b span{ -webkit-text-stroke-width:1px; }
@keyframes ktrack{ to{ transform:translateX(-50%); } }

/* —— 磁吸按钮（JS 驱动位移，CSS 给过渡与去描边光标） —— */
.magnetic{ will-change:transform; }
.no-cursor, .no-cursor *{ cursor:none; }

/* =========================================================
   品牌底纹 · VI《广为海洋》A1.8 辅助图形（真实瓦片无缝平铺）
   深底用白线 motif-white.png / 浅底用蓝线 motif-blue.png
   ========================================================= */
[data-pattern], [data-motif]{ position:relative; }
[data-pattern]::before, [data-motif]::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url(../img/motif-white.png);
  background-repeat:repeat; background-size:170px 118px;
}
/* 浅底（白色资质卡）改用品牌蓝线 */
.cert[data-motif]::before{ background-image:url(../img/motif-blue.png); }
/* 小尺寸宿主：单独控制底纹透明度与瓦片尺寸，避免满绘制过抢、容器装不下整瓦片导致碎片硬切 */
.case__img[data-motif]::before{ opacity:.14; }
.cert[data-motif]::before{ opacity:.10; }          /* 蓝线在纯白卡上视觉权重高，压到最淡 */
.qr[data-motif]::before{ opacity:.12; background-size:60px 42px; }   /* 118px 容器铺成细纹理而非弧线碎片 */
.bento__motif[data-motif]::before{ background-size:120px 83px; }     /* 配合宿主 opacity:.32，作深卡水印纹理 */

/* =========================================================
   无障碍：可见焦点 / 跳转链接 / 焦点不被遮挡
   ========================================================= */
.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--gw-blue); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
  font-size:14px; font-weight:500;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--gw-blue-bright); outline-offset:3px; border-radius:4px; }
/* 深色区域用浅色焦点环，保证可见 */
.hero :focus-visible,.stats :focus-visible,.mission :focus-visible,
.cta-band :focus-visible,.foot :focus-visible,.nav :focus-visible{ outline-color:#fff; }
/* 键盘聚焦解决方案/新闻卡片时复用 hover 反馈 */
.sol:focus-visible{ transform:translateY(-5px); box-shadow:0 24px 44px -22px rgba(10,26,58,.28); }
.sol:focus-visible::before{ transform:scaleX(1); }
.sol:focus-visible .sol__arr{ opacity:1; transform:none; }
.newsi:focus-visible,.case:focus-visible,.cert:focus-visible{ transform:translateY(-4px); }
/* 固定头部下，原生聚焦/跳转不被遮挡 */
section[id],#top{ scroll-margin-top:84px; }

/* —— 无障碍：减少动态 —— */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__canvas,.mission__canvas{ display:none; }
  .hero__fallback div{ display:block; }
  /* 降级：深海层关动画与视频，仅保留静态占位且不抢戏（reduce 下首屏走静态流式） */
  .deepsea{ display:none; }
  .deepsea__rays{ animation:none; }
  .deepsea__video{ display:none; }
  .hero-idle{ display:none; }   /* reduce：关闭首屏海面涌动循环 */
  .marquee__track,.hero__scroll-line::after,.loader__mark .draw,.loader__img,
  .loader__loading,.loader__dots b,.hero__eyebrow,
  .hero__title,.hero__title .line>span,.hero__en,.hero__desc,.hero__cta,.hero__scroll,
  .kinetic__row{ animation:none !important; opacity:1 !important; transform:none !important; }
  .cursor{ display:none; }
  .hero-scene{ height:auto !important; }
  /* 降级：首屏从「钉住 100svh 叠层切换」改为「自然高度流式」，让 4 段节拍依次可读、互不重叠 */
  .hero{ position:relative; height:auto; min-height:0; overflow:visible; padding:120px 0 72px; }
  .hero__beats{ position:static; }
  .beat{ position:static; left:auto; right:auto; bottom:auto; opacity:1 !important; transform:none !important; pointer-events:auto; margin:9vh auto 0; }
  .beat:first-of-type{ margin-top:0; }
  .stats__sheen{ animation:none; display:none; }
}
.hero__fallback div{ display:none; }