/* roulang page: index */
:root{
  --bg:#f7f5ef;
  --bg-2:#eef7f3;
  --surface:#fffdf8;
  --surface-2:#ffffff;
  --primary:#67b7a1;
  --primary-2:#3d8d7c;
  --primary-3:#245f54;
  --accent:#f4b36a;
  --accent-2:#ffe2bd;
  --ink:#1f2a2e;
  --muted:#6c7a76;
  --line:#e7dfd2;
  --soft-line:#f0e8db;
  --shadow:0 18px 40px rgba(26,41,37,.08);
  --shadow-2:0 10px 24px rgba(26,41,37,.08);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:12px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:56px;
  --space-10:72px;
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(103,183,161,.13), transparent 26%),
    radial-gradient(circle at 88% 16%, rgba(244,179,106,.16), transparent 24%),
    radial-gradient(circle at 50% 92%, rgba(61,141,124,.08), transparent 22%),
    linear-gradient(180deg, #faf8f2 0%, var(--bg) 100%);
  line-height:1.75;
  overflow-x:hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:auto;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  filter:blur(10px);
  opacity:.28;
}

body::before{
  width:240px;
  height:240px;
  right:-90px;
  top:180px;
  background:rgba(103,183,161,.18);
}

body::after{
  width:180px;
  height:180px;
  left:-70px;
  bottom:120px;
  background:rgba(244,179,106,.16);
}

a{
  color:inherit;
  text-decoration:none;
}

a:hover{color:inherit}

img{
  max-width:100%;
  display:block;
}

button,
input,
select,
textarea{
  font:inherit;
}

::selection{
  background:rgba(103,183,161,.22);
  color:var(--ink);
}

.container{
  position:relative;
  z-index:1;
}

.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  backdrop-filter:saturate(180%) blur(16px);
  background:rgba(247,245,239,.78);
  border-bottom:1px solid rgba(231,223,210,.86);
  box-shadow:0 10px 24px rgba(26,41,37,.04);
}

.nav-shell{
  padding:14px 0 12px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:220px;
  flex-shrink:0;
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  letter-spacing:.5px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 52%, var(--accent) 100%);
  box-shadow:0 12px 22px rgba(103,183,161,.25);
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.brand-text strong{
  font-size:1.02rem;
  letter-spacing:.2px;
}

.brand-text span{
  margin-top:4px;
  font-size:.8rem;
  color:var(--muted);
}

.chip-nav{
  display:flex;
  gap:10px;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  white-space:nowrap;
  padding:4px 2px 6px;
  margin-left:auto;
}

.chip-nav::-webkit-scrollbar{display:none}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(231,223,210,.96);
  background:rgba(255,255,255,.82);
  color:var(--ink);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.1px;
  box-shadow:0 8px 18px rgba(26,41,37,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.chip:hover,
.chip:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(103,183,161,.55);
  box-shadow:0 12px 24px rgba(26,41,37,.08);
  color:var(--primary-3);
}

.chip:active{
  transform:translateY(0);
}

.chip.active{
  color:#fff;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  border-color:transparent;
  box-shadow:0 14px 28px rgba(103,183,161,.26);
}

.hero-section{
  padding:34px 0 10px;
}

.hero-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(244,179,106,.18), transparent 27%),
    radial-gradient(circle at 20% 15%, rgba(103,183,161,.14), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,253,248,.98));
  border:1px solid rgba(231,223,210,.92);
  border-radius:32px;
  box-shadow:var(--shadow);
  padding:34px;
}

.hero-card::before{
  content:"";
  position:absolute;
  inset:auto auto 22px 22px;
  width:128px;
  height:128px;
  background:
    linear-gradient(135deg, rgba(103,183,161,.08) 25%, transparent 25%) 0 0/18px 18px,
    linear-gradient(135deg, transparent 75%, rgba(244,179,106,.08) 75%) 0 0/18px 18px;
  border-radius:28px;
  opacity:.9;
}

.hero-badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.badge-soft,
.mini-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:7px 12px;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.1px;
  border:1px solid rgba(103,183,161,.18);
  background:rgba(103,183,161,.10);
  color:var(--primary-3);
}

.badge-accent{
  border-color:rgba(244,179,106,.22);
  background:rgba(244,179,106,.14);
  color:#8d530b;
}

.hero-title{
  margin:0;
  font-size:clamp(2.1rem, 4.3vw, 4.2rem);
  line-height:1.08;
  letter-spacing:-.8px;
  font-weight:800;
}

