/* roulang page: index */
:root{
      --bg: #eef3f4;
      --bg-soft: #f7fafb;
      --surface: rgba(255,255,255,.82);
      --surface-strong: #ffffff;
      --surface-dark: #10161b;
      --surface-dark-2: #162029;
      --text: #152028;
      --text-strong: #081016;
      --muted: #6d7b86;
      --line: rgba(20, 35, 44, .10);
      --line-strong: rgba(20, 35, 44, .18);
      --brand: #14c8b0;
      --brand-2: #2ce7c0;
      --brand-soft: rgba(20, 200, 176, .12);
      --accent: #f3b23e;
      --accent-soft: rgba(243, 178, 62, .14);
      --danger: #ef6b62;
      --shadow: 0 18px 42px rgba(12, 24, 30, .08);
      --shadow-strong: 0 22px 52px rgba(12, 24, 30, .16);
      --radius: 18px;
      --radius-lg: 26px;
      --radius-sm: 14px;
      --container: 1320px;
      --transition: all .22s ease;
      --header-h: 96px;
    }

    *, *::before, *::after{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }
    body{
      margin: 0;
      color: var(--text);
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      line-height: 1.78;
      background:
        radial-gradient(circle at 20% 0%, rgba(20,200,176,.12), transparent 28%),
        radial-gradient(circle at 100% 10%, rgba(243,178,62,.10), transparent 22%),
        linear-gradient(180deg, #f9fbfc 0%, var(--bg) 100%);
      overflow-x: hidden;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    body::before{
      content:"";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(20,35,44,.03) 1px, transparent 1px),
        linear-gradient(180deg, rgba(20,35,44,.03) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.18), transparent 65%);
      opacity: .25;
      z-index: 0;
    }
    img{ max-width: 100%; display: block; }
    a{
      color: inherit;
      text-decoration: none;
      transition: var(--transition);
    }
    a:hover{ color: var(--brand); }
    button, input, select, textarea{
      font: inherit;
    }
    ::selection{
      background: rgba(20,200,176,.20);
      color: #071015;
    }
    :focus-visible{
      outline: 3px solid rgba(20,200,176,.30);
      outline-offset: 3px;
      border-radius: 10px;
    }

    .container{
      position: relative;
      z-index: 1;
      max-width: var(--container);
      padding-left: 20px;
      padding-right: 20px;
    }

    .site-header{
      position: sticky;
      top: 0;
      z-index: 1030;
      background: rgba(246, 249, 250, .78);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(20, 35, 44, .08);
      box-shadow: 0 8px 28px rgba(12, 24, 30, .04);
    }
    .header-inner{
      padding: 14px 0 12px;
    }
    .brand-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }
    .brand{
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: .2px;
      color: var(--text-strong);
      min-height: 44px;
    }
    .brand .mark{
      width: 44px;
      height: 44px;
      border-radius: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #041015;
      background:
        radial-gradient(circle at 28% 28%, rgba(255,255,255,.82), transparent 34%),
        linear-gradient(145deg, var(--brand) 0%, #55f0d0 100%);
      box-shadow: 0 14px 28px rgba(20,200,176,.24);
      position: relative;
      overflow: hidden;
      flex: 0 0 auto;
    }
    .brand .mark::after{
      content:"";
      position: absolute;
      inset: 9px;
      border-radius: 11px;
      border: 1px solid rgba(255,255,255,.42);
    }
    .brand .name{
      font-size: 1.05rem;
      line-height: 1.15;
      white-space: nowrap;
    }
    .brand .sub{
      display: block;
      font-weight: 600;
      color: var(--muted);
      font-size: .78rem;
      margin-top: 2px;
      letter-spacing: .12px;
    }

    .header-search{
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1 1 420px;
      max-width: 540px;
      margin-left: auto;
    }
    .header-search .search-box{
      position: relative;
      flex: 1;
    }
    .header-search .search-box i{
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #7b8a94;
      font-size: .95rem;
    }
    .header-search input{
      width: 100%;
      min-height: 46px;
      border: 1px solid rgba(20, 35, 44, .11);
      background: rgba(255,255,255,.9);
      border-radius: 999px;
      padding: 12px 16px 12px 42px;
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
      transition: var(--transition);
    }
    .header-search input::placeholder{ color: #92a0aa; }
    .header-search input:focus{
      border-color: rgba(20,200,176,.38);
      box-shadow: 0 0 0 .25rem rgba(20,200,176,.14);
      outline: none;
      background: #fff;
    }

    .icon-nav{
      display: flex;
      gap: 10px;
      margin-top: 14px;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: none;
    }
    .icon-nav::-webkit-scrollbar{ display: none; }
    .nav-pill{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 46px;
      padding: 11px 16px;
      border: 1px solid rgba(20, 35, 44, .10);
      border-radius: 999px;
      background: rgba(255,255,255,.82);
      color: #314049;
      box-shadow: 0 8px 24px rgba(12, 24, 30, .04);
      white-space: nowrap;
      flex: 0 0 auto;
    }
    .nav-pill i{
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .85rem;
      color: var(--brand);
      background: var(--brand-soft);
    }
    .nav-pill:hover{
      transform: translateY(-1px);
      border-color: rgba(20,200,176,.26);
      box-shadow: 0 14px 30px rgba(12, 24, 30, .08);
      color: var(--text-strong);
    }
    .nav-pill.active{
      color: #05211d;
      background: linear-gradient(145deg, rgba(20,200,176,.16), rgba(20,200,176,.08));
      border-color: rgba(20,200,176,.28);
    }

    .hero{
      position: relative;
      padding: 34px 0 26px;
    }
    .hero-shell{
      border-radius: 30px;
      overflow: hidden;
      background:
        radial-gradient(circle at 14% 16%, rgba(255,255,255,.12), transparent 24%),
        radial-gradient(circle at 82% 22%, rgba(243,178,62,.16), transparent 20%),
        linear-gradient(140deg, #0b1217 0%, #121d23 50%, #17252e 100%);
      color: #edf4f6;
      box-shadow: 0 24px 70px rgba(10, 18, 24, .22);
      position: relative;
    }
    .hero-shell::before{
      content:"";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(110deg, rgba(255,255,255,.06), transparent 22%),
        radial-gradient(circle at 60% 10%, rgba(20,200,176,.22), transparent 26%);
      pointer-events: none;
    }
    .hero-grid{
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 28px;
      align-items: center;
      padding: 32px;
    }
    .hero-copy{
      position: relative;
      z-index: 1;
      padding: 10px 6px 10px 0;
    }
    .eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      color: #c7dde2;
      font-size: .92rem;
      margin-bottom: 16px;
    }
    .eyebrow::before{
      content:"";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 6px rgba(243,178,62,.12);
    }
    .hero h1{
      margin: 0;
      font-size: clamp(2.4rem, 4vw, 4.6rem);
      line-height: 1.06;
      letter-spacing: -0.8px;
      color: #f5fbfd;
      font-weight: 900;
      text-wrap: balance;
    }
    .hero-lead{
      max-width: 660px;
      margin: 18px 0 0;
      color: #cfe0e5;
      font-size: 1.06rem;
      line-height: 1.86;
    }
    .hero-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
    }
    .btn{
      min-height: 48px;
      border-radius: 999px;
      padding: 12px 18px;
      font-weight: 700;
      transition: var(--transition);
      border: 1px solid transparent;
      box-shadow: none !important;
    }
    .btn-brand{
      background: linear-gradient(145deg, var(--brand) 0%, var(--brand-2) 100%);
      color: #051216;
      border-color: rgba(255,255,255,.05);
      box-shadow: 0 16px 32px rgba(20,200,176,.22);
    }
    .btn-brand:hover{
      transform: translateY(-2px);
      filter: brightness(1.05);
      color: #041012;
      box-shadow: 0 18px 38px rgba(20,200,176,.28);
    }
    .btn-brand:active{
      transform: translateY(1px);
    }
    .btn-outline-brand{
      border-color: rgba(255,255,255,.22);
      color: #f4fbfc;
      background: rgba(255,255,255,.03);
    }
    .btn-outline-brand:hover{
      color: #031214;
      background: #e8fffb;
      border-color: #d7fff7;
      transform: translateY(-2px);
    }
    .btn-ghost{
      color: #f2fafb;
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.12);
    }
    .btn-ghost:hover{
      background: rgba(255,255,255,.1);
      color: #fff;
      transform: translateY(-2px);
    }

    .hero-points{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }
    .mini-chip{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      color: #d7e6ea;
      border: 1px solid rgba(255,255,255,.1);
      font-size: .92rem;
    }
    .mini-chip strong{
      color: #fff;
      font-weight: 800;
    }

    .hero-stage{
      position: relative;
      z-index: 1;
      min-height: 440px;
      display: grid;
      align-items: center;
      padding-left: 8px;
    }
    .poster-grid{
      display: grid;
      grid-template-columns: 1.15fr .9fr;
      gap: 14px;
      align-items: stretch;
    }
    .poster-main{
      position: relative;
      border-radius: 26px;
      overflow: hidden;
      min-height: 420px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 18%),
        radial-gradient(circle at 25% 20%, rgba(20,200,176,.22), transparent 26%),
        radial-gradient(circle at 80% 14%, rgba(243,178,62,.20), transparent 18%),
        linear-gradient(160deg, #1d2931 0%, #111b21 44%, #0e151a 100%);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 52px rgba(6, 10, 14, .25);
      padding: 22px;
    }
    .poster-main::before{
      content:"";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(115deg, rgba(255,255,255,.06), transparent 20%, transparent 78%, rgba(255,255,255,.04));
      pointer-events: none;
    }
    .poster-label{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(20,200,176,.13);
      color: #dffef7;
      border: 1px solid rgba(20,200,176,.25);
      font-weight: 700;
      letter-spacing: .12px;
      position: relative;
      z-index: 1;
    }
    .poster-title{
      position: relative;
      z-index: 1;
      margin-top: 16px;
      font-size: 2rem;
      line-height: 1.12;
      font-weight: 900;
      color: #f7fbfc;
      max-width: 10ch;
    }
    .poster-desc{
      position: relative;
      z-index: 1;
      margin-top: 12px;
      color: #bfd0d5;
      max-width: 28ch;
      line-height: 1.75;
    }
    .poster-cta{
      position: relative;
      z-index: 1;
      margin-top: 20px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 46px;
      padding: 12px 16px;
      border-radius: 999px;
      background: linear-gradient(145deg, var(--accent) 0%, #ffd36d 100%);
      color: #241800;
      font-weight: 800;
      box-shadow: 0 14px 28px rgba(243,178,62,.18);
    }
    .poster-cta:hover{
      transform: translateY(-2px);
      color: #201600;
    }
    .poster-notes{
      position: absolute;
      right: 18px;
      bottom: 18px;
      display: grid;
      gap: 10px;
      width: min(210px, 46%);
      z-index: 1;
    }
    .poster-note{
      padding: 12px 14px;
      border-radius: 18px;
      background: rgba(10, 16, 21, .62);
      border: 1px solid rgba(255,255,255,.10);
      color: #e8f3f5;
      backdrop-filter: blur(12px);
      box-shadow: 0 14px 26px rgba(0,0,0,.16);
    }
    .poster-note strong{
      display: block;
      font-size: 1.14rem;
      margin-bottom: 3px;
      color: #fff;
    }
    .poster-side{
      display: grid;
      gap: 14px;
    }
    .poster-side-card{
      border-radius: 22px;
      min-height: 126px;
      padding: 18px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      color: #eef7f8;
      position: relative;
      overflow: hidden;
    }
    .poster-side-card::after{
      content:"";
      position: absolute;
      right: -12px;
      top: -12px;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(20,200,176,.22), transparent 62%);
    }
    .poster-side-card .ico{
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      color: #0d1d19;
      background: linear-gradient(145deg, var(--brand) 0%, #7ff8e0 100%);
      box-shadow: 0 14px 24px rgba(20,200,176,.18);
    }
    .poster-side-card h3{
      margin: 0;
      font-size: 1.03rem;
      font-weight: 800;
    }
    .poster-side-card p{
      margin: 8px 0 0;
      color: #c8d8dd;
      line-height: 1.68;
      font-size: .96rem;
      position: relative;
      z-index: 1;
    }

    .section{
      padding: 30px 0;
      scroll-margin-top: 110px;
      position: relative;
      z-index: 1;
    }
    .section .section-shell{
      border-radius: 28px;
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(20,35,44,.08);
      box-shadow: var(--shadow);
      padding: 28px;
    }
    .section-head{
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
      flex-wrap: wrap;
    }
    .section-kicker{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand);
      font-weight: 800;
      font-size: .92rem;
      letter-spacing: .12px;
      margin-bottom: 10px;
    }
    .section-kicker::before{
      content:"";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 0 0 6px rgba(20,200,176,.12);
    }
    .section-title{
      margin: 0;
      font-size: clamp(1.4rem, 2vw, 2rem);
      line-height: 1.16;
      font-weight: 900;
      color: var(--text-strong);
    }
    .section-desc{
      max-width: 760px;
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.82;
      font-size: 1rem;
    }

    .metrics-grid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    .metric-card{
      padding: 18px;
      border-radius: 22px;
      background: linear-gradient(180deg, #fff 0%, #f8fbfc 100%);
      border: 1px solid rgba(20,35,44,.08);
      box-shadow: 0 14px 30px rgba(12, 24, 30, .05);
      transition: var(--transition);
      min-height: 150px;
    }
    .metric-card:hover{
      transform: translateY(-2px);
      box-shadow: 0 20px 34px rgba(12, 24, 30, .08);
      border-color: rgba(20,200,176,.20);
    }
    .metric-icon{
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--brand-soft);
      color: var(--brand);
      font-size: 1.02rem;
      margin-bottom: 14px;
    }
    .metric-value{
      font-size: 2rem;
      font-weight: 900;
      line-height: 1;
      color: var(--text-strong);
      letter-spacing: -.6px;
    }
    .metric-label{
      margin-top: 8px;
      font-weight: 800;
      color: #22303a;
    }
    .metric-note{
      margin-top: 8px;
      color: var(--muted);
      line-height: 1.65;
      font-size: .95rem;
    }

    .matrix-grid{
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 16px;
      align-items: stretch;
    }
    .matrix-feature{
      position: relative;
      border-radius: 26px;
      padding: 24px;
      background:
        radial-gradient(circle at 16% 18%, rgba(20,200,176,.14), transparent 26%),
        radial-gradient(circle at 84% 20%, rgba(243,178,62,.14), transparent 22%),
        linear-gradient(160deg, #122026 0%, #0f171c 100%);
      color: #eff7f8;
      border: 1px solid rgba(255,255,255,.08);
      overflow: hidden;
      min-height: 100%;
      box-shadow: 0 18px 36px rgba(10, 18, 24, .16);
    }
    .matrix-feature .badge-soft{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(20,200,176,.14);
      color: #dffcf6;
      border: 1px solid rgba(20,200,176,.22);
      font-weight: 700;
    }
    .matrix-feature h3{
      margin: 16px 0 0;
      font-size: 1.7rem;
      line-height: 1.14;
      font-weight: 900;
      max-width: 14ch;
    }
    .matrix-feature p{
      margin: 12px 0 0;
      color: #bfd2d7;
      max-width: 34ch;
    }
    .matrix-feeds{
      display: grid;
      gap: 16px;
    }
    .feed-card{
      border-radius: 22px;
      background: var(--surface-strong);
      border: 1px solid rgba(20,35,44,.08);
      box-shadow: 0 14px 28px rgba(12, 24, 30, .05);
      padding: 18px;
      transition: var(--transition);
      min-height: 146px;
    }
    .feed-card:hover{
      transform: translateY(-2px);
      border-color: rgba(20,200,176,.18);
      box-shadow: 0 20px 34px rgba(12, 24, 30, .08);
    }
    .feed-card .ico{
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-soft);
      color: #ab7300;
      margin-bottom: 12px;
    }
    .feed-card h4{
      margin: 0;
      font-size: 1.02rem;
      font-weight: 850;
      color: var(--text-strong);
    }
    .feed-card p{
      margin: 8px 0 0;
      color: var(--muted);
      line-height: 1.65;
      font-size: .96rem;
    }

    .comparison-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px;
    }
    .compare-card{
      border-radius: 22px;
      background: linear-gradient(180deg, #fff 0%, #f8fbfc 100%);
      border: 1px solid rgba(20,35,44,.08);
      padding: 20px;
      box-shadow: 0 14px 28px rgba(12, 24, 30, .05);
      min-height: 100%;
    }
    .compare-card .topline{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
    }
    .compare-card h3{
      margin: 0;
      font-size: 1.06rem;
      font-weight: 900;
      color: var(--text-strong);
    }
    .compare-card .tag{
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--brand-soft);
      color: #116d61;
      font-size: .82rem;
      font-weight: 800;
      white-space: nowrap;
    }
    .compare-list{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .compare-list li{
      position: relative;
      padding-left: 24px;
      margin-top: 10px;
      color: #31424d;
      line-height: 1.68;
    }
    .compare-list li::before{
      content:"";
      position: absolute;
      left: 0;
      top: .55em;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--brand) 0%, var(--accent) 100%);
      box-shadow: 0 0 0 4px rgba(20,200,176,.10);
    }
    .compare-card .note{
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px dashed rgba(20,35,44,.14);
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.72;
    }

    .latest-grid{
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 16px;
      align-items: start;
    }
    .news-list{
      display: grid;
      gap: 14px;
    }
    .news-card{
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: 16px;
      padding: 16px;
      border-radius: 22px;
      background: var(--surface-strong);
      border: 1px solid rgba(20,35,44,.08);
      box-shadow: 0 14px 28px rgba(12, 24, 30, .05);
      transition: var(--transition);
      min-height: 176px;
    }
    .news-card:hover{
      transform: translateY(-2px);
      border-color: rgba(20,200,176,.20);
      box-shadow: 0 20px 34px rgba(12, 24, 30, .08);
    }
    .news-cover{
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      min-height: 142px;
      background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,.20), transparent 18%),
        radial-gradient(circle at 75% 32%, rgba(243,178,62,.24), transparent 20%),
        linear-gradient(160deg, #14252d 0%, #0d1419 100%);
      border: 1px solid rgba(20,35,44,.10);
      display: flex;
      align-items: flex-end;
      padding: 14px;
      color: #f5fbfc;
    }
    .news-cover::before{
      content:"";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(145deg, transparent 0%, rgba(255,255,255,.06) 28%, transparent 56%),
        radial-gradient(circle at 70% 20%, rgba(20,200,176,.20), transparent 24%);
      pointer-events: none;
    }
    .news-cover .cover-badge{
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(20,200,176,.13);
      border: 1px solid rgba(20,200,176,.20);
      color: #dffef7;
      font-size: .82rem;
      font-weight: 800;
    }
    .news-body{
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .news-meta{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--muted);
      font-size: .9rem;
      align-items: center;
    }
    .meta-pill{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      padding: 5px 10px;
      border-radius: 999px;
      background: #f2f6f7;
      border: 1px solid rgba(20,35,44,.08);
      color: #60717b;
      font-weight: 700;
    }
    .news-title{
      margin: 0;
      font-size: 1.08rem;
      font-weight: 900;
      line-height: 1.4;
      color: var(--text-strong);
    }
    .news-title a:hover{ color: var(--brand); }
    .news-summary{
      margin: 0;
      color: var(--muted);
      line-height: 1.8;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 58px;
    }
    .news-action{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #0d655b;
      font-weight: 800;
      margin-top: auto;
    }
    .news-action i{
      transition: var(--transition);
    }
    .news-card:hover .news-action i{
      transform: translateX(2px);
    }

    .news-side{
      display: grid;
      gap: 14px;
      position: sticky;
      top: calc(var(--header-h) + 20px);
    }
    .side-card{
      border-radius: 22px;
      padding: 18px;
      background: linear-gradient(180deg, #fff 0%, #f7fbfc 100%);
      border: 1px solid rgba(20,35,44,.08);
      box-shadow: 0 14px 28px rgba(12, 24, 30, .05);
    }
    .side-card.dark{
      background: linear-gradient(160deg, #0f171d 0%, #132029 100%);
      color: #edf6f8;
      border-color: rgba(255,255,255,.08);
    }
    .side-card h4{
      margin: 0;
      font-size: 1.02rem;
      font-weight: 900;
    }
    .side-card p{
      margin: 10px 0 0;
      line-height: 1.7;
      color: inherit;
      opacity: .92;
    }
    .quick-links{
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }
    .quick-link{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 46px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(20,35,44,.08);
      background: #fff;
      color: #23313a;
      font-weight: 700;
    }
    .quick-link i{
      color: var(--brand);
    }
    .quick-link:hover{
      transform: translateY(-1px);
      border-color: rgba(20,200,176,.20);
      box-shadow: 0 10px 18px rgba(12, 24, 30, .05);
    }

    .feedback-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .quote-card{
      border-radius: 22px;
      padding: 20px;
      background: linear-gradient(180deg, #fff 0%, #f7fbfc 100%);
      border: 1px solid rgba(20,35,44,.08);
      box-shadow: 0 14px 28px rgba(12, 24, 30, .05);
      min-height: 100%;
    }
    .quote-card .avatar{
      width: 46px;
      height: 46px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, rgba(20,200,176,.14), rgba(20,200,176,.06));
      color: #10695d;
      font-weight: 900;
      margin-bottom: 14px;
    }
    .quote-card p{
      margin: 0;
      color: #2f3d46;
      line-height: 1.8;
    }
    .quote-card .who{
      margin-top: 14px;
      color: var(--muted);
      font-size: .92rem;
      font-weight: 700;
    }

    .topics-grid{
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 16px;
      align-items: start;
    }
    .topic-cloud{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .topic-pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 10px 14px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid rgba(20,35,44,.08);
      color: #28404a;
      font-weight: 700;
      box-shadow: 0 10px 18px rgba(12, 24, 30, .04);
      transition: var(--transition);
    }
    .topic-pill:hover{
      transform: translateY(-2px);
      border-color: rgba(20,200,176,.22);
      box-shadow: 0 16px 26px rgba(12, 24, 30, .08);
      color: #0b5f54;
    }
    .topic-pill strong{
      color: var(--brand);
    }
    .topic-feature{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .topic-box{
      border-radius: 22px;
      padding: 18px;
      background: linear-gradient(180deg, #fff 0%, #f7fbfc 100%);
      border: 1px solid rgba(20,35,44,.08);
      box-shadow: 0 14px 28px rgba(12, 24, 30, .05);
      min-height: 170px;
    }
    .topic-box .tag{
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 800;
      background: var(--accent-soft);
      color: #8d5b00;
    }
    .topic-box h3{
      margin: 12px 0 0;
      font-size: 1.08rem;
      font-weight: 900;
      color: var(--text-strong);
    }
    .topic-box p{
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.72;
    }
    .topic-box .entry{
      margin-top: 16px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #0d655b;
      font-weight: 800;
    }

    .steps-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .step-card{
      border-radius: 22px;
      padding: 20px;
      background: linear-gradient(180deg, #fff 0%, #f8fbfc 100%);
      border: 1px solid rgba(20,35,44,.08);
      box-shadow: 0 14px 28px rgba(12, 24, 30, .05);
      position: relative;
      overflow: hidden;
    }
    .step-card::after{
      content:"";
      position: absolute;
      right: -20px;
      top: -20px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(20,200,176,.10), transparent 70%);
    }
    .step-num{
      width: 46px;
      height: 46px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, rgba(20,200,176,.16), rgba(243,178,62,.12));
      color: #0e6d62;
      font-weight: 900;
      font-size: 1.05rem;
      margin-bottom: 14px;
    }
    .step-card h3{
      margin: 0;
      font-size: 1.06rem;
      font-weight: 900;
      color: var(--text-strong);
    }
    .step-card p{
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.76;
    }

    .faq-section .section-shell{
      background: linear-gradient(180deg, #fbfdfd 0%, #f6fafb 100%);
    }
    .faq-accordion .accordion-item{
      border: 1px solid rgba(20,35,44,.09);
      border-radius: 18px !important;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 12px 24px rgba(12, 24, 30, .04);
      margin-bottom: 12px;
    }
    .faq-accordion .accordion-button{
      padding: 18px 18px;
      border: 0;
      box-shadow: none !important;
      background: #fff;
      color: var(--text-strong);
      font-weight: 800;
      font-size: 1rem;
    }
    .faq-accordion .accordion-button:not(.collapsed){
      color: #075e55;
      background: linear-gradient(180deg, rgba(20,200,176,.10), rgba(20,200,176,.04));
    }
    .faq-accordion .accordion-button::after{
      background-size: 1rem;
      filter: saturate(0.65);
    }
    .faq-accordion .accordion-body{
      padding: 0 18px 18px;
      color: var(--muted);
      line-height: 1.82;
    }

    .contact-grid{
      display: grid;
      grid-template-columns: 1fr .72fr;
      gap: 16px;
      align-items: stretch;
    }
    .contact-card{
      border-radius: 24px;
      background: linear-gradient(160deg, #0f181d 0%, #152229 100%);
      color: #eff8f9;
      padding: 24px;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 18px 40px rgba(10, 18, 24, .16);
    }
    .contact-card h3{
      margin: 0;
      font-size: 1.28rem;
      font-weight: 900;
    }
    .contact-card p{
      margin: 10px 0 0;
      color: #c7d8dd;
      line-height: 1.78;
    }
    .contact-form{
      margin-top: 18px;
    }
    .field{
      margin-bottom: 14px;
    }
    .form-label{
      display: block;
      margin: 0 0 8px;
      font-weight: 800;
      color: #e8f3f5;
    }
    .form-control,
    .form-select{
      min-height: 48px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      color: #f7fbfc;
      box-shadow: none !important;
    }
    .form-control::placeholder{
      color: rgba(234,245,247,.58);
    }
    .form-control:focus,
    .form-select:focus{
      background: rgba(255,255,255,.08);
      color: #fff;
      border-color: rgba(20,200,176,.50);
      box-shadow: 0 0 0 .25rem rgba(20,200,176,.12) !important;
    }
    .form-select option{
      color: #12222a;
    }
    .contact-note{
      border-radius: 22px;
      background: linear-gradient(180deg, #fff 0%, #f8fbfc 100%);
      border: 1px solid rgba(20,35,44,.08);
      box-shadow: 0 14px 28px rgba(12, 24, 30, .05);
      padding: 22px;
      color: var(--text);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 18px;
    }
    .contact-note .badge-line{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--brand-soft);
      color: #0d655b;
      width: fit-content;
      font-weight: 800;
    }
    .contact-note ul{
      padding-left: 18px;
      margin: 0;
      color: #324049;
    }
    .contact-note li{ margin-top: 8px; line-height: 1.72; }
    .contact-result{
      display: none;
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(20,200,176,.12);
      border: 1px solid rgba(20,200,176,.18);
      color: #d9fff7;
    }
    .contact-result.show{
      display: block;
    }

    .site-footer{
      margin-top: 18px;
      padding: 26px 0 36px;
    }
    .footer-shell{
      border-radius: 28px;
      background: #0e161b;
      color: #e8f3f5;
      border: 1px solid rgba(255,255,255,.08);
      padding: 24px;
      box-shadow: 0 18px 40px rgba(10, 18, 24, .16);
    }
    .footer-top{
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
      align-items: start;
    }
    .footer-brand{
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
      font-size: 1.06rem;
      color: #fff;
    }
    .footer-brand .mark{
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, var(--brand) 0%, #76f1d7 100%);
      color: #071015;
      box-shadow: 0 14px 24px rgba(20,200,176,.18);
    }
    .footer-text{
      margin: 12px 0 0;
      color: #b7c9cf;
      line-height: 1.82;
      max-width: 54ch;
    }
    .footer-links{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }
    .footer-links a{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 10px 14px;
      border-radius: 999px;
      color: #ecf7f8;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
    }
    .footer-links a:hover{
      background: rgba(20,200,176,.12);
      border-color: rgba(20,200,176,.20);
      color: #fff;
    }
    .footer-bottom{
      display: flex;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.08);
      color: #a9bcc2;
      font-size: .92rem;
    }

    .empty-state{
      display: grid;
      place-items: center;
      min-height: 280px;
      text-align: center;
      border-radius: 24px;
      border: 1px dashed rgba(20,35,44,.14);
      background: linear-gradient(180deg, #fff 0%, #f8fbfc 100%);
      color: var(--muted);
      padding: 28px;
    }
    .empty-state .icon{
      width: 72px;
      height: 72px;
      border-radius: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--brand-soft);
      color: var(--brand);
      font-size: 1.8rem;
      margin-bottom: 16px;
    }
    .empty-state p{
      margin: 0;
      font-size: 1.02rem;
      color: #44545e;
      font-weight: 700;
    }

    .chip-row{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }
    .tag-chip{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 12px;
      border-radius: 999px;
      background: #fff;
      color: #31505a;
      border: 1px solid rgba(20,35,44,.08);
      box-shadow: 0 10px 18px rgba(12, 24, 30, .04);
      font-weight: 700;
      font-size: .92rem;
    }
    .tag-chip strong{
      color: var(--brand);
    }

    .content-link{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #0d655b;
      font-weight: 800;
    }

    @media (max-width: 1200px){
      .hero-grid,
      .matrix-grid,
      .latest-grid,
      .topics-grid,
      .contact-grid,
      .footer-top{
        grid-template-columns: 1fr;
      }
      .poster-grid{
        grid-template-columns: 1fr 1fr;
      }
      .news-side{
        position: static;
      }
      .footer-links{
        justify-content: flex-start;
      }
    }

    @media (max-width: 992px){
      :root{ --header-h: 108px; }
      .metrics-grid,
      .comparison-grid,
      .feedback-grid,
      .steps-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .topic-feature{
        grid-template-columns: 1fr;
      }
      .news-card{
        grid-template-columns: 1fr;
      }
      .news-cover{
        min-height: 160px;
      }
      .hero-grid{
        padding: 24px;
      }
      .hero-stage{
        min-height: auto;
        padding-left: 0;
      }
      .poster-main{
        min-height: 360px;
      }
    }

    @media (max-width: 768px){
      :root{ --header-h: 122px; }
      .brand-row{
        align-items: flex-start;
      }
      .header-search{
        order: 3;
        width: 100%;
        max-width: none;
        margin-left: 0;
      }
      .hero{
        padding-top: 22px;
      }
      .hero-shell{
        border-radius: 24px;
      }
      .hero-grid,
      .section .section-shell{
        padding: 20px;
      }
      .hero h1{
        font-size: clamp(2rem, 9vw, 3rem);
      }
      .hero-lead{
        font-size: 1rem;
      }
      .poster-grid{
        grid-template-columns: 1fr;
      }
      .poster-main{
        min-height: 320px;
      }
      .metrics-grid,
      .comparison-grid,
      .feedback-grid,
      .steps-grid{
        grid-template-columns: 1fr;
      }
      .section{
        padding: 22px 0;
      }
      .site-footer{
        padding-bottom: 20px;
      }
    }

    @media (max-width: 576px){
      .container{ padding-left: 16px; padding-right: 16px; }
      .brand .name{ font-size: .98rem; }
      .brand .sub{ display: none; }
      .icon-nav{
        gap: 8px;
      }
      .nav-pill{
        padding: 10px 13px;
        font-size: .92rem;
      }
      .hero-copy{
        padding-right: 0;
      }
      .hero-actions .btn{
        width: 100%;
        justify-content: center;
      }
      .poster-main{
        min-height: 286px;
        padding: 18px;
      }
      .poster-title{
        font-size: 1.56rem;
      }
      .poster-desc{
        max-width: none;
        font-size: .95rem;
      }
      .poster-notes{
        width: calc(100% - 36px);
        right: 18px;
      }
      .section .section-shell{
        border-radius: 24px;
      }
      .news-card{
        padding: 14px;
      }
      .contact-note,
      .contact-card{
        padding: 18px;
      }
    }

    @media (max-width: 420px){
      .header-search input{
        font-size: .95rem;
      }
      .nav-pill{
        min-height: 42px;
      }
      .hero-shell{
        border-radius: 22px;
      }
      .poster-main{
        min-height: 280px;
      }
      .poster-notes{
        width: calc(100% - 32px);
        right: 16px;
        bottom: 16px;
      }
    }

/* roulang page: article */
:root{
  --bg: #eef3f4;
  --bg-soft: #f7fafb;
  --surface: rgba(255,255,255,.82);
  --surface-strong: #ffffff;
  --surface-dark: #10161b;
  --surface-dark-2: #162029;
  --text: #152028;
  --text-strong: #081016;
  --muted: #6d7b86;
  --line: rgba(20, 35, 44, .10);
  --line-strong: rgba(20, 35, 44, .18);
  --brand: #14c8b0;
  --brand-2: #2ce7c0;
  --brand-soft: rgba(20, 200, 176, .12);
  --accent: #f3b23e;
  --accent-soft: rgba(243, 178, 62, .14);
  --danger: #ef6b62;
  --shadow: 0 18px 42px rgba(12, 24, 30, .08);
  --shadow-strong: 0 22px 52px rgba(12, 24, 30, .16);
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 14px;
  --container: 1320px;
  --transition: all .22s ease;
  --header-h: 122px;
  --radius-xl: 30px;
}

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

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  color: var(--text);
  font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height: 1.78;
  background:
    radial-gradient(circle at 20% 0%, rgba(20,200,176,.12), transparent 28%),
    radial-gradient(circle at 100% 10%, rgba(243,178,62,.10), transparent 22%),
    linear-gradient(180deg, #f9fbfc 0%, var(--bg) 100%);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20,35,44,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(20,35,44,.03) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.18), transparent 65%);
  opacity: .25;
  z-index: 0;
}

::selection{
  background: rgba(20,200,176,.18);
  color: var(--text-strong);
}

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

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

a:hover{
  color: var(--brand);
}

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

button{
  cursor: pointer;
}

p{
  margin: 0;
}

.container{
  position: relative;
  z-index: 1;
  max-width: var(--container);
  padding-left: 20px;
  padding-right: 20px;
}

.btn{
  min-height: 46px;
  border-radius: 999px;
  font-weight: 700;
  padding: .74rem 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
  border: 1px solid transparent;
  box-shadow: none !important;
}

.btn:focus,
.btn:focus-visible,
input:focus,
select:focus,
textarea:focus,
a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(20,200,176,.16) !important;
}

.btn-brand{
  background: linear-gradient(145deg, var(--brand), var(--brand-2));
  color: #041015;
  border-color: rgba(20,200,176,.35);
  box-shadow: 0 14px 28px rgba(20,200,176,.24);
}

.btn-brand:hover{
  color: #041015;
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(20,200,176,.30);
}

.btn-brand:active{
  transform: translateY(1px);
}

.btn-ghost{
  background: rgba(255,255,255,.72);
  color: var(--text-strong);
  border-color: rgba(20,35,44,.10);
}

.btn-ghost:hover{
  background: #fff;
  color: var(--text-strong);
  border-color: rgba(20,200,176,.24);
  transform: translateY(-1px);
}

.btn-outline-brand{
  background: transparent;
  color: var(--brand);
  border-color: rgba(20,200,176,.28);
}

.btn-outline-brand:hover{
  color: var(--text-strong);
  background: rgba(20,200,176,.08);
  border-color: rgba(20,200,176,.34);
  transform: translateY(-1px);
}

.soft-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20,200,176,.16);
  background: var(--brand-soft);
  color: #0e4d43;
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
}

.soft-badge.alt{
  background: var(--accent-soft);
  border-color: rgba(243,178,62,.20);
  color: #7a5306;
}

.soft-badge.dark{
  background: rgba(16,22,27,.08);
  border-color: rgba(20,35,44,.10);
  color: var(--text-strong);
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(246, 249, 250, .78);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(20, 35, 44, .08);
  box-shadow: 0 8px 28px rgba(12, 24, 30, .04);
}

.header-inner{
  padding: 14px 0 12px;
}

.brand-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text-strong);
  min-height: 44px;
}

