/* roulang page: index */
:root {
  --ky-primary: #0F6B5C;
  --ky-primary-deep: #0A4F44;
  --ky-primary-weak: rgba(15, 107, 92, 0.08);
  --ky-accent: #C08A3E;
  --ky-ink: #101413;
  --ky-text: #2A3034;
  --ky-muted: #6E767A;
  --ky-faint: #9AA1A4;
  --ky-bg: #F7F8F6;
  --ky-surface: #FFFFFF;
  --ky-dark: #0E1413;
  --ky-line: #E4E7E3;
  --ky-line-strong: #D3D8D3;
  --ky-radius: 14px;
  --ky-radius-sm: 12px;
  --ky-shadow: 0 1px 2px rgba(16, 20, 19, .04), 0 8px 24px -12px rgba(16, 20, 19, .10);
  --ky-shadow-hover: 0 16px 40px -16px rgba(16, 20, 19, .18);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ky-bg);
  color: var(--ky-text);
  font-family: 'HarmonyOS Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--ky-ink); letter-spacing: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ky-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: rgba(15, 107, 92, .16); color: var(--ky-ink); }

.ky-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}

.ky-section {
  padding-top: clamp(56px, 8vw, 108px);
  padding-bottom: clamp(56px, 8vw, 108px);
}

.ky-line-top { border-top: 1px solid var(--ky-line); }

.ky-h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--ky-ink);
}

.ky-h3 {
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ky-ink);
}

.ky-lead {
  font-size: 17px;
  color: var(--ky-muted);
  line-height: 1.85;
}

.ky-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ky-primary);
  padding-left: 0;
}

.ky-title-mark {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--ky-primary);
  margin-bottom: 14px;
  border-radius: 2px;
}

.ky-meta { font-size: 13px; line-height: 1.6; color: var(--ky-muted); }

.ky-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ky-primary-weak);
  color: var(--ky-primary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ky-badge-sand {
  background: rgba(192, 138, 62, .12);
  color: #976A2B;
}

.ky-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ky-btn-primary { background: var(--ky-primary); color: #fff; }
.ky-btn-primary:hover { background: var(--ky-primary-deep); box-shadow: 0 12px 28px -14px rgba(15, 107, 92, .7); }
.ky-btn-primary:active { transform: translateY(1px); }

.ky-btn-ghost { background: #fff; border-color: var(--ky-line-strong); color: var(--ky-ink); }
.ky-btn-ghost:hover { border-color: var(--ky-primary); color: var(--ky-primary); background: rgba(15, 107, 92, .04); }

.ky-btn-onDark { background: transparent; border-color: rgba(255, 255, 255, .34); color: #fff; }
.ky-btn-onDark:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.ky-btn-lg { min-height: 52px; padding: 0 30px; }

.ky-arrow { transition: transform .15s ease; }
.ky-btn:hover .ky-arrow,
.ky-textlink:hover .ky-arrow { transform: translateX(4px); }

.ky-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ky-primary);
  transition: color .15s ease;
}
.ky-textlink:hover { color: var(--ky-primary-deep); }

.ky-card {
  background: var(--ky-surface);
  border: 1px solid var(--ky-line);
  border-radius: var(--ky-radius);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ky-card:hover {
  border-color: rgba(15, 107, 92, .3);
  box-shadow: var(--ky-shadow-hover);
  transform: translateY(-2px);
}
.ky-card:hover .ky-card-title { color: var(--ky-primary); }
.ky-card-title { transition: color .2s ease; }

.ky-img-zoom { overflow: hidden; border-radius: var(--ky-radius-sm); }
.ky-img-zoom img { transition: transform .35s cubic-bezier(.22, .61, .36, 1); width: 100%; height: 100%; object-fit: cover; }
.ky-card:hover .ky-img-zoom img { transform: scale(1.03); }

.ky-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .96);
  transition: box-shadow .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}
.ky-header.is-scrolled {
  box-shadow: 0 8px 24px -18px rgba(16, 20, 19, .45);
  border-bottom-color: var(--ky-line);
}
.ky-brandbar { transition: height .2s ease; }
.ky-header.is-scrolled .ky-brandbar .ky-brandbar-inner { height: 60px; }

.ky-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ky-ink);
  letter-spacing: .01em;
}
.ky-logo-mark {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ky-primary);
  flex: none;
  overflow: hidden;
}
.ky-logo-mark::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -6px;
  width: 8px;
  height: 42px;
  background: rgba(255, 255, 255, .92);
  transform: rotate(24deg);
}
.ky-logo-mark::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 7px;
  height: 7px;
  background: var(--ky-accent);
  border-radius: 2px;
}

.ky-channelbar { border-top: 1px solid var(--ky-line); border-bottom: 1px solid var(--ky-line); background: #fff; }
.ky-channels { display: flex; align-items: center; gap: 28px; height: 52px; overflow-x: auto; scrollbar-width: none; }
.ky-channels::-webkit-scrollbar { display: none; }
.ky-channel {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 52px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ky-text);
  white-space: nowrap;
  transition: color .18s ease;
}
.ky-channel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ky-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease;
}
.ky-channel:hover { color: var(--ky-primary); }
.ky-channel:hover::after { transform: scaleX(1); }
.ky-channel.is-active { color: var(--ky-primary); font-weight: 600; }
.ky-channel.is-active::after { transform: scaleX(1); }

.ky-hero-mask {
  background: linear-gradient(96deg, rgba(14, 20, 19, .94) 0%, rgba(14, 20, 19, .80) 46%, rgba(14, 20, 19, .48) 100%);
}

.ky-statnum {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
  color: var(--ky-accent);
  font-size: 28px;
  line-height: 1.1;
}

.ky-step {
  position: relative;
  padding-left: 0;
}
.ky-stepnum {
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(15, 107, 92, .16);
}

.ky-databar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ky-line);
  border-bottom: 1px solid var(--ky-line);
}
.ky-databar > div { padding: 16px 18px; border-left: 1px solid var(--ky-line); }
.ky-databar > div:first-child { border-left: 0; padding-left: 0; }

.ky-faq-item { border-bottom: 1px solid var(--ky-line); }
.ky-faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  color: var(--ky-ink);
  cursor: pointer;
  transition: color .18s ease;
}
.ky-faq-q:hover { color: var(--ky-primary); }
.ky-plus {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 8px;
  transition: transform .3s ease;
}
.ky-plus::before,
.ky-plus::after {
  content: "";
  position: absolute;
  background: var(--ky-primary);
  border-radius: 2px;
}
.ky-plus::before { left: 0; top: 7px; width: 16px; height: 2px; }
.ky-plus::after { left: 7px; top: 0; width: 2px; height: 16px; }
.ky-faq-item.is-open .ky-plus { transform: rotate(45deg); }
.ky-faq-a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease;
}
.ky-faq-item.is-open .ky-faq-a { max-height: 320px; opacity: 1; }
.ky-faq-a p { padding: 0 0 22px; font-size: 15px; line-height: 1.85; color: var(--ky-text); max-width: 62ch; }

.ky-field-label { display: block; font-size: 13px; color: var(--ky-text); margin-bottom: 6px; font-weight: 500; }
.ky-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--ky-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ky-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.ky-input { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.7; resize: vertical; }
.ky-input:focus {
  outline: none;
  border-color: var(--ky-primary);
  box-shadow: 0 0 0 3px rgba(15, 107, 92, .18);
}
.ky-input::placeholder { color: var(--ky-faint); }

.ky-footer-link { color: rgba(255, 255, 255, .68); font-size: 14px; transition: color .15s ease; display: inline-block; padding: 5px 0; }
.ky-footer-link:hover { color: #fff; }

.ky-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 90;
  width: min(300px, 86vw);
  height: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  box-shadow: -20px 0 40px -24px rgba(16, 20, 19, .5);
  padding: 22px;
  overflow-y: auto;
}
.ky-drawer.is-open { transform: translateX(0); }
.ky-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(16, 20, 19, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.ky-drawer-mask.is-open { opacity: 1; pointer-events: auto; }
.ky-drawer-tag {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--ky-primary-weak);
  color: var(--ky-primary);
  font-size: 15px;
  font-weight: 600;
}

.ky-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .48s cubic-bezier(.22, .61, .36, 1), transform .48s cubic-bezier(.22, .61, .36, 1);
}
.ky-reveal.is-visible { opacity: 1; transform: none; }

.ky-empty {
  border: 1px dashed var(--ky-line-strong);
  border-radius: var(--ky-radius);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: rgba(255, 255, 255, .6);
}

@media (max-width: 1023px) {
  .ky-channels { display: none; }
  .ky-channelbar { display: none; }
}

