/*!
 * RingRing Language — Shared Stylesheet  (ringring.shared.css)
 * 适用页面：index.html / features.html
 * 包含内容：变量、Reset、布局、按钮、标签、动画、NAV、Drawer、Footer
 * 页面专属样式请保留在各自的 <style> 块中
 */

/* ══ ROOT VARIABLES ══ */
:root {
  --dark:         #0e1520;
  --dark2:        #131d2b;
  --navy:         #1a2a40;
  --blue:         #1e6fcc;
  --blue-hover:   #1a5fb8;
  --blue-light:   #4d9de0;
  --blue-glow:    rgba(30,111,204,.28);
  --orange:       #e8650a;
  --orange-hover: #d45a08;
  --orange-light: #f5893a;
  --orange-glow:  rgba(232,101,10,.28);
  --slate:        #8eacc8;
  --white:        #ffffff;
  --cream:        #f5f0e8;
  --text-muted:   rgba(255,255,255,.58);
  --radius:       1rem;
  --radius-lg:    1.5rem;
  --radius-sm:    .7rem;
  --shadow-card:  0 4px 24px rgba(0,0,0,.32);
  --shadow-deep:  0 16px 56px rgba(0,0,0,.5);
  --transition:   .28s cubic-bezier(.4,0,.2,1);
}

/* ══ RESET ══ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',
              'Hiragino Sans GB','WenQuanYi Micro Hei',sans-serif;
  background:var(--dark); color:var(--white); line-height:1.7; overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
strong { font-weight:700; }

/* ══ LAYOUT ══ */
.container { max-width:1120px; margin:0 auto; padding:0 1.5rem; }

/* ══ BUTTONS ══ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.9rem; border-radius:3rem;
  font-family:inherit; font-weight:800; font-size:.95rem;
  cursor:pointer; border:none; text-decoration:none; white-space:nowrap;
  transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn:hover { transform:translateY(-2px); }
.btn-app {
  background:linear-gradient(135deg,var(--blue),var(--blue-light)); color:var(--white);
  box-shadow:0 4px 20px var(--blue-glow);
}
.btn-app:hover {
  box-shadow:0 8px 28px rgba(30,111,204,.5);
  background:linear-gradient(135deg,var(--blue-hover),var(--blue));
}
.btn-wt {
  background:linear-gradient(135deg,var(--orange),var(--orange-light)); color:var(--white);
  box-shadow:0 4px 20px var(--orange-glow);
}
.btn-wt:hover {
  box-shadow:0 8px 28px rgba(232,101,10,.5);
  background:linear-gradient(135deg,var(--orange-hover),var(--orange));
}
.btn-ghost {
  background:transparent; border:1.5px solid rgba(255,255,255,.25); color:var(--white);
}
.btn-ghost:hover { border-color:var(--blue-light); background:rgba(30,111,204,.1); }

/* ══ TAGS ══ */
.tag {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .85rem; border-radius:2rem;
  font-size:.73rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(30,111,204,.18); color:var(--blue-light);
}
.tag-gold { background:rgba(232,101,10,.15); color:var(--orange-light); }