.hero-lead{
  margin:18px 0 0;
  max-width:680px;
  font-size:1.06rem;
  color:var(--muted);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.btn{
  border-radius:999px;
  font-weight:700;
  padding:.86rem 1.3rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:active{
  transform:translateY(0);
}

.btn:focus-visible,
.chip:focus-visible,
.form-control:focus-visible{
  outline:none;
  box-shadow:0 0 0 .25rem rgba(103,183,161,.18), 0 0 0 .45rem rgba(103,183,161,.08);
}

.btn-primary{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  border:none;
  box-shadow:0 14px 24px rgba(103,183,161,.24);
}

.btn-primary:hover,
.btn-primary:focus{
  background:linear-gradient(135deg, var(--primary-2) 0%, var(--primary-3) 100%);
  box-shadow:0 18px 28px rgba(61,141,124,.28);
}

.btn-outline-primary{
  color:var(--primary-3);
  border:1px solid rgba(103,183,161,.38);
  background:rgba(255,255,255,.75);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background:rgba(103,183,161,.10);
  border-color:rgba(103,183,161,.6);
  color:var(--primary-3);
}

.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.point-chip{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(231,223,210,.96);
  color:var(--muted);
  font-size:.88rem;
  font-weight:600;
}

.hero-panel{
  position:relative;
  z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,247,243,.88));
  border:1px solid rgba(231,223,210,.94);
  border-radius:28px;
  padding:20px;
  box-shadow:var(--shadow-2);
}

.panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.panel-header .label{
  font-size:.88rem;
  color:var(--muted);
  font-weight:600;
}

.panel-header .value{
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-.2px;
}

.panel-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.stat-box{
  background:var(--surface-2);
  border:1px solid rgba(231,223,210,.92);
  border-radius:20px;
  padding:16px;
  min-height:104px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 8px 18px rgba(26,41,37,.04);
}

.stat-box em{
  font-style:normal;
  font-size:1.8rem;
  line-height:1;
  font-weight:800;
  color:var(--primary-3);
}

.stat-box span{
  font-size:.92rem;
  color:var(--muted);
  margin-top:10px;
}

.trend-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}

.trend-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  font-size:.9rem;
  color:var(--muted);
}

.trend-row strong{
  color:var(--ink);
  font-weight:700;
}

.track{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(231,223,210,.74);
}

.track > span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  box-shadow:0 4px 10px rgba(103,183,161,.18);
}

.section-pad{
  padding:78px 0;
}

.section-soft{
  background:linear-gradient(180deg, rgba(239,247,243,.58), rgba(255,255,255,.12));
}

.section-alt{
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.02));
}

.section-head{
  max-width:760px;
  margin-bottom:28px;
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(244,179,106,.14);
  color:#8d530b;
  border:1px solid rgba(244,179,106,.2);
  font-size:.86rem;
  font-weight:700;
}

.section-title{
  margin:0;
  font-size:clamp(1.5rem, 2.8vw, 2.4rem);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.4px;
}

.section-desc{
  margin:12px 0 0;
  color:var(--muted);
  font-size:1rem;
}

.story-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:stretch;
}

.story-card,
.soft-card,
.feature-card,
.quote-card,
.compare-card,
.news-aside,
.cta-card{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(231,223,210,.95);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-2);
}

.story-card{
  padding:28px;
}

.story-card p{
  margin-bottom:0;
  color:var(--muted);
  font-size:1.02rem;
}

.story-points{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:22px;
}

.story-point{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(247,245,239,.85), rgba(255,255,255,.8));
  border:1px solid rgba(231,223,210,.9);
}

.story-point strong{
  display:block;
  font-size:1rem;
  margin-bottom:6px;
  font-weight:800;
}

.story-point span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.6;
}

.story-side{
  display:grid;
  gap:12px;
}

.story-mini{
  padding:18px;
  border-radius:22px;
  background:
    radial-gradient(circle at top right, rgba(103,183,161,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(239,247,243,.92));
  border:1px solid rgba(231,223,210,.92);
}

.story-mini h3{
  font-size:1.02rem;
  margin:0 0 8px;
  font-weight:800;
}

.story-mini p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.metric-card{
  padding:22px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,249,244,.88));
  border:1px solid rgba(231,223,210,.96);
  box-shadow:var(--shadow-2);
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.metric-card::after{
  content:"";
  position:absolute;
  inset:auto -8px -18px auto;
  width:86px;
  height:86px;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(103,183,161,.10), rgba(244,179,106,.08));
  transform:rotate(18deg);
}

.metric-card:hover{
  transform:translateY(-2px);
  border-color:rgba(103,183,161,.42);
  box-shadow:0 18px 34px rgba(26,41,37,.10);
}

.metric-num{
  font-size:2.05rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.8px;
  color:var(--primary-3);
}

.metric-label{
  margin-top:12px;
  font-size:1rem;
  font-weight:700;
}

.metric-note{
  margin-top:6px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
}

.matrix-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.matrix-card{
  padding:22px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,245,239,.86));
  border:1px solid rgba(231,223,210,.96);
  box-shadow:var(--shadow-2);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.matrix-card:hover{
  transform:translateY(-2px);
  border-color:rgba(244,179,106,.32);
  box-shadow:0 18px 32px rgba(26,41,37,.10);
}

.matrix-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.matrix-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  box-shadow:0 14px 20px rgba(103,183,161,.18);
}

.matrix-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(103,183,161,.10);
  color:var(--primary-3);
  font-size:.82rem;
  font-weight:700;
}