@media (max-width: 767px) {
  .ky-hero-mask {
    background: linear-gradient(180deg, rgba(14, 20, 19, .92) 0%, rgba(14, 20, 19, .86) 55%, rgba(14, 20, 19, .72) 100%);
  }
  .ky-databar { grid-template-columns: 1fr; }
  .ky-databar > div { border-left: 0; border-top: 1px solid var(--ky-line); padding-left: 0; }
  .ky-databar > div:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ky-reveal { transform: none; transition: opacity .2s linear; }
  .ky-card:hover { transform: none; }
  .ky-card:hover .ky-img-zoom img { transform: none; }
  .ky-btn:hover .ky-arrow,
  .ky-textlink:hover .ky-arrow { transform: none; }
}

/* roulang page: article */
:root{
  --ky-primary:#0F6B5C;
  --ky-primary-deep:#0A4F44;
  --ky-primary-weak:rgba(15,107,92,.08);
  --ky-accent:#C08A3E;
  --ky-ink:#101413;
  --ky-text:#2A3034;
  --ky-muted:#6E767A;
  --ky-faint:#9AA1A4;
  --ky-bg:#F7F8F6;
  --ky-surface:#FFFFFF;
  --ky-dark:#0E1413;
  --ky-line:#E4E7E3;
  --ky-line-strong:#D3D8D3;
  --ky-radius:14px;
  --ky-shadow:0 1px 2px rgba(16,20,19,.04),0 8px 24px -12px rgba(16,20,19,.10);
  --ky-shadow-hover:0 16px 40px -16px rgba(16,20,19,.18);
  --ky-ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ky-bg);
  color:var(--ky-text);
  font-family:"HarmonyOS Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}
input,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4,p{margin:0;}
ul,ol{margin:0;}
::selection{background:rgba(15,107,92,.16);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#CBD2CD;border-radius:999px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-track{background:transparent;}
.ky-container{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px);}
a:focus-visible,button:focus-visible,input:focus-visible,.ky-channel:focus-visible,.ky-btn:focus-visible{outline:2px solid var(--ky-primary);outline-offset:2px;border-radius:8px;}

/* ---------- header ---------- */
.ky-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  transition:box-shadow .25s ease,background .25s ease;
}
.ky-header.is-stuck{box-shadow:0 1px 0 var(--ky-line),0 10px 26px -20px rgba(16,20,19,.5);}
.ky-brandbar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px;transition:height .25s ease;}
.ky-header.is-stuck .ky-brandbar{height:60px;}
.ky-logo{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:var(--ky-ink);white-space:nowrap;}
.ky-logo-mark{position:relative;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--ky-primary),var(--ky-primary-deep));flex:none;}
.ky-logo-mark::after{content:"";position:absolute;left:8px;right:8px;top:9px;height:2px;background:rgba(255,255,255,.92);box-shadow:0 6px 0 rgba(255,255,255,.5);}
.ky-brand-actions{display:flex;align-items:center;gap:18px;}
.ky-textlink{font-size:14px;color:var(--ky-muted);transition:color .18s ease;}
.ky-textlink:hover{color:var(--ky-primary);}
.ky-burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--ky-line-strong);align-items:center;justify-content:center;flex-direction:column;gap:5px;flex:none;}
.ky-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ky-ink);transition:transform .2s ease;}
.ky-channelbar{border-top:1px solid var(--ky-line);border-bottom:1px solid var(--ky-line);background:#fff;}
.ky-channels{display:flex;align-items:center;gap:28px;height:52px;overflow-x:auto;scrollbar-width:none;}
.ky-channels::-webkit-scrollbar{display:none;}
.ky-channel{position:relative;display:inline-flex;align-items:center;height:52px;font-size:15px;font-weight:500;color:var(--ky-muted);white-space:nowrap;transition:color .18s ease;}
.ky-channel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ky-primary);transform:scaleX(0);transform-origin:left center;transition:transform .18s ease;}
.ky-channel:hover{color:var(--ky-ink);}
.ky-channel:hover::after{transform:scaleX(1);}
.ky-channel.is-active{color:var(--ky-primary);font-weight:600;}
.ky-channel.is-active::after{transform:scaleX(1);}

/* ---------- drawer ---------- */
.ky-mask{position:fixed;inset:0;z-index:80;background:rgba(16,20,19,.45);opacity:0;pointer-events:none;transition:opacity .28s ease;}
.ky-mask.is-open{opacity:1;pointer-events:auto;}
.ky-drawer{position:fixed;top:0;right:0;z-index:90;height:100%;width:min(320px,86vw);background:#fff;padding:20px;overflow-y:auto;transform:translateX(100%);transition:transform .28s var(--ky-ease);}
.ky-drawer.is-open{transform:translateX(0);}
.ky-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--ky-line);}
.ky-drawer-close{width:44px;height:44px;border-radius:10px;border:1px solid var(--ky-line-strong);font-size:20px;line-height:1;color:var(--ky-muted);}
.ky-drawer-links{display:flex;flex-wrap:wrap;gap:10px;padding-top:20px;}
.ky-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ky-primary-weak);color:var(--ky-primary);font-size:15px;font-weight:600;}
.ky-pill.is-active{background:var(--ky-primary);color:#fff;}

/* ---------- buttons ---------- */
.ky-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 26px;border-radius:10px;font-size:15px;font-weight:600;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease;}
.ky-btn-primary{background:var(--ky-primary);color:#fff;box-shadow:0 10px 22px -16px rgba(15,107,92,.95);}
.ky-btn-primary:hover{background:var(--ky-primary-deep);}
.ky-btn-primary:hover .ky-arrow{transform:translateX(4px);}
.ky-btn-primary:active{transform:translateY(1px);}
.ky-btn-ghost{border:1px solid var(--ky-line-strong);background:rgba(255,255,255,.6);color:var(--ky-ink);}
.ky-btn-ghost:hover{border-color:var(--ky-primary);color:var(--ky-primary);background:rgba(15,107,92,.04);}
.ky-btn-sm{height:40px;padding:0 18px;font-size:14px;}
.ky-btn-lg{height:52px;padding:0 30px;font-size:16px;}
.ky-arrow{display:inline-block;transition:transform .18s ease;}
.ky-textbtn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ky-primary);}
.ky-textbtn:hover .ky-arrow{transform:translateX(4px);}

/* ---------- section helpers ---------- */
.ky-eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ky-primary);}
.ky-eyebrow::before{content:"";width:24px;height:3px;border-radius:2px;background:var(--ky-primary);}
.ky-h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;line-height:1.18;color:var(--ky-ink);margin-top:12px;}

/* ---------- article head ---------- */
.ky-article-hero{padding:44px 0 8px;background:linear-gradient(180deg,#fff 0%,var(--ky-bg) 100%);border-bottom:1px solid var(--ky-line);}
.ky-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ky-muted);}
.ky-breadcrumb a{color:var(--ky-muted);transition:color .18s ease;}
.ky-breadcrumb a:hover{color:var(--ky-primary);}
.ky-breadcrumb .ky-sep{color:var(--ky-faint);}
.ky-breadcrumb .ky-current{max-width:62vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ky-primary);font-weight:600;}
.ky-article-head{max-width:880px;margin-top:26px;}
.ky-badge{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--ky-primary-weak);color:var(--ky-primary);font-size:12px;font-weight:600;}
.ky-article-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.16;color:var(--ky-ink);margin-top:16px;overflow-wrap:break-word;}
.ky-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;font-size:13px;color:var(--ky-muted);}
.ky-meta i{margin-right:6px;color:var(--ky-faint);}
.ky-vline{width:1px;height:12px;background:var(--ky-line-strong);}

