.nav-contact-wrap{position:relative;}
.nav-contact-wrap > a{display:none;}
@media (min-width:1024px){
  .nav-contact-wrap > a{display:flex;}
}
.suucar-bot-pop{
  --bot-card:#fff; --bot-face:#ececee; --bot-ink:#111827; --bot-muted:#6b7280;
  --bot-orb:#1d4ed8; --bot-eye:#f8fafc; --bot-btn:#2563eb; --bot-btn-text:#fff; --bot-head:#0f172a;
  position:fixed; top:4.25rem; right:1rem; width:336px; z-index:80;
  display:none; pointer-events:none;
}
html.dark .suucar-bot-pop{
  --bot-card:#111827; --bot-face:#1e293b; --bot-ink:#f8fafc; --bot-muted:#94a3b8;
  --bot-orb:#3b82f6; --bot-eye:#f8fafc; --bot-btn:#2563eb; --bot-btn-text:#fff; --bot-head:#e2e8f0;
}
.suucar-bot-pop.is-open{display:block; pointer-events:auto;}
.suucar-bot-pop.is-leaving .suucar-bot-card{animation:suucarBotOut .26s ease-in both;}
.suucar-bot-card{
  position:relative; background:var(--bot-card); color:var(--bot-ink);
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 8px 28px -10px rgba(15,23,42,.16);
  transform-origin:var(--tab-x, 50%) 0;
}
html.dark .suucar-bot-card{
  border-color:rgba(255,255,255,.10);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.55);
}
.suucar-bot-pop.is-open .suucar-bot-card{
  animation:suucarBotIn .92s cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes suucarBotIn{
  0%{opacity:0; transform:translateY(-16px) scale(.92);}
  42%{opacity:1; transform:translateY(6px) scale(1.035);}
  68%{transform:translateY(-3px) scale(.992);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes suucarBotOut{
  0%{opacity:1; transform:translateY(0) scale(1);}
  100%{opacity:0; transform:translateY(-10px) scale(.96);}
}
.suucar-bot-tab{
  position:absolute; top:-8px; left:var(--tab-x, 50%); transform:translateX(-50%);
  width:16px; height:9px;
  background:var(--bot-face);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.suucar-bot-face{
  height:168px; display:grid; place-items:center; padding-top:8px;
  background:var(--bot-face); border-radius:21px 21px 0 0;
  overflow:visible; --fg:var(--bot-head); --bg:var(--bot-face);
}
.suucar-bot-mount{width:112px; height:112px; overflow:visible;}
.suucar-bot-mount svg,.suucar-bot-mark{width:100%; height:auto; display:block; overflow:visible!important; user-select:none;}
.suucar-bot-mark__head{fill:var(--fg);}
.suucar-bot-mark__eye{fill:var(--bg);}
.suucar-bot-copy{padding:14px 18px 16px;}
.suucar-bot-copy h2{margin:0 0 8px; font-size:1.02rem; font-weight:650;}
.suucar-bot-copy p{margin:0 0 16px; color:var(--bot-muted); font-size:.84rem; line-height:1.55;}
.suucar-bot-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.suucar-bot-ignore{border:0; background:none; color:var(--bot-muted); font-size:.84rem; cursor:pointer; padding:6px 0;}
.suucar-bot-ignore:hover{color:var(--bot-ink);}
.suucar-bot-cta{
  border:0; border-radius:999px; background:var(--bot-btn); color:var(--bot-btn-text) !important;
  font-weight:700; padding:8px 14px; text-decoration:none; font-size:.84rem; cursor:pointer;
  transition:transform .18s ease, filter .18s ease;
}
.suucar-bot-cta:hover{transform:translateY(-1px); filter:brightness(1.08); color:var(--bot-btn-text) !important;}
.suucar-bot-pop.is-mobile{
  top:auto !important; bottom:max(16px, env(safe-area-inset-bottom, 0px));
  left:16px; right:16px; width:auto; max-width:312px;
  margin:0 auto; transform:none;
}
.suucar-bot-pop.is-mobile .suucar-bot-tab{display:none;}
.suucar-bot-pop.is-mobile .suucar-bot-face{height:148px; padding-top:10px; overflow:visible;}
.suucar-bot-pop.is-mobile .suucar-bot-mount{width:112px; height:112px;}
.suucar-bot-pop.is-mobile .suucar-bot-copy{padding:12px 14px 14px;}
.suucar-bot-pop.is-mobile .suucar-bot-copy h2{font-size:.95rem; margin-bottom:6px;}
.suucar-bot-pop.is-mobile .suucar-bot-copy p{font-size:.78rem; margin-bottom:12px; line-height:1.45;}
.suucar-bot-pop.is-mobile .suucar-bot-cta{padding:7px 12px; font-size:.78rem;}
.suucar-bot-pop.is-mobile .suucar-bot-card{transform-origin:50% 100%; overflow:visible;}

.site-announce {
    position: fixed;
    left: 0; right: 0;
    top: var(--site-announce-top, 3.5rem);
    z-index: 45;
    display: none;
    pointer-events: none;
  }
  .site-announce.is-visible {
    display: block;
    pointer-events: auto;
  }
  .site-announce-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.75rem 0.28rem 0.85rem;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(148,163,184,0.28);
    background: linear-gradient(90deg, rgba(255,255,255,0.97) 0%, rgba(239,246,255,0.98) 55%, rgba(238,242,255,0.97) 100%);
    box-shadow: 0 4px 14px -8px rgba(37, 99, 235, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  html.dark .site-announce-inner {
    background: linear-gradient(90deg, rgba(15,23,42,0.96) 0%, rgba(30,41,59,0.97) 100%);
    border-bottom-color: rgba(71,85,105,0.55);
    box-shadow: 0 6px 16px -10px rgba(0,0,0,0.55);
  }
  .site-announce-badge {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1d4ed8;
    background: #dbeafe;
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    line-height: 1.2;
  }
  html.dark .site-announce-badge {
    color: #93c5fd;
    background: rgba(30, 64, 175, 0.45);
  }
  .site-announce-viewport {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    height: 1.35rem;
    min-width: 0;
  }
  .site-announce-track {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(100%, -50%);
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 500;
    color: #334155;
    line-height: 1.35;
    will-change: transform;
  }
  html.dark .site-announce-track { color: #e2e8f0; }
  .site-announce-close {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .site-announce-close:hover {
    background: rgba(148,163,184,0.2);
    color: #0f172a;
  }
  html.dark .site-announce-close { color: #94a3b8; }
  html.dark .site-announce-close:hover {
    background: rgba(148,163,184,0.15);
    color: #f8fafc;
  }
  body.has-site-announce section.gradient-bg {
    padding-top: var(--hero-pad-top, 7.5rem) !important;
  }
  @media (min-width: 768px) {
    .site-announce-track { font-size: 0.82rem; }
    .site-announce-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
  }
  @media (max-width: 640px) {
    .site-announce {
      
      top: var(--site-announce-top, 3.25rem);
    }
    .site-announce-inner {
      padding: 0.28rem 0.55rem 0.28rem max(0.6rem, env(safe-area-inset-left));
      padding-right: max(0.55rem, env(safe-area-inset-right));
      gap: 0.35rem;
    }
    .site-announce-track { font-size: 0.72rem; }
    .site-announce-viewport { height: 1.35rem; }
    .site-announce-badge { font-size: 0.6rem; padding: 0.12rem 0.4rem; }
    .site-announce-close {
      width: 2rem;
      height: 2rem;
      font-size: 1.05rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .site-announce-track {
      position: relative;
      transform: none !important;
      left: 0; top: 0;
      white-space: normal;
    }
    .site-announce-viewport { height: auto; }
  }

  .site-announce-viewport { cursor: default; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
               "WenQuanYi Micro Hei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[lang="en"] body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
html.i18n-ready body,
html[data-lang="zh"] body,
html[lang="zh-CN"] body,
html[lang="en"] body { opacity: 1; }

.nav-desk,
.nav-desk-cta { display: none !important; }
.nav-burger { display: inline-flex !important; align-items: center; justify-content: center; }
nav .nav-inner { max-width: none; width: 100%; position: relative; }
nav .nav-brand { flex-shrink: 0; z-index: 2; }
nav .nav-tools { margin-left: auto; flex-shrink: 0; z-index: 2; }
footer .footer-inner { max-width: none; width: 100%; }
@media (min-width: 1024px) {
  nav .nav-desk {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
  }
  .nav-desk,
  .nav-desk-cta { display: flex !important; }
  .nav-burger { display: none !important; }
  .nav-mobile-panel { display: none !important; }
}

.pt-20 { padding-top: 5rem; }
.pb-7 { padding-bottom: 1.75rem; }
.pb-9 { padding-bottom: 2.25rem; }
.pb-14 { padding-bottom: 3.5rem; }
.mb-0 { margin-bottom: 0; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
  .md\:p-7 { padding: 1.75rem; }
  .md\:pt-24 { padding-top: 6rem; }
  .md\:pt-32 { padding-top: 8rem; }
  .md\:pb-9 { padding-bottom: 2.25rem; }
  .md\:pb-16 { padding-bottom: 4rem; }
  .md\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  .md\:space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem; }
}
@media (min-width: 1024px) {
  .lg\:text-left { text-align: left; }
}

#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 60;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #818cf8);
  transition: width 0.08s linear;
  pointer-events: none;
}

.gradient-bg {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #1e40af 100%);
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}
html.dark .gradient-bg {
  background: linear-gradient(135deg, #020617 0%, #0b1224 42%, #172554 100%);
  background-size: 200% 200%;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.card-hover {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}

.icon-svg, .icon-svg-sm, .icon-svg-lg, .icon-svg-xl {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  pointer-events: none;
}
.icon-svg { width: 1.5rem; height: 1.5rem; }
.icon-svg-lg { width: 1.75rem; height: 1.75rem; }
.icon-svg-sm { width: 1rem; height: 1rem; }

#theme-toggle, #lang-toggle {
  width: 2.25rem; height: 2.25rem;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #475569;
  transition: background 0.2s, color 0.2s;
  border: none; cursor: pointer; background: transparent;
}
#theme-toggle:hover, #lang-toggle:hover { background: #f1f5f9; color: #0f172a; }
html.dark #theme-toggle, html.dark #lang-toggle { color: #94a3b8; }
html.dark #theme-toggle:hover, html.dark #lang-toggle:hover { background: #1e293b; color: #f1f5f9; }
#lang-toggle { font-size: 0.75rem; font-weight: 700; }
#theme-toggle .icon-sun { display: none; }
html.dark #theme-toggle .icon-moon { display: none; }
html.dark #theme-toggle .icon-sun { display: block; }

button.faq-q {
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.copy-btn {
  margin-top: 0.5rem;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
}
html.dark .copy-btn {
  border-color: #1e3a8a;
  background: rgba(30, 58, 138, 0.4);
  color: #93c5fd;
}

.map-skeleton {
  width: 100%;
  aspect-ratio: 860 / 480;
  border-radius: 1rem;
  background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: mapSkel 1.2s ease-in-out infinite;
}
html.dark .map-skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
@keyframes mapSkel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.map-disclaimer {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(226, 232, 240, 0.78);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .map-skeleton, .gradient-bg, .hero-fx-marks { animation: none; }
}

.tut-module {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 1.15rem;
  padding: 1rem 1.1rem 1.1rem;
}
html.dark .tut-module {
  border-color: #334155;
  background: #0f172a;
}
.tut-module-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.tut-module-index {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #1d4ed8;
  background: #dbeafe;
}
html.dark .tut-module-index {
  color: #93c5fd;
  background: rgba(30, 64, 175, 0.45);
}
.tut-module-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}
html.dark .tut-module-title { color: #f8fafc; }
.tut-module-lead {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.45;
}
.tut-module-link {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  white-space: nowrap;
}
html.dark .tut-module-link {
  color: #93c5fd;
  border-color: #1e3a8a;
  background: rgba(30, 58, 138, 0.35);
}
.tut-module-badge {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
}
html.dark .tut-module-badge {
  color: #94a3b8;
  background: #1e293b;
}
.tut-module-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
@media (min-width: 640px) {
  .tut-module-grid { grid-template-columns: 1fr 1fr; }
}
.tut-module-grid li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 0.7rem 0.8rem;
}
html.dark .tut-module-grid li {
  background: #1e293b;
  border-color: #334155;
}
.tut-step-n {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  background: #2563eb;
}
.tut-module-grid h3 {
  margin: 0 0 0.15rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f172a;
}
html.dark .tut-module-grid h3 { color: #f1f5f9; }
.tut-module-grid p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #64748b;
}
.tut-module--soon {
  opacity: 0.78;
  background: repeating-linear-gradient(
    -12deg,
    #f8fafc,
    #f8fafc 8px,
    #f1f5f9 8px,
    #f1f5f9 16px
  );
}
html.dark .tut-module--soon {
  background: #0f172a;
}
@media (max-width: 640px) {
  .tut-module-head { flex-wrap: wrap; }
  .tut-module-link, .tut-module-badge { margin-left: 2.85rem; }
}

.hero-fx{position:absolute;left:0;right:0;bottom:0;height:88px;pointer-events:none;overflow:hidden;z-index:0;}
.hero-fx-fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.16),transparent);}
.hero-fx-strip{position:absolute;left:0;right:0;bottom:0;height:28px;background:linear-gradient(rgba(30,58,138,.10),rgba(15,23,42,.14));}
.hero-fx-strip::before,.hero-fx-strip::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(186,230,253,.16);}
.hero-fx-strip::before{top:6px;}
.hero-fx-strip::after{bottom:6px;}
.hero-fx-marks{position:absolute;left:0;top:50%;width:200%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(125,211,252,.35) 0 22px,transparent 22px 48px);opacity:.4;animation:heroMarks 2.4s linear infinite;will-change:transform;}
@keyframes heroMarks{to{transform:translate3d(-48px,0,0);}}
.hero-note{position:relative;z-index:2;}

.hero-cta{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.7rem;
  width:100%;
  max-width:100%;
}
.hero-cta .hero-btns{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  width:100%;
  max-width:22rem;
  gap:.75rem;
}
.hero-cta .hero-note{
  margin:0;
  text-align:center;
  line-height:1.55;
  padding:0 .25rem;
}
@media (min-width:640px){
  .hero-cta .hero-btns{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    max-width:none;
    width:auto;
  }
}
@media (min-width:1024px){
  .hero-cta{
    width:auto;
    align-items:center;
  }
  .hero-with-map .hero-cta .hero-btns{justify-content:center;}
}
@media (max-width:379px){
  .hero-cta .hero-btns a{padding-left:1.1rem;padding-right:1.1rem;font-size:.9rem;}
  .hero-cta .hero-note{font-size:.75rem;}
}

section.gradient-bg > .max-w-7xl{padding-bottom:1.25rem;}
@media (max-width:767px){
  .hero-fx{height:64px;}
  .hero-fx-strip{height:22px;}
  section.gradient-bg > .max-w-7xl{padding-bottom:2rem;}
}
@media (prefers-reduced-motion:reduce){
  .hero-fx-marks{animation:none;}
}

.cpv-card{position:relative;width:min(392px,100%);background:#fff;border-radius:24px;box-shadow:0 18px 50px -24px rgba(37,99,235,.28);overflow:visible;}
.cpv-tab{position:absolute;top:50%;right:-9px;width:10px;height:18px;background:#fff;transform:translateY(-50%);clip-path:polygon(0 0,100% 50%,0 100%);}
.cpv-face{height:214px;background:#f1f5f9;border-radius:24px 24px 0 0;overflow:hidden;position:relative;}
.cpv-scene{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px 26px;opacity:0;animation:cpvFade .7s cubic-bezier(.22,1,.36,1) forwards;}
.cpv-letters{display:flex;gap:6px;justify-content:center;max-width:100%;}
.cpv-letters span,.cpv-hero span{display:inline-block;font-size:26px;font-weight:700;letter-spacing:.02em;line-height:1.15;background-image:linear-gradient(180deg,#1e3a8a 0%,#2563eb 58%,#38bdf8 100%);background-size:100% 160%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0.35px rgba(30,58,138,.18);opacity:0;transform:translateY(12px);filter:blur(8px);animation:cpvLetter .9s cubic-bezier(.22,1,.36,1) forwards,cpvSheen 5s ease-in-out 1s infinite;}
.cpv-hero span{font-size:26px;}
.cpv-sub{margin-top:12px;font-size:12px;color:#64748b;letter-spacing:.12em;opacity:0;animation:cpvFade .8s cubic-bezier(.22,1,.36,1) .35s forwards;}
.cpv-chip{display:inline-flex;align-items:center;background:#fff;border-radius:999px;padding:10px 16px;box-shadow:0 10px 28px -18px rgba(37,99,235,.45);font-size:14px;font-weight:600;color:#1e3a8a;min-height:40px;}
.cpv-caret{display:inline-block;width:7px;height:15px;background:#2563eb;margin-left:2px;animation:cpvBlink 1s steps(1) infinite;vertical-align:-2px;}
.cpv-hero{display:flex;gap:3px;justify-content:center;}
.cpv-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.cpv-pill{padding:8px 12px;border-radius:999px;background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;font-weight:700;font-size:13px;letter-spacing:.1em;opacity:0;transform:translateY(10px);filter:blur(6px);animation:cpvLetter .8s cubic-bezier(.22,1,.36,1) forwards;}
.cpv-pill.ghost{background:#fff;color:#1d4ed8;box-shadow:0 6px 18px -12px rgba(37,99,235,.35);}
.cpv-ms{font-size:42px;font-weight:700;letter-spacing:.02em;background-image:linear-gradient(180deg,#1e3a8a 0%,#2563eb 60%,#38bdf8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cpv-ms small{font-size:15px;margin-left:4px;color:#64748b;font-weight:600;}
.cpv-panel{width:100%;height:100%;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-align:left;box-shadow:0 10px 28px -18px rgba(37,99,235,.35);}
.cpv-bar{height:28px;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:11px;color:#64748b;border-bottom:1px solid #e2e8f0;}
.cpv-dot{width:7px;height:7px;border-radius:50%;background:#cbd5e1;}
.cpv-dot.on{background:#38bdf8;}
.cpv-body{flex:1;padding:12px 14px;display:grid;align-content:center;gap:10px;}
.cpv-chips{display:flex;gap:6px;flex-wrap:wrap;}
.cpv-chips span{font-size:11px;font-weight:650;padding:5px 8px;border-radius:999px;background:#eff6ff;color:#1d4ed8;}
html.dark .cpv-panel{background:#0f172a;}
html.dark .cpv-bar{border-bottom-color:#334155;color:#94a3b8;}
.cpv-scene-qs{padding:0;}
.cpv-q-stage{position:absolute;inset:0 0 36px;overflow:hidden;}
.cpv-q{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;color:#3b82f6;opacity:0;animation:cpvQIn .7s cubic-bezier(.22,1,.36,1) forwards,cpvQfloat 3.4s ease-in-out infinite;}
.cpv-q svg{width:100%;height:100%;display:block;transform:scale(var(--s,1));}
.cpv-q.main{width:58px;height:58px;margin:-29px 0 0 -29px;color:#2563eb;}
.cpv-q-ok{position:absolute;left:50%;top:42%;width:64px;height:64px;margin:-32px 0 0 -32px;color:#16a34a;opacity:0;transform:scale(.7);pointer-events:none;}
.cpv-q-ok svg{width:100%;height:100%;display:block;}
.cpv-q-stage.resolved .cpv-q{animation:cpvQOut .7s cubic-bezier(.22,1,.36,1) forwards;}
.cpv-q-stage.resolved .cpv-q-ok{animation:cpvQok .7s cubic-bezier(.22,1,.36,1) .08s forwards;}
.cpv-q-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:12px;letter-spacing:.14em;color:#64748b;}
html.dark .cpv-q{color:#60a5fa;}
html.dark .cpv-q.main{color:#93c5fd;}
html.dark .cpv-q-ok{color:#4ade80;}
html.dark .cpv-q-cap{color:#94a3b8;}
@keyframes cpvQIn{from{opacity:0;transform:translate(-50%,-40%) scale(.6);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes cpvQfloat{0%,100%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,calc(-50% - 7px));}}
@keyframes cpvQOut{to{opacity:0;transform:translate(-50%,-58%) scale(.55);}}
@keyframes cpvQok{to{opacity:1;transform:scale(1);}}
@keyframes cpvLetter{to{opacity:1;transform:none;filter:blur(0);}}
@keyframes cpvSheen{50%{background-position:0 100%;}}
@keyframes cpvFade{to{opacity:1;}}
@keyframes cpvBlink{50%{opacity:0;}}
.cpv-scene-echo{padding:0;}
.cpv-brands{position:absolute;inset:0;overflow:hidden;}
.cpv-brand{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 8px 18px -10px rgba(15,23,42,.45);display:grid;place-items:center;opacity:0;overflow:hidden;will-change:transform;padding:8px;box-sizing:border-box;}
.cpv-brand svg,.cpv-brand img{width:100%;height:100%;display:block;object-fit:contain;}
.cpv-echo-ring{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(37,99,235,.38);pointer-events:none;animation:cpvEcho 1.35s cubic-bezier(.16,1,.3,1) forwards;}
.cpv-echo-ring-2{animation-delay:.52s;border-color:rgba(37,99,235,.22);}
@keyframes cpvEcho{to{opacity:0;transform:scale(18);border-width:0;}}
.cpv-brand-echo{pointer-events:none;filter:saturate(.85);}
.cpv-copy{padding:16px 20px 18px;text-align:left;}
.cpv-copy h2{margin:0 0 6px;font-size:18px;font-weight:750;letter-spacing:-.03em;color:#0f172a;line-height:1.25;}
.cpv-copy p{margin:0 0 14px;color:#64748b;font-size:13.5px;line-height:1.55;}
.cpv-actions{display:flex;align-items:center;justify-content:flex-end;}
.cpv-cta{display:inline-flex;align-items:center;justify-content:center;min-width:108px;height:36px;padding:0 16px;border-radius:999px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:700;font-size:14px;text-decoration:none;}
html.dark .cpv-card{background:#0f172a;border-color:#334155;box-shadow:0 8px 28px -14px rgba(0,0,0,.45);}
html.dark .cpv-tab{background:#0f172a;}
html.dark .cpv-face{background:#1e293b;}
html.dark .cpv-copy h2{color:#f8fafc;}
html.dark .cpv-copy p{color:#94a3b8;}
#tutorial .cpv-card{width:100%;max-width:none;height:100%;display:flex;flex-direction:column;border:1px solid #e2e8f0;box-shadow:0 8px 28px -14px rgba(15,23,42,.12);}
#tutorial .cpv-face{flex:1 1 auto;height:auto;min-height:260px;}
#tutorial .cpv-copy{padding:20px 24px 22px;}
#tutorial .cpv-copy h2{font-size:22px;}
#tutorial .cpv-copy p{font-size:14.5px;margin-bottom:16px;}
#tutorial .cpv-cta{
  position:relative;
  overflow:hidden;
  min-width:128px;
  height:40px;
  font-size:15px;
  box-shadow:0 8px 20px -8px rgba(37,99,235,.55);
  animation:cpvCtaPulse 2.4s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease;
}
#tutorial .cpv-cta::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);
  animation:cpvCtaShine 3.2s ease-in-out infinite;
}
#tutorial .cpv-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px -8px rgba(37,99,235,.6);
}
#tutorial .cpv-cta:active{transform:translateY(0) scale(.98);}
@keyframes cpvCtaPulse{
  0%,100%{box-shadow:0 8px 20px -8px rgba(37,99,235,.45);}
  50%{box-shadow:0 12px 28px -6px rgba(37,99,235,.7);}
}
@keyframes cpvCtaShine{
  0%,55%{transform:translateX(-120%);}
  75%,100%{transform:translateX(120%);}
}
@media (prefers-reduced-motion:reduce){
  #tutorial .cpv-cta,#tutorial .cpv-cta::after{animation:none;}
}
@media (max-width:639px){
  #tutorial .cpv-actions{justify-content:stretch;}
  #tutorial .cpv-cta{width:100%;min-height:44px;height:44px;}
}
#tutorial .cpv-letters span,#tutorial .cpv-hero span{font-size:32px;}
#tutorial .cpv-ms{font-size:56px;}
#tutorial .cpv-chip{font-size:16px;min-height:46px;padding:12px 18px;}
#tutorial .cpv-brand{width:58px;height:58px;padding:9px;}
html.dark #tutorial .cpv-card{border-color:#334155;}
@media (max-width:1023px){
  #tutorial .cpv-face{min-height:220px;}
  #tutorial .cpv-letters span,#tutorial .cpv-hero span{font-size:26px;}
  #tutorial .cpv-ms{font-size:44px;}
}

.home-section{padding:4rem 0;}
@media (min-width:768px){.home-section{padding:5rem 0;}}
.home-head{margin-bottom:2.5rem;text-align:center;}
.home-head h2{margin-bottom:.75rem;}
.home-brands{margin-top:2.5rem;padding:1.35rem 1.1rem 1.2rem;border-radius:1.25rem;border:1px solid #e2e8f0;background:#f8fafc;}
html.dark .home-brands{border-color:#334155;background:#0f172a;}
.home-brands h3{margin-bottom:.75rem;}
.home-brands .home-brands-desc{margin-bottom:1rem;}
.home-brands .home-brands-note{margin-top:.85rem;}
.js-anim-root.is-offscreen .path-good,.js-anim-root.is-offscreen .path-bad,.js-anim-root.is-offscreen .node-pulse,.js-anim-root.is-offscreen .packet-good,.js-anim-root.is-offscreen .packet-bad,.js-anim-root.is-offscreen .flow-dot{animation:none!important;visibility:hidden}
.js-anim-root.is-offscreen .map-play-ring .fill{animation-play-state:paused!important}

.js-anim-root.is-offscreen,
.js-anim-root.is-offscreen *{
  animation:none !important;
}
html.is-tab-hidden .js-anim-root,
html.is-tab-hidden .js-anim-root *{
  animation-play-state:paused !important;
}




:root{
  --page-max:72rem;
  --page-side:clamp(1rem,2.2vw,2rem);
  --section-y:clamp(3.5rem,5.5vw,6.5rem);
  --card-gap:clamp(1rem,1.4vw,1.6rem);
  --feat-min:16.25rem;
  --feat-max:21.5rem;
  --scene-min:17.5rem;
  --scene-max:24rem;
  --price-max:20rem;
}
@media (min-width:1280px){
  :root{ --page-max:84rem; --feat-max:22rem; --scene-max:25rem; }
}
@media (min-width:1600px){
  :root{ --page-max:96rem; --feat-max:22.5rem; --scene-max:26rem; }
}
@media (min-width:1920px){
  :root{ --page-max:108rem; --feat-max:23rem; --scene-max:26.5rem; }
}
@media (min-width:2400px){
  :root{ --page-max:120rem; }
}
.max-w-5xl,.max-w-6xl,.max-w-7xl{
  width:100%;
  max-width:var(--page-max);
  box-sizing:border-box;
}
.home-section{padding-top:var(--section-y);padding-bottom:var(--section-y);}
#features .grid,
#scenarios .grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap);
}
#features .grid > *,
#scenarios .grid > *{
  box-sizing:border-box;
}
@media (max-width:639px){
  #features .grid > *,
  #scenarios .grid > *{flex:1 1 100%;max-width:100%;}
}
@media (min-width:640px){
  #features .grid > *{flex:1 1 var(--feat-min);max-width:var(--feat-max);}
  #scenarios .grid > *{flex:1 1 var(--scene-min);max-width:var(--scene-max);}
}
.pricing-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap);
  max-width:none;
}
.pricing-grid > *{
  flex:1 1 16.5rem;
  max-width:var(--price-max);
}
@media (max-width:767px){
  .pricing-grid > *{flex:1 1 100%;max-width:100%;}
}
.compare-layout{
  width:100%;
  max-width:min(84rem,100%);
  margin-left:auto;
  margin-right:auto;
}
@media (min-width:960px){
  .compare-layout{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1.05fr) minmax(220px,.82fr);
    gap:var(--card-gap);
  }
}
@media (min-width:1600px){
  .compare-layout{max-width:min(92rem,100%);}
  .compare-layout .map-svg{max-height:300px;}
}
.dl-card{max-width:26rem;width:100%;}
@media (min-width:768px){
  #downloads .grid{justify-items:center;}
}


.card-hover,.dl-card,.guide-card,.compare-card,.toc-card,
.pricing-card,.tut-cta-card,.cpv-card,.flow-card,.faq-item,
.main-dl-card{
  container-type:inline-size;
  container-name:scard;
}
.card-hover h3,.dl-card h3,.guide-card h3,.compare-card h3,
.pricing-card h3,.tut-cta-card h3,.cpv-card h3,.faq-item h3{
  font-size:clamp(1.05rem, calc(.32cqi + .95rem), 1.28rem);
}
.card-hover p,.dl-card p,.guide-card p,.compare-card p,
.pricing-card p,.tut-cta-card p,.cpv-copy p{
  font-size:clamp(.8125rem, calc(.18cqi + .78rem), .9375rem);
  max-width:44em;
}
#scenarios .card-hover{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
}
.toc-card{align-items:flex-start;}
@container scard (min-width:22.5rem){
  #scenarios .card-hover{
    flex-direction:row;
    gap:1.25rem;
  }
}
@container scard (max-width:22rem){
  .toc-card{flex-direction:column;gap:.45rem;}
  .guide-card .flex.items-start{flex-direction:column;}
}
@container scard (min-width:20rem){
  .card-hover,.dl-card,.pricing-card,.tut-cta-card{
    padding-block:clamp(1.2rem, calc(.8cqi + 1rem), 1.85rem);
    padding-inline:clamp(1.1rem, calc(.7cqi + .95rem), 1.75rem);
  }
}
@container scard (max-width:21.5rem){
  #scenarios .card-hover .w-14{
    width:2.75rem;
    height:2.75rem;
  }
}

#tutorial .max-w-6xl,
#pricing .max-w-6xl,
#contact .max-w-6xl{
  container-type:inline-size;
  container-name:homesec;
}
#tutorial .grid{
  display:flex;
  flex-direction:column;
  gap:var(--card-gap,1.25rem);
}
#tutorial .grid > *{min-width:0;width:100%;grid-column:auto;}
#tutorial .cpv-card,
#tutorial .tut-cta-card{width:100%;max-width:40rem;margin-left:auto;margin-right:auto;}
@container homesec (min-width:48rem){
  #tutorial .grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(16.5rem,.88fr);
    align-items:stretch;
  }
  #tutorial .cpv-card,
  #tutorial .tut-cta-card{max-width:none;height:100%;}
}
#pricing .pricing-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap,1.25rem);
  max-width:none;
}
#pricing .pricing-grid > *{
  flex:1 1 16.5rem;
  max-width:22rem;
}
#contact .grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap,1.25rem);
  max-width:none;
}
#contact .grid > *{
  flex:1 1 15.5rem;
  max-width:22rem;
}
@container scard (min-width:18rem){
  #contact .card-hover{padding:1.4rem 1.25rem;}
}

#faq .max-w-3xl{
  max-width:min(72rem,100%);
  container-type:inline-size;
  container-name:faqsec;
}
#faq .space-y-3{display:flex;flex-direction:column;gap:.75rem;}
#faq .space-y-3 > * + *{margin-top:0;}
@container faqsec (min-width:42rem){
  #faq .space-y-3{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.85rem;
    align-items:start;
  }
}
#downloads .grid,
#guide .grid,
.guide-card .grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap,1.25rem);
}
#downloads .grid > *,
.guide-card .grid > *{
  flex:1 1 16.5rem;
  min-width:0;
}
#downloads .grid:has(.dl-card) > *{max-width:26rem;}
#downloads .grid:has(.flow-card) > *,
.guide-card .grid > *{max-width:none;}
#tutorial .grid.gap-3{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
}
#tutorial .grid.gap-3 > *{
  flex:1 1 14rem;
  max-width:22rem;
}

section.gradient-bg.hero-calm{
  animation:none !important;
  background-size:100% 100% !important;
}
section.gradient-bg.hero-calm .hero-fx-marks{
  animation:none !important;
}