/* roulang page: index */
:root {
      --ink: #17263a;
      --muted: #627187;
      --paper: #f4f7fb;
      --white: #fff;
      --line: #dce4ed;
      --navy: #102239;
      --blue: #2563a8;
      --blue-dark: #174b83;
      --blue-pale: #e9f2fc;
      --teal: #178b83;
      --gold: #d6af63;
      --gold-pale: #f8f0df;
      --rose: #a55063;
      --radius: 10px;
      --radius-lg: 16px;
      --shadow: 0 12px 36px rgba(25, 48, 76, .09);
      --shadow-hover: 0 18px 42px rgba(25, 48, 76, .14);
      --content: 1180px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
    a:hover { color: var(--blue); }
    button, input { font: inherit; }
    button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(37, 99, 168, .36); outline-offset: 3px; }
    img { display: block; max-width: 100%; }
    .container { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; }
    .site-header { position: absolute; z-index: 20; inset: 0 0 auto; padding-top: 18px; }
    .nav-shell {
      min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
      padding: 12px 20px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius);
      background: rgba(15, 34, 56, .66); color: #fff; backdrop-filter: blur(18px);
      box-shadow: 0 8px 30px rgba(5, 19, 35, .17); transition: background .25s ease, box-shadow .25s ease;
    }
    .site-header.is-scrolled { position: fixed; padding-top: 8px; }
    .site-header.is-scrolled .nav-shell { background: rgba(16,34,57,.96); box-shadow: 0 9px 28px rgba(8,24,42,.23); }
    .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: #fff; font-weight: 750; font-size: 18px; }
    .brand-mark {
      display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 9px;
      color: #16263a; background: linear-gradient(145deg, #f5dfaa, #c89c4e); font-size: 16px;
    }
    .brand:hover { color: #fff; }
    .nav-links { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .nav-links a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 7px; color: rgba(255,255,255,.78); font-size: 14px; }
    .nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.13); }
    .nav-side { display: flex; align-items: center; gap: 12px; }
    .nav-search { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.23); border-radius: 7px; color: rgba(255,255,255,.7); font-size: 13px; }
    .nav-age { padding: 7px 10px; border: 1px solid rgba(214,175,99,.52); border-radius: 6px; color: #f2d89f; font-size: 12px; font-weight: 700; white-space: nowrap; }
    .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.28); border-radius: 7px; background: transparent; color: #fff; cursor: pointer; }
    .hero {
      position: relative; min-height: 650px; display: flex; align-items: flex-end; overflow: hidden;
      color: #fff; background: #102239 url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=2200&q=85") center 44% / cover no-repeat;
    }
    .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,23,40,.88), rgba(12,31,51,.61) 55%, rgba(12,31,51,.22)), linear-gradient(0deg, rgba(9,25,42,.55), transparent 60%); }
    .hero-inner { position: relative; z-index: 1; padding-top: 150px; padding-bottom: 78px; }
    .hero-copy { max-width: 790px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; color: #efcf8d; font-size: 13px; font-weight: 700; letter-spacing: 1px; }
    .eyebrow::before { content: ""; width: 25px; height: 1px; background: currentColor; }
    h1 { max-width: 790px; margin: 0 0 20px; color: #fff; font-size: 46px; line-height: 1.25; font-weight: 760; }
    .hero-lead { max-width: 760px; margin: 0; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.95; }
    .hero-meta { display: flex; align-items: center; gap: 13px; margin-top: 26px; color: rgba(255,255,255,.76); font-size: 13px; }
    .level-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(225,190,119,.54); border-radius: 6px; color: #f0d59e; background: rgba(8,23,40,.35); font-weight: 700; }
    .hero-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
    .button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 46px; padding: 0 18px; border: 1px solid transparent; border-radius: 7px; font-weight: 700; font-size: 14px; }
    .button:hover { transform: translateY(-2px); }
    .button-gold { color: #17263a; background: #e3c27f; box-shadow: 0 7px 18px rgba(0,0,0,.16); }
    .button-gold:hover { color: #17263a; background: #f0d69f; }
    .button-glass { color: #fff; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.08); }
    .button-glass:hover { color: #fff; background: rgba(255,255,255,.17); }
    .hero-bottom { position: absolute; z-index: 1; right: max(24px, calc((100% - var(--content)) / 2)); bottom: 27px; color: rgba(255,255,255,.66); font-size: 12px; }
    main { overflow: hidden; }
    .section { padding: 74px 0; }
    .section-white { background: var(--white); }
    .section-blue { background: #edf4fa; }
    .section-dark { color: #fff; background: var(--navy); }
    .section-soft { background: #f7f9fc; }
    .section-head { max-width: 760px; margin-bottom: 32px; }
    .section-kicker { margin: 0 0 9px; color: var(--blue); text-transform: uppercase; font-size: 12px; font-weight: 750; letter-spacing: 1px; }
    .section-dark .section-kicker { color: #e1c17e; }
    h2 { margin: 0 0 12px; color: var(--ink); font-size: 30px; line-height: 1.35; font-weight: 740; }
    .section-dark h2 { color: #fff; }
    .section-intro { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
    .section-dark .section-intro { color: rgba(255,255,255,.68); }
    .problem-layout { display: grid; grid-template-columns: .88fr 1.12fr; gap: 54px; align-items: center; }
    .problem-note { padding-left: 22px; border-left: 3px solid var(--gold); color: #46576d; font-size: 17px; line-height: 1.85; }
    .signal-list { display: grid; gap: 12px; }
    .signal-row { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 17px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .signal-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 8px; color: var(--blue); background: var(--blue-pale); }
    .signal-row strong { display: block; margin-bottom: 3px; font-size: 15px; }
    .signal-row p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
    .solution-band { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 35px; padding: 34px 38px; border: 1px solid #d5e2ef; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
    .solution-band h2 { font-size: 24px; }
    .solution-band p { max-width: 750px; margin: 0; color: var(--muted); font-size: 14px; }
    .solution-symbol { display: grid; width: 92px; height: 92px; place-items: center; border-radius: 50%; color: var(--blue); background: #e9f2fc; font-size: 31px; }
    .region-grid { display: grid; grid-template-columns: 1.16fr .84fr; gap: 22px; }
    .region-feature { position: relative; min-height: 335px; overflow: hidden; padding: 32px; display: flex; align-items: flex-end; border-radius: var(--radius); color: #fff; background: #1a3348 url("https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?auto=format&fit=crop&w=1200&q=85") center / cover; }
    .region-feature::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,25,42,.85), rgba(9,25,42,.04) 78%); }
    .region-feature-content { position: relative; z-index: 1; max-width: 530px; }
    .region-feature h3 { margin: 0 0 8px; color: #fff; font-size: 24px; }
    .region-feature p { margin: 0; color: rgba(255,255,255,.8); font-size: 14px; }
    .region-side { display: grid; gap: 14px; }
    .region-card { display: flex; min-height: 102px; align-items: center; gap: 17px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; transition: transform .2s, box-shadow .2s; }
    .region-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .region-code { display: grid; width: 50px; height: 50px; flex: 0 0 50px; place-items: center; border-radius: 8px; color: var(--blue-dark); background: var(--blue-pale); font-size: 13px; font-weight: 800; }
    .region-card h3 { margin: 0 0 3px; font-size: 15px; }
    .region-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .scene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
    .scene-item { min-height: 185px; padding: 23px 20px; border-top: 3px solid var(--blue); background: #fff; box-shadow: 0 7px 22px rgba(25,48,76,.06); }
    .scene-item:nth-child(2) { border-color: var(--teal); }
    .scene-item:nth-child(3) { border-color: var(--gold); }
    .scene-item:nth-child(4) { border-color: var(--rose); }
    .scene-item i { display: block; margin-bottom: 16px; color: var(--blue); font-size: 20px; }
    .scene-item h3 { margin: 0 0 8px; font-size: 15px; }
    .scene-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
    .local-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
    .local-visual { position: relative; min-height: 330px; overflow: hidden; border-radius: var(--radius); background: #dfeaf2 url("https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?auto=format&fit=crop&w=1100&q=85") center / cover; }
    .local-visual::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(0deg, rgba(13,39,62,.55), transparent); }
    .local-caption { position: absolute; z-index: 1; bottom: 19px; left: 21px; color: #fff; font-size: 13px; font-weight: 700; }
    .local-points { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 25px; margin-top: 24px; }
    .local-point { display: flex; gap: 12px; }
    .check-mark { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; color: #127b72; background: #e0f3ef; font-size: 12px; }
    .local-point strong { display: block; margin-bottom: 3px; font-size: 14px; }
    .local-point span { display: block; color: var(--muted); font-size: 12px; line-height: 1.65; }
    .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
    .method-item { position: relative; padding: 26px 28px 27px 0; }
    .method-item + .method-item { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.18); }
    .method-num { color: #e1c17e; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
    .method-item h3 { margin: 9px 0 8px; color: #fff; font-size: 18px; }
    .method-item p { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.8; }
    .metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
    .metric { padding: 25px 25px 23px; }
    .metric + .metric { border-left: 1px solid var(--line); }
    .metric strong { display: block; color: var(--blue-dark); font-size: 28px; line-height: 1.25; }
    .metric span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
    .proof-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; align-items: center; }
    .proof-stamp { padding: 25px; border: 1px solid rgba(225,193,126,.35); border-radius: var(--radius); color: #e1c17e; text-align: center; }
    .proof-stamp i { font-size: 30px; }
    .proof-stamp strong { display: block; margin-top: 11px; color: #fff; font-size: 16px; }
    .proof-stamp span { display: block; margin-top: 5px; color: rgba(255,255,255,.58); font-size: 12px; }
    .proof-copy { padding: 5px 0; }
    .proof-copy blockquote { margin: 0; color: rgba(255,255,255,.88); font-size: 19px; line-height: 1.8; }
    .proof-copy cite { display: block; margin-top: 15px; color: #e1c17e; font-size: 13px; font-style: normal; }
    .case-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
    .case-main { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 265px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
    .case-image { min-height: 100%; background: #d6e4ec url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=850&q=85") center / cover; }
    .case-copy { align-self: center; padding: 27px; }
    .case-tag { display: inline-block; margin-bottom: 10px; padding: 4px 8px; border-radius: 4px; color: var(--blue-dark); background: var(--blue-pale); font-size: 11px; font-weight: 700; }
    .case-copy h3, .case-small h3 { margin: 0 0 9px; font-size: 17px; }
    .case-copy p, .case-small p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
    .case-side { display: grid; gap: 18px; }
    .case-small { padding: 22px; border-left: 3px solid var(--teal); background: #fff; box-shadow: 0 7px 22px rgba(25,48,76,.05); }
    .case-small:nth-child(2) { border-color: var(--gold); }
    .updates-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 48px; align-items: start; }
    .update-list { border-top: 1px solid var(--line); }
    .update-row { display: grid; grid-template-columns: 94px 1fr 20px; align-items: center; gap: 17px; padding: 17px 0; border-bottom: 1px solid var(--line); }
    .update-date { color: var(--blue); font-size: 12px; font-weight: 700; }
    .update-row strong { display: block; font-size: 14px; }
    .update-row span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
    .update-row > i { color: #9ba8b7; font-size: 12px; }
    .resource-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
    .resource-item { display: flex; gap: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .resource-item i { margin-top: 2px; color: var(--teal); font-size: 18px; }
    .resource-item h3 { margin: 0 0 5px; font-size: 14px; }
    .resource-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
    .security-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center; }
    .security-list { display: grid; gap: 13px; }
    .security-row { display: flex; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line); }
    .security-row i { margin-top: 4px; color: var(--teal); }
    .security-row strong { display: block; margin-bottom: 3px; font-size: 14px; }
    .security-row span { color: var(--muted); font-size: 12px; line-height: 1.7; }
    .age-panel { padding: 27px; border-radius: var(--radius); color: #fff; background: var(--navy); }
    .age-panel .age-number { display: inline-grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(225,193,126,.5); border-radius: 50%; color: #e1c17e; font-weight: 800; }
    .age-panel h3 { margin: 15px 0 8px; color: #fff; font-size: 19px; }
    .age-panel p { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.85; }
    .membership { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 35px; padding: 34px 38px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(105deg, #142c45 0%, #223d55 100%); }
    .membership h2 { margin-bottom: 8px; color: #fff; font-size: 24px; }
    .membership p { max-width: 770px; margin: 0; color: rgba(255,255,255,.72); font-size: 14px; }
    .member-levels { display: flex; gap: 8px; margin-top: 16px; }
    .member-levels span { padding: 4px 9px; border: 1px solid rgba(225,193,126,.35); border-radius: 4px; color: #e5ca91; font-size: 11px; }
    .membership-mark { color: #e5ca91; font-size: 40px; }
    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .faq-item { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .faq-item h3 { margin: 0 0 8px; font-size: 15px; }
    .faq-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
    .final-note { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 25px 28px; border: 1px solid #dbe6ef; border-radius: var(--radius); background: #fff; }
    .final-note p { margin: 0; color: var(--muted); font-size: 13px; }
    .site-footer { padding: 46px 0 22px; color: rgba(255,255,255,.72); background: #0c1c2d; }
    .footer-top { display: grid; grid-template-columns: 1.3fr .7fr .8fr; gap: 50px; padding-bottom: 32px; }
    .footer-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #fff; font-size: 17px; font-weight: 750; }
    .footer-brand:hover { color: #fff; }
    .footer-about { max-width: 420px; margin: 0; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.8; }
    .footer-col h3 { margin: 0 0 12px; color: #fff; font-size: 13px; }
    .footer-col a, .footer-col span { display: block; margin: 7px 0; color: rgba(255,255,255,.61); font-size: 12px; }
    .footer-col a:hover { color: #e5ca91; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 18px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.46); font-size: 11px; }
    @media (max-width: 1024px) {
      .container { width: min(var(--content), calc(100% - 40px)); }
      .nav-search { display: none; }
      .scene-grid { grid-template-columns: repeat(2, 1fr); }
      .local-grid { gap: 36px; }
      .proof-layout { gap: 30px; }
      .footer-top { gap: 28px; }
    }
    @media (max-width: 768px) {
      .site-header { padding-top: 10px; }
      .nav-shell { min-height: 62px; padding: 9px 12px; }
      .brand { font-size: 15px; }
      .brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
      .menu-toggle { display: inline-grid; place-items: center; }
      .nav-side { margin-left: auto; }
      .nav-age { display: none; }
      .nav-links {
        position: absolute; top: calc(100% + 8px); left: 20px; right: 20px; display: none; flex-direction: column; align-items: stretch;
        gap: 3px; padding: 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(16,34,57,.98); box-shadow: var(--shadow);
      }
      .nav-links.is-open { display: flex; }
      .nav-links a { min-height: 44px; }
      .hero { min-height: 680px; background-position: 56% center; }
      .hero-inner { padding-top: 125px; padding-bottom: 65px; }
      h1 { font-size: 38px; }
      .section { padding: 58px 0; }
      h2 { font-size: 27px; }
      .problem-layout, .region-grid, .local-grid, .proof-layout, .case-grid, .updates-layout, .security-layout { grid-template-columns: 1fr; gap: 25px; }
      .region-feature { min-height: 290px; }
      .local-visual { min-height: 270px; }
      .method-grid { grid-template-columns: 1fr; }
      .method-item, .method-item + .method-item { padding: 21px 0; border-left: 0; }
      .method-item + .method-item { border-top: 1px solid rgba(255,255,255,.18); }
      .metrics { grid-template-columns: repeat(2, 1fr); }
      .metric:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
      .metric:nth-child(4) { border-top: 1px solid var(--line); }
      .proof-stamp { max-width: 300px; }
      .case-main { min-height: 240px; }
      .resource-strip { grid-template-columns: 1fr; }
      .solution-band, .membership { grid-template-columns: 1fr auto; padding: 27px; }
      .footer-top { grid-template-columns: 1fr 1fr; }
      .footer-top > :first-child { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
      .container { width: calc(100% - 32px); }
      .nav-links { left: 16px; right: 16px; }
      .brand { max-width: calc(100vw - 115px); font-size: 13px; }
      .hero { min-height: 700px; }
      .hero-inner { padding-top: 115px; padding-bottom: 72px; }
      h1 { font-size: 32px; }
      .hero-lead { font-size: 14px; }
      .hero-meta { align-items: flex-start; flex-direction: column; }
      .hero-cta { width: 100%; }
      .hero-cta .button { width: 100%; }
      .hero-bottom { right: 16px; bottom: 16px; }
      .section { padding: 48px 0; }
      h2 { font-size: 24px; }
      .section-head { margin-bottom: 24px; }
      .solution-band { grid-template-columns: 1fr; padding: 23px; }
      .solution-symbol { display: none; }
      .scene-grid { grid-template-columns: 1fr; }
      .scene-item { min-height: 0; }
      .local-points { grid-template-columns: 1fr; }
      .metrics { grid-template-columns: 1fr 1fr; }
      .metric { padding: 18px 15px; }
      .metric strong { font-size: 24px; }
      .metric:nth-child(2) { border-left: 1px solid var(--line); }
      .case-main { grid-template-columns: 1fr; }
      .case-image { min-height: 180px; }
      .case-copy { padding: 21px; }
      .update-row { grid-template-columns: 75px 1fr 15px; gap: 10px; }
      .faq-grid { grid-template-columns: 1fr; }
      .membership { grid-template-columns: 1fr; padding: 23px; }
      .membership-mark { display: none; }
      .final-note { align-items: stretch; flex-direction: column; padding: 21px; }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
      .footer-bottom { flex-direction: column; gap: 6px; }
      .problem-note { font-size: 15px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

/* roulang page: category1 */
:root {
 --ink:#17263a; --muted:#627187; --paper:#f4f7fb; --white:#fff; --line:#dce4ed;
 --navy:#102239; --blue:#2563a8; --blue-dark:#174b83; --blue-pale:#e9f2fc;
 --teal:#178b83; --gold:#d6af63; --gold-pale:#f8f0df; --rose:#a55063;
 --radius:10px; --radius-lg:16px; --shadow:0 12px 36px rgba(25,48,76,.09);
 --shadow-hover:0 18px 42px rgba(25,48,76,.14); --content:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
a:hover{color:var(--blue)}
button,input{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(37,99,168,.36);outline-offset:3px}
img{display:block;max-width:100%}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.25}
.container{width:min(var(--content),calc(100% - 48px));margin-inline:auto}
.site-header{position:absolute;z-index:20;inset:0 0 auto;padding-top:18px}
.nav-shell{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 20px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);background:rgba(15,34,56,.66);color:#fff;backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(5,19,35,.17);transition:background .25s ease,box-shadow .25s ease}
.site-header.is-scrolled{position:fixed;padding-top:8px}
.site-header.is-scrolled .nav-shell{background:rgba(16,34,57,.96);box-shadow:0 9px 28px rgba(8,24,42,.23)}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:0;color:#fff;font-weight:750;font-size:18px;white-space:nowrap}
.brand-mark{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:9px;color:#16263a;background:linear-gradient(145deg,#f5dfaa,#c89c4e);font-size:16px}
.brand:hover{color:#fff}
.nav-links{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.nav-links a{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:7px;color:rgba(255,255,255,.78);font-size:14px}
.nav-links a:hover,.nav-links a[aria-current=page]{color:#fff;background:rgba(255,255,255,.13)}
.nav-side{display:flex;align-items:center;gap:12px}
.nav-search{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(255,255,255,.23);border-radius:7px;color:rgba(255,255,255,.7);font-size:13px;white-space:nowrap}
.nav-age{padding:7px 10px;border:1px solid rgba(214,175,99,.52);border-radius:6px;color:#f2d89f;font-size:12px;font-weight:700;white-space:nowrap}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:7px;background:transparent;color:#fff;cursor:pointer}
.hero{position:relative;min-height:555px;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:#102239 url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=2200&q=85") center 44%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,23,40,.88),rgba(12,31,51,.61) 55%,rgba(12,31,51,.22)),linear-gradient(0deg,rgba(9,25,42,.55),transparent 60%)}
.hero-inner{position:relative;z-index:1;width:100%;padding-top:150px;padding-bottom:62px}
.hero-copy{max-width:790px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;color:#efcf8d;font-size:13px;font-weight:700}
.eyebrow::before{content:"";width:25px;height:1px;background:currentColor}
.hero h1{max-width:810px;margin:0 0 17px;font-size:clamp(34px,4vw,54px);font-weight:780;line-height:1.18}
.hero-lead{max-width:760px;margin:0;color:rgba(255,255,255,.84);font-size:16px;line-height:1.95}
.hero-meta{display:flex;align-items:center;gap:13px;margin-top:22px;color:rgba(255,255,255,.76);font-size:13px}
.level-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(225,190,119,.54);border-radius:6px;color:#f0d59e;background:rgba(8,23,40,.35);font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:46px;padding:0 18px;border:1px solid transparent;border-radius:7px;font-weight:700;font-size:14px}
.button:hover{transform:translateY(-2px)}
.button-gold{color:#17263a;background:#e3c27f;box-shadow:0 7px 18px rgba(0,0,0,.16)}
.button-gold:hover{color:#17263a;background:#f0d69f}
.button-glass{color:#fff;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.08)}
.button-glass:hover{color:#fff;background:rgba(255,255,255,.17)}
main{overflow:hidden}
.section{padding:70px 0}
.section-white{background:var(--white)}
.section-blue{background:#edf4fa}
.section-dark{color:#fff;background:var(--navy)}
.section-soft{background:#f7f9fc}
.section-head{max-width:760px;margin-bottom:30px}
.section-kicker{margin:0 0 9px;color:var(--blue);font-size:12px;font-weight:750}
.section-dark .section-kicker{color:#e1c17e}
.section-head h2{margin:0 0 12px;font-size:30px;font-weight:760}
.section-dark h2{color:#fff}
.section-intro{margin:0;color:var(--muted);font-size:15px;line-height:1.9}
.section-dark .section-intro{color:rgba(255,255,255,.7)}
.topic-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:38px;align-items:center}
.topic-photo{position:relative;min-height:350px;overflow:hidden;border-radius:var(--radius-lg);background:#d9e6f1}
.topic-photo img{width:100%;height:350px;object-fit:cover}
.photo-caption{position:absolute;inset:auto 16px 16px;padding:12px 15px;border:1px solid rgba(255,255,255,.32);border-radius:7px;color:#fff;background:rgba(16,34,57,.78);backdrop-filter:blur(8px);font-size:13px}
.feature-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.feature-list li{display:grid;grid-template-columns:42px 1fr;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}
.feature-list li:last-child{border-bottom:0}
.feature-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:8px;color:var(--blue);background:var(--blue-pale)}
.feature-list strong{display:block;margin-bottom:3px;font-size:16px}
.feature-list p{margin:0;color:var(--muted);font-size:14px}
.region-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.region-card{min-height:192px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 5px 20px rgba(25,48,76,.045);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.region-card:hover{transform:translateY(-4px);border-color:#bfd0e2;box-shadow:var(--shadow)}
.region-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.region-code{display:grid;width:43px;height:43px;place-items:center;border-radius:9px;color:var(--blue-dark);background:var(--blue-pale);font-size:13px;font-weight:800}
.region-tag{padding:5px 9px;border-radius:5px;color:#547087;background:#eef2f6;font-size:11px;font-weight:700}
.region-card h3{margin:0 0 8px;font-size:18px}
.region-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.75}
.compare-band{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}
.compare-copy h2{margin-bottom:13px;font-size:30px}
.compare-copy p{margin-bottom:0;color:rgba(255,255,255,.7);font-size:15px}
.compare-points{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compare-point{padding:16px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.055)}
.compare-point strong{display:block;margin-bottom:5px;color:#f1d79e;font-size:15px}
.compare-point span{color:rgba(255,255,255,.7);font-size:12px;line-height:1.7}
.format-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.format-list{display:grid;gap:10px}
.format-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 17px;border:1px solid var(--line);border-radius:8px;background:#fff}
.format-row strong{font-size:14px}
.format-row span{color:var(--muted);font-size:13px;text-align:right}
.note-panel{padding:24px;border-left:4px solid var(--teal);border-radius:0 9px 9px 0;background:#e9f5f3}
.note-panel h3{margin:0 0 9px;font-size:19px}
.note-panel p{margin:0;color:#526879;font-size:14px}
.standards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.standard{padding-top:16px;border-top:2px solid #c3d3e2}
.standard-number{margin-bottom:9px;color:var(--blue);font-size:12px;font-weight:800}
.standard h3{margin:0 0 8px;font-size:16px}
.standard p{margin:0;color:var(--muted);font-size:13px}
.editorial-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:30px}
.editorial-feature{position:relative;min-height:310px;display:flex;align-items:flex-end;overflow:hidden;padding:28px;border-radius:var(--radius-lg);color:#fff;background:#173454 url("https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1200&q=80") center/cover}
.editorial-feature::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,30,49,.88),rgba(12,30,49,.04) 80%)}
.editorial-feature div{position:relative;z-index:1;max-width:500px}
.editorial-feature .region-tag{display:inline-block;margin-bottom:12px;color:#fff;background:rgba(255,255,255,.18)}
.editorial-feature h3{margin:0 0 8px;color:#fff;font-size:24px}
.editorial-feature p{margin:0;color:rgba(255,255,255,.78);font-size:13px}
.article-list{display:grid;align-content:start}
.article-item{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.article-item:first-child{padding-top:0}
.article-item:last-child{border-bottom:0}
.article-index{color:var(--teal);font-size:12px;font-weight:800}
.article-item h3{margin:0 0 5px;font-size:15px}
.article-item p{margin:0;color:var(--muted);font-size:12px}
.data-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.17);border-radius:var(--radius);background:rgba(255,255,255,.045)}
.data-item{padding:24px 26px;border-right:1px solid rgba(255,255,255,.14)}
.data-item:last-child{border-right:0}
.data-value{display:block;margin-bottom:4px;color:#f1d79e;font-size:20px;font-weight:780}
.data-label{color:rgba(255,255,255,.68);font-size:13px}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 34px;border:1px solid #d4e1ec;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow)}
.cta-band h2{margin:0 0 7px;font-size:22px}
.cta-band p{margin:0;color:var(--muted);font-size:14px}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.button-blue{color:#fff;background:var(--blue);box-shadow:0 6px 16px rgba(37,99,168,.18)}
.button-blue:hover{color:#fff;background:var(--blue-dark)}
.button-outline{color:var(--blue-dark);border-color:#bdcddd;background:#fff}
.button-outline:hover{color:var(--blue-dark);background:#f0f5fa}
.site-footer{padding:54px 0 20px;color:rgba(255,255,255,.72);background:#0c1d30}
.footer-top{display:grid;grid-template-columns:1.5fr .8fr 1fr;gap:50px;padding-bottom:34px}
.footer-brand{display:inline-flex;align-items:center;gap:11px;margin-bottom:14px;color:#fff;font-weight:750;font-size:18px}
.footer-brand:hover{color:#fff}
.footer-about{max-width:400px;margin:0;color:rgba(255,255,255,.58);font-size:13px;line-height:1.85}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:9px;font-size:13px}
.footer-col h3{margin:2px 0 7px;color:#fff;font-size:14px}
.footer-col a:hover{color:#f1d79e}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:17px;border-top:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.48);font-size:12px}
@media(max-width:1024px){
 .nav-shell{gap:12px;padding-inline:14px}.brand{font-size:16px}.nav-links a{padding-inline:10px}.nav-search{display:none}
 .topic-layout{gap:26px}.region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .standards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
 .container{width:min(var(--content),calc(100% - 36px))}
 .site-header{padding-top:12px}.nav-shell{min-height:64px;flex-wrap:wrap}
 .menu-toggle{display:grid;place-items:center}
 .nav-side{margin-left:auto}
 .nav-links{display:none;order:3;width:100%;padding:8px 0 2px;border-top:1px solid rgba(255,255,255,.16)}
 .nav-links.is-open{display:flex;flex-direction:column;align-items:stretch}
 .nav-links a{width:100%;padding-inline:12px}
 .hero{min-height:540px}.hero-inner{padding-top:145px;padding-bottom:50px}
 .hero h1{font-size:38px}
 .section{padding:56px 0}
 .topic-layout,.compare-band,.format-layout,.editorial-grid{grid-template-columns:1fr}
 .topic-photo,.topic-photo img{height:300px;min-height:300px}
 .compare-band{gap:24px}.compare-points{max-width:560px}
 .editorial-feature{min-height:280px}
 .footer-top{grid-template-columns:1.2fr 1fr;gap:30px}
 .footer-top>div:first-child{grid-column:1/-1}
}
@media(max-width:520px){
 .container{width:calc(100% - 30px)}
 .brand{font-size:14px;gap:8px}.brand-mark{width:34px;height:34px;flex-basis:34px}
 .nav-shell{padding:10px}.nav-age{font-size:10px;padding:6px 7px}
 .hero{min-height:580px;background-position:58% center}
 .hero-inner{padding-top:140px;padding-bottom:48px}
 .hero h1{font-size:33px}
 .hero-lead{font-size:14px}
 .hero-meta{align-items:flex-start;flex-direction:column;gap:8px}
 .hero-cta .button{width:100%}
 .section{padding:48px 0}
 .section-head h2,.compare-copy h2{font-size:25px}
 .region-grid,.standards{grid-template-columns:1fr}
 .region-card{min-height:0}
 .compare-points{grid-template-columns:1fr}
 .format-row{align-items:flex-start;flex-direction:column;gap:4px}
 .format-row span{text-align:left}
 .data-strip{grid-template-columns:1fr}
 .data-item{padding:17px 20px;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
 .data-item:last-child{border-bottom:0}
 .cta-band{align-items:flex-start;flex-direction:column;padding:23px}
 .cta-actions{width:100%}.cta-actions .button{flex:1}
 .footer-top{grid-template-columns:1fr;gap:25px}
 .footer-top>div:first-child{grid-column:auto}
 .footer-bottom{flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}