.brand .mark{
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #041015;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.82), transparent 34%),
    linear-gradient(145deg, var(--brand) 0%, #55f0d0 100%);
  box-shadow: 0 14px 28px rgba(20,200,176,.24);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}

.brand .mark::after{
  content:"";
  position: absolute;
  inset: 9px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.42);
}

.brand .name{
  font-size: 1.05rem;
  line-height: 1.15;
  white-space: nowrap;
}

.brand .sub{
  display: block;
  font-weight: 600;
  color: var(--muted);
  font-size: .78rem;
  margin-top: 2px;
  letter-spacing: .12px;
}

.header-search{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 420px;
  max-width: 540px;
  margin-left: auto;
}

.header-search .search-box{
  position: relative;
  flex: 1;
}

.header-search .search-box i{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #7b8a94;
  font-size: .95rem;
}

.header-search input{
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(20, 35, 44, .11);
  background: rgba(255,255,255,.9);
  border-radius: 999px;
  padding: 12px 16px 12px 42px;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  transition: var(--transition);
}

.header-search input::placeholder{
  color: #92a0aa;
}

.header-search input:focus{
  border-color: rgba(20,200,176,.38);
  box-shadow: 0 0 0 .25rem rgba(20,200,176,.14);
  outline: none;
  background: #fff;
}