/* ══ REVEAL ANIMATION ══ */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:.85rem 0;
  /* 初始背景由 initNavScroll() 在页面加载后立即覆盖，此处为无 JS 的兜底值 */
  background:rgba(14,21,32,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(30,111,204,.15);
  transition:background var(--transition);
}
.nav-inner { display:flex; align-items:center; gap:1.5rem; }
.nav-logo { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.nav-logo img { width:36px; height:36px; border-radius:50%; box-shadow:0 0 0 2px rgba(30,111,204,.4); }
.nav-logo-text {
  font-family:'Playfair Display','ZCOOL XiaoWei',Georgia,serif;
  font-size:1.22rem; font-weight:700;
  color:var(--white); letter-spacing:.01em;
}
.nav-links { display:flex; gap:1.5rem; align-items:center; flex:1; }
.nav-links a {
  font-size:.875rem; font-weight:600; color:rgba(255,255,255,.72);
  transition:color var(--transition); white-space:nowrap;
}
.nav-links a:hover { color:var(--blue-light); }
.nav-links a.active { color:var(--blue-light); }
.nav-ctas { display:flex; gap:.75rem; align-items:center; flex-shrink:0; }
.nav-ctas .btn { padding:.52rem 1.2rem; font-size:.82rem; }
.nav-hamburger {
  display:none; background:none; border:none; cursor:pointer;
  color:var(--white); padding:.4rem; flex-shrink:0;
}
.nav-hamburger svg { display:block; }

/* ── Mobile Drawer ── */
.drawer-overlay {
  position:fixed; inset:0; z-index:199;
  background:rgba(0,0,0,.6); opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.drawer-overlay.open { opacity:1; pointer-events:all; }

.mobile-drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:200;
  width:min(300px,82vw); background:var(--dark2);
  border-left:1px solid rgba(30,111,204,.18);
  box-shadow:-20px 0 60px rgba(0,0,0,.5);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.mobile-drawer.open { transform:translateX(0); }

.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.3rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.drawer-logo { display:flex; align-items:center; gap:.6rem; }
.drawer-logo img { width:30px; height:30px; border-radius:50%; box-shadow:0 0 0 2px rgba(30,111,204,.35); }
.drawer-logo-name {
  font-family:'Playfair Display',Georgia,serif; font-size:1rem; font-weight:700;
}
.drawer-close {
  background:none; border:none; color:rgba(255,255,255,.45); font-size:1.15rem;
  cursor:pointer; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.drawer-close:hover { background:rgba(255,255,255,.08); color:var(--white); }

.drawer-nav { flex:1; padding:.8rem; display:flex; flex-direction:column; gap:.1rem; }
.drawer-link {
  display:flex; align-items:center; gap:.8rem; padding:.8rem 1rem;
  border-radius:.65rem; font-size:.93rem; font-weight:600;
  color:rgba(255,255,255,.72); transition:background .2s,color .2s;
}
.drawer-link:hover { background:rgba(30,111,204,.12); color:var(--blue-light); }
.drawer-link .dl-icon { font-size:1rem; width:22px; text-align:center; flex-shrink:0; }

.drawer-sep { height:1px; background:rgba(255,255,255,.07); margin:.5rem .8rem; }

.drawer-foot {
  padding:1rem 1.3rem 2rem;
  display:flex; flex-direction:column; gap:.7rem;
}
.drawer-foot .btn { width:100%; justify-content:center; font-size:.88rem; padding:.75rem 1.2rem; }
.drawer-note { text-align:center; font-size:.7rem; color:rgba(255,255,255,.28); margin-top:.2rem; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer {
  background:#08101a; padding:2.5rem 0;
  border-top:1px solid rgba(255,255,255,.05);
}
.footer-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:1.5rem;
}
.footer-logo { display:flex; align-items:center; gap:.6rem; }
.footer-logo img { width:32px; height:32px; border-radius:50%; opacity:.85; }
.footer-logo span {
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.05rem; font-weight:700; color:rgba(255,255,255,.7);
}
.footer-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-links a {
  font-size:.83rem; color:rgba(255,255,255,.4);
  transition:color var(--transition); font-weight:500;
}
.footer-links a:hover { color:var(--blue-light); }
.footer-copy { font-size:.78rem; color:rgba(255,255,255,.22); text-align:center; }

/* ══════════════════════════════════════
   For index.html
══════════════════════════════════════ */
/* ══ SECTION TYPOGRAPHY ══ */
.section-eyebrow { text-align:center; margin-bottom:1rem; }
.section-title {
  font-family:'Playfair Display','ZCOOL XiaoWei',Georgia,'PingFang SC','Hiragino Mincho ProN','Source Han Serif CN','NSimSun',serif;
  font-size:clamp(1.85rem,4vw,2.9rem); font-weight:900;
  text-align:center; line-height:1.18; margin-bottom:1rem;
}
.section-title em { font-style:italic; color:var(--orange-light); }
.section-sub { text-align:center; color:var(--text-muted); font-size:1.05rem; max-width:580px; margin:0 auto 3.5rem; line-height:1.8; }

/* ══ SECTION BACKGROUNDS ══ */
.sec-dark   { background:var(--dark);   padding:6rem 0; }
.sec-forest { background:var(--navy);   padding:6rem 0; }
.sec-dark2  { background:var(--dark2);  padding:6rem 0; }
.sec-green  { background:#162235;       padding:6rem 0; }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding:7rem 0 5rem;
  background:
    radial-gradient(ellipse 130% 90% at 70% -10%, rgba(30,111,204,.35) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 5% 100%, rgba(232,101,10,.12) 0%, transparent 60%),
    var(--dark);
}
.hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 25% 85%, rgba(30,111,204,.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(232,101,10,.07) 0%, transparent 45%);
}
.hero-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:3.5rem;
  align-items:center; position:relative; z-index:1;
}

/* Hero text */
.hero-eyebrow { margin-bottom:1.3rem; }
.hero-headline {
  font-family:'Playfair Display','ZCOOL XiaoWei',Georgia,'PingFang SC','Hiragino Mincho ProN','Source Han Serif CN','NSimSun',serif;
  font-size:clamp(2.4rem,5.2vw,4rem);
  font-weight:900; line-height:1.1; margin-bottom:1.5rem;
  letter-spacing:-.01em;
}
.hero-headline em { font-style:italic; color:var(--orange-light); }
.hero-headline .hi { color:var(--blue-light); }
.hero-story {
  font-size:1.1rem; color:rgba(255,255,255,.75); max-width:520px;
  margin-bottom:2rem; line-height:1.85;
}
.hero-actions { display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.hero-trust { display:flex; gap:1.8rem; flex-wrap:wrap; }
.trust-item {
  display:flex; align-items:center; gap:.45rem;
  font-size:.8rem; color:rgba(255,255,255,.48); font-weight:600;
}
.trust-dot { width:5px; height:5px; border-radius:50%; background:var(--blue-light); flex-shrink:0; }

/* Hero visual */
.hero-visual {
  position:relative; display:flex; justify-content:center; align-items:center;
  gap:1.5rem;
}
.device-phone {
  width:190px; flex-shrink:0;
  background:#1c1c1c; border-radius:2.2rem;
  padding:.7rem .5rem 1.2rem;
  box-shadow:var(--shadow-deep), 0 0 0 1px rgba(255,255,255,.07);
  position:relative; transform:rotate(-3deg);
  z-index:2;
}
.device-phone .phone-notch {
  width:70px; height:18px; background:#1c1c1c; border-radius:0 0 .9rem .9rem;
  margin:0 auto .4rem; position:relative; z-index:2;
}
.device-phone .phone-screen { border-radius:1.4rem; overflow:hidden; aspect-ratio:9/16; }
.device-desktop {
  flex:1; max-width:280px;
  background:#1e1e1e; border-radius:.6rem;
  box-shadow:var(--shadow-deep), 0 0 0 1px rgba(255,255,255,.07);
  overflow:hidden; transform:rotate(2deg);
  z-index:1;
}
.device-desktop .dt-bar {
  background:#2d2d2d; padding:.42rem .8rem;
  display:flex; align-items:center; gap:.5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.device-desktop .dt-title {
  font-size:.63rem; color:rgba(255,255,255,.4); font-weight:600;
  flex:1; text-align:center; padding-right:1rem;
}
.dt-win-btn {
  width:16px; height:16px; border-radius:2px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:.42rem; color:rgba(255,255,255,.35); flex-shrink:0;
}
.device-desktop .dt-screen { aspect-ratio:4/3; background:var(--dark); }

/* Screenshot placeholder */
.ss-ph {
  width:100%; height:100%;
  border:1.5px dashed rgba(30,111,204,.38);
  background:rgba(30,111,204,.04);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.ss-ph::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(30,111,204,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,111,204,.03) 1px, transparent 1px);
  background-size:18px 18px;
}
.ss-ph.gold-ph { border-color:rgba(232,101,10,.38); background:rgba(232,101,10,.04); }
.ss-ph.gold-ph::before {
  background-image:
    linear-gradient(rgba(232,101,10,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,101,10,.03) 1px, transparent 1px);
}
.ph-inner {
  text-align:center; padding:1rem; position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
}
.ph-ico { font-size:1.8rem; opacity:.35; }
.ph-label {
  font-size:.65rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--blue-light); opacity:.8;
}
.ss-ph.gold-ph .ph-label { color:var(--orange-light); }
.ph-context { font-size:.6rem; color:rgba(255,255,255,.3); }
.ph-ratio {
  font-size:.58rem; font-weight:800; color:rgba(255,255,255,.18);
  letter-spacing:.08em; background:rgba(255,255,255,.05);
  padding:.1rem .5rem; border-radius:2rem; margin-top:.15rem;
}

/* Glow effects */
.hero-glow-green {
  position:absolute; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(30,111,204,.22) 0%, transparent 70%);
  top:-40px; right:-60px; pointer-events:none; z-index:0;
}
.hero-glow-gold {
  position:absolute; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,101,10,.18) 0%, transparent 70%);
  bottom:20px; left:10px; pointer-events:none; z-index:0;
}

