/* roulang page: index */
:root{
  --bg-base:#050A12;
  --bg-deep:#08111D;
  --bg-elev:#0C1A2A;
  --glass-fill:rgba(255,255,255,0.045);
  --glass-fill-strong:rgba(255,255,255,0.07);
  --glass-stroke:rgba(140,190,255,0.16);
  --glass-stroke-hi:rgba(140,190,255,0.30);
  --primary:#12D6F5;
  --primary-deep:#0A6CFF;
  --primary-glow:rgba(18,214,245,0.40);
  --accent:#FF8A3D;
  --gold:#E9C46A;
  --text-hi:#EAF2FF;
  --text-mid:#A9BBD1;
  --text-low:#6F8199;
  --body:#C8D6E6;
  --line:rgba(255,255,255,0.08);
  --ok:#35D0A0;
  --warn:#FFB020;
  --r-lg:18px;
  --r-md:12px;
  --shadow:0 0 0 1px rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.5);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg-base);
  color:var(--body);
  font-family:"HarmonyOS Sans SC","PingFang SC","Noto Sans SC","Microsoft YaHei",Inter,system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.8;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none;transition:color .24s cubic-bezier(.2,.7,.3,1),opacity .24s}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--text-hi);font-weight:700;letter-spacing:-.02em;line-height:1.25}
h1{font-size:clamp(30px,4.2vw,50px)}
h2{font-size:clamp(24px,3vw,36px)}
h3{font-size:19px;font-weight:600}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
@media (min-width:768px){.wrap{padding:0 24px}}
@media (min-width:1024px){.wrap{padding:0 32px}}
.section{padding:68px 0;position:relative}
@media (min-width:1024px){.section{padding:104px 0}}
.section + .section{border-top:1px solid var(--line)}
.fade-line{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:80;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,backdrop-filter .3s,border-color .3s;
}
.site-header.scrolled{
  background:rgba(8,17,29,.86);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
@media (min-width:1024px){.header-inner{height:76px}}
.brand{display:flex;align-items:center;gap:10px;color:var(--text-hi);font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:var(--primary);background:var(--glass-fill);border:1px solid var(--glass-stroke)}
.brand:hover .brand-mark{border-color:var(--glass-stroke-hi);color:#8DF3FF}
.main-nav{display:none;align-items:center;gap:34px}
@media (min-width:1024px){.main-nav{display:flex}}
.nav-link{position:relative;color:var(--text-mid);font-size:15px;padding:6px 2px}
.nav-link:hover{color:var(--text-hi)}
.nav-link.is-active{color:var(--text-hi)}
.nav-link.is-active::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-4px;width:60%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-deep));
}
.header-actions{display:flex;align-items:center;gap:12px}
.pill-cta{
  display:none;align-items:center;height:38px;padding:0 18px;border-radius:999px;
  font-size:14px;color:var(--primary);background:var(--glass-fill);
  border:1px solid var(--glass-stroke);transition:all .24s cubic-bezier(.2,.7,.3,1);
}
@media (min-width:768px){.pill-cta{display:inline-flex}}
.pill-cta:hover{
  color:#04121A;border-color:transparent;
  background:linear-gradient(120deg,var(--primary),var(--primary-deep));
  box-shadow:0 0 26px var(--primary-glow);
}
.menu-toggle{display:grid;gap:6px;width:42px;height:42px;place-content:center;border-radius:12px;border:1px solid var(--glass-stroke);background:var(--glass-fill)}
.menu-toggle span{display:block;width:18px;height:1.6px;background:var(--text-hi);transition:transform .25s}
@media (min-width:1024px){.menu-toggle{display:none}}
.menu-toggle.open span:first-child{transform:translateY(3.8px) rotate(45deg)}
.menu-toggle.open span:last-child{transform:translateY(-3.8px) rotate(-45deg)}
.mobile-panel{
  position:fixed;inset:64px 0 0 0;z-index:70;display:flex;flex-direction:column;
  background:rgba(5,10,18,.97);backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  padding:8px 20px 28px;transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .24s,transform .24s,visibility .24s;
}
.mobile-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
@media (min-width:1024px){.mobile-panel{display:none}}
.mobile-panel a.mp-link{display:flex;align-items:center;justify-content:space-between;padding:18px 4px;color:var(--text-mid);font-size:16px;border-bottom:1px solid var(--line)}
.mobile-panel a.mp-link:hover{color:var(--text-hi)}
.mobile-panel a.mp-link.is-active{color:var(--primary)}
.mp-cta{margin-top:24px;display:flex;align-items:center;justify-content:center;height:48px;border-radius:12px;font-size:15px;color:#04121A;background:linear-gradient(120deg,var(--primary),var(--primary-deep));box-shadow:0 0 24px var(--primary-glow)}

/* ---------- buttons ---------- */
.btn-glow{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 26px;border-radius:12px;font-size:15px;font-weight:600;
  color:#04121A;background:linear-gradient(120deg,var(--primary),var(--primary-deep));
  box-shadow:0 0 24px var(--primary-glow);transition:all .24s cubic-bezier(.2,.7,.3,1);
}
.btn-glow:hover{box-shadow:0 0 34px var(--primary-glow);filter:brightness(1.07);transform:translateY(-2px)}
.btn-glow:active{transform:translateY(1px)}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;border-radius:12px;font-size:15px;
  color:var(--text-hi);background:var(--glass-fill);border:1px solid var(--glass-stroke);
  transition:all .24s cubic-bezier(.2,.7,.3,1);
}
.btn-ghost:hover{border-color:var(--glass-stroke-hi);background:var(--glass-fill-strong);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(1px)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-size:14px}
.link-arrow:hover{gap:10px;color:#8DF3FF}

/* ---------- badges / meta ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12.5px;color:var(--primary);background:var(--glass-fill);border:1px solid var(--glass-stroke)}
.badge.gold{color:var(--gold);border-color:rgba(233,196,106,.35)}
.badge.accent{color:var(--accent);border-color:rgba(255,138,61,.32)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--text-low);font-size:13px}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-low)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-low);letter-spacing:.08em}

/* ---------- glass card ---------- */
.glass-card{
  position:relative;border-radius:var(--r-lg);
  background:var(--glass-fill);border:1px solid var(--glass-stroke);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:transform .24s cubic-bezier(.2,.7,.3,1),border-color .24s,box-shadow .24s;
  overflow:hidden;
}
.glass-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
}
.glass-card:hover{transform:translateY(-3px);border-color:var(--glass-stroke-hi);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 64px rgba(0,0,0,.5),0 0 34px rgba(18,214,245,.18)}

/* ---------- hero ---------- */
.hero{
  position:relative;padding:118px 0 72px;
  background-image:linear-gradient(180deg,rgba(5,10,18,.72),rgba(5,10,18,.92) 60%,var(--bg-base)),url('/assets/images/backpic/back-1.png');
  background-size:cover;background-position:center;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 82% 18%,rgba(18,214,245,.10),transparent 46%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 84px),repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 84px);
}
@media (min-width:1024px){.hero{padding:150px 0 104px}}
.hero-grid{position:relative;z-index:2;display:grid;gap:44px;align-items:center}
@media (min-width:1024px){.hero-grid{grid-template-columns:1.15fr .85fr;gap:56px}}
.hero h1{margin:18px 0 20px;max-width:20ch}
.hero-sub{color:var(--text-mid);font-size:17px;line-height:1.85;max-width:56ch}
@media (min-width:768px){.hero-sub{font-size:20px}}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border-top:1px solid var(--line);padding-top:22px}
.hero-metrics .m{padding-right:16px}
.hero-metrics .m + .m{padding-left:16px;border-left:1px solid var(--line)}
.hero-metrics .v{font-size:24px;font-weight:700;color:var(--text-hi);font-variant-numeric:tabular-nums;line-height:1.2}
@media (min-width:768px){.hero-metrics .v{font-size:28px}}
.hero-metrics .l{font-size:13px;color:var(--text-low);margin-top:4px}

.panel{padding:24px}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.panel-title h3{font-size:17px}
.panel-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.panel-row:last-of-type{border-bottom:0}
.panel-row .k{font-size:14px;color:var(--text-mid)}
.panel-row .v{font-size:15px;color:var(--text-hi);font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:14px}
.bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary-deep));box-shadow:0 0 14px var(--primary-glow)}
.panel-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-low)}

/* ---------- section head ---------- */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:38px}
.sec-head .lead{max-width:64ch;color:var(--text-mid);font-size:15px;margin-top:12px}
.sec-head h2{max-width:24ch}

/* ---------- compare table ---------- */
.table-shell{border-radius:var(--r-lg);border:1px solid var(--glass-stroke);background:var(--glass-fill);overflow:hidden;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.table-scroll{overflow-x:auto}
.table-scroll::-webkit-scrollbar{height:6px}
.table-scroll::-webkit-scrollbar-thumb{background:rgba(140,190,255,.24);border-radius:999px}
table.cmp{width:100%;min-width:760px;border-collapse:collapse}
table.cmp th,table.cmp td{padding:18px 18px;text-align:center;border-bottom:1px solid var(--line)}
table.cmp thead th{background:rgba(12,26,42,.72);color:var(--text-hi);font-size:15px;vertical-align:top}
table.cmp thead th .price{display:block;font-size:13px;color:var(--text-low);font-weight:400;margin-top:6px}
table.cmp tbody th{text-align:left;font-weight:600;color:var(--text-hi);font-size:15px}
table.cmp tbody th small{display:block;font-weight:400;font-size:13px;color:var(--text-low);margin-top:4px}
table.cmp td{color:var(--text-mid);font-size:15px;font-variant-numeric:tabular-nums}
table.cmp tbody tr:hover{background:rgba(255,255,255,.02)}
.col-hot{position:relative;background:rgba(18,214,245,.06)}
.col-hot-head{box-shadow:inset 0 0 0 1px rgba(18,214,245,.5),0 0 30px rgba(18,214,245,.16)}
.check{color:var(--primary);font-weight:700}
.dash{color:var(--text-low)}
.swipe-tip{display:block;margin-top:12px;font-size:13px;color:var(--text-low)}
@media (min-width:768px){.swipe-tip{display:none}}

/* ---------- levels ---------- */
.levels{display:grid;gap:22px}
@media (min-width:900px){.levels{grid-template-columns:repeat(3,1fr);align-items:start}}
.level-card{padding:28px;border-radius:var(--r-lg);background:var(--glass-fill);border:1px solid var(--glass-stroke);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);transition:transform .24s cubic-bezier(.2,.7,.3,1),border-color .24s,box-shadow .24s}
.level-card:hover{transform:translateY(-4px)}
.level-card .lv-name{font-size:20px;font-weight:700;color:var(--text-hi)}
.level-card .lv-desc{font-size:14px;color:var(--text-mid);margin-top:10px;min-height:48px}
.level-card ul{margin-top:18px;display:grid;gap:10px}
.level-card li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-mid)}
.level-card li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:2px;background:var(--primary)}
.level-card .lv-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--text-low)}
.lv-basic{border-color:rgba(140,190,255,.22)}
.lv-basic li::before{background:#8FB2CC}
.lv-plus{border-color:rgba(18,214,245,.45);box-shadow:0 0 0 1px rgba(18,214,245,.18),0 24px 64px rgba(0,0,0,.5),0 0 34px rgba(18,214,245,.20)}
.lv-elite{border-color:rgba(233,196,106,.42)}
.lv-elite li::before{background:var(--gold)}
@media (min-width:900px){
  .lv-basic{margin-top:0}
  .lv-plus{margin-top:24px}
  .lv-elite{margin-top:48px}
}

/* ---------- preview ---------- */
.preview-grid{display:grid;gap:22px}
@media (min-width:768px){.preview-grid{grid-template-columns:repeat(3,1fr)}}
.pv-card{border-radius:var(--r-lg);border:1px solid var(--glass-stroke);background:var(--glass-fill);overflow:hidden;box-shadow:var(--shadow);transition:transform .24s cubic-bezier(.2,.7,.3,1),border-color .24s}
.pv-card:hover{transform:translateY(-3px);border-color:var(--glass-stroke-hi)}
.pv-cover{position:relative;aspect-ratio:16/9;overflow:hidden}
.pv-cover img{width:100%;height:100%;object-fit:cover}
.pv-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,18,.16),rgba(5,10,18,.72))}
.pv-card.locked .pv-cover img{filter:blur(6px) saturate(.8);transform:scale(1.04)}
.pv-lock{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:var(--text-hi)}
.pv-lock svg{opacity:.85}
.pv-tag{position:absolute;top:12px;right:12px;z-index:3}
.pv-body{padding:22px}
.pv-body h3{font-size:18px;line-height:1.5}
.pv-body p{margin-top:10px;font-size:14px;color:var(--text-mid);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pv-card.open-state{border-color:rgba(18,214,245,.5)}
.pv-card.open-state .pv-lock{display:none}
.pv-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-low)}
.pv-more{display:flex;justify-content:center;margin-top:32px}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;font-size:19px;font-weight:600;color:var(--text-hi);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#8DF3FF}
.faq .icon{position:relative;flex:none;width:20px;height:20px;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.faq .icon::before,.faq .icon::after{content:"";position:absolute;left:50%;top:50%;background:var(--primary);border-radius:2px}
.faq .icon::before{width:14px;height:1.6px;transform:translate(-50%,-50%)}
.faq .icon::after{width:1.6px;height:14px;transform:translate(-50%,-50%)}
.faq details[open] .icon{transform:rotate(180deg)}
.faq details[open] .icon::after{opacity:0}
.faq .ans{padding:0 0 24px;max-width:78ch;color:var(--text-mid);font-size:15px;line-height:1.85}

/* ---------- cta ---------- */
.cta-panel{
  position:relative;overflow:hidden;border-radius:24px;padding:44px 26px;text-align:center;
  background:linear-gradient(140deg,rgba(18,214,245,.10),rgba(12,26,42,.5) 55%,rgba(10,108,255,.12));
  border:1px solid var(--glass-stroke);box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
}
@media (min-width:768px){.cta-panel{padding:64px 48px}}
.cta-panel::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:180%;opacity:.035;
  background:repeating-radial-gradient(circle at 50% 120%,#fff 0 1px,transparent 1px 54px);
  pointer-events:none;
}
.cta-panel h2{position:relative;max-width:22ch;margin:0 auto}
.cta-panel p{position:relative;margin:16px auto 0;max-width:60ch;color:var(--text-mid);font-size:15px}
.cta-actions{position:relative;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}

/* ---------- news ---------- */
.news-grid{display:grid;gap:22px}
@media (min-width:1024px){.news-grid{grid-template-columns:3fr 2fr;align-items:start}}
.lead-card{display:flex;flex-direction:column;border-radius:var(--r-lg);border:1px solid var(--glass-stroke);background:var(--glass-fill);overflow:hidden;box-shadow:var(--shadow);transition:transform .24s cubic-bezier(.2,.7,.3,1),border-color .24s}
.lead-card:hover{transform:translateY(-3px);border-color:var(--glass-stroke-hi)}
.lead-card:hover h3{color:var(--primary)}
.lead-cover{position:relative;aspect-ratio:16/9;overflow:hidden}
.lead-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.lead-card:hover .lead-cover img{transform:scale(1.03)}
.lead-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,18,.10),rgba(5,10,18,.42))}
.lead-body{padding:24px}
.lead-body h3{margin-top:14px;font-size:21px;line-height:1.45;transition:color .24s}
.lead-body p{margin-top:12px;color:var(--text-mid);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lead-body .meta{margin-top:16px}
.side-list{display:grid;gap:14px}
.mini-card{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:14px;border-radius:var(--r-md);border:1px solid var(--glass-stroke);background:var(--glass-fill);transition:transform .24s cubic-bezier(.2,.7,.3,1),border-color .24s,box-shadow .24s}
.mini-card:hover{transform:translateY(-3px);border-color:var(--glass-stroke-hi);box-shadow:0 0 28px rgba(18,214,245,.14)}
.mini-card:hover h3{color:var(--primary)}
.mini-thumb{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.mini-thumb img{width:100%;height:100%;object-fit:cover}
.mini-thumb::after{content:"";position:absolute;inset:0;background:rgba(5,10,18,.24)}
.mini-body h3{font-size:15.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .24s}
.mini-body p{margin-top:6px;font-size:13px;color:var(--text-low);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-body .meta{margin-top:8px;font-size:12.5px}
.empty-card{display:grid;place-items:center;gap:14px;text-align:center;padding:56px 24px;border-radius:var(--r-lg);border:1px dashed var(--glass-stroke);background:var(--glass-fill)}
.empty-card .eico{width:44px;height:44px;border-radius:12px;border:1px solid var(--glass-stroke);display:grid;place-items:center;color:var(--primary)}
.empty-card p{color:var(--text-mid);font-size:15px}

/* ---------- footer ---------- */
.site-footer{margin-top:20px;background:var(--bg-deep);border-top:1px solid var(--line);padding:60px 0 0}
.footer-grid{display:grid;gap:36px}
@media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--text-hi);font-weight:700;font-size:17px}
.footer-desc{margin-top:14px;color:var(--text-low);font-size:14px;max-width:34ch}
.footer-col h4{color:var(--text-hi);font-size:14px;letter-spacing:.06em;margin-bottom:16px;font-weight:600}
.footer-col ul{display:grid;gap:11px}
.footer-col a{color:var(--text-mid);font-size:14px}
.footer-col a:hover{color:var(--primary)}
.footer-col .plain{color:var(--text-low);font-size:14px}
.footer-bottom{margin-top:44px;border-top:1px solid var(--line);padding:22px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;color:var(--text-low);font-size:13px}

/* roulang page: category1 */
:root{
  --bg-base:#050A12;
  --bg-deep:#08111D;
  --bg-elev:#0C1A2A;
  --glass-fill:rgba(255,255,255,0.045);
  --glass-fill-strong:rgba(255,255,255,0.07);
  --glass-stroke:rgba(140,190,255,0.16);
  --glass-stroke-hi:rgba(140,190,255,0.30);
  --primary:#12D6F5;
  --primary-deep:#0A6CFF;
  --primary-glow:rgba(18,214,245,0.40);
  --accent:#FF8A3D;
  --gold:#E9C46A;
  --text-hi:#EAF2FF;
  --text-mid:#A9BBD1;
  --text-low:#6F8199;
  --body:#C8D6E6;
  --ok:#35D0A0;
  --warn:#FFB020;
  --line:rgba(255,255,255,0.08);
  --radius-lg:18px;
  --radius-md:12px;
  --shadow-card:0 0 0 1px rgba(255,255,255,0.06),0 20px 60px rgba(0,0,0,0.5);
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-base);
  color:var(--body);
  font-family:"HarmonyOS Sans SC","PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;border:0;}
a{color:inherit;text-decoration:none;transition:color .22s var(--ease),opacity .22s var(--ease);}
button,input,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4{margin:0;color:var(--text-hi);font-weight:700;letter-spacing:-0.02em;line-height:1.25;}
p{margin:0;}
ul,ol{margin:0;padding:0;}
svg{display:block;}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;}
@media(min-width:768px){.wrap{padding:0 24px;}}
@media(min-width:1024px){.wrap{padding:0 32px;}}

