/* roulang page: index */
:root{
      --ink:#17232b;--muted:#64737a;--paper:#f7f8f5;--white:#fff;
      --teal:#0e6f6c;--teal-dark:#09504f;--coral:#d97961;--gold:#d9ab58;
      --line:#dce5e0;--soft:#e8f1ed;--radius:18px;--shadow:0 16px 45px rgba(20,47,45,.11)
    }
    *,*:before,*:after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC",sans-serif;line-height:1.75}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    img{max-width:100%;display:block}
    .container{max-width:1160px}
    .topline{height:4px;background:var(--coral)}
    .site-header{background:rgba(247,248,245,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
    .navbar{padding:18px 0}
    .brand{display:flex;align-items:center;gap:11px;font-size:1.08rem;font-weight:800;letter-spacing:0}
    .brand-mark{display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:var(--teal);color:#fff;font-size:1rem}
    .nav-link{color:var(--muted);font-size:.92rem;font-weight:600;padding:9px 14px!important;border-radius:10px}
    .nav-link:hover,.nav-link.active{color:var(--teal-dark);background:var(--soft)}
    .nav-cta{background:var(--teal);color:#fff!important;margin-left:8px}
    .nav-cta:hover{background:var(--teal-dark);transform:translateY(-1px)}
    .hero{min-height:650px;position:relative;display:flex;align-items:end;color:#fff;background:linear-gradient(90deg,rgba(9,44,43,.87),rgba(9,44,43,.38)),url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=1800&q=90") center/cover}
    .hero-content{padding:112px 0 76px;max-width:760px}
    .eyebrow,.section-kicker{color:var(--gold);font-size:.77rem;letter-spacing:.12em;font-weight:800}
    h1{font-size:clamp(2.5rem,6vw,5.1rem);line-height:1.12;letter-spacing:0;font-weight:800;margin:18px 0 22px}
    h2{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.25;font-weight:800;margin:10px 0 16px}
    h3{font-size:1.2rem;line-height:1.4;font-weight:800}
    .hero p{font-size:1.08rem;max-width:680px;color:rgba(255,255,255,.86);margin-bottom:30px}
    .btn-main,.btn-outline-light,.btn-soft{border-radius:10px;padding:12px 21px;font-weight:700;border:1px solid transparent;transition:.25s}
    .btn-main{background:var(--coral);color:#fff}
    .btn-main:hover{background:#bd604b;color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(217,121,97,.28)}
    .btn-outline-light:hover{background:#fff;color:var(--teal-dark)}
    .hero-strip{position:absolute;bottom:0;right:0;left:0;background:rgba(7,36,35,.62);border-top:1px solid rgba(255,255,255,.18)}
    .strip-item{padding:16px 20px;border-right:1px solid rgba(255,255,255,.17);font-size:.9rem;color:#e8f1ed}
    .strip-item strong{display:block;color:#fff;font-size:1.02rem}
    .section{padding:92px 0}
    .section-head{max-width:680px;margin-bottom:38px}
    .section-head p{color:var(--muted);margin:0}
    .light-band{background:#edf4f0}
    .story-image{height:430px;border-radius:var(--radius);object-fit:cover;box-shadow:var(--shadow)}
    .story-copy{padding:18px 0 10px 28px}
    .check-list{padding:0;margin:25px 0 0;list-style:none}
    .check-list li{display:flex;gap:12px;margin:14px 0;color:#3c5054}
    .check-list i{color:var(--teal);font-style:normal;font-weight:800}
    .info-card,.quote-card,.step-card,.resource-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 8px 28px rgba(20,47,45,.05);height:100%;transition:.25s}
    .info-card:hover,.resource-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .card-number{color:var(--coral);font-size:1.5rem;font-weight:800;margin-bottom:18px}
    .info-card p,.resource-card p,.quote-card p{color:var(--muted);font-size:.94rem;margin:0}
    .metric-band{background:var(--teal-dark);color:#fff;padding:42px 0}
    .metric{border-left:1px solid rgba(255,255,255,.25);padding-left:25px}
    .metric strong{display:block;font-size:2.2rem;line-height:1.2;color:#f0c777}
    .metric span{font-size:.9rem;color:#d4e6df}
    .compare{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
    .compare-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
    .compare-row:last-child{border-bottom:0}
    .compare-row div{padding:19px 24px}
    .compare-row div:first-child{background:#faf5f1;color:#9a5544}
    .compare-row div:last-child{background:#eef7f2;color:var(--teal-dark)}
    .compare-row strong{display:block;margin-bottom:4px}
    .resource-card{padding:22px}
    .resource-card .tag{margin-bottom:15px}
    .tag{display:inline-block;background:var(--soft);color:var(--teal-dark);border-radius:20px;padding:4px 11px;font-size:.75rem;font-weight:700}
    .resource-list{list-style:none;padding:0;margin:0}
    .resource-list li{border-bottom:1px solid var(--line);padding:17px 0;display:flex;justify-content:space-between;gap:18px}
    .resource-list li:last-child{border-bottom:0}
    .resource-list a{font-weight:700}
    .resource-list a:hover{color:var(--coral)}
    .resource-list small{color:var(--muted);white-space:nowrap}
    .quote-card{position:relative;padding-top:35px}
    .quote-card:before{content:"“";position:absolute;top:4px;left:25px;color:var(--coral);font-size:3rem;line-height:1}
    .quote-card cite{display:block;color:var(--teal-dark);font-size:.85rem;font-weight:700;margin-top:16px;font-style:normal}
    .step-line{position:relative}
    .step-card{position:relative;padding:24px;border-radius:14px}
    .step-card .step-no{display:grid;place-items:center;width:34px;height:34px;background:var(--coral);color:white;border-radius:50%;font-weight:800;margin-bottom:16px}
    .form-zone{background:#102f31;color:#fff;border-radius:var(--radius);padding:48px}
    .form-zone p{color:#bcd0ca}
    .form-control{border:1px solid #cbdad4;border-radius:9px;padding:12px 15px}
    .form-control:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(217,121,97,.16)}
    .privacy{font-size:.78rem;color:#a8c2ba;margin-top:13px}
    .faq .accordion-item{border:1px solid var(--line);margin-bottom:12px;border-radius:12px!important;overflow:hidden;background:#fff}
    .accordion-button{font-weight:700;color:var(--ink);background:#fff;padding:20px 22px}
    .accordion-button:not(.collapsed){background:var(--soft);color:var(--teal-dark);box-shadow:none}
    .accordion-button:focus{box-shadow:0 0 0 3px rgba(14,111,108,.15)}
    .accordion-body{color:var(--muted);padding:0 22px 22px}
    .cta{background:var(--coral);color:#fff;padding:62px 0}
    .cta p{color:rgba(255,255,255,.84);max-width:650px}
    footer{background:#102f31;color:#d5e4df;padding:55px 0 25px}
    footer .brand{color:#fff}
    .footer-copy{color:#91ada5;font-size:.82rem;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;margin-top:35px}
    .footer-links a{color:#b7cbc5;font-size:.9rem;margin-right:22px}
    .footer-links a:hover{color:#fff}
    :focus-visible{outline:3px solid rgba(217,171,88,.8);outline-offset:3px}
    @media(max-width:991px){.hero{min-height:600px}.hero-content{padding:95px 0 82px}.story-copy{padding:25px 0}.navbar-collapse{padding-top:15px}.nav-cta{margin:8px 0 0}}
    @media(max-width:767px){.section{padding:65px 0}.hero{min-height:650px}.hero-content{padding:85px 0 100px}h1{font-size:2.7rem}.hero p{font-size:1rem}.hero-strip .row{flex-wrap:nowrap;overflow:auto}.strip-item{min-width:190px}.story-image{height:300px}.metric{border-left:0;border-bottom:1px solid rgba(255,255,255,.2);padding:14px 0}.metric-band .col-6:last-child .metric{border-bottom:0}.form-zone{padding:30px 22px}.compare-row div{padding:15px 14px;font-size:.9rem}}
    @media(max-width:520px){.hero-content{padding-top:72px}.hero .btn{width:100%;margin-bottom:10px}.resource-list li{display:block}.resource-list small{display:block;margin-top:5px}.footer-links a{display:inline-block;margin:0 18px 12px 0}}

/* roulang page: category1 */
:root {
      --color-primary: #0f5b4c;
      --color-primary-dark: #0a3e35;
      --color-accent: #f0a94a;
      --color-accent-soft: #fff3df;
      --color-bg: #f7faf7;
      --color-surface: #ffffff;
      --color-surface-2: #eef6f2;
      --color-text: #15231f;
      --color-muted: #60736d;
      --color-border: #dce8e3;
      --color-footer: #092c27;
      --shadow-sm: 0 10px 28px rgba(13, 53, 45, .08);
      --shadow-md: 0 18px 48px rgba(13, 53, 45, .14);
      --radius-sm: 14px;
      --radius-md: 22px;
      --radius-lg: 34px;
      --container: 1160px;
      --ease: all .22s ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      line-height: 1.72;
      color: var(--color-text);
      background:
        radial-gradient(circle at top left, rgba(240, 169, 74, .13), transparent 34rem),
        linear-gradient(180deg, #fbfdfb 0%, var(--color-bg) 42%, #ffffff 100%);
      text-rendering: optimizeLegibility;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: var(--ease);
    }

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

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

    ::selection {
      background: rgba(15, 91, 76, .16);
    }

    .container {
      max-width: var(--container);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, .86);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(220, 232, 227, .78);
      box-shadow: 0 8px 30px rgba(15, 52, 45, .04);
    }

    .navbar {
      padding: 16px 0;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--color-primary-dark);
      font-size: 1.12rem;
      white-space: nowrap;
    }

    .brand:hover {
      color: var(--color-primary);
      transform: translateY(-1px);
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 13px;
      background: linear-gradient(135deg, var(--color-primary), #1d8b74);
      color: #fff;
      font-size: .98rem;
      box-shadow: 0 10px 24px rgba(15, 91, 76, .24);
    }

    .navbar-toggler {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: var(--color-surface-2);
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 4px rgba(15, 91, 76, .16);
    }

    .navbar-toggler-icon {
      width: 1.2em;
      height: 1.2em;
    }

    .navbar-nav {
      gap: 8px;
    }

    .nav-link {
      color: var(--color-muted);
      font-weight: 700;
      padding: 10px 14px !important;
      border-radius: 999px;
      position: relative;
    }

    .nav-link:hover,
    .nav-link:focus {
      color: var(--color-primary);
      background: rgba(15, 91, 76, .08);
    }

    .nav-link.active {
      color: var(--color-primary-dark);
      background: var(--color-surface-2);
    }

    .nav-cta {
      color: #fff !important;
      background: var(--color-primary);
      padding-inline: 18px !important;
      box-shadow: 0 12px 28px rgba(15, 91, 76, .18);
    }

    .nav-cta:hover,
    .nav-cta:focus {
      color: #fff !important;
      background: var(--color-primary-dark);
      transform: translateY(-1px);
    }

    main {
      overflow: hidden;
    }

    section {
      padding: 86px 0;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      color: var(--color-primary-dark);
      background: var(--color-accent-soft);
      font-size: .88rem;
      font-weight: 800;
      margin-bottom: 16px;
    }

    .section-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-accent);
    }

    .section-title {
      font-size: clamp(2rem, 4vw, 3.15rem);
      line-height: 1.16;
      letter-spacing: -.04em;
      font-weight: 900;
      margin-bottom: 18px;
      color: var(--color-text);
    }

    .section-lead {
      color: var(--color-muted);
      font-size: 1.08rem;
      max-width: 760px;
      margin-bottom: 0;
    }

    .btn-brand {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 48px;
      padding: 12px 20px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: var(--color-primary);
      color: #fff;
      font-weight: 800;
      box-shadow: 0 14px 34px rgba(15, 91, 76, .22);
      transition: var(--ease);
    }

    .btn-brand:hover,
    .btn-brand:focus {
      color: #fff;
      background: var(--color-primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(15, 91, 76, .28);
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 48px;
      padding: 12px 20px;
      border-radius: 999px;
      border: 1px solid var(--color-border);
      background: #fff;
      color: var(--color-primary-dark);
      font-weight: 800;
      transition: var(--ease);
    }

    .btn-ghost:hover,
    .btn-ghost:focus {
      border-color: rgba(15, 91, 76, .24);
      background: var(--color-surface-2);
      color: var(--color-primary);
      transform: translateY(-2px);
    }

    .hero {
      padding: 84px 0 72px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr);
      gap: 42px;
      align-items: center;
    }

    .hero h1 {
      font-size: clamp(2.35rem, 5vw, 4.45rem);
      line-height: 1.08;
      letter-spacing: -.055em;
      font-weight: 950;
      margin: 0 0 22px;
    }

    .hero-summary {
      color: var(--color-muted);
      font-size: 1.12rem;
      max-width: 690px;
      margin-bottom: 28px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      margin-bottom: 28px;
    }

    .trust-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      color: var(--color-muted);
      font-size: .94rem;
    }

    .trust-row span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 12px;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      background: rgba(255, 255, 255, .72);
    }

    .trust-row span::before {
      content: "✓";
      color: var(--color-primary);
      font-weight: 900;
    }

    .whitepaper-card {
      border-radius: var(--radius-lg);
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }

    .cover-visual {
      min-height: 250px;
      padding: 28px;
      background:
        linear-gradient(145deg, rgba(15, 91, 76, .94), rgba(10, 62, 53, .96)),
        radial-gradient(circle at 80% 15%, rgba(240, 169, 74, .45), transparent 16rem);
      color: #fff;
      position: relative;
    }

    .cover-visual::after {
      content: "";
      position: absolute;
      right: -54px;
      bottom: -54px;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      border: 34px solid rgba(255, 255, 255, .1);
    }

    .cover-label {
      display: inline-flex;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .14);
      color: #dff3ed;
      font-size: .86rem;
      font-weight: 800;
      margin-bottom: 24px;
    }

    .cover-title {
      font-size: 2rem;
      line-height: 1.18;
      font-weight: 900;
      max-width: 320px;
      margin-bottom: 18px;
      position: relative;
      z-index: 1;
    }

    .cover-meta {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      color: #d8eee8;
      font-size: .92rem;
      position: relative;
      z-index: 1;
    }

    .download-box {
      padding: 26px;
    }

    .toc-list {
      display: grid;
      gap: 12px;
      margin: 0 0 22px;
      padding: 0;
      list-style: none;
    }

    .toc-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: var(--color-muted);
      font-size: .95rem;
    }

    .toc-list strong {
      color: var(--color-text);
      display: block;
      margin-bottom: 2px;
    }

    .toc-list li::before {
      content: "";
      flex: 0 0 22px;
      height: 22px;
      border-radius: 8px;
      margin-top: 3px;
      background: var(--color-accent-soft);
      border: 1px solid rgba(240, 169, 74, .42);
    }

    .lead-form {
      display: grid;
      gap: 12px;
      padding-top: 6px;
    }

    .form-control,
    .form-select {
      border-radius: 16px;
      border-color: var(--color-border);
      min-height: 48px;
      color: var(--color-text);
      box-shadow: none;
    }

    .form-control:focus,
    .form-select:focus {
      border-color: rgba(15, 91, 76, .52);
      box-shadow: 0 0 0 4px rgba(15, 91, 76, .12);
    }

    .form-note {
      color: var(--color-muted);
      font-size: .84rem;
      margin: 0;
    }

    .value-strip {
      padding: 0 0 82px;
    }

    .strip-panel {
      border-radius: var(--radius-lg);
      background: var(--color-primary-dark);
      color: #fff;
      padding: 28px;
      box-shadow: var(--shadow-md);
    }

    .metric {
      padding: 18px;
      border-radius: 22px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
      height: 100%;
    }

    .metric strong {
      display: block;
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 8px;
      color: #fff;
    }

    .metric span {
      color: #bed8d1;
      font-size: .94rem;
    }

    .feature-layout {
      display: grid;
      grid-template-columns: .78fr 1.22fr;
      gap: 34px;
      align-items: start;
    }

    .sticky-note {
      position: sticky;
      top: 100px;
      border-radius: var(--radius-lg);
      padding: 30px;
      background: var(--color-surface-2);
      border: 1px solid var(--color-border);
    }

    .feature-stack {
      display: grid;
      gap: 16px;
    }

    .feature-card {
      padding: 24px;
      border-radius: var(--radius-md);
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      transition: var(--ease);
    }

    .feature-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
      border-color: rgba(15, 91, 76, .18);
    }

    .feature-card h3 {
      font-size: 1.18rem;
      font-weight: 900;
      margin-bottom: 8px;
    }

    .feature-card p {
      color: var(--color-muted);
      margin-bottom: 0;
    }

    .badge-soft {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 11px;
      border-radius: 999px;
      background: var(--color-accent-soft);
      color: #8a5613;
      font-weight: 800;
      font-size: .84rem;
      margin-bottom: 14px;
    }

    .preview-section {
      background: linear-gradient(180deg, rgba(238, 246, 242, .62), rgba(255, 255, 255, .86));
    }

    .preview-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 32px;
      align-items: center;
    }

    .screen-frame {
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border);
      background: #fff;
      box-shadow: var(--shadow-md);
      padding: 18px;
      overflow: hidden;
    }

    .screen-top {
      display: flex;
      gap: 8px;
      padding: 12px 14px;
      border-radius: 18px;
      background: #f3f8f5;
      margin-bottom: 14px;
    }

    .screen-top span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #c7d9d2;
    }

    .check-panel {
      padding: 22px;
      border-radius: 22px;
      background: linear-gradient(135deg, #ffffff, #f8fcfa);
      border: 1px solid var(--color-border);
    }

    .check-item {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .check-item:last-child {
      border-bottom: 0;
    }

    .check-item b {
      color: var(--color-text);
    }

    .check-item span {
      color: var(--color-muted);
      text-align: right;
      max-width: 220px;
    }

    .timeline {
      display: grid;
      gap: 16px;
      counter-reset: step;
    }

    .step-card {
      counter-increment: step;
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 18px;
      padding: 24px;
      border-radius: var(--radius-md);
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
    }

    .step-card::before {
      content: counter(step, decimal-leading-zero);
      width: 52px;
      height: 52px;
      border-radius: 18px;
      background: var(--color-primary);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      box-shadow: 0 12px 28px rgba(15, 91, 76, .2);
    }

    .step-card h3 {
      font-size: 1.16rem;
      font-weight: 900;
      margin-bottom: 6px;
    }

    .step-card p {
      color: var(--color-muted);
      margin-bottom: 0;
    }

    .requirements {
      background: #fff;
    }

    .requirement-card {
      height: 100%;
      padding: 26px;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      background: linear-gradient(180deg, #fff, #fbfdfc);
      box-shadow: var(--shadow-sm);
    }

    .requirement-card h3 {
      font-size: 1.12rem;
      font-weight: 900;
      margin-bottom: 12px;
    }

    .requirement-card ul {
      padding: 0;
      margin: 0;
      list-style: none;
      display: grid;
      gap: 11px;
    }

    .requirement-card li {
      color: var(--color-muted);
      display: flex;
      gap: 9px;
    }

    .requirement-card li::before {
      content: "•";
      color: var(--color-accent);
      font-weight: 900;
    }

    .testimonial-wall {
      background: var(--color-primary-dark);
      color: #fff;
      position: relative;
    }

    .testimonial-wall .section-title,
    .testimonial-wall .section-kicker {
      color: #fff;
    }

    .testimonial-wall .section-kicker {
      background: rgba(255, 255, 255, .12);
    }

    .testimonial-wall .section-lead {
      color: #c7ded8;
    }

    .quote-card {
      height: 100%;
      padding: 26px;
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .13);
      color: #eaf5f1;
      transition: var(--ease);
    }

    .quote-card:hover {
      transform: translateY(-3px);
      background: rgba(255, 255, 255, .11);
    }

    .quote-card p {
      margin-bottom: 18px;
    }

    .quote-card b {
      color: #fff;
    }

    .quote-card span {
      display: block;
      color: #b6d3cb;
      font-size: .9rem;
      margin-top: 2px;
    }

    .faq-section {
      background: #fff;
    }

    .accordion {
      display: grid;
      gap: 14px;
    }

    .accordion-item {
      border: 1px solid var(--color-border) !important;
      border-radius: 20px !important;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .accordion-button {
      padding: 20px 22px;
      font-weight: 900;
      color: var(--color-text);
      background: #fff;
      box-shadow: none !important;
    }

    .accordion-button:not(.collapsed) {
      color: var(--color-primary-dark);
      background: var(--color-surface-2);
    }

    .accordion-button:focus {
      box-shadow: inset 0 0 0 3px rgba(15, 91, 76, .12) !important;
      border-color: transparent;
    }

    .accordion-body {
      color: var(--color-muted);
      padding: 20px 22px 24px;
      background: #fff;
    }

    .cta-section {
      padding: 84px 0;
      background:
        radial-gradient(circle at 18% 18%, rgba(240, 169, 74, .22), transparent 24rem),
        linear-gradient(135deg, #f4faf7, #ffffff);
    }

    .cta-panel {
      border-radius: var(--radius-lg);
      background: #fff;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-md);
      padding: 38px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: center;
    }

    .download-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: flex-end;
    }

    footer {
      background: var(--color-footer);
      color: #fff;
      padding: 52px 0 30px;
    }

    .footer-links {
      display: flex;
      gap: 18px;
      justify-content: flex-end;
      flex-wrap: wrap;
      align-items: center;
    }

    .footer-links a {
      color: #c7ddd7;
      font-weight: 700;
      padding: 8px 0;
    }

    .footer-links a:hover,
    .footer-links a:focus {
      color: #fff;
    }

    .footer-copy {
      margin-top: 34px;
      padding-top: 22px;
      border-top: 1px solid rgba(255, 255, 255, .12);
      color: #a8c2ba;
      font-size: .92rem;
    }

    @media (max-width: 1024px) {
      section {
        padding: 72px 0;
      }

      .hero-grid,
      .feature-layout,
      .preview-grid {
        grid-template-columns: 1fr;
      }

      .sticky-note {
        position: static;
      }

      .cta-panel {
        grid-template-columns: 1fr;
      }

      .download-buttons {
        justify-content: flex-start;
      }
    }

    @media (max-width: 768px) {
      .navbar {
        padding: 12px 0;
      }

      .navbar-collapse {
        margin-top: 14px;
        padding: 14px;
        border-radius: 22px;
        background: #fff;
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-sm);
      }

      .navbar-nav {
        align-items: stretch !important;
      }

      .nav-link {
        border-radius: 14px;
      }

      .hero {
        padding: 58px 0 56px;
      }

      .cover-visual {
        min-height: 220px;
      }

      .strip-panel,
      .cta-panel {
        padding: 24px;
      }

      .step-card {
        grid-template-columns: 1fr;
      }

      .check-item {
        display: grid;
      }

      .check-item span {
        text-align: left;
        max-width: none;
      }
    }

    @media (max-width: 520px) {
      body {
        line-height: 1.65;
      }

      section {
        padding: 58px 0;
      }

      .brand {
        font-size: 1rem;
        max-width: calc(100vw - 92px);
      }

      .brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 12px;
      }

      .hero h1 {
        font-size: 2.2rem;
      }

      .hero-actions,
      .download-buttons {
        display: grid;
      }

      .btn-brand,
      .btn-ghost {
        width: 100%;
      }

      .whitepaper-card {
        border-radius: 24px;
      }

      .cover-title {
        font-size: 1.65rem;
      }

      .download-box,
      .feature-card,
      .requirement-card,
      .quote-card {
        padding: 20px;
      }

      .footer-links {
        justify-content: flex-start;
        margin-top: 18px;
      }
    }

/* roulang page: category2 */
:root{
 --ink:#17352e;
 --ink-deep:#0c2924;
 --muted:#60736e;
 --paper:#f7faf8;
 --surface:#ffffff;
 --surface-soft:#eaf3ef;
 --accent:#d85f45;
 --accent-dark:#b94731;
 --teal:#146b5b;
 --teal-dark:#0d5045;
 --gold:#e3ad55;
 --border:#d9e5e0;
 --shadow-sm:0 8px 24px rgba(13,64,54,.08);
 --shadow-lg:0 22px 60px rgba(9,48,40,.16);
 --radius-sm:6px;
 --radius:8px;
 --radius-lg:8px;
 --section:104px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 color:var(--ink);
 background:var(--paper);
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
 font-size:16px;
 line-height:1.75;
 letter-spacing:0;
 -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none;transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
img{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit}
button{transition:background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
::selection{color:#fff;background:var(--teal)}
:focus-visible{outline:3px solid rgba(216,95,69,.35);outline-offset:3px}
.container{max-width:1180px}
.site-header{
 position:sticky;
 top:0;
 z-index:1030;
 background:rgba(247,250,248,.95);
 border-bottom:1px solid rgba(217,229,224,.9);
 backdrop-filter:blur(14px);
}
.navbar{min-height:78px;padding:12px 0}
.brand{
 display:inline-flex;
 align-items:center;
 gap:11px;
 color:var(--ink-deep);
 font-weight:800;
 font-size:1.08rem;
 white-space:nowrap;
}
.brand:hover{color:var(--teal)}
.brand-mark{
 display:inline-grid;
 place-items:center;
 width:38px;
 height:38px;
 color:#fff;
 background:var(--teal);
 border-radius:50%;
 box-shadow:0 7px 17px rgba(20,107,91,.22);
}
.navbar-nav{gap:6px}
.nav-link{
 position:relative;
 padding:10px 14px!important;
 color:#46615a;
 border-radius:var(--radius-sm);
 font-weight:650;
}
.nav-link:hover,.nav-link:focus{color:var(--teal);background:#e9f2ee}
.nav-link.active{color:var(--teal-dark);background:#dcece6}
.nav-link.active::after{
 content:"";
 position:absolute;
 right:14px;
 bottom:5px;
 left:14px;
 height:2px;
 background:var(--accent);
 border-radius:2px;
}
.nav-link.nav-cta{
 margin-left:8px;
 color:#fff;
 background:var(--accent);
 box-shadow:0 8px 18px rgba(216,95,69,.18);
}
.nav-link.nav-cta:hover,.nav-link.nav-cta:focus{color:#fff;background:var(--accent-dark);transform:translateY(-1px)}
.nav-link.nav-cta::after{display:none}
.navbar-toggler{padding:7px;border-radius:var(--radius-sm)}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(20,107,91,.18)}
.hero{
 position:relative;
 min-height:660px;
 display:flex;
 align-items:flex-end;
 overflow:hidden;
 isolation:isolate;
 color:#fff;
 background:#153b33;
}
.hero::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-2;
 background:url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=1800&q=88") center 34%/cover no-repeat;
}
.hero::after{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 background:linear-gradient(90deg,rgba(5,31,27,.94) 0%,rgba(5,31,27,.8) 43%,rgba(5,31,27,.32) 76%,rgba(5,31,27,.18) 100%);
}
.series-bar{
 position:absolute;
 top:28px;
 left:0;
 right:0;
 z-index:1;
}
.series-inner{
 display:flex;
 align-items:center;
 gap:10px;
 padding:9px;
 width:max-content;
 max-width:100%;
 overflow-x:auto;
 color:#fff;
 background:rgba(7,36,31,.64);
 border:1px solid rgba(255,255,255,.2);
 border-radius:var(--radius);
 backdrop-filter:blur(10px);
 scrollbar-width:none;
}
.series-inner::-webkit-scrollbar{display:none}
.series-label{padding:6px 10px;color:#c9ddd7;font-size:.84rem;white-space:nowrap}
.series-link{
 padding:7px 12px;
 border-radius:var(--radius-sm);
 color:#e9f3f0;
 font-size:.9rem;
 font-weight:650;
 white-space:nowrap;
}
.series-link:hover{color:#fff;background:rgba(255,255,255,.14)}
.series-link.active{color:var(--ink-deep);background:#fff}
.hero-content{width:100%;padding:132px 0 72px}
.eyebrow{
 display:inline-flex;
 align-items:center;
 gap:8px;
 margin-bottom:20px;
 color:#d7e9e3;
 font-size:.9rem;
 font-weight:700;
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--gold)}
.hero h1{
 max-width:830px;
 margin:0;
 color:#fff;
 font-size:clamp(2.45rem,5vw,4.8rem);
 line-height:1.12;
 font-weight:850;
 letter-spacing:0;
}
.hero-lead{
 max-width:720px;
 margin:24px 0 0;
 color:#dfece8;
 font-size:1.13rem;
 line-height:1.9;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn-main,.btn-quiet,.btn-download{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:9px;
 min-height:50px;
 padding:12px 22px;
 border:1px solid transparent;
 border-radius:var(--radius-sm);
 font-weight:750;
}
.btn-main{color:#fff;background:var(--accent);box-shadow:0 10px 24px rgba(216,95,69,.24)}
.btn-main:hover,.btn-main:focus{color:#fff;background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 14px 30px rgba(216,95,69,.3)}
.btn-main:active{transform:translateY(0)}
.btn-quiet{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32)}
.btn-quiet:hover,.btn-quiet:focus{color:#fff;background:rgba(255,255,255,.16);border-color:#fff}
.hero-note{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px;color:#c6dad4;font-size:.86rem}
.hero-note span{display:inline-flex;align-items:center;gap:7px}
.hero-note i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
main{overflow:hidden}
.intro{padding:76px 0 62px;background:var(--surface)}
.kicker{display:block;margin-bottom:10px;color:var(--accent-dark);font-size:.85rem;font-weight:800}
.section-title{margin:0;color:var(--ink-deep);font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.25;font-weight:820;letter-spacing:0}
.section-copy{margin:18px 0 0;color:var(--muted);font-size:1.04rem;line-height:1.9}
.alert-strip{
 display:grid;
 grid-template-columns:auto 1fr;
 gap:16px;
 align-items:start;
 margin-top:32px;
 padding:20px 22px;
 color:#6c3225;
 background:#fff2ed;
 border:1px solid #f2c9bf;
 border-left:5px solid var(--accent);
 border-radius:var(--radius);
}
.alert-icon{
 display:grid;
 place-items:center;
 width:34px;
 height:34px;
 border-radius:50%;
 color:#fff;
 background:var(--accent);
 font-weight:800;
}
.alert-strip strong{display:block;margin-bottom:2px;color:#57271d}
.quick-actions{padding:0 0 82px;background:var(--surface)}
.action-grid{
 display:grid;
 grid-template-columns:1.15fr .85fr .85fr;
 gap:18px;
}
.action-card{
 min-height:245px;
 padding:28px;
 background:var(--paper);
 border:1px solid var(--border);
 border-radius:var(--radius);
 transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.action-card:hover{transform:translateY(-4px);border-color:#bad2ca;box-shadow:var(--shadow-sm)}
.action-card.featured{color:#fff;background:var(--teal-dark);border-color:var(--teal-dark)}
.action-number{display:block;margin-bottom:24px;color:var(--accent);font-size:.83rem;font-weight:850}
.featured .action-number{color:#ffd3c8}
.action-card h2,.action-card h3{margin:0 0 10px;font-size:1.28rem;font-weight:800}
.action-card p{margin:0;color:var(--muted)}
.featured p{color:#c8ddd7}
.action-meta{display:inline-block;margin-top:20px;padding-top:12px;border-top:1px solid var(--border);font-size:.86rem;font-weight:750}
.featured .action-meta{border-color:rgba(255,255,255,.18);color:#fff}
.timeline-section{padding:var(--section) 0;background:var(--surface-soft)}
.timeline-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:end;margin-bottom:48px}
.timeline{
 position:relative;
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:0;
}
.timeline::before{
 content:"";
 position:absolute;
 top:26px;
 left:7%;
 right:7%;
 height:2px;
 background:#b8d0c8;
}
.time-item{position:relative;padding-right:24px}
.time-dot{
 position:relative;
 z-index:1;
 display:grid;
 place-items:center;
 width:54px;
 height:54px;
 margin-bottom:24px;
 color:#fff;
 background:var(--teal);
 border:7px solid var(--surface-soft);
 border-radius:50%;
 font-size:.79rem;
 font-weight:850;
 box-shadow:0 0 0 1px #9fbfb5;
}
.time-item:first-child .time-dot{background:var(--accent)}
.time-item h3{margin:0 0 10px;font-size:1.08rem;font-weight:800}
.time-item p{margin:0;color:var(--muted);font-size:.94rem}
.time-item ul{margin:14px 0 0;padding:0;list-style:none}
.time-item li{position:relative;margin-top:7px;padding-left:16px;color:#38544d;font-size:.89rem}
.time-item li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;background:var(--gold);border-radius:50%}
.guide-section{padding:var(--section) 0;background:var(--surface)}
.guide-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center}
.guide-image{position:relative}
.guide-image img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.image-caption{
 position:absolute;
 right:-22px;
 bottom:24px;
 width:min(320px,82%);
 padding:20px;
 color:#fff;
 background:var(--ink-deep);
 border-radius:var(--radius);
 box-shadow:var(--shadow-lg);
}
.image-caption strong{display:block;margin-bottom:5px}
.image-caption span{color:#bcd2cc;font-size:.88rem}
.check-list{margin:30px 0 0;padding:0;list-style:none}
.check-list li{
 display:grid;
 grid-template-columns:34px 1fr;
 gap:14px;
 padding:16px 0;
 border-bottom:1px solid var(--border);
}
.check-list li:last-child{border-bottom:0}
.check-icon{display:grid;place-items:center;width:30px;height:30px;color:#fff;background:var(--teal);border-radius:50%;font-size:.82rem;font-weight:900}
.check-list strong{display:block;margin-bottom:2px;color:var(--ink-deep)}
.check-list p{margin:0;color:var(--muted);font-size:.93rem}
.requirements{padding:var(--section) 0;background:#123c34;color:#fff}
.requirements .section-title{color:#fff}
.requirements .section-copy{color:#bfd4ce}
.requirements-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.requirement-list{display:grid;gap:12px}
.requirement-row{
 display:grid;
 grid-template-columns:48px 1fr auto;
 gap:15px;
 align-items:center;
 padding:18px;
 background:rgba(255,255,255,.06);
 border:1px solid rgba(255,255,255,.14);
 border-radius:var(--radius);
}
.requirement-row:hover{background:rgba(255,255,255,.1)}
.req-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--ink-deep);background:#dcece6;font-weight:850}
.requirement-row strong{display:block}
.requirement-row small{display:block;margin-top:2px;color:#aac7bf}
.status-badge{padding:5px 9px;border-radius:999px;color:#153b33;background:#f2c767;font-size:.76rem;font-weight:850;white-space:nowrap}
.voice-section{padding:var(--section) 0;background:var(--paper)}
.voice-head{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:38px}
.rating-block{text-align:right;white-space:nowrap}
.rating-block strong{display:block;color:var(--teal);font-size:2rem;line-height:1.1}
.rating-block span{color:var(--muted);font-size:.84rem}
.voice-wall{columns:3;column-gap:18px}
.voice-card{
 break-inside:avoid;
 margin:0 0 18px;
 padding:24px;
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:var(--radius);
 box-shadow:0 4px 14px rgba(20,67,57,.04);
}
.voice-card:nth-child(2n){padding-top:30px;padding-bottom:30px}
.voice-card:hover{border-color:#b8d0c8;box-shadow:var(--shadow-sm)}
.quote-mark{display:block;color:var(--accent);font-size:1.8rem;font-weight:900;line-height:1}
.voice-card p{margin:10px 0 18px;color:#3f5751}
.voice-meta{display:flex;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:.82rem}
.faq-section{padding:var(--section) 0;background:var(--surface)}
.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:78px;align-items:start}
.faq-aside{position:sticky;top:112px}
.accordion{--bs-accordion-border-width:0;--bs-accordion-border-radius:0}
.accordion-item{background:transparent;border-bottom:1px solid var(--border)!important}
.accordion-button{
 padding:24px 4px;
 color:var(--ink-deep);
 background:transparent;
 box-shadow:none!important;
 font-weight:800;
}
.accordion-button:not(.collapsed){color:var(--teal);background:transparent}
.accordion-button::after{filter:saturate(.4)}
.accordion-body{padding:0 36px 24px 4px;color:var(--muted)}
.cta-section{padding:84px 0;background:var(--paper)}
.cta-panel{
 display:grid;
 grid-template-columns:1fr auto;
 gap:46px;
 align-items:center;
 padding:52px;
 color:#fff;
 background:var(--ink-deep);
 border-radius:var(--radius);
 box-shadow:var(--shadow-lg);
}
.cta-panel h2{margin:0;font-size:clamp(1.8rem,3vw,2.8rem);font-weight:820}
.cta-panel p{max-width:720px;margin:12px 0 0;color:#bad1ca}
.download-actions{display:flex;flex-direction:column;gap:10px;min-width:220px}
.btn-download{color:var(--ink-deep);background:#fff}
.btn-download:hover,.btn-download:focus{color:var(--ink-deep);background:#e5f0ec;transform:translateY(-2px)}
.btn-download.alt{color:#fff;background:transparent;border-color:rgba(255,255,255,.32)}
.btn-download.alt:hover{background:rgba(255,255,255,.1);border-color:#fff}
.form-note{margin-top:10px;color:#9ebbb3;font-size:.76rem;text-align:center}
footer{padding:64px 0 28px;color:#e5efec;background:#092c26}
footer .brand{color:#fff}
footer .brand-mark{background:var(--accent)}
.footer-links{display:flex;justify-content:flex-end;align-items:center;gap:22px;flex-wrap:wrap}
.footer-links a{color:#b7cec7}
.footer-links a:hover,.footer-links a:focus{color:#fff}
.footer-links a[data-slug="aftercare-testing"]{color:#fff;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:7px}
.footer-copy{margin-top:38px;padding-top:22px;color:#88a9a0;border-top:1px solid rgba(255,255,255,.11);font-size:.82rem}
@media (max-width:1024px){
 :root{--section:84px}
 .hero{min-height:620px}
 .action-grid{grid-template-columns:1fr 1fr}
 .action-card.featured{grid-column:1/-1}
 .timeline{grid-template-columns:1fr 1fr;gap:34px 18px}
 .timeline::before{display:none}
 .timeline-head,.requirements-layout{gap:38px}
 .guide-layout{gap:46px}
 .voice-wall{columns:2}
}
@media (max-width:991.98px){
 .navbar{min-height:70px}
 .navbar-collapse{
  margin-top:12px;
  padding:13px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
 }
 .navbar-nav{align-items:stretch!important}
 .nav-link.nav-cta{margin:6px 0 0;text-align:center}
 .nav-link.active::after{display:none}
 .hero::after{background:linear-gradient(90deg,rgba(5,31,27,.92),rgba(5,31,27,.58))}
 .timeline-head,.requirements-layout,.faq-layout{grid-template-columns:1fr;gap:34px}
 .guide-layout{grid-template-columns:.82fr 1.18fr}
 .faq-aside{position:static}
 .cta-panel{grid-template-columns:1fr}
 .download-actions{flex-direction:row;min-width:0}
}
@media (max-width:767.98px){
 :root{--section:70px}
 body{font-size:15px}
 .hero{min-height:590px}
 .series-bar{top:18px}
 .hero-content{padding:116px 0 54px}
 .hero h1{font-size:2.55rem}
 .hero-lead{font-size:1rem}
 .intro{padding:60px 0 46px}
 .quick-actions{padding-bottom:64px}
 .action-grid,.guide-layout{grid-template-columns:1fr}
 .action-card.featured{grid-column:auto}
 .action-card{min-height:0}
 .guide-image{max-width:570px}
 .image-caption{right:12px}
 .requirements-layout{gap:30px}
 .voice-head{display:block}
 .rating-block{margin-top:18px;text-align:left}
 .voice-wall{columns:1}
 .faq-layout{gap:24px}
 .cta-panel{padding:34px 26px}
 .footer-links{justify-content:flex-start;margin-top:8px}
}
@media (max-width:520px){
 .container{padding-right:18px;padding-left:18px}
 .brand{font-size:.98rem}
 .brand-mark{width:34px;height:34px}
 .hero{min-height:620px}
 .hero::before{background-position:62% center}
 .hero::after{background:rgba(5,31,27,.78)}
 .hero h1{font-size:2.18rem}
 .hero-actions{display:grid}
 .btn-main,.btn-quiet{width:100%}
 .hero-note{gap:8px 14px}
 .action-grid,.timeline{grid-template-columns:1fr}
 .time-item{padding:0}
 .time-dot{margin-bottom:14px}
 .alert-strip{grid-template-columns:1fr}
 .guide-image img{aspect-ratio:1/1.1}
 .image-caption{position:relative;right:auto;bottom:auto;width:calc(100% - 24px);margin:-28px auto 0}
 .requirement-row{grid-template-columns:42px 1fr}
 .status-badge{grid-column:2;justify-self:start}
 .accordion-button{padding:20px 2px}
 .download-actions{flex-direction:column}
 .cta-panel{padding:30px 22px}
 .footer-links{display:grid;gap:11px}
}