/* ==========================================================================
   home-blue.css — 全站启用：把 quoly-enterprise.css 的紫色系替换为统一蓝色系
   加载顺序在 quoly-enterprise.css 之后，同优先级即覆盖。
   ========================================================================== */

/* ---------- 变量层：深色 ---------- */
:root{
  --accent:#0858F8;
  --accent-strong:#3D7BFA;
  --accent-2:#4D8DFF;
  --accent-soft:rgba(8,88,248,.13);
  --indigo:#0858F8;
  --violet:#4D8DFF;
  --cyan:#3D7BFA;
  --indigo-soft:rgba(8,88,248,.13);
  --cyan-soft:rgba(59,130,246,.13);
  --glow-indigo:0 18px 52px rgba(8,88,248,.24);
  --glass-line-hi:rgba(96,165,250,.38);
}

/* ---------- 变量层：浅色 ---------- */
[data-theme="light"]{
  --accent:#1D4ED8;
  --accent-strong:#0858F8;
  --accent-2:#0284C7;
  --accent-soft:rgba(29,78,216,.09);
  --indigo:#1D4ED8;
  --violet:#0284C7;
  --cyan:#1D4ED8;
  --indigo-soft:rgba(29,78,216,.09);
  --cyan-soft:rgba(29,78,216,.09);
  --glass-line-hi:rgba(8,88,248,.30);
}

/* ---------- 背景光晕 ---------- */
body{
  background:
    radial-gradient(60rem 38rem at 50% -14rem,rgba(8,88,248,.12),transparent 72%),
    var(--bg-0);
}
.aurora{
  background:
    radial-gradient(48% 30% at 74% 0%,rgba(8,88,248,.17),transparent 74%),
    radial-gradient(34% 28% at 18% 12%,rgba(14,165,233,.09),transparent 76%);
}
[data-theme="light"] .aurora{
  background:
    radial-gradient(48% 30% at 74% 0%,rgba(8,88,248,.09),transparent 74%),
    radial-gradient(34% 28% at 18% 12%,rgba(14,165,233,.055),transparent 76%);
}

