/* roulang page: index */
:root{
  --bg:#f4f7f5;
  --bg-soft:#eef4f1;
  --surface:#ffffff;
  --surface-2:#f8fbf9;
  --surface-3:#eaf2ee;
  --text:#17322d;
  --muted:#5f746f;
  --primary:#1ea78d;
  --primary-2:#11735f;
  --accent:#8e6bd6;
  --warm:#ffb36b;
  --line:#d7e3de;
  --shadow:0 18px 45px rgba(20, 48, 43, .10);
  --shadow-sm:0 10px 24px rgba(20, 48, 43, .08);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --header-h:84px;
}
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 10%, rgba(30,167,141,.10), transparent 26%),
    radial-gradient(circle at 88% 2%, rgba(142,107,214,.12), transparent 20%),
    linear-gradient(180deg, #fbfcfb 0%, var(--bg) 100%);
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  line-height:1.75;
  overflow-x:hidden;
}
::selection{background:rgba(30,167,141,.18); color:var(--text)}
a{color:inherit; text-decoration:none; transition:color .2s ease, opacity .2s ease, transform .2s ease}
a:hover{color:var(--primary)}
img{max-width:100%; height:auto; display:block}
button,input,textarea,select{font:inherit}
button{border:0; background:none}
p{margin-bottom:0}
ul{margin:0; padding:0; list-style:none}
small{font-size:.9rem}
.focus-ring:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(30,167,141,.25);
  outline-offset:3px;
  box-shadow:none !important;
}
.container-xl{
  max-width:1200px;
  padding-left:1rem;
  padding-right:1rem;
}
.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  backdrop-filter:blur(14px);
  background:rgba(247,249,247,.78);
  border-bottom:1px solid rgba(215,227,222,.75);
}
.navbar{
  min-height:var(--header-h);
  padding-top:.75rem;
  padding-bottom:.75rem;
}
.brand-wrap{
  display:flex;
  align-items:center;
  gap:.85rem;
  color:var(--text);
  font-weight:800;
  letter-spacing:.2px;
}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-grid;
  place-items:center;
  color:#fff;
  background:
    linear-gradient(145deg, var(--primary), #20c9a6);
  box-shadow:0 12px 22px rgba(30,167,141,.22);
  position:relative;
  flex:0 0 auto;
}
.brand-mark::after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.35);
}
.brand-text{
  line-height:1.1;
}
.brand-text strong{
  display:block;
  font-size:1.05rem;
}
.brand-text span{
  display:block;
  font-size:.75rem;
  font-weight:500;
  color:var(--muted);
  margin-top:.15rem;
}
.navbar-nav{
  gap:.45rem;
}
.navbar .nav-link{
  color:var(--muted);
  font-weight:600;
  padding:.55rem 1rem;
  border-radius:999px;
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color:var(--primary-2);
  background:rgba(30,167,141,.10);
}
.navbar-toggler{
  border:1px solid rgba(30,167,141,.22);
  border-radius:14px;
  padding:.55rem .72rem;
  color:var(--primary-2);
  background:rgba(255,255,255,.72);
}
.navbar-toggler:focus{
  box-shadow:none;
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-left:auto;
}
.btn-brand,
.btn-outline-brand,
.btn-soft{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:999px;
  padding:.85rem 1.25rem;
  font-weight:700;
  transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
  border:1px solid transparent;
  text-decoration:none;
}
.btn-brand{
  color:#fff;
  background:linear-gradient(145deg, var(--primary), #20c9a6);
  box-shadow:0 14px 26px rgba(30,167,141,.22);
}
.btn-brand:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 18px 32px rgba(30,167,141,.26);
}
.btn-outline-brand{
  color:var(--primary-2);
  background:rgba(255,255,255,.68);
  border-color:rgba(30,167,141,.25);
}
.btn-outline-brand:hover{
  color:var(--primary-2);
  transform:translateY(-1px);
  background:rgba(30,167,141,.08);
  border-color:rgba(30,167,141,.35);
}
.btn-soft{
  color:var(--primary-2);
  background:rgba(30,167,141,.10);
  border-color:rgba(30,167,141,.05);
}
.btn-soft:hover{
  color:var(--primary-2);
  transform:translateY(-1px);
  background:rgba(30,167,141,.15);
}
.navbar .btn-brand,
.navbar .btn-outline-brand{
  padding:.72rem 1.15rem;
}
.step-strip{
  border-top:1px solid rgba(215,227,222,.55);
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.06));
}
.step-scroll{
  display:flex;
  align-items:center;
  gap:.75rem;
  overflow-x:auto;
  padding:1rem 0 1.15rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.step-scroll::-webkit-scrollbar{display:none}
.step-chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.82rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(215,227,222,.92);
  color:var(--text);
  font-weight:700;
  box-shadow:0 8px 18px rgba(20,48,43,.04);
}
.step-chip span{
  width:1.75rem;
  height:1.75rem;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  color:var(--primary-2);
  background:rgba(30,167,141,.10);
  font-size:.8rem;
}
.step-chip:hover{
  color:var(--primary-2);
  transform:translateY(-1px);
  border-color:rgba(30,167,141,.28);
}
main{display:block}
.section-block{
  padding:clamp(72px, 8vw, 112px) 0;
}
.section-block.tight{
  padding:clamp(56px, 6vw, 84px) 0;
}
.section-heading{
  margin-bottom:1.6rem;
}
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.42rem .8rem;
  border-radius:999px;
  background:rgba(30,167,141,.10);
  color:var(--primary-2);
  font-size:.88rem;
  font-weight:700;
  margin-bottom:.85rem;
}
.section-heading h2{
  font-size:clamp(1.65rem, 2.3vw, 2.45rem);
  line-height:1.2;
  margin:0 0 .65rem;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.section-heading .lead{
  max-width:760px;
  color:var(--muted);
  font-size:1.03rem;
  line-height:1.9;
}
.card-shell{
  background:rgba(255,255,255,.90);
  border:1px solid rgba(215,227,222,.96);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
}
.hero{
  padding:clamp(46px, 5vw, 74px) 0 0;
}
.hero-copy{
  padding:clamp(8px, 1vw, 16px) 0 14px;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.48rem .82rem;
  border-radius:999px;
  background:rgba(30,167,141,.10);
  color:var(--primary-2);
  font-weight:700;
  margin-bottom:1rem;
}
.hero-eyebrow i{font-size:.95rem}
.hero h1{
  margin:0;
  font-size:clamp(2.3rem, 4.3vw, 4.65rem);
  line-height:1.05;
  letter-spacing:-.04em;
  text-wrap:balance;
}
.hero-text{
  margin-top:1rem;
  max-width:620px;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.95;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.85rem;
  margin-top:1.5rem;
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  color:var(--primary-2);
  font-weight:700;
  padding:.25rem .15rem;
}
.text-link:hover{color:var(--primary)}
.hero-kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
  margin-top:1.5rem;
  max-width:620px;
}
.kpi{
  padding:1rem 1rem .95rem;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(215,227,222,.9);
  box-shadow:0 8px 18px rgba(20,48,43,.04);
}
.kpi strong{
  display:block;
  font-size:1.28rem;
  line-height:1.2;
  color:var(--primary-2);
}
.kpi span{
  display:block;
  margin-top:.3rem;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.4;
}
.dp-cover{
  position:relative;
  min-height:560px;
  padding:1.25rem;
}
.dp-stage{
  position:relative;
  min-height:100%;
  border-radius:32px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 24%),
    linear-gradient(160deg, #0f8f77 0%, #163f39 58%, #243a53 100%);
  overflow:hidden;
  padding:1.1rem;
  box-shadow:0 26px 55px rgba(18, 39, 36, .18);
  isolation:isolate;
}
.dp-stage::before{
  content:"";
  position:absolute;
  inset:-30% -18% auto auto;
  width:260px;
  height:260px;
  background:radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 72%);
  border-radius:50%;
}
.dp-stage::after{
  content:"";
  position:absolute;
  inset:auto auto -24% -18%;
  width:320px;
  height:320px;
  background:radial-gradient(circle, rgba(142,107,214,.22) 0%, rgba(142,107,214,0) 68%);
  border-radius:50%;
}
.dp-badge{
  position:absolute;
  top:1.05rem;
  left:1.05rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:#dffaf2;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  padding:.52rem .82rem;
  border-radius:999px;
  font-weight:700;
  backdrop-filter:blur(10px);
}
.dp-badge .dot{
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:#7cf0cf;
  box-shadow:0 0 0 5px rgba(124,240,207,.12);
}
.dp-main{
  position:absolute;
  inset:4.6rem 1rem 1.15rem 1rem;
  z-index:1;
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:1rem;
}
.dp-card{
  border-radius:24px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);
  color:#ecfff8;
  box-shadow:0 18px 40px rgba(12,27,25,.16);
}
.dp-card.light{
  background:rgba(255,255,255,.92);
  color:var(--text);
  border-color:rgba(255,255,255,.18);
}
.dp-card.big{
  padding:1.1rem;
}
.dp-card.small{
  padding:1rem;
}
.dp-title{
  font-size:.94rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(236,255,248,.78);
}
.dp-card.light .dp-title{color:var(--muted); text-transform:none; letter-spacing:0}
.dp-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-top:.65rem;
}
.dp-head h3,
.dp-head h4{
  margin:0;
  font-size:1.1rem;
  line-height:1.35;
}
.dp-head p{
  margin-top:.45rem;
  color:rgba(236,255,248,.8);
  line-height:1.75;
  font-size:.96rem;
}
.dp-card.light .dp-head p{color:var(--muted)}
.dp-list{
  margin-top:1rem;
  display:grid;
  gap:.7rem;
}
.dp-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem .8rem;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}
.dp-card.light .dp-item{
  background:var(--surface-2);
  border-color:var(--line);
}
.dp-item strong{font-weight:800}
.dp-item span{color:rgba(236,255,248,.76)}
.dp-card.light .dp-item span{color:var(--muted)}
.dp-stack{
  display:grid;
  gap:1rem;
}
.dp-float{
  position:absolute;
  z-index:2;
  border-radius:22px;
  padding:.9rem 1rem;
  box-shadow:var(--shadow-sm);
}
.dp-float.one{
  right:.35rem;
  top:3.95rem;
  transform:translateY(-6px) translateX(10px);
  width:min(240px, 42%);
}
.dp-float.two{
  left:.35rem;
  bottom:1.05rem;
  transform:translateY(8px) translateX(-4px);
  width:min(260px, 46%);
}
.dp-float .mini{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.dp-float .mini .icon{
  width:2.5rem;
  height:2.5rem;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:var(--primary-2);
  background:rgba(30,167,141,.12);
}
.dp-float .mini strong{
  display:block;
  font-size:1.02rem;
}
.dp-float .mini span{
  display:block;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.45;
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}
.process-card{
  position:relative;
  padding:1.15rem;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.88);
  border:1px solid rgba(215,227,222,.92);
  box-shadow:0 12px 26px rgba(20,48,43,.05);
  overflow:hidden;
  min-height:180px;
}
.process-card::after{
  content:"";
  position:absolute;
  inset:auto -20px -20px auto;
  width:96px;
  height:96px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(30,167,141,.16), rgba(30,167,141,0) 70%);
}
.process-num{
  display:inline-grid;
  place-items:center;
  width:2.2rem;
  height:2.2rem;
  border-radius:999px;
  background:rgba(30,167,141,.10);
  color:var(--primary-2);
  font-weight:800;
  margin-bottom:.85rem;
}
.process-card h3{
  font-size:1.05rem;
  margin:0 0 .5rem;
}
.process-card p{
  color:var(--muted);
  line-height:1.8;
  font-size:.96rem;
}
.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.38rem .72rem;
  border-radius:999px;
  background:rgba(30,167,141,.10);
  color:var(--primary-2);
  font-weight:700;
  font-size:.82rem;
}
.issue-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:1rem;
}
.issue-card{
  grid-column:span 4;
  padding:1.2rem;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(215,227,222,.94);
  box-shadow:0 12px 25px rgba(20,48,43,.05);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.issue-card.featured{grid-column:span 5}
.issue-card.wide{grid-column:span 7}
.issue-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 32px rgba(20,48,43,.08);
  border-color:rgba(30,167,141,.20);
}
.issue-card h3{
  font-size:1.12rem;
  margin:0 0 .45rem;
}
.issue-card p{
  color:var(--muted);
  line-height:1.8;
}
.issue-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.9rem;
}
.issue-tags .tag{
  padding:.33rem .65rem;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.8rem;
}
.solution-layout{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:1rem;
  align-items:stretch;
}
.solution-main{
  padding:1.25rem;
  border-radius:var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(255,179,107,.20), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,249,.98));
  border:1px solid rgba(215,227,222,.96);
  box-shadow:var(--shadow);
}
.solution-main .top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}
.solution-main h3{
  font-size:1.35rem;
  margin:0;
}
.solution-main p{
  margin-top:.5rem;
  color:var(--muted);
  line-height:1.9;
}
.solution-flow{
  margin-top:1.2rem;
  display:grid;
  gap:.85rem;
}
.flow-row{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:.95rem 1rem;
  border-radius:18px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
}
.flow-step{
  width:2.1rem;
  height:2.1rem;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-weight:800;
  color:#fff;
  background:linear-gradient(145deg, var(--primary), #20c9a6);
  box-shadow:0 10px 18px rgba(30,167,141,.18);
}
.flow-row strong{
  display:block;
  margin-bottom:.2rem;
  font-size:1rem;
}
.flow-row span{
  color:var(--muted);
  line-height:1.7;
  font-size:.95rem;
}
.solution-side{
  display:grid;
  gap:1rem;
}
.mini-surface{
  padding:1.1rem;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.90);
  border:1px solid rgba(215,227,222,.94);
  box-shadow:0 12px 24px rgba(20,48,43,.05);
}
.mini-surface h4{
  font-size:1.03rem;
  margin:0 0 .55rem;
}
.mini-surface p{
  color:var(--muted);
  line-height:1.8;
  font-size:.95rem;
}
.list-check{
  margin-top:.85rem;
  display:grid;
  gap:.65rem;
}
.list-check li{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  color:var(--text);
}
.list-check i{
  margin-top:.26rem;
  color:var(--primary);
}
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem;
}
.plan-card{
  position:relative;
  padding:1.2rem;
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(215,227,222,.96);
  box-shadow:0 12px 26px rgba(20,48,43,.05);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.plan-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(20,48,43,.09);
}
.plan-card.recommended{
  border-color:rgba(30,167,141,.34);
  box-shadow:0 18px 40px rgba(30,167,141,.10);
}
.plan-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.32rem .7rem;
  border-radius:999px;
  background:rgba(142,107,214,.12);
  color:#664cb0;
  font-size:.82rem;
  font-weight:700;
}
.plan-card .price{
  display:flex;
  align-items:baseline;
  gap:.35rem;
  margin-top:.9rem;
}
.plan-card .price strong{
  font-size:2rem;
  line-height:1;
}
.plan-card .price span{
  color:var(--muted);
}
.plan-card h3{
  margin:.9rem 0 .45rem;
  font-size:1.18rem;
}
.plan-card p{
  color:var(--muted);
  line-height:1.8;
}
.plan-card .plan-list{
  margin:1rem 0 1.15rem;
  display:grid;
  gap:.6rem;
}
.plan-card .plan-list li{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  color:var(--text);
  line-height:1.6;
}
.plan-card .plan-list i{
  color:var(--primary);
  margin-top:.2rem;
}
.plan-card .btn{
  width:100%;
}
.results-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:1rem;
}
.metric-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem;
}
.metric-card{
  padding:1.1rem;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(215,227,222,.94);
  box-shadow:0 12px 24px rgba(20,48,43,.05);
}
.metric-card .num{
  display:block;
  font-size:2rem;
  line-height:1;
  font-weight:800;
  color:var(--primary-2);
}
.metric-card .label{
  display:block;
  margin-top:.48rem;
  font-weight:700;
}
.metric-card .desc{
  display:block;
  color:var(--muted);
  margin-top:.35rem;
  line-height:1.65;
  font-size:.92rem;
}
.compare-card,
.timeline-card{
  padding:1.2rem;
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(215,227,222,.96);
  box-shadow:0 12px 26px rgba(20,48,43,.05);
}
.compare-card h3,
.timeline-card h3{
  margin:0 0 .85rem;
  font-size:1.16rem;
}
.compare-rows{
  display:grid;
  gap:.95rem;
}
.compare-row{
  display:grid;
  grid-template-columns:110px 1fr 56px;
  gap:.7rem;
  align-items:center;
}
.compare-row .name{
  color:var(--muted);
  font-weight:700;
}
.compare-bar{
  position:relative;
  height:12px;
  border-radius:999px;
  background:var(--surface-3);
  overflow:hidden;
}
.compare-bar > span{
  position:absolute;
  inset:0 auto 0 0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--primary), #6fdbc3);
}
.compare-row em{
  font-style:normal;
  color:var(--primary-2);
  font-weight:800;
  text-align:right;
}
.timeline{
  margin-top:.6rem;
  display:grid;
  gap:.8rem;
}
.timeline-item{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:.8rem;
  align-items:flex-start;
}
.timeline-time{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.25rem;
  padding:.35rem .55rem;
  border-radius:999px;
  background:rgba(30,167,141,.10);
  color:var(--primary-2);
  font-weight:800;
  font-size:.88rem;
}
.timeline-content{
  padding-bottom:.7rem;
  border-bottom:1px dashed rgba(215,227,222,.95);
}
.timeline-content:last-child{
  border-bottom:0;
}
.timeline-content strong{
  display:block;
  margin-bottom:.18rem;
}
.timeline-content span{
  color:var(--muted);
  line-height:1.7;
  font-size:.94rem;
}
.voice-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem;
}
.voice-card{
  position:relative;
  padding:1.2rem;
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(215,227,222,.95);
  box-shadow:0 12px 26px rgba(20,48,43,.05);
}
.voice-card::before{
  content:"“";
  position:absolute;
  top:.5rem;
  right:1rem;
  font-size:4rem;
  line-height:1;
  color:rgba(30,167,141,.12);
  font-family:Georgia, serif;
}
.voice-head{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:1rem;
}
.voice-avatar{
  width:3rem;
  height:3rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  background:linear-gradient(145deg, var(--primary), #6fdbc3);
  box-shadow:0 10px 22px rgba(30,167,141,.18);
}
.voice-name{
  font-weight:800;
}
.voice-role{
  color:var(--muted);
  font-size:.9rem;
}
.voice-card p{
  color:var(--text);
  line-height:1.9;
}
.voice-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1rem;
  color:var(--muted);
  font-size:.88rem;
}
.stars{
  color:#ffb36b;
  letter-spacing:.12em;
}
.updates-layout{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:1rem;
}
.update-list{
  display:grid;
  gap:.9rem;
}
.update-item{
  display:block;
  padding:1.05rem 1.05rem 1rem;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(215,227,222,.95);
  box-shadow:0 10px 22px rgba(20,48,43,.05);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.update-item:hover{
  transform:translateY(-2px);
  border-color:rgba(30,167,141,.24);
  box-shadow:0 16px 30px rgba(20,48,43,.08);
}
.update-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.7rem;
}
.update-title{
  margin:0;
  font-size:1.08rem;
  line-height:1.45;
  font-weight:800;
  text-wrap:balance;
}
.update-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  color:var(--muted);
  font-size:.85rem;
}
.update-meta .pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.26rem .58rem;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.update-summary{
  color:var(--muted);
  line-height:1.8;
}
.update-side{
  display:grid;
  gap:1rem;
}
.side-card{
  padding:1.15rem;
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,251,249,.95));
  border:1px solid rgba(215,227,222,.95);
  box-shadow:0 12px 26px rgba(20,48,43,.05);
}
.side-card h3{
  font-size:1.12rem;
  margin:0 0 .7rem;
}
.side-card p{
  color:var(--muted);
  line-height:1.9;
}
.side-bullets{
  margin-top:1rem;
  display:grid;
  gap:.75rem;
}
.side-bullets li{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  color:var(--text);
  line-height:1.7;
}
.side-bullets i{
  margin-top:.22rem;
  color:var(--primary);
}
.empty-state{
  padding:1.5rem 1.15rem;
  border-radius:var(--radius-lg);
  border:1px dashed rgba(30,167,141,.30);
  background:rgba(255,255,255,.85);
  color:var(--muted);
  text-align:center;
}
.faq-accordion .accordion-item{
  border:1px solid rgba(215,227,222,.96);
  border-radius:18px !important;
  overflow:hidden;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 24px rgba(20,48,43,.04);
  margin-bottom:.85rem;
}
.faq-accordion .accordion-button{
  background:transparent;
  color:var(--text);
  font-weight:800;
  padding:1.05rem 1.15rem;
  box-shadow:none;
}
.faq-accordion .accordion-button:not(.collapsed){
  background:rgba(30,167,141,.08);
  color:var(--primary-2);
}
.faq-accordion .accordion-button::after{
  width:1rem;
  height:1rem;
  background-size:1rem 1rem;
}
.faq-accordion .accordion-body{
  padding:0 1.15rem 1.1rem;
  color:var(--muted);
  line-height:2;
}
.cta-panel{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:1.35rem;
  background:
    radial-gradient(circle at top right, rgba(255,179,107,.18), transparent 22%),
    linear-gradient(145deg, #123f39 0%, #163c56 100%);
  color:#eefdf7;
  box-shadow:0 24px 50px rgba(18,39,36,.16);
}
.cta-panel::after{
  content:"";
  position:absolute;
  inset:auto -8% -25% auto;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 68%);
}
.cta-panel .section-kicker{
  background:rgba(255,255,255,.10);
  color:#d7fff3;
}
.cta-panel h2{
  color:#fff;
}
.cta-panel .lead{
  color:rgba(238,253,247,.78);
}
.cta-form{
  position:relative;
  z-index:1;
  margin-top:1.2rem;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.9rem;
}
.form-control{
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10);
  color:#fff;
  padding:.82rem 1rem;
  box-shadow:none !important;
}
.form-control::placeholder{color:rgba(238,253,247,.65)}
.form-control:focus{
  border-color:rgba(124,240,207,.6);
  background:rgba(255,255,255,.13);
  color:#fff;
}
textarea.form-control{
  min-height:120px;
  resize:vertical;
}
.form-note{
  margin-top:.85rem;
  color:rgba(238,253,247,.78);
  line-height:1.85;
  font-size:.92rem;
}
.form-actions{
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.btn-light-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.88rem 1.25rem;
  border-radius:999px;
  font-weight:800;
  background:#fff;
  color:var(--primary-2);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
}
.btn-light-brand:hover{
  color:var(--primary-2);
  transform:translateY(-1px);
}
.form-hint{
  color:#d7fff3;
  font-size:.9rem;
}
.site-footer{
  padding:1.9rem 0 2rem;
  border-top:1px solid rgba(215,227,222,.82);
  background:rgba(255,255,255,.54);
}
.footer-top{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:1rem;
  align-items:start;
}
.footer-brand{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
}
.footer-brand .brand-mark{
  width:38px;
  height:38px;
  border-radius:12px;
}
.footer-text h2{
  font-size:1.05rem;
  margin:0 0 .35rem;
}
.footer-text p{
  color:var(--muted);
  line-height:1.85;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem .8rem;
  justify-content:flex-end;
}
.footer-links a{
  color:var(--muted);
  font-weight:700;
  padding:.25rem 0;
}
.footer-links a:hover{color:var(--primary-2)}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.1rem;
  padding-top:1rem;
  border-top:1px solid rgba(215,227,222,.8);
  color:var(--muted);
  font-size:.92rem;
}
.muted-note{color:var(--muted)}
.section-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(30,167,141,.24), transparent);
  margin-top:1rem;
}
@media (max-width: 1199.98px){
  .issue-card.featured,
  .issue-card.wide{grid-column:span 6}
  .dp-cover{min-height:520px}
  .hero h1{font-size:clamp(2.1rem, 4vw, 4rem)}
  .process-grid,
  .metric-grid,
  .voice-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .solution-layout,
  .results-grid,
  .updates-layout,
  .footer-top{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start}
}
@media (max-width: 991.98px){
  .navbar .navbar-collapse{
    padding:1rem 0 .35rem;
  }
  .nav-actions{
    margin-left:0;
    margin-top:.8rem;
  }
  .hero{
    padding-top:2rem;
  }
  .hero-kpis{grid-template-columns:1fr}
  .dp-cover{min-height:460px; padding:0}
  .dp-main{inset:4.2rem .75rem .9rem .75rem}
  .issue-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .issue-card,
  .issue-card.featured,
  .issue-card.wide{grid-column:span 1}
  .plan-grid,
  .form-grid{grid-template-columns:1fr}
  .compare-row{grid-template-columns:92px 1fr 46px}
}
@media (max-width: 767.98px){
  .section-block{padding:64px 0}
  .hero h1{font-size:clamp(2rem, 8vw, 3rem)}
  .hero-text{font-size:1rem}
  .hero-actions .btn-brand,
  .hero-actions .btn-outline-brand{
    width:100%;
  }
  .hero-actions .text-link{
    width:100%;
    justify-content:center;
  }
  .dp-main{
    grid-template-columns:1fr;
    inset:4rem .7rem .85rem .7rem;
  }
  .dp-float{
    position:static;
    transform:none;
    width:auto;
    margin-top:.8rem;
  }
  .dp-stage{
    min-height:auto;
    padding:1rem;
  }
  .dp-cover{min-height:auto}
  .dp-main{position:relative; inset:auto}
  .process-grid,
  .metric-grid,
  .voice-grid,
  .issue-grid{grid-template-columns:1fr}
  .compare-row{grid-template-columns:1fr}
  .compare-row em{text-align:left}
  .timeline-item{grid-template-columns:1fr}
  .timeline-time{justify-content:flex-start; width:max-content}
  .navbar-brand .brand-text span{display:none}
}
@media (max-width: 575.98px){
  .container-xl{padding-left:.9rem; padding-right:.9rem}
  .brand-wrap{gap:.7rem}
  .brand-mark{width:38px; height:38px; border-radius:12px}
  .navbar .nav-link{padding:.55rem .85rem}
  .btn-brand, .btn-outline-brand, .btn-soft, .btn-light-brand{width:100%}
  .section-heading h2{font-size:1.55rem}
  .cta-panel{padding:1.1rem}
  .footer-bottom{flex-direction:column; align-items:flex-start}
}

