/* roulang page: index */
:root{
      --bg: #f5f3eb;
      --bg-2: #eef4ee;
      --card: rgba(255,255,255,.82);
      --card-solid: #ffffff;
      --line: rgba(25, 37, 29, .10);
      --text: #18201b;
      --muted: #65706a;
      --accent: #215c47;
      --accent-2: #7fcf9f;
      --accent-3: #d7f0e2;
      --shadow: 0 18px 45px rgba(26, 40, 31, 0.08);
      --shadow-soft: 0 8px 24px rgba(26, 40, 31, 0.05);
      --radius: 1.5rem;
    }
    html{scroll-behavior:smooth}
    body{
      color: var(--text);
      background:
        radial-gradient(circle at 12% 10%, rgba(127, 207, 159, .16), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(33, 92, 71, .08), transparent 22%),
        linear-gradient(180deg, #f8f6f0 0%, #f4f1e8 100%);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    ::selection{background: rgba(33,92,71,.16); color: var(--text);}
    .site-topbar{
      backdrop-filter: blur(10px);
      background: rgba(246, 244, 236, .92);
      border-bottom: 1px solid var(--line);
    }
    .site-nav{
      background: rgba(248, 246, 239, .88);
      border-bottom: 1px solid rgba(25, 37, 29, .08);
      box-shadow: 0 1px 0 rgba(255,255,255,.65) inset;
    }
    .site-nav.is-scrolled{
      box-shadow: var(--shadow-soft);
    }
    .nav-link{
      position: relative;
      transition: color .22s ease, transform .22s ease, background .22s ease;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left: 1rem;
      right: 1rem;
      bottom: .35rem;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s ease;
    }
    .nav-link:hover{
      color: var(--accent);
      transform: translateY(-1px);
    }
    .nav-link:hover::after,
    .nav-link.active::after{
      transform: scaleX(1);
    }
    .nav-link.active{
      color: var(--accent);
      background: rgba(33,92,71,.06);
    }
    .brand-mark{
      background: linear-gradient(135deg, #1f5b46 0%, #2d7b5c 60%, #88d7a5 100%);
      box-shadow: 0 12px 26px rgba(33,92,71,.18);
    }
    .hero-card{
      background: linear-gradient(180deg, rgba(31,91,70,1) 0%, rgba(22,63,49,1) 100%);
      box-shadow: 0 22px 50px rgba(17, 40, 31, .22);
    }
    .soft-card{
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(8px);
    }
    .section-kicker{
      letter-spacing: .18em;
    }
    .section-title{
      line-height: 1.1;
    }
    .content-card{
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(22, 40, 31, .08);
      box-shadow: var(--shadow-soft);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .content-card:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow);
      border-color: rgba(33, 92, 71, .18);
    }
    .pill{
      border: 1px solid rgba(33, 92, 71, .18);
      background: rgba(33, 92, 71, .05);
      color: var(--accent);
    }
    .btn-primary{
      background: linear-gradient(135deg, var(--accent) 0%, #2c6d54 100%);
      color: #fff;
      box-shadow: 0 14px 28px rgba(33, 92, 71, .22);
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }
    .btn-primary:hover{
      transform: translateY(-1px);
      box-shadow: 0 18px 34px rgba(33, 92, 71, .28);
      filter: brightness(1.02);
    }
    .btn-secondary{
      background: rgba(255,255,255,.68);
      border: 1px solid rgba(33, 92, 71, .16);
      color: var(--accent);
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
    }
    .btn-secondary:hover{
      transform: translateY(-1px);
      border-color: rgba(33, 92, 71, .28);
      background: rgba(33, 92, 71, .05);
    }
    .mini-number{
      font-variant-numeric: tabular-nums;
      letter-spacing: -.04em;
    }
    .muted{
      color: var(--muted);
    }
    .focus-ring:focus{
      outline: 2px solid rgba(33, 92, 71, .35);
      outline-offset: 2px;
    }
    details.faq-item{
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(25, 37, 29, .08);
      box-shadow: var(--shadow-soft);
      border-radius: 1.25rem;
      overflow: hidden;
    }
    details.faq-item[open]{
      border-color: rgba(33, 92, 71, .18);
    }
    details.faq-item summary{
      list-style: none;
      cursor: pointer;
      transition: background .2s ease;
    }
    details.faq-item summary::-webkit-details-marker{display:none;}
    .summary-arrow{
      transition: transform .25s ease;
    }
    details[open] .summary-arrow{
      transform: rotate(180deg);
    }
    .line-box{
      background: linear-gradient(90deg, rgba(33,92,71,.08), rgba(127,207,159,.16));
      border: 1px solid rgba(33,92,71,.12);
    }
    .timeline{
      position: relative;
    }
    .timeline::before{
      content:"";
      position:absolute;
      left: 1.05rem;
      top: 1rem;
      bottom: 1rem;
      width: 2px;
      background: linear-gradient(180deg, rgba(33,92,71,.28), rgba(127,207,159,.12));
    }
    .timeline-step{
      position: relative;
      padding-left: 3rem;
    }
    .timeline-step::before{
      content:"";
      position:absolute;
      left: .55rem;
      top: .3rem;
      width: 1rem;
      height: 1rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      box-shadow: 0 0 0 6px rgba(33,92,71,.08);
    }
    .footer-link{
      transition: color .2s ease, transform .2s ease;
    }
    .footer-link:hover{
      color: #fff;
      transform: translateX(2px);
    }
    .input-style{
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(25, 37, 29, .12);
      transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }
    .input-style:focus{
      border-color: rgba(33, 92, 71, .35);
      box-shadow: 0 0 0 4px rgba(33, 92, 71, .10);
      outline: none;
    }
    .glass-bar{
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(25, 37, 29, .08);
      backdrop-filter: blur(8px);
    }
    .scroll-track{
      scrollbar-width: thin;
      scrollbar-color: rgba(33,92,71,.35) rgba(33,92,71,.08);
    }
    .scroll-track::-webkit-scrollbar{height:10px;width:10px;}
    .scroll-track::-webkit-scrollbar-thumb{background:rgba(33,92,71,.36);border-radius:999px;}
    .scroll-track::-webkit-scrollbar-track{background:rgba(33,92,71,.08);}
    @media (max-width: 768px){
      .site-nav.is-scrolled .nav-inner{padding-top: .9rem; padding-bottom: .9rem;}
    }

/* roulang page: category1 */
:root{
      --bg:#f4f1e8;
      --surface:#fbfaf6;
      --surface-2:#f1eee6;
      --text:#121812;
      --muted:#5f6b61;
      --line:rgba(21,37,29,.12);
      --accent:#1d5b3d;
      --accent-strong:#123524;
      --accent-soft:rgba(29,91,61,.10);
      --shadow:0 18px 40px rgba(16,23,19,.08);
      --shadow-soft:0 10px 24px rgba(16,23,19,.06);
      --radius:22px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(to right, rgba(17,24,20,.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(17,24,20,.04) 1px, transparent 1px),
        var(--bg);
      background-size:56px 56px,56px 56px,auto;
      background-attachment:fixed;
      font-feature-settings:"cv02" 1,"cv03" 1,"cv04" 1;
      letter-spacing:0;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:linear-gradient(180deg, rgba(251,250,246,.28), rgba(251,250,246,0) 22%, rgba(251,250,246,0) 78%, rgba(251,250,246,.18));
      z-index:-1;
    }
    a,img,button,input,textarea,summary{transition:all .2s ease}
    a{text-decoration:none}
    img{display:block;max-width:100%}
    button,input,textarea,summary{font:inherit}
    .focus-ring:focus-visible{
      outline:2px solid var(--accent);
      outline-offset:3px;
    }
    .brand-mark{
      background:var(--accent);
      color:#fff;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    }
    .nav-link{
      position:relative;
      transition:transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
    }
    .nav-link:hover{
      background:var(--accent-soft);
      color:var(--text);
      transform:translateY(-1px);
    }
    .nav-link.active{
      background:var(--accent);
      color:#fff;
      box-shadow:0 10px 20px rgba(29,91,61,.18);
    }
    .chip{
      border:1px solid rgba(21,37,29,.12);
      background:rgba(255,255,255,.7);
      color:var(--muted);
      border-radius:999px;
      padding:.62rem 1rem;
      font-size:.92rem;
      line-height:1;
      font-weight:600;
    }
    .chip:hover{
      border-color:rgba(29,91,61,.28);
      color:var(--text);
      transform:translateY(-1px);
      background:#fff;
    }
    .chip.is-active{
      background:var(--accent);
      color:#fff;
      border-color:transparent;
      box-shadow:0 12px 20px rgba(29,91,61,.14);
    }
    .panel{
      background:rgba(251,250,246,.9);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      backdrop-filter:saturate(120%);
    }
    .card-hover{
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    }
    .card-hover:hover{
      transform:translateY(-3px);
      border-color:rgba(29,91,61,.22);
      box-shadow:var(--shadow);
    }
    .input-field{
      width:100%;
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
      color:var(--text);
      padding:.9rem 1rem;
      box-shadow:none;
    }
    .input-field:focus{
      border-color:rgba(29,91,61,.44);
      outline:none;
      box-shadow:0 0 0 4px rgba(29,91,61,.08);
    }
    .section-kicker{
      color:var(--accent);
      font-size:.78rem;
      letter-spacing:.18em;
      text-transform:uppercase;
      font-weight:800;
    }
    .metric-number{
      font-variant-numeric:tabular-nums;
      font-feature-settings:"tnum" 1;
    }
    details summary::-webkit-details-marker{display:none}
    details[open] .faq-chevron{transform:rotate(180deg)}
    .faq-item{
      border:1px solid rgba(21,37,29,.12);
      border-radius:20px;
      background:rgba(255,255,255,.76);
    }
    .faq-item[open]{
      border-color:rgba(29,91,61,.22);
      background:#fff;
      box-shadow:var(--shadow-soft);
    }
    .menu-backdrop{
      background:rgba(10,15,12,.45);
      backdrop-filter:blur(2px);
    }
    .menu-panel{
      box-shadow:-18px 0 40px rgba(16,23,19,.16);
    }
    .toast{
      box-shadow:0 16px 36px rgba(16,23,19,.16);
    }
    @media (max-width: 1023px){
      .nav-scroll{
        overflow-x:auto;
        scrollbar-width:none;
      }
      .nav-scroll::-webkit-scrollbar{display:none}
    }

/* roulang page: category2 */
:root{
      --bg:#f4f2ea;
      --panel:#fbfaf6;
      --panel-2:#f7f5ef;
      --text:#17221b;
      --muted:#5e6a63;
      --line:rgba(23,34,27,.10);
      --line-strong:rgba(23,34,27,.16);
      --brand:#183326;
      --brand-2:#2f6146;
      --accent:#88c96e;
      --accent-2:#d9f2c7;
      --shadow:0 18px 40px rgba(18,28,22,.08);
      --shadow-soft:0 10px 24px rgba(18,28,22,.06);
      --radius:24px;
      --radius-sm:18px;
      --radius-xs:14px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      color:var(--text);
      background:
        linear-gradient(180deg, #f7f5ee 0%, #f4f2ea 22%, #f6f4ee 100%);
      line-height:1.7;
      letter-spacing:0;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    ::selection{background:rgba(136,201,110,.26)}
    .focus-ring:focus-visible,
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible{
      outline:none;
      box-shadow:0 0 0 4px rgba(136,201,110,.18);
    }
    .container-shell{
      width:min(1180px, calc(100vw - 32px));
      margin:0 auto;
    }
    .topbar{
      background:rgba(255,255,255,.74);
      backdrop-filter:saturate(180%) blur(10px);
      border-bottom:1px solid var(--line);
    }
    .topbar a,.topbar button{transition:all .2s ease}
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid var(--line);
      background:rgba(255,255,255,.7);
      color:var(--muted);
      border-radius:999px;
      padding:.45rem .8rem;
      font-size:.87rem;
      transition:all .2s ease;
    }
    .chip:hover{
      border-color:var(--line-strong);
      background:#fff;
      color:var(--text);
      transform:translateY(-1px);
    }
    .nav-link{
      position:relative;
      color:var(--muted);
      transition:all .2s ease;
      border:1px solid transparent;
    }
    .nav-link:hover{
      color:var(--text);
      background:rgba(255,255,255,.72);
      border-color:var(--line);
      transform:translateY(-1px);
    }
    .nav-link.active,
    .nav-link[aria-current="page"]{
      color:var(--brand);
      background:#fff;
      border-color:rgba(47,97,70,.18);
      box-shadow:0 8px 20px rgba(18,28,22,.06);
    }
    .brand-mark{
      background:linear-gradient(180deg, #21392d 0%, #15261d 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    }
    .hero-surface{
      position:relative;
      overflow:hidden;
      border:1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(250,248,243,.96) 52%, rgba(240,247,236,.95) 100%);
      box-shadow:var(--shadow);
      border-radius:var(--radius);
    }
    .hero-surface::after{
      content:"";
      position:absolute;
      inset:auto -15% -30% auto;
      width:320px;
      height:320px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(136,201,110,.16) 0%, rgba(136,201,110,0) 68%);
      pointer-events:none;
    }
    .section{
      padding:clamp(20px, 3vw, 34px) 0;
    }
    .section-title{
      letter-spacing:-0.02em;
      line-height:1.15;
    }
    .panel{
      background:rgba(255,255,255,.76);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .panel-soft{
      background:rgba(255,255,255,.58);
      border:1px solid var(--line);
      border-radius:var(--radius-sm);
    }
    .card{
      background:rgba(255,255,255,.88);
      border:1px solid var(--line);
      border-radius:var(--radius-sm);
      box-shadow:0 8px 24px rgba(18,28,22,.05);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    }
    .card:hover{
      transform:translateY(-3px);
      box-shadow:0 18px 32px rgba(18,28,22,.09);
      border-color:rgba(47,97,70,.18);
      background:#fff;
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border:1px solid transparent;
      background:linear-gradient(180deg, var(--brand-2) 0%, var(--brand) 100%);
      color:#fff;
      border-radius:999px;
      padding:.9rem 1.2rem;
      font-weight:600;
      box-shadow:0 14px 28px rgba(23,50,37,.15);
      transition:all .2s ease;
    }
    .btn-primary:hover{
      transform:translateY(-1px);
      box-shadow:0 18px 32px rgba(23,50,37,.20);
    }
    .btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border:1px solid rgba(23,34,27,.14);
      background:rgba(255,255,255,.82);
      color:var(--text);
      border-radius:999px;
      padding:.9rem 1.2rem;
      font-weight:600;
      transition:all .2s ease;
    }
    .btn-ghost:hover{
      background:#fff;
      border-color:rgba(47,97,70,.22);
      transform:translateY(-1px);
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      border:1px solid rgba(47,97,70,.14);
      background:rgba(240,248,236,.88);
      color:var(--brand-2);
      padding:.36rem .7rem;
      font-size:.82rem;
      white-space:nowrap;
    }
    .number{
      font-variant-numeric:tabular-nums;
      letter-spacing:-0.03em;
    }
    .grid-balance{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:1.25rem;
    }
    .metric{
      padding:1rem 1.05rem;
      border-radius:var(--radius-xs);
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,244,237,.92));
      border:1px solid var(--line);
    }
    .divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(23,34,27,.12), transparent);
    }
    .topic-cover{
      aspect-ratio: 16/10;
      border-radius:20px;
      background:
        linear-gradient(135deg, rgba(23,50,37,.98), rgba(47,97,70,.92)),
        linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,0));
      position:relative;
      overflow:hidden;
    }
    .topic-cover::before{
      content:"";
      position:absolute;
      inset:14% 14% 18% 14%;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.16);
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    }
    .topic-cover::after{
      content:"";
      position:absolute;
      inset:auto 18px 18px 18px;
      height:4px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--accent), rgba(255,255,255,.8));
      box-shadow:0 0 0 1px rgba(255,255,255,.1);
    }
    .mini-bars span{
      display:block;
      height:8px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(47,97,70,.16), rgba(136,201,110,.86));
    }
    .accordion details{
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(255,255,255,.76);
      box-shadow:0 8px 20px rgba(18,28,22,.04);
      transition:all .2s ease;
    }
    .accordion details[open]{
      border-color:rgba(47,97,70,.18);
      background:#fff;
    }
    .accordion summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.1rem;
      font-weight:600;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .accordion summary::-webkit-details-marker{display:none}
    .accordion .answer{
      padding:0 1.1rem 1rem 1.1rem;
      color:var(--muted);
      font-size:.96rem;
    }
    .footer-link{
      color:rgba(255,255,255,.78);
      transition:all .2s ease;
    }
    .footer-link:hover{
      color:#fff;
      transform:translateX(2px);
    }
    .mobile-drawer{
      position:fixed;
      inset:0;
      z-index:60;
      display:none;
      background:rgba(7,12,9,.42);
      backdrop-filter:blur(6px);
    }
    .mobile-drawer.open{display:block}
    .drawer-panel{
      position:absolute;
      right:0;
      top:0;
      height:100%;
      width:min(86vw, 360px);
      background:#fcfbf7;
      border-left:1px solid var(--line);
      box-shadow:-18px 0 36px rgba(14,20,16,.14);
      padding:1rem;
      display:flex;
      flex-direction:column;
      gap:1rem;
    }
    .drawer-link{
      padding:.9rem 1rem;
      border-radius:16px;
      border:1px solid var(--line);
      background:#fff;
      font-weight:600;
    }
    .drawer-link.active{border-color:rgba(47,97,70,.2); color:var(--brand)}
    .fade-in{
      animation:fadeIn .55s ease both;
    }
    @keyframes fadeIn{
      from{opacity:0; transform:translateY(10px)}
      to{opacity:1; transform:translateY(0)}
    }
    .kicker{
      color:var(--brand-2);
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:.78rem;
    }
    .shadow-line{
      box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
    }
    @media (max-width: 1024px){
      .grid-balance{grid-template-columns:1fr}
    }
    @media (max-width: 640px){
      .container-shell{width:min(100vw - 20px, 1180px)}
      .hero-surface{border-radius:22px}
      .section{padding:16px 0}
      .btn-primary,.btn-ghost{width:100%}
    }