/* Floating badges */
.hero-badge {
  position:absolute; background:var(--dark2);
  border:1px solid rgba(82,183,136,.3); border-radius:.8rem;
  padding:.5rem .85rem; box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation:float-y 3.2s ease-in-out infinite;
  z-index:10;
}
.hero-badge.badge-b1 { top:8%; right:-8px; animation-delay:.4s; }
.hero-badge.badge-b2 { bottom:18%; left:-12px; animation-delay:1.8s; }
.hb-name { font-size:.7rem; font-weight:800; color:var(--lime); }
.hb-desc { font-size:.6rem; color:rgba(255,255,255,.45); }
@keyframes float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* ══════════════════════════════════════
   PAIN STRIP
══════════════════════════════════════ */
.pain-strip {
  background:var(--dark2);
  padding:1.3rem 0;
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.pain-items {
  display:flex; gap:2.5rem; align-items:center; flex-wrap:wrap; justify-content:center;
}
.pain-item {
  display:flex; align-items:center; gap:.5rem;
  font-size:.85rem; color:rgba(255,255,255,.45); font-weight:500;
  white-space:nowrap;
}
.pain-x { color:#ef4444; font-size:.95rem; font-weight:800; }

/* ══════════════════════════════════════
   PROBLEM SECTION
══════════════════════════════════════ */
.problem-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.problem-card {
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius); padding:1.8rem;
  transition:border-color var(--transition), transform var(--transition);
}
.problem-card:hover { border-color:rgba(239,68,68,.3); transform:translateY(-3px); }
.pc-emoji { font-size:2rem; margin-bottom:.9rem; }
.problem-card h3 { font-size:1.05rem; font-weight:800; margin-bottom:.6rem; }
.problem-card p { font-size:.88rem; color:rgba(255,255,255,.58); line-height:1.68; }

/* ══════════════════════════════════════
   SOLUTION INTRO
══════════════════════════════════════ */
.solution-inner { display:grid; grid-template-columns:auto 1fr; gap:4rem; align-items:center; }
.solution-logo-wrap { display:flex; justify-content:center; }
.solution-logo-ring {
  width:210px; height:210px; border-radius:50%;
  border:2px solid rgba(30,111,204,.45);
  box-shadow:0 0 0 14px rgba(30,111,204,.06), 0 0 60px rgba(30,111,204,.2);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--dark2); flex-shrink:0;
}
.solution-logo-ring img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.solution-text h2 {
  font-family:'Playfair Display','ZCOOL XiaoWei',Georgia,'PingFang SC','Hiragino Mincho ProN','Source Han Serif CN','NSimSun',serif;
  font-size:clamp(2rem,4vw,3rem); font-weight:900; line-height:1.18; margin-bottom:1.2rem;
}
.solution-text h2 em { font-style:italic; color:var(--orange-light); }
.solution-text p { color:rgba(255,255,255,.7); font-size:1rem; margin-bottom:1rem; line-height:1.85; }
.solution-checks { list-style:none; display:flex; flex-direction:column; gap:.65rem; margin:1.5rem 0 2rem; }
.solution-checks li { display:flex; align-items:flex-start; gap:.65rem; font-size:.95rem; color:rgba(255,255,255,.8); }
.sc-check { color:var(--blue-light); font-size:1rem; flex-shrink:0; margin-top:.1rem; }
.solution-actions { display:flex; gap:.9rem; flex-wrap:wrap; }

