/* roulang page: index */
:root{
  --bg:#f6f9ff;
  --bg-2:#eef5ff;
  --card:#ffffff;
  --card-2:#f9fbff;
  --line:#d9e6f7;
  --line-2:#c9d9ee;
  --text:#18314f;
  --muted:#6b7e97;
  --soft:#8da4c1;
  --primary:#2f6df6;
  --primary-2:#66b8ff;
  --primary-3:#e8f1ff;
  --accent:#57c2c7;
  --accent-2:#e9fbff;
  --success:#2fbf71;
  --warning:#ffb347;
  --danger:#ef6f6c;
  --shadow:0 18px 50px rgba(27, 58, 101, .10);
  --shadow-sm:0 10px 24px rgba(27, 58, 101, .08);
  --radius:22px;
  --radius-sm:16px;
  --radius-lg:30px;
  --container:1180px;
  --space:24px;
  --space-lg:40px;
  --space-xl:72px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(102,184,255,.20), transparent 60%),
    radial-gradient(700px 420px at 92% 12%, rgba(87,194,199,.14), transparent 58%),
    linear-gradient(180deg, #f8fbff 0%, #f4f8ff 46%, #f7faff 100%);
  color:var(--text);
  line-height:1.75;
  letter-spacing:.2px;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.35) 0, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 86%, rgba(255,255,255,.22) 100%);
  opacity:.28;
  mix-blend-mode:screen;
}
a{
  color:inherit;
  text-decoration:none;
  transition:color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), opacity .22s var(--ease);
}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
::selection{background:rgba(47,109,246,.16);color:var(--text)}
:focus{outline:none}
:focus-visible{
  outline:3px solid rgba(47,109,246,.28);
  outline-offset:2px;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  z-index:1000;
  background:#fff;
  padding:10px 14px;
  border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.grid-container{
  max-width:var(--container);
  padding-left:20px;
  padding-right:20px;
}
.site-header{
  position:sticky;
  top:0;
  z-index:200;
  backdrop-filter:saturate(180%) blur(16px);
  background:rgba(246,249,255,.82);
  border-bottom:1px solid rgba(217,230,247,.82);
  box-shadow:0 8px 26px rgba(19,42,79,.05);
}
.title-bar{
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background:transparent;
  color:var(--text);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:.4px;
}
.brand-mark{
  width:40px;
  height:40px;
  border-radius:14px;
  background:
    linear-gradient(145deg, rgba(47,109,246,.95), rgba(102,184,255,.92));
  box-shadow:0 14px 28px rgba(47,109,246,.24);
  position:relative;
  overflow:hidden;
}
.brand-mark::before{
  content:"";
  position:absolute;
  inset:10px 8px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:11px;
}
.brand-mark::after{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:18px;
  height:2px;
  background:rgba(255,255,255,.82);
  box-shadow:0 -6px 0 rgba(255,255,255,.62), 0 6px 0 rgba(255,255,255,.62);
  border-radius:99px;
}
.brand-name{
  font-size:1.04rem;
  color:var(--text);
}
.top-bar{
  background:transparent;
  padding:14px 0;
}
.top-bar,
.top-bar ul{
  align-items:center;
}
.top-bar-left,
.top-bar-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.top-bar-right{
  margin-left:auto;
}
.main-menu{
  gap:8px;
}
.main-menu > li > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  color:var(--muted);
  font-weight:600;
  border-radius:999px;
}
.main-menu > li > a:hover,
.main-menu > li.is-active > a{
  color:var(--primary);
  background:rgba(47,109,246,.08);
}
.main-menu > li > a::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:8px;
  height:2px;
  border-radius:999px;
  background:transparent;
  transform:scaleX(.6);
  opacity:0;
  transition:all .22s var(--ease);
}
.main-menu > li > a:hover::after,
.main-menu > li.is-active > a::after{
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  transform:scaleX(1);
  opacity:1;
}
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(217,230,247,.96);
  border-radius:999px;
  color:var(--muted);
  font-size:.92rem;
  box-shadow:0 10px 18px rgba(27,58,101,.05);
}
.lang-switch span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:26px;
  border-radius:999px;
  padding:0 10px;
  background:linear-gradient(180deg, #eef5ff, #ffffff);
  color:var(--text);
  font-weight:700;
}
.lang-switch .active{
  background:linear-gradient(135deg, rgba(47,109,246,.96), rgba(102,184,255,.88));
  color:#fff;
  box-shadow:0 10px 18px rgba(47,109,246,.18);
}
.section-pad{
  padding:var(--space-xl) 0;
}
.section-soft{
  position:relative;
}
.section-soft::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.18));
  pointer-events:none;
}
.section-inner{
  position:relative;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  padding:8px 12px;
  border-radius:999px;
  color:var(--primary);
  background:rgba(47,109,246,.08);
  border:1px solid rgba(47,109,246,.12);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.4px;
}
.eyebrow i{font-size:.9em}
.section-title{
  margin:0;
  font-size:clamp(1.55rem, 2vw, 2.25rem);
  line-height:1.2;
  letter-spacing:.2px;
  color:var(--text);
}
.section-desc{
  margin:14px 0 0;
  max-width:760px;
  color:var(--muted);
  font-size:1.02rem;
}
.hero{
  position:relative;
  overflow:hidden;
  padding-top:34px;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-1px 0 auto 0;
  height:240px;
  background:linear-gradient(180deg, rgba(47,109,246,.06), rgba(47,109,246,0));
  pointer-events:none;
}
.hero-shell{
  position:relative;
  border:1px solid rgba(217,230,247,.84);
  border-radius:34px;
  background:
    radial-gradient(1000px 600px at 0% 0%, rgba(102,184,255,.18), transparent 52%),
    radial-gradient(700px 420px at 100% 0%, rgba(87,194,199,.13), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(249,251,255,.92));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-shell::after{
  content:"";
  position:absolute;
  inset:auto -10% -20% auto;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,109,246,.14) 0%, rgba(47,109,246,0) 70%);
  pointer-events:none;
}
.hero-grid{
  padding:38px;
}
.hero-copy{
  position:relative;
  z-index:2;
  padding-right:18px;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(47,109,246,.12);
  background:#fff;
  color:var(--primary);
  font-weight:700;
  box-shadow:0 10px 24px rgba(47,109,246,.06);
}
.hero-title{
  margin:0;
  font-size:clamp(2.35rem, 5vw, 4.8rem);
  line-height:.98;
  letter-spacing:-.04em;
  color:var(--text);
}
.hero-title .highlight{
  display:inline-block;
  background:linear-gradient(90deg, var(--primary), #18a3db 55%, var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 10px 30px rgba(47,109,246,.08);
}
.hero-subtitle{
  margin:20px 0 0;
  max-width:640px;
  font-size:1.08rem;
  color:var(--muted);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin-top:28px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:none;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), opacity .22s var(--ease);
}
.btn:hover{
  transform:translateY(-1px);
}
.btn:active{
  transform:translateY(0);
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--primary), #4a89ff 60%, #68befe);
  box-shadow:0 16px 26px rgba(47,109,246,.22);
}
.btn-primary:hover{
  box-shadow:0 20px 32px rgba(47,109,246,.26);
  color:#fff;
}
.btn-secondary{
  color:var(--text);
  background:linear-gradient(180deg, #fff, #f7faff);
  border-color:rgba(47,109,246,.16);
  box-shadow:0 12px 24px rgba(27,58,101,.06);
}
.btn-secondary:hover{
  border-color:rgba(47,109,246,.28);
  background:#fff;
}
.btn-ghost{
  color:var(--primary);
  background:transparent;
  border-color:rgba(47,109,246,.14);
}
.btn-ghost:hover{
  background:rgba(47,109,246,.06);
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(217,230,247,.95);
  color:var(--muted);
  font-size:.92rem;
  box-shadow:0 10px 20px rgba(27,58,101,.05);
}
.meta-chip b{
  color:var(--text);
}
.hero-visual{
  position:relative;
  min-height:440px;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.poster{
  position:relative;
  width:min(100%, 460px);
  min-height:390px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(217,230,247,.96);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,248,255,.96)),
    radial-gradient(520px 260px at 20% 0%, rgba(102,184,255,.20), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  box-shadow:var(--shadow);
}
.poster::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, rgba(47,109,246,.16), transparent 42%),
    linear-gradient(330deg, rgba(87,194,199,.14), transparent 38%);
}
.poster::after{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(47,109,246,.10);
  border-radius:24px;
  pointer-events:none;
}
.poster-frame{
  position:absolute;
  inset:0;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.poster-tagrow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.poster-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:var(--muted);
  border:1px solid rgba(217,230,247,.90);
  font-size:.88rem;
  box-shadow:0 10px 18px rgba(27,58,101,.05);
}
.poster-stat{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:end;
}
.poster-card{
  padding:18px 18px 16px;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(217,230,247,.9);
  box-shadow:0 14px 30px rgba(27,58,101,.08);
}
.poster-card h3{
  margin:0;
  font-size:1rem;
  color:var(--text);
}
.poster-card p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:.92rem;
}
.mini-progress{
  margin-top:14px;
}
.mini-progress .track{
  height:12px;
  border-radius:999px;
  background:#eaf1fb;
  overflow:hidden;
  border:1px solid rgba(47,109,246,.10);
}
.mini-progress .fill{
  width:68%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--accent));
  box-shadow:0 8px 20px rgba(47,109,246,.22);
}
.mini-progress .label{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  color:var(--muted);
  font-size:.9rem;
}
.hero-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,251,255,.94));
  border:1px solid rgba(217,230,247,.90);
}
.hero-note strong{
  color:var(--text);
}
.hero-note .note-action{
  white-space:nowrap;
  color:var(--primary);
  font-weight:700;
}
.band{
  position:relative;
}
.band.alt{
  background:linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.76));
}
.stat-grid{
  margin-top:26px;
}
.stat-card{
  height:100%;
  padding:24px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(249,251,255,.96));
  border:1px solid rgba(217,230,247,.96);
  box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  position:relative;
  overflow:hidden;
}
.stat-card::before{
  content:"";
  position:absolute;
  inset:auto -18% -30% auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,109,246,.12), transparent 68%);
  pointer-events:none;
}
.stat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(27,58,101,.11);
  border-color:rgba(47,109,246,.18);
}
.stat-number{
  font-size:clamp(2rem, 3vw, 3rem);
  line-height:1;
  font-weight:900;
  color:var(--primary);
  letter-spacing:-.04em;
}
.stat-label{
  margin-top:10px;
  font-weight:800;
  color:var(--text);
}
.stat-text{
  margin-top:6px;
  color:var(--muted);
  font-size:.95rem;
}
.pillar-grid{
  margin-top:28px;
}
.pillar-card{
  height:100%;
  padding:24px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.96));
  border:1px solid rgba(217,230,247,.96);
  box-shadow:var(--shadow-sm);
}
.pillar-card.featured{
  background:
    radial-gradient(800px 220px at 0 0, rgba(47,109,246,.12), transparent 52%),
    linear-gradient(180deg, #ffffff, #f7fbff);
  border-color:rgba(47,109,246,.18);
}
.icon-badge{
  width:52px;
  height:52px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow:0 14px 24px rgba(47,109,246,.18);
  margin-bottom:16px;
}
.pillar-card h3{
  margin:0;
  font-size:1.16rem;
}
.pillar-card p{
  margin:10px 0 0;
  color:var(--muted);
}
.pillar-link{
  display:inline-flex;
  margin-top:16px;
  color:var(--primary);
  font-weight:700;
  gap:6px;
  align-items:center;
}
.pillar-link:hover{
  color:#194fdd;
}
.mosaic-grid{
  margin-top:28px;
}
.service-card{
  position:relative;
  height:100%;
  padding:26px;
  border-radius:28px;
  border:1px solid rgba(217,230,247,.96);
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,251,255,.97));
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.service-card.primary{
  min-height:100%;
  background:
    radial-gradient(820px 260px at 0 0, rgba(102,184,255,.20), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.98));
}
.service-card::after{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-48px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(87,194,199,.11) 0, rgba(87,194,199,0) 72%);
}
.service-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.service-heading h3{
  margin:0;
  font-size:1.2rem;
}
.service-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(47,109,246,.08);
  color:var(--primary);
  border:1px solid rgba(47,109,246,.12);
  font-size:.85rem;
  font-weight:700;
}
.service-card p{
  margin:12px 0 0;
  color:var(--muted);
}
.service-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.service-meta .mini-tag{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:#eff6ff;
  color:#3b5f97;
  border:1px solid rgba(47,109,246,.12);
  font-size:.86rem;
}
.service-cta{
  margin-top:16px;
  display:inline-flex;
  color:var(--primary);
  font-weight:700;
}
.service-cta:hover{opacity:.88}
.compare-shell{
  margin-top:28px;
}
.compare-panel{
  height:100%;
  padding:26px;
  border-radius:28px;
  border:1px solid rgba(217,230,247,.96);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.96));
  box-shadow:var(--shadow-sm);
}
.compare-panel.pro{
  background:
    radial-gradient(800px 260px at 0 0, rgba(47,109,246,.12), transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,250,255,.98));
}
.compare-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.compare-head h3{
  margin:0;
  font-size:1.18rem;
}
.compare-head .compare-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#eff6ff;
  color:var(--primary);
  border:1px solid rgba(47,109,246,.12);
  font-size:.88rem;
  font-weight:700;
}
.compare-list{
  margin:0;
  padding:0;
  list-style:none;
}
.compare-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 0;
  border-bottom:1px dashed rgba(217,230,247,.95);
}
.compare-list li:last-child{border-bottom:none}
.compare-icon{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  background:#edf4ff;
  color:var(--primary);
  font-size:.9rem;
}
.compare-list strong{
  display:block;
  color:var(--text);
  margin-bottom:3px;
}
.compare-list span{
  display:block;
  color:var(--muted);
  font-size:.94rem;
}
.compare-bars{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(217,230,247,.95);
}
.compare-bar{
  margin-top:14px;
}
.compare-bar:first-child{margin-top:0}
.compare-bar .bar-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  color:var(--muted);
  font-size:.92rem;
}
.progress-track{
  height:12px;
  border-radius:999px;
  background:#eaf1fb;
  overflow:hidden;
  border:1px solid rgba(217,230,247,.96);
}
.progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--accent));
  box-shadow:0 8px 18px rgba(47,109,246,.18);
}
.social-grid{
  margin-top:28px;
}
.quote-card{
  height:100%;
  padding:24px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,251,255,.96));
  border:1px solid rgba(217,230,247,.96);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.quote-card::before{
  content:"“";
  position:absolute;
  top:12px;
  right:18px;
  font-size:4rem;
  line-height:1;
  color:rgba(47,109,246,.12);
  font-family:Georgia,serif;
}
.quote-card p{
  margin:0;
  color:var(--text);
  font-size:1.02rem;
}
.quote-meta{
  margin-top:18px;
  color:var(--muted);
  font-size:.92rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.quote-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid rgba(47,109,246,.12);
  color:var(--primary);
  font-size:.84rem;
  font-weight:700;
}
.info-strip{
  margin-top:26px;
  padding:18px 20px;
  border-radius:22px;
  background:
    linear-gradient(90deg, rgba(47,109,246,.07), rgba(87,194,199,.08)),
    linear-gradient(180deg, #fff, #f8fbff);
  border:1px solid rgba(217,230,247,.96);
  box-shadow:var(--shadow-sm);
}
.info-strip ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
.info-strip li{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:.95rem;
}
.info-strip i{
  width:30px;
  height:30px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#eff6ff;
  color:var(--primary);
}
.updates-grid{
  margin-top:28px;
}
.updates-list-wrap{
  padding:0;
}
.updates-list{
  display:grid;
  gap:14px;
}
.update-card{
  display:flex;
  gap:16px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,255,.96));
  border:1px solid rgba(217,230,247,.96);
  box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.update-card:hover{
  transform:translateY(-2px);
  border-color:rgba(47,109,246,.18);
  box-shadow:0 18px 34px rgba(27,58,101,.10);
}
.update-main{
  flex:1;
  min-width:0;
}
.update-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.update-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid rgba(47,109,246,.12);
  color:#3c628f;
  font-size:.84rem;
  font-weight:700;
}
.update-card h3{
  margin:0;
  font-size:1.08rem;
  line-height:1.45;
}
.update-card p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.94rem;
}
.update-time{
  flex:0 0 auto;
  color:var(--soft);
  font-size:.9rem;
  white-space:nowrap;
}
.update-aside{
  padding:24px;
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
  border:1px solid rgba(217,230,247,.96);
  box-shadow:var(--shadow-sm);
}
.update-aside h3{
  margin:0;
  font-size:1.12rem;
}
.update-aside p{
  margin:10px 0 0;
  color:var(--muted);
}
.aside-list{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}
.aside-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:18px;
  background:#f7faff;
  border:1px solid rgba(217,230,247,.96);
}
.aside-list .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:8px;
  background:linear-gradient(180deg, var(--primary), var(--accent));
  box-shadow:0 0 0 4px rgba(47,109,246,.08);
  flex:0 0 10px;
}
.aside-list strong{
  display:block;
  color:var(--text);
  margin-bottom:4px;
}
.aside-list span{
  color:var(--muted);
  font-size:.93rem;
}
.empty-state{
  padding:28px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
  border:1px dashed rgba(167,189,219,.95);
  color:var(--muted);
  text-align:center;
  box-shadow:var(--shadow-sm);
}
.faq-wrap{
  margin-top:28px;
}
.accordion.faq-accordion{
  background:transparent;
  border:none;
}
.accordion-item{
  margin-bottom:14px;
  border:1px solid rgba(217,230,247,.96);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
}
.accordion-title{
  padding:20px 22px;
  color:var(--text);
  font-weight:800;
  font-size:1rem;
  border:none;
  background:transparent;
}
.accordion-title:hover{
  background:rgba(47,109,246,.04);
  color:var(--primary);
}
.accordion-title::before{
  right:20px;
  color:var(--primary);
  margin-top:-10px;
  font-size:1.2rem;
}
.accordion-content{
  padding:0 22px 20px;
  color:var(--muted);
  border:none;
}
.accordion-content p{margin:0}
.cta-shell{
  padding:28px;
  border-radius:32px;
  background:
    radial-gradient(1000px 360px at 0 0, rgba(47,109,246,.16), transparent 50%),
    radial-gradient(700px 320px at 100% 0, rgba(87,194,199,.12), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
  border:1px solid rgba(217,230,247,.96);
  box-shadow:var(--shadow);
}
.contact-grid{
  margin-top:28px;
}
.contact-points{
  padding-right:20px;
}
.contact-points h3{
  margin:0;
  font-size:1.42rem;
}
.contact-points p{
  margin:12px 0 0;
  color:var(--muted);
}
.point-list{
  margin:20px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:14px;
}
.point-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.point-list .check{
  width:28px;
  height:28px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  box-shadow:0 10px 18px rgba(47,109,246,.18);
  flex:0 0 28px;
}
.point-list strong{
  display:block;
  margin-bottom:4px;
  color:var(--text);
}
.point-list span{
  color:var(--muted);
  font-size:.95rem;
}
.form-card{
  padding:24px;
  border-radius:28px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(217,230,247,.96);
  box-shadow:var(--shadow-sm);
}
.form-card .form-label{
  font-weight:700;
  color:var(--text);
  margin-bottom:8px;
}
.form-card input,
.form-card textarea{
  height:50px;
  border-radius:16px;
  border:1px solid rgba(192,211,235,.95);
  background:#fff;
  box-shadow:none;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
  color:var(--text);
}
.form-card textarea{
  min-height:118px;
  height:auto;
  resize:vertical;
}
.form-card input::placeholder,
.form-card textarea::placeholder{
  color:#94a6bd;
}
.form-card input:focus,
.form-card textarea:focus{
  border-color:rgba(47,109,246,.38);
  box-shadow:0 0 0 4px rgba(47,109,246,.10);
}
.form-card .btn{
  width:100%;
  min-height:52px;
  margin-top:4px;
}
.form-hint{
  margin-top:12px;
  color:var(--muted);
  font-size:.9rem;
}
.footer{
  padding:28px 0 34px;
  border-top:1px solid rgba(217,230,247,.95);
  background:linear-gradient(180deg, rgba(247,250,255,.75), rgba(245,248,255,.96));
}
.footer-shell{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:24px;
  align-items:start;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.footer-brand p{
  margin:0;
  color:var(--muted);
  max-width:560px;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
}
.footer-links a{
  color:var(--muted);
  padding:8px 10px;
  border-radius:999px;
}
.footer-links a:hover{
  color:var(--primary);
  background:rgba(47,109,246,.06);
}
.footer-meta{
  margin-top:12px;
  color:var(--soft);
  font-size:.92rem;
}
.footer-copy{
  text-align:right;
  color:var(--soft);
  font-size:.92rem;
  line-height:1.8;
}
.divider{
  height:1px;
  background:linear-gradient(90deg, rgba(217,230,247,0), rgba(217,230,247,.95), rgba(217,230,247,0));
  margin:0;
}
.section-note{
  margin-top:12px;
  color:var(--muted);
  font-size:.96rem;
}
.anchor-offset{
  scroll-margin-top:108px;
}
.reveal-card{
  position:relative;
  overflow:hidden;
}
.reveal-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.20), rgba(255,255,255,0));
  transform:translateX(-100%);
  transition:transform .9s var(--ease);
}
.reveal-card:hover::before{
  transform:translateX(100%);
}
@media screen and (max-width: 1024px){
  .hero-grid{padding:30px}
  .hero-visual{min-height:380px}
  .info-strip ul{grid-template-columns:repeat(2, minmax(0,1fr))}
  .footer-shell{grid-template-columns:1fr}
  .footer-copy{text-align:left}
}
@media screen and (max-width: 768px){
  .top-bar{display:none}
  .title-bar{display:flex}
  .title-bar .brand-name{font-size:1rem}
  .hero-grid{padding:24px}
  .hero-copy{padding-right:0}
  .hero-title{font-size:clamp(2rem, 11vw, 3.2rem)}
  .hero-subtitle{font-size:1rem}
  .hero-visual{min-height:auto;margin-top:24px}
  .hero-shell{border-radius:28px}
  .hero-shell .grid-x>.cell{padding-left:0;padding-right:0}
  .section-pad{padding:52px 0}
  .compare-head, .service-heading{align-items:flex-start}
  .contact-points{padding-right:0;margin-bottom:20px}
  .updates-list{gap:12px}
}
@media screen and (max-width: 520px){
  .grid-container{padding-left:14px;padding-right:14px}
  .hero-grid{padding:18px}
  .hero-actions{gap:10px}
  .btn{width:100%}
  .btn.btn-secondary,.btn.btn-ghost{width:100%}
  .meta-chip{width:100%;justify-content:flex-start}
  .poster{min-height:360px}
  .stat-card,.pillar-card,.service-card,.compare-panel,.quote-card,.update-card,.update-aside,.form-card,.cta-shell{border-radius:22px}
  .update-card{flex-direction:column}
  .update-time{white-space:normal}
  .info-strip ul{grid-template-columns:1fr}
  .accordion-title{padding:18px 18px}
  .accordion-content{padding:0 18px 18px}
  .footer-links{gap:8px}
}

