/* UI Refresh 2026-03
   目标：参考企业级 CDN 官网风格，使用浅色商务视觉体系，保留原有 HTML 结构与 JS 交互。
*/

:root{
  --bg:#f5f8ff;
  --bg-soft:#eef3ff;
  --surface:#ffffff;
  --surface-2:#f8fbff;
  --text:#0f1f48;
  --text-soft:#4b5b85;
  --line:#dbe5ff;
  --line-strong:#c8d8ff;
  --primary:#1664ff;
  --primary-2:#32a3ff;
  --primary-soft:#e9f1ff;
  --good:#00a870;
  --warn:#ef7f1a;
  --shadow-sm:0 8px 22px rgba(16, 57, 141, .08);
  --shadow-md:0 16px 40px rgba(16, 57, 141, .11);
  --shadow-lg:0 28px 66px rgba(16, 57, 141, .16);
  --radius:16px;
  --radius-lg:24px;
  --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(22,100,255,.13), transparent 66%),
    radial-gradient(780px 460px at 92% 0%, rgba(50,163,255,.12), transparent 68%),
    linear-gradient(180deg, #f8fbff 0%, var(--bg) 42%, #f2f7ff 100%);
  overflow-x:hidden;
}

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:.46;
}
.bg-orb--a{
  left:-170px;
  top:40px;
  background:radial-gradient(circle at 35% 35%, rgba(22,100,255,.5), rgba(22,100,255,0) 64%);
}
.bg-orb--b{
  right:-170px;
  top:220px;
  background:radial-gradient(circle at 35% 35%, rgba(50,163,255,.48), rgba(50,163,255,0) 64%);
}
.bg-grid{
  inset:0;
  z-index:-3;
  background-image:
    linear-gradient(to right, rgba(22,100,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,100,255,.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(247,251,255,.92), rgba(247,251,255,.82));
  border-bottom:1px solid rgba(22,100,255,.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:#335492;
}
.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(22,100,255,.24);
}
.btn--primary:hover{box-shadow:0 16px 34px rgba(22,100,255,.3)}
.btn--ghost{
  color:var(--primary);
  border-color:#c6d8ff;
  background:#f5f9ff;
}
.btn--ghost:hover{background:#edf4ff}
.btn--lg{height:48px;padding:0 20px;border-radius:14px;font-size:15px}

.btn--hero-outline{
  color:#1b4fb8;
  background:transparent;
  border:2px solid #a9c5ff;
}
.btn--hero-outline:hover{
  background:#eef5ff;
  border-color:#6f99f4;
}
.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 #d4e1ff;
  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:#1a2f66}
.x{position:relative;width:16px;height:16px}
.x::before,
.x::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:16px;
  height:2px;
  background:#4a6197;
  border-radius:2px;
}
.x::before{transform:rotate(45deg)}
.x::after{transform:rotate(-45deg)}
.mobile__link{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:#2a447f;
  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(22,100,255,.04), rgba(22,100,255,.015));
  border-top:1px solid rgba(22,100,255,.08);
  border-bottom:1px solid rgba(22,100,255,.08);
}
.section__head{
  max-width:760px;
  margin:0 auto 30px;
  text-align:center;
}
.section__title{
  margin:0;
  color:#10295f;
  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:10px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #cfe0ff;
  background:#f4f8ff;
  color:#30539a;
  font-size:13px;
  font-weight:800;
}
.badge__dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--good);
  box-shadow:0 0 0 6px rgba(0,168,112,.12);
}

