/* roulang page: index */
:root {
      --blue: #315ef5;
      --blue-deep: #2448c9;
      --blue-soft: #edf3ff;
      --coral: #e98291;
      --warm: #fff1ee;
      --ink: #17233d;
      --muted: #64748b;
      --line: #dfe7f3;
      --surface: #ffffff;
      --mist: #f7f9fc;
      --shadow: 0 16px 40px rgba(38, 74, 140, .09);
      --radius: 20px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--mist);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    button { cursor: pointer; }
    .container { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
    .site-header {
      position: sticky; top: 0; z-index: 20;
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid var(--line);
    }
    .nav-shell { min-height: 76px; display: flex; align-items: center; gap: 34px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 270px; }
    .brand-mark {
      width: 38px; height: 38px; border-radius: 12px;
      display: grid; place-items: center; color: #fff; font-weight: 800;
      background: var(--blue); box-shadow: 0 7px 16px rgba(49,94,245,.22);
    }
    .brand-name { font-size: 17px; font-weight: 800; letter-spacing: 0; }
    .nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
    .nav-link { color: var(--muted); font-size: 15px; padding: 10px 0; transition: color .2s; }
    .nav-link:hover, .nav-link.active { color: var(--blue); }
    .nav-cta, .button-primary {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      color: #fff; background: var(--blue); border: 1px solid var(--blue);
      border-radius: 12px; padding: 12px 18px; font-weight: 700;
      box-shadow: 0 8px 18px rgba(49,94,245,.18);
      transition: transform .2s, background .2s, box-shadow .2s;
    }
    .nav-cta:hover, .button-primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(49,94,245,.25); }
    .button-secondary {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      border: 1px solid var(--line); background: #fff; color: var(--ink);
      border-radius: 12px; padding: 12px 18px; font-weight: 700; transition: .2s;
    }
    .button-secondary:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
    .nav-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-size: 26px; min-width: 44px; min-height: 44px; }
    :focus-visible { outline: 3px solid rgba(49,94,245,.35); outline-offset: 3px; }
    .hero { padding: 76px 0 92px; background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%); }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .9fr); gap: 72px; align-items: center; }
    .eyebrow, .section-kicker { color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { font-size: clamp(42px, 5vw, 62px); line-height: 1.18; letter-spacing: 0; margin: 16px 0 24px; max-width: 680px; }
    .hero-copy { max-width: 650px; color: var(--muted); font-size: 18px; line-height: 1.9; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
    .hero-notes { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 30px; color: var(--muted); font-size: 14px; }
    .hero-notes span::before { content: "✓"; color: var(--coral); font-weight: 800; margin-right: 6px; }
    .index-panel { position: relative; min-height: 430px; border-radius: 28px; padding: 28px; overflow: hidden; background: #eaf1ff; border: 1px solid #d6e3ff; box-shadow: var(--shadow); }
    .index-panel::before, .index-panel::after { content: ""; position: absolute; border: 1px solid rgba(49,94,245,.15); border-radius: 50%; }
    .index-panel::before { width: 360px; height: 360px; right: -130px; top: -110px; }
    .index-panel::after { width: 250px; height: 250px; left: -130px; bottom: -110px; }
    .panel-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; color: var(--blue-deep); font-weight: 800; }
    .panel-status { padding: 5px 9px; border-radius: 8px; background: #fff; color: #4b67b5; font-size: 12px; }
    .panel-main { position: relative; z-index: 1; margin: 55px 0 30px; padding: 25px; background: #fff; border-radius: 18px; box-shadow: 0 12px 24px rgba(49,94,245,.10); }
    .panel-main strong { display: block; font-size: 25px; line-height: 1.35; margin-bottom: 10px; }
    .panel-main p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
    .tag-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
    .tag { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 9px; background: #fff; color: #4763ad; font-size: 13px; border: 1px solid #dce6ff; }
    .tag.accent { background: var(--warm); border-color: #f5cbd0; color: #a74c5c; }
    .section { padding: 104px 0; }
    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 34px; }
    h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.3; margin: 10px 0 12px; }
    .section-intro { max-width: 620px; color: var(--muted); margin-bottom: 0; }
    .entry-grid { display: grid; grid-template-columns: 1.25fr .85fr .85fr; grid-template-rows: 1fr 1fr; gap: 18px; }
    .entry-card, .news-item, .plan-card, .quote-panel, .faq-item, .contact-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
    .entry-card { padding: 26px; min-height: 188px; transition: .22s; }
    .entry-card.featured { grid-row: span 2; padding: 34px; background: var(--blue); color: #fff; border-color: var(--blue); display: flex; flex-direction: column; justify-content: space-between; }
    .entry-card:hover, .news-item:hover, .plan-card:hover { transform: translateY(-4px); border-color: #a9bfff; box-shadow: 0 20px 38px rgba(38,74,140,.13); }
    .entry-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--blue-soft); color: var(--blue); font-weight: 800; margin-bottom: 22px; }
    .featured .entry-icon { background: rgba(255,255,255,.16); color: #fff; }
    .entry-card h3 { font-size: 21px; margin-bottom: 8px; }
    .entry-card p { color: var(--muted); font-size: 14px; margin-bottom: 0; }
    .featured p { color: #dce6ff; }
    .link-arrow { color: var(--blue); font-weight: 700; font-size: 14px; }
    .featured .link-arrow { color: #fff; }
    .data-band { background: var(--ink); color: #fff; padding: 30px 0; }
    .data-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
    .data-item { padding: 10px 28px; border-right: 1px solid rgba(255,255,255,.16); }
    .data-item:first-child { padding-left: 0; }
    .data-item:last-child { border-right: 0; }
    .data-number { display: block; color: #fff; font-size: 34px; font-weight: 800; line-height: 1.2; margin-bottom: 4px; }
    .data-label { color: #b8c5df; font-size: 14px; }
    .case-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; align-items: stretch; }
    .quote-panel { padding: 38px; background: var(--warm); border-color: #f5d9dc; }
    .case-number { color: var(--coral); font-size: 14px; font-weight: 800; }
    .quote-panel h3 { font-size: 28px; line-height: 1.4; margin: 18px 0 14px; }
    .quote-panel p { color: #6e5260; }
    .news-list { display: grid; gap: 12px; }
    .news-item { padding: 20px 22px; display: grid; grid-template-columns: 78px 1fr auto; gap: 16px; align-items: center; transition: .22s; }
    .news-date { color: var(--blue); font-size: 13px; font-weight: 800; }
    .news-item h3 { font-size: 17px; margin: 0 0 3px; }
    .news-item p { color: var(--muted); font-size: 13px; margin: 0; }
    .plans { display: grid; grid-template-columns: .85fr 1fr 1.15fr; gap: 18px; align-items: end; }
    .plan-card { padding: 28px; min-height: 280px; display: flex; flex-direction: column; }
    .plan-card.highlight { min-height: 340px; border: 2px solid var(--blue); }
    .plan-card h3 { font-size: 23px; margin: 12px 0 8px; }
    .plan-card p { color: var(--muted); font-size: 14px; }
    .plan-list { list-style: none; padding: 0; margin: 16px 0 24px; color: var(--muted); font-size: 14px; }
    .plan-list li { margin: 8px 0; }
    .plan-list li::before { content: "·"; color: var(--coral); font-weight: 900; margin-right: 8px; }
    .plan-card .button-secondary, .plan-card .button-primary { margin-top: auto; }
    .faq-list { max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
    .faq-item { overflow: hidden; box-shadow: none; }
    .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 24px; background: #fff; color: var(--ink); border: 0; text-align: left; font-weight: 700; }
    .faq-question .chevron { color: var(--blue); transition: transform .2s; font-size: 20px; }
    .faq-answer { display: none; padding: 0 24px 22px; color: var(--muted); font-size: 15px; }
    .faq-item.open .faq-answer { display: block; }
    .faq-item.open .chevron { transform: rotate(180deg); }
    .contact-box { padding: 42px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: #eef3ff; border-color: #d5e1ff; }
    .contact-box h2 { margin-top: 0; }
    .contact-form { display: grid; gap: 12px; }
    .field { width: 100%; border: 1px solid #cfd9ea; background: #fff; border-radius: 10px; padding: 13px 14px; color: var(--ink); }
    .field::placeholder { color: #94a3b8; }
    .field:focus { border-color: var(--blue); outline: 3px solid rgba(49,94,245,.12); }
    textarea.field { min-height: 96px; resize: vertical; }
    .form-note { color: var(--muted); font-size: 12px; margin: 0; }
    .site-footer { background: var(--ink); color: #dce5f7; padding: 52px 0 24px; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.13); }
    .footer-brand { color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 13px; }
    .footer-copy { color: #9eacc6; max-width: 390px; font-size: 14px; }
    .footer-title { color: #fff; font-weight: 700; margin-bottom: 12px; }
    .footer-links { display: grid; gap: 8px; color: #aab8d0; font-size: 14px; }
    .footer-links a:hover { color: #fff; }
    .copyright { color: #8796b2; font-size: 12px; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; }
    @media (max-width: 1024px) {
      .container { width: min(100% - 40px, 900px); }
      .hero-grid { gap: 36px; }
      .brand { min-width: auto; }
      .nav-links { gap: 16px; }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 32px, 620px); }
      .nav-shell { justify-content: space-between; }
      .nav-toggle { display: block; }
      .nav-links { display: none; position: absolute; top: 76px; left: 0; right: 0; padding: 14px 20px 22px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); flex-direction: column; align-items: stretch; gap: 2px; }
      .nav-links.show { display: flex; }
      .nav-link { padding: 13px 8px; }
      .nav-cta { text-align: center; margin-top: 7px; }
      .hero { padding: 58px 0 70px; }
      .hero-grid, .case-layout, .contact-box { grid-template-columns: 1fr; }
      .index-panel { min-height: 350px; }
      .section { padding: 76px 0; }
      .section-head { display: block; }
      .section-intro { margin-top: 8px; }
      .entry-grid { grid-template-columns: 1fr 1fr; }
      .entry-card.featured { grid-column: span 2; grid-row: auto; min-height: 260px; }
      .data-grid { grid-template-columns: 1fr 1fr; gap: 20px 0; }
      .data-item:nth-child(2) { border-right: 0; }
      .data-item:nth-child(3), .data-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.16); padding-top: 20px; }
      .plans { grid-template-columns: 1fr; align-items: stretch; }
      .plan-card, .plan-card.highlight { min-height: auto; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid > :first-child { grid-column: span 2; }
    }
    @media (max-width: 520px) {
      h1 { font-size: 36px; }
      .hero-copy { font-size: 16px; }
      .hero-actions > * { width: 100%; }
      .index-panel { padding: 20px; min-height: 330px; }
      .panel-main { margin-top: 40px; }
      .entry-grid { grid-template-columns: 1fr; }
      .entry-card.featured { grid-column: auto; }
      .data-item { padding-left: 0; padding-right: 12px; }
      .news-item { grid-template-columns: 1fr auto; gap: 4px 12px; }
      .news-date { grid-column: span 2; }
      .contact-box { padding: 28px 20px; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-grid > :first-child { grid-column: auto; }
      .copyright { display: block; }
    }

/* roulang page: category1 */
:root {
      --blue:#315ef5; --blue-deep:#2448c9; --blue-soft:#edf3ff;
      --coral:#e98291; --warm:#fff1ee; --ink:#17233d; --muted:#64748b;
      --line:#dfe7f3; --surface:#fff; --mist:#f7f9fc;
      --shadow:0 16px 40px rgba(38,74,140,.09); --radius:20px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--mist);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    .container{width:min(1180px,calc(100% - 64px));margin:0 auto}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
    .nav-shell{min-height:76px;display:flex;align-items:center;gap:34px}
    .brand{display:inline-flex;align-items:center;gap:12px;min-width:270px}
    .brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;background:var(--blue);box-shadow:0 7px 16px rgba(49,94,245,.22)}
    .brand-name{font-size:17px;font-weight:800}
    .nav-links{display:flex;align-items:center;gap:26px;margin-left:auto}
    .nav-link{color:var(--muted);font-size:15px;padding:10px 0;transition:color .2s}
    .nav-link:hover,.nav-link.active{color:var(--blue)}
    .nav-cta,.button-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;background:var(--blue);border:1px solid var(--blue);border-radius:12px;padding:12px 18px;font-weight:700;box-shadow:0 8px 18px rgba(49,94,245,.18);transition:transform .2s,background .2s,box-shadow .2s}
    .nav-cta:hover,.button-primary:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 12px 24px rgba(49,94,245,.25)}
    .button-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:12px 18px;font-weight:700;transition:.2s}
    .button-secondary:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
    a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(49,94,245,.3);outline-offset:3px}
    .nav-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:26px;min-width:44px;min-height:44px}
    .inner-hero{padding:78px 0 64px;background:linear-gradient(180deg,#fff 0%,#f7f9fc 100%)}
    .inner-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
    .eyebrow,.section-kicker{color:var(--blue);font-size:13px;font-weight:800;letter-spacing:.08em}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(36px,5vw,58px);line-height:1.2;letter-spacing:-.04em;margin:14px 0 20px}
    h2{font-size:clamp(28px,3vw,40px);line-height:1.3;letter-spacing:-.03em}
    .hero-copy{max-width:650px;color:var(--muted);font-size:17px;line-height:1.9}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
    .index-panel{position:relative;min-height:330px;padding:28px;background:var(--blue-soft);border:1px solid #d8e4ff;border-radius:28px;overflow:hidden}
    .index-panel:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-50px;top:-55px;background:rgba(233,130,145,.25)}
    .index-panel:after{content:"";position:absolute;width:130px;height:130px;border:18px solid rgba(49,94,245,.1);border-radius:50%;left:-45px;bottom:-45px}
    .index-card{position:relative;z-index:1;background:#fff;padding:22px;border-radius:18px;box-shadow:var(--shadow);margin:34px 18px 18px 0}
    .index-card strong{display:block;font-size:22px;line-height:1.4;margin-bottom:8px}
    .index-card p{color:var(--muted);font-size:14px;margin-bottom:0}
    .tag-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px}
    .tag{display:inline-flex;align-items:center;padding:7px 11px;border-radius:9px;background:#fff;color:#4763ad;font-size:13px;border:1px solid #dce6ff}
    .tag.accent{background:var(--warm);border-color:#f5cbd0;color:#a74c5c}
    .section{padding:88px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
    .section-intro{max-width:620px;color:var(--muted);margin-bottom:0}
    .filter-bar{display:flex;gap:10px;align-items:center;overflow-x:auto;padding:4px 0 18px;margin-bottom:26px}
    .filter{white-space:nowrap;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--muted);padding:10px 15px;transition:.2s}
    .filter:hover,.filter.active{background:var(--blue);border-color:var(--blue);color:#fff}
    .featured-content{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow);margin-bottom:22px}
    .featured-content h3{font-size:28px;line-height:1.4;margin:13px 0 10px}
    .featured-content p,.resource-card p{color:var(--muted);font-size:15px}
    .side-note{background:var(--blue);border-radius:18px;padding:24px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:190px}
    .side-note p{color:#dce6ff;font-size:14px}
    .resource-grid{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:18px}
    .resource-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;min-height:220px;box-shadow:var(--shadow);transition:.22s}
    .resource-card:nth-child(2){transform:translateY(18px)}
    .resource-card:hover{transform:translateY(-4px);border-color:#a9bfff;box-shadow:0 20px 38px rgba(38,74,140,.13)}
    .resource-card:nth-child(2):hover{transform:translateY(12px)}
    .resource-card h3{font-size:20px;line-height:1.4;margin:12px 0 8px}
    .card-meta{display:flex;justify-content:space-between;color:#8a98ae;font-size:12px;margin-top:20px}
    .icon-box{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:800}
    .notice{margin-top:34px;padding:18px 20px;border-left:4px solid var(--coral);background:var(--warm);color:#74434a;border-radius:10px;font-size:14px}
    .cta-panel{background:var(--ink);color:#fff;border-radius:26px;padding:42px;display:flex;justify-content:space-between;align-items:center;gap:28px}
    .cta-panel p{color:#b8c5df;max-width:650px;margin-bottom:0}
    .site-footer{background:var(--ink);color:#fff;padding:58px 0 22px;margin-top:10px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px;padding-bottom:42px}
    .footer-brand{font-size:20px;font-weight:800;margin-bottom:12px}
    .footer-copy{max-width:430px;color:#b8c5df;font-size:14px}
    .footer-title{font-weight:700;margin-bottom:14px}
    .footer-links{display:grid;gap:8px;color:#b8c5df;font-size:14px}
    .footer-links a:hover{color:#fff}
    .copyright{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#8e9db8;font-size:12px}
    @media(max-width:1024px){.inner-grid{gap:38px}.nav-shell{gap:18px}.brand{min-width:240px}.nav-links{gap:16px}.resource-grid{grid-template-columns:1fr 1fr}.resource-card:nth-child(2){transform:none}}
    @media(max-width:768px){.container{width:min(100% - 40px,620px)}.nav-shell{min-height:68px;justify-content:space-between}.nav-toggle{display:block}.nav-links{display:none;position:absolute;left:20px;right:20px;top:76px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:4px}.nav-links.open{display:flex}.nav-link{padding:12px}.nav-cta{margin-top:5px;text-align:center}.inner-hero{padding:58px 0 45px}.inner-grid,.featured-content{grid-template-columns:1fr;gap:28px}.index-panel{min-height:280px}.section{padding:68px 0}.section-head{display:block}.section-intro{margin-top:12px}.resource-grid{grid-template-columns:1fr}.cta-panel{display:block;padding:30px}.cta-panel .button-primary{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-grid>div:first-child{grid-column:1/-1}.copyright{display:block}.copyright span{display:block;margin-top:5px}}
    @media(max-width:520px){h1{font-size:35px}.brand-name{font-size:14px}.brand{min-width:0}.hero-actions .button-primary,.hero-actions .button-secondary{width:100%}.featured-content{padding:22px}.featured-content h3{font-size:23px}.footer-grid{grid-template-columns:1fr}}