/* ---------- article body ---------- */
.ky-article-body{padding:44px 0 76px;}
.ky-article-cover{max-width:960px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:var(--ky-shadow);}
.ky-article-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.ky-prose{max-width:760px;margin:44px auto 0;font-size:17px;line-height:1.9;color:var(--ky-text);overflow-wrap:break-word;}
.ky-prose > * + *{margin-top:1.4em;}
.ky-prose h2{font-size:clamp(1.4rem,2.2vw,1.75rem);font-weight:700;line-height:1.3;color:var(--ky-ink);margin-top:2em;padding-left:14px;border-left:3px solid var(--ky-primary);}
.ky-prose h3{font-size:1.15rem;font-weight:700;line-height:1.4;color:var(--ky-ink);margin-top:1.7em;}
.ky-prose h4{font-size:1.05rem;font-weight:700;color:var(--ky-ink);margin-top:1.5em;}
.ky-prose a{color:var(--ky-primary);border-bottom:1px solid rgba(15,107,92,.4);transition:color .18s ease,border-color .18s ease;}
.ky-prose a:hover{color:var(--ky-primary-deep);border-color:var(--ky-primary-deep);}
.ky-prose strong{color:var(--ky-ink);font-weight:700;}
.ky-prose ul{list-style:none;padding-left:0;}
.ky-prose ul > li{position:relative;padding-left:20px;margin-top:.6em;}
.ky-prose ul > li::before{content:"";position:absolute;left:0;top:.78em;width:7px;height:7px;border-radius:2px;background:var(--ky-primary);}
.ky-prose ol{list-style:decimal;padding-left:1.4em;}
.ky-prose ol > li{margin-top:.6em;padding-left:.3em;}
.ky-prose ol > li::marker{color:var(--ky-primary);font-weight:700;}
.ky-prose blockquote{margin-left:0;margin-right:0;border-left:3px solid var(--ky-primary);background:rgba(15,107,92,.04);padding:20px 22px;border-radius:0 12px 12px 0;}
.ky-prose blockquote p{margin:0;}
.ky-prose img{border-radius:12px;margin-left:auto;margin-right:auto;}
.ky-prose figure{margin:0;}
.ky-prose figcaption{font-size:13px;color:var(--ky-muted);text-align:center;margin-top:10px;line-height:1.7;}
.ky-prose hr{border:0;border-top:1px solid var(--ky-line);margin:2.2em 0;}
.ky-prose table{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--ky-line);overflow:hidden;border-radius:12px;}
.ky-prose th{background:var(--ky-primary-weak);color:var(--ky-ink);font-weight:600;text-align:left;padding:12px 14px;border-bottom:1px solid var(--ky-line);}
.ky-prose td{padding:12px 14px;border-bottom:1px solid var(--ky-line);}
.ky-prose tr:last-child td{border-bottom:0;}
.ky-prose pre{background:var(--ky-dark);color:#E7EDEA;padding:18px;border-radius:12px;overflow:auto;font-size:14px;line-height:1.75;}
.ky-prose code{background:rgba(15,107,92,.08);color:var(--ky-primary-deep);padding:2px 6px;border-radius:6px;font-size:.92em;}
.ky-prose pre code{background:none;color:inherit;padding:0;}

/* ---------- tags & share ---------- */
.ky-tags{max-width:760px;margin:40px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.ky-tag{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;background:var(--ky-primary-weak);color:var(--ky-primary);font-size:13px;font-weight:500;}
.ky-share{max-width:760px;margin:24px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--ky-line);}
.ky-share-label{font-size:13px;color:var(--ky-muted);}
.ky-share-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--ky-line-strong);font-size:14px;color:var(--ky-ink);transition:border-color .18s ease,color .18s ease,background .18s ease;}
.ky-share-btn:hover{border-color:var(--ky-primary);color:var(--ky-primary);background:rgba(15,107,92,.04);}

/* ---------- empty ---------- */
.ky-empty{max-width:760px;margin:44px auto 0;border:1px dashed var(--ky-line-strong);border-radius:14px;background:#fff;padding:56px 24px;text-align:center;}
.ky-empty i{font-size:30px;color:var(--ky-faint);}
.ky-empty-title{margin-top:16px;font-size:1.2rem;font-weight:700;color:var(--ky-ink);}
.ky-empty-text{margin-top:8px;font-size:15px;color:var(--ky-muted);}
.ky-empty .ky-btn{margin-top:22px;}

/* ---------- related cards ---------- */
.ky-related{margin-top:72px;padding-top:48px;border-top:1px solid var(--ky-line);}
.ky-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;}
.ky-card{display:block;background:#fff;border:1px solid var(--ky-line);border-radius:14px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.ky-card:hover{border-color:rgba(15,107,92,.3);box-shadow:var(--ky-shadow-hover);transform:translateY(-2px);}
.ky-card:hover .ky-card-title{color:var(--ky-primary);}
.ky-card-img{overflow:hidden;}
.ky-card-img img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .3s ease;}
.ky-card:hover .ky-card-img img{transform:scale(1.03);}
.ky-card-body{padding:20px 22px 24px;}
.ky-card-badge{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--ky-primary-weak);color:var(--ky-primary);font-size:12px;font-weight:600;}
.ky-card-title{font-size:1.25rem;font-weight:650;line-height:1.35;color:var(--ky-ink);margin-top:12px;transition:color .2s ease;}
.ky-card-text{margin-top:10px;font-size:15px;line-height:1.8;color:var(--ky-muted);}