.icon-nav{
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.icon-nav::-webkit-scrollbar{
  display: none;
}

.nav-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid rgba(20, 35, 44, .10);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #314049;
  box-shadow: 0 8px 24px rgba(12, 24, 30, .04);
  white-space: nowrap;
  flex: 0 0 auto;
}

.nav-pill i{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--brand);
  background: var(--brand-soft);
}

.nav-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(20,200,176,.26);
  box-shadow: 0 14px 30px rgba(12, 24, 30, .08);
  color: var(--text-strong);
}

.nav-pill.active{
  color: #05211d;
  background: linear-gradient(145deg, rgba(20,200,176,.16), rgba(20,200,176,.08));
  border-color: rgba(20,200,176,.28);
}

.nav-pill.active i{
  color: #0c6f61;
}

.article-page{
  position: relative;
  z-index: 1;
  padding: 24px 0 56px;
}

.article-hero{
  padding: 6px 0 6px;
}

.hero-panel{
  border: 1px solid rgba(20, 35, 44, .09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  backdrop-filter: blur(16px);
  border-radius: 30px;
  padding: 28px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(280px,.9fr);
  gap: 24px;
}

.hero-copy{
  min-width: 0;
}

.hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: #0e4d43;
  border: 1px solid rgba(20,200,176,.16);
  font-size: .86rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.hero-title{
  font-size: clamp(2rem, 3.3vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--text-strong);
  margin: 0;
}

.hero-lead{
  margin-top: 16px;
  font-size: 1.03rem;
  line-height: 1.85;
  color: #52626d;
  max-width: 60ch;
}

.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.hero-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.meta-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20,35,44,.10);
  background: rgba(255,255,255,.78);
  color: #314049;
  box-shadow: 0 8px 18px rgba(12,24,30,.04);
  font-size: .88rem;
  font-weight: 600;
}