.num{font-variant-numeric:tabular-nums;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(8,17,29,.74);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:var(--primary);
  background:linear-gradient(180deg,rgba(18,214,245,.16),rgba(10,108,255,.08));
  box-shadow:inset 0 0 0 1px var(--glass-stroke);
}
.brand-name{font-size:18px;font-weight:700;color:var(--text-hi);letter-spacing:-0.01em;white-space:nowrap;}

.main-nav{display:none;}
@media(min-width:1024px){
  .main-nav{display:flex;align-items:center;gap:34px;}
}
.nav-link{
  position:relative;
  font-size:15px;
  color:var(--text-mid);
  padding:6px 2px;
  white-space:nowrap;
}
.nav-link::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:0;height:2px;border-radius:2px;
  background:var(--primary);
  transform:translateX(-50%);
  transition:width .24s var(--ease);
  box-shadow:0 0 10px var(--primary-glow);
}
.nav-link:hover{color:var(--text-hi);}
.nav-link:hover::after{width:60%;}
.nav-link.is-active{color:var(--text-hi);}
.nav-link.is-active::after{width:60%;}

.header-actions{display:flex;align-items:center;gap:12px;}
.pill-cta{
  display:none;
  align-items:center;height:40px;padding:0 20px;
  border-radius:999px;
  font-size:14px;color:var(--primary);
  background:var(--glass-fill);
  box-shadow:inset 0 0 0 1px var(--glass-stroke);
  transition:all .24s var(--ease);
}
@media(min-width:640px){.pill-cta{display:inline-flex;}}
.pill-cta:hover{
  color:#04121B;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  box-shadow:0 0 24px var(--primary-glow);
}
.nav-toggle{
  width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;gap:5px;border-radius:10px;
}
@media(min-width:1024px){.nav-toggle{display:none;}}
.nav-toggle span{display:block;width:20px;height:1.6px;background:var(--text-hi);border-radius:2px;transition:transform .24s var(--ease),opacity .24s var(--ease);}
.nav-toggle.is-open span:nth-child(1){transform:translateY(3.3px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg);}

.mobile-panel{
  display:none;
  position:fixed;left:0;right:0;top:64px;bottom:0;
  background:rgba(5,10,18,.94);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border-top:1px solid var(--line);
  padding:8px 20px 32px;
  overflow-y:auto;
}
.mobile-panel.is-open{display:block;}
.mobile-panel a.m-link{
  display:block;padding:18px 2px;font-size:16px;color:var(--text-mid);
  border-bottom:1px solid var(--line);
}
.mobile-panel a.m-link:hover,.mobile-panel a.m-link.is-active{color:var(--primary);}
.mobile-panel .m-cta{
  display:inline-flex;margin-top:24px;align-items:center;justify-content:center;
  height:46px;padding:0 26px;border-radius:999px;
  color:#04121B;background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  box-shadow:0 0 24px var(--primary-glow);font-size:15px;
}

/* ---------- page hero ---------- */
.page-hero{
  position:relative;
  margin-top:-76px;
  padding:148px 0 62px;
  overflow:hidden;
  background-image:linear-gradient(180deg,rgba(5,10,18,.74) 0%,rgba(5,10,18,.88) 58%,var(--bg-base) 100%),
                   url('/assets/images/backpic/back-1.png');
  background-size:cover;
  background-position:center;
}
.page-hero::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:-58%;height:340px;
  border-radius:50%;
  border:1px solid rgba(18,214,245,.10);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;max-width:820px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  font-size:13px;color:var(--primary);
  background:var(--glass-fill);
  box-shadow:inset 0 0 0 1px var(--glass-stroke);
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary-glow);display:block;}
.page-hero h1{
  margin-top:22px;
  font-size:32px;
  line-height:1.2;
}
@media(min-width:768px){.page-hero h1{font-size:44px;}}
@media(min-width:1024px){.page-hero h1{font-size:50px;}}
.hero-sub{margin-top:18px;font-size:17px;color:var(--text-mid);max-width:44em;}
@media(min-width:768px){.hero-sub{font-size:20px;}}
.hero-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;}

.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 22px;border-radius:12px;
  font-size:15px;color:var(--text-hi);
  background:var(--glass-fill);
  box-shadow:inset 0 0 0 1px var(--glass-stroke);
  transition:all .24s var(--ease);
}
.btn-ghost:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px var(--glass-stroke-hi),0 0 26px rgba(18,214,245,.22);
}
.btn-ghost:focus-visible,.btn-glow:focus-visible,.pill-cta:focus-visible,summary:focus-visible,.nav-link:focus-visible{
  outline:2px solid var(--primary);outline-offset:3px;
}
.btn-glow{
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 26px;border-radius:12px;
  font-size:15px;color:#04121B;font-weight:600;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  box-shadow:0 0 24px var(--primary-glow);
  transition:all .24s var(--ease);
}
.btn-glow:hover{box-shadow:0 0 34px var(--primary-glow);transform:translateY(-1px);}
.btn-glow:active{transform:translateY(1px);}

.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:34px;font-size:14px;color:var(--text-low);
}
.breadcrumb a:hover{color:var(--primary);}
.breadcrumb .sep{opacity:.6;}
.breadcrumb .current{color:var(--text-mid);}

/* ---------- sections ---------- */
.section{padding:72px 0;}
@media(min-width:1024px){.section{padding:104px 0;}}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:42px;}
.section-head h2{font-size:26px;}
@media(min-width:768px){.section-head h2{font-size:34px;}}
.section-sub{margin-top:12px;font-size:15px;color:var(--text-mid);max-width:56em;}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);}

.glass-card{
  position:relative;
  background:var(--glass-fill);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  transition:all .24s var(--ease);
}
.glass-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.glass-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card),0 0 26px rgba(18,214,245,.18);}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;
  font-size:12px;color:var(--text-mid);
  background:var(--glass-fill);
  box-shadow:inset 0 0 0 1px var(--glass-stroke);
}
.tag.is-live{color:var(--primary);}
.tag.is-gold{color:var(--gold);}

/* ---------- timeline ---------- */
.timeline{list-style:none;position:relative;}
.tl-item{
  display:grid;
  grid-template-columns:120px 28px 1fr;
  gap:20px;
  position:relative;
  padding-bottom:26px;
}
.tl-item::before{
  content:"";position:absolute;
  left:calc(120px + 20px + 13.5px);
  top:16px;bottom:-4px;width:1px;
  background:linear-gradient(180deg,var(--glass-stroke-hi),rgba(140,190,255,.06));
}
.tl-item:last-child::before{display:none;}
.tl-date{font-size:14px;color:var(--text-low);padding-top:2px;}
.tl-date strong{display:block;color:var(--text-hi);font-size:16px;font-weight:600;}
.tl-dot{
  width:12px;height:12px;border-radius:50%;margin-top:10px;
  background:var(--primary);
  box-shadow:0 0 12px var(--primary-glow),0 0 0 4px rgba(18,214,245,.10);
}
.tl-card{padding:24px 26px;}
.tl-card h3{font-size:19px;margin-top:12px;}
.tl-card p{margin-top:10px;font-size:15px;color:var(--text-mid);}
.tl-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px;font-size:13px;color:var(--text-low);}
.tl-meta span{display:inline-flex;align-items:center;gap:6px;}
.tl-meta b{color:var(--text-hi);font-weight:600;}
.tl-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;color:var(--primary);}
.tl-link:hover{gap:10px;}
@media(max-width:768px){
  .tl-item{grid-template-columns:1fr;gap:10px;padding-left:26px;padding-bottom:22px;}
  .tl-item::before{left:5px;top:14px;bottom:-2px;}
  .tl-dot{position:absolute;left:0;top:8px;margin-top:0;}
  .tl-card{padding:20px;}
}

/* ---------- metric band ---------- */
.metric-band{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-card);
}
@media(min-width:768px){.metric-band{grid-template-columns:repeat(4,1fr);}}
.metric{background:var(--bg-elev);padding:28px 22px;}
.metric-num{display:block;font-size:32px;font-weight:700;color:var(--text-hi);letter-spacing:-0.02em;}
.metric-num small{font-size:15px;color:var(--primary);margin-left:2px;}
.metric-label{display:block;margin-top:8px;font-size:13px;color:var(--text-low);}

/* ---------- feature rows ---------- */
.feature-row{
  display:grid;gap:28px;align-items:center;
  margin-bottom:40px;
}
@media(min-width:1024px){
  .feature-row{grid-template-columns:1.05fr 1fr;gap:56px;margin-bottom:64px;}
  .feature-row.reverse .feature-media{order:2;}
}
.feature-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.feature-media img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.feature-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,10,18,.08),rgba(5,10,18,.45));
}
.feature-body h3{font-size:22px;}
.feature-body p{margin-top:14px;font-size:15.5px;color:var(--text-mid);}
.feature-list{margin-top:18px;list-style:none;}
.feature-list li{
  position:relative;padding-left:18px;margin-bottom:10px;
  font-size:15px;color:var(--text-mid);
}
.feature-list li::before{
  content:"";position:absolute;left:0;top:11px;
  width:6px;height:6px;border-radius:2px;background:var(--primary);
}