.hero__title{
  margin:14px 0 12px;
  color:#0e285f;
  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:#33508a;
}
.hero__quote{
  display:inline-block;
  padding:0 .24em;
  margin:0 .08em;
  border-radius:10px;
  color:#1348b2;
  background:linear-gradient(180deg, #eaf2ff, #dde9ff);
  border:1px solid #c8dcff;
  box-shadow:0 6px 14px rgba(22,100,255,.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, #0f59ff 0%, #22b5ff 38%, #27c7a1 68%, #0f59ff 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:18px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.stat{
  border-radius:14px;
  border:1px solid #d8e5ff;
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:12px;
}
.stat__num{font-weight:950;font-size:24px;color:#0f4ed9}
.stat{position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:auto -20% -60% auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle, rgba(22,100,255,.10), rgba(22,100,255,0) 68%);pointer-events:none;opacity:.85}
.stat--live::before,.stat--warn::before{content:"";position:absolute;left:-35%;top:-55%;width:92px;height:170px;transform:rotate(24deg);background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.62), rgba(255,255,255,0));opacity:.46;animation:statSweep 4.8s linear infinite;pointer-events:none}
.stat--warn::before{animation-duration:3.9s;opacity:.52}
.stat__meta{margin-top:4px;color:#7b8fb8;font-size:12px;line-height:1.55;min-height:18px}
.stat__meta span{font-weight:900;color:#315db7}
.stat__label{margin-top:4px;color:#5f74a3;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stat__chip{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 8px;border-radius:999px;border:1px solid #d6e5ff;background:#f5f9ff;color:#4b6cad;font-size:11px;font-weight:900;letter-spacing:.02em}
.stat__chip--live{border-color:#b8d6ff;background:linear-gradient(135deg,#eef7ff,#e2efff);color:#1658cf;box-shadow:0 0 0 1px rgba(22,88,207,.03) inset}
.stat__chip--live::before{content:"";width:6px;height:6px;border-radius:50%;background:#18b36b;display:inline-block;margin-right:6px;box-shadow:0 0 0 0 rgba(24,179,107,.45);animation:chipPulse 1.6s infinite}
.stat__chip--warn{border-color:#ffd8b7;background:linear-gradient(135deg,#fff4e8,#ffe9d5);color:#c36a11}
@keyframes statSweep{0%{transform:translateX(-210px) rotate(24deg)}100%{transform:translateX(500px) rotate(24deg)}}
@keyframes chipPulse{0%{box-shadow:0 0 0 0 rgba(24,179,107,.45)}70%{box-shadow:0 0 0 8px rgba(24,179,107,0)}100%{box-shadow:0 0 0 0 rgba(24,179,107,0)}}

.logos{margin-top:14px}
.logos__hint{color:#5b73a7;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 #d5e3ff;
  background:#fff;
  color:#355a9f;
  font-size:12px;
  font-weight:800;
}
.pill--soft{
  background:#f6f9ff;
  border-color:#dfe9ff;
  color:#4e6698;
}

.hero__art{
  position:relative;
  min-height:440px;
  border-radius:28px;
  border:1px solid #cfe0ff;
  overflow:hidden;
  background:
    radial-gradient(260px 180px at 14% 14%, rgba(22,100,255,.16), transparent 70%),
    radial-gradient(280px 200px at 86% 18%, rgba(50,163,255,.14), transparent 72%),
    linear-gradient(180deg, #fafdff, #eef5ff);
  box-shadow:0 28px 62px rgba(16,57,141,.18);
}
.hero__art::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:20px;
  border:1px solid rgba(22,100,255,.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(18,72,180,.22)) saturate(1.08);
  z-index:1;
}
.hero__card{
  position:absolute;
  z-index:2;
  width:min(250px, 72%);
  border-radius:14px;
  border:1px solid #d2e0ff;
  background:rgba(255,255,255,.9);
  box-shadow:0 12px 34px rgba(23,66,164,.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 #d7e4ff;
  background:#f1f6ff;
}
.mini__title{font-size:13px;font-weight:900;color:#183f8c}
.mini__sub{margin-top:2px;color:#5f77a6;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 #d7e5ff;
  background:linear-gradient(180deg, #ffffff, #f5f9ff);
  box-shadow:var(--shadow-sm);
}
.quick__item{
  border-radius:14px;
  border:1px solid #dfe9ff;
  background:#fff;
  padding:10px 12px;
}
.quick__k{font-weight:900;color:#173d88}
.quick__v{margin-top:4px;color:#6076a5;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 #d8e6ff;
  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:#bed4ff;
  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(22,100,255,.13), rgba(22,100,255,0) 70%);
}
.card>*{position:relative}
.card__icon{width:42px;height:42px}
.card__title{margin:12px 0 8px;color:#153b86;font-size:19px}
.card__text{margin:0 0 10px;color:#58709f;font-size:14px;line-height:1.75}
.check{margin:0;padding-left:18px;color:#33558f;font-size:13px;line-height:1.8}


.section__head--pain{
  max-width:860px;
  margin-bottom:24px;
}
.section__head--pain .section__desc{
  color:#4f669a;
}
.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 #d8e6ff;
  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(22,100,255,.12), rgba(22,100,255,0) 72%);
}
.pain-card>*{position:relative}
.pain-card:hover{
  transform:translateY(-4px);
  border-color:#bed4ff;
  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:#163c87;
  font-size:18px;
  line-height:1.35;
}
.pain-card p{
  margin:0;
  color:#5b73a5;
  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 #dae7ff;
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:16px;
}
.grid__item img{width:38px;height:38px}
.grid__item h3{margin:10px 0 7px;color:#153b85;font-size:16px}
.grid__item p{margin:0;color:#5e75a3;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 #dbe8ff;
  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, #2a8bff, #6c7dff);
  opacity:0;
  transition:opacity .24s var(--ease);
}
.adv-card:hover{
  transform:translateY(-4px);
  border-color:#bdd3ff;
  box-shadow:var(--shadow-md);
}
.adv-card:hover::before{opacity:1}
.adv-icon{
  --adv-a:#2a8bff;
  --adv-b:#6c7dff;
  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:#153b87;
}
.adv-desc{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.75;
  color:#5f77a7;
}
.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 #d3e2ff;
  background:#f4f8ff;
}
.toggle__btn{
  appearance:none;
  border:none;
  min-width:98px;
  padding:10px 12px;
  border-radius:999px;
  color:#4b6396;
  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(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
.plan{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border:1px solid #d8e6ff;
  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:#12397f;font-size:18px}
.plan__hint{margin:6px 0 0;color:#6078a6;font-size:13px}

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

.plan--hot{
  border-color:#8db7ff;
  box-shadow:0 24px 50px rgba(22,100,255,.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 #bdd6ff;
  color:#1651ca;
  font-size:12px;
  font-weight:900;
}

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

.pricing-compare{
  margin-top:18px;
  border-radius:18px;
  border:1px solid #d9e6ff;
  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:#133d88;
  font-size:24px;
  line-height:1.3;
}
.pricing-compare__head p{
  margin:6px 0 0;
  color:#627ba8;
  font-size:14px;
}
.pricing-compare__table-wrap{
  margin-top:12px;
  border-radius:14px;
  border:1px solid #d9e6ff;
  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:#1f4f9f;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}
.pricing-compare__table tbody td{
  color:#365487;
  font-size:13px;
}
.pricing-compare__table th:first-child,
.pricing-compare__table td:first-child{
  width:156px;
  color:#1f488f;
  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 #d9e6ff;
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:16px;
}
.uc h3{margin:0 0 8px;color:#153d89}
.uc p{margin:0 0 10px;color:#6177a4;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 #dbe8ff;
  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:#bdd3ff;
  box-shadow:var(--shadow-md);
}
.scene-icon{
  --scene-bg:rgba(22,100,255,.14);
  --scene-color:#2463ff;
  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:#173f8a;
}
.scene-card p{
  margin:4px 0 0;
  grid-row:2;
  grid-column:2;
  font-size:12.5px;
  line-height:1.6;
  color:#5f78a8;
}

.defense-arch{
  margin-top:16px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #d7e5ff;
  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(22,100,255,.12), rgba(22,100,255,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:#5471a9;
  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:#6b82b1;font-size:9px;font-weight:800;letter-spacing:.9px}
.arch-main{fill:#114db8;font-size:14px;font-weight:900}
.arch-sub{fill:#4f6694;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:#1d58bd;font-size:9px;font-weight:700}
.arch-layer-title{fill:#1e3f86;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(17,77,184,.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(17,77,184,.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(17,77,184,.12))}
.arch-cn{fill:rgba(255,255,255,.82);stroke:rgba(22,86,224,.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 #d5e4ff;
  background:linear-gradient(180deg, #ffffff, #f4f9ff);
  box-shadow:var(--shadow-lg);
  padding:16px;
}
.map__img{width:100%;height:auto;opacity:.95}
.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(22,100,255,.1);
}
.legend__dot--edge{background:#2a97ff}
.legend__dot--dc{background:#1562ff}

.map__kpis{
  position:absolute;
  left:16px;
  bottom:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.kpi{
  min-width:142px;
  border-radius:14px;
  border:1px solid #d8e5ff;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(4px);
  box-shadow:var(--shadow-sm);
  padding:10px 12px;
}
.kpi__k{font-size:12px;font-weight:800;color:#6280b4}
.kpi__v{margin-top:2px;font-weight:950;color:#1148bd}

/* 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 #d7e5ff;
  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, #1664ff, #32a3ff);
  opacity:.85;
}
.quote:hover{
  transform:translateY(-3px);
  border-color:#bdd5ff;
  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 #cfe0ff;
  background:#eff5ff;
  color:#2859ad;
  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(22,100,255,.16);
}
.quote__metric--primary{
  color:#0f57f1;
  background:linear-gradient(135deg, #eef4ff, #e1edff);
  border-color:#bfd5ff;
}
.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(50,163,255,.22);
}
.quote__title{
  margin:8px 0 0;
  color:#163f8a;
  font-size:15px;
  line-height:1.45;
}
.quote__text{
  margin:8px 0 0;
  color:#5e78a8;
  font-size:13px;
  line-height:1.72;
}
.quote__meta{
  margin-top:10px;
  color:#6782af;
  font-size:12px;
  font-weight:800;
}

/* FAQ */
.faq{max-width:900px;margin:0 auto}
.qa{
  border-radius:16px;
  border:1px solid #d9e6ff;
  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:#153c87;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}
.qa__icon{
  width:10px;
  height:10px;
  border-right:2px solid #4f6aa0;
  border-bottom:2px solid #4f6aa0;
  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:#6178a5;font-size:14px;line-height:1.8}

/* CTA */
.cta{
  padding:78px 0;
  background:
    radial-gradient(640px 320px at 20% 30%, rgba(22,100,255,.12), transparent 65%),
    radial-gradient(640px 320px at 80% 20%, rgba(50,163,255,.11), transparent 65%),
    linear-gradient(180deg, #f5f9ff, #eef5ff);
  border-top:1px solid rgba(22,100,255,.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:#0f2f72;font-size:36px;letter-spacing:-.4px}
.cta__desc{margin:10px 0 14px;color:#58709f;line-height:1.8}
.cta__minihead{
  margin-top:6px;
  color:#173f8b;
  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 #d8e6ff;
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:14px;
  text-align:left;
}
.channel__k{color:#6a81ad;font-size:12px;font-weight:900}
.channel__v{margin-top:4px;color:#1b3f87;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(22,100,255,.16);
  background:linear-gradient(180deg, #12367f 0%, #0d2c68 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%, #1664ff, #31abff, #1664ff);
  box-shadow:0 18px 42px rgba(22,100,255,.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, #1d63ff, #37afff);
  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 #cde0ff;
  background:#ffffff;
  color:#1f5ec8;
  font-size:10px;
  font-weight:900;
  line-height:18px;
  box-shadow:0 8px 18px rgba(24,77,171,.16);
}
.fab__btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 24px 52px rgba(22,100,255,.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(49,171,255,.34);
  background:radial-gradient(circle at 50% 50%, rgba(49,171,255,.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 #cedfff;
  background:linear-gradient(180deg, #ffffff, #f5f9ff);
  box-shadow:0 28px 66px rgba(16,57,141,.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 #deebff;
  background:linear-gradient(180deg, #f8fbff, #eef5ff);
}
.fab__title{
  font-weight:950;
  color:#163f8a;
  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 #d2e2ff;
  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:#bdd4ff;
}
.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 #dce8ff;
  background:linear-gradient(180deg, #ffffff, #f8fbff);
}
.fab__k{
  color:#6a84b1;
  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:#4ca2ff;
  box-shadow:0 0 0 3px rgba(76,162,255,.14);
}
.fab__v{
  color:#1a488f;
  font-size:13px;
  font-weight:950;
}
.fab__cta{
  margin-top:2px;
  border-radius:12px;
  height:42px;
  box-shadow:0 12px 24px rgba(22,100,255,.24);
}
.fab__tip{
  margin-top:2px;
  padding:8px 10px;
  border-radius:10px;
  border:1px dashed #c9dcff;
  background:#eef5ff;
  color:#5f7bad;
  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(22,100,255,.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}
}