/* ══════════════════════════════════════
   PLATFORMS
══════════════════════════════════════ */
.platform-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2.5rem; }
.platform-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column;
}
.platform-card:hover { transform:translateY(-5px); box-shadow:0 20px 60px rgba(0,0,0,.35); }
.pc-app { border-color:rgba(30,111,204,.2); }
.pc-wt  { border-color:rgba(232,101,10,.2); background:rgba(232,101,10,.025); }
.pc-app:hover { border-color:rgba(30,111,204,.45); }
.pc-wt:hover  { border-color:rgba(232,101,10,.45); }

.pc-screenshot { width:100%; position:relative; background:var(--dark2); overflow:hidden; }
.pc-screenshot.phone-shot   { padding:1.5rem 30% .5rem; }
.pc-screenshot.desktop-shot { padding:.8rem; }
.pc-screenshot .ss-ph { border-radius:.7rem; }
.pc-screenshot.phone-shot   .ss-ph { aspect-ratio:9/16; }
.pc-screenshot.desktop-shot .ss-ph { aspect-ratio:4/3; }
.pc-screenshot-label {
  position:absolute; top:.65rem; left:.8rem;
  font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.18rem .6rem; border-radius:2rem; z-index:2;
}
.pc-screenshot-label.lbl-app { background:rgba(30,111,204,.25); color:var(--blue-light); }
.pc-screenshot-label.lbl-wt  { background:rgba(232,101,10,.25); color:var(--orange-light); }

.pc-body { padding:1.8rem; display:flex; flex-direction:column; flex:1; }
.pc-platform-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:.22rem .7rem; border-radius:2rem; margin-bottom:.9rem;
}
.badge-app { background:rgba(30,111,204,.18); color:var(--blue-light); }
.badge-wt  { background:rgba(232,101,10,.15); color:var(--orange-light); }
.pc-body h3 { font-size:1.25rem; font-weight:900; margin-bottom:.65rem; line-height:1.25; }
.pc-body > p { font-size:.92rem; color:rgba(255,255,255,.65); line-height:1.78; margin-bottom:1.2rem; }
.pc-features { list-style:none; display:flex; flex-direction:column; gap:.42rem; margin-bottom:1.8rem; flex:1; }
.pc-features li { font-size:.86rem; color:rgba(255,255,255,.65); display:flex; align-items:center; gap:.5rem; }
.pc-features li::before { content:'✦'; font-size:.65rem; flex-shrink:0; }
.pc-app .pc-features li::before { color:var(--blue-light); }
.pc-wt  .pc-features li::before { color:var(--orange-light); }
.pc-note { font-size:.73rem; color:rgba(255,255,255,.3); margin-top:.6rem; text-align:center; }

/* ══════════════════════════════════════
   FEATURES OVERVIEW SECTION
══════════════════════════════════════ */
.feat-divider {
  display:flex; align-items:center; gap:1rem;
  margin:2.5rem 0 1.5rem; color:rgba(255,255,255,.35);
  font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.feat-divider::before,.feat-divider::after {
  content:''; flex:1; height:1px; background:rgba(255,255,255,.08);
}
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.feat-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius); padding:1.7rem; position:relative; overflow:hidden;
  transition:transform var(--transition), border-color var(--transition);
}
.feat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2.5px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light)); opacity:0;
  transition:opacity var(--transition);
}
.feat-card:hover { transform:translateY(-4px); border-color:rgba(30,111,204,.3); }
.feat-card:hover::before { opacity:1; }
.feat-card.wt-feat { border-color:rgba(232,101,10,.18); }
.feat-card.wt-feat::before { background:linear-gradient(90deg,var(--orange),var(--orange-light)); }
.feat-card.wt-feat:hover { border-color:rgba(232,101,10,.45); }
.feat-ico {
  width:48px; height:48px; border-radius:.75rem;
  background:linear-gradient(135deg,rgba(14,40,90,.8),rgba(30,111,204,.4));
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:1rem;
}
.feat-ico.gold { background:linear-gradient(135deg,rgba(90,40,10,.7),rgba(232,101,10,.35)); }
.feat-plat {
  font-size:.66rem; font-weight:800; letter-spacing:.06em;
  padding:.1rem .55rem; border-radius:2rem; margin-bottom:.55rem; display:inline-block;
}
.feat-plat.fp-app { color:var(--blue-light); background:rgba(30,111,204,.15); }
.feat-plat.fp-wt  { color:var(--orange-light); background:rgba(232,101,10,.12); }
.feat-card h3 { font-size:1rem; font-weight:800; margin-bottom:.55rem; }
.feat-card p  { font-size:.86rem; color:rgba(255,255,255,.58); line-height:1.65; }

/* ══════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════ */
.steps-row { display:flex; position:relative; gap:0; }
.step-item { flex:1; text-align:center; padding:0 1.2rem 0; position:relative; }
.step-item:not(:last-child)::after {
  content:''; position:absolute; top:28px; right:0; width:50%; height:1px;
  background:linear-gradient(90deg,rgba(30,111,204,.3),transparent); transform:translateX(50%);
}
.step-num {
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  color:var(--white); font-family:'Playfair Display',Georgia,serif;
  font-size:1.6rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.1rem;
  box-shadow:0 0 0 8px rgba(30,111,204,.12);
}
.step-item h3 { font-size:1rem; font-weight:800; margin-bottom:.55rem; }
.step-item p  { font-size:.87rem; color:rgba(255,255,255,.58); line-height:1.65; }