/* ---------- faq ---------- */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 2px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary h3{font-size:17px;font-weight:600;}
.faq-item summary::after{
  content:"+";flex-shrink:0;
  font-size:22px;line-height:1;color:var(--primary);
  transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-body{
  padding:0 2px 24px;
  max-width:78ch;
  font-size:15px;color:var(--text-mid);line-height:1.8;
}

/* ---------- cta band ---------- */
.cta-band{
  position:relative;overflow:hidden;
  padding:64px 0;
}
.cta-panel{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  padding:48px 32px;
  text-align:center;
  background:var(--glass-fill-strong);
  box-shadow:var(--shadow-card);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
}
.cta-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 12% 130%,rgba(18,214,245,.14),transparent 44%),
                   radial-gradient(circle at 88% -30%,rgba(10,108,255,.16),transparent 46%);
}
.cta-panel > *{position:relative;z-index:1;}
.cta-panel h2{font-size:26px;}
@media(min-width:768px){.cta-panel h2{font-size:34px;}}
.cta-panel p{margin-top:14px;font-size:15.5px;color:var(--text-mid);}
.cta-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

/* ---------- footer ---------- */
.site-footer{
  background:var(--bg-deep);
  border-top:1px solid var(--line);
  padding:64px 0 26px;
  margin-top:20px;
}
.footer-grid{display:grid;gap:36px;}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--text-hi);font-size:17px;font-weight:700;}
.footer-desc{margin-top:16px;font-size:14px;color:var(--text-low);max-width:34em;line-height:1.8;}
.footer-col h4{font-size:15px;color:var(--text-hi);margin-bottom:16px;font-weight:600;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;font-size:14px;}
.footer-col a{color:var(--text-low);}
.footer-col a:hover{color:var(--primary);}
.footer-col .plain{color:var(--text-low);font-size:14px;}
.footer-bottom{
  margin-top:44px;padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:13px;color:var(--text-low);
}

/* roulang page: article */
:root{
  --bg-base:#050A12; --bg-deep:#08111D; --bg-elev:#0C1A2A;
  --glass-fill:rgba(255,255,255,.045); --glass-fill-strong:rgba(255,255,255,.07);
  --glass-stroke:rgba(140,190,255,.16); --glass-stroke-hi:rgba(140,190,255,.30);
  --primary:#12D6F5; --primary-deep:#0A6CFF; --primary-glow:rgba(18,214,245,.40);
  --accent:#FF8A3D; --gold:#E9C46A;
  --text-hi:#EAF2FF; --text-mid:#A9BBD1; --text-low:#6F8199;
  --ok:#35D0A0; --warn:#FFB020; --line:rgba(255,255,255,.08);
  --radius-lg:18px; --radius-sm:12px;
  --shadow-card:0 0 0 1px rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.5);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-base);
  color:var(--text-mid);
  font-family:"HarmonyOS Sans SC","PingFang SC","Noto Sans SC","Microsoft YaHei",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(18,214,245,.10), transparent 62%),
    radial-gradient(760px 420px at 8% -6%, rgba(10,108,255,.09), transparent 60%);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color .24s var(--ease),opacity .24s var(--ease)}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(18,214,245,.28);color:#fff}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px;position:relative;z-index:1}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ============ 导航 ============ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:80;border-bottom:1px solid transparent;transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s var(--ease)}
.site-header.is-scrolled{background:rgba(8,17,29,.74);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text-hi);font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:var(--primary);background:linear-gradient(160deg,rgba(18,214,245,.18),rgba(10,108,255,.10));border:1px solid var(--glass-stroke);transition:border-color .24s var(--ease),box-shadow .24s var(--ease)}
.brand:hover .brand-mark{border-color:var(--glass-stroke-hi);box-shadow:0 0 18px rgba(18,214,245,.28)}
.main-nav{display:none;align-items:center;gap:34px;margin-left:auto}
.nav-link{position:relative;font-size:15px;color:var(--text-mid);padding:6px 0}
.nav-link::after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:2px;background:var(--primary);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .26s var(--ease)}
.nav-link:hover{color:var(--text-hi)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link.is-active{color:var(--text-hi)}
.nav-link.is-active::after{transform:scaleX(1)}
.header-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.pill-cta{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;font-size:14px;color:var(--primary);background:var(--glass-fill);border:1px solid var(--glass-stroke);transition:all .26s var(--ease);white-space:nowrap}
.pill-cta:hover{color:#03131C;background:linear-gradient(120deg,var(--primary),var(--primary-deep));border-color:transparent;box-shadow:0 0 26px var(--primary-glow)}
.pill-cta:active{transform:translateY(1px)}
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;border-radius:12px;border:1px solid var(--glass-stroke);background:var(--glass-fill);padding:0 12px}
.nav-toggle span{display:block;height:1.5px;background:var(--text-hi);border-radius:2px;transition:transform .26s var(--ease),opacity .26s var(--ease)}
.nav-toggle.is-open span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav-toggle.is-open span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mobile-panel{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;z-index:70;background:rgba(5,10,18,.94);backdrop-filter:blur(20px) saturate(140%);padding:12px 20px 32px;overflow-y:auto}
.mobile-panel.is-open{display:flex;flex-direction:column}
.m-link{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:16px;color:var(--text-hi);border-bottom:1px solid var(--line)}
.m-link span{color:var(--text-low);font-size:13px}
.m-link:hover{color:var(--primary)}
.m-cta{margin-top:24px;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;color:var(--primary);background:var(--glass-fill);border:1px solid var(--glass-stroke);font-size:15px}
.m-cta:hover{background:linear-gradient(120deg,var(--primary),var(--primary-deep));color:#03131C;border-color:transparent}

/* ============ 面包屑 ============ */
.crumb-band{padding-top:118px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--text-low)}
.crumb a{color:var(--text-low)}
.crumb a:hover{color:var(--primary)}
.crumb .sep{color:rgba(140,190,255,.32)}
.crumb .current{color:var(--text-mid);max-width:60ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ 文章头部 ============ */
.article-head{padding:26px 0 34px;border-bottom:1px solid var(--line)}
.article-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--primary);background:var(--glass-fill);border:1px solid var(--glass-stroke);border-radius:999px;padding:5px 14px;margin-bottom:20px}
.article-kicker i{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary-glow);display:inline-block}
.article-title{margin:0;font-size:clamp(30px,4.4vw,50px);line-height:1.2;letter-spacing:-.02em;font-weight:700;color:var(--text-hi);max-width:26ch}
.article-lead{margin:18px 0 0;font-size:17px;line-height:1.85;color:var(--text-mid);max-width:66ch}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:26px;font-size:13.5px;color:var(--text-low)}
.article-meta .meta-item{display:inline-flex;align-items:center;gap:8px}
.article-meta .divider{width:1px;height:14px;background:var(--line)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12.5px;color:var(--primary);background:var(--glass-fill);border:1px solid var(--glass-stroke)}
.badge.gold{color:var(--gold);border-color:rgba(233,196,106,.32)}

/* ============ 文章布局 ============ */
.article-section{padding:56px 0 40px}
.article-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;justify-content:center}
.article-main{max-width:780px;width:100%}
.article-body{color:#C8D6E6;font-size:16px;line-height:1.9}
.article-body p{margin:0 0 1.2em}
.article-body h2{position:relative;margin:40px 0 16px;padding-left:15px;font-size:26px;line-height:1.35;font-weight:700;letter-spacing:-.01em;color:var(--text-hi)}
.article-body h2::before{content:"";position:absolute;left:0;top:.28em;bottom:.22em;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--primary),var(--primary-deep))}
.article-body h3{margin:30px 0 12px;font-size:20px;font-weight:600;color:var(--text-hi);line-height:1.4}
.article-body h4{margin:24px 0 10px;font-size:17px;font-weight:600;color:var(--text-hi)}
.article-body a{color:var(--primary);border-bottom:1px solid rgba(18,214,245,.35)}
.article-body a:hover{color:#7CE9FF;border-bottom-color:rgba(124,233,255,.6)}
.article-body strong{color:var(--text-hi);font-weight:600}
.article-body ul,.article-body ol{margin:0 0 1.2em;padding:0}
.article-body ul li,.article-body ol li{position:relative;padding-left:20px;margin-bottom:.55em}
.article-body ul li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:2px;background:var(--primary);box-shadow:0 0 8px rgba(18,214,245,.5)}
.article-body ol{counter-reset:olc}
.article-body ol li::before{counter-increment:olc;content:counter(olc);position:absolute;left:0;top:.15em;width:16px;height:16px;border-radius:5px;background:rgba(18,214,245,.14);color:var(--primary);font-size:11px;line-height:16px;text-align:center;font-weight:600}
.article-body blockquote{margin:26px 0;padding:18px 22px;background:var(--glass-fill);border-left:3px solid var(--primary);border-radius:0 12px 12px 0;color:var(--text-mid)}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body img{border-radius:12px;margin:26px auto;box-shadow:0 0 0 1px var(--line);filter:brightness(.92)}
.article-body figure{margin:26px 0}
.article-body figcaption{text-align:center;font-size:13px;color:var(--text-low);margin-top:10px}
.article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.5px}
.article-body th,.article-body td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.article-body th{color:var(--text-hi);font-weight:600;background:var(--glass-fill)}
.article-body hr{border:0;height:1px;background:var(--line);margin:34px 0}
.article-body code{padding:2px 7px;border-radius:6px;background:rgba(140,190,255,.10);color:#9FE9FF;font-size:14px}

/* ============ 目录 ============ */
.toc-aside{display:none}
.toc{position:sticky;top:110px;border-left:1px solid var(--line);padding-left:20px}
.toc-title{font-size:13px;letter-spacing:.14em;color:var(--text-low);margin:0 0 16px;text-transform:uppercase}
.toc-list{display:flex;flex-direction:column;gap:2px}
.toc-list a{position:relative;display:block;font-size:14px;line-height:1.6;color:var(--text-low);padding:6px 0 6px 16px}
.toc-list a::before{content:"";position:absolute;left:-21px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:transparent;border:1px solid rgba(140,190,255,.28);transition:all .24s var(--ease)}
.toc-list a:hover{color:var(--text-hi)}
.toc-list a.is-sub{padding-left:28px;font-size:13.5px;opacity:.86}
.toc-list a.is-current{color:var(--primary)}
.toc-list a.is-current::before{background:var(--primary);border-color:var(--primary);box-shadow:0 0 12px var(--primary-glow)}
.toc-mobile{display:block;margin-bottom:28px;border:1px solid var(--glass-stroke);border-radius:var(--radius-sm);background:var(--glass-fill);overflow:hidden}
.toc-mobile summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;font-size:14px;color:var(--text-hi)}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary .plus{color:var(--primary);transition:transform .2s var(--ease)}
.toc-mobile[open] summary .plus{transform:rotate(45deg)}
.toc-mobile .toc-list{padding:6px 16px 16px}

/* ============ 文末 ============ */
.article-foot{margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.foot-label{font-size:13px;color:var(--text-low);margin:0 0 14px}
.tag-row{display:flex;flex-wrap:wrap;gap:10px}
.tag-pill{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;font-size:13px;color:var(--text-mid);background:var(--glass-fill);border:1px solid var(--glass-stroke);transition:all .24s var(--ease)}
.tag-pill:hover{color:var(--primary);border-color:var(--glass-stroke-hi);transform:translateY(-2px)}
.share-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.share-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;font-size:13.5px;color:var(--text-hi);background:var(--glass-fill);border:1px solid var(--glass-stroke);transition:all .24s var(--ease)}
.share-btn:hover{border-color:var(--glass-stroke-hi);transform:translateY(-2px);box-shadow:0 0 22px rgba(18,214,245,.18)}
.share-btn:active{transform:translateY(0)}
.share-btn svg{color:var(--primary)}

/* 上一篇 / 下一篇 */
.pn-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px}
.pn-card{display:block;padding:20px 22px;border-radius:var(--radius-sm);background:var(--glass-fill);border:1px solid var(--glass-stroke);transition:all .26s var(--ease)}
.pn-card:hover{transform:translateY(-3px);border-color:var(--glass-stroke-hi);box-shadow:0 0 26px rgba(18,214,245,.16)}
.pn-dir{font-size:12.5px;color:var(--text-low);display:block;margin-bottom:8px}
.pn-title{font-size:15.5px;color:var(--text-hi);line-height:1.6;margin:0}
.pn-card:hover .pn-title{color:var(--primary)}
.pn-card.next{text-align:right}

/* 相关推荐 */
.related{padding:76px 0 0;border-top:1px solid var(--line);margin-top:64px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:30px}
.sec-title{margin:0;font-size:clamp(24px,3.2vw,34px);line-height:1.25;font-weight:700;letter-spacing:-.02em;color:var(--text-hi)}
.sec-sub{margin:10px 0 0;font-size:15px;color:var(--text-mid);max-width:58ch}
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--primary)}
.text-link:hover{gap:12px;color:#7CE9FF}
.related-grid{display:grid;grid-template-columns:1fr;gap:20px}
.r-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);background:var(--glass-fill);border:1px solid var(--glass-stroke);overflow:hidden;transition:all .26s var(--ease);box-shadow:var(--shadow-card)}
.r-card:hover{transform:translateY(-3px);border-color:var(--glass-stroke-hi);box-shadow:var(--shadow-card),0 0 30px rgba(18,214,245,.20)}
.r-cover{position:relative;overflow:hidden;aspect-ratio:16/9}
.r-cover img{width:100%;height:100%;object-fit:cover;filter:brightness(.9)}
.r-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,18,.15),rgba(5,10,18,.62))}
.r-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.r-title{margin:0;font-size:19px;line-height:1.45;font-weight:600;color:var(--text-hi)}
.r-card:hover .r-title{color:var(--primary)}
.r-desc{margin:0;font-size:14px;color:var(--text-mid);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.r-meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text-low);margin-top:auto}