/* roulang page: article */
:root{
      --bg:#f6f9ff;
      --bg-2:#eef5ff;
      --card:#ffffff;
      --card-2:#f9fbff;
      --line:#d9e6f7;
      --line-2:#c9d9ee;
      --text:#18314f;
      --muted:#6b7e97;
      --soft:#8da4c1;
      --primary:#2f6df6;
      --primary-2:#66b8ff;
      --primary-3:#e8f1ff;
      --accent:#57c2c7;
      --accent-2:#e9fbff;
      --success:#2fbf71;
      --warning:#ffb347;
      --danger:#ef6f6c;
      --shadow:0 18px 50px rgba(27, 58, 101, .10);
      --shadow-sm:0 10px 24px rgba(27, 58, 101, .08);
      --radius:22px;
      --radius-sm:16px;
      --radius-lg:30px;
      --container:1180px;
      --space:24px;
      --space-lg:40px;
      --space-xl:72px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }
    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      background:
        radial-gradient(900px 500px at 10% 0%, rgba(102,184,255,.20), transparent 60%),
        radial-gradient(700px 420px at 92% 12%, rgba(87,194,199,.14), transparent 58%),
        linear-gradient(180deg, #f8fbff 0%, #f4f8ff 46%, #f7faff 100%);
      color:var(--text);
      line-height:1.75;
      letter-spacing:.2px;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.35) 0, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 86%, rgba(255,255,255,.22) 100%);
      opacity:.28;
      mix-blend-mode:screen;
      z-index:-1;
    }
    ::selection{background:rgba(47,109,246,.18);color:var(--text)}
    a{
      color:inherit;
      text-decoration:none;
      transition:color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), opacity .22s var(--ease), filter .22s var(--ease);
    }
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    .grid-container{
      max-width:var(--container);
      padding-left:20px;
      padding-right:20px;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:200;
      backdrop-filter:saturate(180%) blur(16px);
      background:rgba(246,249,255,.82);
      border-bottom:1px solid rgba(217,230,247,.82);
      box-shadow:0 8px 26px rgba(19,42,79,.05);
    }
    .title-bar{
      display:none;
      align-items:center;
      justify-content:space-between;
      padding:14px 18px;
      background:transparent;
      color:var(--text);
    }
    .title-bar .brand{margin:0}
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      letter-spacing:.4px;
      color:var(--text);
    }
    .brand:hover{transform:translateY(-1px)}
    .brand-mark{
      width:40px;
      height:40px;
      border-radius:14px;
      background:
        linear-gradient(145deg, rgba(47,109,246,.95), rgba(102,184,255,.92));
      box-shadow:0 14px 28px rgba(47,109,246,.24);
      position:relative;
      overflow:hidden;
      flex:0 0 auto;
    }
    .brand-mark::before{
      content:"";
      position:absolute;
      inset:10px 8px;
      border:1px solid rgba(255,255,255,.62);
      border-radius:11px;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      left:9px;
      right:9px;
      top:18px;
      height:2px;
      background:rgba(255,255,255,.82);
      box-shadow:0 -6px 0 rgba(255,255,255,.62), 0 6px 0 rgba(255,255,255,.62);
      border-radius:99px;
    }
    .brand-name{
      font-size:1.04rem;
      color:var(--text);
    }
    .top-bar{
      background:transparent;
      padding:14px 0;
    }
    .top-bar,
    .top-bar ul{
      align-items:center;
    }
    .top-bar-left,
    .top-bar-right{
      display:flex;
      align-items:center;
      gap:18px;
    }
    .top-bar-right{
      margin-left:auto;
    }
    .main-menu{
      gap:8px;
      display:flex;
      align-items:center;
      flex-wrap:wrap;
    }
    .main-menu > li{
      margin:0;
    }
    .main-menu > li > a{
      position:relative;
      display:inline-flex;
      align-items:center;
      padding:10px 14px;
      color:var(--muted);
      font-weight:600;
      border-radius:999px;
      letter-spacing:.2px;
    }
    .main-menu > li > a:hover,
    .main-menu > li.is-active > a{
      color:var(--primary);
      background:rgba(47,109,246,.08);
      box-shadow:0 10px 22px rgba(47,109,246,.07);
    }
    .main-menu > li > a::after{
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      bottom:8px;
      height:2px;
      border-radius:999px;
      background:transparent;
      transform:scaleX(.6);
      opacity:0;
      transition:all .22s var(--ease);
    }
    .main-menu > li > a:hover::after,
    .main-menu > li.is-active > a::after{
      background:linear-gradient(90deg, var(--primary), var(--primary-2));
      transform:scaleX(1);
      opacity:1;
    }
    .lang-switch{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px;
      border-radius:999px;
      background:rgba(255,255,255,.82);
      border:1px solid rgba(217,230,247,.95);
      box-shadow:var(--shadow-sm);
      flex:0 0 auto;
    }
    .lang-switch span{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:48px;
      height:32px;
      padding:0 12px;
      border-radius:999px;
      color:var(--soft);
      font-size:.88rem;
      font-weight:700;
      letter-spacing:.3px;
    }
    .lang-switch .active{
      background:linear-gradient(180deg, rgba(47,109,246,.12), rgba(47,109,246,.06));
      color:var(--primary);
      box-shadow:inset 0 0 0 1px rgba(47,109,246,.14);
    }
    .button,
    .button-group .button{
      border-radius:999px;
      font-weight:700;
      letter-spacing:.2px;
      padding:.92rem 1.35rem;
      border:1px solid transparent;
      box-shadow:none;
      line-height:1.2;
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), opacity .22s var(--ease);
    }
    .button:hover,
    .button:focus{
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(47,109,246,.12);
    }
    .button:active{
      transform:translateY(0);
      box-shadow:0 8px 18px rgba(47,109,246,.08);
    }
    .button.primary,
    .button.success,
    .button.alert,
    .button.secondary{
      background:linear-gradient(145deg, var(--primary), #4f87ff);
      color:#fff;
      box-shadow:0 14px 26px rgba(47,109,246,.20);
    }
    .button.primary:hover,
    .button.secondary:hover,
    .button.success:hover,
    .button.alert:hover{
      background:linear-gradient(145deg, #2963e2, #5c93ff);
      color:#fff;
    }
    .button.hollow{
      background:rgba(255,255,255,.82);
      color:var(--primary);
      border-color:rgba(47,109,246,.18);
      box-shadow:0 10px 24px rgba(27,58,101,.06);
    }
    .button.hollow:hover{
      background:#fff;
      border-color:rgba(47,109,246,.28);
      color:var(--primary);
      box-shadow:0 14px 28px rgba(47,109,246,.10);
    }
    .button.ghost{
      background:transparent;
      color:var(--text);
      border-color:rgba(137,164,197,.24);
    }
    .button.ghost:hover{
      border-color:rgba(47,109,246,.20);
      background:rgba(47,109,246,.05);
      color:var(--primary);
    }
    .button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    button:focus-visible{
      outline:3px solid rgba(47,109,246,.22);
      outline-offset:2px;
    }
    .page-main{
      padding:34px 0 0;
    }
    .section-pad{
      padding:var(--space-xl) 0;
    }
    .section-soft{
      position:relative;
    }
    .section-soft::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.18));
      pointer-events:none;
    }
    .section-inner{
      position:relative;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin:0 0 14px;
      padding:8px 12px;
      border-radius:999px;
      color:var(--primary);
      background:rgba(47,109,246,.08);
      border:1px solid rgba(47,109,246,.12);
      font-size:.92rem;
      font-weight:700;
      letter-spacing:.4px;
    }
    .eyebrow i{font-size:.9em}
    .section-title{
      margin:0;
      font-size:clamp(1.55rem, 2vw, 2.25rem);
      line-height:1.2;
      letter-spacing:.2px;
      color:var(--text);
    }
    .section-desc{
      margin:14px 0 0;
      max-width:760px;
      color:var(--muted);
      font-size:1.02rem;
    }
    .hero{
      position:relative;
      overflow:hidden;
      padding-top:8px;
    }
    .hero-shell{
      position:relative;
      border:1px solid rgba(217,230,247,.84);
      border-radius:34px;
      background:
        radial-gradient(1000px 600px at 0% 0%, rgba(102,184,255,.18), transparent 52%),
        radial-gradient(700px 420px at 100% 0%, rgba(87,194,199,.13), transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(249,251,255,.92));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(120deg, rgba(255,255,255,.50) 0, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.36) 100%);
      pointer-events:none;
    }
    .hero-shell::after{
      content:"";
      position:absolute;
      inset:auto -10% -20% auto;
      width:360px;
      height:360px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(47,109,246,.14) 0%, rgba(47,109,246,0) 70%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      z-index:1;
      padding:38px;
    }
    .hero-copy{
      position:relative;
      z-index:2;
      padding-right:18px;
    }
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      margin:0 0 16px;
      padding:9px 13px;
      border-radius:999px;
      border:1px solid rgba(47,109,246,.12);
      background:#fff;
      color:var(--primary);
      font-weight:700;
      box-shadow:0 10px 24px rgba(47,109,246,.06);
    }
    .hero-title{
      margin:0;
      font-size:clamp(2.35rem, 5vw, 4.8rem);
      line-height:.98;
      letter-spacing:-.04em;
      color:var(--text);
    }
    .hero-title .highlight{
      display:inline-block;
      background:linear-gradient(90deg, var(--primary), #18a3db 55%, var(--accent));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-shadow:0 10px 30px rgba(47,109,246,.08);
    }
    .hero-subtitle{
      margin:20px 0 0;
      max-width:680px;
      font-size:1.08rem;
      color:var(--muted);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-top:28px;
    }
    .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:28px;
    }
    .meta-chip{
      display:inline-flex;
      align-items:center;
      gap:9px;
      min-height:42px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.9);
      border:1px solid rgba(217,230,247,.9);
      color:var(--text);
      box-shadow:0 10px 22px rgba(27,58,101,.05);
      font-weight:600;
    }
    .meta-chip i{
      color:var(--primary);
    }
    .hero-panel{
      position:relative;
      border-radius:28px;
      border:1px solid rgba(217,230,247,.95);
      background:
        radial-gradient(480px 260px at 22% 18%, rgba(102,184,255,.22), transparent 58%),
        radial-gradient(360px 220px at 92% 10%, rgba(87,194,199,.18), transparent 56%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(249,251,255,.96));
      box-shadow:var(--shadow-sm);
      overflow:hidden;
      min-height:100%;
      padding:24px;
    }
    .hero-panel::before{
      content:"";
      position:absolute;
      inset:18px;
      border:1px solid rgba(141,164,193,.16);
      border-radius:22px;
      pointer-events:none;
    }
    .hero-panel::after{
      content:"";
      position:absolute;
      right:-45px;
      top:-45px;
      width:180px;
      height:180px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(47,109,246,.12) 0%, rgba(47,109,246,0) 68%);
      pointer-events:none;
    }
    .panel-tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 12px;
      border-radius:999px;
      background:rgba(47,109,246,.09);
      color:var(--primary);
      font-size:.84rem;
      font-weight:700;
      letter-spacing:.25px;
    }
    .panel-title{
      margin:14px 0 10px;
      font-size:1.12rem;
      line-height:1.4;
      color:var(--text);
    }
    .panel-text{
      margin:0;
      color:var(--muted);
      font-size:.96rem;
    }
    .check-list{
      margin:18px 0 0;
      padding:0;
      list-style:none;
    }
    .check-list li{
      position:relative;
      padding-left:28px;
      margin:0 0 12px;
      color:var(--text);
      font-size:.96rem;
    }
    .check-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.42rem;
      width:18px;
      height:18px;
      border-radius:50%;
      background:linear-gradient(145deg, var(--primary), var(--primary-2));
      box-shadow:0 10px 18px rgba(47,109,246,.18);
    }
    .check-list li::after{
      content:"";
      position:absolute;
      left:6px;
      top:.72rem;
      width:6px;
      height:3px;
      border-left:2px solid #fff;
      border-bottom:2px solid #fff;
      transform:rotate(-45deg);
    }
    .panel-foot{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
      margin-top:22px;
    }
    .mini-stat{
      padding:14px 14px 12px;
      border-radius:18px;
      background:rgba(255,255,255,.9);
      border:1px solid rgba(217,230,247,.95);
      box-shadow:0 10px 24px rgba(27,58,101,.05);
    }
    .mini-stat .num{
      display:block;
      font-size:1.18rem;
      font-weight:800;
      color:var(--text);
      line-height:1.1;
    }
    .mini-stat .lbl{
      display:block;
      margin-top:5px;
      font-size:.84rem;
      color:var(--muted);
    }
    .section-hd{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:24px;
    }
    .section-hd .section-copy{
      max-width:760px;
    }
    .section-hd .section-title{
      margin:0;
    }
    .section-hd .section-desc{
      margin-top:10px;
    }
    .stats-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:18px;
    }
    .stat-card{
      position:relative;
      overflow:hidden;
      padding:22px;
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,251,255,.98));
      border:1px solid rgba(217,230,247,.95);
      box-shadow:var(--shadow-sm);
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
    }
    .stat-card::before{
      content:"";
      position:absolute;
      inset:auto -18px -18px auto;
      width:96px;
      height:96px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(47,109,246,.10) 0%, rgba(47,109,246,0) 72%);
      pointer-events:none;
    }
    .stat-card:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow);
      border-color:rgba(47,109,246,.14);
    }
    .stat-number{
      font-size:clamp(2rem, 3vw, 2.55rem);
      line-height:1;
      font-weight:800;
      color:var(--primary);
      letter-spacing:-.04em;
    }
    .stat-label{
      margin-top:10px;
      font-weight:700;
      color:var(--text);
      font-size:1rem;
    }
    .stat-desc{
      margin-top:8px;
      color:var(--muted);
      font-size:.94rem;
    }
    .stat-note{
      margin-top:14px;
      color:var(--soft);
      font-size:.82rem;
    }
    .section-grid{
      display:grid;
      gap:18px;
    }
    .service-matrix{
      grid-template-columns:1.2fr .8fr;
      align-items:stretch;
    }
    .service-main,
    .service-side{
      display:grid;
      gap:18px;
    }
    .feature-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.97));
      border:1px solid rgba(217,230,247,.96);
      box-shadow:var(--shadow-sm);
      padding:24px;
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
    }
    .feature-card:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow);
      border-color:rgba(47,109,246,.14);
    }
    .feature-card.primary{
      padding:30px;
      background:
        radial-gradient(600px 360px at 0% 0%, rgba(102,184,255,.16), transparent 54%),
        linear-gradient(180deg, #ffffff, #f9fbff);
    }
    .feature-card.accent{
      background:
        radial-gradient(500px 320px at 100% 0%, rgba(87,194,199,.12), transparent 52%),
        linear-gradient(180deg, #ffffff, #f9fbff);
    }
    .feature-head{
      display:flex;
      align-items:flex-start;
      gap:16px;
    }
    .feature-icon{
      width:54px;
      height:54px;
      border-radius:18px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(145deg, var(--primary), var(--primary-2));
      box-shadow:0 14px 26px rgba(47,109,246,.18);
      flex:0 0 auto;
    }
    .feature-title{
      margin:0;
      font-size:1.2rem;
      line-height:1.35;
      color:var(--text);
    }
    .feature-desc{
      margin:10px 0 0;
      color:var(--muted);
    }
    .feature-list{
      margin:18px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .feature-list li{
      position:relative;
      padding-left:20px;
      color:var(--text);
      font-size:.96rem;
    }
    .feature-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.7rem;
      width:8px;
      height:8px;
      border-radius:50%;
      background:linear-gradient(145deg, var(--primary), var(--accent));
    }
    .feature-action{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:18px;
      color:var(--primary);
      font-weight:700;
      padding:8px 0 0;
    }
    .feature-action:hover{
      color:#1f5be0;
      transform:translateX(2px);
    }
    .service-stack{
      display:grid;
      gap:18px;
    }
    .service-small{
      padding:22px;
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.97));
      border:1px solid rgba(217,230,247,.95);
      box-shadow:var(--shadow-sm);
    }
    .service-small .feature-head{
      gap:14px;
    }
    .service-small .feature-icon{
      width:46px;
      height:46px;
      border-radius:16px;
      font-size:1rem;
    }
    .service-tag{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(47,109,246,.08);
      color:var(--primary);
      font-size:.8rem;
      font-weight:700;
      margin-top:14px;
    }
    .compare-shell{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
      align-items:stretch;
    }
    .compare-card{
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,255,.97));
      border:1px solid rgba(217,230,247,.95);
      box-shadow:var(--shadow-sm);
      overflow:hidden;
    }
    .compare-card .compare-hd{
      padding:22px 22px 16px;
      border-bottom:1px solid rgba(217,230,247,.72);
      background:linear-gradient(180deg, rgba(47,109,246,.04), rgba(255,255,255,0));
    }
    .compare-card .compare-title{
      margin:0;
      font-size:1.1rem;
      color:var(--text);
      font-weight:800;
    }
    .compare-card .compare-sub{
      margin:8px 0 0;
      color:var(--muted);
      font-size:.94rem;
    }
    .compare-list{
      padding:18px 22px 22px;
      display:grid;
      gap:14px;
    }
    .compare-item{
      display:grid;
      gap:8px;
    }
    .compare-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-weight:700;
      color:var(--text);
    }
    .compare-bar{
      height:12px;
      border-radius:999px;
      background:#eaf1fb;
      overflow:hidden;
      position:relative;
    }
    .compare-fill{
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--accent));
      box-shadow:0 10px 20px rgba(47,109,246,.15);
    }
    .compare-note{
      color:var(--muted);
      font-size:.92rem;
    }
    .result-strip{
      margin-top:18px;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
    }
    .result-pill{
      padding:16px 18px;
      border-radius:20px;
      background:rgba(255,255,255,.94);
      border:1px solid rgba(217,230,247,.92);
      box-shadow:0 10px 24px rgba(27,58,101,.05);
    }
    .result-pill .rp-top{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      color:var(--text);
    }
    .result-pill i{
      color:var(--primary);
    }
    .result-pill p{
      margin:8px 0 0;
      color:var(--muted);
      font-size:.92rem;
    }
    .article-zone{
      padding-top:0;
    }
    .article-shell{
      position:relative;
      border-radius:30px;
      background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(251,252,255,.98));
      border:1px solid rgba(217,230,247,.94);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .article-shell::before{
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:6px;
      background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--accent));
    }
    .article-body{
      padding:30px;
    }
    .cms-article{
      max-width:760px;
      margin:0 auto;
      color:var(--text);
      font-size:1.02rem;
    }
    .cms-article > :first-child{margin-top:0}
    .cms-article > :last-child{margin-bottom:0}
    .cms-article p{
      margin:0 0 1.1em;
      color:var(--text);
    }
    .cms-article h2,
    .cms-article h3,
    .cms-article h4{
      margin:1.8em 0 .8em;
      line-height:1.25;
      color:var(--text);
      letter-spacing:-.02em;
    }
    .cms-article h2{font-size:1.65rem}
    .cms-article h3{font-size:1.28rem}
    .cms-article h4{font-size:1.08rem}
    .cms-article strong{color:var(--text)}
    .cms-article em{color:#254d82}
    .cms-article a{
      color:var(--primary);
      text-decoration:none;
      border-bottom:1px solid rgba(47,109,246,.2);
    }
    .cms-article a:hover{
      color:#1d5be2;
      border-bottom-color:rgba(29,91,226,.5);
    }
    .cms-article ul,
    .cms-article ol{
      margin:0 0 1.15em 1.35em;
      padding:0;
    }
    .cms-article li{
      margin:.35em 0;
    }
    .cms-article blockquote{
      margin:1.4em 0;
      padding:18px 20px;
      border-left:4px solid var(--primary);
      border-radius:0 18px 18px 0;
      background:linear-gradient(180deg, rgba(47,109,246,.06), rgba(47,109,246,.03));
      color:#244365;
    }
    .cms-article code{
      padding:.14em .45em;
      border-radius:8px;
      background:rgba(47,109,246,.08);
      color:#244365;
      font-size:.94em;
    }
    .cms-article pre{
      overflow:auto;
      margin:1.4em 0;
      padding:18px 20px;
      border-radius:18px;
      background:#10233f;
      color:#eaf2ff;
      box-shadow:0 16px 34px rgba(16,35,63,.14);
    }
    .cms-article pre code{
      background:transparent;
      color:inherit;
      padding:0;
    }
    .cms-article hr{
      margin:2em 0;
      border:0;
      border-top:1px solid rgba(217,230,247,.95);
    }
    .cms-article img{
      max-width:100%;
      height:auto;
      border-radius:20px;
      margin:1.4em 0;
      box-shadow:0 18px 38px rgba(27,58,101,.10);
    }
    .cms-article table{
      width:100%;
      border-collapse:collapse;
      margin:1.4em 0;
      overflow:hidden;
      border-radius:18px;
      background:#fff;
      box-shadow:0 14px 30px rgba(27,58,101,.06);
    }
    .cms-article th,
    .cms-article td{
      padding:12px 14px;
      border:1px solid rgba(217,230,247,.92);
      text-align:left;
      vertical-align:top;
    }
    .cms-article th{
      background:#f3f7ff;
      color:var(--text);
      font-weight:700;
    }
    .article-utility{
      max-width:760px;
      margin:0 auto 18px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      justify-content:space-between;
    }
    .article-utility .left,
    .article-utility .right{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .crumbs{
      display:inline-flex;
      align-items:center;
      flex-wrap:wrap;
      gap:8px;
      color:var(--muted);
      font-size:.92rem;
    }
    .crumbs a{
      color:var(--muted);
      border-bottom:1px solid transparent;
    }
    .crumbs a:hover{color:var(--primary);border-bottom-color:rgba(47,109,246,.28)}
    .crumbs .sep{opacity:.5}
    .detail-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .detail-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:36px;
      padding:0 12px;
      border-radius:999px;
      background:rgba(47,109,246,.06);
      color:var(--primary);
      border:1px solid rgba(47,109,246,.12);
      font-size:.86rem;
      font-weight:700;
    }
    .content-empty{
      max-width:760px;
      margin:0 auto;
      padding:42px 24px;
      text-align:center;
    }
    .content-empty .empty-icon{
      width:64px;
      height:64px;
      margin:0 auto 18px;
      border-radius:22px;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg, rgba(47,109,246,.12), rgba(87,194,199,.08));
      color:var(--primary);
      font-size:1.5rem;
    }
    .content-empty h2{
      margin:0;
      font-size:1.5rem;
      color:var(--text);
    }
    .content-empty p{
      margin:10px 0 0;
      color:var(--muted);
    }
    .related-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:18px;
    }
    .related-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius);
      background:
        radial-gradient(520px 260px at 0% 0%, rgba(102,184,255,.13), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.98));
      border:1px solid rgba(217,230,247,.95);
      box-shadow:var(--shadow-sm);
      padding:22px;
      min-height:100%;
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
    }
    .related-card:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow);
      border-color:rgba(47,109,246,.14);
    }
    .related-card .rc-icon{
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(145deg, var(--primary), var(--primary-2));
      box-shadow:0 14px 26px rgba(47,109,246,.18);
      margin-bottom:14px;
    }
    .related-card h3{
      margin:0;
      font-size:1.08rem;
      color:var(--text);
    }
    .related-card p{
      margin:10px 0 0;
      color:var(--muted);
      font-size:.94rem;
    }
    .related-card .rc-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:16px;
      color:var(--primary);
      font-weight:700;
    }
    .faq-wrap{
      max-width:900px;
      margin:0 auto;
    }
    .accordion{
      border:0;
      background:transparent;
      list-style:none;
      margin:0;
      padding:0;
    }
    .accordion-item{
      margin-bottom:14px;
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(217,230,247,.95);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.98));
      box-shadow:var(--shadow-sm);
    }
    .accordion-title{
      position:relative;
      display:block;
      padding:18px 20px;
      color:var(--text);
      font-weight:700;
      border-bottom:0;
      background:transparent;
      font-size:1rem;
    }
    .accordion-title:hover{
      background:rgba(47,109,246,.03);
      color:var(--primary);
    }
    .accordion-title::before{
      color:var(--primary);
      font-size:1.2rem;
      font-weight:400;
      right:18px;
      margin-top:-.6rem;
    }
    .accordion-content{
      border-top:1px solid rgba(217,230,247,.72);
      padding:0 20px 18px;
      color:var(--muted);
      background:linear-gradient(180deg, rgba(47,109,246,.02), rgba(255,255,255,0));
    }
    .accordion-content p{
      margin:14px 0 0;
    }
    .cta-shell{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      background:
        radial-gradient(700px 360px at 0% 0%, rgba(102,184,255,.18), transparent 56%),
        radial-gradient(520px 280px at 100% 0%, rgba(87,194,199,.13), transparent 52%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.97));
      border:1px solid rgba(217,230,247,.95);
      box-shadow:var(--shadow);
    }
    .cta-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, rgba(255,255,255,.5) 0, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 76%, rgba(255,255,255,.36) 100%);
      pointer-events:none;
    }
    .cta-grid{
      position:relative;
      z-index:1;
      padding:34px;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:22px;
      align-items:center;
    }
    .cta-title{
      margin:0;
      font-size:clamp(1.7rem, 2.4vw, 2.6rem);
      line-height:1.18;
      color:var(--text);
      letter-spacing:-.03em;
    }
    .cta-desc{
      margin:14px 0 0;
      color:var(--muted);
      max-width:620px;
    }
    .cta-points{
      margin:18px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .cta-points li{
      position:relative;
      padding-left:22px;
      color:var(--text);
      font-size:.96rem;
    }
    .cta-points li::before{
      content:"";
      position:absolute;
      left:0;
      top:.64rem;
      width:9px;
      height:9px;
      border-radius:50%;
      background:linear-gradient(145deg, var(--primary), var(--accent));
    }
    .cta-box{
      padding:22px;
      border-radius:26px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(217,230,247,.95);
      box-shadow:0 14px 30px rgba(27,58,101,.07);
    }
    .cta-box .box-title{
      margin:0;
      font-size:1.12rem;
      color:var(--text);
      font-weight:800;
    }
    .cta-box .box-desc{
      margin:10px 0 0;
      color:var(--muted);
      font-size:.94rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:18px;
    }
    .footer{
      margin-top:18px;
      padding:34px 0 40px;
    }
    .footer-shell{
      display:flex;
      justify-content:space-between;
      gap:24px;
      padding:28px;
      border-radius:30px;
      border:1px solid rgba(217,230,247,.92);
      background:rgba(255,255,255,.88);
      box-shadow:var(--shadow-sm);
    }
    .footer-brand{
      max-width:720px;
    }
    .footer-brand .brand{
      margin-bottom:14px;
    }
    .footer-brand p{
      margin:0;
      color:var(--muted);
      max-width:640px;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:16px;
    }
    .footer-links a{
      display:inline-flex;
      align-items:center;
      min-height:36px;
      padding:0 12px;
      border-radius:999px;
      background:rgba(47,109,246,.06);
      color:var(--primary);
      border:1px solid rgba(47,109,246,.10);
      font-weight:700;
    }
    .footer-links a:hover{
      background:rgba(47,109,246,.10);
      border-color:rgba(47,109,246,.18);
      transform:translateY(-1px);
    }
    .footer-meta{
      margin-top:14px;
      color:var(--soft);
      font-size:.92rem;
    }
    .footer-copy{
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      align-items:flex-end;
      gap:8px;
      color:var(--muted);
      font-weight:700;
      text-align:right;
      min-width:160px;
    }
    .menu-icon{
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid rgba(217,230,247,.95);
      background:rgba(255,255,255,.92);
      box-shadow:0 10px 22px rgba(27,58,101,.06);
      position:relative;
      cursor:pointer;
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
    }
    .menu-icon:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(47,109,246,.10);
      border-color:rgba(47,109,246,.16);
    }
    .menu-icon::after{
      content:"";
      position:absolute;
      left:11px;
      top:13px;
      width:22px;
      height:2px;
      background:var(--primary);
      box-shadow:0 7px 0 var(--primary), 0 14px 0 var(--primary);
      border-radius:99px;
    }
    .note-strip{
      margin-top:12px;
      padding:14px 16px;
      border-radius:18px;
      border:1px solid rgba(217,230,247,.95);
      background:rgba(255,255,255,.9);
      color:var(--muted);
      font-size:.92rem;
    }
    .divider{
      height:1px;
      margin:24px 0;
      background:linear-gradient(90deg, rgba(217,230,247,0), rgba(217,230,247,1), rgba(217,230,247,0));
    }
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    textarea,
    select{
      width:100%;
      min-height:48px;
      border-radius:16px;
      border:1px solid rgba(217,230,247,.95);
      background:#fff;
      color:var(--text);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
      transition:border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease), background-color .22s var(--ease);
    }
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="email"]:hover,
    textarea:hover,
    select:hover{
      border-color:rgba(47,109,246,.18);
    }
    input[type="text"]:focus,
    input[type="tel"]:focus,
    input[type="email"]:focus,
    textarea:focus,
    select:focus{
      border-color:rgba(47,109,246,.34);
      box-shadow:0 0 0 4px rgba(47,109,246,.10);
      background:#fff;
    }
    textarea{min-height:140px;resize:vertical}
    label{
      color:var(--text);
      font-weight:700;
      margin-bottom:8px;
      display:inline-block;
    }
    .form-note{
      color:var(--soft);
      font-size:.88rem;
      margin-top:8px;
    }
    @media screen and (max-width: 63.9375em){
      .title-bar{display:flex}
      .top-bar{
        padding:0 18px 14px;
      }
      .top-bar .top-bar-right{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
        padding:10px 0 4px;
      }
      .top-bar .brand{display:none}
      .main-menu{
        width:100%;
        gap:6px;
      }
      .main-menu > li{
        width:100%;
      }
      .main-menu > li > a{
        width:100%;
        justify-content:flex-start;
        padding:12px 14px;
      }
      .lang-switch{align-self:flex-start}
      .hero-grid{padding:28px}
      .hero-copy{padding-right:0}
      .stats-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
      .service-matrix,
      .compare-shell,
      .cta-grid{
        grid-template-columns:1fr;
      }
      .result-strip{grid-template-columns:1fr}
      .related-grid{grid-template-columns:1fr}
      .footer-shell{
        flex-direction:column;
      }
      .footer-copy{
        align-items:flex-start;
        text-align:left;
      }
      .article-body,
      .cta-grid{
        padding:24px;
      }
    }
    @media screen and (max-width: 47.9375em){
      .page-main{padding-top:24px}
      .hero-title{font-size:clamp(2rem, 12vw, 3.2rem)}
      .hero-subtitle{font-size:1rem}
      .hero-actions{width:100%}
      .hero-actions .button{width:100%;justify-content:center}
      .stats-grid{grid-template-columns:1fr}
      .panel-foot{grid-template-columns:1fr}
      .section-pad{padding:52px 0}
      .section-hd{
        flex-direction:column;
        align-items:flex-start;
      }
      .feature-head{
        flex-direction:row;
      }
      .article-utility{
        flex-direction:column;
        align-items:flex-start;
      }
      .cms-article{
        font-size:1rem;
      }
      .cms-article h2{font-size:1.42rem}
      .cms-article h3{font-size:1.18rem}
      .accordion-title{
        padding-right:48px;
      }
    }
    @media screen and (max-width: 32.5em){
      .grid-container{
        padding-left:14px;
        padding-right:14px;
      }
      .hero-grid,
      .article-body,
      .cta-grid,
      .footer-shell{
        padding:18px;
      }
      .hero-shell,
      .article-shell,
      .cta-shell{
        border-radius:24px;
      }
      .hero-panel{
        padding:18px;
      }
      .meta-chip,
      .detail-chip{
        width:100%;
        justify-content:flex-start;
      }
      .footer-links{
        gap:8px;
      }
      .footer-links a{
        width:100%;
        justify-content:center;
      }
    }