/* ===== 首页 hero（全幅场景）=====
   深色模式与浅色模式**结构一致**：右侧铺一张照片、向左羽化融入底色，
   左侧留给文案。区别只在照片与渐隐的颜色：
     · 深色 = 夜景照（--hero-bg-night）+ 深色渐隐（本文件）
     · 浅色 = 白天实景（--hero-bg-light）+ 白色渐隐（css/light.css 覆盖）
   尺寸：照片层占 83%（原来 64%，按要求整体放大到 130%），
   因为 cover 会随层宽等比放大，所以"图片本身 + 它的羽化带"一起变大；
   前景那层渐隐的横向停靠点也按同一比例放大（0/8/18/30/42/56/70/84 → ×1.3，
   最后一个点并到 100%，让渐变正好在右边缘收干净）。
   纵向：照片层一直是 top:0/bottom:0 铺满整块舞台，"看起来太短"是底部那层
   底色雾（白雾 / 夜色雾）把照片下沿糊掉了 —— 做法是把舞台的绘制区往下延长
   150px（padding-bottom 抵消等值负 margin，布局不动），再把雾的停靠点写成 px，
   让"雾的上边界"正好落在下面五卡片的上沿线（= 数据条下方 32px 处）。
   这样照片可见下沿一直延到卡片上沿，渐变本身仍在（只是移到卡片那一段）。
   注意 ::after 里的 background 不写颜色字面量：那张图背后的底色由
   .hero-stage 的 background-color 提供，这样浅色层不会生成一条用错图的重复规则。 */
.hero-stage{
  position:relative; overflow:hidden;
  background-color:#04101f; background-image:none;
  /* 绘制区往下延长 150px：照片层与雾层都是 inset:0，跟着一起变长。
     再用等值负 margin 抵掉 —— 相邻兄弟外边距合并：32 + (-150) = -118px，
     所以下面五卡片的上沿仍在数据条下方 32px，一个像素都不动。
     正因为绘制区能伸到卡片底下，"雾的上边界"才可能落到卡片上沿线：
     雾的 0 点在 118px 处 = 150px(延长) − 32px(卡片上间距)，见下面 ::before。 */
  padding-bottom:150px; margin-bottom:-150px;
}
/* 照片层：贴右边缘铺满；mask 让照片自身像素由透明渐变到实心（"化"进底色） */
.hero-stage::after{
  content:""; position:absolute; z-index:0; top:0; right:0; bottom:0; width:83%;
  background:var(--hero-bg-night) right center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 12%,rgba(0,0,0,.6) 28%,rgba(0,0,0,.85) 45%,#000 62%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 12%,rgba(0,0,0,.6) 28%,rgba(0,0,0,.85) 45%,#000 62%);
}
/* 深色渐隐层：左侧不透明（保证文字可读），向右逐段放开；上下再淡回页面底色。
   纵向两段写成 px 而不是 %：% 是相对被延长后的层高，卡片上沿却是绝对位置，
   只有 px 才能保证"雾的上边界"永远压在卡片上沿（与层高/窗口尺寸无关）。 */
.hero-stage::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg,#04101f 0%,rgba(4,16,31,.96) 10%,rgba(4,16,31,.8) 23%,
      rgba(4,16,31,.55) 39%,rgba(4,16,31,.3) 55%,rgba(4,16,31,.12) 73%,
      rgba(4,16,31,.03) 91%,rgba(4,16,31,0) 100%),
    linear-gradient(180deg,rgba(4,16,31,.85) 0px,rgba(4,16,31,.32) 45px,rgba(4,16,31,0) 90px),
    linear-gradient(0deg,#050d1f 0px,rgba(5,13,31,.6) 31px,rgba(5,13,31,.22) 68px,rgba(5,13,31,0) 118px),
    radial-gradient(1050px 600px at 66% 24%, rgba(36,92,205,.34), transparent 64%);
}
.hero{
  position:relative; z-index:2; max-width:1240px; margin:0 auto;
  /* 下内边距归零：数据条在文案列里，底部不需要留白（同时让下方卡片上提） */
  padding:70px 40px 0; display:grid; grid-template-columns:1.04fr 1fr; gap:26px;
  /* 关键：让"行高由文案列决定"，而不是由右侧场景的固定高度决定。
     原来 .scene 写死 540px，文案列只有 ~330px，那 210px 差额就全落在
     小板块下方（上 22px / 下 125px），怎么调都对称不了。 */
  align-items:stretch;
}
/* 文案列限宽 = 标题宽度：下方四个小板块与标题共用这个宽度，
   所以"小板块不超过标题宽度"是结构保证的，不靠手调像素。
   深浅两套主题共用（用户要求深色首页布局与浅色一致）。 */