.hero-side{
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(20,200,176,.18), transparent 30%),
    linear-gradient(180deg, #121b22 0%, #10161b 100%);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 22px;
  box-shadow: 0 18px 40px rgba(10, 16, 22, .22);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-side .side-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(20,200,176,.16);
  border: 1px solid rgba(20,200,176,.24);
  color: #c8fff4;
  font-size: .84rem;
  font-weight: 700;
}

.hero-side h2{
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: #fff;
}

.hero-side p{
  color: rgba(255,255,255,.74);
  line-height: 1.8;
  margin: 0;
}

.hero-side-list{
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.hero-side-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.hero-side-item i{
  color: var(--brand-2);
  margin-top: 2px;
}

.hero-side-item span{
  color: rgba(255,255,255,.86);
  line-height: 1.6;
  font-size: .95rem;
}

.detail-section{
  padding: 26px 0 0;
}

.section-heading{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.section-heading .left{
  min-width: 0;
}

.section-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(20,35,44,.10);
  color: #314049;
  font-size: .84rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-heading h2{
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.2;
  color: var(--text-strong);
  letter-spacing: -.01em;
}

.section-heading .section-note{
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
}

.stats-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}

.stat-card{
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(20,35,44,.09);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  transition: var(--transition);
}

.stat-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

.stat-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.stat-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: var(--brand-soft);
}

