/* 瓦盾CDN - 优化版 2026 | 配色方案：深青灰 + 金橙（呼应logo） */

:root{
  --bg:#f6f8fa;
  --bg-soft:#eef2f5;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --text:#2c3e50;
  --text-soft:#546e7a;
  --line:#dfe6ec;
  --line-strong:#cfd8e0;
  --primary:#495a6a;
  --primary-dark:#3d4f5c;
  --primary-2:#3d4f5c;
  --accent:#f5a623;
  --accent-dark:#e89b2f;
  --accent-soft:#fff8ed;
  --good:#00a870;
  --warn:#ef7f1a;
  --shadow-sm:0 4px 12px rgba(61,79,92,.08);
  --shadow-md:0 8px 24px rgba(61,79,92,.12);
  --shadow-lg:0 16px 40px rgba(61,79,92,.16);
  --radius:14px;
  --radius-lg:20px;
  --container:1200px;
  --ease:cubic-bezier(.22,.78,.22,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:"DIN Alternate","PingFang SC","Microsoft YaHei","Source Han Sans SC","Helvetica Neue",sans-serif;
  background:
    radial-gradient(840px 420px at 10% -8%, rgba(245,166,35,.09), transparent 66%),
    radial-gradient(780px 460px at 92% 0%, rgba(73,90,106,.08), transparent 68%),
    linear-gradient(180deg, #fafbfc 0%, var(--bg) 42%, #f4f6f8 100%);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
  width:min(var(--container), calc(100% - 44px));
  margin:0 auto;
}

.bg-orb,
.bg-grid{
  position:fixed;
  pointer-events:none;
  z-index:-2;
}

.bg-orb{
  width:420px;
  height:420px;
  border-radius:999px;
  filter:blur(70px);
  opacity:.36;
}
.bg-orb--a{
  left:-170px;
  top:40px;
  background:radial-gradient(circle at 35% 35%, rgba(245,166,35,.35), rgba(245,166,35,0) 64%);
}
.bg-orb--b{
  right:-170px;
  top:220px;
  background:radial-gradient(circle at 35% 35%, rgba(73,90,106,.32), rgba(73,90,106,0) 64%);
}
.bg-grid{
  inset:0;
  z-index:-3;
  background-image:
    linear-gradient(to right, rgba(73,90,106,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(73,90,106,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(100% 65% at 50% 22%, #000 40%, transparent 100%);
  opacity:.4;
}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(250,251,252,.92), rgba(250,251,252,.82));
  border-bottom:1px solid rgba(73,90,106,.1);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:13px 0;
}

.brand{display:flex;align-items:center;gap:10px}
.brand__logo{width:34px;height:34px}
.brand__name{font-weight:900;letter-spacing:.2px;font-size:18px}
.brand--footer .brand__logo{width:30px;height:30px}

.nav{display:flex;align-items:center;gap:6px}
.nav__link{
  color:var(--text-soft);
  font-size:14px;
  font-weight:700;
  padding:10px 12px;
  border-radius:12px;
  transition:all .2s var(--ease);
}
.nav__link:hover{
  color:var(--primary);
  background:var(--primary-soft);
}

.header__actions{display:flex;align-items:center;gap:10px}
.header__actions .btn{white-space:nowrap;flex-shrink:0}
@media (min-width:981px){
  .header__actions .btn{
    min-width:122px;
    padding:0 22px;
  }
  .header__actions .btn--primary{min-width:134px}
}

.iconbtn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .2s var(--ease);
}
.iconbtn:hover{
  transform:translateY(-1px);
  border-color:var(--primary);
  box-shadow:var(--shadow-sm);
}
.header__burger{display:none}
.header__burger span{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:#495a6a;
}
.header__burger span+span{margin-top:4px}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:42px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--text);
  font-weight:800;
  font-size:14px;
  transition:all .2s var(--ease);
  cursor:pointer;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.btn--primary{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow:0 12px 28px rgba(73,90,106,.24);
}
.btn--primary:hover{box-shadow:0 16px 34px rgba(73,90,106,.3)}
.btn--ghost{
  color:var(--primary);
  border-color:#cbd9e5;
  background:#f5f9ff;
}
.btn--ghost:hover{background:#edf4ff}
.btn--lg{height:48px;padding:0 20px;border-radius:14px;font-size:15px}

.btn--hero-outline{
  color:#495a6a;
  background:transparent;
  border:2px solid #c5d1dc;
}
.btn--hero-outline:hover{
  background:#eef5ff;
  border-color:#6b9bd8;
}
.btn--hero-tg{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg, #1f9ce0, #0a74bd);
  box-shadow:0 12px 28px rgba(10,116,189,.28);
}
.btn--hero-tg:hover{
  box-shadow:0 16px 32px rgba(10,116,189,.34);
}
.btn--hero-accent{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg, #19a96b, #26c883);
  box-shadow:0 12px 28px rgba(30,178,116,.26);
}
.btn--hero-accent:hover{
  box-shadow:0 16px 32px rgba(30,178,116,.34);
}
.btn--block{width:100%}
.btn.is-disabled,
.btn:disabled{opacity:.66;cursor:not-allowed;transform:none;box-shadow:none}

/* Mobile */
.mobile{display:none}
.mobile.is-open{display:block}
.mobile{
  position:fixed;
  inset:0;
  background:rgba(15,31,72,.22);
  backdrop-filter:blur(4px);
  z-index:60;
}
.mobile__panel{
  position:absolute;
  right:14px;
  top:70px;
  width:min(360px, calc(100% - 28px));
  border-radius:16px;
  border:1px solid #dfe6ec;
  background:#fff;
  box-shadow:var(--shadow-lg);
  padding:12px;
}
.mobile__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:4px;
}
.mobile__title{font-weight:900;color:#3d4f5c}
.x{position:relative;width:16px;height:16px}
.x::before,
.x::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:16px;
  height:2px;
  background:#495a6a;
  border-radius:2px;
}
.x::before{transform:rotate(45deg)}
.x::after{transform:rotate(-45deg)}
.mobile__link{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:#3d4f5c;
  font-weight:700;
}
.mobile__link:hover{background:#f3f7ff;color:var(--primary)}
.mobile__cta{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

/* Sections */
.section{padding:82px 0}
.section--alt{
  background:linear-gradient(180deg, rgba(73,90,106,.04), rgba(73,90,106,.015));
  border-top:1px solid rgba(73,90,106,.08);
  border-bottom:1px solid rgba(73,90,106,.08);
}
.section__head{
  max-width:760px;
  margin:0 auto 30px;
  text-align:center;
}
.section__title{
  margin:0;
  color:#2c3e50;
  font-size:36px;
  letter-spacing:.2px;
}
.section__desc{
  margin:12px 0 0;
  color:var(--text-soft);
  line-height:1.8;
  font-size:15px;
}

/* Hero */
.hero{padding:56px 0 24px}
.hero__copy{position:relative;z-index:1}
.hero__grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:30px;
  align-items:center;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 16px 6px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(20px);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  color:#3d4f5c;
  font-size:13px;
  font-weight:600;
}
.badge__dot{
  width:32px;
  height:32px;
  border-radius:999px;
  background:linear-gradient(135deg,#00a870,#00c984);
  box-shadow:0 2px 8px rgba(0,168,112,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:16px;
  font-weight:bold;
}
.badge__dot::after{
  content:"✓";
}

.hero__title{
  margin:14px 0 12px;
  color:#2c3e50;
  font-size:52px;
  line-height:1.07;
  letter-spacing:-.6px;
}
.hero__title--pitch{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:16.5em;
}
.hero__title-top{
  display:block;
  font-size:.58em;
  line-height:1.28;
  font-weight:800;
  letter-spacing:.2px;
  color:#495a6a;
}
.hero__quote{
  display:inline-block;
  padding:0 .24em;
  margin:0 .08em;
  border-radius:10px;
  color:#3d4f5c;
  background:linear-gradient(180deg, #eaf2ff, #dde9ff);
  border:1px solid #cbd9e5;
  box-shadow:0 6px 14px rgba(73,90,106,.13);
}
.hero__title-bottom{
  display:block;
  font-size:.74em;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.2px;
}
.hero__title strong{
  display:inline-block;
  color:transparent;
  background:linear-gradient(115deg, #f5a623 0%, #ffc658 38%, #e89b2f 68%, #f5a623 100%);
  background-size:220% 220%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:heroLatencyGradient 3.2s linear infinite;
}
.hero__subtitle{
  margin:0 0 18px;
  color:var(--text-soft);
  font-size:16px;
  line-height:1.8;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px}
.hero__cta--triple .btn{min-width:172px}

.stats{
  margin-top:24px;
  display:flex;
  gap:40px;
}
.stat{
  background:transparent;
  border:none;
  padding:0;
  text-align:left;
}
.stat__num{
  font-weight:800;
  font-size:40px;
  color:#2c3e50;
  line-height:1;
  margin-bottom:8px;
}
.stat__label{
  margin-top:0;
  color:#8fa3b3;
  font-size:14px;
  font-weight:500;
}

.logos{margin-top:14px}
.logos__hint{color:#6b7e8f;font-size:13px;font-weight:800}
.logos__items{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #dfe6ec;
  background:#fff;
  color:#495a6a;
  font-size:12px;
  font-weight:800;
}
.pill--soft{
  background:#f6f9ff;
  border-color:#dfe6ec;
  color:#546e7a;
}

.hero__art{
  position:relative;
  min-height:440px;
  border-radius:28px;
  border:1px solid #d5dfe8;
  overflow:hidden;
  background:
    radial-gradient(260px 180px at 14% 14%, rgba(73,90,106,.16), transparent 70%),
    radial-gradient(280px 200px at 86% 18%, rgba(61,79,92,.14), transparent 72%),
    linear-gradient(180deg, #fafdff, #eef5ff);
  box-shadow:0 28px 62px rgba(61,79,92,.18);
}
.hero__art::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:20px;
  border:1px solid rgba(73,90,106,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(240,247,255,.66));
}
.hero__art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.18) 18%, transparent 32%, transparent 58%, rgba(255,255,255,.12) 74%, transparent 86%);
  pointer-events:none;
}
.hero__img{
  position:absolute;
  left:50%;
  top:50%;
  width:min(560px, 90%);
  height:auto;
  transform:translate(-50%, -50%);
  object-fit:contain;
  opacity:.95;
  filter:drop-shadow(0 16px 30px rgba(61,79,92,.22)) saturate(1.08);
  z-index:1;
}
.hero__card{
  position:absolute;
  z-index:2;
  width:min(250px, 72%);
  border-radius:14px;
  border:1px solid #dfe6ec;
  background:rgba(255,255,255,.9);
  box-shadow:0 12px 34px rgba(61,79,92,.16);
  backdrop-filter:blur(6px);
  padding:10px 12px;
}
.hero__card--a{left:18px;top:18px}
.hero__card--b{right:18px;top:54%}
.hero__card--c{left:50%;bottom:16px;transform:translateX(-50%)}

.mini{display:flex;align-items:center;gap:10px}
.mini__icon{
  width:30px;
  height:30px;
  padding:4px;
  border-radius:8px;
  border:1px solid #dfe6ec;
  background:#f1f6ff;
}
.mini__title{font-size:13px;font-weight:900;color:#3d4f5c}
.mini__sub{margin-top:2px;color:#6b7e8f;font-size:12px}
.hero__quick{padding-top:18px}
.quick{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  padding:12px;
  border-radius:18px;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #ffffff, #f5f9ff);
  box-shadow:var(--shadow-sm);
}
.quick__item{
  border-radius:14px;
  border:1px solid #dfe6ec;
  background:#fff;
  padding:10px 12px;
}
.quick__k{font-weight:900;color:#3d4f5c}
.quick__v{margin-top:4px;color:#6b7e8f;font-size:13px}

/* Cards */
.cards{display:grid;gap:14px}
.cards--3{grid-template-columns:repeat(3, 1fr)}
.card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #fff, #f8fbff);
  box-shadow:var(--shadow-sm);
  padding:18px;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:#c5d1dc;
  box-shadow:var(--shadow-md);
}
.card::before{
  content:"";
  position:absolute;
  right:-120px;
  top:-100px;
  width:260px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(73,90,106,.13), rgba(73,90,106,0) 70%);
}
.card>*{position:relative}
.card__icon{width:42px;height:42px}
.card__title{margin:12px 0 8px;color:#3d4f5c;font-size:19px}
.card__text{margin:0 0 10px;color:#6b7e8f;font-size:14px;line-height:1.75}
.check{margin:0;padding-left:18px;color:#495a6a;font-size:13px;line-height:1.8}


.section__head--pain{
  max-width:860px;
  margin-bottom:24px;
}
.section__head--pain .section__desc{
  color:#546e7a;
}
.pain-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.pain-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow:var(--shadow-sm);
  padding:18px;
  transition:transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.pain-card::before{
  content:"";
  position:absolute;
  right:-90px;
  top:-120px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(73,90,106,.12), rgba(73,90,106,0) 72%);
}
.pain-card>*{position:relative}
.pain-card:hover{
  transform:translateY(-4px);
  border-color:#c5d1dc;
  box-shadow:var(--shadow-md);
}
.pain-icon{
  --pain-accent:#ef4444;
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  color:var(--pain-accent);
  background:color-mix(in srgb, var(--pain-accent) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--pain-accent) 40%, transparent);
}
.pain-icon svg{width:20px;height:20px}
.pain-card h3{
  margin:0 0 8px;
  color:#3d4f5c;
  font-size:18px;
  line-height:1.35;
}
.pain-card p{
  margin:0;
  color:#6b7e8f;
  font-size:14px;
  line-height:1.75;
}
/* Capability grid */
.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.grid__item{
  border-radius:16px;
  border:1px solid #dfe6ec;
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:16px;
}
.grid__item img{width:38px;height:38px}
.grid__item h3{margin:10px 0 7px;color:#3d4f5c;font-size:16px}
.grid__item p{margin:0;color:#6b7e8f;font-size:13px;line-height:1.75}


/* Advantage cards (reference 6666 style) */
.adv-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.adv-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #fbfdff, #f4f8ff);
  box-shadow:var(--shadow-sm);
  padding:20px 18px;
  transition:transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.adv-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #495a6a, #3d4f5c);
  opacity:0;
  transition:opacity .24s var(--ease);
}
.adv-card:hover{
  transform:translateY(-4px);
  border-color:#c5d1dc;
  box-shadow:var(--shadow-md);
}
.adv-card:hover::before{opacity:1}
.adv-icon{
  --adv-a:#495a6a;
  --adv-b:#3d4f5c;
  width:42px;
  height:42px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg, var(--adv-a), var(--adv-b));
  margin-bottom:12px;
}
.adv-icon svg{width:22px;height:22px}
.adv-card h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.35;
  color:#3d4f5c;
}
.adv-desc{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.75;
  color:#6b7e8f;
}
.adv-compare{
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(239,68,68,.2);
  background:rgba(239,68,68,.07);
  color:#d74a57;
  font-size:13px;
  line-height:1.6;
}
.adv-compare svg{
  width:14px;
  height:14px;
  flex-shrink:0;
  margin-top:2px;
}
/* Pricing */
.toggle{
  margin-top:16px;
  display:inline-flex;
  gap:6px;
  padding:6px;
  border-radius:999px;
  border:1px solid #dfe6ec;
  background:#f4f8ff;
}
.toggle__btn{
  appearance:none;
  border:none;
  min-width:98px;
  padding:10px 12px;
  border-radius:999px;
  color:#546e7a;
  font-size:13px;
  font-weight:900;
  background:transparent;
  transition:all .2s var(--ease);
  cursor:pointer;
}
.toggle__btn:hover{transform:translateY(-1px)}
.toggle__btn.is-active{
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
}

.pricing{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}

@media (max-width: 1280px) {
  .pricing{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (max-width: 980px) {
  .pricing{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pricing{
    grid-template-columns:1fr;
  }
}
.plan{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #fff, #f7faff);
  box-shadow:var(--shadow-sm);
  padding:18px;
  transition:all .24s var(--ease);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.plan__top{margin-bottom:10px}
.plan__name{margin:0;color:#3d4f5c;font-size:18px}
.plan__hint{margin:6px 0 0;color:#6b7e8f;font-size:13px}

.plan__price{display:flex;align-items:flex-end;gap:6px;margin:10px 0 12px}
.plan__currency{font-weight:900;color:#495a6a}
.plan__num{font-size:42px;line-height:1;font-weight:950;color:#e89b2f;letter-spacing:-.4px}
.plan__unit{padding-bottom:5px;color:#6b7e8f;font-weight:800}
.plan__list{margin:0 0 14px;padding-left:18px;color:#495a6a;font-size:13px;line-height:1.85}

.plan--hot{
  border-color:#c5d1dc;
  box-shadow:0 24px 50px rgba(73,90,106,.2);
  transform:translateY(-6px);
  background:linear-gradient(180deg, #f8fbff, #f0f6ff);
}
.ribbon{
  position:absolute;
  top:14px;
  right:14px;
  padding:6px 10px;
  border-radius:999px;
  background:#e9f3ff;
  border:1px solid #c5d1dc;
  color:#495a6a;
  font-size:12px;
  font-weight:900;
}

.note{
  margin-top:16px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  border-radius:16px;
  border:1px solid #dfe6ec;
  background:#fff;
  padding:14px;
}
.note__icon{
  width:26px;
  height:26px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#f3f8ff;
  border:1px solid #dfe6ec;
  color:#495a6a;
  font-weight:900;
}
.note__text{color:#6b7e8f;font-size:13px;line-height:1.75}

.pricing-compare{
  margin-top:18px;
  border-radius:18px;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #ffffff, #f6faff);
  box-shadow:var(--shadow-sm);
  padding:16px;
}
.pricing-compare__head{
  text-align:center;
}
.pricing-compare__head h3{
  margin:0;
  color:#3d4f5c;
  font-size:24px;
  line-height:1.3;
}
.pricing-compare__head p{
  margin:6px 0 0;
  color:#6b7e8f;
  font-size:14px;
}
.pricing-compare__table-wrap{
  margin-top:12px;
  border-radius:14px;
  border:1px solid #dfe6ec;
  background:#ffffff;
  overflow:auto;
}
.pricing-compare__table{
  width:100%;
  min-width:940px;
  border-collapse:separate;
  border-spacing:0;
}
.pricing-compare__table th,
.pricing-compare__table td{
  padding:12px 12px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid #e7efff;
}
.pricing-compare__table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f3f8ff;
  color:#495a6a;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}
.pricing-compare__table tbody td{
  color:#546e7a;
  font-size:13px;
}
.pricing-compare__table th:first-child,
.pricing-compare__table td:first-child{
  width:156px;
  color:#3d4f5c;
  font-weight:800;
  background:#f8fbff;
}
.pricing-compare__table th.is-highlight,
.pricing-compare__table td.is-highlight{
  background:linear-gradient(180deg, #eef5ff, #f8fbff);
}
.pricing-compare__table tbody tr:hover td{
  background:#fbfdff;
}
.pricing-compare__table tbody tr:hover td.is-highlight{
  background:linear-gradient(180deg, #e9f3ff, #f6faff);
}
.pricing-compare__table tbody tr:last-child td{
  border-bottom:none;
}
.cmp{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:800;
  line-height:1.35;
}
.cmp--good{
  color:#0c8b62;
  background:#ecfbf4;
  border-color:#b8e7d3;
}
.cmp--warn{
  color:#a96811;
  background:#fff8ea;
  border-color:#f1d6a5;
}
.cmp--bad{
  color:#c24758;
  background:#fff1f3;
  border-color:#f2bec7;
}

/* Usecases */
.usecases{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.uc{
  border-radius:16px;
  border:1px solid #dfe6ec;
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:16px;
}
.uc h3{margin:0 0 8px;color:#3d4f5c}
.uc p{margin:0 0 10px;color:#6b7e8f;line-height:1.75}
.uc__tags{display:flex;gap:8px;flex-wrap:wrap}


.scene-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.scene-card{
  border-radius:16px;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow:var(--shadow-sm);
  padding:14px 14px;
  display:grid;
  grid-template-columns:34px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  align-items:center;
  transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.scene-card:hover{
  transform:translateY(-3px);
  border-color:#c5d1dc;
  box-shadow:var(--shadow-md);
}
.scene-icon{
  --scene-bg:rgba(245,166,35,.14);
  --scene-color:#e89b2f;
  width:34px;
  height:34px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--scene-color);
  background:var(--scene-bg);
  grid-row:1;
  grid-column:1;
}
.scene-icon svg{width:18px;height:18px}
.scene-card h4{
  margin:0;
  grid-row:1;
  grid-column:2;
  font-size:14px;
  line-height:1.35;
  color:#3d4f5c;
}
.scene-card p{
  margin:4px 0 0;
  grid-row:2;
  grid-column:2;
  font-size:12.5px;
  line-height:1.6;
  color:#6b7e8f;
}

.defense-arch{
  margin-top:16px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #ffffff, #f4f8ff);
  box-shadow:var(--shadow-md);
  position:relative;
}
.defense-arch::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:54px;
  background:linear-gradient(180deg, rgba(73,90,106,.12), rgba(73,90,106,0));
  pointer-events:none;
}
.defense-arch__title{
  text-align:center;
  padding:14px 10px 0;
  font-size:13px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:#6b7e8f;
  font-weight:800;
}
.defense-arch svg{
  width:100%;
  height:auto;
  display:block;
  padding:10px 14px 16px;
  position:relative;
  z-index:1;
}
.defense-arch text{
  font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}
.arch-caption{fill:#6b7e8f;font-size:9px;font-weight:800;letter-spacing:.9px}
.arch-main{fill:#3d4f5c;font-size:14px;font-weight:900}
.arch-sub{fill:#546e7a;font-size:9px}
.arch-red{fill:#df5a5a;font-size:11px;font-weight:700}
.arch-green{fill:#0d986f;font-size:11px;font-weight:700}
.arch-cn-text{fill:#495a6a;font-size:9px;font-weight:700}
.arch-layer-title{fill:#3d4f5c;font-size:10px;font-weight:700}
.arch-red-box{fill:rgba(239,68,68,.07);stroke:rgba(239,68,68,.28);stroke-width:1}
.arch-green-soft{fill:rgba(0,168,112,.07);stroke:rgba(0,168,112,.26);stroke-width:1}
.arch-layer-red{fill:rgba(255,255,255,.78);stroke:rgba(239,68,68,.46);stroke-width:1.1;filter:drop-shadow(0 2px 5px rgba(61,79,92,.12))}
.arch-layer-orange{fill:rgba(255,255,255,.8);stroke:rgba(239,127,26,.44);stroke-width:1.1;filter:drop-shadow(0 2px 5px rgba(61,79,92,.12))}
.arch-layer-green{fill:rgba(255,255,255,.82);stroke:rgba(0,168,112,.42);stroke-width:1.1;filter:drop-shadow(0 2px 5px rgba(61,79,92,.12))}
.arch-cn{fill:rgba(255,255,255,.82);stroke:rgba(73,90,106,.42);stroke-width:1.1}
.arch-red-line{stroke:#ef6a6a;stroke-width:1.5;stroke-dasharray:4.5 3;opacity:.72}
.arch-green-line{stroke:#00a870;stroke-width:2}
.arch-stop{fill:#fff1f1;stroke:#ef6a6a;stroke-width:1}
.arch-stop-x{stroke:#ef6a6a;stroke-width:2;stroke-linecap:round}
/* Map */
.map{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #ffffff, #f4f9ff);
  box-shadow:var(--shadow-lg);
  padding:16px;
  min-height:500px;
}
.map__img{
  width:100%;
  height:auto;
  opacity:.95;
  display:block;
}
.map__legend{
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.legend{display:flex;align-items:center;gap:8px;color:#4f6799;font-size:13px;font-weight:800}
.legend__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  box-shadow:0 0 0 5px rgba(73,90,106,.1);
}
.legend__dot--edge{background:#6b9bd8}
.legend__dot--dc{background:#495a6a}

.map__kpis{
  position:absolute;
  left:20px;
  bottom:20px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  z-index:20;
  pointer-events:none;
}
.kpi{
  min-width:130px;
  max-width:160px;
  border-radius:14px;
  border:1px solid rgba(223,230,236,.8);
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(12px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  pointer-events:auto;
}
.kpi__k{
  font-size:12px;
  font-weight:700;
  color:#6b7e8f;
  margin-bottom:4px;
}
.kpi__v{
  font-size:18px;
  font-weight:800;
  color:#2c3e50;
  line-height:1.2;
}

/* Testimonials */
.quotes{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.quote{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow:var(--shadow-sm);
  padding:14px 14px 13px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.quote::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg, #f5a623, #e89b2f);
  opacity:.85;
}
.quote:hover{
  transform:translateY(-3px);
  border-color:#c5d1dc;
  box-shadow:var(--shadow-md);
}
.quote__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.quote__industry{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid #d5dfe8;
  background:#eff5ff;
  color:#495a6a;
  font-size:12px;
  font-weight:800;
}
.quote__metric{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:108px;
  height:44px;
  padding:0 12px;
  border-radius:12px;
  font-size:31px;
  line-height:1;
  letter-spacing:-.55px;
  font-weight:950;
  border:1px solid transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 9px 16px rgba(73,90,106,.16);
}
.quote__metric--primary{
  color:#e89b2f;
  background:linear-gradient(135deg, #f0f4f7, #e8eef3);
  border-color:#c5d1dc;
}
.quote__metric--good{
  color:#008a63;
  background:linear-gradient(135deg, #edfff7, #def8ee);
  border-color:#9edfc6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 9px 16px rgba(0,168,112,.18);
}
.quote__metric--warn{
  color:#a45b00;
  background:linear-gradient(135deg, #fff8ea, #ffefd2);
  border-color:#f2cc89;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 9px 16px rgba(239,127,26,.2);
}
.quote__metric--fast{
  color:#006ab8;
  background:linear-gradient(135deg, #e9f8ff, #d9f2ff);
  border-color:#9ecfed;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 9px 16px rgba(61,79,92,.22);
}
.quote__title{
  margin:8px 0 0;
  color:#3d4f5c;
  font-size:15px;
  line-height:1.45;
}
.quote__text{
  margin:8px 0 0;
  color:#6b7e8f;
  font-size:13px;
  line-height:1.72;
}
.quote__meta{
  margin-top:10px;
  color:#6b7e8f;
  font-size:12px;
  font-weight:800;
}

/* FAQ */
.faq{max-width:900px;margin:0 auto}
.qa{
  border-radius:16px;
  border:1px solid #dfe6ec;
  background:#fff;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.qa+.qa{margin-top:10px}
.qa__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  appearance:none;
  border:none;
  background:#fff;
  color:#3d4f5c;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}
.qa__icon{
  width:10px;
  height:10px;
  border-right:2px solid #546e7a;
  border-bottom:2px solid #546e7a;
  transform:rotate(45deg);
  transition:transform .2s var(--ease);
}
.qa.is-open .qa__icon{transform:rotate(-135deg)}
.qa__a{max-height:0;overflow:hidden;transition:max-height .26s var(--ease)}
.qa__a p{margin:0;padding:0 16px 16px;color:#6b7e8f;font-size:14px;line-height:1.8}

/* CTA */
.cta{
  padding:78px 0;
  background:
    radial-gradient(640px 320px at 20% 30%, rgba(73,90,106,.12), transparent 65%),
    radial-gradient(640px 320px at 80% 20%, rgba(61,79,92,.11), transparent 65%),
    linear-gradient(180deg, #f5f9ff, #eef5ff);
  border-top:1px solid rgba(73,90,106,.1);
}
.cta__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:center;
  justify-items:center;
}
.cta__copy{width:100%}
.cta__copy--center{
  text-align:center;
  margin:0 auto;
  max-width:760px;
}
.cta__title{margin:0;color:#2c3e50;font-size:36px;letter-spacing:-.4px}
.cta__desc{margin:10px 0 14px;color:#6b7e8f;line-height:1.8}
.cta__minihead{
  margin-top:6px;
  color:#3d4f5c;
  font-weight:950;
  letter-spacing:.2px;
}
.cta__channels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.cta__channels--single{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin:14px auto 0;
  max-width:760px;
  justify-items:stretch;
}
.channel{
  border-radius:16px;
  border:1px solid #dfe6ec;
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:14px;
  text-align:left;
}
.channel__k{color:#6b7e8f;font-size:12px;font-weight:900}
.channel__v{margin-top:4px;color:#3d4f5c;font-weight:900}
.cta__note{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* Footer */
.footer{
  padding:36px 0 18px;
  border-top:1px solid rgba(73,90,106,.16);
  background:linear-gradient(180deg, #2c3947 0%, #1f2f3d 100%);
  color:#dbe8ff;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
  align-items:start;
}
.footer__text{margin:10px 0 0;max-width:520px;color:#b9ccf2;line-height:1.75}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.footer__h{margin:2px 0 6px;color:#f3f8ff;font-weight:950}
.footer__col a{
  display:block;
  color:#c7d8fa;
  padding:8px 10px;
  border-radius:10px;
}
.footer__col a:hover{background:rgba(255,255,255,.08);color:#fff}

.footer__bottom{
  margin-top:10px;
  padding-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#b7caef;
  border-top:1px solid rgba(255,255,255,.15);
}
.backtop{
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
}
.backtop:hover{background:rgba(255,255,255,.18)}

/* Reveal */
.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .66s var(--ease), transform .66s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Floating support FAB */
.fab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:70;
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-end;
  gap:14px;
  pointer-events:none;
}
.fab__btn{
  pointer-events:auto;
  position:relative;
  width:64px;
  height:64px;
  border:none;
  border-radius:999px;
  background:conic-gradient(from 210deg at 50% 50%, #495a6a, #6b9bd8, #495a6a);
  box-shadow:0 18px 42px rgba(73,90,106,.34), inset 0 1px 0 rgba(255,255,255,.45);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.fab__btn::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:999px;
  background:linear-gradient(150deg, #495a6a, #6b9bd8);
  border:1px solid rgba(255,255,255,.36);
}
.fab__btn::after{
  content:"7×24客服";
  position:absolute;
  right:-3px;
  top:-5px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid #dfe6ec;
  background:#ffffff;
  color:#495a6a;
  font-size:10px;
  font-weight:900;
  line-height:18px;
  box-shadow:0 8px 18px rgba(61,79,92,.16);
}
.fab__btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 24px 52px rgba(73,90,106,.42), inset 0 1px 0 rgba(255,255,255,.52);
}
.fab__btn img{
  position:relative;
  z-index:1;
  width:28px;
  height:28px;
  filter:brightness(0) invert(1) drop-shadow(0 6px 10px rgba(0,0,0,.24));
}
.fab__pulse{
  position:absolute;
  inset:-8px;
  z-index:-1;
  border-radius:999px;
  border:2px solid rgba(107,155,216,.34);
  background:radial-gradient(circle at 50% 50%, rgba(107,155,216,.2), transparent 70%);
  opacity:.58;
  animation:fabPulse 2.5s var(--ease) infinite;
}
@keyframes fabPulse{
  0%{transform:scale(.95);opacity:.5}
  60%{transform:scale(1.1);opacity:.14}
  100%{transform:scale(.95);opacity:.5}
}

@keyframes heroLatencyGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.fab__panel{
  pointer-events:auto;
  width:min(350px, calc(100vw - 112px));
  border-radius:20px;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #ffffff, #f5f9ff);
  box-shadow:0 28px 66px rgba(61,79,92,.22);
  backdrop-filter:blur(8px);
  overflow:hidden;
  transform-origin:100% 100%;
  transform:translateY(8px) scale(.97);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
}
.fab__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid #dfe6ec;
  background:linear-gradient(180deg, #f8fbff, #eef5ff);
}
.fab__title{
  font-weight:950;
  color:#3d4f5c;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
}
.fab__title::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#00b67a;
  box-shadow:0 0 0 4px rgba(0,182,122,.16);
}
.fab__close{
  appearance:none;
  border:1px solid #dfe6ec;
  background:#fff;
  width:34px;
  height:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .2s var(--ease);
}
.fab__close:hover{
  background:#f2f7ff;
  border-color:#c5d1dc;
}
.fab__body{
  padding:12px;
  display:grid;
  gap:8px;
}
.fab__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px;
  border-radius:12px;
  border:1px solid #dfe6ec;
  background:linear-gradient(180deg, #ffffff, #f8fbff);
}
.fab__k{
  color:#6b7e8f;
  font-size:11.5px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:6px;
}
.fab__k::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:#6b9bd8;
  box-shadow:0 0 0 3px rgba(107,155,216,.14);
}
.fab__v{
  color:#3d4f5c;
  font-size:13px;
  font-weight:950;
}
.fab__cta{
  margin-top:2px;
  border-radius:12px;
  height:42px;
  box-shadow:0 12px 24px rgba(73,90,106,.24);
}
.fab__tip{
  margin-top:2px;
  padding:8px 10px;
  border-radius:10px;
  border:1px dashed #cbd9e5;
  background:#eef5ff;
  color:#6b7e8f;
  font-size:12px;
  line-height:1.5;
}

@media (hover:hover) and (pointer:fine){
  .fab:hover .fab__panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }
}
.fab.is-open .fab__panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

/* Accessibility */
a:focus-visible,
button:focus-visible{
  outline:3px solid rgba(73,90,106,.3);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .hero__title strong{
    animation:none;
    background-position:50% 50%;
  }
}

/* Responsive */
@media (max-width:980px){
  .nav{display:none}
  .header__burger{display:grid}
  .header__actions{gap:8px}
  .header__actions .btn{height:38px;padding:0 12px;font-size:13px}

  .hero__grid{grid-template-columns:1fr}
  .hero__title{font-size:44px}
  .hero__art{min-height:390px}
  .hero__img{width:min(520px, 92%)}
  .hero__card{width:min(230px, 76%)}
  .hero__card--a{left:10px;top:10px}
  .hero__card--b{right:10px;top:10px}
  .hero__card--c{left:10px;right:10px;bottom:10px;transform:none;width:auto}

  .quick{grid-template-columns:1fr 1fr}
  .cards--3{grid-template-columns:1fr}
  .pain-grid{grid-template-columns:repeat(2, 1fr)}
  .adv-grid{grid-template-columns:1fr}
  .scene-grid{grid-template-columns:repeat(2, 1fr)}
  .grid{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr}
  .pricing-compare{padding:14px}
  .plan--hot{transform:none}
  .quotes{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .cta__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr 1fr 1fr}
  .map__kpis{position:static;margin-top:12px}
  .defense-arch svg{padding:6px 8px 10px}
}

@media (max-width:520px){
  .hero__art{min-height:330px}
  .hero__img{width:95%;top:54%}
  .hero__card{padding:8px 10px}
  .hero__card--a,.hero__card--b{top:10px;width:calc(50% - 14px)}
  .hero__card--a{left:10px}
  .hero__card--b{right:10px}
  .hero__card--c{left:10px;right:10px;bottom:10px;width:auto}
  .mini__sub{display:none}
  .hero__cta--triple{flex-direction:column;align-items:stretch}
  .hero__cta--triple .btn{width:100%}
  .container{width:calc(100% - 28px)}
  .hero__title{font-size:36px;line-height:1.12}
  .pricing-compare{padding:12px}
  .pricing-compare__head h3{font-size:20px}
  .pricing-compare__table{min-width:760px}
  .stats{grid-template-columns:1fr}
  .quick{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .quote__metric{min-width:92px;height:40px;padding:0 10px;font-size:27px}
  .pain-grid{grid-template-columns:1fr}
  .scene-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .usecases{grid-template-columns:1fr}
  .cta__channels--single{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr 1fr}
  .defense-arch__title{font-size:12px;letter-spacing:1.2px}

  .fab{right:12px;bottom:12px}
  .fab__btn{width:56px;height:56px;border-radius:999px}
  .fab__btn::after{top:-4px;right:-2px;transform:scale(.94);transform-origin:top right}
}