.hero-copy{
  max-width:430px;
  display:flex; flex-direction:column; justify-content:flex-end;
  /* padding-top 是"给 AI 球留高度"的唯一旋钮：它同时决定行高（球的缩放基准）
     和标题的纵向位置。111px 时标题块中心与球心大致对齐（与调整前观感接近）。
     因为文案内容底部对齐，小板块下方间距就只由 .modules 的上边距决定 ——
     于是"上 = 下"是结构保证的，不依赖任何写死的像素估算。 */
  padding-top:111px;
}
/* 列向 flex 的默认 align-items:stretch 会把按钮也拉满 430px。
   按钮要保持原长度（内容宽度），所以单独让它靠左、不拉伸。 */
.hero-copy .btn-primary{align-self:flex-start}
.hero h1{font-size:49px; line-height:1.16; letter-spacing:3px; font-weight:800; text-shadow:0 4px 28px rgba(6,24,64,.85);}
/* 大标题里的「智图万象」用字形图（透明 PNG，深浅共用）。
   2026-09-22 换用新封面字标（pic/封面文字.jpg 抠图，宽高比 3.056）：
   高 101px 不变（纵向位置不动），宽 309px = 101 × 3.056，等比不拉伸。 */
.hero h1 .title-logo{
  display:block; width:309px; height:101px;
  background:var(--logo) left center/auto 100% no-repeat;
  /* 2026-09-23 需求：以【左下角】为顶点，向右上放大到现在的 120%。
     用 transform 缩放（不是改 width/height），理由是：
       · 布局盒子仍是 309×101 —— 放大纯属视觉，不会把下面那行
         「高校图书馆AI服务智能体」往下推，按钮和四个小板块都不会移位；
       · 左下角固定不动：向上多出 101×20% ≈ 20px，正好吃进
         .hero-copy 的 padding-top:111px（那里本来就是留给 AI 球的空白，
         不会压到任何别的内容）；向右多出 309×1.2 ≈ 371px，
         仍在 430px 的文案列内，标题不会折行；
       · 背景图是 100% 高度铺满元素，所以字标跟着等比放大，不会被拉变形。
     注意：左边缘保持与「首页 / 副标题 / 开启智能服务按钮」同一条竖线
     （transform-origin 用 left 而不是 center 就是为了这个）。
     ⚠ 窄屏（≤1080px 那条 media query 把 .hero-copy 的 padding-top 改成 0）
       上面那 20px 就没有空白可吃了，字标上缘可能顶到顶栏或被
       .hero-stage 的 overflow:hidden 裁掉一点。桌面尺寸无此问题；
       真在手机上看到裁切，就在那条 media query 里把 scale 调小（如 1.1）。
     ★ 想恢复原大小：把下面这两行删掉即可。 */
  transform:scale(1.2); transform-origin:left bottom;
}
.grad-line{
  background:linear-gradient(95deg,#8fc6ff 0%,#4db2ff 30%,#cfe9ff 52%,#4db2ff 74%,#8fc6ff 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 6s linear infinite;
  filter:drop-shadow(0 0 16px rgba(77,178,255,.4));
}
@keyframes shimmer{to{background-position:260% 0;}}
.hero h1 small{display:block; font-size:25px; font-weight:700; letter-spacing:7px; margin-top:12px;}
.hero p.sub{margin-top:20px; color:#b7c9e8; font-size:15.5px; letter-spacing:1.5px;}
.btn-primary{
  margin-top:32px; display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(95deg,#2f7bff,#4db2ff); color:#fff; border:none;
  padding:13px 34px; font-size:15.5px; letter-spacing:2px; border-radius:999px; cursor:pointer;
  box-shadow:0 6px 26px rgba(47,123,255,.45), inset 0 1px 0 rgba(255,255,255,.25); transition:.25s;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 34px rgba(47,123,255,.6);}
.btn-primary span.arrow{transition:.25s;}
.btn-primary:hover span.arrow{transform:translateX(4px);}

/* 场景：品牌主视觉图（2026-09-22 起由封面设计稿的 AI 球+能力胶囊抠图整图替换原 SVG）。
   高度交给行高（.hero 的 align-items:stretch + height:auto），
   图片在列内垂直居中；列比图高时上下留白均匀，视觉重心与文案对齐。
   注意 .scene 自身没有在流内容时行高会塌成 0 —— 现在图片是流内容，
   单栏媒体查询里的固定高度仍保留作兜底。 */
.scene{position:relative; z-index:2; height:auto; min-height:0;
  display:flex; align-items:center; justify-content:center;}
.scene-img{display:block; width:100%; max-width:640px; height:auto; user-select:none;
  filter:drop-shadow(0 18px 44px rgba(4,16,40,.4));}
.scene svg{position:absolute; inset:0; width:100%; height:100%;}
.dashflow{animation:dashflow 3.2s linear infinite;}
@keyframes dashflow{to{stroke-dashoffset:-96;}}
.breathe{animation:breathe 5s ease-in-out infinite; transform-origin:center; transform-box:fill-box;}
@keyframes breathe{0%,100%{opacity:.7; transform:scale(1);}50%{opacity:1; transform:scale(1.05);}}
.netpulse{animation:netpulse 2.6s ease-in-out infinite;}
@keyframes netpulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.beam-pts{position:absolute; left:33%; top:15%; width:34%; height:22%; pointer-events:none;}
.beam-pts i{
  position:absolute; top:-5%; width:3px; height:3px; border-radius:50%;
  background:#cfe9ff; box-shadow:0 0 6px rgba(159,212,255,.9);
  opacity:0; animation:fall 2.6s linear infinite;
}
@keyframes fall{0%{top:-5%; opacity:0;}10%{opacity:.95;}82%{opacity:.6;}100%{top:105%; opacity:0;}}
.orb-tag{
  position:absolute; display:flex; flex-direction:column; gap:2px; z-index:3;
  font-size:13px; color:#cfe9ff; letter-spacing:1px;
  padding:7px 13px; border:1px solid rgba(110,175,255,.45); border-radius:10px;
  background:rgba(7,21,48,.66); backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(2,10,28,.5);
  animation:float 4.2s ease-in-out infinite;
}
.orb-tag small{font-size:10.5px; color:#5f7bab; letter-spacing:.4px;}
.orb-tag i{font-style:normal; margin-right:6px; color:#4db2ff;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.t1{top:24%; left:15%;} .t2{top:27%; right:3%; animation-delay:.6s;}
.t3{top:46%; left:0%;} .t4{top:52%; right:0%; animation-delay:1.1s;}
.t5{bottom:16%; left:12%; animation-delay:.3s;} .t6{bottom:12%; right:9%; animation-delay:1.5s;}

/* 浅色模式专属元素：默认全部隐藏，深色观感与之前完全一致。
   主光带（伸到「智图万象」标题上那条）、流动光环、球体高光、镜面反光。 */
.ribbon-title,.ribbon-tip,.flowring-wrap,.scene .spec{display:none}

/* 数据条（在左侧文案列下方；深浅主题共用同一套尺寸，只有配色不同）
   三行节奏：副标题 →(32px)→ 按钮 →(32px)→ 四个小板块。
   两处 margin-top 都取按钮那档的 32px，所以三行间距一致 ——
   数字写两遍，测试里有一条断言把两个值抽出来比相等，改一个漏一个会红。
   尺寸：比文案列（430px）宽出一档到 480px（"向右拉大"），
   格子跟着变高变宽，小字才有余量放大到 10px 而不折行。 */
.stats-panel{position:relative; z-index:2; width:480px; max-width:none; margin:32px 0 0; padding:0;}
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(110,175,255,.28); border-radius:16px; overflow:hidden;
  background:rgba(6,18,44,.6); backdrop-filter:blur(10px);
  box-shadow:0 14px 44px rgba(2,8,22,.55);
}
.stat{padding:16px 13px;}
.stat + .stat{border-left:1px solid rgba(110,175,255,.16);}
.stat b{font-size:26px; line-height:1.15; color:var(--cyan); letter-spacing:1px;}
.stat b em{font-style:normal; color:var(--cyan2); font-size:15px;}
.stat span{display:block; margin-top:2px; font-size:12.5px; letter-spacing:.4px;}
.stat small{
  display:block; margin-top:1px; font-size:10px; color:var(--dim); letter-spacing:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 五卡片（玻璃拟态 + 等距图标） */
.modules{
  /* 上边距 = 上面三行（副标题 / 按钮 / 四个小板块）的那档间距 32px，
     所以小板块与五卡片之间也是同一节奏；原来 78px 按要求整体上提。
     三行本身不动：改动只在 .modules 这一处 margin-top。
     z-index 是为了压住 .hero-stage::before（雾，z-index:1）：舞台绘制区
     现在往卡片底下伸了 150px，不抬层级的话雾会糊在卡片上半部。 */
  position:relative; z-index:3;
  max-width:1240px; margin:32px auto 0; padding:0 40px 30px;
  /* 首页一共 5 张卡片：原来写 6 列，右侧会空出一格（视觉缺陷，已修） */
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.mod-card{
  border:1px solid rgba(110,175,255,.2); border-radius:16px; padding:20px 16px 18px;
  background:linear-gradient(180deg, rgba(19,44,92,.52), rgba(9,24,56,.58));
  backdrop-filter:blur(8px); cursor:pointer; transition:.28s;
  position:relative; overflow:hidden;
}
.mod-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(240px 130px at 50% 0%, rgba(77,178,255,.16), transparent 70%);
  opacity:0; transition:.28s;
}
.mod-card::after{
  content:""; position:absolute; top:0; left:-90%; width:55%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(159,212,255,.16), transparent);
  transform:skewX(-18deg); transition:left .7s ease;
}
.mod-card:hover{transform:translateY(-6px); border-color:rgba(110,175,255,.55); box-shadow:0 14px 34px rgba(20,60,140,.4);}
.mod-card:hover::before{opacity:1;}
.mod-card:hover::after{left:140%;}
.mod-card h3{font-size:15px; line-height:1.45; letter-spacing:.5px; min-height:44px; position:relative; z-index:1;}
.mod-card .tags{margin-top:8px; font-size:12px; color:var(--muted); letter-spacing:1px; position:relative; z-index:1;}
.mod-card .ic{margin:10px auto 2px; width:116px; height:93px; display:block; position:relative; z-index:1;}
.mod-card .fl{animation:icfl 3.8s ease-in-out infinite;}
@keyframes icfl{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.mod-card .go{
  position:absolute; right:12px; bottom:10px; width:24px; height:24px; border-radius:50%; z-index:2;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:12px; transition:.28s;
}
.mod-card:hover .go{color:#fff; background:var(--blue); border-color:var(--blue);}

.foot-note{
  text-align:center; color:var(--dim); font-size:13px; letter-spacing:2px;
  padding:26px 20px 40px;
}

/* 窄屏：单栏时文案列不再限宽；场景必须给回固定高度
   （.scene 自身没有在流内容，靠 stretch 撑高，单栏下会塌成 0）
   数据条要放开那个 480px 固定宽，否则窄屏会横向溢出。 */
@media (max-width:1080px){
  .hero{align-items:start}
  .hero-copy{max-width:100%; padding-top:0}
  .stats-panel{margin:32px 0; width:auto; max-width:100%}
  .scene{height:420px}
}

/* ===== 首页整张设计稿（2026-09-22，2026-09-23 改为铺满首屏）=====
   用户提供的完整首页设计图直接作为首屏：标题字形、副标题、标语、五图标行、
   图书馆场景与底部标语全部烙在图里（assets/home-poster.jpg，现为 16:9 3648×2272）。
   下方旧的 .hero-stage/.hero/.hero-copy/.scene/.stats 规则随之退役，暂留作参考
   （多套自测仍引用这些规则做回归锚点）。
   容器铺满首屏（58px 导航以下的全部高度），左右不留色带；
   容器比例与图不一致时 background-size:cover 居中裁掉极少边缘。
   图内文字与白框、DOM 卡片用的是同一套「图内百分比」，所以永远对齐。
   （旧规则 min(100%,(100vh-74px)*4/3)+aspect-ratio:4/3 把首页锁在 4:3，
     在 16:9 显示器上右侧空出一大条，已废弃。） */
.home-poster{
  position:relative; width:100%; margin:0;
  height:max(360px, calc(100vh - 58px));
  background:#eef1f6 url(../assets/home-poster.jpg) center/cover no-repeat;
}
/* 「开启智能服务」：按用户要求放在标语「让每一本书被发现，让每一次求知更高效」正下方，
   与标语左对齐（图内 x≈180px = 4.9%）。
   实测设计稿（3648×2272）左列的真实纵向位置：
     大标题 y 626..722 ｜ 标语 y 816..852（35.9%~37.5%）
     ｜ 留白 y 852..1130 ｜ 五图标圆 y≈1130..1260 ｜ 图标文字 y 1176..1406
   → 标语与图标之间有约 280px（12% 图高）整片留白，按钮按 38.6%~44.6% 摆正好居中其中。 */
.home-cta{
  position:absolute; left:4.9%; top:38.6%; right:auto; bottom:auto; margin:0; z-index:2;
  width:min(230px, 13.5vw); justify-content:center;
  font-size:clamp(12px, 0.95vw, 15px);
  padding:clamp(8px,0.7vw,11px) clamp(12px,1.1vw,18px);
}
/* 五张模块卡片：绝对定位对准图中白色占位框。
   新设计稿（3648×2272）用亮度跳变实测白框行几何：
     五张白框左缘 x ≈ 172 / 800 / 1440 / 2088 / 2744，右缘 x ≈ 732 / 1368 / 2020 / 2672 / 3320
     → 卡宽 ≈600px（16.4%）、卡间距 ≈69px（1.9%）、整行 172..3320px（左4.7% 宽86.3%）。
     纵向：上缘 ≈1625px（71.5%）/ 下缘 ≈2242px（98.7%）→ 高 27.2%。
   DOM 覆盖层四周各放宽约 0.3%，保证卡片完全盖住烙在图里的白框、不露白边
   （白框与背景都接近纯白，浏览器里只能靠覆盖层对齐；若换图后对不齐，
    只需微调下面这五个百分数）。
   首页海报是固定浅色设计稿：卡片不跟随主题，恒为白底蓝框深字
   （2026-09-22：原深色玻璃卡落在白色占位框上会发灰，且四周露白，均已修复）。 */
.home-modules{
  position:absolute; left:4.4%; width:86.9%; top:71.2%; height:27.8%;
  margin:0; padding:0; max-width:none;
  /* 2026-09-23：按用户要求整体缩到 75%，以「上边中心」为定点 ——
     只缩小卡片本身，上边位置（top:71.2%）不动，所以看起来是原地变小、
     并不往左上角缩。用 transform 缩放（不是改 width/height），
     这样卡片内部文字/图标一起等比变小，也不会触发重排。
     ★ 想恢复原大小：把 transform 那行删掉即可。 */
  /* 2026-09-23（第三轮）：整体上移 20px —— 用 translateY(-20px) 叠加在 scale 之前，
     不改变卡片大小，只把整行（连同间距、中间卡）一起向上平移 20px。 */
  transform:translateY(-20px) scale(.75); transform-origin:center top;
  /* 2026-09-23（第三轮）：① 以中间那张卡为中心，把卡间距拉大（第二轮的 2 倍基础上）
     ② 卡片内文字放大一倍并居中
     —— 卡宽固定 15.62%（= 未拉大间距时的原值，卡片大小分毫未变，不做任何 padding），
        只调间距 gap：4.4% → 4.84%（= 当前间距的 110%），卡片大小不变、
        以中间卡为基准向两侧对称扩开（中间卡位置不动，左右各自外扩）。
        （历史：间距 2.2% → 4.4% 为两倍；本轮按用户要求再放大到当前的 110%。） */
  gap:4.84%;
  /* 字号翻倍写在容器上，卡片里用 em 继承 → h3 与 tags 各自正好翻倍。
     30px / 24px 经 0.75 缩放后 ≈22.5px / 18px，也就是画面上的字号是原来的两倍。 */
  font-size:30px;
}
/* ★ 卡宽 = 未拉大间距时的原值 (86.9% - 4×2.2%) / 5 = 15.62%，卡片大小没有变 */
.home-modules .mod-card{min-width:0; width:15.62%}
.home-modules .mod-card h3,
.home-modules .mod-card .tags{text-align:center}
.home-modules .mod-card h3{font-size:1em; line-height:1.3; min-height:0}
.home-modules .mod-card .tags{font-size:.8em; margin-top:10px}
/* 图标不放大：给图标固定高度并让其居中，文字只占上方余量，绝不压到图标上 */
.home-modules .mod-card .ic{flex:0 0 auto; margin-top:8px}
.home-modules .mod-card{
  display:flex; flex-direction:column; justify-content:center; padding:12px 14px;
  background:linear-gradient(180deg,#ffffff,#f7faff);
  border:1px solid rgba(43,89,214,.16);
  box-shadow:0 10px 26px rgba(23,58,130,.10);
  backdrop-filter:none;
}
.home-modules .mod-card h3{color:#0e2a5e; min-height:0;}
.home-modules .mod-card .tags{color:#5a6f95;}
.home-modules .mod-card .go{border-color:rgba(43,89,214,.3); color:#5a6f95;}
.home-modules .mod-card:hover{border-color:rgba(47,123,255,.55); box-shadow:0 14px 30px rgba(23,58,130,.16);}
.home-modules .mod-card:hover .go{color:#fff; background:var(--blue); border-color:var(--blue);}
.home-modules .mod-card .ic{margin:4px auto 2px;}
/* 窄屏兜底：卡片改为两列流式，垫一层半透明白面板保证可读
   （窄屏已回到普通流式布局，75% 的缩放在这里没有意义，故取消） */
@media (max-width:760px){
  .home-modules{position:static; width:auto; height:auto; grid-template-columns:repeat(2,1fr);
    padding:14px; gap:10px; background:rgba(255,255,255,.94);
    transform:none; transform-origin:auto}
}

/* ---- 浅色唯一主题覆盖（41 条，由 css/light.css 合并而来）---- */
.hero-stage{background-color:rgba(255,255,255,.96)}
.hero-stage::before{background:
    linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 10%,rgba(255,255,255,.9) 23%,
      rgba(255,255,255,.9) 39%,rgba(255,255,255,.9) 55%,rgba(255,255,255,.9) 73%,
      rgba(255,255,255,.9) 91%,rgba(255,255,255,.9) 100%),
    linear-gradient(180deg,rgba(255,255,255,.9) 0px,rgba(255,255,255,.9) 45px,rgba(255,255,255,.9) 90px),
    linear-gradient(0deg,rgba(255,255,255,.96) 0px,rgba(255,255,255,.9) 31px,rgba(255,255,255,.9) 68px,rgba(255,255,255,.9) 118px),
    radial-gradient(1050px 600px at 66% 24%, rgba(47,123,255,0.2), transparent 64%)}
.hero h1{text-shadow:0 4px 28px rgba(23,58,130,.10)}
.grad-line{filter:drop-shadow(0 0 16px rgba(31,86,214,0.18))}
.hero p.sub{color:#54688f}
.btn-primary{background: linear-gradient(135deg,#2f7bff,#1a49c8);box-shadow:0 6px 26px rgba(31,86,214,0.2), inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{box-shadow:0 10px 34px rgba(31,86,214,0.22)}
.scene-img{filter:drop-shadow(0 18px 44px rgba(23,58,130,.10))}
.beam-pts i{box-shadow:0 0 6px rgba(31,86,214,0.22)}
.orb-tag{color:#2b4374;border:1px solid rgba(43,89,214,0.38);background:rgba(255,255,255,.9);box-shadow:0 6px 20px rgba(23,58,130,.10)}
.orb-tag i{color:#2f6fe0}
.stats{border:1px solid rgba(43,89,214,0.24);background:rgba(255,255,255,.9);box-shadow:0 14px 44px rgba(23,58,130,.10)}
.stat + .stat{border-left:1px solid rgba(43,89,214,0.14)}
.mod-card{border:1px solid rgba(43,89,214,0.17);background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.9))}
.mod-card:hover{border-color:rgba(43,89,214,0.47);box-shadow:0 14px 34px rgba(23,58,130,.10)}
.mod-card:hover .go{color:#0e2a5e}
.home-modules .mod-card{border:1px solid rgba(43,89,214,0.14)}
.home-modules .mod-card .go{border-color:rgba(43,89,214,0.26)}
.home-modules .mod-card:hover{border-color:rgba(43,89,214,0.47);box-shadow:0 14px 30px rgba(23,58,130,.10)}
.home-modules .mod-card:hover .go{color:#0e2a5e}
.hero-stage{background-color:#f6f8fd; background-image:none}
.hero-stage::after{content:""; position:absolute; z-index:0; top:0; right:0; bottom:0; width:83%;
  background:#dce6f7 var(--hero-bg-light) right center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 12%,rgba(0,0,0,.6) 28%,rgba(0,0,0,.85) 45%,#000 62%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 12%,rgba(0,0,0,.6) 28%,rgba(0,0,0,.85) 45%,#000 62%);}
.hero-stage::before{background:
    linear-gradient(90deg,#f6f8fd 0%,rgba(246,248,253,.96) 10%,rgba(246,248,253,.8) 23%,
      rgba(246,248,253,.55) 39%,rgba(246,248,253,.3) 55%,rgba(246,248,253,.12) 73%,
      rgba(246,248,253,.03) 91%,rgba(246,248,253,0) 100%),
    linear-gradient(180deg,rgba(246,248,253,.9) 0px,rgba(246,248,253,.35) 40px,rgba(246,248,253,0) 85px),
    linear-gradient(0deg,#f6f8fd 0px,rgba(246,248,253,.6) 31px,rgba(246,248,253,.22) 68px,rgba(246,248,253,0) 118px),
    radial-gradient(820px 460px at 76% 44%,rgba(255,255,255,.3),transparent 72%);}
.hero-copy{position:relative; z-index:3}
.hero h1{color:#0e2a5e; text-shadow:none}
.hero h1 small{background:none; animation:none; filter:none; color:#12306a; -webkit-text-fill-color:#12306a;}
.hero p.sub{display:flex; align-items:center; gap:10px; color:#54688f}
.btn-primary{background:linear-gradient(95deg,#2f7bff,#1f56d6);
  box-shadow:0 10px 26px rgba(31,86,214,.28), inset 0 1px 0 rgba(255,255,255,.4);}
.btn-primary span.arrow{color:#ffd9a8}
.scene svg{overflow:visible}
.scene .spec{display:block; fill:rgba(255,255,255,.34)}
.flowring-wrap{display:block}
.ribbon-title, .ribbon{display:inline}
.ribbon-title{stroke-dasharray:320 1380; animation:ribbonflow-lt 7.5s linear infinite;
  filter:drop-shadow(0 2px 10px rgba(65,180,255,.35));}
.ribbon-tip{display:block;
  filter:drop-shadow(0 0 10px rgba(255,168,90,.9));
  animation:tips-lt 4.4s ease-in-out infinite;}
.orb-tag{color:#12306a; font-weight:600; border:1px solid rgba(43,89,214,.14);
  background:rgba(255,255,255,.9); box-shadow:0 10px 26px rgba(23,58,130,.14);}
.orb-tag small{color:#8296b8; font-weight:400}
.orb-tag i{color:#ff8a2e}
.beam-pts i{background:#eaf5ff; box-shadow:0 0 7px rgba(122,196,255,.95)}
.scene svg{overflow:hidden}
.hero-stage::after{width:100%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.22) 30%,#000 58%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.22) 30%,#000 58%);}