/* ══════════════════════════════════════
   CONTENT LIBRARY
══════════════════════════════════════ */
.content-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.cat-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius); padding:1.5rem; text-align:center;
  transition:border-color var(--transition), transform var(--transition);
}
.cat-card:hover { border-color:rgba(30,111,204,.35); transform:translateY(-3px); }
.cat-icon  { font-size:2.2rem; margin-bottom:.8rem; }
.cat-name  { font-size:.95rem; font-weight:800; margin-bottom:.35rem; }
.cat-sub   { font-size:.78rem; color:rgba(255,255,255,.5); line-height:1.5; margin-bottom:.75rem; }
.cat-badge {
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.04em;
  padding:.18rem .65rem; border-radius:2rem;
}
.badge-live   { background:rgba(30,111,204,.22); color:var(--blue-light); }
.badge-active { background:rgba(232,101,10,.18); color:var(--orange-light); }
.badge-soon   { background:rgba(255,255,255,.07); color:rgba(255,255,255,.4); }

/* ══════════════════════════════════════
   STATS BAND
══════════════════════════════════════ */
.stats-band {
  background:linear-gradient(135deg,#0d2044,#162235);
  padding:3.5rem 0;
  border-top:1px solid rgba(30,111,204,.22);
  border-bottom:1px solid rgba(30,111,204,.22);
}
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat-item { text-align:center; }
.stat-num {
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2.2rem,4vw,3rem); font-weight:900; color:var(--orange-light);
  line-height:1; margin-bottom:.4rem;
}
.stat-label { font-size:.82rem; color:rgba(255,255,255,.7); font-weight:600; }

/* ══════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════ */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.testi-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:1.8rem;
  transition:border-color var(--transition), transform var(--transition);
}
.testi-card:hover { border-color:rgba(30,111,204,.28); transform:translateY(-3px); }
.testi-stars { color:var(--orange-light); font-size:1rem; margin-bottom:.9rem; letter-spacing:.05em; }
.testi-text { font-size:.91rem; color:rgba(255,255,255,.75); line-height:1.75; margin-bottom:1.2rem; }
.testi-author { display:flex; align-items:center; gap:.85rem; }
.testi-avatar {
  width:40px; height:40px; border-radius:50%;
  background:rgba(30,111,204,.2); border:1px solid rgba(30,111,204,.35);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
}
.testi-name { font-size:.88rem; font-weight:800; }
.testi-role { font-size:.75rem; color:rgba(255,255,255,.45); }

/* ══════════════════════════════════════
   PRICING
══════════════════════════════════════ */
.pricing-grid { display:grid; grid-template-columns:1fr 1.05fr 1fr; gap:1.5rem; align-items:start; }
.price-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-lg); padding:2rem;
  position:relative; transition:transform var(--transition), border-color var(--transition);
}
.price-card:hover { transform:translateY(-4px); }
.price-card.featured {
  background:rgba(14,40,90,.25);
  border-color:rgba(30,111,204,.45);
  box-shadow:0 0 0 4px rgba(30,111,204,.1), var(--shadow-card);
}
.price-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--blue); color:var(--white);
  font-size:.7rem; font-weight:900; letter-spacing:.04em;
  padding:.28rem .9rem; border-radius:2rem; white-space:nowrap;
}
.price-name { font-size:.9rem; font-weight:800; color:rgba(255,255,255,.6); margin-bottom:.9rem; }
.price-amount { display:flex; align-items:baseline; gap:.2rem; margin-bottom:.3rem; }
.price-currency { font-size:1.2rem; font-weight:800; color:rgba(255,255,255,.55); }
.price-num { font-family:'Playfair Display',Georgia,serif; font-size:3rem; font-weight:900; line-height:1; }
.price-period { font-size:.88rem; color:rgba(255,255,255,.45); margin-left:.1rem; }
.price-save { font-size:.78rem; color:var(--blue-light); font-weight:700; margin-bottom:1.4rem; min-height:1.2em; }
.price-divider { height:1px; background:rgba(255,255,255,.08); margin-bottom:1.4rem; }
.price-section-lbl {
  font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin-bottom:.5rem; margin-top:.8rem;
}
.price-features { list-style:none; display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.8rem; }
.price-features li { display:flex; align-items:flex-start; gap:.5rem; font-size:.85rem; color:rgba(255,255,255,.72); }
.price-features li.na { color:rgba(255,255,255,.3); }
.pf-ck { color:var(--blue-light); font-weight:800; flex-shrink:0; }
.pf-na { color:rgba(255,255,255,.25); flex-shrink:0; }

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:.8rem; }
.faq-item {
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  background:rgba(255,255,255,.03); overflow:hidden;
  transition:border-color var(--transition);
}
.faq-item:hover { border-color:rgba(30,111,204,.22); }
.faq-item.open  { border-color:rgba(30,111,204,.38); }
.faq-q {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem 1.4rem; background:none; border:none; cursor:pointer;
  color:var(--white); font-family:inherit; font-size:.95rem; font-weight:700; text-align:left;
  transition:color var(--transition);
}
.faq-q:hover { color:var(--blue-light); }
.faq-arrow {
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; transition:transform var(--transition), border-color var(--transition), background var(--transition);
}
.faq-item.open .faq-arrow { transform:rotate(180deg); border-color:var(--blue-light); background:rgba(30,111,204,.15); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-a { max-height:400px; }
.faq-a-inner { padding:.1rem 1.4rem 1.3rem; font-size:.9rem; color:rgba(255,255,255,.68); line-height:1.8; }

/* Referral box */
.referral-box {
  max-width:640px; margin:3rem auto 0;
  background:rgba(30,111,204,.09); border:1px solid rgba(30,111,204,.25);
  border-radius:var(--radius); padding:1.6rem; text-align:center;
}
.referral-box h3 { font-size:1rem; font-weight:800; margin-bottom:.5rem; }
.referral-box p { font-size:.88rem; color:rgba(255,255,255,.65); line-height:1.7; }

/* ══════════════════════════════════════
   FINAL CTA
══════════════════════════════════════ */
.final-cta {
  text-align:center; padding:6rem 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 100%,rgba(30,111,204,.3) 0%,transparent 70%),
    var(--dark2);
  border-top:1px solid rgba(30,111,204,.12);
}
.final-cta h2 {
  font-family:'Playfair Display','ZCOOL XiaoWei',Georgia,'PingFang SC','Hiragino Mincho ProN','Source Han Serif CN','NSimSun',serif;
  font-size:clamp(2rem,4.5vw,3.2rem); font-weight:900;
  line-height:1.18; margin-bottom:1rem;
}
.final-cta h2 em { font-style:italic; color:var(--orange-light); }
.final-cta > .container > p { font-size:1.05rem; color:rgba(255,255,255,.65); margin-bottom:2.5rem; max-width:560px; margin-left:auto; margin-right:auto; }
.final-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }
.final-actions .btn { font-size:1rem; padding:.95rem 2rem; }
.final-note { font-size:.8rem; color:rgba(255,255,255,.3); }