/* ---------- CTA ---------- */
.ky-cta{position:relative;overflow:hidden;background:var(--ky-dark);color:#fff;padding:clamp(56px,8vw,96px) 0;}
.ky-cta::after{content:"";position:absolute;right:-90px;top:-70px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(15,107,92,.38),transparent 70%);pointer-events:none;}
.ky-cta .ky-eyebrow{color:#8FD3C1;}
.ky-cta .ky-eyebrow::before{background:#8FD3C1;}
.ky-h2-light{color:#fff;}
.ky-cta-text{margin-top:18px;max-width:520px;font-size:16px;line-height:1.9;color:rgba(255,255,255,.68);}
.ky-cta-points{margin-top:22px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;}
.ky-cta-points li{position:relative;padding-left:20px;font-size:14px;color:rgba(255,255,255,.78);}
.ky-cta-points li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:5px;border-left:2px solid var(--ky-accent);border-bottom:2px solid var(--ky-accent);transform:rotate(-45deg);}
.ky-form{position:relative;z-index:1;display:grid;gap:16px;padding:26px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04);}
.ky-field{display:flex;flex-direction:column;gap:8px;}
.ky-label{font-size:13px;color:rgba(255,255,255,.72);}
.ky-input{height:48px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;transition:border-color .18s ease,box-shadow .18s ease;}
.ky-input::placeholder{color:rgba(255,255,255,.38);}
.ky-input:focus{outline:none;border-color:var(--ky-primary);box-shadow:0 0 0 3px rgba(15,107,92,.28);}
.ky-form-tip{font-size:13px;line-height:1.7;color:rgba(255,255,255,.5);}

/* ---------- footer ---------- */
.ky-footer-link{display:inline-block;padding:5px 0;font-size:14px;color:rgba(255,255,255,.62);transition:color .18s ease,padding-left .18s ease;}
.ky-footer-link:hover{color:#fff;padding-left:4px;}

/* ---------- reveal ---------- */
.ky-reveal{opacity:0;transform:translateY(12px);transition:opacity .48s var(--ky-ease),transform .48s var(--ky-ease);}
.ky-reveal.is-in{opacity:1;transform:none;}

@media (max-width:1023px){
  .ky-textlink{display:none;}
  .ky-grid-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .ky-burger{display:inline-flex;}
  .ky-channelbar{display:none;}
  .ky-brandbar{height:64px;}
  .ky-header.is-stuck .ky-brandbar{height:56px;}
  .ky-brand-actions{gap:10px;}
  .ky-grid-3{grid-template-columns:1fr;gap:20px;}
  .ky-article-hero{padding:28px 0 4px;}
  .ky-article-head{margin-top:18px;}
  .ky-article-title{font-size:2rem;}
  .ky-prose{font-size:16px;margin-top:32px;}
  .ky-article-body{padding:32px 0 56px;}
  .ky-share{align-items:flex-start;flex-direction:column;}
}
@media (prefers-reduced-motion: reduce){
  .ky-reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* roulang page: category1 */
:root {
    --ky-primary: #0F6B5C;
    --ky-primary-deep: #0A4F44;
    --ky-primary-weak: rgba(15, 107, 92, .08);
    --ky-accent: #C08A3E;
    --ky-ink: #101413;
    --ky-text: #2A3034;
    --ky-muted: #6E767A;
    --ky-faint: #9AA1A4;
    --ky-bg: #F7F8F6;
    --ky-surface: #FFFFFF;
    --ky-dark: #0E1413;
    --ky-line: #E4E7E3;
    --ky-line-strong: #D3D8D3;
  }

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

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: 'HarmonyOS Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    background: var(--ky-bg);
    color: var(--ky-text);
    font-size: 16.5px;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  h1, h2, h3, h4, p { margin: 0; }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--ky-primary);
    outline-offset: 2px;
    border-radius: 4px;
  }

  ::selection { background: rgba(15, 107, 92, .18); color: var(--ky-ink); }

  ::-webkit-scrollbar { width: 10px; height: 8px; }
  ::-webkit-scrollbar-track { background: #EFEFEC; }
  ::-webkit-scrollbar-thumb { background: #C6CBC6; border-radius: 999px; border: 2px solid #EFEFEC; }
  ::-webkit-scrollbar-thumb:hover { background: var(--ky-primary); }

  .ky-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
  }

  /* ---------- Header ---------- */
  .ky-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(247, 248, 246, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ky-line);
    transition: box-shadow .28s ease, background .28s ease;
  }
  .ky-header.is-scrolled {
    box-shadow: 0 1px 0 var(--ky-line), 0 12px 28px -22px rgba(16, 20, 19, .55);
    background: rgba(247, 248, 246, .98);
  }

  .ky-brandbar {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: height .28s ease;
  }
  .ky-header.is-scrolled .ky-brandbar { height: 60px; }

  .ky-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--ky-ink);
    white-space: nowrap;
  }
  .ky-logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--ky-primary);
    position: relative;
    flex: 0 0 28px;
    overflow: hidden;
  }
  .ky-logo-mark::before {
    content: '';
    position: absolute;
    inset: 7px 7px auto 7px;
    height: 3px;
    background: rgba(255, 255, 255, .92);
  }
  .ky-logo-mark::after {
    content: '';
    position: absolute;
    inset: auto 7px 7px 7px;
    height: 11px;
    background: rgba(255, 255, 255, .55);
    clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%);
  }

  .ky-channels {
    height: 52px;
    display: flex;
    align-items: stretch;
    gap: 28px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ky-channels::-webkit-scrollbar { display: none; }

  .ky-channel {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    font-size: 15px;
    font-weight: 500;
    color: var(--ky-muted);
    white-space: nowrap;
    transition: color .18s ease;
  }
  .ky-channel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--ky-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .18s ease;
  }
  .ky-channel:hover { color: var(--ky-ink); }
  .ky-channel:hover::after { transform: scaleX(1); }
  .ky-channel.is-active { color: var(--ky-primary); font-weight: 600; }
  .ky-channel.is-active::after { transform: scaleX(1); }

  /* ---------- Buttons ---------- */
  .ky-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  .ky-btn-primary { background: var(--ky-primary); color: #fff; }
  .ky-btn-primary:hover { background: var(--ky-primary-deep); }
  .ky-btn-primary:active { transform: translateY(1px); }
  .ky-btn-ghost { border-color: var(--ky-line-strong); color: var(--ky-ink); background: transparent; }
  .ky-btn-ghost:hover { border-color: var(--ky-primary); color: var(--ky-primary); background: rgba(15, 107, 92, .04); }
  .ky-btn-onDark { border-color: rgba(255, 255, 255, .28); color: #fff; background: transparent; }
  .ky-btn-onDark:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
  .ky-btn .arrow { transition: transform .15s ease; }
  .ky-btn:hover .arrow { transform: translateX(4px); }

  .ky-textlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ky-primary);
    font-weight: 600;
    font-size: 15px;
  }
  .ky-textlink .arrow { transition: transform .15s ease; }
  .ky-textlink:hover .arrow { transform: translateX(4px); }

  /* ---------- Badges / meta ---------- */
  .ky-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--ky-primary-weak);
    color: var(--ky-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
  }
  .ky-badge-accent {
    background: rgba(192, 138, 62, .12);
    color: #9A6C28;
  }
  .ky-time {
    font-size: 13px;
    color: var(--ky-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Inter, system-ui, sans-serif;
  }

  /* ---------- Banner ---------- */
  .ky-banner {
    position: relative;
    min-height: clamp(360px, 42vw, 420px);
    background-image: url('/assets/images/backpic/back-1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .ky-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(14, 20, 19, .9) 0%, rgba(14, 20, 19, .74) 46%, rgba(14, 20, 19, .46) 100%);
  }
  .ky-banner-inner { position: relative; z-index: 2; width: 100%; padding: 64px 0 52px; }

  .ky-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 18px;
  }
  .ky-crumb a { color: rgba(255, 255, 255, .62); transition: color .18s ease; }
  .ky-crumb a:hover { color: #fff; }
  .ky-crumb .sep { color: rgba(255, 255, 255, .34); }
  .ky-crumb .current { color: #fff; font-weight: 600; }

  .ky-banner h1 {
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    color: #fff;
    max-width: 18em;
  }
  .ky-banner-sub {
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .8);
    max-width: 44em;
  }

  .ky-statbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ky-line);
    font-size: 14px;
    color: var(--ky-muted);
  }
  .ky-statbar strong { color: var(--ky-ink); font-weight: 700; }
  .ky-statbar .dot { color: var(--ky-line-strong); margin: 0 10px; }

  /* ---------- Sections ---------- */
  .ky-section { padding: clamp(56px, 8vw, 104px) 0; }
  .ky-section-line { border-top: 1px solid var(--ky-line); }

  .ky-sec-title {
    position: relative;
    padding-top: 16px;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.18;
    color: var(--ky-ink);
  }
  .ky-sec-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 3px;
    background: var(--ky-primary);
  }

  /* ---------- TOC ---------- */
  .ky-toc { position: sticky; top: 148px; }
  .ky-toc-group + .ky-toc-group { margin-top: 26px; }
  .ky-toc-group-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--ky-faint);
    margin-bottom: 10px;
  }
  .ky-toc a {
    display: block;
    position: relative;
    padding: 8px 0 8px 14px;
    font-size: 14.5px;
    color: var(--ky-muted);
    line-height: 1.5;
    transition: color .18s ease;
  }
  .ky-toc a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--ky-line-strong);
    transition: background .18s ease;
  }
  .ky-toc a:hover { color: var(--ky-ink); }
  .ky-toc a:hover::before { background: var(--ky-line-strong); }
  .ky-toc a.is-current { color: var(--ky-primary); font-weight: 600; }
  .ky-toc a.is-current::before { background: var(--ky-primary); }

  /* ---------- Rows ---------- */
  .ky-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--ky-line);
    transition: background .2s ease;
  }
  .ky-row:first-of-type { padding-top: 8px; }
  .ky-row-thumb {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: #E9EBE7;
    aspect-ratio: 220 / 140;
  }
  .ky-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
  }
  .ky-row:hover .ky-row-thumb img { transform: scale(1.03); }
  .ky-row h3 {
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.4;
    color: var(--ky-ink);
    margin-top: 10px;
    transition: color .2s ease;
  }
  .ky-row:hover h3 { color: var(--ky-primary); }
  .ky-row p {
    margin-top: 8px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--ky-muted);
  }
  .ky-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

  /* ---------- Feature list ---------- */
  .ky-point {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--ky-line);
  }
  .ky-point:first-child { border-top: 1px solid var(--ky-line); }
  .ky-point-num {
    font-family: Inter, system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--ky-accent);
    line-height: 1.4;
  }
  .ky-point h3 { font-size: 1.1rem; font-weight: 650; color: var(--ky-ink); }
  .ky-point p { margin-top: 6px; font-size: 15px; color: var(--ky-muted); line-height: 1.8; }

  /* ---------- Stats ---------- */
  .ky-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--ky-line);
    border-bottom: 1px solid var(--ky-line);
  }
  .ky-stat-item {
    padding: 26px 22px;
    border-right: 1px solid var(--ky-line);
  }
  .ky-stat-item:last-child { border-right: none; }
  .ky-stat-num {
    font-family: Inter, system-ui, sans-serif;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 800;
    color: var(--ky-primary);
    line-height: 1.1;
  }
  .ky-stat-num .unit { font-size: .55em; font-weight: 700; margin-left: 2px; }
  .ky-stat-label { margin-top: 8px; font-size: 14px; color: var(--ky-muted); }

  /* ---------- Scenario ---------- */
  .ky-scenario {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(24px, 5vw, 64px);
    align-items: center;
    padding: 40px 0;
    border-top: 1px solid var(--ky-line);
  }
  .ky-scenario:last-of-type { border-bottom: 1px solid var(--ky-line); }
  .ky-scenario.reverse .ky-scenario-media { order: -1; }
  .ky-scenario-media {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #E9EBE7;
  }
  .ky-scenario-media img { width: 100%; height: 100%; object-fit: cover; }
  .ky-scenario h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 700; color: var(--ky-ink); line-height: 1.35; }
  .ky-scenario p { margin-top: 12px; font-size: 15.5px; color: var(--ky-muted); line-height: 1.85; }

  /* ---------- Steps ---------- */
  .ky-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--ky-line);
  }
  .ky-step {
    position: relative;
    padding: 32px 24px 32px 0;
    border-right: 1px solid var(--ky-line);
  }
  .ky-step:last-child { border-right: none; padding-right: 0; }
  .ky-step:not(:first-child) { padding-left: 24px; }
  .ky-step-num {
    font-family: Inter, system-ui, sans-serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1;
    color: rgba(15, 107, 92, .14);
  }
  .ky-step h3 { margin-top: 16px; font-size: 1.1rem; font-weight: 650; color: var(--ky-ink); }
  .ky-step p { margin-top: 8px; font-size: 14.5px; color: var(--ky-muted); line-height: 1.8; }

  /* ---------- FAQ ---------- */
  .ky-faq-item { border-bottom: 1px solid var(--ky-line); }
  .ky-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: var(--ky-ink);
    line-height: 1.6;
    transition: color .18s ease;
  }
  .ky-faq-q:hover { color: var(--ky-primary); }
  .ky-faq-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
  .ky-faq-icon i {
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--ky-primary);
    border-radius: 1px;
    transition: transform .3s ease, opacity .3s ease;
  }
  .ky-faq-icon i:first-child { width: 14px; height: 2px; transform: translate(-50%, -50%); }
  .ky-faq-icon i:last-child { width: 2px; height: 14px; transform: translate(-50%, -50%); }
  .ky-faq-item.is-open .ky-faq-icon i:last-child { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
  .ky-faq-a {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .3s ease;
  }
  .ky-faq-item.is-open .ky-faq-a { max-height: 340px; opacity: 1; }
  .ky-faq-a-inner {
    padding: 0 40px 24px 0;
    font-size: 15px;
    line-height: 1.85;
    color: var(--ky-text);
  }

  /* ---------- CTA ---------- */
  .ky-cta {
    background: var(--ky-dark);
    color: #fff;
    padding: clamp(56px, 8vw, 96px) 0;
  }
  .ky-cta h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
  }
  .ky-cta p.lead { margin-top: 16px; font-size: 15.5px; line-height: 1.85; color: rgba(255, 255, 255, .72); }
  .ky-trust { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
  .ky-trust li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: rgba(255, 255, 255, .8); }
  .ky-trust svg { flex: 0 0 18px; margin-top: 5px; }

  .ky-form { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: clamp(22px, 3vw, 32px); }
  .ky-field { margin-bottom: 18px; }
  .ky-field label { display: block; font-size: 13px; color: rgba(255, 255, 255, .72); margin-bottom: 8px; }
  .ky-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 15px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  textarea.ky-input { height: auto; padding: 12px 14px; line-height: 1.7; resize: vertical; min-height: 96px; }
  .ky-input::placeholder { color: rgba(255, 255, 255, .38); }
  .ky-input:focus {
    outline: none;
    border-color: var(--ky-primary);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 3px rgba(15, 107, 92, .3);
  }
  .ky-form-note { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, .52); line-height: 1.7; }
  .ky-form-tip {
    margin-top: 14px;
    font-size: 14px;
    color: #9FE3D3;
    display: none;
  }
  .ky-form-tip.is-show { display: block; }

  /* ---------- Footer ---------- */
  .ky-footer-link {
    display: block;
    padding: 5px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .68);
    transition: color .18s ease, transform .18s ease;
  }
  .ky-footer-link:hover { color: #fff; transform: translateX(3px); }

  /* ---------- Mobile drawer ---------- */
  .ky-drawer-mask {
    position: fixed;
    inset: 0;
    background: rgba(16, 20, 19, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    z-index: 90;
  }
  .ky-drawer-mask.is-open { opacity: 1; visibility: visible; }
  .ky-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 288px;
    max-width: 86vw;
    background: var(--ky-surface);
    z-index: 100;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    display: flex;
    flex-direction: column;
    padding: 22px 22px 32px;
    overflow-y: auto;
  }
  .ky-drawer.is-open { transform: translateX(0); }
  .ky-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
  .ky-drawer-title { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ky-faint); }
  .ky-drawer-close {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ky-line); border-radius: 10px; background: #fff; cursor: pointer;
    color: var(--ky-ink); transition: border-color .18s ease, color .18s ease;
  }
  .ky-drawer-close:hover { border-color: var(--ky-primary); color: var(--ky-primary); }
  .ky-pills { display: flex; flex-wrap: wrap; gap: 10px; }
  .ky-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--ky-primary-weak);
    color: var(--ky-primary);
    font-size: 14px;
    font-weight: 600;
    transition: background .18s ease, color .18s ease;
  }
  .ky-pill:hover { background: var(--ky-primary); color: #fff; }
  .ky-drawer-contact { margin-top: auto; padding-top: 26px; border-top: 1px solid var(--ky-line); }

  /* ---------- Reveal ---------- */
  .ky-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .48s cubic-bezier(.22, .61, .36, 1), transform .48s cubic-bezier(.22, .61, .36, 1);
  }
  .ky-reveal.is-in { opacity: 1; transform: none; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1023px) {
    .ky-toc {
      position: static;
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 6px;
      margin-bottom: 24px;
      scrollbar-width: none;
    }
    .ky-toc::-webkit-scrollbar { display: none; }
    .ky-toc-group { display: flex; align-items: center; gap: 10px; }
    .ky-toc-group + .ky-toc-group { margin-top: 0; }
    .ky-toc-group-title { display: none; }
    .ky-toc a {
      padding: 8px 14px;
      border: 1px solid var(--ky-line);
      border-radius: 999px;
      white-space: nowrap;
      background: #fff;
    }
    .ky-toc a::before { display: none; }
    .ky-toc a.is-current { border-color: var(--ky-primary); background: var(--ky-primary-weak); }
    .ky-steps { grid-template-columns: repeat(2, 1fr); }
    .ky-step:nth-child(2n) { border-right: none; }
    .ky-step:nth-child(n+3) { border-top: 1px solid var(--ky-line); }
    .ky-step:nth-child(3) { padding-left: 0; }
  }

  @media (max-width: 767px) {
    body { font-size: 16px; }
    .ky-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
    .ky-row-thumb { aspect-ratio: 16 / 9; }
    .ky-scenario { grid-template-columns: 1fr; gap: 22px; padding: 32px 0; }
    .ky-scenario.reverse .ky-scenario-media { order: 0; }
    .ky-stat-grid { grid-template-columns: 1fr; }
    .ky-stat-item { border-right: none; border-bottom: 1px solid var(--ky-line); }
    .ky-stat-item:last-child { border-bottom: none; }
    .ky-steps { grid-template-columns: 1fr; }
    .ky-step { border-right: none; padding: 26px 0 !important; border-bottom: 1px solid var(--ky-line); }
    .ky-step:last-child { border-bottom: none; }
    .ky-step:nth-child(n+3) { border-top: none; }
    .ky-faq-a-inner { padding-right: 0; }
    .ky-banner h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  }

  @media (max-width: 520px) {
    .ky-banner { min-height: 520px; }
    .ky-banner::before { background: linear-gradient(160deg, rgba(14, 20, 19, .92) 0%, rgba(14, 20, 19, .78) 60%, rgba(14, 20, 19, .62) 100%); }
    .ky-btn { width: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ky-reveal { transform: none; transition: opacity .3s ease; }
    .ky-row:hover .ky-row-thumb img { transform: none; }
    .ky-btn:active { transform: none; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }

/* roulang page: category3 */
:root{
  --ky-primary:#0F6B5C;
  --ky-primary-deep:#0A4F44;
  --ky-primary-weak:rgba(15,107,92,.08);
  --ky-accent:#C08A3E;
  --ky-ink:#101413;
  --ky-text:#2A3034;
  --ky-muted:#6E767A;
  --ky-faint:#9AA1A4;
  --ky-bg:#F7F8F6;
  --ky-surface:#FFFFFF;
  --ky-dark:#0E1413;
  --ky-line:#E4E7E3;
  --ky-line-strong:#D3D8D3;
  --ky-radius:14px;
  --ky-radius-sm:12px;
  --ky-shadow:0 1px 2px rgba(16,20,19,.04), 0 8px 24px -12px rgba(16,20,19,.10);
  --ky-shadow-hover:0 16px 40px -16px rgba(16,20,19,.18);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:150px;}
body{
  margin:0;
  background:var(--ky-bg);
  color:var(--ky-text);
  font-family:'HarmonyOS Sans SC','Source Han Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  font-size:16.5px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;color:inherit;}
::selection{background:rgba(15,107,92,.16);color:var(--ky-ink);}
.ky-container{width:100%;max-width:1200px;margin:0 auto;padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px);}

/* ---------- 品牌行与频道行 ---------- */
.ky-header{position:sticky;top:0;z-index:60;background:var(--ky-surface);transition:box-shadow .25s ease;}
body.is-scrolled .ky-header{box-shadow:0 1px 0 var(--ky-line), 0 10px 24px -20px rgba(16,20,19,.55);}
.ky-brandbar{height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:height .25s ease;}
body.is-scrolled .ky-brandbar{height:60px;}
.ky-logo{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:700;color:var(--ky-ink);letter-spacing:0;}
.ky-logo-mark{position:relative;width:28px;height:28px;flex:none;border-radius:6px;background:var(--ky-primary);overflow:hidden;}
.ky-logo-mark::before,
.ky-logo-mark::after{content:"";position:absolute;left:7px;height:2px;border-radius:2px;background:#fff;}
.ky-logo-mark::before{top:10px;right:7px;}
.ky-logo-mark::after{top:16px;right:13px;}
.ky-brand-actions{display:flex;align-items:center;gap:18px;}
.ky-toplink{font-size:14px;color:var(--ky-muted);transition:color .18s ease;}
.ky-toplink:hover{color:var(--ky-primary);}
.ky-channels{display:flex;align-items:stretch;gap:28px;height:52px;overflow-x:auto;border-top:1px solid var(--ky-line);border-bottom:1px solid var(--ky-line);scrollbar-width:none;}
.ky-channels::-webkit-scrollbar{display:none;}
.ky-channel{position:relative;display:inline-flex;align-items:center;font-size:15px;font-weight:500;color:var(--ky-text);white-space:nowrap;transition:color .18s ease;}
.ky-channel::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ky-primary);transform:scaleX(0);transform-origin:left;transition:transform .18s ease;}
.ky-channel:hover{color:var(--ky-primary);}
.ky-channel:hover::after{transform:scaleX(1);}
.ky-channel.is-active{color:var(--ky-primary);font-weight:600;}
.ky-channel.is-active::after{transform:scaleX(1);}
.ky-burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--ky-line-strong);border-radius:10px;background:#fff;cursor:pointer;transition:border-color .18s ease;}
.ky-burger span{width:18px;height:2px;border-radius:2px;background:var(--ky-ink);}
.ky-burger:hover{border-color:var(--ky-primary);}