.stat-num{
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-strong);
}

.stat-label{
  margin-top: 10px;
  font-size: .98rem;
  font-weight: 700;
  color: var(--text-strong);
}

.stat-note{
  margin-top: 6px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.7;
}

.matrix-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}

.matrix-card{
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(20,35,44,.09);
  box-shadow: var(--shadow);
  padding: 18px;
  transition: var(--transition);
  min-height: 168px;
}

.matrix-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

.matrix-card.featured{
  grid-column: span 2;
  background:
    radial-gradient(circle at 0% 0%, rgba(20,200,176,.12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
}

.matrix-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.matrix-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0c4e44;
  background: linear-gradient(145deg, rgba(20,200,176,.18), rgba(20,200,176,.10));
  border: 1px solid rgba(20,200,176,.18);
  flex: 0 0 auto;
}

.matrix-card h3{
  margin: 0;
  color: var(--text-strong);
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 800;
}

.matrix-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.78;
  font-size: .94rem;
}

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

.matrix-list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  line-height: 1.65;
  font-size: .94rem;
}

.matrix-list i{
  color: var(--brand);
  margin-top: 3px;
}

.compare-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.compare-card{
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
  border: 1px solid rgba(20,35,44,.09);
  box-shadow: var(--shadow);
  padding: 20px;
}