.matrix-card h3{
  margin:16px 0 8px;
  font-size:1.08rem;
  font-weight:800;
}

.matrix-card p{
  margin:0;
  color:var(--muted);
  font-size:.93rem;
  line-height:1.7;
}

.matrix-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.meta-chip{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 10px;
  font-size:.82rem;
  font-weight:700;
  color:var(--muted);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(231,223,210,.95);
}

.compare-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.compare-card{
  padding:24px;
}

.compare-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.compare-head h3{
  margin:0;
  font-size:1.08rem;
  font-weight:800;
}

.compare-flag{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(244,179,106,.16);
  color:#8d530b;
  border:1px solid rgba(244,179,106,.2);
  font-size:.82rem;
  font-weight:700;
}

.compare-summary{
  margin:0 0 16px;
  color:var(--muted);
  font-size:.94rem;
}

.score-list{
  display:grid;
  gap:12px;
}

.score-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  font-size:.9rem;
}

.score-row strong{
  min-width:78px;
  color:var(--ink);
  font-weight:700;
}

.score-track{
  height:12px;
  border-radius:999px;
  background:rgba(231,223,210,.85);
  overflow:hidden;
}

.score-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}

.score-row em{
  font-style:normal;
  color:var(--primary-3);
  font-weight:800;
  min-width:42px;
  text-align:right;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.feature-card{
  padding:22px;
}

.feature-card h3{
  margin:0 0 8px;
  font-size:1.06rem;
  font-weight:800;
}

.feature-card p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.7;
}

.feature-list{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--ink);
  font-size:.92rem;
}

.feature-list li::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:7px;
  flex:0 0 10px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
}

.quote-layout{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:16px;
  align-items:stretch;
}

.quote-card{
  padding:24px;
}

.quote-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
}

.rating-box{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  padding:18px 20px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(239,247,243,.92), rgba(255,255,255,.95));
  border:1px solid rgba(231,223,210,.94);
}

.rating-box strong{
  font-size:2rem;
  line-height:1;
  font-weight:800;
  color:var(--primary-3);
}

.rating-box span{
  color:var(--muted);
  font-size:.88rem;
}

.quote-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.bubble{
  padding:18px;
  border-radius:22px;
  background:
    radial-gradient(circle at top right, rgba(244,179,106,.14), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,245,239,.86));
  border:1px solid rgba(231,223,210,.94);
  min-height:126px;
  position:relative;
  box-shadow:0 10px 22px rgba(26,41,37,.05);
}

.bubble::before{
  content:"“”";
  position:absolute;
  right:14px;
  top:12px;
  font-size:1.5rem;
  color:rgba(103,183,161,.34);
  font-weight:800;
}

.bubble strong{
  display:block;
  margin-bottom:8px;
  font-size:.95rem;
  font-weight:800;
}

.bubble p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.75;
}

.news-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(300px, .75fr);
  gap:18px;
  align-items:start;
}

.news-list{
  display:grid;
  gap:14px;
}

.news-item{
  display:block;
  padding:20px 20px 18px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,249,244,.88));
  border:1px solid rgba(231,223,210,.95);
  box-shadow:var(--shadow-2);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.news-item:hover{
  transform:translateY(-2px);
  border-color:rgba(103,183,161,.42);
  box-shadow:0 18px 34px rgba(26,41,37,.10);
}

.news-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.news-time{
  color:var(--muted);
  font-size:.84rem;
}

.news-item h3{
  margin:0;
  font-size:1.08rem;
  font-weight:800;
  line-height:1.42;
}

.news-item p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.75;
}

.news-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  color:var(--primary-3);
  font-size:.88rem;
  font-weight:700;
}

.news-aside{
  padding:20px;
  position:sticky;
  top:98px;
}

.aside-card + .aside-card{
  margin-top:14px;
}

.aside-card{
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(239,247,243,.82), rgba(255,255,255,.96));
  border:1px solid rgba(231,223,210,.94);
}

.aside-card h3{
  margin:0 0 10px;
  font-size:1rem;
  font-weight:800;
}

.aside-card p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.7;
}

.aside-list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.aside-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(231,223,210,.92);
  font-size:.9rem;
  color:var(--ink);
}

.aside-list em{
  font-style:normal;
  color:var(--muted);
}

.empty-state{
  padding:28px;
  text-align:center;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,247,243,.86));
  border:1px dashed rgba(103,183,161,.34);
  color:var(--muted);
  box-shadow:var(--shadow-2);
}

.accordion.custom-accordion{
  display:grid;
  gap:12px;
}

.custom-accordion .accordion-item{
  border:1px solid rgba(231,223,210,.95);
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow-2);
}

.custom-accordion .accordion-button{
  background:transparent;
  color:var(--ink);
  font-weight:700;
  padding:18px 20px;
  box-shadow:none;
}

.custom-accordion .accordion-button:not(.collapsed){
  background:rgba(239,247,243,.9);
  color:var(--primary-3);
}