/* ---------- 链接 ---------- */
a:hover{color:#93C5FD}
[data-theme="light"] a:hover{color:var(--accent)}

/* ---------- 导航 logo / 主按钮 ---------- */
.brand .mk{
  background:linear-gradient(135deg,#0858F8,#0EA5E9);
  box-shadow:0 8px 24px rgba(8,88,248,.28),inset 0 1px 0 rgba(255,255,255,.35);
}
.nav .links a.cta,
.btn-primary{
  background:linear-gradient(135deg,#0858F8,#3D7BFA);
  border-color:rgba(147,197,253,.65);
  box-shadow:0 10px 30px rgba(8,88,248,.30),inset 0 1px 0 rgba(255,255,255,.30);
}
.nav .links a.cta:hover,.btn-primary:hover{
  background:linear-gradient(135deg,#3D7BFA,#4D8DFF);
  box-shadow:0 14px 36px rgba(8,88,248,.36),inset 0 1px 0 rgba(255,255,255,.34);
}
[data-theme="light"] .brand .mk{background:linear-gradient(135deg,#1D4ED8,#0284C7);color:#FFFFFF}
[data-theme="light"] .nav .links a:not(.cta):hover,
[data-theme="light"] .nav .links a:not(.cta).on{background:rgba(29,78,216,.06)}
[data-theme="light"] .nav .cta,
[data-theme="light"] .btn-primary{background:linear-gradient(135deg,#0858F8,#2563EB);border-color:transparent;color:#FFFFFF}

/* ---------- 标签 / 眉题 ---------- */
.sec-head .tag,.eyebrow{
  color:#BFDBFE;
  background:rgba(8,88,248,.11);
  border:1px solid rgba(96,165,250,.22);
}
[data-theme="light"] .sec-head .tag,[data-theme="light"] .eyebrow{color:#1E40AF;background:rgba(29,78,216,.07);border-color:rgba(29,78,216,.16)}

/* ---------- 渐变文字 ---------- */
.grad,.hero h1 em,.sec-head h2 em,.page-head h1 em{
  background:linear-gradient(115deg,#0858F8 0%,#3D7BFA 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
[data-theme="light"] .grad,[data-theme="light"] .hero h1 em,
[data-theme="light"] .sec-head h2 em,[data-theme="light"] .page-head h1 em{
  background:linear-gradient(115deg,#0858F8,#2563EB) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* ---------- 卡片 / 列表 / 提示 ---------- */
.list li::before{box-shadow:0 0 0 3px rgba(8,88,248,.11)}
.note.blue{background:rgba(8,88,248,.07);border-color:rgba(96,165,250,.18)}
.btn-ghost:hover,.btn-outline:hover{border-color:rgba(96,165,250,.32)}
.evidence-chip.is-beta::before{background:#4D8DFF}
.form-intro{border-color:rgba(96,165,250,.18);background:rgba(8,88,248,.055)}
[data-theme="light"] .form-intro{border-color:rgba(29,78,216,.16);background:rgba(29,78,216,.045)}
[data-theme="light"] .sec.tint{background:linear-gradient(180deg,rgba(29,78,216,.025),rgba(15,23,42,.012))}

/* ---------- 首屏痛点轮播 ---------- */
/* 背景叠加一张真实系统界面（跨境选品决策工作台）：元素背景层放图，::before 用
   backdrop-filter 把图打毛玻璃模糊 + 压暗——只能看到「界面轮廓与色块」，看不到细碎文字，
   前景标题保持最高对比度。 */
.pain-hero{
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E"),
    linear-gradient(rgba(96,165,250,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,165,250,.045) 1px,transparent 1px),
    radial-gradient(56rem 38rem at 50% 12%,rgba(8,88,248,.26),transparent 70%),
    radial-gradient(30rem 20rem at 85% 80%,rgba(14,165,233,.10),transparent 70%),
    var(--bg-0);
  background-size:auto,56px 56px,56px 56px,auto,auto,auto;
}
[data-theme="light"] .pain-hero{
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E"),
    linear-gradient(rgba(29,78,216,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,78,216,.05) 1px,transparent 1px),
    radial-gradient(56rem 38rem at 50% 12%,rgba(8,88,248,.08),transparent 70%),
    radial-gradient(30rem 20rem at 85% 80%,rgba(14,165,233,.06),transparent 70%),
    linear-gradient(180deg,#F8FAFC,#FFFFFF);
  background-size:auto,56px 56px,56px 56px,auto,auto,auto;
}
.pain-hero__blob--one{background:rgba(8,88,248,.28)}
.pain-hero__blob--two{background:rgba(14,165,233,.20)}
.pain-hero::before{display:none}
[data-theme="light"] .pain-hero__blob--one{background:rgba(8,88,248,.10)}
.pain-identity span::before{box-shadow:0 0 0 4px rgba(8,88,248,.10)}
.pain-kicker{border-color:rgba(96,165,250,.22);background:rgba(8,88,248,.10);color:#BFDBFE}
[data-theme="light"] .pain-kicker{color:#1E40AF;border-color:rgba(29,78,216,.20);background:rgba(29,78,216,.07)}
.pain-slide h1 span,.pain-slide h2 span{background:linear-gradient(110deg,#0858F8,#3D7BFA);-webkit-background-clip:text;background-clip:text}
[data-theme="light"] .pain-slide h1 span,[data-theme="light"] .pain-slide h2 span{background:linear-gradient(115deg,#0858F8,#2563EB);-webkit-background-clip:text;background-clip:text}
.pain-proof span:first-child{border-color:rgba(96,165,250,.20);background:rgba(8,88,248,.08)}
[data-theme="light"] .pain-proof span:first-child{border-color:rgba(29,78,216,.18);background:rgba(29,78,216,.06)}
.pain-control:hover{border-color:rgba(96,165,250,.32)}
.pain-dot::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.05)),
    linear-gradient(90deg,rgba(8,88,248,.34),rgba(14,165,233,.42));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(8,88,248,.16),
    0 0 10px rgba(96,165,250,.12);
}
.pain-dot:hover{border-color:rgba(96,165,250,.42);box-shadow:inset 0 1px 0 rgba(96,165,250,.25),0 6px 18px rgba(0,0,0,.28)}
.pain-dot[aria-current="true"]{
  border-color:rgba(96,165,250,.48);
  background:rgba(8,88,248,.12);
  box-shadow:
    inset 0 1px 0 rgba(8,88,248,.22),
    0 6px 20px rgba(8,88,248,.25);
}
.pain-dot:focus-visible{outline:2px solid #3D7BFA;outline-offset:3px}
[data-theme="light"] .pain-dot:hover{border-color:rgba(29,78,216,.32);box-shadow:inset 0 1px 0 rgba(29,78,216,.15),0 5px 15px rgba(15,23,42,.12)}
[data-theme="light"] .pain-dot[aria-current="true"]{
  border-color:rgba(29,78,216,.42);
  background:rgba(29,78,216,.12);
  box-shadow:
    inset 0 1px 0 rgba(29,78,216,.28),
    0 5px 18px rgba(29,78,216,.20);
}
[data-theme="light"] .pain-dot::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.10)),
    linear-gradient(90deg,rgba(29,78,216,.26),rgba(2,132,199,.34));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(29,78,216,.12),
    0 0 8px rgba(29,78,216,.10);
}
[data-theme="light"] .pain-dot[aria-current="true"]::after{
  background:
    linear-gradient(90deg,rgba(29,78,216,.55),rgba(2,132,199,.62));
}

/* ---------- 技术栈滚动带 ---------- */
.kw-band__label i{box-shadow:0 0 0 4px rgba(8,88,248,.10)}
.kw-card:hover{border-color:rgba(8,88,248,.5);box-shadow:0 12px 26px rgba(8,88,248,.22)}
[data-theme="light"] .kw-card:hover{box-shadow:0 10px 24px rgba(8,88,248,.16)}

/* ---------- 案例 / 区块光晕 ---------- */
.scenario-index-hero{
  background:radial-gradient(52rem 34rem at 50% -10rem,rgba(8,88,248,.23),transparent 72%),linear-gradient(180deg,#0B0B12,var(--bg-0));
}
[data-theme="light"] .scenario-index-hero{background:radial-gradient(52rem 34rem at 50% -10rem,rgba(8,88,248,.12),transparent 72%),linear-gradient(180deg,#F8FAFC,#FFFFFF)}
.scenario-jump a:hover{border-color:rgba(96,165,250,.30);background:rgba(8,88,248,.08)}
.scenario-card:hover{border-color:rgba(96,165,250,.32)}

/* ---------- 联系区 ---------- */
.contact{
  background:
    radial-gradient(35rem 18rem at 78% 0%,rgba(8,88,248,.18),transparent 72%),
    var(--bg-1);
  border-color:rgba(96,165,250,.18);
}
.contact::before{background:linear-gradient(90deg,transparent,rgba(59,130,246,.72),rgba(14,165,233,.34),transparent)}
.contact-email{-webkit-text-fill-color:#93C5FD;color:#93C5FD}
[data-theme="light"] .contact{background:radial-gradient(35rem 18rem at 78% 0%,rgba(8,88,248,.10),transparent 72%),linear-gradient(145deg,#FFFFFF,#F8FAFC);border-color:rgba(29,78,216,.14)}

/* ---------- 按钮 hover / 卡片图标 ---------- */
.btn-primary:hover{box-shadow:0 14px 32px rgba(8,88,248,.34)}
[data-theme="light"] .card:not(.pain) .ico{color:#1E40AF}

/* ---------- 补充覆盖：卡片图标 / hover 光晕 / 玻璃徽标微染 ---------- */
:root{
  --micro-glass-bg:linear-gradient(152deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 46%,rgba(147,197,253,.13) 100%);
  --micro-glass-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 9px 15px -10px rgba(255,255,255,.50),
    inset 0 -7px 13px -8px rgba(8,88,248,.50),
    0 8px 20px rgba(0,0,0,.30);
}
[data-theme="light"]{
  --micro-glass-bg:linear-gradient(152deg,rgba(255,255,255,.66) 0%,rgba(219,234,254,.46) 44%,rgba(230,240,255,.56) 100%);
  --micro-glass-line:rgba(8,88,248,.26);
  --micro-glass-shadow:
    inset 0 0 0 1px rgba(255,255,255,.96),
    inset 0 1px 0 #FFFFFF,
    inset 0 -1px 0 rgba(255,255,255,.88),
    inset 0 9px 15px -10px rgba(255,255,255,.98),
    inset 0 -8px 14px -8px rgba(23,37,84,.28),
    0 7px 18px rgba(23,37,84,.14);
}
.card .ico,.step .no{color:#BFDBFE;background:rgba(8,88,248,.11);border-color:rgba(96,165,250,.22)}
[data-theme="light"] .step .no{color:#1E40AF}
.card:hover,.step:hover,.kv:hover{
  border-color:rgba(96,165,250,.48);
  box-shadow:
    0 24px 52px rgba(0,0,0,.38),
    0 0 0 1px rgba(96,165,250,.22),
    var(--glass-inset);
}
[data-theme="light"] .card:hover,[data-theme="light"] .step:hover,
[data-theme="light"] .kv:hover{
  border-color:rgba(29,78,216,.38);
  box-shadow:
    0 20px 44px rgba(15,23,42,.14),
    0 0 0 1px rgba(29,78,216,.18);
}
main .actions > .btn-primary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -10px 18px -12px rgba(8,30,89,.55),
    0 12px 30px rgba(8,88,248,.28);
}
main .actions > .btn-primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -10px 18px -12px rgba(8,30,89,.60),
    0 16px 38px rgba(8,88,248,.34);
}

/* ========================= 首屏自动化流程图 ========================= */
.flow-pipeline{
  padding:clamp(28px,4vh,48px) 28px;
  background:var(--bg-0);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.flow-pipeline__inner{
  max-width:1080px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  flex-wrap:nowrap;
}
.flow-node{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 18px;
  border:1px solid rgba(99,102,248,.18);
  border-radius:14px;
  background:rgba(99,102,248,.04);
  min-width:120px;
  transition:transform .3s ease;
}
.flow-node:hover{transform:translateY(-2px)}
.flow-node__icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(99,102,248,.10);
  color:var(--accent-strong);
}
.flow-node__label{
  font-size:12.5px;color:var(--tx-2);text-align:center;
  line-height:1.4;white-space:nowrap;
}
.flow-line{
  flex:0 0 48px;height:2px;position:relative;
  background:rgba(99,102,248,.15);
}
.flow-line::after{
  content:"";position:absolute;left:0;top:-3px;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent-strong);
  animation:flow-dot 2.4s linear infinite;
}
@keyframes flow-dot{
  0%{left:0;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{left:40px;opacity:0}
}
@media (max-width:900px){
  .flow-pipeline__inner{flex-wrap:wrap;gap:12px;justify-content:center}
  .flow-line{flex:0 0 24px}
  .flow-node{min-width:100px;padding:10px 14px}
  .flow-node__label{font-size:11.5px}
}
@media (max-width:480px){
  .flow-pipeline__inner{flex-direction:column;gap:8px}
  .flow-line{flex:0 0 20px;width:2px;height:20px}
  .flow-line::after{top:0;left:-3px;animation-name:flow-dot-v}
}
@keyframes flow-dot-v{
  0%{top:0;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{top:12px;opacity:0}
}