/* ---------- 抽屉 ---------- */
.ky-drawer{position:fixed;top:0;right:0;bottom:0;width:280px;max-width:86vw;z-index:120;background:#fff;padding:22px;overflow-y:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.61,.36,1);}
.ky-drawer.is-open{transform:translateX(0);}
.ky-drawer-mask{position:fixed;inset:0;z-index:110;background:rgba(16,20,19,.45);opacity:0;visibility:hidden;transition:opacity .28s ease, visibility .28s ease;}
.ky-drawer-mask.is-open{opacity:1;visibility:visible;}
.ky-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.ky-drawer-close{width:40px;height:40px;border-radius:10px;border:1px solid var(--ky-line-strong);background:#fff;cursor:pointer;}
.ky-pill{display:inline-flex;align-items:center;height:40px;padding:0 16px;margin:0 8px 8px 0;border-radius:999px;background:var(--ky-primary-weak);color:var(--ky-primary);font-size:14px;font-weight:600;}

/* ---------- 按钮 ---------- */
.ky-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 26px;border:1px solid transparent;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .2s ease;}
.ky-btn:active{transform:translateY(1px);}
.ky-btn:focus-visible{outline:2px solid var(--ky-primary);outline-offset:2px;}
.ky-btn-primary{background:var(--ky-primary);color:#fff;}
.ky-btn-primary:hover{background:var(--ky-primary-deep);}
.ky-btn-ghost{background:#fff;border-color:var(--ky-line-strong);color:var(--ky-ink);}
.ky-btn-ghost:hover{border-color:var(--ky-primary);color:var(--ky-primary);background:var(--ky-primary-weak);}
.ky-btn-sm{height:40px;padding:0 18px;font-size:14px;border-radius:9px;}
.ky-btn-lg{height:52px;}
.ky-btn-block{width:100%;}
.ky-btn-text{display:inline-flex;align-items:center;gap:8px;color:var(--ky-primary);font-size:15px;font-weight:600;cursor:pointer;}
.ky-btn-text .ky-arw{transition:transform .15s ease;}
.ky-btn-text:hover .ky-arw{transform:translateX(4px);}
.ky-btn-text:focus-visible{outline:2px solid var(--ky-primary);outline-offset:3px;border-radius:4px;}

/* ---------- 徽章 / 标签 ---------- */
.ky-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--ky-primary-weak);color:var(--ky-primary);font-size:12px;font-weight:600;line-height:1;}
.ky-badge-accent{background:rgba(192,138,62,.12);color:#9A6C24;}
.ky-chip{display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:999px;border:1px solid var(--ky-line-strong);background:#fff;font-size:13.5px;color:var(--ky-muted);transition:color .18s ease, border-color .18s ease, background-color .18s ease;}
.ky-chip:hover{color:var(--ky-primary);border-color:rgba(15,107,92,.4);background:var(--ky-primary-weak);}
.ky-chip.is-on{color:var(--ky-primary);border-color:rgba(15,107,92,.4);background:var(--ky-primary-weak);font-weight:600;}

/* ---------- 内页横幅 ---------- */
.ky-banner{position:relative;min-height:400px;display:flex;align-items:flex-end;color:#fff;background-position:center;background-size:cover;background-repeat:no-repeat;}
.ky-banner-inner{padding:72px 0 44px;width:100%;}
.ky-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.7);}
.ky-crumb a{transition:color .18s ease;}
.ky-crumb a:hover{color:#fff;}
.ky-crumb .ky-cur{color:#8FE3D0;}
.ky-banner h1{margin:18px 0 14px;font-size:clamp(2rem,4.2vw,3rem);font-weight:800;line-height:1.15;color:#fff;letter-spacing:0;}
.ky-banner-desc{max-width:660px;font-size:17px;line-height:1.8;color:rgba(255,255,255,.84);}

/* ---------- 统计 / 筛选条 ---------- */
.ky-statbar{background:var(--ky-surface);border-bottom:1px solid var(--ky-line);}
.ky-statbar-inner{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;padding:18px 0;}
.ky-stat{display:inline-flex;align-items:baseline;gap:8px;font-size:14px;color:var(--ky-muted);}
.ky-stat b{font-family:Inter,system-ui,sans-serif;font-size:19px;font-weight:800;color:var(--ky-ink);}
.ky-stat-sep{width:1px;height:26px;background:var(--ky-line);}
.ky-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-left:auto;}

/* ---------- 锚点栏 ---------- */
.ky-anchorbar{position:sticky;top:76px;z-index:45;background:rgba(247,248,246,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--ky-line);transition:top .25s ease;}
body.is-scrolled .ky-anchorbar{top:60px;}
.ky-anchor-wrap{display:flex;align-items:stretch;gap:26px;height:54px;overflow-x:auto;scrollbar-width:none;}
.ky-anchor-wrap::-webkit-scrollbar{display:none;}
.ky-anchor{position:relative;display:inline-flex;align-items:center;font-size:14.5px;font-weight:500;color:var(--ky-muted);white-space:nowrap;transition:color .18s ease;}
.ky-anchor::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ky-primary);transform:scaleX(0);transform-origin:left;transition:transform .18s ease;}
.ky-anchor:hover{color:var(--ky-primary);}
.ky-anchor:hover::after{transform:scaleX(1);}
.ky-anchor.is-active{color:var(--ky-primary);font-weight:600;}
.ky-anchor.is-active::after{transform:scaleX(1);}

/* ---------- 分组区块 ---------- */
.ky-groupblock{padding:clamp(52px,7vw,88px) 0;}
.ky-groupblock + .ky-groupblock{border-top:1px solid var(--ky-line);}
.ky-num{display:block;margin-bottom:10px;font-family:Inter,system-ui,sans-serif;font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;line-height:1;color:rgba(15,107,92,.14);}
.ky-h2{position:relative;margin:0;font-size:clamp(1.6rem,2.6vw,2.15rem);font-weight:700;line-height:1.22;color:var(--ky-ink);letter-spacing:0;}
.ky-h2::before{content:"";display:block;width:24px;height:3px;margin-bottom:12px;border-radius:2px;background:var(--ky-primary);}
.ky-lead{margin:14px 0 0;max-width:340px;font-size:15.5px;line-height:1.8;color:var(--ky-muted);}
.ky-h3-sm{margin:0;font-size:17px;font-weight:650;line-height:1.45;color:var(--ky-ink);}

/* ---------- 定义式列表 ---------- */
.ky-def{border-top:1px solid var(--ky-line);}
.ky-def-item{padding:22px 0;border-bottom:1px solid var(--ky-line);}
.ky-def-item h3{display:flex;gap:10px;align-items:baseline;margin:0 0 8px;font-size:17px;font-weight:650;line-height:1.5;color:var(--ky-ink);}
.ky-def-item h3::before{content:"";width:6px;height:6px;flex:none;border-radius:2px;background:var(--ky-primary);transform:translateY(-4px);}
.ky-def-item p{margin:0;font-size:15px;line-height:1.85;color:var(--ky-text);}
.ky-def-item .ky-meta{margin-top:8px;font-size:13px;color:var(--ky-muted);}

/* ---------- 案例条目 ---------- */
.ky-case{display:grid;grid-template-columns:1fr;gap:16px;padding:26px 0;border-top:1px solid var(--ky-line);}
.ky-case:last-of-type{border-bottom:1px solid var(--ky-line);}
@media (min-width:680px){.ky-case{grid-template-columns:200px 1fr;gap:26px;align-items:start;}}
.ky-case-thumb{width:100%;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--ky-radius-sm);background:var(--ky-line);}
.ky-case-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.ky-case:hover .ky-case-thumb img{transform:scale(1.03);}
.ky-case h3{margin:10px 0 8px;font-size:17.5px;font-weight:650;line-height:1.45;color:var(--ky-ink);transition:color .18s ease;}
.ky-case:hover h3{color:var(--ky-primary);}
.ky-case p{margin:0;font-size:15px;line-height:1.85;color:var(--ky-text);}

/* ---------- 咨询条 ---------- */
.ky-consult{background:var(--ky-primary-weak);border:1px solid rgba(15,107,92,.18);border-radius:var(--ky-radius);padding:clamp(26px,4vw,40px);}
.ky-consult h2{margin:0 0 12px;font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:700;line-height:1.3;color:var(--ky-ink);}
.ky-consult p{margin:0 0 20px;font-size:15.5px;line-height:1.85;color:var(--ky-text);max-width:640px;}

/* ---------- 深色 CTA ---------- */
.ky-cta{background:var(--ky-dark);color:#fff;padding:clamp(56px,7vw,92px) 0;}
.ky-cta h2{margin:0 0 14px;font-size:clamp(1.7rem,3vw,2.35rem);font-weight:700;line-height:1.24;color:#fff;}
.ky-cta p{margin:0;font-size:16px;line-height:1.85;color:rgba(255,255,255,.72);max-width:520px;}
.ky-points{display:flex;flex-direction:column;gap:10px;margin-top:26px;}
.ky-point{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:rgba(255,255,255,.82);}
.ky-point::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:rgba(15,107,92,.35);border:1px solid rgba(143,227,208,.6);}
.ky-form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--ky-radius);padding:clamp(22px,3vw,32px);}
.ky-field{margin-bottom:18px;}
.ky-field label{display:block;margin-bottom:8px;font-size:13px;color:rgba(255,255,255,.72);}
.ky-input{width:100%;height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;font-size:15px;transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;}
.ky-input::placeholder{color:rgba(255,255,255,.38);}
.ky-input:focus{outline:none;border-color:var(--ky-primary);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(15,107,92,.3);}
textarea.ky-input{height:auto;min-height:96px;padding:12px 14px;line-height:1.7;resize:vertical;}
.ky-form-note{margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.6);}