.custom-accordion .accordion-button::after{
  background-size:1rem;
}

.custom-accordion .accordion-body{
  padding:0 20px 18px;
  color:var(--muted);
  line-height:1.8;
}

.cta-card{
  overflow:hidden;
  position:relative;
  padding:28px;
  background:
    radial-gradient(circle at 90% 10%, rgba(244,179,106,.16), transparent 22%),
    radial-gradient(circle at 8% 20%, rgba(103,183,161,.14), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,247,243,.90));
}

.cta-grid{
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:18px;
  align-items:center;
}

.cta-copy h2{
  margin:0;
  font-size:clamp(1.45rem, 2.6vw, 2.2rem);
  line-height:1.22;
  font-weight:800;
}

.cta-copy p{
  margin:12px 0 0;
  color:var(--muted);
  max-width:640px;
}

.cta-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.cta-form{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(231,223,210,.94);
  border-radius:24px;
  padding:20px;
  box-shadow:0 12px 24px rgba(26,41,37,.05);
}

.cta-form label{
  display:block;
  font-size:.9rem;
  font-weight:700;
  margin-bottom:10px;
}

.form-control{
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(231,223,210,.96);
  background:#fff;
  padding:14px 16px;
  box-shadow:none;
}

.form-control::placeholder{
  color:#9aa5a1;
}

.form-control:focus{
  border-color:rgba(103,183,161,.6);
  box-shadow:0 0 0 .25rem rgba(103,183,161,.12);
}

.form-hint{
  margin-top:10px;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.7;
}

.form-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.form-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(103,183,161,.10);
  color:var(--primary-3);
  border:1px solid rgba(103,183,161,.16);
  font-size:.82rem;
  font-weight:700;
}

.site-footer{
  margin-top:10px;
  padding:34px 0 28px;
  background:linear-gradient(180deg, rgba(40,58,54,.98), rgba(29,43,40,.98));
  color:rgba(255,255,255,.86);
}