/* roulang page: article */
:root{
      --bg:#f4f7f5;
      --bg-soft:#eef4f1;
      --surface:#ffffff;
      --surface-2:#f8fbf9;
      --surface-3:#eaf2ee;
      --text:#17322d;
      --muted:#5f746f;
      --primary:#1ea78d;
      --primary-2:#11735f;
      --accent:#8e6bd6;
      --warm:#ffb36b;
      --line:#d7e3de;
      --shadow:0 18px 45px rgba(20, 48, 43, .10);
      --shadow-sm:0 10px 24px rgba(20, 48, 43, .08);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --header-h:84px;
    }
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 10%, rgba(30,167,141,.10), transparent 26%),
        radial-gradient(circle at 88% 2%, rgba(142,107,214,.12), transparent 20%),
        linear-gradient(180deg, #fbfcfb 0%, var(--bg) 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit; text-decoration:none; transition:color .2s ease, opacity .2s ease, transform .2s ease}
    a:hover{color:var(--primary)}
    img{max-width:100%; height:auto; display:block}
    button,input,textarea,select{font:inherit}
    button{border:0; background:none}
    .focus-ring:focus-visible,
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible{
      outline:3px solid rgba(30,167,141,.25);
      outline-offset:3px;
      box-shadow:none !important;
    }
    .container-xl{
      max-width:1200px;
      padding-left:1rem;
      padding-right:1rem;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1030;
      backdrop-filter:blur(14px);
      background:rgba(247,249,247,.78);
      border-bottom:1px solid rgba(215,227,222,.75);
    }
    .navbar{
      min-height:var(--header-h);
      padding-top:.75rem;
      padding-bottom:.75rem;
    }
    .brand-wrap{
      display:flex;
      align-items:center;
      gap:.85rem;
      color:var(--text);
      font-weight:800;
      letter-spacing:.2px;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      display:inline-grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(145deg, var(--primary), #20c9a6);
      box-shadow:0 12px 22px rgba(30,167,141,.22);
      position:relative;
      flex:0 0 auto;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:9px;
      border-radius:11px;
      border:1px solid rgba(255,255,255,.35);
    }
    .brand-text{line-height:1.1}
    .brand-text strong{
      display:block;
      font-size:1.05rem;
    }
    .brand-text span{
      display:block;
      font-size:.75rem;
      font-weight:500;
      color:var(--muted);
      margin-top:.15rem;
    }
    .navbar-nav{gap:.45rem}
    .navbar .nav-link{
      color:var(--muted);
      font-weight:600;
      padding:.55rem 1rem;
      border-radius:999px;
      transition:background-color .2s ease, color .2s ease, transform .2s ease;
    }
    .navbar .nav-link:hover,
    .navbar .nav-link.active{
      color:var(--primary-2);
      background:rgba(30,167,141,.10);
    }
    .navbar-toggler{
      border:1px solid rgba(30,167,141,.22);
      border-radius:14px;
      padding:.55rem .72rem;
      color:var(--primary-2);
      background:rgba(255,255,255,.72);
    }
    .navbar-toggler:focus{box-shadow:none}
    .nav-actions{
      display:flex;
      align-items:center;
      gap:.75rem;
      margin-left:auto;
    }
    .btn-brand,
    .btn-outline-brand,
    .btn-soft{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      border-radius:999px;
      padding:.85rem 1.25rem;
      font-weight:700;
      transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
      border:1px solid transparent;
      text-decoration:none;
      white-space:nowrap;
    }
    .btn-brand{
      color:#fff;
      background:linear-gradient(145deg, var(--primary), #20c9a6);
      box-shadow:0 14px 26px rgba(30,167,141,.22);
    }
    .btn-brand:hover{
      color:#fff;
      transform:translateY(-1px);
      box-shadow:0 18px 32px rgba(30,167,141,.26);
    }
    .btn-outline-brand{
      color:var(--primary-2);
      background:rgba(255,255,255,.68);
      border-color:rgba(30,167,141,.25);
    }
    .btn-outline-brand:hover{
      color:var(--primary-2);
      transform:translateY(-1px);
      background:rgba(30,167,141,.08);
      border-color:rgba(30,167,141,.35);
    }
    .btn-soft{
      color:var(--primary-2);
      background:rgba(30,167,141,.10);
      border-color:rgba(30,167,141,.05);
    }
    .btn-soft:hover{
      color:var(--primary-2);
      transform:translateY(-1px);
      background:rgba(30,167,141,.15);
    }
    .navbar .btn-brand,
    .navbar .btn-outline-brand{
      padding:.72rem 1.15rem;
    }
    .step-strip{
      border-top:1px solid rgba(215,227,222,.65);
      background:linear-gradient(180deg, rgba(248,251,249,.80), rgba(244,247,245,.85));
    }
    .step-scroll{
      display:flex;
      gap:.75rem;
      padding:.9rem 0;
      overflow-x:auto;
      scrollbar-width:none;
    }
    .step-scroll::-webkit-scrollbar{display:none}
    .step-chip{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      padding:.82rem 1rem;
      border-radius:999px;
      background:rgba(255,255,255,.82);
      border:1px solid rgba(215,227,222,.92);
      color:var(--text);
      font-weight:700;
      box-shadow:0 8px 18px rgba(20,48,43,.04);
    }
    .step-chip span{
      width:1.75rem;
      height:1.75rem;
      display:inline-grid;
      place-items:center;
      border-radius:999px;
      color:var(--primary-2);
      background:rgba(30,167,141,.10);
      font-size:.8rem;
    }
    .step-chip:hover{
      color:var(--primary-2);
      transform:translateY(-1px);
      border-color:rgba(30,167,141,.28);
    }
    .reading-progress{
      position:fixed;
      left:0;
      top:var(--header-h);
      z-index:1029;
      width:100%;
      height:3px;
      background:rgba(30,167,141,.10);
    }
    .reading-progress span{
      display:block;
      width:0%;
      height:100%;
      background:linear-gradient(90deg, var(--primary), var(--accent));
      box-shadow:0 0 0 1px rgba(255,255,255,.2) inset;
    }
    main{display:block}
    .section-block{
      padding:clamp(72px, 8vw, 112px) 0;
    }
    .section-block.tight{
      padding:clamp(56px, 6vw, 84px) 0;
    }
    .section-heading{
      margin-bottom:1.6rem;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.42rem .8rem;
      border-radius:999px;
      background:rgba(30,167,141,.10);
      color:var(--primary-2);
      font-size:.88rem;
      font-weight:700;
      margin-bottom:.85rem;
    }
    .section-heading h2{
      font-size:clamp(1.65rem, 2.3vw, 2.45rem);
      line-height:1.2;
      margin:0 0 .65rem;
      letter-spacing:-.02em;
      text-wrap:balance;
    }
    .section-heading .lead{
      max-width:760px;
      color:var(--muted);
      font-size:1.03rem;
      line-height:1.9;
      margin-bottom:0;
    }
    .card-shell{
      background:rgba(255,255,255,.90);
      border:1px solid rgba(215,227,222,.96);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-sm);
    }
    .badge-soft{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.42rem .75rem;
      border-radius:999px;
      background:rgba(30,167,141,.10);
      color:var(--primary-2);
      font-size:.84rem;
      font-weight:700;
      border:1px solid rgba(30,167,141,.08);
    }
    .flash-bar{
      padding:1rem 1.1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      border-radius:var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,251,249,.88)),
        radial-gradient(circle at top right, rgba(255,179,107,.15), transparent 28%);
    }
    .flash-copy p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
    }
    .flash-copy strong{color:var(--text)}
    .article-hero{
      padding:clamp(28px, 4vw, 54px) 0 0;
    }
    .article-head{
      min-height:100%;
      overflow:hidden;
      position:relative;
    }
    .article-head::after{
      content:"";
      position:absolute;
      inset:auto -10% -18% auto;
      width:240px;
      height:240px;
      background:radial-gradient(circle, rgba(30,167,141,.13), transparent 65%);
      pointer-events:none;
    }
    .article-title{
      margin:0;
      font-size:clamp(2rem, 4vw, 3.6rem);
      line-height:1.08;
      letter-spacing:-.04em;
      text-wrap:balance;
    }
    .article-lead{
      margin:1rem 0 0;
      color:var(--muted);
      font-size:1.08rem;
      line-height:1.95;
      max-width:760px;
    }
    .article-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      margin-top:1.35rem;
    }
    .meta-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.58rem .82rem;
      border-radius:999px;
      background:var(--surface-2);
      border:1px solid var(--line);
      color:var(--muted);
      font-weight:600;
      font-size:.92rem;
    }
    .feature-card{
      position:sticky;
      top:calc(var(--header-h) + 24px);
      overflow:hidden;
      height:100%;
    }
    .feature-card h2{
      margin:0;
      font-size:1.35rem;
      line-height:1.25;
      letter-spacing:-.02em;
    }
    .feature-stat{
      padding:1rem 1.1rem;
      border-radius:var(--radius-lg);
      background:
        linear-gradient(145deg, rgba(30,167,141,.12), rgba(142,107,214,.08)),
        #fff;
      border:1px solid rgba(30,167,141,.12);
      box-shadow:var(--shadow-sm);
      margin-bottom:1rem;
      font-weight:800;
      color:var(--primary-2);
      font-size:1.05rem;
    }
    .feature-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.8rem;
    }
    .feature-list li{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      padding:.88rem 1rem;
      border-radius:var(--radius-md);
      background:var(--surface-2);
      border:1px solid var(--line);
      color:var(--muted);
      font-size:.96rem;
    }
    .feature-list strong{
      color:var(--text);
      font-weight:700;
      white-space:nowrap;
    }
    .mini-note{
      margin-top:1rem;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.8;
    }
    .content-jump{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      margin-bottom:1.2rem;
    }
    .content-jump a{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.56rem .82rem;
      border-radius:999px;
      background:rgba(30,167,141,.08);
      border:1px solid rgba(30,167,141,.12);
      color:var(--primary-2);
      font-weight:700;
      font-size:.9rem;
    }
    .content-jump a:hover{
      background:rgba(30,167,141,.12);
      transform:translateY(-1px);
    }
    .article-body{
      overflow:hidden;
    }
    .article-content{
      font-size:1.04rem;
      line-height:1.95;
      color:var(--text);
      word-break:break-word;
    }
    .article-content > *:first-child{margin-top:0}
    .article-content > *:last-child{margin-bottom:0}
    .article-content h2,
    .article-content h3,
    .article-content h4{
      margin:1.8em 0 .75em;
      line-height:1.25;
      letter-spacing:-.02em;
      text-wrap:balance;
    }
    .article-content h2{font-size:1.55rem}
    .article-content h3{font-size:1.3rem}
    .article-content h4{font-size:1.12rem}
    .article-content p,
    .article-content ul,
    .article-content ol,
    .article-content blockquote,
    .article-content figure,
    .article-content table,
    .article-content pre{
      margin:0 0 1.15rem;
    }
    .article-content ul,
    .article-content ol{
      padding-left:1.35rem;
    }
    .article-content li{margin:.35rem 0}
    .article-content a{
      color:var(--primary-2);
      text-decoration:underline;
      text-decoration-thickness:1px;
      text-underline-offset:2px;
    }
    .article-content a:hover{color:var(--primary)}
    .article-content blockquote{
      padding:1rem 1.15rem;
      border-left:4px solid var(--primary);
      background:linear-gradient(90deg, rgba(30,167,141,.08), rgba(255,255,255,.92));
      border-radius:0 var(--radius-md) var(--radius-md) 0;
      color:var(--muted);
    }
    .article-content hr{
      border:0;
      height:1px;
      margin:1.6rem 0;
      background:linear-gradient(90deg, transparent, var(--line), transparent);
      opacity:1;
    }
    .article-content figure{
      border-radius:var(--radius-lg);
      overflow:hidden;
      background:var(--surface-2);
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
    }
    .article-content figcaption{
      padding:.75rem .95rem;
      color:var(--muted);
      font-size:.9rem;
      border-top:1px solid var(--line);
    }
    .article-content img{
      border-radius:0;
      box-shadow:none;
      max-width:100%;
      height:auto;
    }
    .article-content pre{
      padding:1rem 1.1rem;
      border-radius:var(--radius-md);
      background:#0f231f;
      color:#d8f5eb;
      overflow:auto;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .article-content code{
      color:#0e6f5a;
      background:rgba(30,167,141,.10);
      padding:.1rem .35rem;
      border-radius:8px;
    }
    .article-content table{
      width:100%;
      min-width:100%;
      border-collapse:separate;
      border-spacing:0;
      border:1px solid var(--line);
      border-radius:var(--radius-md);
      overflow:hidden;
      background:var(--surface);
      box-shadow:var(--shadow-sm);
    }
    .article-content th,
    .article-content td{
      padding:.9rem .95rem;
      border-bottom:1px solid var(--line);
      vertical-align:top;
      text-align:left;
    }
    .article-content th{
      background:var(--surface-2);
      font-weight:700;
      color:var(--text);
    }
    .article-content tr:last-child td{border-bottom:0}
    .sidebar-stack{
      display:grid;
      gap:1.25rem;
    }
    .info-card h2,
    .carousel-card h2,
    .faq-shell h2,
    .cta-panel h2{
      margin:0;
      font-size:1.32rem;
      line-height:1.25;
      letter-spacing:-.02em;
    }
    .param-list{
      display:grid;
      gap:.8rem;
      margin-top:1rem;
    }
    .param-item{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      padding:.88rem 1rem;
      border-radius:var(--radius-md);
      background:var(--surface-2);
      border:1px solid var(--line);
      color:var(--muted);
      font-size:.95rem;
    }
    .param-item strong{
      color:var(--text);
      font-weight:700;
      text-align:right;
    }
    .carousel-card .carousel-inner{
      border-radius:var(--radius-lg);
      overflow:hidden;
    }
    .carousel-card .carousel-item{
      min-height:232px;
    }
    .carousel-panel{
      min-height:232px;
      padding:1.1rem 1.05rem;
      border-radius:var(--radius-lg);
      background:
        radial-gradient(circle at 15% 0%, rgba(30,167,141,.12), transparent 30%),
        linear-gradient(180deg, rgba(248,251,249,.98), rgba(237,244,240,.9));
      border:1px solid rgba(30,167,141,.10);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:1rem;
    }
    .carousel-panel p{
      margin:0;
      color:var(--muted);
      line-height:1.9;
    }
    .carousel-panel .panel-title{
      margin:0;
      font-size:1.08rem;
      line-height:1.35;
    }
    .carousel-card .carousel-indicators{
      margin-bottom:-.25rem;
    }
    .carousel-card .carousel-indicators [data-bs-target]{
      width:8px;
      height:8px;
      border-radius:999px;
      background:rgba(30,167,141,.38);
      border:0;
      opacity:.5;
    }
    .carousel-card .carousel-indicators .active{
      opacity:1;
      background:var(--primary);
    }
    .carousel-card .carousel-control-prev,
    .carousel-card .carousel-control-next{
      width:44px;
      height:44px;
      top:auto;
      bottom:.85rem;
      opacity:1;
    }
    .carousel-card .carousel-control-prev-icon,
    .carousel-card .carousel-control-next-icon{
      width:1rem;
      height:1rem;
      border-radius:999px;
      background-color:rgba(23,50,45,.72);
      background-size:60% 60%;
      box-shadow:0 8px 18px rgba(20,48,43,.18);
    }
    .related-list{
      display:grid;
      gap:.8rem;
      margin-top:1rem;
    }
    .related-card{
      display:flex;
      gap:.9rem;
      align-items:flex-start;
      padding:.9rem 1rem;
      border-radius:var(--radius-md);
      background:var(--surface-2);
      border:1px solid var(--line);
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .related-card:hover{
      transform:translateY(-1px);
      box-shadow:var(--shadow-sm);
      border-color:rgba(30,167,141,.18);
    }
    .related-dot{
      width:2.55rem;
      height:2.55rem;
      border-radius:14px;
      display:inline-grid;
      place-items:center;
      flex:0 0 auto;
      color:#fff;
      background:linear-gradient(145deg, var(--primary), #21caa7);
      box-shadow:0 10px 18px rgba(30,167,141,.18);
    }
    .related-card h3{
      margin:0;
      font-size:1rem;
      line-height:1.45;
    }
    .related-card p{
      margin:.25rem 0 0;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.75;
    }
    .related-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-top:.55rem;
      color:var(--muted);
      font-size:.84rem;
    }
    .faq-shell .accordion{
      margin-top:1rem;
    }
    .faq-shell .accordion-item{
      background:transparent;
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      margin-bottom:.9rem;
      box-shadow:var(--shadow-sm);
    }
    .faq-shell .accordion-button{
      background:rgba(255,255,255,.92);
      font-weight:700;
      color:var(--text);
      box-shadow:none;
      padding:1rem 1.05rem;
    }
    .faq-shell .accordion-button:not(.collapsed){
      background:rgba(30,167,141,.08);
      color:var(--primary-2);
    }
    .faq-shell .accordion-button:focus{box-shadow:none}
    .faq-shell .accordion-body{
      background:rgba(248,251,249,.92);
      color:var(--muted);
      line-height:1.95;
      padding:1rem 1.05rem 1.15rem;
    }
    .cta-panel{
      overflow:hidden;
      position:relative;
      background:
        radial-gradient(circle at top right, rgba(142,107,214,.12), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,249,.92));
    }
    .cta-panel p{
      color:var(--muted);
      margin:1rem 0 0;
      line-height:1.9;
      max-width:720px;
    }
    .cta-actions{
      display:grid;
      gap:.85rem;
    }
    .site-footer{
      padding:clamp(26px, 4vw, 38px) 0 22px;
    }
    .footer-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1.5rem;
      padding:1.2rem 0 1.3rem;
      border-top:1px solid rgba(215,227,222,.78);
    }
    .footer-brand{
      display:flex;
      align-items:flex-start;
      gap:.9rem;
      max-width:560px;
    }
    .footer-text h2{
      margin:0;
      font-size:1.2rem;
      line-height:1.35;
      letter-spacing:-.02em;
    }
    .footer-text p{
      margin:.45rem 0 0;
      color:var(--muted);
      line-height:1.9;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:.55rem .75rem;
    }
    .footer-links a{
      padding:.56rem .8rem;
      border-radius:999px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(215,227,222,.96);
      color:var(--muted);
      font-weight:600;
    }
    .footer-links a:hover{
      color:var(--primary-2);
      border-color:rgba(30,167,141,.22);
      transform:translateY(-1px);
    }
    .footer-bottom{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      padding-top:1rem;
      border-top:1px solid rgba(215,227,222,.78);
      color:var(--muted);
      font-size:.92rem;
    }
    .muted-note{color:var(--muted)}
    .error-card{
      max-width:760px;
      margin:0 auto;
      padding:clamp(36px, 5vw, 60px);
      text-align:center;
    }
    .error-icon{
      width:72px;
      height:72px;
      border-radius:24px;
      display:grid;
      place-items:center;
      margin:0 auto 1rem;
      background:rgba(30,167,141,.10);
      color:var(--primary-2);
      font-size:1.7rem;
      box-shadow:var(--shadow-sm);
    }
    .error-card h1{
      margin:0;
      font-size:clamp(1.8rem, 3vw, 2.5rem);
      line-height:1.2;
    }
    .error-card p{
      margin:1rem auto 0;
      max-width:560px;
      color:var(--muted);
      line-height:1.9;
    }

    @media (max-width: 1199.98px){
      .feature-card{position:relative; top:auto}
    }
    @media (max-width: 991.98px){
      .nav-actions{
        margin-left:0;
        padding-top:1rem;
        flex-wrap:wrap;
      }
      .navbar-collapse{
        padding:1rem 0 .35rem;
      }
      .flash-bar{
        flex-direction:column;
        align-items:flex-start;
      }
      .footer-top{
        flex-direction:column;
      }
      .footer-links{
        justify-content:flex-start;
      }
    }
    @media (max-width: 767.98px){
      .section-block{padding:clamp(60px, 9vw, 86px) 0}
      .section-block.tight{padding:clamp(44px, 7vw, 70px) 0}
      .article-head,
      .feature-card,
      .article-body,
      .faq-shell,
      .cta-panel{
        border-radius:22px;
      }
      .article-title{font-size:clamp(1.8rem, 7vw, 2.7rem)}
      .article-lead{font-size:1.01rem}
      .flash-bar{padding:.95rem}
      .flash-bar .btn-brand,
      .flash-bar .btn-outline-brand{
        width:100%;
      }
      .cta-actions .btn{
        width:100%;
      }
      .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
      }
    }
    @media (max-width: 575.98px){
      .navbar .btn-brand,
      .navbar .btn-outline-brand,
      .btn-brand,
      .btn-outline-brand{
        width:100%;
        justify-content:center;
      }
      .nav-actions{
        width:100%;
      }
      .article-meta,
      .meta-pill,
      .content-jump{
        width:100%;
      }
      .content-jump a{
        flex:1 1 auto;
        justify-content:center;
      }
      .related-card{
        padding:.86rem .9rem;
      }
      .param-item{
        flex-direction:column;
        align-items:flex-start;
      }
      .param-item strong{
        text-align:left;
      }
    }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}