/* ---------- 页脚 ---------- */
.ky-footer-link{display:block;padding:5px 0;font-size:14px;color:rgba(255,255,255,.7);transition:color .18s ease;}
.ky-footer-link:hover{color:#8FE3D0;}

/* ---------- 入场动效 ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .48s cubic-bezier(.22,.61,.36,1), transform .48s cubic-bezier(.22,.61,.36,1);}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .ky-case-thumb img{transition:none;}
}

/* ---------- 响应式 ---------- */
@media (max-width:1023px){
  .ky-brandbar{height:66px;}
  body.is-scrolled .ky-brandbar{height:58px;}
  .ky-anchorbar{top:66px;}
  body.is-scrolled .ky-anchorbar{top:58px;}
}
@media (max-width:767px){
  .ky-channels{display:none;}
  .ky-burger{display:inline-flex;}
  .ky-toplink{display:none;}
  .ky-banner{min-height:360px;}
  .ky-banner-inner{padding:52px 0 34px;}
  .ky-filters{margin-left:0;}
  .ky-stat-sep{display:none;}
  html{scroll-padding-top:110px;}
}

/* roulang page: category2 */
:root {
    --ky-primary: #0F6B5C;
    --ky-primary-deep: #0A4F44;
    --ky-primary-weak: rgba(15, 107, 92, .08);
    --ky-accent: #C08A3E;
    --ky-ink: #101413;
    --ky-text: #2A3034;
    --ky-muted: #6E767A;
    --ky-faint: #9AA1A4;
    --ky-bg: #F7F8F6;
    --ky-surface: #FFFFFF;
    --ky-dark: #0E1413;
    --ky-line: #E4E7E3;
    --ky-line-strong: #D3D8D3;
    --ky-radius-card: 14px;
    --ky-radius-img: 12px;
    --ky-radius-btn: 10px;
    --ky-shadow-sm: 0 1px 2px rgba(16, 20, 19, .04), 0 8px 24px -12px rgba(16, 20, 19, .10);
    --ky-shadow-lg: 0 16px 40px -16px rgba(16, 20, 19, .18);
  }

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

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: 'HarmonyOS Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    background: var(--ky-bg);
    color: var(--ky-text);
    font-size: 16px;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
  }

  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button, input, textarea { font: inherit; color: inherit; }
  ::selection { background: rgba(15, 107, 92, .16); }

  .ky-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
  }

  /* ---------- header ---------- */
  .ky-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .95);
    border-bottom: 1px solid transparent;
    transition: box-shadow .25s ease, border-color .25s ease;
  }
  .ky-header.is-shrink {
    border-color: var(--ky-line);
    box-shadow: 0 1px 0 var(--ky-line), 0 10px 30px -24px rgba(16, 20, 19, .5);
    backdrop-filter: blur(8px);
  }
  .ky-topbar { height: 76px; transition: height .25s ease; }
  .ky-header.is-shrink .ky-topbar { height: 60px; }

  .ky-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--ky-ink); letter-spacing: 0; }
  .ky-logo-mark {
    position: relative;
    width: 28px; height: 28px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--ky-primary);
    overflow: hidden;
  }
  .ky-logo-mark::after {
    content: '';
    position: absolute;
    left: 9px; top: 8px;
    width: 12px; height: 12px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
  }

  .ky-toplink {
    font-size: 14px;
    color: var(--ky-muted);
    transition: color .2s ease;
  }
  .ky-toplink:hover { color: var(--ky-primary); }

  .ky-burger {
    width: 44px; height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--ky-line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s ease;
  }
  .ky-burger:hover { border-color: var(--ky-primary); }
  .ky-burger span { display: block; width: 18px; height: 2px; background: var(--ky-ink); }

  .ky-channelline { border-bottom: 1px solid var(--ky-line); background: #fff; }
  .ky-channels {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 52px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ky-channels::-webkit-scrollbar { display: none; }
  .ky-channel {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 52px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ky-text);
    white-space: nowrap;
    transition: color .18s ease;
  }
  .ky-channel::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--ky-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .18s ease;
  }
  .ky-channel:hover { color: var(--ky-primary); }
  .ky-channel:hover::after { transform: scaleX(1); }
  .ky-channel.is-active { color: var(--ky-primary); font-weight: 600; }
  .ky-channel.is-active::after { transform: scaleX(1); }

  /* ---------- buttons ---------- */
  .ky-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 26px;
    border-radius: var(--ky-radius-btn);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .ky-btn:focus-visible { outline: 2px solid var(--ky-primary); outline-offset: 2px; }
  .ky-btn-primary { background: var(--ky-primary); color: #fff; }
  .ky-btn-primary:hover { background: var(--ky-primary-deep); }
  .ky-btn-primary:active { transform: translateY(1px); }
  .ky-btn-ghost { background: transparent; border-color: var(--ky-line-strong); color: var(--ky-ink); }
  .ky-btn-ghost:hover { border-color: var(--ky-primary); color: var(--ky-primary); background: rgba(15, 107, 92, .04); }
  .ky-btn-lg { height: 52px; padding: 0 32px; }

  .ky-textbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ky-primary);
    min-height: 44px;
  }
  .ky-textbtn svg { transition: transform .2s ease; }
  .ky-textbtn:hover svg { transform: translateX(4px); }

  /* ---------- hero ---------- */
  .ky-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    padding: 72px 0 56px;
    background-image:
      linear-gradient(100deg, rgba(14, 20, 19, .94) 0%, rgba(14, 20, 19, .78) 46%, rgba(14, 20, 19, .44) 100%),
      url('/assets/images/backpic/back-2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .ky-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .68); }
  .ky-crumb a { transition: color .2s ease; }
  .ky-crumb a:hover { color: #fff; }
  .ky-crumb .is-current { color: var(--ky-accent); }
  .ky-hero h1 {
    margin: 18px 0 0;
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
  }
  .ky-hero-sub {
    margin: 16px 0 0;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .76);
  }

  .ky-filterbar { background: #fff; border-bottom: 1px solid var(--ky-line); }
  .ky-filterbar-inner { min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
  .ky-filterbar .ky-fact { font-size: 13px; color: var(--ky-muted); }
  .ky-filterbar .ky-fact b { color: var(--ky-ink); font-weight: 700; font-family: Inter, system-ui, sans-serif; }
  .ky-sortbtn {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--ky-muted);
    cursor: default;
  }
  .ky-sortbtn.is-active { background: var(--ky-primary-weak); color: var(--ky-primary); font-weight: 600; }

  /* ---------- sections ---------- */
  .ky-section { padding: 88px 0; }
  .ky-section-tight { padding: 64px 0; }
  .ky-h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ky-ink);
  }
  .ky-h2::before {
    content: '';
    display: block;
    width: 24px; height: 3px;
    background: var(--ky-primary);
    margin-bottom: 14px;
  }
  .ky-lead { margin: 14px 0 0; max-width: 660px; font-size: 16px; line-height: 1.85; color: var(--ky-muted); }

  /* ---------- feature ---------- */
  .ky-feature {
    background: var(--ky-surface);
    border: 1px solid var(--ky-line);
    border-radius: var(--ky-radius-card);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .ky-feature:hover { border-color: rgba(15, 107, 92, .3); box-shadow: var(--ky-shadow-lg); transform: translateY(-2px); }
  .ky-feature-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ky-line); }
  .ky-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
  .ky-feature:hover .ky-feature-media img { transform: scale(1.03); }
  .ky-feature-body { padding: 28px clamp(22px, 3vw, 36px) 34px; background: #fff; }
  .ky-feature-title { margin: 14px 0 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1.32; color: var(--ky-ink); transition: color .2s ease; }
  .ky-feature:hover .ky-feature-title { color: var(--ky-primary); }
  .ky-feature-text { margin: 14px 0 0; font-size: 16px; line-height: 1.85; color: var(--ky-muted); max-width: 860px; }

  /* ---------- cards ---------- */
  .ky-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ky-surface);
    border: 1px solid var(--ky-line);
    border-radius: var(--ky-radius-card);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .ky-card:hover { border-color: rgba(15, 107, 92, .3); box-shadow: var(--ky-shadow-lg); transform: translateY(-2px); }
  .ky-card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ky-line); }
  .ky-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
  .ky-card:hover .ky-card-media img { transform: scale(1.03); }
  .ky-card-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 26px; flex: 1; }
  .ky-card-title { margin: 0; font-size: 1.25rem; font-weight: 650; line-height: 1.35; color: var(--ky-ink); transition: color .2s ease; }
  .ky-card:hover .ky-card-title { color: var(--ky-primary); }
  .ky-card-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--ky-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ky-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }

  .ky-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--ky-primary-weak);
    color: var(--ky-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
  }
  .ky-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ky-muted); font-family: Inter, system-ui, sans-serif; }
  .ky-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ky-line-strong); }

  /* ---------- stats ---------- */
  .ky-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ky-stat { padding: 8px 28px; border-left: 1px solid var(--ky-line); }
  .ky-stat:first-child { border-left: 0; padding-left: 0; }
  .ky-stat-num { font-family: Inter, system-ui, sans-serif; font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.1; color: var(--ky-primary); }
  .ky-stat-label { margin-top: 6px; font-size: 14px; color: var(--ky-muted); }

  /* ---------- tags ---------- */
  .ky-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid var(--ky-line-strong);
    background: #fff;
    font-size: 15px;
    color: var(--ky-text);
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
  }
  .ky-tag:hover { border-color: var(--ky-primary); color: var(--ky-primary); background: var(--ky-primary-weak); }
  .ky-tag.is-active { background: var(--ky-primary); border-color: var(--ky-primary); color: #fff; }

  /* ---------- faq ---------- */
  .ky-faq-item { border-bottom: 1px solid var(--ky-line); }
  .ky-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    background: none;
    border: 0;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    color: var(--ky-ink);
    cursor: pointer;
    transition: color .2s ease;
  }
  .ky-faq-q:hover { color: var(--ky-primary); }
  .ky-faq-q:focus-visible { outline: 2px solid var(--ky-primary); outline-offset: 4px; border-radius: 4px; }
  .ky-faq-icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; transition: transform .3s ease; }
  .ky-faq-icon::before, .ky-faq-icon::after { content: ''; position: absolute; background: var(--ky-primary); }
  .ky-faq-icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
  .ky-faq-icon::after { left: 7px; top: 0; width: 2px; height: 16px; }
  .ky-faq-item.is-open .ky-faq-icon { transform: rotate(45deg); }
  .ky-faq-a { max-height: 0; overflow: hidden; opacity: .3; transition: max-height .3s ease, opacity .3s ease; }
  .ky-faq-item.is-open .ky-faq-a { opacity: 1; }
  .ky-faq-a p { margin: 0; padding: 0 44px 22px 0; font-size: 15px; line-height: 1.85; color: var(--ky-text); }

  /* ---------- cta ---------- */
  .ky-cta { position: relative; background: var(--ky-dark); overflow: hidden; }
  .ky-cta::after {
    content: '';
    position: absolute;
    right: -80px; top: -80px;
    width: 320px; height: 320px;
    background-image: radial-gradient(rgba(15, 107, 92, .35) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: .7;
    pointer-events: none;
  }
  .ky-cta h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.22; color: #fff; }
  .ky-cta p { margin: 14px 0 0; font-size: 16px; line-height: 1.85; color: rgba(255, 255, 255, .7); }
  .ky-points { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
  .ky-point { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .78); }
  .ky-point i {
    width: 18px; height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(15, 107, 92, .9);
    position: relative;
  }
  .ky-point i::after {
    content: '';
    position: absolute;
    left: 5px; top: 4px;
    width: 7px; height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
  }

  .ky-form { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--ky-radius-card); padding: 26px; }
  .ky-field { margin-bottom: 16px; }
  .ky-field label { display: block; font-size: 13px; color: rgba(255, 255, 255, .78); margin-bottom: 8px; }
  .ky-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border-radius: var(--ky-radius-btn);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  .ky-input::placeholder { color: rgba(255, 255, 255, .38); }
  .ky-input:focus { outline: none; border-color: var(--ky-primary); box-shadow: 0 0 0 3px rgba(15, 107, 92, .3); background: rgba(255, 255, 255, .1); }
  textarea.ky-input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.7; }
  .ky-form-note { margin: 12px 0 0; font-size: 13px; color: rgba(255, 255, 255, .55); }
  .ky-form-ok { display: none; margin-top: 14px; font-size: 14px; color: #7FD8C4; }
  .ky-form-ok.is-show { display: block; }

  /* ---------- footer ---------- */
  .ky-footer-link { display: inline-block; width: fit-content; padding: 5px 0; font-size: 14px; color: rgba(255, 255, 255, .68); transition: color .2s ease, transform .2s ease; }
  .ky-footer-link:hover { color: #fff; transform: translateX(2px); }

  /* ---------- drawer ---------- */
  .ky-drawer-mask {
    position: fixed;
    inset: 0;
    background: rgba(16, 20, 19, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    z-index: 90;
  }
  .ky-drawer-mask.is-open { opacity: 1; visibility: visible; }
  .ky-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 300px;
    max-width: 88vw;
    background: #fff;
    z-index: 100;
    padding: 22px;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    overflow-y: auto;
  }
  .ky-drawer.is-open { transform: translateX(0); }
  .ky-drawer-close {
    width: 44px; height: 44px;
    border: 1px solid var(--ky-line);
    border-radius: 10px;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: var(--ky-ink);
    cursor: pointer;
  }
  .ky-drawer-close:hover { border-color: var(--ky-primary); color: var(--ky-primary); }
  .ky-drawer-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--ky-primary-weak);
    color: var(--ky-primary);
    font-size: 15px;
    font-weight: 500;
  }
  .ky-drawer-link.is-active { background: var(--ky-primary); color: #fff; }

  /* ---------- reveal ---------- */
  .ky-reveal { opacity: 0; transform: translateY(12px); transition: opacity .48s cubic-bezier(.22, .61, .36, 1), transform .48s cubic-bezier(.22, .61, .36, 1); }
  .ky-reveal.is-in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ky-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .ky-card, .ky-feature, .ky-btn, .ky-tag, .ky-footer-link { transition: none !important; }
    .ky-card:hover, .ky-feature:hover { transform: none !important; }
  }

  /* ---------- responsive ---------- */
  @media (max-width: 1023px) {
    .ky-section { padding: 64px 0; }
    .ky-section-tight { padding: 52px 0; }
    .ky-hero { min-height: 380px; padding: 56px 0 44px; }
  }
  @media (max-width: 767px) {
    .ky-channelline { display: none; }
    .ky-topbar { height: 64px; }
    .ky-header.is-shrink .ky-topbar { height: 58px; }
    .ky-hero { min-height: 360px; }
    .ky-hero h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
    .ky-hero-sub { font-size: 15px; }
    .ky-section { padding: 56px 0; }
    .ky-stats { grid-template-columns: 1fr; }
    .ky-stat { border-left: 0; border-top: 1px solid var(--ky-line); padding: 20px 0 0; }
    .ky-stat:first-child { border-top: 0; padding-top: 0; }
    .ky-card-title { font-size: 1.15rem; }
    .ky-faq-a p { padding-right: 12px; }
    .ky-form { padding: 22px 18px; }
  }