/* 空态 */
.empty-card{padding:56px 32px;text-align:center;border-radius:var(--radius-lg);background:var(--glass-fill);border:1px solid var(--glass-stroke);box-shadow:var(--shadow-card)}
.empty-icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 20px;border-radius:16px;color:var(--primary);background:rgba(18,214,245,.08);border:1px solid var(--glass-stroke)}
.empty-title{margin:0 0 12px;font-size:22px;font-weight:600;color:var(--text-hi)}
.empty-desc{margin:0 auto 26px;max-width:52ch;font-size:15px;color:var(--text-mid)}

/* 按钮 */
.btn-glow{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 26px;border-radius:12px;font-size:15px;font-weight:600;color:#03131C;background:linear-gradient(120deg,var(--primary),var(--primary-deep));box-shadow:0 0 24px var(--primary-glow);transition:all .26s var(--ease)}
.btn-glow:hover{box-shadow:0 0 34px rgba(18,214,245,.6);filter:brightness(1.06)}
.btn-glow:active{transform:translateY(1px)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;border-radius:12px;font-size:15px;color:var(--text-hi);background:var(--glass-fill);border:1px solid var(--glass-stroke);transition:all .26s var(--ease)}
.btn-ghost:hover{border-color:var(--glass-stroke-hi);transform:translateY(-2px);box-shadow:0 0 24px rgba(18,214,245,.16)}

/* 返回栏目 + CTA */
.back-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:56px;padding:22px 24px;border-radius:var(--radius-lg);background:var(--glass-fill);border:1px solid var(--glass-stroke)}
.back-band p{margin:0;font-size:15px;color:var(--text-mid)}
.cta-band{margin:72px 0 96px;position:relative;overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(140deg,rgba(12,26,42,.92),rgba(8,17,29,.92));border:1px solid var(--glass-stroke);box-shadow:var(--shadow-card);padding:52px 32px;text-align:center}
.cta-band::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:220%;background:
  repeating-radial-gradient(circle at 50% 120%, rgba(140,190,255,.05) 0 1px, transparent 1px 46px);
  opacity:.6;pointer-events:none}
.cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.cta-title{margin:0 0 14px;font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--text-hi)}
.cta-desc{margin:0 0 28px;font-size:15.5px;color:var(--text-mid)}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============ 页脚 ============ */
.site-footer{background:var(--bg-deep);border-top:1px solid var(--line);padding:64px 0 0;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1fr;gap:40px}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--text-hi);font-weight:700;font-size:17px;margin-bottom:16px}
.footer-desc{margin:0;font-size:14px;line-height:1.85;color:var(--text-mid);max-width:44ch}
.footer-col h4{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--text-hi);letter-spacing:.02em}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:var(--text-mid)}
.footer-col a:hover{color:var(--primary)}
.footer-col .plain{font-size:14px;color:var(--text-low);line-height:1.7}
.footer-bottom{margin-top:52px;padding:20px 0 28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13px;color:var(--text-low)}

/* ============ 响应式 ============ */
@media (max-width:1023px){
  .main-nav{display:none!important}
  .wrap{padding:0 24px}
  .header-inner{height:64px}
  .mobile-panel{top:64px}
}
@media (min-width:1024px){
  .main-nav{display:flex}
  .nav-toggle{display:none}
  .mobile-panel{display:none!important}
  .toc-mobile{display:none}
  .article-shell{grid-template-columns:minmax(0,780px) 240px;gap:56px}
  .toc-aside{display:block}
  .pn-grid{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto}
  .related-grid .r-card:first-child{grid-row:span 2}
  .related-grid .r-card:first-child .r-cover{aspect-ratio:4/3}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
}
@media (min-width:769px) and (max-width:1023px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:768px){
  body{font-size:15px}
  .wrap{padding:0 20px}
  .crumb-band{padding-top:104px}
  .article-title{font-size:clamp(26px,7vw,34px)}
  .article-body{font-size:15px}
  .article-body h2{font-size:22px;margin-top:34px}
  .article-body h3{font-size:18.5px}
  .article-section{padding:40px 0 24px}
  .related{padding-top:56px;margin-top:48px}
  .cta-band{margin:56px 0 64px;padding:40px 22px}
  .brand-text{font-size:16px}
}
@media (max-width:520px){
  .article-meta{gap:10px 14px}
  .article-meta .divider{display:none}
  .pn-card.next{text-align:left}
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn-glow,.cta-actions .btn-ghost{width:100%}
}

/* roulang page: category2 */
:root{
  --bg-base:#050A12;
  --bg-deep:#08111D;
  --bg-elev:#0C1A2A;
  --glass-fill:rgba(255,255,255,.045);
  --glass-fill-strong:rgba(255,255,255,.07);
  --glass-stroke:rgba(140,190,255,.16);
  --glass-stroke-hi:rgba(140,190,255,.30);
  --primary:#12D6F5;
  --primary-deep:#0A6CFF;
  --primary-glow:rgba(18,214,245,.40);
  --accent:#FF8A3D;
  --gold:#E9C46A;
  --text-hi:#EAF2FF;
  --text-mid:#A9BBD1;
  --text-low:#6F8199;
  --ok:#35D0A0;
  --warn:#FFB020;
  --line:rgba(255,255,255,.08);
  --radius-lg:18px;
  --radius-sm:12px;
  --shadow-soft:0 0 0 1px rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.5);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- 基础 ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;
  background:var(--bg-base);
  color:var(--text-mid);
  font-family:"HarmonyOS Sans SC","PingFang SC","Noto Sans SC","Microsoft YaHei",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--text-hi);font-weight:700;line-height:1.25;letter-spacing:-.02em;font-style:normal}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

/* ---------- 布局 ---------- */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
@media (min-width:768px){.wrap{padding:0 24px}}
@media (min-width:1024px){.wrap{padding:0 32px}}

.section{padding:64px 0}
.section-tight{padding:40px 0 8px}
@media (min-width:1024px){
  .section{padding:96px 0}
  .section-tight{padding:56px 0 8px}
}
.divider{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;color:var(--primary);text-transform:none}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--primary);opacity:.7}
.section-head{max-width:760px;margin-bottom:36px}
.section-title{font-size:26px}
@media (min-width:1024px){.section-title{font-size:36px}}
.section-sub{margin-top:14px;color:var(--text-mid);font-size:16px}

/* ---------- 导航 ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(8,17,29,.78);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px}
@media (min-width:1024px){.header-inner{height:76px;gap:28px}}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text-hi);font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
@media (min-width:1024px){.brand{font-size:17px}}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;color:var(--primary);background:var(--glass-fill);border:1px solid var(--glass-stroke)}
.main-nav{display:none}
@media (min-width:1024px){.main-nav{display:flex;align-items:center;gap:34px}}
.nav-link{position:relative;display:inline-block;font-size:15px;color:var(--text-mid);padding:6px 0;transition:color .2s var(--ease)}
.nav-link:hover{color:var(--text-hi)}
.nav-link::after{content:'';position:absolute;left:50%;bottom:-6px;width:60%;height:2px;border-radius:2px;background:var(--primary);transform:translateX(-50%) scaleX(0);transition:transform .24s var(--ease)}
.nav-link:hover::after,.nav-link.is-active::after{transform:translateX(-50%) scaleX(1)}
.nav-link.is-active{color:var(--text-hi)}
.header-actions{display:flex;align-items:center;gap:10px}
.pill-cta{
  display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;
  font-size:14px;font-weight:600;color:var(--primary);
  background:var(--glass-fill);border:1px solid var(--glass-stroke);
  transition:color .24s var(--ease),background .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);
}
.pill-cta:hover{
  color:#031018;
  background:linear-gradient(120deg,var(--primary),var(--primary-deep));
  border-color:transparent;
  box-shadow:0 0 22px var(--primary-glow);
}
@media (max-width:520px){.pill-cta{display:none}}
.menu-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;border-radius:12px}
.menu-toggle span{display:block;width:22px;height:1.5px;background:var(--text-hi);transition:transform .24s var(--ease),opacity .24s var(--ease)}
.menu-toggle.is-open span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
@media (min-width:1024px){.menu-toggle{display:none}}
.mobile-panel{
  position:fixed;left:0;right:0;top:64px;bottom:0;z-index:55;
  padding:8px 20px 40px;
  background:rgba(8,17,29,.96);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s var(--ease);
  overflow-y:auto;
}
.mobile-panel.is-open{opacity:1;visibility:visible;transform:translateY(0)}
@media (min-width:1024px){.mobile-panel{display:none}}
.mobile-panel a{display:block;padding:18px 4px;font-size:16px;color:var(--text-mid);border-bottom:1px solid var(--line);transition:color .2s var(--ease),padding-left .2s var(--ease)}
.mobile-panel a:hover{color:var(--text-hi);padding-left:8px}
.mobile-panel a.is-active{color:var(--primary)}
.mobile-panel .pill-cta{display:inline-flex;margin-top:24px;color:var(--primary);border-bottom:0}

/* ---------- Hero ---------- */
.page-hero{
  position:relative;
  padding:126px 0 54px;
  overflow:hidden;
  background-image:
    linear-gradient(180deg,rgba(5,10,18,.62) 0%,rgba(5,10,18,.74) 52%,var(--bg-base) 100%),
    url('/assets/images/backpic/back-2.png');
  background-size:cover;
  background-position:center 38%;
  background-repeat:no-repeat;
}
.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 84% 16%,rgba(18,214,245,.16),transparent 46%),
                   radial-gradient(circle at 8% 92%,rgba(10,108,255,.10),transparent 44%);
}
.page-hero::after{
  content:'';position:absolute;left:-12%;bottom:-42%;width:74%;height:78%;
  border:1px solid rgba(18,214,245,.09);border-radius:50%;
  pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:2}
@media (min-width:1024px){.page-hero{padding:158px 0 72px}}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  height:30px;padding:0 14px;border-radius:999px;font-size:13px;color:var(--primary);
  background:var(--glass-fill);border:1px solid var(--glass-stroke);
}
.hero-badge i{width:5px;height:5px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary-glow)}
.hero-title{margin-top:22px;font-size:30px;line-height:1.22;max-width:900px}
@media (min-width:1024px){.hero-title{font-size:48px}}
.hero-sub{margin-top:18px;font-size:17px;color:var(--text-mid);max-width:720px}
@media (min-width:1024px){.hero-sub{font-size:20px}}
.hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px}

/* ---------- 按钮 ---------- */
.btn-glow{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 26px;border-radius:12px;
  font-size:15px;font-weight:600;color:#031018;
  background:linear-gradient(120deg,var(--primary),var(--primary-deep));
  box-shadow:0 0 24px var(--primary-glow);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),filter .24s var(--ease);
}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 0 34px var(--primary-glow);filter:brightness(1.08)}
.btn-glow:active{transform:translateY(1px)}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 24px;border-radius:12px;
  font-size:15px;font-weight:500;color:var(--text-hi);
  background:var(--glass-fill);border:1px solid var(--glass-stroke);
  transition:transform .24s var(--ease),background .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease);
}
.btn-ghost:hover{transform:translateY(-2px);background:var(--glass-fill-strong);border-color:var(--glass-stroke-hi);box-shadow:0 0 22px rgba(18,214,245,.16)}
.btn-ghost:active{transform:translateY(1px)}
.btn-arrow{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--primary);transition:gap .2s var(--ease),color .2s var(--ease)}
.btn-arrow:hover{gap:10px}

/* ---------- 面包屑 ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px;font-size:14px;color:var(--text-low)}
.crumb a{color:var(--text-low);transition:color .2s var(--ease)}
.crumb a:hover{color:var(--primary)}
.crumb .sep{color:rgba(255,255,255,.18)}
.crumb .cur{color:var(--text-mid)}

/* ---------- 指标条 ---------- */
.metric-strip{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);
  border:1px solid var(--glass-stroke);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-soft);
}
@media (min-width:640px){.metric-strip{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.metric-strip{grid-template-columns:repeat(4,1fr)}}
.metric{padding:26px 24px;background:rgba(12,26,42,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);transition:background .24s var(--ease)}
.metric:hover{background:rgba(18,214,245,.06)}
.metric b{display:block;font-size:26px;font-weight:700;color:var(--text-hi);letter-spacing:-.02em}
.metric span{display:block;margin-top:6px;font-size:13px;color:var(--text-low)}

/* ---------- 图文交错 ---------- */
.alt-list{border-top:1px solid var(--line)}
.alt-row{display:grid;gap:26px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line)}
@media (min-width:1024px){
  .alt-row{grid-template-columns:1.02fr .98fr;gap:56px;padding:46px 0}
  .alt-row.is-reverse .alt-media{order:2}
}
.alt-media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--glass-stroke);background:var(--bg-elev);
  box-shadow:var(--shadow-soft);
  transition:transform .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease);
}
.alt-media:hover{transform:translateY(-3px);border-color:var(--glass-stroke-hi);box-shadow:var(--shadow-soft),0 0 30px rgba(18,214,245,.16)}
.alt-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.alt-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,18,.06),rgba(5,10,18,.36));pointer-events:none}
.alt-tag{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;font-size:12px;color:var(--primary);background:var(--glass-fill);border:1px solid var(--glass-stroke)}
.alt-body h3{margin-top:16px;font-size:21px;font-weight:600}
@media (min-width:1024px){.alt-body h3{font-size:23px}}
.alt-body p{margin-top:14px;color:var(--text-mid)}
.tick-list{margin-top:18px;display:grid;gap:10px}
.tick-list li{position:relative;padding-left:18px;font-size:15px;color:var(--text-mid)}
.tick-list li::before{content:'';position:absolute;left:0;top:12px;width:7px;height:7px;border-radius:2px;background:var(--primary);box-shadow:0 0 10px rgba(18,214,245,.5)}