.footer-shell{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:start;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-brand strong{
  font-size:1.05rem;
  color:#fff;
}

.footer-brand span{
  color:rgba(255,255,255,.72);
  line-height:1.75;
  max-width:580px;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.footer-links a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
}

.footer-note{
  margin-top:14px;
  color:rgba(255,255,255,.66);
  font-size:.9rem;
}

.footer-copy{
  margin-top:18px;
  font-size:.9rem;
  color:rgba(255,255,255,.62);
}

@media (max-width: 1199.98px){
  .metric-grid,
  .feature-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .footer-shell,
  .cta-grid,
  .news-layout,
  .quote-layout,
  .story-grid{
    grid-template-columns:1fr;
  }
  .news-aside{
    position:relative;
    top:auto;
  }
}

@media (max-width: 991.98px){
  .nav-shell{
    gap:14px;
  }
  .brand{
    min-width:auto;
  }
  .chip-nav{
    width:100%;
    margin-left:0;
  }
  .hero-card{
    padding:26px;
  }
  .panel-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .matrix-grid,
  .compare-grid,
  .quote-grid,
  .story-points{
    grid-template-columns:1fr;
  }
}

@media (max-width: 767.98px){
  .section-pad{
    padding:62px 0;
  }
  .hero-section{
    padding-top:22px;
  }
  .hero-card{
    border-radius:26px;
    padding:22px;
  }
  .hero-title{
    font-size:clamp(1.9rem, 9vw, 3rem);
  }
  .hero-lead{
    font-size:1rem;
  }
  .panel-header{
    flex-direction:column;
  }
  .metric-grid,
  .feature-grid{
    grid-template-columns:1fr;
  }
  .panel-grid{
    grid-template-columns:1fr;
  }
  .cta-form{
    padding:18px;
  }
  .custom-accordion .accordion-button{
    padding:16px;
  }
  .custom-accordion .accordion-body{
    padding:0 16px 16px;
  }
}

@media (max-width: 575.98px){
  .nav-shell{
    padding:12px 0 10px;
  }
  .brand-mark{
    width:38px;
    height:38px;
    border-radius:12px;
  }
  .brand-text strong{
    font-size:.98rem;
  }
  .brand-text span{
    font-size:.76rem;
  }
  .hero-card{
    padding:18px;
  }
  .hero-actions .btn{
    width:100%;
  }
  .point-chip,
  .mini-pill{
    font-size:.82rem;
  }
  .story-card,
  .matrix-card,
  .compare-card,
  .quote-card,
  .news-item,
  .aside-card,
  .cta-card{
    border-radius:22px;
  }
  .news-item{
    padding:18px;
  }
  .news-foot{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-links{
    gap:8px;
  }
}

/* roulang page: article */
:root{
      --bg:#f7f5ef;
      --bg-2:#eef7f3;
      --surface:#fffdf8;
      --surface-2:#ffffff;
      --primary:#67b7a1;
      --primary-2:#3d8d7c;
      --primary-3:#245f54;
      --accent:#f4b36a;
      --accent-2:#ffe2bd;
      --ink:#1f2a2e;
      --muted:#6c7a76;
      --line:#e7dfd2;
      --soft-line:#f0e8db;
      --shadow:0 18px 40px rgba(26,41,37,.08);
      --shadow-2:0 10px 24px rgba(26,41,37,.08);
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:16px;
      --radius-sm:12px;
      --space-1:4px;
      --space-2:8px;
      --space-3:12px;
      --space-4:16px;
      --space-5:20px;
      --space-6:24px;
      --space-7:32px;
      --space-8:40px;
      --space-9:56px;
      --space-10:72px;
    }
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 15% 10%, rgba(103,183,161,.13), transparent 26%),
        radial-gradient(circle at 88% 16%, rgba(244,179,106,.16), transparent 24%),
        radial-gradient(circle at 50% 92%, rgba(61,141,124,.08), transparent 22%),
        linear-gradient(180deg, #faf8f2 0%, var(--bg) 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body::before,
    body::after{
      content:"";
      position:fixed;
      inset:auto;
      z-index:-1;
      pointer-events:none;
      border-radius:50%;
      filter:blur(10px);
      opacity:.28;
    }
    body::before{
      width:240px;
      height:240px;
      right:-90px;
      top:180px;
      background:rgba(103,183,161,.18);
    }
    body::after{
      width:180px;
      height:180px;
      left:-70px;
      bottom:120px;
      background:rgba(244,179,106,.16);
    }
    a{
      color:inherit;
      text-decoration:none;
    }
    a:hover{color:inherit}
    img{
      max-width:100%;
      display:block;
    }
    button,
    input,
    select,
    textarea{
      font:inherit;
    }
    ::selection{
      background:rgba(103,183,161,.2);
      color:var(--ink);
    }
    .container{
      position:relative;
      z-index:1;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1030;
      backdrop-filter:saturate(180%) blur(16px);
      background:rgba(247,245,239,.78);
      border-bottom:1px solid rgba(231,223,210,.86);
      box-shadow:0 10px 24px rgba(26,41,37,.04);
    }
    .nav-shell{
      padding:14px 0 12px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:220px;
      flex-shrink:0;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:800;
      letter-spacing:.5px;
      background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 52%, var(--accent) 100%);
      box-shadow:0 12px 22px rgba(103,183,161,.25);
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.15;
    }
    .brand-text strong{
      font-size:1.02rem;
      letter-spacing:.2px;
    }
    .brand-text span{
      margin-top:4px;
      font-size:.8rem;
      color:var(--muted);
    }
    .chip-nav{
      display:flex;
      gap:10px;
      align-items:center;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      white-space:nowrap;
      padding:4px 2px 6px;
      margin-left:auto;
    }
    .chip-nav::-webkit-scrollbar{display:none}
    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:42px;
      padding:0 16px;
      border-radius:999px;
      border:1px solid rgba(231,223,210,.96);
      background:rgba(255,255,255,.82);
      color:var(--ink);
      font-size:.95rem;
      font-weight:600;
      letter-spacing:.1px;
      box-shadow:0 8px 18px rgba(26,41,37,.04);
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
    }
    .chip:hover,
    .chip:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(103,183,161,.55);
      box-shadow:0 12px 24px rgba(26,41,37,.08);
      color:var(--primary-3);
      outline:none;
    }
    .chip:active{
      transform:translateY(0);
    }
    .chip.active{
      color:#fff;
      background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
      border-color:transparent;
      box-shadow:0 14px 28px rgba(103,183,161,.26);
    }
    .page-wrap{
      padding:28px 0 52px;
    }
    .article-hero{
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at top right, rgba(244,179,106,.18), transparent 27%),
        radial-gradient(circle at 16% 18%, rgba(103,183,161,.14), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,253,248,.98));
      border:1px solid rgba(231,223,210,.92);
      border-radius:32px;
      box-shadow:var(--shadow);
      padding:30px;
      margin-bottom:24px;
    }
    .article-hero::before{
      content:"";
      position:absolute;
      inset:auto auto 22px 22px;
      width:120px;
      height:120px;
      background:
        linear-gradient(135deg, rgba(103,183,161,.08) 25%, transparent 25%) 0 0/18px 18px,
        linear-gradient(135deg, transparent 75%, rgba(244,179,106,.08) 75%) 0 0/18px 18px;
      border-radius:26px;
      opacity:.9;
      pointer-events:none;
    }
    .article-hero-top{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:18px;
    }
    .badge-soft,
    .mini-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:7px 12px;
      font-size:.88rem;
      font-weight:700;
      letter-spacing:.1px;
      border:1px solid rgba(103,183,161,.18);
      background:rgba(103,183,161,.10);
      color:var(--primary-3);
    }
    .badge-accent{
      border-color:rgba(244,179,106,.22);
      background:rgba(244,179,106,.14);
      color:#8d530b;
    }
    .article-title{
      margin:0;
      font-size:clamp(2.05rem, 3.5vw, 3.4rem);
      line-height:1.12;
      letter-spacing:-.8px;
      font-weight:800;
    }
    .article-lead{
      margin:16px 0 0;
      max-width:780px;
      font-size:1.06rem;
      color:var(--muted);
    }
    .article-meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:22px;
    }
    .stat-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:42px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(231,223,210,.92);
      background:rgba(255,255,255,.82);
      color:var(--ink);
      box-shadow:0 10px 18px rgba(26,41,37,.05);
      font-size:.92rem;
      font-weight:600;
    }
    .stat-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      box-shadow:0 0 0 5px rgba(103,183,161,.08);
      flex:0 0 auto;
    }
    .section-block{
      margin-top:24px;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
    }
    .section-title{
      margin:0;
      font-size:1.18rem;
      line-height:1.3;
      font-weight:800;
      letter-spacing:-.2px;
    }
    .section-note{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .article-grid{
      display:grid;
      grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);
      gap:24px;
      align-items:start;
    }
    .panel-card{
      background:rgba(255,253,248,.95);
      border:1px solid rgba(231,223,210,.92);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-2);
      overflow:hidden;
    }
    .panel-card-inner{
      padding:24px;
    }
    .article-content{
      font-size:1.03rem;
      line-height:1.88;
      color:var(--ink);
      word-break:break-word;
    }
    .article-content > *{
      margin-left:0;
      margin-right:0;
    }
    .article-content > * + *{
      margin-top:1rem;
    }
    .article-content h2,
    .article-content h3,
    .article-content h4{
      line-height:1.35;
      font-weight:800;
      letter-spacing:-.2px;
      margin-top:1.6rem;
      margin-bottom:.75rem;
    }
    .article-content h2{font-size:1.45rem}
    .article-content h3{font-size:1.2rem}
    .article-content h4{font-size:1.05rem}
    .article-content p{
      margin:0;
      color:var(--ink);
    }
    .article-content a{
      color:var(--primary-3);
      text-decoration:underline;
      text-underline-offset:2px;
    }
    .article-content a:hover{
      color:var(--primary-2);
    }
    .article-content ul,
    .article-content ol{
      padding-left:1.25rem;
      margin:0;
    }
    .article-content li + li{
      margin-top:.45rem;
    }
    .article-content blockquote{
      margin:1.35rem 0;
      padding:1rem 1.1rem;
      border-left:4px solid var(--primary);
      background:linear-gradient(180deg, rgba(103,183,161,.08), rgba(255,255,255,.95));
      border-radius:0 var(--radius-md) var(--radius-md) 0;
      color:var(--primary-3);
      box-shadow:inset 0 0 0 1px rgba(103,183,161,.08);
    }
    .article-content hr{
      border:0;
      border-top:1px solid var(--soft-line);
      margin:1.6rem 0;
    }
    .article-content img{
      border-radius:22px;
      box-shadow:0 16px 30px rgba(26,41,37,.08);
      border:1px solid rgba(231,223,210,.72);
      margin:1.25rem 0;
    }
    .article-content table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      margin:1.25rem 0;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
    }
    .article-content th,
    .article-content td{
      padding:.82rem .92rem;
      border-bottom:1px solid var(--soft-line);
      border-right:1px solid var(--soft-line);
      text-align:left;
      vertical-align:top;
    }
    .article-content th{
      background:rgba(103,183,161,.08);
      font-weight:700;
    }
    .article-content tr:last-child td{
      border-bottom:0;
    }
    .article-content td:last-child,
    .article-content th:last-child{
      border-right:0;
    }
    .article-content pre{
      margin:1.25rem 0;
      padding:1rem 1.1rem;
      background:#f4f8f6;
      border:1px solid var(--soft-line);
      border-radius:18px;
      overflow:auto;
      font-size:.92rem;
    }
    .article-content code{
      padding:.18rem .36rem;
      border-radius:8px;
      background:rgba(103,183,161,.09);
      color:var(--primary-3);
    }
    .side-stack{
      display:grid;
      gap:18px;
      position:sticky;
      top:96px;
    }
    .side-card{
      background:rgba(255,253,248,.95);
      border:1px solid rgba(231,223,210,.92);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-2);
      overflow:hidden;
    }
    .side-card-inner{
      padding:22px;
    }
    .side-title{
      margin:0 0 14px;
      font-weight:800;
      font-size:1.02rem;
      letter-spacing:-.1px;
    }
    .info-list{
      display:grid;
      gap:12px;
      margin:0;
    }
    .info-item{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      padding:12px 0;
      border-bottom:1px dashed rgba(231,223,210,.95);
    }
    .info-item:last-child{
      border-bottom:0;
      padding-bottom:0;
    }
    .info-label{
      color:var(--muted);
      font-size:.92rem;
      white-space:nowrap;
    }
    .info-value{
      text-align:right;
      font-weight:700;
      color:var(--ink);
      word-break:break-word;
    }
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }
    .tag-chip{
      display:inline-flex;
      align-items:center;
      min-height:36px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid rgba(103,183,161,.16);
      background:rgba(103,183,161,.08);
      color:var(--primary-3);
      font-size:.88rem;
      font-weight:600;
    }
    .side-actions{
      display:grid;
      gap:10px;
      margin-top:18px;
    }
    .btn-roulang{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:46px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid transparent;
      background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
      color:#fff;
      font-weight:700;
      box-shadow:0 14px 24px rgba(103,183,161,.24);
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    }
    .btn-roulang:hover,
    .btn-roulang:focus-visible{
      color:#fff;
      transform:translateY(-1px);
      box-shadow:0 18px 28px rgba(61,141,124,.28);
      outline:none;
    }
    .btn-roulang:active{
      transform:translateY(0);
    }
    .btn-roulang-outline{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:46px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid rgba(103,183,161,.35);
      background:rgba(255,255,255,.82);
      color:var(--primary-3);
      font-weight:700;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    }
    .btn-roulang-outline:hover,
    .btn-roulang-outline:focus-visible{
      color:var(--primary-3);
      transform:translateY(-1px);
      box-shadow:0 12px 24px rgba(26,41,37,.08);
      background:#fff;
      border-color:rgba(103,183,161,.56);
      outline:none;
    }
    .compare-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }
    .compare-card{
      position:relative;
      padding:20px;
      border-radius:24px;
      border:1px solid rgba(231,223,210,.92);
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,245,239,.95));
      box-shadow:var(--shadow-2);
      overflow:hidden;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .compare-card:hover{
      transform:translateY(-2px);
      box-shadow:0 16px 30px rgba(26,41,37,.08);
      border-color:rgba(103,183,161,.34);
    }
    .compare-top{
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:flex-start;
      margin-bottom:12px;
    }
    .compare-title{
      margin:0;
      font-size:1.02rem;
      font-weight:800;
    }
    .compare-badge{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(244,179,106,.16);
      color:#8d530b;
      font-size:.82rem;
      font-weight:700;
      white-space:nowrap;
    }
    .bar-row{
      display:grid;
      gap:10px;
    }
    .bar-item{
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:10px;
      font-size:.9rem;
      color:var(--muted);
    }
    .bar-track{
      height:10px;
      border-radius:999px;
      background:#f0ece4;
      overflow:hidden;
    }
    .bar-fill{
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    }
    .related-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }
    .mini-card{
      display:flex;
      flex-direction:column;
      gap:12px;
      padding:20px;
      border-radius:24px;
      background:rgba(255,253,248,.96);
      border:1px solid rgba(231,223,210,.92);
      box-shadow:var(--shadow-2);
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      min-height:100%;
    }
    .mini-card:hover{
      transform:translateY(-2px);
      box-shadow:0 16px 30px rgba(26,41,37,.08);
      border-color:rgba(103,183,161,.34);
    }
    .mini-card-title{
      margin:0;
      font-size:1rem;
      font-weight:800;
      line-height:1.35;
    }
    .mini-card-text{
      margin:0;
      color:var(--muted);
      font-size:.93rem;
      line-height:1.7;
    }
    .mini-card-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:auto;
    }
    .tiny-badge{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(103,183,161,.08);
      color:var(--primary-3);
      border:1px solid rgba(103,183,161,.14);
      font-size:.82rem;
      font-weight:700;
    }
    .faq-list{
      display:grid;
      gap:12px;
    }
    details.faq-item{
      background:rgba(255,253,248,.96);
      border:1px solid rgba(231,223,210,.92);
      border-radius:22px;
      box-shadow:var(--shadow-2);
      overflow:hidden;
    }
    details.faq-item[open]{
      border-color:rgba(103,183,161,.38);
    }
    .faq-summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:18px 20px;
      font-weight:800;
      color:var(--ink);
      outline:none;
    }
    .faq-summary::-webkit-details-marker{display:none}
    .faq-summary::after{
      content:"+";
      flex:0 0 auto;
      width:32px;
      height:32px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(103,183,161,.10);
      color:var(--primary-3);
      font-size:1.05rem;
      font-weight:800;
      transition:transform .2s ease, background .2s ease;
    }
    details[open] .faq-summary::after{
      content:"–";
      background:rgba(244,179,106,.16);
    }
    .faq-body{
      padding:0 20px 18px;
      color:var(--muted);
      line-height:1.82;
    }
    .cta-box{
      position:relative;
      overflow:hidden;
      border-radius:32px;
      border:1px solid rgba(231,223,210,.92);
      background:
        radial-gradient(circle at 20% 18%, rgba(103,183,161,.14), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(244,179,106,.18), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,245,239,.95));
      box-shadow:var(--shadow);
      padding:24px;
    }
    .cta-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:18px;
      align-items:center;
    }
    .cta-title{
      margin:0;
      font-size:1.36rem;
      line-height:1.35;
      font-weight:800;
      letter-spacing:-.2px;
    }
    .cta-text{
      margin:12px 0 0;
      color:var(--muted);
      max-width:720px;
    }
    .update-form{
      display:grid;
      gap:12px;
      margin-top:16px;
    }
    .form-row{
      display:flex;
      gap:10px;
      align-items:center;
    }
    .form-control,
    .form-select{
      min-height:50px;
      border-radius:16px;
      border:1px solid rgba(231,223,210,.95);
      background:rgba(255,255,255,.92);
      color:var(--ink);
      box-shadow:none;
      padding:.78rem 1rem;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .form-control::placeholder{
      color:#94a09c;
    }
    .form-control:focus,
    .form-select:focus{
      border-color:rgba(103,183,161,.62);
      box-shadow:0 0 0 .25rem rgba(103,183,161,.16);
      background:#fff;
    }
    .form-note{
      margin:0;
      font-size:.88rem;
      color:var(--muted);
    }
    .empty-state{
      margin:24px 0 0;
      padding:34px 24px;
      text-align:center;
      background:rgba(255,253,248,.96);
      border:1px solid rgba(231,223,210,.92);
      border-radius:32px;
      box-shadow:var(--shadow);
    }
    .empty-title{
      margin:0;
      font-size:1.5rem;
      font-weight:800;
      letter-spacing:-.2px;
    }
    .empty-text{
      margin:12px auto 0;
      max-width:520px;
      color:var(--muted);
    }
    .site-footer{
      margin-top:16px;
      padding:18px 0 32px;
    }
    .footer-shell{
      display:flex;
      justify-content:space-between;
      gap:24px;
      align-items:flex-start;
      padding:24px 0 4px;
      border-top:1px solid rgba(231,223,210,.86);
    }
    .footer-brand{
      max-width:760px;
    }
    .footer-brand strong{
      display:block;
      font-size:1.02rem;
      font-weight:800;
      margin-bottom:10px;
    }
    .footer-brand span{
      display:block;
      color:var(--muted);
      line-height:1.8;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px 14px;
      margin-top:14px;
    }
    .footer-links a{
      color:var(--primary-3);
      font-weight:700;
      font-size:.94rem;
    }
    .footer-links a:hover{
      color:var(--primary-2);
      text-decoration:underline;
      text-underline-offset:2px;
    }
    .footer-note{
      margin-top:12px;
      color:var(--muted);
      font-size:.92rem;
    }
    .footer-copy{
      color:var(--muted);
      font-size:.92rem;
      line-height:1.7;
    }
    .visually-divider{
      height:1px;
      background:linear-gradient(90deg, transparent 0%, rgba(231,223,210,.95) 20%, rgba(231,223,210,.95) 80%, transparent 100%);
      margin:24px 0;
    }
    .article-page-shell{
      padding-top:10px;
    }
    .prose-gap{
      margin-top:16px;
    }
    .small-link{
      color:var(--primary-3);
      font-weight:700;
      text-decoration:none;
    }
    .small-link:hover{
      color:var(--primary-2);
      text-decoration:underline;
      text-underline-offset:2px;
    }
    .focus-ring:focus-visible{
      outline:none;
      box-shadow:0 0 0 .25rem rgba(103,183,161,.16);
    }
    @media (max-width: 1199.98px){
      .article-grid{
        grid-template-columns:1.55fr .95fr;
      }
      .compare-grid,
      .related-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }
    @media (max-width: 991.98px){
      .brand{
        min-width:0;
      }
      .article-grid{
        grid-template-columns:1fr;
      }
      .side-stack{
        position:static;
      }
      .cta-grid{
        grid-template-columns:1fr;
      }
      .footer-shell{
        flex-direction:column;
      }
    }
    @media (max-width: 767.98px){
      .page-wrap{
        padding:18px 0 42px;
      }
      .article-hero{
        padding:22px 18px;
        border-radius:26px;
      }
      .panel-card-inner,
      .side-card-inner,
      .cta-box{
        padding:18px;
      }
      .article-title{
        font-size:clamp(1.8rem, 8vw, 2.5rem);
      }
      .compare-grid,
      .related-grid{
        grid-template-columns:1fr;
      }
      .chip{
        min-height:40px;
        padding:0 14px;
      }
      .nav-shell{
        padding:12px 0 10px;
      }
      .hero-lead,
      .article-lead{
        font-size:1rem;
      }
      .form-row{
        flex-direction:column;
        align-items:stretch;
      }
      .form-row .btn-roulang,
      .form-row .btn-roulang-outline{
        width:100%;
      }
      .faq-summary{
        padding:16px 16px;
      }
      .faq-body{
        padding:0 16px 16px;
      }
    }
    @media (max-width: 575.98px){
      .brand{
        gap:10px;
      }
      .brand-mark{
        width:38px;
        height:38px;
        border-radius:12px;
      }
      .brand-text strong{
        font-size:.96rem;
      }
      .brand-text span{
        font-size:.75rem;
      }
      .article-hero-top,
      .article-meta-row{
        gap:8px;
      }
      .stat-pill,
      .badge-soft,
      .badge-accent{
        min-height:36px;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .cta-title{
        font-size:1.2rem;
      }
    }

/* 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}