.compare-card .compare-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.compare-card h3{
  margin: 0;
  color: var(--text-strong);
  font-size: 1.08rem;
  font-weight: 800;
}

.compare-tag{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: #7a5306;
  border: 1px solid rgba(243,178,62,.16);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}

.compare-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.compare-list li{
  display: flex;
  gap: 10px;
  color: var(--text);
  line-height: 1.7;
  align-items: flex-start;
}

.compare-list i{
  color: var(--brand);
  margin-top: 4px;
}

.article-layout{
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(300px,.85fr);
  gap: 24px;
  align-items: start;
}

.content-card{
  border-radius: 30px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(20,35,44,.09);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.content-card .content-head{
  padding: 22px 26px 0;
}

.content-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.article-summary{
  margin: 0 26px 18px;
  padding: 18px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(20,200,176,.08), rgba(20,200,176,.04));
  border: 1px solid rgba(20,200,176,.12);
}

.article-summary .summary-title{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: 8px;
}

.article-summary p{
  color: #4f5f69;
  line-height: 1.8;
  font-size: .98rem;
}

.article-content{
  padding: 0 26px 28px;
  font-size: 1.02rem;
  line-height: 1.88;
  color: var(--text);
}

.article-content > * + *{
  margin-top: 1rem;
}

.article-content h2,
.article-content h3,
.article-content h4{
  color: var(--text-strong);
  letter-spacing: -.01em;
  line-height: 1.28;
  margin: 1.6rem 0 .8rem;
  font-weight: 800;
}