/* ---------- 表格 ---------- */
.glass-panel{
  background:var(--glass-fill);border:1px solid var(--glass-stroke);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
}
.table-scroll{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--glass-stroke);background:var(--glass-fill);box-shadow:var(--shadow-soft);position:relative}
.info-table{width:100%;min-width:640px;border-collapse:collapse}
.info-table caption{text-align:left;padding:20px 22px 0;color:var(--text-low);font-size:13px}
.info-table th{
  padding:16px 22px;text-align:left;font-size:14px;font-weight:600;color:var(--text-hi);
  background:var(--glass-fill-strong);border-bottom:1px solid var(--line);white-space:nowrap;
}
.info-table td{padding:16px 22px;font-size:15px;color:var(--text-mid);border-bottom:1px solid var(--line)}
.info-table td:first-child{color:var(--text-hi);font-weight:600}
.info-table tbody tr{transition:background .2s var(--ease)}
.info-table tbody tr:hover{background:rgba(18,214,245,.045)}
.info-table tbody tr:last-child td{border-bottom:0}
.info-table .ok{color:var(--ok)}
.table-hint{margin-top:12px;font-size:13px;color:var(--text-low)}

/* ---------- 交通卡 ---------- */
.transit-grid{display:grid;gap:18px;margin-top:26px}
@media (min-width:768px){.transit-grid{grid-template-columns:repeat(3,1fr)}}
.transit-card{
  padding:24px;border-radius:var(--radius-sm);
  background:var(--glass-fill);border:1px solid var(--glass-stroke);
  transition:transform .24s var(--ease),border-color .24s var(--ease),background .24s var(--ease),box-shadow .24s var(--ease);
}
.transit-card:hover{transform:translateY(-3px);border-color:var(--glass-stroke-hi);background:var(--glass-fill-strong);box-shadow:0 0 26px rgba(18,214,245,.14)}
.transit-card h3{font-size:17px;font-weight:600}
.transit-card p{margin-top:10px;font-size:14px;color:var(--text-mid)}
.transit-card span.k{display:block;margin-top:14px;font-size:13px;color:var(--text-low)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);margin-top:8px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:22px;
  padding:24px 0;cursor:pointer;list-style:none;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q h3{font-size:18px;font-weight:600;line-height:1.55;color:var(--text-hi);transition:color .2s var(--ease)}
.faq-q:hover h3{color:var(--primary)}
.faq-icon{position:relative;flex:0 0 auto;width:22px;height:22px;margin-top:2px;transition:transform .2s var(--ease)}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;left:50%;top:50%;background:var(--primary);border-radius:2px;transform:translate(-50%,-50%)}
.faq-icon::before{width:12px;height:1.5px}
.faq-icon::after{width:1.5px;height:12px;transition:opacity .2s var(--ease)}
details[open] .faq-icon{transform:rotate(180deg)}
details[open] .faq-icon::after{opacity:0}
.faq-a{padding:0 0 26px;max-width:78ch;color:var(--text-mid);font-size:15px}

/* ---------- CTA 细带 ---------- */
.cta-band{
  position:relative;overflow:hidden;text-align:center;
  padding:44px 24px;border-radius:var(--radius-lg);
  background:var(--glass-fill);border:1px solid var(--glass-stroke);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
}
.cta-band::before{
  content:'';position:absolute;left:50%;top:-70%;width:120%;height:150%;
  transform:translateX(-50%);
  border:1px solid rgba(18,214,245,.10);border-radius:50%;
  pointer-events:none;
}
.cta-band h2{position:relative;font-size:24px}
@media (min-width:1024px){.cta-band h2{font-size:30px}}
.cta-band p{position:relative;margin:14px auto 0;max-width:620px;color:var(--text-mid);font-size:15px}
.cta-actions{position:relative;margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--bg-deep);border-top:1px solid var(--line);padding:56px 0 0;margin-top:8px}
.footer-grid{display:grid;gap:36px}
@media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}}
.footer-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text-hi);font-weight:700;font-size:16px}
.footer-desc{margin-top:16px;font-size:14px;color:var(--text-low);max-width:320px;line-height:1.9}
.footer-col h4{font-size:14px;font-weight:600;color:var(--text-hi);letter-spacing:.02em}
.footer-col ul{margin-top:16px;display:grid;gap:11px}
.footer-col a{font-size:14px;color:var(--text-low);transition:color .2s var(--ease),padding-left .2s var(--ease)}
.footer-col a:hover{color:var(--primary);padding-left:4px}
.footer-col .plain{font-size:14px;color:var(--text-low)}
.footer-bottom{
  margin-top:44px;padding:20px 0 28px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:13px;color:var(--text-low);
}

/* ---------- 响应式细节 ---------- */
@media (max-width:520px){
  .hero-title{font-size:28px}
  .section-title{font-size:24px}
  .metric{padding:22px 20px}
  .cta-band{padding:36px 18px}
}