/* ══════════════════════════════════════
   RESPONSIVE — 首页专属
══════════════════════════════════════ */
@media(max-width:960px) {
  .hero-grid { grid-template-columns:1fr; gap:3rem; text-align:center; }
  .hero-story, .hero-actions, .hero-trust { justify-content:center; }
  .hero-visual { min-height:320px; }
  .device-phone { width:150px; }
  .device-desktop { max-width:230px; }
  .platform-grid { grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .problem-cards { grid-template-columns:repeat(2,1fr); }
  .testi-grid { grid-template-columns:repeat(2,1fr); }
  .pricing-grid { grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .content-grid { grid-template-columns:repeat(2,1fr); }
  .steps-row { flex-direction:column; gap:1.5rem; }
  .step-item:not(:last-child)::after { display:none; }
  .solution-inner { grid-template-columns:1fr; gap:2.5rem; text-align:center; }
  .solution-logo-wrap { justify-content:center; }
  .solution-actions { justify-content:center; }
  /* NAV 折叠（首页断点 960px） */
  .nav-links  { display:none; }
  .nav-ctas   { display:none; }
  .nav-hamburger { display:block; }
}
@media(max-width:600px) {
  .hero-visual { flex-direction:column; align-items:center; gap:1rem; }
  .device-desktop { max-width:260px; width:100%; transform:rotate(0deg); }
  .device-phone { width:150px; transform:rotate(0deg); }
  .hero-badge { display:none; }
  .features-grid { grid-template-columns:1fr; }
  .problem-cards { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .pain-items { gap:1.2rem; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .footer-links { gap:1rem; }
}
/* 大屏隐藏 Drawer（与断点对应） */
@media(min-width:961px) {
  #mobileDrawer,#drawerOverlay { display:none !important; }
}


/* ══════════════════════════════════════
   For features.html
══════════════════════════════════════ */
/* ══════════════════════════════════════
   PAGE HERO
══════════════════════════════════════ */
.page-hero {
  padding:7.5rem 0 4.5rem; text-align:center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,111,204,.35) 0%, transparent 70%),
    var(--dark);
}
.page-hero h1 {
  font-family:'Playfair Display','ZCOOL XiaoWei',Georgia,'PingFang SC','Hiragino Mincho ProN','Source Han Serif CN','NSimSun',serif;
  font-size:clamp(2rem,5vw,3.2rem); font-weight:900; line-height:1.15;
  margin-bottom:1rem; margin-top:.8rem;
}
.page-hero h1 em { font-style:italic; color:var(--orange-light); }
.page-hero p { font-size:1.05rem; color:rgba(255,255,255,.65); max-width:580px; margin:0 auto 2rem; line-height:1.82; }
.page-hero-btns { display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; }

/* Breadcrumb */
.breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem; color:rgba(255,255,255,.35); margin-bottom:1.2rem;
  justify-content:center;
}
.breadcrumb a { color:rgba(255,255,255,.45); transition:color var(--transition); }
.breadcrumb a:hover { color:var(--blue-light); }
.breadcrumb span { color:rgba(255,255,255,.2); }

/* ══════════════════════════════════════
   FOR WHOM
══════════════════════════════════════ */
.for-whom-band { background:var(--dark2); padding:4.5rem 0; }
.for-whom-label {
  text-align:center; font-size:.78rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:.5rem;
}
.for-whom-title {
  font-family:'Playfair Display','ZCOOL XiaoWei',Georgia,'PingFang SC','Hiragino Mincho ProN','Source Han Serif CN','NSimSun',serif;
  font-size:clamp(1.65rem,3.5vw,2.3rem); font-weight:900;
  text-align:center; margin-bottom:2.5rem;
}
.fw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.fw-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:1.6rem; text-align:center;
  transition:border-color var(--transition), transform var(--transition);
}
.fw-card:hover { border-color:rgba(30,111,204,.3); transform:translateY(-3px); }
.fw-icon { font-size:2.3rem; margin-bottom:.8rem; }
.fw-card h3 { font-size:1rem; font-weight:800; margin-bottom:.55rem; }
.fw-card p  { font-size:.84rem; color:rgba(255,255,255,.58); line-height:1.65; }