.article-content h2{
  font-size: 1.55rem;
}

.article-content h3{
  font-size: 1.22rem;
}

.article-content h4{
  font-size: 1.05rem;
}

.article-content p{
  margin: 0;
  color: var(--text);
}

.article-content a{
  color: #0b8f7b;
  text-decoration: none;
  border-bottom: 1px solid rgba(20,200,176,.26);
  padding-bottom: 1px;
}

.article-content a:hover{
  color: var(--text-strong);
  border-bottom-color: rgba(20,200,176,.48);
}

.article-content ul,
.article-content ol{
  margin: 0;
  padding-left: 1.2rem;
}

.article-content li + li{
  margin-top: .4rem;
}

.article-content blockquote{
  margin: 1.2rem 0;
  padding: 16px 18px;
  border-left: 4px solid var(--brand);
  border-radius: 18px;
  background: rgba(20,200,176,.06);
  color: #38515a;
}

.article-content code{
  color: #0c4e44;
  background: rgba(20,200,176,.10);
  padding: .15rem .4rem;
  border-radius: 8px;
  font-size: .95em;
}

.article-content pre{
  margin: 1.2rem 0;
  padding: 18px;
  border-radius: 20px;
  background: #0f1720;
  color: #e7f2f3;
  overflow: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.article-content pre code{
  background: transparent;
  color: inherit;
  padding: 0;
}

.article-content hr{
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 1.4rem 0;
}

.article-content table{
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1.2rem 0;
}

.article-content table th,
.article-content table td{
  border: 1px solid rgba(20,35,44,.10);
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
  background: rgba(255,255,255,.82);
}

.article-content table th{
  background: rgba(20,200,176,.08);
  color: var(--text-strong);
  font-weight: 800;
}

.article-content figure{
  margin: 1.2rem 0;
}

.article-content figcaption{
  margin-top: .55rem;
  color: var(--muted);
  font-size: .92rem;
}

.article-content img{
  border-radius: 18px;
  box-shadow: 0 16px 28px rgba(12,24,30,.08);
  border: 1px solid rgba(20,35,44,.08);
}

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

.aside-card{
  border-radius: 26px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(20,35,44,.09);
  box-shadow: var(--shadow);
  padding: 20px;
}

.aside-card.sticky{
  position: sticky;
  top: calc(var(--header-h) + 18px);
}

.aside-card .aside-title{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-strong);
  font-weight: 800;
  font-size: 1.06rem;
  margin-bottom: 14px;
}

.aside-card .aside-title i{
  color: var(--brand);
}

.aside-card .aside-desc{
  color: var(--muted);
  line-height: 1.8;
  font-size: .95rem;
}

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

.info-list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(20,200,176,.05);
  border: 1px solid rgba(20,200,176,.08);
}

.info-list li i{
  color: var(--brand);
  margin-top: 3px;
}

.info-list strong{
  display: block;
  color: var(--text-strong);
  font-weight: 800;
  margin-bottom: 2px;
}

.info-list span{
  color: var(--muted);
  line-height: 1.65;
  font-size: .93rem;
}

.aside-actions{
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.latest-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

.latest-card{
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(20,35,44,.09);
  box-shadow: var(--shadow);
  padding: 18px;
  transition: var(--transition);
}

.latest-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

.latest-card .mini-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(20,200,176,.10);
  border: 1px solid rgba(20,200,176,.14);
  color: #0e4d43;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.latest-card h3{
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.38;
}

.latest-card p{
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.75;
  font-size: .94rem;
}

.faq-shell{
  border-radius: 30px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(20,35,44,.09);
  box-shadow: var(--shadow);
  padding: 10px;
}

.accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 0;
  --bs-accordion-inner-border-radius: 0;
}

.accordion-item{
  border: 1px solid rgba(20,35,44,.08) !important;
  background: rgba(255,255,255,.78);
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(12,24,30,.04);
}

.accordion-item + .accordion-item{
  margin-top: 12px;
}

.accordion-button{
  padding: 18px 20px;
  border-radius: 0 !important;
  color: var(--text-strong);
  font-weight: 800;
  line-height: 1.45;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed){
  color: var(--text-strong);
  background: linear-gradient(145deg, rgba(20,200,176,.08), rgba(20,200,176,.04));
  box-shadow: inset 0 -1px 0 rgba(20,35,44,.06) !important;
}