/* roulang page: category3 */
:root{
    --bg-base:#050A12;
    --bg-deep:#08111D;
    --bg-elev:#0C1A2A;
    --glass-fill:rgba(255,255,255,.045);
    --glass-fill-strong:rgba(255,255,255,.07);
    --glass-stroke:rgba(140,190,255,.16);
    --glass-stroke-hi:rgba(140,190,255,.30);
    --primary:#12D6F5;
    --primary-deep:#0A6CFF;
    --primary-glow:rgba(18,214,245,.40);
    --accent:#FF8A3D;
    --gold:#E9C46A;
    --text-hi:#EAF2FF;
    --text-mid:#A9BBD1;
    --text-low:#6F8199;
    --ok:#35D0A0;
    --warn:#FFB020;
    --line:rgba(255,255,255,.08);
    --radius-lg:18px;
    --radius-sm:12px;
    --shadow-base:0 0 0 1px rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.5);
    --ease:cubic-bezier(.2,.7,.3,1);
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg-base);
    color:var(--text-mid);
    font-family:"HarmonyOS Sans SC","PingFang SC","Noto Sans SC","Microsoft YaHei",Inter,system-ui,-apple-system,sans-serif;
    font-size:16px;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;border:0;}
  a{color:inherit;text-decoration:none;}
  ul,ol{margin:0;padding:0;list-style:none;}
  h1,h2,h3,h4{margin:0;color:var(--text-hi);font-weight:700;letter-spacing:-.02em;line-height:1.2;}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
  :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px;}
  .num{font-variant-numeric:tabular-nums;font-family:Inter,system-ui,sans-serif;}

  /* 容器 */
  .wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px;}

  /* 导航 */
  .site-header{
    position:fixed;top:0;left:0;right:0;z-index:90;
    border-bottom:1px solid transparent;
    transition:background .28s var(--ease),border-color .28s var(--ease),backdrop-filter .28s var(--ease);
  }
  .site-header.is-scrolled{
    background:rgba(8,17,29,.74);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-bottom-color:var(--line);
  }
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px;}
  .brand{display:inline-flex;align-items:center;gap:10px;color:var(--text-hi);font-size:18px;font-weight:700;letter-spacing:-.01em;transition:opacity .2s var(--ease);}
  .brand:hover{opacity:.86;}
  .brand-mark{
    display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:10px;color:var(--primary);
    background:var(--glass-fill);border:1px solid var(--glass-stroke);
  }
  .main-nav{display:flex;align-items:center;gap:36px;}
  .nav-link{position:relative;font-size:15px;color:var(--text-mid);padding:6px 0;transition:color .24s var(--ease);}
  .nav-link::after{
    content:"";position:absolute;left:50%;bottom:0;height:2px;width:60%;border-radius:2px;
    background:var(--primary);transform:translateX(-50%) scaleX(0);transform-origin:center;
    transition:transform .24s var(--ease);
  }
  .nav-link:hover{color:var(--text-hi);}
  .nav-link:hover::after{transform:translateX(-50%) scaleX(1);}
  .nav-link.is-active{color:var(--text-hi);}
  .nav-link.is-active::after{transform:translateX(-50%) scaleX(1);}
  .header-actions{display:flex;align-items:center;gap:14px;}
  .pill-cta{
    display:inline-flex;align-items:center;justify-content:center;
    height:40px;padding:0 20px;border-radius:999px;font-size:14px;
    color:var(--primary);background:var(--glass-fill);border:1px solid var(--glass-stroke);
    transition:background .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease),box-shadow .24s var(--ease);
  }
  .pill-cta:hover{
    color:#02121C;background:linear-gradient(120deg,var(--primary),var(--primary-deep));
    border-color:transparent;box-shadow:0 0 24px var(--primary-glow);
  }
  .nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:6px;border-radius:10px;border:1px solid var(--glass-stroke);background:var(--glass-fill);}
  .nav-toggle span{display:block;width:18px;height:1.6px;border-radius:2px;background:var(--text-hi);transition:transform .24s var(--ease);}
  .mobile-panel{
    position:fixed;inset:64px 0 0 0;z-index:88;
    background:rgba(6,12,22,.94);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    padding:12px 20px 32px;
    display:none;flex-direction:column;
    border-top:1px solid var(--line);
  }
  .mobile-panel.is-open{display:flex;}
  .mobile-panel a{
    display:block;padding:16px 4px;font-size:16px;color:var(--text-mid);
    border-bottom:1px solid var(--line);transition:color .2s var(--ease);
  }
  .mobile-panel a:hover{color:var(--text-hi);}
  .mobile-panel a.is-active{color:var(--primary);}
  .mobile-panel .m-cta{margin-top:24px;border-bottom:0;}
  .mobile-panel .m-cta span{
    display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;border-radius:999px;
    color:var(--primary);border:1px solid var(--glass-stroke);background:var(--glass-fill);font-size:15px;
  }

  /* Hero */
  .page-hero{
    position:relative;overflow:hidden;
    padding:172px 0 76px;
    background-image:url('/assets/images/backpic/back-2.png');
    background-size:cover;background-position:center;
  }
  .page-hero::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(5,10,18,.80) 0%,rgba(5,10,18,.90) 55%,var(--bg-base) 100%);
  }
  .page-hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(circle at 88% 22%, rgba(18,214,245,.14), transparent 46%),
                     linear-gradient(rgba(140,190,255,.05) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(140,190,255,.05) 1px, transparent 1px);
    background-size:auto, 78px 78px, 78px 78px;
    mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 78%);
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 78%);
  }
  .hero-inner{position:relative;z-index:2;max-width:820px;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    height:30px;padding:0 14px;border-radius:999px;font-size:13px;letter-spacing:.02em;
    color:var(--primary);background:var(--glass-fill);border:1px solid var(--glass-stroke);
  }
  .eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary-glow);}
  .page-hero h1{
    margin:22px 0 0;font-size:50px;line-height:1.16;letter-spacing:-.02em;
  }
  .page-hero h1 em{font-style:normal;color:var(--primary);}
  .hero-sub{margin:20px 0 0;font-size:20px;line-height:1.7;color:var(--text-mid);max-width:660px;}
  .hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;}
  .crumbs{position:relative;z-index:2;margin-top:34px;font-size:14px;color:var(--text-low);display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
  .crumbs a{transition:color .2s var(--ease);}
  .crumbs a:hover{color:var(--text-hi);}
  .crumbs .sep{opacity:.5;}
  .crumbs .current{color:var(--text-mid);}

  /* 按钮 */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:48px;padding:0 26px;border-radius:12px;font-size:15px;font-weight:600;
    transition:box-shadow .24s var(--ease),transform .24s var(--ease),background .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease);
  }
  .btn-glow{
    color:#02121C;background:linear-gradient(120deg,var(--primary),var(--primary-deep));
    box-shadow:0 0 24px var(--primary-glow);
  }
  .btn-glow:hover{box-shadow:0 0 34px var(--primary-glow);filter:brightness(1.06);}
  .btn-glow:active{transform:translateY(1px);}
  .btn-ghost{
    color:var(--text-hi);background:var(--glass-fill);border:1px solid var(--glass-stroke);
  }
  .btn-ghost:hover{border-color:var(--glass-stroke-hi);background:var(--glass-fill-strong);transform:translateY(-2px);}
  .btn-ghost:active{transform:translateY(0);}
  .link-arrow{
    display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--primary);
    transition:gap .24s var(--ease),color .24s var(--ease);
  }
  .link-arrow::after{content:"→";font-size:14px;}
  .link-arrow:hover{gap:12px;color:#61E4FA;}

  /* 板块通用 */
  .section{padding:96px 0;}
  .section-tight{padding:72px 0;}
  .hairline{
    height:1px;border:0;margin:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  }
  .sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;}
  .sec-head h2{font-size:36px;line-height:1.2;}
  .sec-head p{margin:14px 0 0;max-width:640px;font-size:16px;color:var(--text-mid);}
  .sec-tag{
    display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;
    font-size:12px;color:var(--primary);background:var(--glass-fill);border:1px solid var(--glass-stroke);
    margin-bottom:16px;
  }

  /* 玻璃卡 */
  .glass-card{
    position:relative;
    background:var(--glass-fill);
    border:1px solid var(--glass-stroke);
    border-radius:var(--radius-lg);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 20px 60px rgba(0,0,0,.42);
    transition:border-color .24s var(--ease),transform .24s var(--ease),box-shadow .24s var(--ease);
  }
  .glass-card::before{
    content:"";position:absolute;top:0;left:12px;right:12px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  }
  .glass-card:hover{border-color:var(--glass-stroke-hi);transform:translateY(-3px);box-shadow:0 24px 66px rgba(0,0,0,.5),0 0 26px rgba(18,214,245,.16);}

  /* 筛选胶囊 */
  .chip-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px;}
  .chip{
    height:42px;padding:0 20px;border-radius:999px;font-size:14px;
    color:var(--text-mid);background:var(--glass-fill);border:1px solid var(--glass-stroke);
    transition:color .24s var(--ease),border-color .24s var(--ease),background .24s var(--ease),box-shadow .24s var(--ease);
  }
  .chip:hover{color:var(--text-hi);border-color:var(--glass-stroke-hi);}
  .chip.is-active{
    color:#02121C;background:linear-gradient(120deg,var(--primary),var(--primary-deep));
    border-color:transparent;box-shadow:0 0 22px rgba(18,214,245,.34);
  }

  /* 课程矩阵 */
  .course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
  .course-card{
    display:flex;flex-direction:column;overflow:hidden;padding:0;
  }
  .course-card.is-hidden{display:none;}
  .course-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--bg-elev);}
  .course-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
  .course-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,18,.10),rgba(5,10,18,.62));}
  .course-card:hover .course-thumb img{transform:scale(1.045);}
  .course-badge{
    position:absolute;top:14px;left:14px;z-index:2;
    display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;
    font-size:12px;color:var(--text-hi);background:rgba(8,17,29,.66);
    border:1px solid var(--glass-stroke);backdrop-filter:blur(8px);
  }
  .course-badge.hot{color:var(--accent);border-color:rgba(255,138,61,.38);}
  .course-body{padding:26px 26px 24px;display:flex;flex-direction:column;flex:1;}
  .course-body h3{font-size:22px;}
  .course-desc{margin:12px 0 0;font-size:15px;color:var(--text-mid);line-height:1.8;}
  .course-meta{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2px;margin:20px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .course-meta li{padding:14px 6px 14px 0;}
  .course-meta span{display:block;font-size:12px;color:var(--text-low);letter-spacing:.02em;}
  .course-meta strong{display:block;margin-top:4px;font-size:14px;font-weight:600;color:var(--text-hi);font-variant-numeric:tabular-nums;}
  .course-foot{margin-top:auto;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
  .course-price{font-size:14px;color:var(--text-low);}
  .course-price b{color:var(--text-hi);font-size:19px;font-weight:700;margin-right:2px;}

  /* 进阶路径 */
  .path{
    position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
    padding:36px 30px;border-radius:var(--radius-lg);
    background:var(--glass-fill);border:1px solid var(--glass-stroke);
  }
  .path::before{
    content:"";position:absolute;left:8%;right:8%;top:52px;height:1px;
    background:linear-gradient(90deg,rgba(18,214,245,.06),rgba(18,214,245,.5),rgba(18,214,245,.06));
  }
  .path-step{position:relative;padding-top:0;}
  .path-dot{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;font-size:13px;font-weight:700;
    color:var(--primary);background:var(--bg-deep);border:1px solid var(--glass-stroke-hi);
    box-shadow:0 0 18px rgba(18,214,245,.22);position:relative;z-index:2;
  }
  .path-step h3{margin-top:18px;font-size:18px;}
  .path-step p{margin:8px 0 0;font-size:14px;color:var(--text-mid);line-height:1.75;}

  /* 数据条 */
  .stat-strip{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    border:1px solid var(--glass-stroke);border-radius:var(--radius-lg);overflow:hidden;background:var(--glass-fill);
  }
  .stat-strip li{padding:28px 24px;border-right:1px solid var(--line);}
  .stat-strip li:last-child{border-right:0;}
  .stat-strip .val{font-size:34px;font-weight:700;color:var(--text-hi);line-height:1.1;font-variant-numeric:tabular-nums;}
  .stat-strip .val small{font-size:15px;font-weight:600;color:var(--text-mid);margin-left:4px;}
  .stat-strip .lab{margin-top:10px;font-size:13px;color:var(--text-low);}

  /* 图文交错 */
  .split{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;}
  .split.reverse .split-media{order:2;}
  .split-media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--glass-stroke);position:relative;}
  .split-media img{width:100%;aspect-ratio:4/3;object-fit:cover;}
  .split-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,18,.08),rgba(5,10,18,.55));}
  .split h2{font-size:34px;}
  .split p{margin:18px 0 0;font-size:16px;color:var(--text-mid);}
  .tick-list{margin-top:24px;display:grid;gap:12px;}
  .tick-list li{display:flex;gap:12px;font-size:15px;color:var(--text-mid);}
  .tick-list li::before{
    content:"";flex:none;width:7px;height:7px;margin-top:10px;border-radius:2px;
    background:var(--primary);box-shadow:0 0 10px rgba(18,214,245,.5);
  }

  /* 报名与退改 */
  .rules{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;}
  .rule-list{display:grid;gap:0;margin-top:6px;}
  .rule-list li{
    display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);
  }
  .rule-list li:last-child{border-bottom:0;}
  .rule-num{
    flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;color:var(--primary);
    background:rgba(18,214,245,.08);border:1px solid rgba(18,214,245,.22);
  }
  .rule-list h3{font-size:17px;}
  .rule-list p{margin:6px 0 0;font-size:14px;color:var(--text-mid);line-height:1.75;}
  .note-card{padding:30px;border-radius:var(--radius-lg);background:var(--glass-fill);border:1px solid var(--glass-stroke);}
  .note-card h3{font-size:19px;}
  .note-card ul{margin-top:16px;display:grid;gap:14px;}
  .note-card li{font-size:14px;color:var(--text-mid);display:flex;gap:10px;}
  .note-card li span{color:var(--text-low);}

  /* FAQ */
  .faq-list{border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:26px 0;text-align:left;font-size:19px;font-weight:600;color:var(--text-hi);
    transition:color .2s var(--ease);
  }
  .faq-q:hover{color:var(--primary);}
  .faq-icon{
    flex:none;position:relative;width:22px;height:22px;
    transition:transform .2s var(--ease);
  }
  .faq-icon::before,.faq-icon::after{
    content:"";position:absolute;left:50%;top:50%;background:var(--primary);border-radius:2px;
  }
  .faq-icon::before{width:14px;height:1.6px;transform:translate(-50%,-50%);}
  .faq-icon::after{width:1.6px;height:14px;transform:translate(-50%,-50%);transition:opacity .2s var(--ease);}
  .faq-item.is-open .faq-icon{transform:rotate(180deg);}
  .faq-item.is-open .faq-icon::after{opacity:0;}
  .faq-a{
    max-height:0;overflow:hidden;
    transition:max-height .28s var(--ease);
  }
  .faq-a p{margin:0;padding:0 0 26px;max-width:78ch;font-size:15px;line-height:1.85;color:var(--text-mid);}

  /* CTA 细带 */
  .cta-band{
    position:relative;overflow:hidden;
    padding:56px 48px;border-radius:24px;
    background:linear-gradient(120deg,rgba(12,26,42,.92),rgba(8,17,29,.92));
    border:1px solid var(--glass-stroke);
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px;
  }
  .cta-band::before{
    content:"";position:absolute;right:-60px;top:-80px;width:320px;height:320px;border-radius:50%;
    border:1px solid rgba(18,214,245,.18);opacity:.85;
  }
  .cta-band::after{
    content:"";position:absolute;right:10px;bottom:-140px;width:380px;height:380px;border-radius:50%;
    border:1px solid rgba(18,214,245,.10);
  }
  .cta-band h2{position:relative;z-index:2;font-size:30px;}
  .cta-band p{position:relative;z-index:2;margin:12px 0 0;font-size:15px;color:var(--text-mid);max-width:600px;}
  .cta-band .cta-actions{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:14px;}

  /* 页脚 */
  .site-footer{background:var(--bg-deep);border-top:1px solid var(--line);padding:76px 0 28px;margin-top:0;}
  .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:44px;}
  .footer-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text-hi);font-size:17px;font-weight:700;}
  .footer-desc{margin:18px 0 0;font-size:14px;line-height:1.8;color:var(--text-low);max-width:320px;}
  .footer-col h4{font-size:15px;color:var(--text-hi);font-weight:600;letter-spacing:.01em;}
  .footer-col ul{margin-top:18px;display:grid;gap:12px;}
  .footer-col a{font-size:14px;color:var(--text-low);transition:color .2s var(--ease);}
  .footer-col a:hover{color:var(--primary);}
  .footer-col .plain{font-size:14px;color:var(--text-low);}
  .footer-bottom{
    margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
    font-size:13px;color:var(--text-low);
  }

  /* 响应式 */
  @media (max-width:1024px){
    .wrap{padding:0 24px;}
    .main-nav{display:none;}
    .nav-toggle{display:flex;}
    .header-inner{height:64px;}
    .mobile-panel{inset:64px 0 0 0;}
    .page-hero{padding:140px 0 64px;}
    .page-hero h1{font-size:38px;}
    .hero-sub{font-size:18px;}
    .section{padding:80px 0;}
    .sec-head h2{font-size:30px;}
    .course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
    .path{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px;}
    .path::before{display:none;}
    .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
    .stat-strip li:nth-child(2){border-right:0;}
    .stat-strip li:nth-child(1),.stat-strip li:nth-child(2){border-bottom:1px solid var(--line);}
    .split{grid-template-columns:1fr;gap:32px;}
    .split.reverse .split-media{order:0;}
    .split h2{font-size:28px;}
    .rules{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  }
  @media (max-width:640px){
    .wrap{padding:0 20px;}
    .brand span.brand-name{font-size:16px;}
    .pill-cta{display:none;}
    .page-hero{padding:118px 0 52px;}
    .page-hero h1{font-size:30px;}
    .hero-sub{font-size:16px;}
    .hero-actions{width:100%;}
    .hero-actions .btn{width:100%;}
    .section{padding:64px 0;}
    .sec-head h2{font-size:25px;}
    .sec-head{margin-bottom:32px;}
    .course-grid{grid-template-columns:1fr;gap:20px;}
    .course-meta{grid-template-columns:repeat(3,minmax(0,1fr));}
    .course-meta strong{font-size:13px;}
    .path{grid-template-columns:1fr;padding:28px 22px;}
    .stat-strip{grid-template-columns:1fr;}
    .stat-strip li{border-right:0;border-bottom:1px solid var(--line);}
    .stat-strip li:last-child{border-bottom:0;}
    .stat-strip .val{font-size:28px;}
    .cta-band{padding:36px 24px;border-radius:18px;}
    .cta-band h2{font-size:24px;}
    .cta-band .cta-actions{width:100%;}
    .cta-band .cta-actions .btn{width:100%;}
    .faq-q{font-size:17px;padding:22px 0;}
    .footer-grid{grid-template-columns:1fr;gap:32px;}
    .footer-bottom{flex-direction:column;}
  }

/* roulang page: category4 */
:root{
    --bg-base:#050A12;
    --bg-deep:#08111D;
    --bg-elev:#0C1A2A;
    --glass-fill:rgba(255,255,255,0.045);
    --glass-fill-strong:rgba(255,255,255,0.07);
    --glass-stroke:rgba(140,190,255,0.16);
    --glass-stroke-hi:rgba(140,190,255,0.30);
    --primary:#12D6F5;
    --primary-deep:#0A6CFF;
    --primary-glow:rgba(18,214,245,0.40);
    --accent:#FF8A3D;
    --gold:#E9C46A;
    --text-hi:#EAF2FF;
    --text-mid:#A9BBD1;
    --text-low:#6F8199;
    --body-copy:#C8D6E6;
    --ok:#35D0A0;
    --warn:#FFB020;
    --line:rgba(255,255,255,0.08);
    --radius-card:18px;
    --radius-mini:12px;
    --ease:cubic-bezier(.2,.7,.3,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg-base);
    color:var(--text-hi);
    font-family:"HarmonyOS Sans SC","PingFang SC","Noto Sans SC","Microsoft YaHei",Inter,system-ui,-apple-system,sans-serif;
    font-size:16px;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; }
  input,textarea,select{ font-family:inherit; font-size:15px; }
  ::selection{ background:rgba(18,214,245,0.28); color:#fff; }
  :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }

  .num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

  .wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 32px; }
  @media (max-width:1024px){ .wrap{ padding:0 24px; } }
  @media (max-width:640px){ .wrap{ padding:0 20px; } }

  /* ---------- 导航 ---------- */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:60;
    transition:background 240ms var(--ease), border-color 240ms var(--ease), backdrop-filter 240ms var(--ease);
    border-bottom:1px solid transparent;
  }
  .site-header.is-scrolled{
    background:rgba(8,17,29,0.82);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-bottom-color:var(--line);
  }
  .header-inner{
    height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  }
  .brand{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--text-hi); }
  .brand-mark{
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--primary);
    background:linear-gradient(150deg,rgba(18,214,245,0.18),rgba(10,108,255,0.10));
    box-shadow:0 0 0 1px var(--glass-stroke), 0 0 18px rgba(18,214,245,0.18);
    flex:0 0 auto;
  }
  .main-nav{ display:flex; align-items:center; gap:36px; }
  .nav-link{
    position:relative; font-size:15px; color:var(--text-mid);
    padding:6px 0; transition:color 200ms var(--ease);
  }
  .nav-link::after{
    content:""; position:absolute; left:20%; right:20%; bottom:-2px; height:2px; border-radius:2px;
    background:linear-gradient(90deg,var(--primary),var(--primary-deep));
    opacity:0; transform:scaleX(.4); transition:opacity 200ms var(--ease), transform 240ms var(--ease);
  }
  .nav-link:hover{ color:var(--text-hi); }
  .nav-link:hover::after{ opacity:.5; transform:scaleX(1); }
  .nav-link.is-active{ color:var(--text-hi); }
  .nav-link.is-active::after{ opacity:1; transform:scaleX(1); }

  .nav-cta{
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 20px; border-radius:999px; font-size:14px; color:var(--primary);
    background:var(--glass-fill); border:1px solid var(--glass-stroke);
    transition:all 240ms var(--ease);
  }
  .nav-cta:hover{
    color:#04121B; border-color:transparent;
    background:linear-gradient(120deg,var(--primary),var(--primary-deep));
    box-shadow:0 0 26px var(--primary-glow);
  }
  .nav-cta:active{ transform:translateY(1px); }

  .burger{
    display:none; width:44px; height:44px; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--glass-stroke); border-radius:12px;
  }
  .burger span{ display:block; width:18px; height:1.6px; background:var(--text-hi); border-radius:2px; }
  .burger span + span{ margin-top:6px; }

  .mobile-panel{
    position:fixed; inset:0; z-index:70; display:none;
    background:rgba(5,10,18,0.94);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    padding:88px 24px 32px;
  }
  .mobile-panel.is-open{ display:block; }
  .mobile-panel a.m-link{
    display:block; padding:18px 4px; font-size:17px; color:var(--text-mid);
    border-bottom:1px solid var(--line);
  }
  .mobile-panel a.m-link.is-active{ color:var(--primary); }
  .mobile-close{
    position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:12px;
    background:var(--glass-fill); border:1px solid var(--glass-stroke); color:var(--text-hi); font-size:18px;
  }
  .mobile-cta{
    margin-top:28px; display:flex; justify-content:center; align-items:center;
    padding:14px 24px; border-radius:999px; color:#04121B; font-size:15px;
    background:linear-gradient(120deg,var(--primary),var(--primary-deep));
    box-shadow:0 0 24px var(--primary-glow);
  }

  @media (max-width:1024px){
    .main-nav, .header-cta{ display:none; }
    .burger{ display:flex; flex-direction:column; }
    .header-inner{ height:64px; }
  }

  /* ---------- 通用组件 ---------- */
  .glass-card{
    background:var(--glass-fill);
    border:1px solid var(--glass-stroke);
    border-radius:var(--radius-card);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 20px 60px rgba(0,0,0,0.45);
    transition:transform 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
    position:relative; overflow:hidden;
  }
  .glass-card::before{
    content:""; position:absolute; inset:0 0 auto 0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);
    opacity:.7;
  }
  .glass-card:hover{
    transform:translateY(-3px);
    border-color:var(--glass-stroke-hi);
    box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.5), 0 0 30px rgba(18,214,245,0.16);
  }

  .btn-glow{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:14px 30px; border-radius:12px; border:none;
    font-size:15px; font-weight:600; color:#04121B; letter-spacing:.01em;
    background:linear-gradient(120deg,var(--primary),var(--primary-deep));
    box-shadow:0 0 24px var(--primary-glow);
    transition:all 240ms var(--ease);
  }
  .btn-glow:hover{ box-shadow:0 0 34px var(--primary-glow); filter:brightness(1.08); transform:translateY(-2px); }
  .btn-glow:active{ transform:translateY(1px); }

  .btn-ghost{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:13px 28px; border-radius:12px; font-size:15px; color:var(--text-hi);
    background:var(--glass-fill); border:1px solid var(--glass-stroke);
    transition:all 240ms var(--ease);
  }
  .btn-ghost:hover{ border-color:var(--glass-stroke-hi); background:var(--glass-fill-strong); transform:translateY(-2px); }
  .btn-ghost:active{ transform:translateY(1px); }

  .badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 13px; border-radius:999px; font-size:12.5px;
    background:var(--glass-fill); border:1px solid var(--glass-stroke); color:var(--primary);
    letter-spacing:.02em;
  }
  .badge-gold{ color:var(--gold); border-color:rgba(233,196,106,0.42); }
  .badge-muted{ color:var(--text-mid); }

  .crumb{ font-size:14px; color:var(--text-low); }
  .crumb a{ color:var(--text-low); transition:color 200ms var(--ease); }
  .crumb a:hover{ color:var(--primary); }
  .crumb .sep{ margin:0 9px; opacity:.5; }
  .crumb .cur{ color:var(--text-mid); }

  .sec{ padding:110px 0; }
  @media (max-width:1024px){ .sec{ padding:84px 0; } }
  @media (max-width:640px){ .sec{ padding:66px 0; } }
  .sec-head{ max-width:760px; margin-bottom:52px; }
  .sec-head h2{
    margin:0 0 14px; font-size:36px; font-weight:700; letter-spacing:-0.02em; line-height:1.24; color:var(--text-hi);
  }
  .sec-head p{ margin:0; color:var(--text-mid); font-size:16.5px; }
  @media (max-width:640px){
    .sec-head h2{ font-size:26px; }
    .sec-head p{ font-size:15px; }
  }
  .divider-fade{ height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.14),transparent); border:0; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--primary);
    letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px;
  }
  .eyebrow::before{ content:""; width:26px; height:1px; background:var(--primary); opacity:.7; }

  /* ---------- 分类 Hero 小通栏 ---------- */
  .cat-hero{
    position:relative; overflow:hidden;
    padding:150px 0 62px;
    min-height:320px;
    background-image:linear-gradient(180deg,rgba(5,10,18,0.72),rgba(5,10,18,0.92)),url('/assets/images/backpic/back-2.png');
    background-size:cover; background-position:center;
    border-bottom:1px solid var(--line);
  }
  .cat-hero::after{
    content:""; position:absolute; left:-12%; right:-12%; bottom:-160px; height:280px;
    border-radius:50%; border:1px solid rgba(18,214,245,0.10);
    opacity:.6; pointer-events:none;
  }
  .cat-hero h1{
    margin:18px 0 16px; font-size:48px; line-height:1.18; font-weight:700; letter-spacing:-0.02em; color:var(--text-hi);
  }
  .cat-hero p.sub{
    margin:0 0 26px; max-width:660px; font-size:20px; line-height:1.75; color:var(--text-mid);
  }
  @media (max-width:1024px){
    .cat-hero{ padding:128px 0 52px; }
    .cat-hero h1{ font-size:38px; }
    .cat-hero p.sub{ font-size:18px; }
  }
  @media (max-width:640px){
    .cat-hero{ padding:110px 0 44px; min-height:0; }
    .cat-hero h1{ font-size:30px; }
    .cat-hero p.sub{ font-size:16px; }
  }

  /* ---------- 等级阶梯 ---------- */
  .ladder{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
  .level-card{
    padding:32px 28px 30px; border-radius:var(--radius-card);
    background:var(--glass-fill); border:1px solid var(--glass-stroke);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 20px 50px rgba(0,0,0,0.42);
    transition:transform 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
    position:relative;
  }
  .level-card:hover{ transform:translateY(-4px); }
  .level-card h3{ margin:0 0 6px; font-size:22px; font-weight:700; letter-spacing:-0.01em; }
  .level-card .lead{ margin:0 0 22px; color:var(--text-mid); font-size:15px; min-height:52px; }
  .level-card .price{ font-size:30px; font-weight:700; color:var(--text-hi); letter-spacing:-0.02em; }
  .level-card .price small{ font-size:14px; font-weight:400; color:var(--text-low); margin-left:4px; }
  .level-list{ list-style:none; margin:22px 0 0; padding:0; }
  .level-list li{
    position:relative; padding-left:18px; margin-bottom:12px; font-size:15px; color:var(--body-copy);
  }
  .level-list li::before{
    content:""; position:absolute; left:0; top:.72em; width:6px; height:6px; border-radius:2px;
    background:var(--primary); box-shadow:0 0 10px rgba(18,214,245,0.55);
  }
  .lv-basic{ margin-top:48px; border-color:rgba(140,190,255,0.20); }
  .lv-plus{ margin-top:24px; border-color:rgba(18,214,245,0.42); box-shadow:0 0 0 1px rgba(18,214,245,0.18), 0 26px 60px rgba(0,0,0,0.5), 0 0 30px rgba(18,214,245,0.16); }
  .lv-royal{ margin-top:0; border-color:rgba(233,196,106,0.44); }
  .lv-royal .level-list li::before{ background:var(--gold); box-shadow:0 0 10px rgba(233,196,106,0.5); }
  .lv-royal .price{ color:var(--gold); }
  .lv-tag{
    position:absolute; top:-13px; left:28px;
    padding:4px 14px; border-radius:999px; font-size:12px; color:#04121B; font-weight:600;
    background:linear-gradient(120deg,var(--primary),var(--primary-deep));
    box-shadow:0 0 20px var(--primary-glow);
  }
  @media (max-width:1024px){
    .ladder{ grid-template-columns:1fr; gap:20px; }
    .lv-basic,.lv-plus,.lv-royal{ margin-top:0; }
    .level-card .lead{ min-height:0; }
  }

  /* ---------- 精简对比小表 ---------- */
  .mini-table{
    width:100%; border-collapse:collapse; font-size:15px;
    background:var(--glass-fill); border:1px solid var(--glass-stroke); border-radius:var(--radius-card);
    overflow:hidden;
  }
  .mini-table thead th{
    padding:18px 20px; text-align:left; font-size:14px; font-weight:600; color:var(--text-hi);
    background:rgba(255,255,255,0.05); border-bottom:1px solid var(--line); white-space:nowrap;
  }
  .mini-table thead th.colc{ text-align:center; }
  .mini-table tbody td{
    padding:18px 20px; border-bottom:1px solid var(--line); color:var(--body-copy); vertical-align:middle;
  }
  .mini-table tbody tr:last-child td{ border-bottom:none; }
  .mini-table tbody tr{ transition:background 200ms var(--ease); }
  .mini-table tbody tr:hover{ background:rgba(255,255,255,0.03); }
  .mini-table td.item{ color:var(--text-hi); font-weight:500; }
  .mini-table td.item span{ display:block; font-size:13px; color:var(--text-low); font-weight:400; margin-top:2px; }
  .mini-table td.colc{ text-align:center; }
  .tick{ display:inline-block; width:16px; height:16px; color:var(--primary); }
  .dash{ color:var(--text-low); }
  .table-scroll{ overflow-x:auto; padding-bottom:4px; }
  .table-scroll::-webkit-scrollbar{ height:6px; }
  .table-scroll::-webkit-scrollbar-thumb{ background:rgba(140,190,255,0.22); border-radius:999px; }
  @media (max-width:768px){
    .mini-table{ min-width:620px; }
  }

  /* ---------- FAQ ---------- */
  .faq-list{ border-top:1px solid var(--line); }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:24px 0; background:transparent; border:none; text-align:left;
    font-size:19px; font-weight:600; color:var(--text-hi); line-height:1.5;
    transition:color 200ms var(--ease);
  }
  .faq-q:hover{ color:var(--primary); }
  .faq-icon{
    flex:0 0 auto; width:26px; height:26px; border-radius:50%;
    border:1px solid var(--glass-stroke); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size:15px; line-height:1; transition:transform 220ms var(--ease), border-color 220ms var(--ease);
  }
  .faq-item.is-open .faq-icon{ transform:rotate(45deg); border-color:var(--glass-stroke-hi); }
  .faq-a{
    max-height:0; overflow:hidden; transition:max-height 260ms var(--ease);
  }
  .faq-a p{
    margin:0 0 24px; max-width:78ch; color:var(--text-mid); font-size:15.5px; line-height:1.85;
  }

  /* ---------- CTA 细带 ---------- */
  .cta-band{
    position:relative; overflow:hidden;
    padding:52px 44px; border-radius:var(--radius-card);
    background:linear-gradient(120deg,rgba(18,214,245,0.10),rgba(10,108,255,0.06)),var(--glass-fill);
    border:1px solid var(--glass-stroke);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
  .cta-band::after{
    content:""; position:absolute; right:-80px; top:-120px; width:320px; height:320px; border-radius:50%;
    border:1px solid rgba(18,214,245,0.14); pointer-events:none;
  }
  .cta-band h2{ margin:0 0 8px; font-size:28px; font-weight:700; letter-spacing:-0.02em; }
  .cta-band p{ margin:0; color:var(--text-mid); font-size:15.5px; max-width:620px; }
  @media (max-width:768px){ .cta-band{ padding:36px 24px; } .cta-band h2{ font-size:23px; } }

  /* ---------- 页脚 ---------- */
  .site-footer{
    background:var(--bg-deep); border-top:1px solid var(--line); padding:72px 0 26px; margin-top:20px;
  }
  .footer-grid{
    display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:44px;
  }
  .footer-brand{ display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; color:var(--text-hi); margin-bottom:16px; }
  .footer-desc{ margin:0; color:var(--text-mid); font-size:14.5px; max-width:340px; line-height:1.85; }
  .footer-col h4{ margin:0 0 18px; font-size:15px; font-weight:600; color:var(--text-hi); letter-spacing:.01em; }
  .footer-col ul{ list-style:none; margin:0; padding:0; }
  .footer-col li{ margin-bottom:12px; }
  .footer-col a{ color:var(--text-mid); font-size:14.5px; transition:color 200ms var(--ease); }
  .footer-col a:hover{ color:var(--primary); }
  .footer-col .plain{ color:var(--text-low); font-size:14.5px; }
  .footer-bottom{
    margin-top:52px; padding-top:22px; border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    color:var(--text-low); font-size:13px;
  }
  @media (max-width:1024px){
    .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  }
  @media (max-width:640px){
    .footer-grid{ grid-template-columns:1fr; gap:30px; }
    .site-footer{ padding:56px 0 22px; }
  }

/* roulang page: category5 */
:root{
  --bg-base:#050A12;
  --bg-deep:#08111D;
  --bg-elev:#0C1A2A;
  --glass-fill:rgba(255,255,255,0.045);
  --glass-fill-strong:rgba(255,255,255,0.07);
  --glass-stroke:rgba(140,190,255,0.16);
  --glass-stroke-hi:rgba(140,190,255,0.30);
  --primary:#12D6F5;
  --primary-deep:#0A6CFF;
  --primary-glow:rgba(18,214,245,0.40);
  --accent:#FF8A3D;
  --gold:#E9C46A;
  --text-hi:#EAF2FF;
  --text-mid:#A9BBD1;
  --text-body:#C8D6E6;
  --text-low:#6F8199;
  --ok:#35D0A0;
  --warn:#FFB020;
  --line:rgba(255,255,255,0.08);
  --radius-lg:18px;
  --radius-sm:12px;
  --shadow-card:0 0 0 1px rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.5);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-base);
  color:var(--text-body);
  font-family:"HarmonyOS Sans SC","PingFang SC","Noto Sans SC","Microsoft YaHei",Inter,system-ui,sans-serif;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;transition:color 240ms var(--ease), opacity 240ms var(--ease);}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;color:var(--text-hi);font-weight:700;letter-spacing:-0.02em;line-height:1.25;}
