/* roulang page: index */
:root {
      --blue: #1f5fbf;
      --blue-deep: #174b98;
      --sky: #58a7d8;
      --sky-soft: #eaf5fb;
      --red: #e65d55;
      --ink: #17243a;
      --muted: #526178;
      --soft: #7c899b;
      --line: #dce5ef;
      --paper: #ffffff;
      --wash: #f5f8fc;
      --success: #26815c;
      --warning: #a76820;
      --radius: 8px;
      --shadow: 0 12px 32px rgba(25, 58, 96, .09);
      --shadow-hover: 0 18px 38px rgba(25, 58, 96, .15);
      --ease: 180ms ease;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--wash);
      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.75;
      letter-spacing: 0;
    }
    body, button, input, select, textarea { font-family: inherit; }
    a { color: inherit; text-decoration: none; transition: color var(--ease), background-color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease); }
    img { display: block; max-width: 100%; height: auto; }
    button, input, select, textarea { font-size: 16px; }
    button { cursor: pointer; }
    :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
    .container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
    .section { padding: 92px 0; }
    .section--paper { background: var(--paper); }
    .section-heading { max-width: 700px; margin-bottom: 38px; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--blue);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
      margin-bottom: 12px;
    }
    .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--red); }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { color: var(--ink); line-height: 1.2; letter-spacing: 0; }
    h1 { font-size: clamp(34px, 4vw, 56px); margin-bottom: 22px; }
    h2 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 14px; }
    h3 { font-size: 21px; margin-bottom: 10px; }
    .section-heading p, .lead { color: var(--muted); font-size: 17px; margin-bottom: 0; }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 20px;
      border: 1px solid transparent;
      border-radius: 6px;
      font-weight: 700;
      line-height: 1.2;
      transition: all var(--ease);
    }
    .button--primary { color: #fff; background: var(--blue); box-shadow: 0 8px 18px rgba(31,95,191,.2); }
    .button--primary:hover { color: #fff; background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(31,95,191,.28); }
    .button--primary:active { transform: translateY(1px); }
    .button--secondary { color: var(--blue); background: #fff; border-color: var(--blue); }
    .button--secondary:hover { color: var(--blue-deep); border-color: var(--blue-deep); background: var(--sky-soft); }
    .button--text { min-height: auto; padding: 0; color: var(--blue); background: transparent; }
    .button--text::after { content: "→"; margin-left: 8px; transition: transform var(--ease); }
    .button--text:hover { color: var(--blue-deep); }
    .button--text:hover::after { transform: translateX(4px); }
    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 3px 10px;
      border-radius: 999px;
      color: var(--blue);
      background: var(--sky-soft);
      font-size: 13px;
      font-weight: 700;
    }
    .site-header { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
    .brand-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      color: var(--ink);
      font-size: 21px;
      font-weight: 800;
      white-space: nowrap;
    }
    .brand-mark {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      color: #fff;
      background: var(--blue);
      border-radius: 8px;
      font-size: 20px;
      font-weight: 900;
    }
    .brand:hover { color: var(--blue); }
    .brand-tools { display: flex; align-items: center; gap: 14px; }
    .search-button, .menu-button {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      padding: 0;
      color: var(--muted);
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 6px;
    }
    .search-button:hover, .menu-button:hover { color: var(--blue); border-color: var(--blue); background: var(--sky-soft); }
    .menu-button { display: none; }
    .channel-row { border-top: 1px solid #edf2f7; }
    .channel-list {
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 52px;
      margin: 0;
      padding: 0;
      list-style: none;
      overflow-x: auto;
      scrollbar-width: thin;
    }
    .channel-list a {
      display: inline-flex;
      align-items: center;
      min-height: 52px;
      padding: 0 16px;
      color: var(--muted);
      border-bottom: 3px solid transparent;
      white-space: nowrap;
      font-size: 15px;
      font-weight: 700;
    }
    .channel-list a:hover, .channel-list a.active { color: var(--blue); background: #f1f7fd; border-bottom-color: var(--blue); }

    .hero { position: relative; overflow: hidden; padding: 74px 0 82px; background: var(--paper); }
    .hero::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border: 1px solid #dfeaf5; border-radius: 50%; opacity: .7; }
    .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
    .hero-copy { padding-left: 10px; }
    .hero-copy h1 { max-width: 620px; }
    .hero-copy .lead { max-width: 620px; margin-bottom: 30px; }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 34px; }
    .hero-facts { display: flex; flex-wrap: wrap; gap: 26px; }
    .fact { padding-left: 14px; border-left: 2px solid var(--sky); }
    .fact strong { display: block; color: var(--blue); font-size: 25px; line-height: 1.2; }
    .fact span { color: var(--soft); font-size: 13px; }
    .hero-visual { position: relative; min-height: 490px; }
    .hero-image { width: 88%; height: 490px; margin-left: auto; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); }
    .hero-note {
      position: absolute;
      left: 0;
      bottom: 32px;
      width: 230px;
      padding: 20px;
      background: #fff;
      border-left: 4px solid var(--red);
      box-shadow: var(--shadow);
    }
    .hero-note strong { display: block; margin-bottom: 5px; font-size: 18px; }
    .hero-note span { display: block; color: var(--muted); font-size: 13px; line-height: 1.6; }

    .metrics { margin-top: -1px; padding: 0 0 22px; background: var(--paper); }
    .metric-band { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
    .metric { min-height: 118px; padding: 24px 26px; border-right: 1px solid var(--line); }
    .metric:last-child { border-right: 0; }
    .metric strong { display: block; color: var(--blue); font-size: 31px; line-height: 1.1; }
    .metric span { color: var(--muted); font-size: 14px; }
    .metric small { display: block; color: var(--soft); font-size: 12px; margin-top: 4px; }

    .topic-grid { display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 20px; }
    .topic-card { min-height: 190px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); transition: all var(--ease); }
    .topic-card--wide { background: var(--blue); color: #fff; }
    .topic-card:hover { transform: translateY(-3px); border-color: var(--sky); box-shadow: var(--shadow-hover); }
    .topic-card h3 { margin-top: 18px; }
    .topic-card--wide h3, .topic-card--wide p { color: #fff; }
    .topic-card p { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
    .topic-card--wide .badge { color: #fff; background: rgba(255,255,255,.16); }
    .topic-card--wide .button--text { color: #fff; }

    .matrix { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; }
    .matrix-main { min-height: 330px; padding: 34px; border-radius: var(--radius); background: #eaf5fb; border: 1px solid #cfe5f1; }
    .matrix-main p { max-width: 600px; color: var(--muted); }
    .matrix-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
    .matrix-item { padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
    .matrix-item b { display: block; margin-bottom: 4px; }
    .matrix-item span { color: var(--soft); font-size: 13px; }
    .matrix-side { display: grid; gap: 16px; }
    .side-item { padding: 23px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
    .side-item p { color: var(--muted); font-size: 14px; margin-bottom: 0; }

    .compare { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: stretch; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
    .compare-col { padding: 32px; }
    .compare-col--accent { background: #f0f7fd; }
    .compare-col h3 { margin-bottom: 22px; }
    .compare-col ul { margin: 0; list-style: none; }
    .compare-col li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid #e9eff5; color: var(--muted); }
    .compare-col li:last-child { border-bottom: 0; }
    .compare-col li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 800; }
    .compare-axis { display: flex; align-items: center; justify-content: center; color: var(--sky); font-size: 26px; font-weight: 800; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

    .info-layout { display: grid; grid-template-columns: 1fr .74fr; gap: 44px; align-items: start; }
    .info-list { margin: 0; list-style: none; }
    .info-list li { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; padding: 19px 0; border-bottom: 1px solid var(--line); }
    .info-list time { color: var(--soft); font-size: 13px; padding-top: 3px; }
    .info-list a { color: var(--ink); font-weight: 700; }
    .info-list a:hover { color: var(--blue); }
    .recommend { padding: 28px; background: var(--ink); border-radius: var(--radius); color: #fff; }
    .recommend h3, .recommend p { color: #fff; }
    .recommend p { color: #c8d3e2; font-size: 15px; }
    .recommend .button--secondary { color: #fff; background: transparent; border-color: #9bb9dc; }
    .recommend .button--secondary:hover { background: rgba(255,255,255,.08); }

    .faq-wrap { max-width: 880px; }
    .accordion { margin: 0; background: transparent; }
    .accordion-item { border: 1px solid var(--line); border-bottom: 0; background: #fff; }
    .accordion-item:last-child { border-bottom: 1px solid var(--line); }
    .accordion-title { min-height: 58px; display: flex; align-items: center; padding: 15px 52px 15px 20px; color: var(--ink); font-weight: 700; font-size: 16px; }
    .accordion-title:hover, .accordion-item.is-active .accordion-title { color: var(--blue); background: #f5faff; }
    .accordion-content { padding: 0 22px 20px; color: var(--muted); font-size: 15px; line-height: 1.8; border: 0; }
    .accordion-title::before { color: var(--blue); }

    .contact-section { background: var(--sky-soft); }
    .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start; }
    .contact-copy p { color: var(--muted); }
    .contact-points { margin: 28px 0 0; padding: 0; list-style: none; }
    .contact-points li { position: relative; padding: 10px 0 10px 26px; color: var(--muted); }
    .contact-points li::before { content: "•"; position: absolute; left: 4px; color: var(--red); font-size: 24px; line-height: 1; }
    .contact-form { padding: 30px; background: #fff; border: 1px solid #cfe1ee; border-radius: var(--radius); box-shadow: var(--shadow); }
    label { display: block; margin-bottom: 7px; color: var(--ink); font-size: 14px; font-weight: 700; }
    input, select, textarea { width: 100%; min-height: 50px; margin: 0; padding: 12px 14px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: none; transition: border-color var(--ease), box-shadow var(--ease); }
    textarea { min-height: 122px; resize: vertical; }
    input:hover, select:hover, textarea:hover { border-color: #a9bfd7; }
    input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,95,191,.12); outline: 0; }
    .form-row { margin-bottom: 17px; }
    .form-help { color: var(--soft); font-size: 12px; margin: 6px 0 0; }
    .consent { display: flex; gap: 9px; align-items: flex-start; margin: 16px 0 20px; color: var(--muted); font-size: 13px; }
    .consent input { width: 17px; min-height: 17px; margin-top: 4px; accent-color: var(--blue); }
    .form-message { display: none; margin-top: 13px; padding: 10px 13px; color: var(--success); background: #edf8f2; border-radius: 6px; font-size: 14px; }
    .form-message.is-visible { display: block; }

    .bottom-cta { padding: 58px 0; background: var(--blue); color: #fff; }
    .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .cta-inner h2, .cta-inner p { color: #fff; }
    .cta-inner h2 { margin-bottom: 8px; }
    .cta-inner p { margin-bottom: 0; color: #d9e8fa; }
    .bottom-cta .button--secondary { color: #fff; background: transparent; border-color: #b7d0ef; }
    .bottom-cta .button--secondary:hover { background: rgba(255,255,255,.1); }

    .site-footer { padding: 46px 0 24px; background: #eaf0f6; border-top: 1px solid var(--line); }
    .footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr; gap: 42px; padding-bottom: 34px; }
    .footer-brand { display: inline-block; margin-bottom: 12px; font-size: 20px; font-weight: 800; }
    .footer-grid p { max-width: 420px; color: var(--muted); font-size: 14px; }
    .footer-title { margin-bottom: 12px; color: var(--ink); font-size: 14px; font-weight: 800; }
    .footer-links { margin: 0; padding: 0; list-style: none; }
    .footer-links li { margin: 7px 0; color: var(--muted); font-size: 14px; }
    .footer-links a:hover { color: var(--blue); }
    .footer-bottom { display: flex; justify-content: space-between; gap: 18px; padding-top: 20px; color: var(--soft); border-top: 1px solid var(--line); font-size: 13px; }
    .footer-bottom p { margin: 0; }

    @media (max-width: 1023px) {
      .hero { padding: 60px 0 70px; }
      .hero-grid { gap: 38px; }
      .hero-visual, .hero-image { min-height: 420px; height: 420px; }
      .section { padding: 74px 0; }
      .topic-grid { grid-template-columns: 1fr 1fr; }
      .topic-card--wide { grid-column: 1 / -1; }
      .contact-grid { gap: 34px; }
    }
    @media (max-width: 767px) {
      .container { width: min(100% - 28px, 620px); }
      .brand-row { min-height: 68px; }
      .brand { font-size: 17px; gap: 8px; }
      .brand-mark { width: 34px; height: 34px; flex-basis: 34px; font-size: 17px; }
      .brand-tools .button { display: none; }
      .menu-button { display: grid; }
      .channel-list { min-height: 48px; margin-left: -14px; margin-right: -14px; padding: 0 14px; }
      .channel-list a { min-height: 48px; padding: 0 13px; font-size: 14px; }
      .hero { padding: 48px 0 58px; }
      .hero-grid { grid-template-columns: 1fr; gap: 30px; }
      .hero-copy { padding-left: 0; }
      h1 { font-size: 36px; }
      .hero-copy .lead { font-size: 16px; }
      .hero-visual { min-height: 310px; height: 310px; }
      .hero-image { width: 100%; height: 310px; min-height: 310px; }
      .hero-note { left: 14px; bottom: 18px; width: 205px; padding: 14px; }
      .hero-note strong { font-size: 16px; }
      .hero-facts { gap: 15px; }
      .fact strong { font-size: 22px; }
      .metric-band { grid-template-columns: 1fr 1fr; }
      .metric { min-height: 102px; padding: 18px; border-bottom: 1px solid var(--line); }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(3), .metric:nth-child(4) { border-bottom: 0; }
      .metric strong { font-size: 25px; }
      .section { padding: 56px 0; }
      .topic-grid, .matrix, .info-layout, .contact-grid { grid-template-columns: 1fr; gap: 16px; }
      .topic-card--wide { grid-column: auto; }
      .matrix-list { grid-template-columns: 1fr; }
      .compare { grid-template-columns: 1fr; }
      .compare-axis { min-height: 42px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(90deg); }
      .compare-col { padding: 24px; }
      .info-list li { grid-template-columns: 66px 1fr; gap: 12px; }
      .contact-section { padding-bottom: 58px; }
      .contact-form { padding: 22px 18px; }
      .cta-inner { align-items: flex-start; flex-direction: column; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; gap: 6px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }

/* roulang page: category2 */
:root {
      --blue:#1f5fbf;
      --blue-deep:#174b98;
      --sky:#58a7d8;
      --sky-soft:#eaf5fb;
      --red:#e65d55;
      --ink:#17243a;
      --muted:#526178;
      --soft:#7c899b;
      --line:#dce5ef;
      --paper:#fff;
      --wash:#f5f8fc;
      --success:#26815c;
      --warning:#a76820;
      --radius:8px;
      --shadow:0 12px 32px rgba(25,58,96,.09);
      --shadow-hover:0 18px 38px rgba(25,58,96,.15);
      --ease:180ms ease;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--wash);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.75;letter-spacing:0}
    body,button,input,select,textarea{font-family:inherit}
    a{color:inherit;text-decoration:none;transition:color var(--ease),background-color var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
    img{display:block;max-width:100%;height:auto}
    button,input,select,textarea{font-size:16px}
    button{cursor:pointer}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(2rem,4vw,2.85rem);line-height:1.18;margin-bottom:18px}
    h2{font-size:clamp(1.75rem,3vw,2.2rem);line-height:1.25;margin-bottom:16px}
    h3{font-size:1.2rem;line-height:1.4;margin-bottom:10px}
    .container{width:min(1200px,calc(100% - 40px));margin:0 auto}
    .section{padding:92px 0}
    .section--paper{background:var(--paper)}
    .section-heading{max-width:720px;margin-bottom:38px}
    .section-heading p,.lead{color:var(--muted);font-size:17px;margin-bottom:0}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:13px;font-weight:700;margin-bottom:12px}
    .eyebrow::before{content:"";width:24px;height:2px;background:var(--red)}
    .button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:6px;font-weight:700;line-height:1.2;transition:all var(--ease)}
    .button--primary{color:#fff;background:var(--blue);box-shadow:0 8px 18px rgba(31,95,191,.2)}
    .button--primary:hover{color:#fff;background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 12px 24px rgba(31,95,191,.28)}
    .button--primary:active{transform:translateY(1px)}
    .button--secondary{color:var(--blue);background:#fff;border-color:var(--blue)}
    .button--secondary:hover{color:var(--blue-deep);border-color:var(--blue-deep);background:var(--sky-soft)}
    .button--text{min-height:auto;padding:0;color:var(--blue);background:transparent}
    .button--text::after{content:"→";margin-left:8px;transition:transform var(--ease)}
    .button--text:hover{color:var(--blue-deep)}
    .button--text:hover::after{transform:translateX(4px)}
    .button:focus-visible,.search-button:focus-visible,.menu-button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--red);outline-offset:3px}
    .badge{display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:999px;color:var(--blue);background:var(--sky-soft);font-size:13px;font-weight:700}
    .site-header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
    .brand-row{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:12px;min-width:0;color:var(--ink);font-size:21px;font-weight:800;white-space:nowrap}
    .brand-mark{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;color:#fff;background:var(--blue);border-radius:8px;font-size:20px;font-weight:900}
    .brand:hover{color:var(--blue)}
    .brand-tools{display:flex;align-items:center;gap:14px}
    .search-button,.menu-button{display:grid;place-items:center;width:42px;height:42px;padding:0;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:6px}
    .search-button:hover,.menu-button:hover{color:var(--blue);border-color:var(--blue);background:var(--sky-soft)}
    .menu-button{display:none}
    .channel-row{border-top:1px solid #edf2f7}
    .channel-list{display:flex;align-items:center;gap:6px;min-height:52px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:thin}
    .channel-list a{display:inline-flex;align-items:center;min-height:52px;padding:0 16px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;font-size:15px;font-weight:700}
    .channel-list a:hover,.channel-list a.active{color:var(--blue);background:#f1f7fd;border-bottom-color:var(--blue)}
    .page-intro{padding:70px 0 58px;background:var(--paper);border-bottom:1px solid var(--line)}
    .intro-grid{display:grid;grid-template-columns:1fr 360px;gap:70px;align-items:end}
    .intro-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--soft);font-size:14px}
    .intro-note{padding:22px 24px;border-left:4px solid var(--red);background:#fff;box-shadow:var(--shadow)}
    .intro-note strong{display:block;margin-bottom:5px;font-size:18px}
    .intro-note span{display:block;color:var(--muted);font-size:14px;line-height:1.65}
    .index-bar{padding:22px 0;background:var(--sky-soft);border-bottom:1px solid var(--line)}
    .index-scroll{display:flex;gap:10px;overflow-x:auto;white-space:nowrap}
    .index-link{padding:9px 16px;border:1px solid #c7deed;border-radius:999px;color:var(--muted);background:#fff;font-size:14px;font-weight:700}
    .index-link:hover,.index-link.active{color:#fff;background:var(--blue);border-color:var(--blue)}
    .feature-layout{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:stretch}
    .feature-image{min-height:330px;position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
    .feature-image img{width:100%;height:100%;object-fit:cover}
    .feature-image::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(23,36,58,.72))}
    .feature-caption{position:absolute;z-index:1;left:30px;right:30px;bottom:24px;color:#fff}
    .feature-caption h2{max-width:600px;margin-bottom:8px}
    .feature-caption p{margin:0;color:#edf5fb}
    .feature-side{padding:30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .side-title{display:flex;justify-content:space-between;gap:15px;padding-bottom:18px;border-bottom:1px solid var(--line)}
    .side-list{margin:0;padding:0;list-style:none}
    .side-list li{padding:18px 0;border-bottom:1px solid var(--line)}
    .side-list li:last-child{border-bottom:0}
    .side-list a{display:flex;gap:14px;align-items:flex-start}
    .side-number{color:var(--red);font-size:20px;font-weight:800;line-height:1.2}
    .side-list strong{display:block;font-size:16px}
    .side-list span{display:block;color:var(--soft);font-size:13px}
    .group-section{padding-top:0}
    .group-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px}
    .group{padding:26px 0;border-top:1px solid var(--line)}
    .group:first-child{border-top:2px solid var(--blue)}
    .group-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:14px}
    .group-number{color:var(--blue);font-size:28px;font-weight:800;line-height:1}
    .group h3{margin:0}
    .group p{color:var(--muted);margin-bottom:14px}
    .group-links{display:flex;flex-wrap:wrap;gap:9px 20px;margin:0;padding:0;list-style:none}
    .group-links a{color:var(--blue);font-weight:700;border-bottom:1px solid transparent}
    .group-links a:hover{border-bottom-color:var(--blue)}
    .compact-panel{padding:30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .compact-panel h3{margin-bottom:16px}
    .check-list{margin:0;padding:0;list-style:none}
    .check-list li{position:relative;padding:11px 0 11px 28px;border-bottom:1px solid #edf2f7;color:var(--muted)}
    .check-list li:last-child{border-bottom:0}
    .check-list li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:800}
    .faq-section{background:var(--paper)}
    .accordion{margin:0;border:1px solid var(--line);border-bottom:0;border-radius:var(--radius);overflow:hidden;background:#fff}
    .accordion-title{padding:18px 55px 18px 22px;color:var(--ink);font-weight:700;border-bottom:1px solid var(--line);background:#fff}
    .accordion-title:hover{color:var(--blue);background:var(--sky-soft)}
    .accordion-content{padding:20px 22px;color:var(--muted);border-bottom:1px solid var(--line);background:#fbfdff}
    .accordion-item.is-active .accordion-title{color:var(--blue);border-left:4px solid var(--blue)}
    .cta-section{padding:72px 0;background:var(--sky-soft)}
    .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
    .form-panel{padding:30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    label{display:block;margin-bottom:7px;color:var(--ink);font-size:14px;font-weight:700}
    input,select,textarea{width:100%;margin:0 0 17px;padding:12px 14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:none}
    input,select{height:50px}
    textarea{min-height:110px;resize:vertical}
    input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,95,191,.1)}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .consent{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:13px;margin:0 0 20px}
    .consent input{width:18px;height:18px;margin:3px 0 0;flex:0 0 18px}
    .form-message{display:none;margin-top:14px;padding:11px 14px;color:var(--success);background:#edf8f2;border:1px solid #bfe3cf;border-radius:6px;font-size:14px}
    .site-footer{padding:56px 0 24px;background:#edf3f8;border-top:1px solid var(--line)}
    .footer-grid{display:grid;grid-template-columns:1.5fr .7fr .8fr;gap:60px;padding-bottom:42px}
    .footer-brand{display:inline-block;margin-bottom:12px;color:var(--ink);font-size:20px;font-weight:800}
    .footer-brand:hover{color:var(--blue)}
    .footer-grid p{max-width:470px;margin:0;color:var(--muted);font-size:14px}
    .footer-title{margin-bottom:12px;font-weight:800}
    .footer-links{margin:0;padding:0;list-style:none}
    .footer-links li{margin-bottom:9px;color:var(--muted);font-size:14px}
    .footer-links a:hover{color:var(--blue)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid var(--line);color:var(--soft);font-size:13px}
    .footer-bottom p{margin:0}
    @media (max-width:1024px){
      .section{padding:76px 0}.intro-grid{gap:35px}.group-grid{gap:35px}.hero-actions{margin-bottom:22px}
    }
    @media (max-width:767px){
      .container{width:min(100% - 28px,600px)}
      .brand-row{min-height:68px}.brand{font-size:16px;gap:8px}.brand-mark{width:34px;height:34px;flex-basis:34px;font-size:18px}
      .brand-tools .button{display:none}.menu-button{display:grid}
      .channel-list a{padding:0 12px;font-size:14px}
      .page-intro{padding:50px 0 42px}.intro-grid,.feature-layout,.group-grid,.cta-grid{grid-template-columns:1fr;gap:24px}
      .intro-note{padding:18px}.section{padding:56px 0}.feature-image{min-height:280px}.feature-caption{left:20px;right:20px;bottom:18px}
      .feature-caption h2{font-size:25px}.compact-panel{padding:23px}.form-row{grid-template-columns:1fr;gap:0}
      .footer-grid{grid-template-columns:1fr;gap:28px;padding-bottom:30px}.footer-bottom{display:block}.footer-bottom p+ p{margin-top:6px}
    }
    @media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* roulang page: category1 */
:root {
      --blue:#1f5fbf;
      --blue-deep:#174b98;
      --sky:#58a7d8;
      --sky-soft:#eaf5fb;
      --red:#e65d55;
      --ink:#17243a;
      --muted:#526178;
      --soft:#7c899b;
      --line:#dce5ef;
      --paper:#fff;
      --wash:#f5f8fc;
      --success:#26815c;
      --warning:#a76820;
      --radius:8px;
      --shadow:0 12px 32px rgba(25,58,96,.09);
      --shadow-hover:0 18px 38px rgba(25,58,96,.15);
      --ease:180ms ease;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--wash);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.75;letter-spacing:0}
    body,button,input,select,textarea{font-family:inherit}
    a{color:inherit;text-decoration:none;transition:color var(--ease),background-color var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
    img{display:block;max-width:100%;height:auto}
    button,input,select,textarea{font-size:16px}
    button{cursor:pointer}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{line-height:1.22;letter-spacing:0}
    h1{font-size:46px;margin-bottom:20px}
    h2{font-size:34px;margin-bottom:16px}
    h3{font-size:21px;margin-bottom:10px}
    .container{width:min(1200px,calc(100% - 40px));margin:0 auto}
    .section{padding:92px 0}
    .section--paper{background:var(--paper)}
    .section-heading{max-width:720px;margin-bottom:38px}
    .section-heading p,.lead{color:var(--muted);font-size:17px;margin-bottom:0}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:13px;font-weight:700;margin-bottom:12px}
    .eyebrow::before{content:"";width:24px;height:2px;background:var(--red)}
    .button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:6px;font-weight:700;line-height:1.2;transition:all var(--ease)}
    .button--primary{color:#fff;background:var(--blue);box-shadow:0 8px 18px rgba(31,95,191,.2)}
    .button--primary:hover{color:#fff;background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 12px 24px rgba(31,95,191,.28)}
    .button--primary:active{transform:translateY(1px)}
    .button--secondary{color:var(--blue);background:#fff;border-color:var(--blue)}
    .button--secondary:hover{color:var(--blue-deep);border-color:var(--blue-deep);background:var(--sky-soft)}
    .button--text{min-height:auto;padding:0;color:var(--blue);background:transparent}
    .button--text::after{content:"→";margin-left:8px;transition:transform var(--ease)}
    .button--text:hover{color:var(--blue-deep)}
    .button--text:hover::after{transform:translateX(4px)}
    .button:focus-visible,.search-button:focus-visible,.menu-button:focus-visible,.channel-list a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.accordion-title:focus-visible{outline:2px solid var(--red);outline-offset:3px}
    .badge{display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:999px;color:var(--blue);background:var(--sky-soft);font-size:13px;font-weight:700}
    .site-header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
    .brand-row{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:12px;min-width:0;color:var(--ink);font-size:21px;font-weight:800;white-space:nowrap}
    .brand-mark{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;color:#fff;background:var(--blue);border-radius:8px;font-size:20px;font-weight:900}
    .brand:hover{color:var(--blue)}
    .brand-tools{display:flex;align-items:center;gap:14px}
    .search-button,.menu-button{display:grid;place-items:center;width:42px;height:42px;padding:0;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:6px}
    .search-button:hover,.menu-button:hover{color:var(--blue);border-color:var(--blue);background:var(--sky-soft)}
    .menu-button{display:none}
    .channel-row{border-top:1px solid #edf2f7}
    .channel-list{display:flex;align-items:center;gap:6px;min-height:52px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:thin}
    .channel-list a{display:inline-flex;align-items:center;min-height:52px;padding:0 16px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;font-size:15px;font-weight:700}
    .channel-list a:hover,.channel-list a.active{color:var(--blue);background:#f1f7fd;border-bottom-color:var(--blue)}
    .page-intro{padding:72px 0 60px;background:var(--paper);border-bottom:1px solid var(--line)}
    .intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end}
    .intro-copy{max-width:700px}
    .intro-copy h1{max-width:650px}
    .intro-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
    .intro-aside{padding:22px 24px;border-left:4px solid var(--red);background:#f8fbfe;color:var(--muted)}
    .intro-aside strong{display:block;color:var(--ink);font-size:18px;margin-bottom:5px}
    .feature-section{padding:76px 0 92px}
    .feature-layout{display:grid;grid-template-columns:1.22fr .78fr;gap:28px;align-items:stretch}
    .feature-image{position:relative;min-height:390px;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
    .feature-image img{width:100%;height:100%;min-height:390px;object-fit:cover}
    .feature-image::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(16,35,60,.72))}
    .feature-caption{position:absolute;right:30px;bottom:26px;left:30px;z-index:1;color:#fff}
    .feature-caption h2{max-width:610px;margin-bottom:8px;color:#fff}
    .feature-caption p{max-width:580px;margin:0;color:#edf5fb}
    .quick-panel{padding:30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .quick-panel h3{margin-bottom:20px}
    .quick-list{margin:0;padding:0;list-style:none}
    .quick-list li{display:flex;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}
    .quick-list li:last-child{border-bottom:0}
    .step-no{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;color:#fff;background:var(--blue);border-radius:50%;font-size:13px;font-weight:800}
    .quick-list strong{display:block;font-size:16px}
    .quick-list span{display:block;color:var(--muted);font-size:14px;line-height:1.55}
    .guide-section{background:#fff;padding:92px 0}
    .guide-layout{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
    .guide-list{margin:0;padding:0;list-style:none}
    .guide-item{display:grid;grid-template-columns:112px 1fr;gap:22px;padding:25px 0;border-top:1px solid var(--line)}
    .guide-item:first-child{border-top:2px solid var(--blue)}
    .guide-item img{width:112px;height:88px;object-fit:cover;border-radius:6px}
    .guide-item h3{margin-bottom:6px}
    .guide-item p{margin:0;color:var(--muted)}
    .guide-item .badge{margin-bottom:8px}
    .side-box{position:sticky;top:155px;padding:24px;background:var(--wash);border:1px solid var(--line);border-radius:var(--radius)}
    .side-box h3{font-size:19px}
    .side-box ul{margin:15px 0 22px;padding-left:20px;color:var(--muted)}
    .side-box li{margin-bottom:8px}
    .faq-section{padding:92px 0}
    .faq-wrap{max-width:860px}
    .accordion{margin:0;border:1px solid var(--line);background:#fff;border-radius:var(--radius);overflow:hidden}
    .accordion-item{border-bottom:1px solid var(--line)}
    .accordion-item:last-child{border-bottom:0}
    .accordion-title{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:17px 24px;color:var(--ink);font-weight:700;background:#fff}
    .accordion-title::after{content:"+";color:var(--blue);font-size:24px;font-weight:400;line-height:1}
    .is-active>.accordion-title{color:var(--blue);background:#f8fbfe}
    .is-active>.accordion-title::after{content:"−";color:var(--red)}
    .accordion-content{padding:0 24px 22px;color:var(--muted);background:#f8fbfe}
    .accordion-content p{margin:0}
    .cta-section{padding:76px 0;background:var(--sky-soft)}
    .cta-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
    .cta-copy h2{margin-bottom:12px}
    .cta-copy p{color:var(--muted)}
    .contact-form{padding:30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    label{display:block;margin-bottom:7px;color:var(--ink);font-size:14px;font-weight:700}
    input,select,textarea{width:100%;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);padding:12px 14px;transition:border-color var(--ease),box-shadow var(--ease)}
    input,select{height:50px}
    textarea{min-height:116px;resize:vertical}
    input:hover,select:hover,textarea:hover{border-color:#a8bfd6}
    input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,95,191,.12);outline:0}
    .field-full{grid-column:1/-1}
    .consent{display:flex;gap:9px;align-items:flex-start;margin:17px 0;color:var(--muted);font-size:13px}
    .consent input{width:17px;height:17px;flex:0 0 17px;margin-top:4px}
    .form-status{display:none;margin-top:12px;color:var(--success);font-size:14px}
    .form-status.is-visible{display:block}
    .site-footer{padding:58px 0 22px;background:#eaf0f6;border-top:1px solid var(--line)}
    .footer-grid{display:grid;grid-template-columns:1.5fr .75fr .75fr;gap:50px;padding-bottom:42px}
    .footer-brand{display:inline-block;margin-bottom:12px;color:var(--ink);font-size:20px;font-weight:800}
    .footer-brand:hover,.footer-links a:hover{color:var(--blue)}
    .footer-grid p{max-width:430px;margin:0;color:var(--muted);font-size:14px}
    .footer-title{margin-bottom:12px;color:var(--ink);font-weight:800}
    .footer-links{margin:0;padding:0;list-style:none}
    .footer-links li{margin-bottom:8px;color:var(--muted);font-size:14px}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid #d4e0eb;color:var(--soft);font-size:13px}
    .footer-bottom p{margin:0}
    @media(max-width:1023px){
      .intro-grid,.feature-layout,.cta-layout{grid-template-columns:1fr;gap:32px}
      .guide-layout{grid-template-columns:1fr;gap:30px}
      .side-box{position:static}
      .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
    }
    @media(max-width:767px){
      h1{font-size:34px}
      h2{font-size:29px}
      .container{width:min(100% - 32px,1200px)}
      .brand-row{min-height:68px}
      .brand{font-size:17px;gap:8px}
      .brand-mark{width:34px;height:34px;flex-basis:34px;font-size:18px}
      .brand-tools .button--primary{display:none}
      .menu-button{display:grid}
      .channel-list a{padding:0 13px;font-size:14px}
      .page-intro{padding:52px 0 44px}
      .feature-section,.guide-section,.faq-section{padding:58px 0}
      .feature-image,.feature-image img{min-height:330px}
      .feature-caption{right:20px;bottom:20px;left:20px}
      .feature-caption h2{font-size:25px}
      .guide-item{grid-template-columns:88px 1fr;gap:15px}
      .guide-item img{width:88px;height:76px}
      .form-grid{grid-template-columns:1fr}
      .field-full{grid-column:auto}
      .cta-section{padding:58px 0}
      .footer-grid{grid-template-columns:1fr;gap:26px;padding-bottom:30px}
      .footer-bottom{display:block}
      .footer-bottom p+p{margin-top:6px}
    }
    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
    }