/* ══════════════════════════════════════
   MAIN LAYOUT (sidebar + content)
══════════════════════════════════════ */
.features-layout {
  display:grid; grid-template-columns:230px 1fr; gap:3.5rem;
  padding-top:4rem; padding-bottom:6rem; align-items:start;
}

/* ── SIDEBAR ── */
.sidebar {
  position:sticky; top:72px;
  max-height:calc(100vh - 88px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(30,111,204,.22) transparent;
}
.sidebar::-webkit-scrollbar { width:3px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(30,111,204,.22); border-radius:2px; }
.sidebar-nav {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:1.2rem 1rem;
}
.sidebar-nav .snav-group {
  font-size:.72rem; font-weight:800; color:rgba(255,255,255,.32);
  letter-spacing:.1em; text-transform:uppercase;
  margin-top:1.4rem; margin-bottom:.5rem; padding:0 .5rem;
}
.sidebar-nav .snav-group:first-child { margin-top:0; }
.s-link {
  display:flex; align-items:center; gap:.6rem;
  padding:.52rem .65rem; border-radius:.6rem;
  font-size:.84rem; font-weight:600; color:rgba(255,255,255,.55);
  transition:all var(--transition); margin-bottom:.15rem;
}
.s-link:hover { background:rgba(30,111,204,.1); color:rgba(255,255,255,.9); }
.s-link.active { background:rgba(30,111,204,.16); color:var(--blue-light); }
.s-link.wt-link.active { background:rgba(232,101,10,.14); color:var(--orange-light); }
.s-link.wt-link:hover { color:var(--orange-light); }
.s-link .s-icon { font-size:.95rem; flex-shrink:0; width:18px; text-align:center; }

/* ── MAIN CONTENT ── */
.features-main { min-width:0; }

/* ══════════════════════════════════════
   FEATURE SECTION
══════════════════════════════════════ */
.feature-section { margin-bottom:5rem; scroll-margin-top:88px; }
.feature-section-header {
  display:flex; align-items:flex-start; gap:1rem;
  margin-bottom:1.8rem; flex-wrap:wrap;
}
.fsec-icon {
  width:54px; height:54px; border-radius:.9rem; flex-shrink:0;
  background:linear-gradient(135deg,rgba(10,35,85,.8),rgba(30,111,204,.45));
  display:flex; align-items:center; justify-content:center; font-size:1.55rem;
}
.fsec-icon.gold-ico { background:linear-gradient(135deg,rgba(85,35,5,.7),rgba(232,101,10,.4)); }
.fsec-title-group h2 {
  font-family:'Playfair Display','ZCOOL XiaoWei',Georgia,'PingFang SC','Hiragino Mincho ProN','Source Han Serif CN','NSimSun',serif;
  font-size:1.7rem; font-weight:900; line-height:1.2; margin-bottom:.25rem;
}
.fsec-sub { font-size:.85rem; color:rgba(255,255,255,.48); font-weight:600; }
.feature-body { font-size:.95rem; color:rgba(255,255,255,.7); line-height:1.82; }
.feature-body p { margin-bottom:1rem; }
.feature-body strong { color:var(--white); }
.feature-body em { color:var(--blue-light); font-style:normal; }
.feature-body em.gold { color:var(--orange-light); }

/* Platform tag inside sections */
.feat-section-badge {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .7rem; border-radius:2rem; margin-bottom:1rem;
}
.fsb-app { background:rgba(30,111,204,.18); color:var(--blue-light); }
.fsb-wt  { background:rgba(232,101,10,.15); color:var(--orange-light); }

.ss-wrap { margin:1.5rem 0; }

/* Screenshot grid */
.ss-grid { display:grid; gap:.8rem; margin:1.5rem 0; }
.ss-grid.cols-2 { grid-template-columns:1fr 1fr; }
.ss-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.ss-grid .ss-ph.ratio-916 { max-width:none; }
.ss-caption { font-size:.72rem; color:rgba(255,255,255,.35); text-align:center; margin-top:.4rem; }

/* Mini grid cards */
.mini-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.5rem 0; }
.mini-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-sm); padding:1.15rem;
  transition:border-color var(--transition);
}
.mini-card:hover { border-color:rgba(30,111,204,.3); }
.mini-card.gold-card:hover { border-color:rgba(232,101,10,.3); }
.mini-card h4 { font-size:.9rem; font-weight:800; margin-bottom:.4rem; color:var(--blue-light); }
.mini-card.gold-card h4 { color:var(--orange-light); }
.mini-card p  { font-size:.82rem; color:rgba(255,255,255,.58); line-height:1.62; }