p{margin:0;}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px;}
.num{font-variant-numeric:tabular-nums;font-family:Inter,system-ui,sans-serif;}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;}
@media(min-width:768px){.wrap{padding:0 24px;}}
@media(min-width:1024px){.wrap{padding:0 32px;}}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background 280ms var(--ease), border-color 280ms var(--ease), backdrop-filter 280ms var(--ease);
}
.site-header.is-scrolled{
  background:rgba(8,17,29,0.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
@media(min-width:1024px){.header-inner{height:76px;}}
.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--text-hi);letter-spacing:0;}
.brand-mark{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;color:var(--primary);
  background:linear-gradient(140deg,rgba(18,214,245,0.18),rgba(10,108,255,0.10));
  border:1px solid var(--glass-stroke);
}
.brand:hover{color:var(--primary);}
.main-nav{display:none;align-items:center;gap:34px;}
@media(min-width:1024px){.main-nav{display:flex;}}
.nav-link{
  position:relative;
  font-size:15px;color:var(--text-mid);padding:6px 2px;
}
.nav-link::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%) scaleX(0);
  width:60%;height:2px;border-radius:2px;background:var(--primary);
  transition:transform 240ms var(--ease);
}
.nav-link:hover{color:var(--text-hi);}
.nav-link:hover::after{transform:translateX(-50%) scaleX(1);}
.nav-link.is-active{color:var(--text-hi);}
.nav-link.is-active::after{transform:translateX(-50%) scaleX(1);}
.header-cta{
  display:none;
  align-items:center;justify-content:center;
  height:38px;padding:0 18px;border-radius:999px;
  font-size:14px;color:var(--primary);
  background:var(--glass-fill);
  border:1px solid var(--glass-stroke);
  transition:all 240ms var(--ease);
}
.header-cta:hover{
  color:#04121B;
  background:linear-gradient(120deg,var(--primary),var(--primary-deep));
  border-color:transparent;
  box-shadow:0 0 24px var(--primary-glow);
}
@media(min-width:1024px){.header-cta{display:inline-flex;}}
.nav-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
  width:44px;height:44px;align-items:center;
}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--text-hi);border-radius:2px;transition:transform 240ms var(--ease),opacity 200ms var(--ease);}
.nav-toggle.is-open span:first-child{transform:translateY(3.75px) rotate(45deg);}
.nav-toggle.is-open span:last-child{transform:translateY(-3.75px) rotate(-45deg);}
@media(min-width:1024px){.nav-toggle{display:none;}}
.mobile-panel{
  position:fixed;inset:64px 0 0 0;z-index:70;
  background:rgba(6,13,23,0.94);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  padding:12px 20px 40px;
  display:none;flex-direction:column;
  overflow-y:auto;
}
.mobile-panel.is-open{display:flex;}
.mobile-panel a.m-link{
  display:block;padding:18px 4px;font-size:17px;color:var(--text-mid);
  border-bottom:1px solid var(--line);
}
.mobile-panel a.m-link.is-active{color:var(--primary);}
.mobile-panel .m-cta{
  margin-top:26px;height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--glass-stroke);
  color:var(--primary);background:var(--glass-fill);font-size:15px;
}