.accordion-button::after{
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: rgba(20,200,176,.14);
  background-position: center;
  background-size: .85rem;
  margin-left: 14px;
  transition: var(--transition);
}

.accordion-button:not(.collapsed)::after{
  background-color: rgba(20,200,176,.20);
}

.accordion-body{
  padding: 0 20px 18px;
  color: var(--muted);
  line-height: 1.82;
}

.cta-shell{
  border-radius: 30px;
  background:
    radial-gradient(circle at 0% 0%, rgba(20,200,176,.14), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  border: 1px solid rgba(20,35,44,.09);
  box-shadow: var(--shadow);
  padding: 24px;
}

.cta-grid{
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr);
  gap: 18px;
  align-items: center;
}

.cta-copy h2{
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  line-height: 1.2;
  color: var(--text-strong);
}

.cta-copy p{
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.8;
}

.cta-form{
  margin-top: 18px;
}

.cta-input,
.cta-select{
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(20,35,44,.10);
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.cta-input::placeholder{
  color: #95a3ad;
}

.cta-input:focus,
.cta-select:focus{
  border-color: rgba(20,200,176,.38);
  box-shadow: 0 0 0 .25rem rgba(20,200,176,.12);
}

.cta-note{
  display: grid;
  gap: 10px;
  height: 100%;
}

.cta-note .mini{
  border-radius: 18px;
  background: rgba(16,22,27,.04);
  border: 1px solid rgba(20,35,44,.08);
  padding: 14px 16px;
  color: #4d5d67;
  line-height: 1.72;
}

.cta-note .mini strong{
  display: block;
  color: var(--text-strong);
  font-weight: 800;
  margin-bottom: 4px;
}

.article-empty-shell{
  padding: 24px 0 12px;
}

.empty-card{
  max-width: 640px;
  margin: 44px auto 24px;
  text-align: center;
  padding: 42px 28px;
  border-radius: 30px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(20,35,44,.09);
  box-shadow: var(--shadow);
}

.empty-icon{
  width: 82px;
  height: 82px;
  margin: 0 auto 18px;
  border-radius: 24px;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.empty-card h1{
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(1.75rem, 2.6vw, 2.3rem);
  line-height: 1.2;
  font-weight: 900;
}

.empty-card p{
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.8;
}

.empty-card .btn{
  margin-top: 22px;
}

.site-footer{
  position: relative;
  z-index: 1;
  padding: 26px 0 36px;
}

.footer-shell{
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(20,200,176,.14), transparent 26%),
    linear-gradient(180deg, #111820, #0f151b);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 20px 48px rgba(10, 16, 22, .22);
}

.footer-top{
  padding: 28px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.footer-brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 900;
  font-size: 1.08rem;
}

.footer-brand .mark{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #041015;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.82), transparent 34%),
    linear-gradient(145deg, var(--brand) 0%, #55f0d0 100%);
  box-shadow: 0 14px 28px rgba(20,200,176,.22);
}

.footer-text{
  max-width: 560px;
  margin-top: 14px;
  color: rgba(255,255,255,.70);
  line-height: 1.84;
}

.footer-links{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 18px;
  min-width: 300px;
}

.footer-links a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.82);
  padding: 8px 0;
  min-height: 44px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

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

.footer-links i{
  color: var(--brand-2);
}

.footer-bottom{
  padding: 16px 28px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.58);
  font-size: .92rem;
}

@media (max-width: 1199.98px){
  .stats-grid,
  .matrix-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .matrix-card.featured{
    grid-column: span 2;
  }

  .latest-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .hero-panel{
    grid-template-columns: minmax(0,1.35fr) minmax(260px,.95fr);
  }
}

@media (max-width: 991.98px){
  .header-search{
    max-width: 100%;
    margin-left: 0;
    width: 100%;
  }

  .brand-row{
    align-items: stretch;
  }

  .hero-panel,
  .article-layout,
  .cta-grid{
    grid-template-columns: 1fr;
  }

  .aside-card.sticky{
    position: static;
  }

  .compare-grid{
    grid-template-columns: 1fr;
  }

  .stats-grid,
  .matrix-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .latest-grid{
    grid-template-columns: 1fr;
  }

  .footer-top{
    flex-direction: column;
  }

  .footer-links{
    width: 100%;
  }
}

@media (max-width: 767.98px){
  .container{
    padding-left: 16px;
    padding-right: 16px;
  }

  .site-header{
    top: 0;
  }

  .header-inner{
    padding: 12px 0 10px;
  }

  .brand-row{
    gap: 12px;
  }

  .brand .name{
    font-size: 1rem;
  }

  .brand .sub{
    white-space: normal;
    line-height: 1.4;
  }

  .header-search{
    flex-direction: column;
    align-items: stretch;
  }

  .header-search .btn{
    width: 100%;
  }

  .hero-panel,
  .content-card,
  .aside-card,
  .cta-shell,
  .faq-shell,
  .empty-card,
  .footer-shell{
    border-radius: 24px;
  }

  .hero-panel{
    padding: 20px;
  }

  .hero-title{
    font-size: clamp(1.7rem, 7vw, 2.35rem);
  }

  .hero-lead{
    font-size: .98rem;
  }

  .hero-actions{
    flex-direction: column;
  }

  .hero-actions .btn{
    width: 100%;
  }

  .stats-grid,
  .matrix-grid,
  .latest-grid{
    grid-template-columns: 1fr;
  }

  .matrix-card.featured{
    grid-column: auto;
  }

  .content-card .content-head,
  .article-summary,
  .article-content{
    padding-left: 18px;
    padding-right: 18px;
  }

  .article-summary{
    margin-left: 18px;
    margin-right: 18px;
  }

  .article-content{
    font-size: .98rem;
    line-height: 1.82;
  }

  .accordion-button{
    padding: 16px 16px;
    font-size: .98rem;
  }

  .accordion-body{
    padding: 0 16px 16px;
  }

  .footer-top,
  .footer-bottom{
    padding-left: 18px;
    padding-right: 18px;
  }

  .footer-links{
    grid-template-columns: 1fr;
    min-width: 0;
  }
}

@media (max-width: 575.98px){
  .nav-pill{
    padding: 10px 14px;
    min-height: 42px;
  }

  .nav-pill span{
    font-size: .9rem;
  }

  .hero-side{
    padding: 18px;
  }

  .hero-side h2{
    font-size: 1.22rem;
  }

  .soft-badge,
  .meta-chip{
    min-height: 34px;
    font-size: .82rem;
    padding: 7px 10px;
  }

  .stat-card,
  .matrix-card,
  .compare-card,
  .latest-card{
    border-radius: 18px;
    padding: 16px;
  }

  .stat-num{
    font-size: 1.55rem;
  }

  .cta-shell{
    padding: 18px;
  }

  .cta-note .mini{
    padding: 12px 14px;
  }

  .empty-card{
    padding: 34px 20px;
  }
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}