/* Step list */
.step-list { list-style:none; counter-reset:sc; display:flex; flex-direction:column; gap:.8rem; margin:1.2rem 0; }
.step-list li {
  counter-increment:sc; display:flex; align-items:flex-start; gap:1rem;
  background:rgba(255,255,255,.04); border-radius:.7rem; padding:.9rem 1.1rem;
}
.step-list li::before {
  content:counter(sc); flex-shrink:0;
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  color:var(--white); font-weight:800; font-size:.78rem;
  display:flex; align-items:center; justify-content:center; margin-top:.1rem;
}
.step-list li .sl-text { font-size:.9rem; color:rgba(255,255,255,.72); line-height:1.65; }
.step-list li .sl-text strong { color:var(--white); }

/* Check list */
.check-list { list-style:none; display:flex; flex-direction:column; gap:.55rem; margin:1rem 0; }
.check-list li { display:flex; align-items:flex-start; gap:.65rem; font-size:.9rem; color:rgba(255,255,255,.72); }
.check-list li::before { content:'✓'; color:var(--blue-light); font-weight:800; flex-shrink:0; margin-top:.05rem; }

/* Highlight boxes */
.highlight-box {
  background:linear-gradient(135deg,rgba(14,40,90,.3),rgba(30,111,204,.08));
  border:1px solid rgba(30,111,204,.25);
  border-radius:var(--radius); padding:1.3rem 1.5rem; margin:1.5rem 0;
}
.highlight-box .hb-title { font-weight:800; color:var(--blue-light); margin-bottom:.4rem; font-size:.93rem; }
.highlight-box p { font-size:.88rem; color:rgba(255,255,255,.68); line-height:1.72; margin:0; }
.gold-box {
  background:linear-gradient(135deg,rgba(90,40,5,.18),rgba(232,101,10,.06));
  border:1px solid rgba(232,101,10,.25);
  border-radius:var(--radius); padding:1.3rem 1.5rem; margin:1.5rem 0;
}
.gold-box .hb-title { color:var(--orange-light); font-weight:800; margin-bottom:.4rem; font-size:.93rem; }
.gold-box p { font-size:.88rem; color:rgba(255,255,255,.68); line-height:1.72; margin:0; }

/* Section divider */
.sec-divider { height:1px; background:rgba(255,255,255,.07); margin:3rem 0; }

/* ══════════════════════════════════════
   CONTENT ROADMAP
══════════════════════════════════════ */
.roadmap { display:flex; flex-direction:column; gap:.9rem; }
.roadmap-row {
  display:grid; grid-template-columns:140px 1fr; gap:1rem; align-items:start;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:.75rem; padding:.9rem 1.1rem;
}
.roadmap-status {
  font-size:.72rem; font-weight:800; padding:.22rem .7rem;
  border-radius:2rem; text-align:center; white-space:nowrap;
}
.status-live    { background:rgba(30,111,204,.22); color:var(--blue-light); }
.status-ongoing { background:rgba(232,101,10,.18); color:var(--orange-light); }
.status-soon    { background:rgba(255,255,255,.07); color:rgba(255,255,255,.42); }
.roadmap-info h4 { font-size:.9rem; font-weight:800; margin-bottom:.25rem; }
.roadmap-info p  { font-size:.8rem; color:rgba(255,255,255,.5); line-height:1.5; }

/* ══════════════════════════════════════
   FINAL CTA (功能页)
══════════════════════════════════════ */
.page-cta {
  text-align:center; padding:5.5rem 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 100%,rgba(30,111,204,.28) 0%,transparent 70%),
    var(--dark2);
  border-top:1px solid rgba(30,111,204,.12);
}
.page-cta h2 {
  font-family:'Playfair Display','ZCOOL XiaoWei',Georgia,'PingFang SC','Hiragino Mincho ProN','Source Han Serif CN','NSimSun',serif;
  font-size:clamp(1.8rem,4vw,2.7rem); font-weight:900; margin-bottom:.8rem;
}
.page-cta h2 em { font-style:italic; color:var(--orange-light); }
.page-cta > .container > p { color:rgba(255,255,255,.62); font-size:1.02rem; margin-bottom:2.2rem; }
.page-cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.page-cta-btns .btn { font-size:1rem; padding:.9rem 1.9rem; }

/* ══════════════════════════════════════
   RESPONSIVE — 功能页专属
══════════════════════════════════════ */
@media(max-width:900px) {
  .features-layout { grid-template-columns:1fr; gap:0; }
  .sidebar { position:static; max-height:none; overflow:visible; margin-bottom:2rem; }
  .sidebar-nav { display:flex; flex-wrap:wrap; gap:.4rem; padding:.8rem; }
  .sidebar-nav .snav-group { width:100%; margin:.4rem 0 .2rem; }
  .s-link { padding:.4rem .7rem; font-size:.78rem; }
  .fw-grid { grid-template-columns:1fr; }
  .mini-grid { grid-template-columns:1fr; }
  .ss-grid.cols-3 { grid-template-columns:1fr 1fr; }
  /* NAV 折叠（功能页断点 900px） */
  .nav-links  { display:none; }
  .nav-ctas   { display:none; }
  .nav-hamburger { display:block; }
}
@media(max-width:600px) {
  .ss-grid.cols-2 { grid-template-columns:1fr; }
  .ss-grid.cols-3 { grid-template-columns:1fr; }
  .page-hero-btns { flex-direction:column; align-items:stretch; }
  .page-hero-btns .btn { justify-content:center; }
}
/* 大屏隐藏 Drawer（与断点对应） */
@media(min-width:901px) {
  #mobileDrawer,#drawerOverlay { display:none !important; }
}