/* ---------- Hero ---------- */
.page-hero{
  position:relative;
  padding:132px 0 56px;
  background-image:url('/assets/images/backpic/back-1.png');
  background-size:cover;background-position:center;
  overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,10,18,0.86) 0%,rgba(5,10,18,0.72) 45%,rgba(5,10,18,0.98) 100%);
}
.page-hero::after{
  content:"";position:absolute;left:-10%;right:-10%;top:-40%;height:120%;
  background:radial-gradient(closest-side,rgba(18,214,245,0.12),transparent 70%);
  opacity:0.7;pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:2;}
@media(min-width:1024px){.page-hero{padding:168px 0 84px;}}
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:14px;color:var(--text-low);margin-bottom:22px;
}
.breadcrumb a:hover{color:var(--primary);}
.breadcrumb .sep{color:rgba(255,255,255,0.22);}
.breadcrumb .cur{color:var(--text-mid);}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  font-size:12.5px;color:var(--primary);
  background:var(--glass-fill);border:1px solid var(--glass-stroke);
  margin-bottom:20px;
}
.hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary-glow);display:inline-block;}
.page-hero h1{
  font-size:30px;line-height:1.22;max-width:20ch;
}
@media(min-width:768px){.page-hero h1{font-size:42px;}}
@media(min-width:1024px){.page-hero h1{font-size:50px;}}
.page-hero .hero-sub{
  margin-top:18px;max-width:62ch;
  font-size:16px;color:var(--text-mid);
}
@media(min-width:768px){.page-hero .hero-sub{font-size:19px;}}
.hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 24px;border-radius:12px;
  font-size:15px;font-weight:600;letter-spacing:0;
  transition:all 240ms var(--ease);
}
.btn-glow{
  color:#03121A;
  background:linear-gradient(120deg,var(--primary),var(--primary-deep));
  box-shadow:0 0 24px var(--primary-glow);
}
.btn-glow:hover{box-shadow:0 0 34px var(--primary-glow);filter:brightness(1.06);transform:translateY(-2px);}
.btn-glow:active{transform:translateY(1px);}
.btn-ghost{
  color:var(--text-hi);
  background:var(--glass-fill);
  border:1px solid var(--glass-stroke);
}
.btn-ghost:hover{
  border-color:var(--glass-stroke-hi);
  background:var(--glass-fill-strong);
  transform:translateY(-2px);
}
.btn-ghost:active{transform:translateY(1px);}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px;border-radius:10px;}

/* ---------- Sections ---------- */
.section{padding:64px 0;}
@media(min-width:1024px){.section{padding:104px 0;}}
.section-sep{border-top:1px solid var(--line);}
.sec-head{max-width:720px;margin-bottom:36px;}
.sec-head h2{font-size:25px;line-height:1.3;}
@media(min-width:768px){.sec-head h2{font-size:34px;}}
.sec-head p{margin-top:14px;color:var(--text-mid);font-size:15.5px;}
.eyebrow{
  display:inline-block;font-size:12.5px;letter-spacing:0.08em;
  color:var(--primary);margin-bottom:12px;
}

/* ---------- Glass card ---------- */
.glass-card{
  position:relative;
  border-radius:var(--radius-lg);
  background:var(--glass-fill);
  border:1px solid var(--glass-stroke);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow-card);
  transition:border-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.glass-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;border-radius:var(--radius-lg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);
}
.glass-card:hover{
  border-color:var(--glass-stroke-hi);
  transform:translateY(-3px);
  box-shadow:var(--shadow-card), 0 0 30px rgba(18,214,245,0.16);
}
.card-pad{padding:24px;}
@media(min-width:768px){.card-pad{padding:30px;}}

/* ---------- About two column ---------- */
.about-grid{display:grid;grid-template-columns:1fr;gap:32px;}
@media(min-width:1024px){
  .about-grid{grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:start;}
}
.about-block + .about-block{margin-top:34px;}
.about-block h3{font-size:20px;margin-bottom:12px;position:relative;padding-left:14px;}
.about-block h3::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--primary),rgba(18,214,245,0.15));
}
.about-block p{color:var(--text-body);font-size:15.6px;}
.about-block p + p{margin-top:14px;}
.figure{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--glass-stroke);
}
.figure img{width:100%;height:230px;object-fit:cover;}
.figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,10,18,0.10),rgba(5,10,18,0.52));
}
.figure figcaption{
  position:absolute;left:16px;bottom:12px;z-index:2;
  font-size:13px;color:var(--text-mid);
}
.about-media{margin-top:30px;}

/* ---------- Data strip ---------- */
.data-strip{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--glass-stroke);border-radius:var(--radius-lg);overflow:hidden;
}
@media(min-width:768px){.data-strip{grid-template-columns:repeat(4,minmax(0,1fr));}}
.data-cell{background:rgba(12,26,42,0.72);padding:22px 20px;}
.data-cell .val{font-size:28px;font-weight:700;color:var(--text-hi);}
.data-cell .val .unit{font-size:14px;color:var(--text-mid);font-weight:500;margin-left:4px;}
.data-cell .lbl{margin-top:6px;font-size:13px;color:var(--text-low);}

/* ---------- Form ---------- */
.form-card{position:relative;}
@media(min-width:1024px){.form-card{position:sticky;top:104px;}}
.form-title{font-size:19px;margin-bottom:6px;}
.form-note{font-size:13.5px;color:var(--text-low);margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{
  display:flex;align-items:center;gap:6px;
  font-size:13.5px;color:var(--text-mid);margin-bottom:8px;
}
.field label .req{width:6px;height:6px;border-radius:50%;background:var(--primary);display:inline-block;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--glass-fill);
  border:1px solid var(--glass-stroke);
  color:var(--text-hi);font-size:15px;
  transition:border-color 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease);
  appearance:none;
}
.field textarea{min-height:112px;resize:vertical;line-height:1.7;}
.field input::placeholder,.field textarea::placeholder{color:var(--text-low);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(18,214,245,0.15);
  background:var(--glass-fill-strong);
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--text-mid) 50%),linear-gradient(135deg,var(--text-mid) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:40px;
}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--warn);}
.field .err{display:none;margin-top:7px;font-size:13px;color:var(--warn);}
.field.has-error .err{display:block;}
.form-agree{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-low);margin:6px 0 20px;}
.form-agree input{width:16px;height:16px;margin-top:3px;accent-color:#12D6F5;}
.form-submit{width:100%;}
.form-ok{
  display:none;margin-top:16px;padding:12px 14px;border-radius:var(--radius-sm);
  font-size:14px;color:var(--ok);
  background:rgba(53,208,160,0.08);border:1px solid rgba(53,208,160,0.28);
}
.form-ok.is-visible{display:block;}

/* ---------- Milestone axis ---------- */
.axis{position:relative;margin-top:8px;padding-left:26px;}
.axis::before{
  content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,rgba(18,214,245,0.55),rgba(18,214,245,0.06));
}
.axis-item{position:relative;padding:0 0 26px;}
.axis-item:last-child{padding-bottom:0;}
.axis-item::before{
  content:"";position:absolute;left:-26px;top:8px;width:11px;height:11px;border-radius:50%;
  background:var(--bg-base);border:2px solid var(--primary);
  box-shadow:0 0 12px var(--primary-glow);
}
.axis-item .stage{font-size:13px;color:var(--primary);letter-spacing:0.04em;}
.axis-item h4{font-size:17px;margin:6px 0 8px;}
.axis-item p{font-size:14.6px;color:var(--text-mid);}

/* ---------- Location / map placeholder ---------- */
.map-block{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--glass-stroke);min-height:260px;
  background:linear-gradient(150deg,rgba(12,26,42,0.9),rgba(8,17,29,0.95));
  display:flex;align-items:center;justify-content:center;
}
.map-block::before{
  content:"";position:absolute;inset:0;opacity:0.05;
  background-image:linear-gradient(rgba(255,255,255,0.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.6) 1px,transparent 1px);
  background-size:44px 44px;
}
.map-inner{position:relative;z-index:2;text-align:center;padding:34px 24px;}
.map-inner .pin{
  width:44px;height:44px;margin:0 auto 14px;border-radius:50%;
  border:1px solid var(--glass-stroke-hi);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  background:var(--glass-fill);
}
.map-inner h3{font-size:18px;margin-bottom:8px;}
.map-inner p{font-size:14px;color:var(--text-mid);max-width:46ch;margin:0 auto;}
.info-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--glass-stroke);border-radius:var(--radius-lg);overflow:hidden;margin-top:24px;}
@media(min-width:768px){.info-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.info-cell{background:rgba(12,26,42,0.7);padding:20px;}
.info-cell dt{font-size:13px;color:var(--text-low);margin-bottom:6px;}
.info-cell dd{margin:0;font-size:15px;color:var(--text-hi);line-height:1.65;}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 0;text-align:left;font-size:17px;font-weight:600;color:var(--text-hi);
  transition:color 220ms var(--ease);
}
.faq-q:hover{color:var(--primary);}
.faq-q .ic{
  flex:0 0 auto;width:22px;height:22px;position:relative;
  transition:transform 220ms var(--ease);color:var(--primary);
}
.faq-q .ic::before,.faq-q .ic::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
}
.faq-q .ic::before{left:50%;top:10px;width:12px;height:1.5px;transform:translateX(-50%);}
.faq-q .ic::after{top:50%;left:10px;height:12px;width:1.5px;transform:translateY(-50%);}
.faq-item.is-open .faq-q .ic{transform:rotate(180deg);}
.faq-item.is-open .faq-q .ic::after{opacity:0;}
.faq-a{display:none;padding:0 0 24px;max-width:78ch;color:var(--text-mid);font-size:15.4px;line-height:1.85;}
.faq-item.is-open .faq-a{display:block;}

/* ---------- CTA band ---------- */
.cta-band-wrap{padding:8px 0 72px;}
@media(min-width:1024px){.cta-band-wrap{padding:8px 0 108px;}}
.cta-band{
  position:relative;overflow:hidden;
  border-radius:22px;padding:38px 26px;text-align:center;
  background:linear-gradient(140deg,rgba(12,26,42,0.94),rgba(8,17,29,0.96));
  border:1px solid var(--glass-stroke);
}
.cta-band::before{
  content:"";position:absolute;left:-15%;right:-15%;bottom:-70%;height:150%;opacity:0.05;
  background:radial-gradient(closest-side,rgba(18,214,245,0.9),transparent 70%);
}
.cta-band .inner{position:relative;z-index:2;}
.cta-band h2{font-size:24px;}
@media(min-width:768px){.cta-band h2{font-size:32px;}}
.cta-band p{margin:14px auto 26px;max-width:56ch;color:var(--text-mid);font-size:15.4px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--bg-deep);border-top:1px solid var(--line);
  padding:56px 0 0;font-size:14.5px;
}
.footer-grid{display:grid;grid-template-columns:1fr;gap:34px;}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1024px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}}
.footer-brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--text-hi);}
.footer-desc{margin-top:14px;color:var(--text-low);font-size:14px;line-height:1.8;max-width:34ch;}
.footer-col h4{font-size:14px;color:var(--text-hi);margin-bottom:16px;letter-spacing:0.02em;}
.footer-col ul li{margin-bottom:11px;}
.footer-col a{color:var(--text-mid);font-size:14px;}
.footer-col a:hover{color:var(--primary);}
.footer-col .plain{color:var(--text-low);font-size:13.5px;}
.footer-bottom{
  margin-top:46px;padding:22px 0 26px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;
  font-size:13px;color:var(--text-low);
}
@media(min-width:768px){.footer-bottom{flex-direction:row;align-items:center;justify-content:space-between;}}

@media(max-width:520px){
  .page-hero h1{font-size:28px;}
  .data-cell .val{font-size:24px;}
  .btn{width:100%;}
  .hero-actions .btn,.cta-actions .btn{width:100%;}
}