/* roulang page: index */
:root{
      --court:#143d2b;
      --court-2:#1f5a3d;
      --ink:#1f211d;
      --muted:#6d6f68;
      --gold:#c79a3a;
      --orange:#e8753f;
      --cream:#f7f1e7;
      --paper:#fffaf1;
      --line:#ded6c6;
      --white:#ffffff;
      --radius:8px;
      --radius-sm:6px;
      --shadow:0 14px 34px rgba(31,33,29,.08);
      --shadow-dock:0 18px 45px rgba(20,61,43,.14);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;line-height:1.6;color:var(--ink);background:linear-gradient(180deg,#fbf6ec 0%,#f7f1e7 52%,#fffaf1 100%);text-rendering:optimizeLegibility;letter-spacing:0}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{cursor:pointer}
    .site-shell{min-height:100vh;padding-bottom:86px;overflow:hidden}
    .container{width:min(1180px,calc(100% - 32px));margin:0 auto}
    .dock-header{position:sticky;top:14px;z-index:50;padding:10px 0 0}
    .dock-nav{width:min(1100px,calc(100% - 24px));margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px;background:rgba(255,250,241,.9);border:1px solid rgba(20,61,43,.15);border-radius:999px;box-shadow:var(--shadow-dock);backdrop-filter:blur(16px)}
    .brand{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;background:var(--court);color:#fff;font-weight:800;white-space:nowrap}
    .brand-mark{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--gold),#f3d17a);color:var(--court);font-size:13px;font-weight:900}
    .nav-scroll{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;padding:0 2px}
    .nav-scroll::-webkit-scrollbar{display:none}
    .nav-link{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;color:#3d423a;font-size:14px;font-weight:700;white-space:nowrap;border:1px solid transparent;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
    .nav-link:hover,.nav-link:focus{background:#fff;border-color:var(--line);transform:translateY(-1px);outline:none}
    .nav-link.active{background:#f1dfb4;color:var(--court);border-color:#d8bd72}
    .dock-search{display:flex;align-items:center;gap:7px;min-width:190px;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted)}
    .dock-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px}
    .dock-cta,.btn-primary,.btn-secondary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-sm);font-weight:800;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;white-space:nowrap}
    .dock-cta{padding:10px 14px;background:var(--orange);color:#fff;border:1px solid #d96732}
    .dock-cta:hover,.dock-cta:focus,.btn-primary:hover,.btn-primary:focus{transform:translateY(-2px);box-shadow:0 12px 24px rgba(232,117,63,.22);outline:none}
    .btn-primary{padding:13px 18px;background:var(--orange);color:#fff;border:1px solid #d66731}
    .btn-secondary{padding:13px 18px;background:var(--court);color:#fff;border:1px solid #0c2f20}
    .btn-secondary:hover,.btn-secondary:focus{background:#1f5a3d;transform:translateY(-2px);outline:none}
    .btn-ghost{padding:12px 17px;background:#fff;color:var(--court);border:1px solid var(--line)}
    .btn-ghost:hover,.btn-ghost:focus{border-color:var(--gold);transform:translateY(-2px);outline:none}
    section{position:relative;padding:66px 0}
    .hero{padding:78px 0 64px;background:radial-gradient(circle at top left,rgba(199,154,58,.18),transparent 34%),linear-gradient(135deg,#fffaf1 0%,#f7f1e7 48%,#edf4ea 100%)}
    .hero-band{display:grid;grid-template-columns:1fr;gap:28px;border:1px solid rgba(20,61,43,.16);border-radius:var(--radius);background:rgba(255,255,255,.66);box-shadow:var(--shadow);padding:26px;overflow:hidden}
    .hero-top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:28px;align-items:center}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#efe2bf;border:1px solid #dfca8d;color:#544019;font-size:13px;font-weight:800}
    h1{margin:16px 0 14px;font-size:46px;line-height:1.12;font-weight:900;color:var(--court);letter-spacing:0}
    .lead{font-size:17px;color:#4d514b;max-width:690px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
    .score-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
    .score-item{border:1px solid var(--line);background:#fff;border-radius:var(--radius-sm);padding:12px 14px}
    .score-num{display:block;color:var(--court);font-size:24px;font-weight:900;line-height:1.1}
    .score-label{font-size:13px;color:var(--muted)}
    .matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .matrix-card{min-height:102px;padding:13px;border:1px solid rgba(20,61,43,.18);border-radius:var(--radius-sm);background:#fff;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
    .matrix-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}
    .matrix-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#edf4ea;color:var(--court);font-weight:900}
    .matrix-title{font-weight:900;color:var(--ink);font-size:15px}
    .matrix-meta{font-size:12px;color:var(--muted)}
    .status-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;border:1px dashed #cbbd9c;border-radius:var(--radius-sm);background:#fffaf1}
    .status-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(232,117,63,.14)}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}
    .section-title{margin:0;color:var(--court);font-size:30px;line-height:1.2;font-weight:900}
    .section-desc{margin:8px 0 0;color:var(--muted);max-width:680px;font-size:15px}
    .directory{background:#fffaf1}
    .directory-board{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch}
    .route-map{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:18px}
    .route-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #eee5d4}
    .route-row:last-child{border-bottom:0}
    .route-index{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--court);color:#fff;font-weight:900}
    .route-row h3{margin:0 0 4px;font-size:17px;color:var(--ink)}
    .route-row p{margin:0;color:var(--muted);font-size:14px}
    .route-badge{padding:5px 9px;border-radius:999px;background:#f1dfb4;color:#5c4719;font-size:12px;font-weight:800}
    .tag-wall{border:1px solid rgba(20,61,43,.16);border-radius:var(--radius);background:var(--court);padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
    .tags{display:flex;flex-wrap:wrap;gap:8px}
    .tag{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:13px;font-weight:700}
    .tag.light{background:#fff;border-color:var(--line);color:var(--court)}
    .recommend-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
    .rec-panel{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:18px}
    .rec-list{display:grid;gap:10px}
    .rec-item{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:10px;border:1px solid #eee5d4;border-radius:var(--radius-sm);transition:transform .2s ease,border-color .2s ease}
    .rec-item:hover{transform:translateX(3px);border-color:var(--gold)}
    .thumb{height:54px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#143d2b,#c79a3a);display:grid;place-items:center;color:#fff;font-weight:900;font-size:13px}
    .rec-item h3{margin:0;font-size:16px;color:var(--ink)}
    .rec-item p{margin:3px 0 0;color:var(--muted);font-size:13px}
    .heat{font-size:12px;font-weight:900;color:var(--orange)}
    .feature-band{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .feature{padding:16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
    .feature strong{display:block;color:var(--court);font-size:18px;margin-bottom:5px}
    .feature span{color:var(--muted);font-size:14px}
    .news{background:#f4ead8}
    .news-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}
    .news-list{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:var(--shadow)}
    .news-row{display:grid;grid-template-columns:120px 1fr 96px;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid #eee5d4}
    .news-row:last-child{border-bottom:0}
    .news-time{font-weight:900;color:var(--court);font-size:14px}
    .news-row a{font-weight:800;color:var(--ink)}
    .news-row a:hover{color:var(--orange)}
    .state{justify-self:end;padding:5px 8px;border-radius:999px;background:#edf4ea;color:var(--court);font-size:12px;font-weight:800}
    .side-note{border:1px solid rgba(20,61,43,.18);border-radius:var(--radius);background:var(--court);color:#fff;padding:18px;display:flex;flex-direction:column;gap:14px}
    .kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .kpi div{padding:12px;border-radius:var(--radius-sm);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
    .kpi strong{display:block;font-size:22px;color:#f1dfb4}
    .topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .topic-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px;min-height:160px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
    .topic-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}
    .topic-card h3{margin:0;color:var(--court);font-size:18px}
    .topic-card p{margin:8px 0;color:var(--muted);font-size:14px}
    .progress-box{display:grid;grid-template-columns:.95fr 1.05fr;gap:18px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:20px}
    .progress-list{display:grid;gap:12px}
    .progress-item{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start}
    .check{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f1dfb4;color:var(--court);font-weight:900}
    .bar{height:12px;background:#efe7d8;border-radius:999px;overflow:hidden;border:1px solid #ddd0b9}
    .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--court),var(--gold),var(--orange));border-radius:999px}
    .social{background:#10291d;color:#fff}
    .social .section-title{color:#fff}
    .social .section-desc{color:#d4ddcf}
    .bubble-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
    .bubble{position:relative;padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);background:rgba(255,255,255,.08)}
    .bubble p{margin:0;color:#eef4ea;font-size:14px}
    .bubble footer{margin-top:12px;color:#f1dfb4;font-weight:800;font-size:13px}
    .avatar-wall{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
    .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f1dfb4;color:var(--court);font-weight:900;border:2px solid rgba(255,255,255,.75)}
    .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}
    .faq-list{display:grid;gap:10px}
    details{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:15px 16px;box-shadow:0 8px 18px rgba(31,33,29,.04)}
    summary{cursor:pointer;font-weight:900;color:var(--court);list-style:none;display:flex;justify-content:space-between;gap:12px}
    summary::-webkit-details-marker{display:none}
    summary:after{content:'+';font-weight:900;color:var(--orange)}
    details[open] summary:after{content:'-'}
    details p{margin:10px 0 0;color:var(--muted);font-size:14px}
    .share-panel{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:22px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
    .share-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
    .site-footer{background:#17251d;color:#e9efe7;padding:40px 0 92px}
    .footer-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:24px;align-items:start}
    .footer-brand{font-size:20px;font-weight:900;color:#fff;margin-bottom:8px}
    .footer-grid p,.footer-grid a{color:#cdd8cf;font-size:14px}
    .footer-links{display:grid;gap:8px}
    .footer-links a:hover{color:#f1dfb4}
    .fixed-cta{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;width:min(960px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid rgba(20,61,43,.18);border-radius:var(--radius);background:rgba(255,250,241,.94);box-shadow:var(--shadow-dock);backdrop-filter:blur(16px)}
    .fixed-cta strong{color:var(--court)}
    .fixed-cta span{color:var(--muted);font-size:13px}
    .fixed-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    @media (max-width:1024px){
      .dock-nav{border-radius:24px;align-items:flex-start;flex-wrap:wrap}.dock-search{order:3;flex:1 1 100%;min-width:0}.hero-top,.directory-board,.recommend-grid,.news-layout,.progress-box,.faq-grid{grid-template-columns:1fr}.topic-grid{grid-template-columns:repeat(2,1fr)}.bubble-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.section-head{align-items:start;flex-direction:column}.hero-band{padding:20px}h1{font-size:38px}
    }
    @media (max-width:768px){
      .container{width:min(100% - 24px,680px)}section{padding:48px 0}.dock-header{top:8px}.dock-nav{width:calc(100% - 16px);padding:8px}.brand{max-width:100%;font-size:14px}.dock-cta{padding:9px 11px}.nav-link{font-size:13px;padding:8px 10px}.hero{padding-top:52px}.hero-top{gap:20px}h1{font-size:32px}.lead{font-size:16px}.matrix{grid-template-columns:repeat(2,1fr)}.score-strip,.feature-band,.bubble-grid{grid-template-columns:1fr}.rec-item{grid-template-columns:58px 1fr}.rec-item .heat{display:none}.news-row{grid-template-columns:1fr;gap:5px}.state{justify-self:start}.share-panel{grid-template-columns:1fr}.share-actions{justify-content:flex-start}.footer-grid{grid-template-columns:1fr}.fixed-cta{align-items:flex-start;flex-direction:column}.fixed-actions{width:100%}.fixed-actions a{flex:1}.site-shell{padding-bottom:142px}
    }
    @media (max-width:520px){
      .hero-band{padding:16px}.matrix{grid-template-columns:1fr}.topic-grid{grid-template-columns:1fr}.hero-actions a{width:100%}.btn-primary,.btn-secondary,.btn-ghost{width:100%;padding:12px 14px}.section-title{font-size:25px}.route-row{grid-template-columns:38px 1fr}.route-badge{grid-column:2;justify-self:start}.fixed-actions{flex-direction:column}.site-footer{padding-bottom:150px}
    }

/* roulang page: category1 */
:root{
    --bg:#f5f1e8;
    --panel:#fbf8f1;
    --panel-2:#f1ece2;
    --text:#13231d;
    --muted:#62706a;
    --line:#d9d0c0;
    --green:#17372e;
    --green-2:#255347;
    --gold:#c39a52;
    --gold-2:#e0b56d;
    --orange:#dd8652;
    --shadow:0 16px 36px rgba(19,35,29,.08);
    --shadow-soft:0 8px 20px rgba(19,35,29,.06);
    --radius:8px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    letter-spacing:0;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  button,input{font:inherit}
  ::selection{background:rgba(195,154,82,.25)}
  :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
  }

  .container-shell{
    width:min(1200px, calc(100% - 2rem));
    margin-inline:auto;
  }

  .dock-header{
    position:sticky;
    top:14px;
    z-index:60;
    padding-top:2px;
  }
  .dock-nav{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1px solid rgba(217,208,192,.9);
    border-radius:16px;
    background:rgba(251,248,241,.86);
    box-shadow:var(--shadow);
    backdrop-filter:blur(14px);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
    font-weight:800;
    color:var(--green);
    white-space:nowrap;
  }
  .brand-mark{
    width:34px;
    height:34px;
    border-radius:8px;
    background:var(--green);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:13px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .nav-scroll{
    display:flex;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    flex:1 1 auto;
    min-width:0;
    scrollbar-width:none;
  }
  .nav-scroll::-webkit-scrollbar{display:none}
  .nav-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 12px;
    border-radius:8px;
    border:1px solid transparent;
    color:var(--muted);
    white-space:nowrap;
    transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    line-height:1;
  }
  .nav-link:hover{
    color:var(--green);
    background:rgba(255,255,255,.72);
    border-color:rgba(217,208,192,.95);
    transform:translateY(-1px);
    box-shadow:var(--shadow-soft);
  }
  .nav-link.active{
    color:var(--green);
    background:rgba(23,55,46,.08);
    border-color:rgba(37,83,71,.28);
  }
  .dock-search{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:220px;
    padding:9px 12px;
    border-radius:8px;
    border:1px solid var(--line);
    background:#fffdf8;
    color:var(--muted);
  }
  .dock-search input{
    width:100%;
    border:0;
    background:transparent;
    color:var(--text);
    outline:none;
  }
  .dock-search input::placeholder{color:#8a948f}
  .dock-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:8px;
    border:1px solid transparent;
    background:var(--green);
    color:#fff;
    font-weight:700;
    white-space:nowrap;
    transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
    box-shadow:0 10px 20px rgba(23,55,46,.16);
  }
  .dock-cta:hover{
    transform:translateY(-1px);
    background:#1f463a;
  }

  .section-band{
    padding:42px 0;
    border-top:1px solid rgba(217,208,192,.7);
    background:linear-gradient(180deg, rgba(251,248,241,.4), rgba(251,248,241,.2));
  }
  .section-band.alt{
    background:rgba(248,244,236,.78);
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(37,83,71,.18);
    background:rgba(23,55,46,.06);
    color:var(--green);
    font-size:12px;
    font-weight:700;
    letter-spacing:0;
  }
  .section-title{
    margin:12px 0 0;
    font-size:28px;
    line-height:1.22;
    letter-spacing:0;
    color:var(--text);
  }
  .section-desc{
    margin:12px 0 0;
    color:var(--muted);
    font-size:15px;
    max-width:64ch;
  }

  .hero-band{
    padding:28px 0 26px;
    border-top:1px solid rgba(217,208,192,.7);
    background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(251,248,241,.55));
  }
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
    gap:24px;
    align-items:stretch;
  }
  .hero-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
  }
  .hero-title{
    margin:14px 0 0;
    font-size:46px;
    line-height:1.08;
    letter-spacing:0;
    color:var(--text);
  }
  .hero-desc{
    margin:14px 0 0;
    max-width:58ch;
    font-size:16px;
    color:var(--muted);
  }
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
  }
  .btn-primary,
  .btn-secondary,
  .btn-ghost{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:10px 14px;
    border-radius:8px;
    border:1px solid transparent;
    font-weight:700;
    transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--green);
    color:#fff;
    box-shadow:0 10px 18px rgba(23,55,46,.14);
  }
  .btn-primary:hover{
    transform:translateY(-1px);
    background:#1f463a;
  }
  .btn-secondary{
    background:rgba(255,255,255,.72);
    color:var(--green);
    border-color:var(--line);
  }
  .btn-secondary:hover{
    transform:translateY(-1px);
    border-color:rgba(37,83,71,.34);
    color:#113127;
  }
  .btn-ghost{
    background:transparent;
    color:var(--muted);
    border-color:rgba(217,208,192,.95);
  }
  .btn-ghost:hover{
    transform:translateY(-1px);
    color:var(--green);
    background:rgba(255,255,255,.68);
  }

  .hero-note{
    margin-top:12px;
    color:var(--muted);
    font-size:13px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .hero-note span{
    padding-right:10px;
    border-right:1px solid rgba(217,208,192,.95);
  }
  .hero-note span:last-child{border-right:0;padding-right:0}

  .hero-board{
    min-width:0;
    border:1px solid rgba(217,208,192,.95);
    border-radius:16px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.72), rgba(245,241,232,.9));
    box-shadow:var(--shadow);
    padding:18px;
  }
  .board-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .board-title{
    font-size:15px;
    font-weight:800;
    color:var(--green);
  }
  .board-score{
    display:flex;
    align-items:baseline;
    gap:10px;
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
  }
  .board-score strong{
    color:var(--green);
    font-size:28px;
    line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .board-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
    margin-top:16px;
  }
  .board-panel{
    border:1px solid rgba(217,208,192,.95);
    border-radius:8px;
    background:rgba(255,255,255,.76);
    padding:12px;
    min-height:126px;
  }
  .board-panel h3{
    margin:0;
    font-size:13px;
    font-weight:800;
    color:var(--text);
  }
  .mini-lines{
    display:grid;
    gap:8px;
    margin-top:10px;
  }
  .mini-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border-radius:8px;
    background:rgba(23,55,46,.04);
    color:var(--muted);
    font-size:12px;
    font-variant-numeric:tabular-nums;
  }
  .mini-line strong{
    color:var(--green);
    font-size:13px;
  }
  .tag-wall{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
  }
  .chip,
  .filter-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    border-radius:8px;
    border:1px solid rgba(217,208,192,.95);
    background:#fffdf8;
    color:var(--green);
    font-size:12px;
    line-height:1;
    transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  }
  .filter-chip{
    cursor:pointer;
    font-weight:700;
  }
  .chip:hover,
  .filter-chip:hover{
    transform:translateY(-1px);
    border-color:rgba(37,83,71,.32);
    background:#fff;
  }
  .filter-chip.active{
    background:rgba(23,55,46,.08);
    border-color:rgba(37,83,71,.36);
    color:#113127;
  }

  .avatar-wall{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
  }
  .avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:800;
    font-size:13px;
    border:2px solid rgba(255,255,255,.9);
    box-shadow:0 6px 12px rgba(19,35,29,.08);
  }
  .avatar.a{background:#264f43}
  .avatar.b{background:#b98c44}
  .avatar.c{background:#df8d51}
  .avatar.d{background:#3f5f58}
  .avatar.e{background:#8d7a56}
  .avatar.f{background:#17372e}
  .avatar.g{background:#6e8369}
  .avatar.h{background:#9e6d4a}
  .avatar.i{background:#52736d}

  .section-band .stat-row{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:12px;
    margin-top:22px;
  }
  .stat-box{
    border:1px solid rgba(217,208,192,.95);
    border-radius:8px;
    background:rgba(255,255,255,.72);
    padding:14px 16px;
    box-shadow:var(--shadow-soft);
  }
  .stat-box strong{
    display:block;
    font-size:24px;
    line-height:1;
    color:var(--green);
    font-variant-numeric:tabular-nums;
  }
  .stat-box span{
    display:block;
    margin-top:8px;
    color:var(--muted);
    font-size:13px;
  }

  .path-grid{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:24px;
    align-items:start;
    margin-top:22px;
  }
  .path-board,
  .list-board,
  .social-board,
  .faq-board{
    border:1px solid rgba(217,208,192,.95);
    border-radius:16px;
    background:rgba(255,255,255,.7);
    box-shadow:var(--shadow-soft);
    padding:18px;
  }
  .path-list{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:12px;
  }
  .path-item{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:12px;
    align-items:start;
    padding:12px;
    border-radius:8px;
    background:rgba(23,55,46,.03);
    border:1px solid rgba(217,208,192,.8);
  }
  .path-step{
    width:48px;
    height:48px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:var(--green);
    color:#fff;
    font-weight:800;
    font-variant-numeric:tabular-nums;
  }
  .path-item h3{
    margin:0;
    font-size:15px;
    line-height:1.35;
  }
  .path-item p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:13px;
  }
  .path-side{
    margin-top:16px;
    border-top:1px solid rgba(217,208,192,.8);
    padding-top:16px;
    display:grid;
    gap:10px;
  }
  .side-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    background:#fffdf8;
    border:1px solid rgba(217,208,192,.9);
    color:var(--muted);
    font-size:13px;
  }
  .side-note strong{
    color:var(--green);
  }

  .filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin-top:16px;
  }
  .filter-row .filter-chip:last-child{
    margin-left:auto;
  }
  .tag-cloud{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
  }
  .tag-cloud .chip{
    color:#355149;
  }

  .list-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:18px;
    color:var(--muted);
    font-size:13px;
  }
  .list-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
    margin-top:14px;
  }
  .update-item{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:12px;
    align-items:stretch;
    min-width:0;
    padding:12px;
    border-radius:8px;
    border:1px solid rgba(217,208,192,.92);
    background:rgba(255,255,255,.8);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .update-item:hover{
    transform:translateY(-1px);
    border-color:rgba(37,83,71,.28);
    box-shadow:var(--shadow-soft);
    background:#fffdf8;
  }
  .thumb{
    border-radius:8px;
    background:
      linear-gradient(180deg, rgba(23,55,46,.94), rgba(37,83,71,.9));
    color:#fff;
    padding:10px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:96px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .thumb .thumb-tag{
    display:inline-flex;
    width:max-content;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    font-size:11px;
    font-weight:700;
  }
  .thumb .thumb-time{
    font-size:20px;
    line-height:1;
    font-weight:800;
    font-variant-numeric:tabular-nums;
  }
  .thumb .thumb-label{
    font-size:11px;
    opacity:.84;
  }
  .item-body{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .item-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    font-size:12px;
    color:var(--muted);
  }
  .item-meta .badge{
    display:inline-flex;
    align-items:center;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(195,154,82,.12);
    color:#7f5e24;
    border:1px solid rgba(195,154,82,.18);
    font-weight:700;
  }
  .item-title{
    margin:10px 0 0;
    font-size:15px;
    line-height:1.4;
    color:var(--text);
    font-weight:700;
    overflow-wrap:anywhere;
  }
  .item-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
  }

  .social-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    gap:22px;
    margin-top:18px;
    align-items:start;
  }
  .proof-strip{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px;
    margin-top:16px;
  }
  .proof-box{
    padding:12px 14px;
    border-radius:8px;
    border:1px solid rgba(217,208,192,.92);
    background:#fffdf8;
  }
  .proof-box strong{
    display:block;
    font-size:22px;
    line-height:1;
    color:var(--green);
    font-variant-numeric:tabular-nums;
  }
  .proof-box span{
    display:block;
    margin-top:7px;
    color:var(--muted);
    font-size:12px;
  }

  .bubble-list{
    display:grid;
    gap:12px;
  }
  .bubble{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
    align-items:start;
    padding:12px;
    border-radius:8px;
    border:1px solid rgba(217,208,192,.92);
    background:rgba(255,255,255,.78);
  }
  .bubble .avatar{
    width:42px;
    height:42px;
    font-size:14px;
  }
  .bubble p{
    margin:0;
    color:var(--text);
    font-size:14px;
  }
  .bubble .bubble-meta{
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    color:var(--muted);
    font-size:12px;
  }

  .faq-list{
    display:grid;
    gap:10px;
    margin-top:18px;
  }
  details.faq-item{
    border:1px solid rgba(217,208,192,.92);
    border-radius:8px;
    background:rgba(255,255,255,.78);
    overflow:hidden;
  }
  details.faq-item summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    font-size:15px;
    font-weight:700;
    color:var(--text);
  }
  details.faq-item summary::-webkit-details-marker{display:none}
  .faq-answer{
    padding:0 16px 16px;
    color:var(--muted);
    font-size:14px;
  }
  .faq-arrow{
    flex:0 0 auto;
    color:var(--green);
    transition:transform .18s ease;
  }
  details[open] .faq-arrow{transform:rotate(180deg)}

  .site-footer{
    border-top:1px solid rgba(217,208,192,.75);
    background:rgba(248,244,236,.82);
  }
  .footer-top{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    color:var(--muted);
    font-size:13px;
  }
  .footer-links a:hover{color:var(--green)}
  .footer-note{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:10px;
    color:var(--muted);
    font-size:12px;
  }

  .fixed-cta{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:70;
    padding:12px 0;
    background:rgba(245,241,232,.92);
    border-top:1px solid rgba(217,208,192,.9);
    backdrop-filter:blur(14px);
  }
  .fixed-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
  .fixed-cta-text{
    color:var(--muted);
    font-size:14px;
  }
  .fixed-cta-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }

  .pb-fixed{padding-bottom:116px}
  [hidden]{display:none !important;}

  @media (max-width: 1024px){
    .hero-grid,
    .path-grid,
    .social-grid{
      grid-template-columns:1fr;
    }
    .hero-title{font-size:40px}
    .list-grid{grid-template-columns:1fr}
  }
  @media (max-width: 768px){
    .dock-nav{
      flex-wrap:wrap;
      gap:10px;
    }
    .brand{order:1}
    .dock-cta{order:2; margin-left:auto}
    .nav-scroll{
      order:3;
      width:100%;
      padding-bottom:2px;
    }
    .dock-search{
      order:4;
      width:100%;
      min-width:0;
    }
    .hero-title{font-size:34px}
    .section-title{font-size:24px}
    .section-band{padding:32px 0}
    .section-band .stat-row,
    .proof-strip{
      grid-template-columns:1fr;
    }
    .hero-board,
    .path-board,
    .list-board,
    .social-board,
    .faq-board{
      padding:16px;
    }
    .list-grid{
      grid-template-columns:1fr;
    }
    .update-item{
      grid-template-columns:78px minmax(0,1fr);
    }
    .fixed-cta-inner{
      flex-direction:column;
      align-items:stretch;
    }
    .fixed-cta-actions a{
      flex:1 1 0;
    }
    .fixed-cta-text{display:none}
    .pb-fixed{padding-bottom:132px}
  }
  @media (max-width: 520px){
    .container-shell{width:min(100% - 1rem, 1200px)}
    .hero-title{font-size:30px}
    .hero-desc,
    .section-desc{
      font-size:14px;
    }
    .dock-nav{padding:10px 11px}
    .nav-link{padding:8px 10px}
    .dock-search{padding:8px 10px}
    .board-grid{grid-template-columns:1fr}
    .hero-actions a,
    .fixed-cta-actions a{
      min-height:40px;
      padding:10px 12px;
    }
  }

/* roulang page: category2 */
:root{
      --bg:#f4efe6;
      --paper:#fffaf1;
      --paper-2:#f2eadb;
      --ink:#102018;
      --muted:#667468;
      --line:#d8cab3;
      --line-strong:#bfae90;
      --green:#173728;
      --green-2:#234b37;
      --gold:#c8a04d;
      --orange:#d98b56;
      --shadow:0 18px 42px rgba(16,32,24,.08);
      --shadow-soft:0 10px 24px rgba(16,32,24,.05);
      --radius:8px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:
        linear-gradient(180deg,#f8f4ea 0%, #f4efe6 28%, #efe7d8 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height:1.6;
      letter-spacing:0;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(rgba(23,55,40,.04) 1px, transparent 1px) 0 0/100% 88px,
        linear-gradient(90deg, rgba(23,55,40,.04) 1px, transparent 1px) 0 0/88px 100%;
      opacity:.28;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{cursor:pointer}
    :focus-visible{
      outline:2px solid var(--gold);
      outline-offset:2px;
    }
    .dock-header{
      position:sticky;
      top:.75rem;
      z-index:60;
      padding:0 1rem;
    }
    .dock-nav{
      max-width:1180px;
      margin:0 auto;
      display:flex;
      align-items:center;
      gap:.65rem;
      padding:.85rem .9rem;
      background:rgba(255,250,241,.9);
      border:1px solid rgba(216,202,179,.95);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      backdrop-filter:blur(12px);
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      flex:0 0 auto;
      font-weight:700;
      color:var(--green);
      white-space:nowrap;
    }
    .brand-mark{
      width:2rem;
      height:2rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:var(--radius);
      background:linear-gradient(135deg,var(--green),var(--green-2));
      color:#fff;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
      font-size:.95rem;
      line-height:1;
    }
    .nav-scroll{
      display:flex;
      align-items:center;
      gap:.45rem;
      flex:1 1 auto;
      min-width:0;
      overflow-x:auto;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .nav-scroll::-webkit-scrollbar{display:none}
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.62rem .82rem;
      border-radius:var(--radius);
      border:1px solid transparent;
      color:var(--muted);
      white-space:nowrap;
      transition:transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
      background:transparent;
      flex:0 0 auto;
    }
    .nav-link:hover{
      transform:translateY(-1px);
      color:var(--green);
      border-color:rgba(191,174,144,.9);
      background:rgba(255,250,241,.95);
      box-shadow:var(--shadow-soft);
    }
    .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg,var(--green),var(--green-2));
      border-color:transparent;
      box-shadow:0 12px 24px rgba(23,55,40,.18);
    }
    .dock-search{
      flex:0 1 250px;
      display:flex;
      align-items:center;
      gap:.55rem;
      padding:.6rem .8rem;
      border-radius:var(--radius);
      border:1px solid rgba(216,202,179,.95);
      background:#fffdf7;
      color:var(--muted);
      min-width:180px;
    }
    .dock-search input{
      width:100%;
      border:0;
      outline:0;
      background:transparent;
      color:var(--ink);
    }
    .dock-search input::placeholder{color:#8a9689}
    .dock-cta{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      padding:.7rem 1rem;
      border-radius:var(--radius);
      border:1px solid transparent;
      color:#fff;
      background:linear-gradient(135deg,var(--gold),#d4b25d);
      box-shadow:0 10px 22px rgba(200,160,77,.25);
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
      white-space:nowrap;
    }
    .dock-cta:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(200,160,77,.3);
    }
    .page-wrap{
      position:relative;
      z-index:1;
      padding-bottom:9rem;
    }
    .container{
      width:min(1180px, calc(100% - 2rem));
      margin:0 auto;
    }
    .hero{
      padding:1.1rem 0 1.1rem;
      border-bottom:1px solid rgba(216,202,179,.78);
    }
    .crumb{
      display:flex;
      align-items:center;
      gap:.45rem;
      color:var(--muted);
      font-size:.9rem;
      flex-wrap:wrap;
    }
    .crumb a{color:var(--green);}
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
      gap:1rem;
      align-items:stretch;
      margin-top:1rem;
    }
    .hero-copy{
      padding:1.15rem 0 1rem;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.42rem .7rem;
      border-radius:var(--radius);
      background:rgba(23,55,40,.08);
      color:var(--green);
      border:1px solid rgba(23,55,40,.12);
      font-size:.9rem;
    }
    h1,h2,h3,p{margin:0}
    h1{
      margin-top:.85rem;
      font-size:clamp(2rem, 2.35rem, 2.35rem);
      line-height:1.14;
      color:var(--green);
      letter-spacing:0;
    }
    .hero-copy p{
      margin-top:.95rem;
      max-width:58ch;
      color:var(--muted);
      font-size:1rem;
    }
    .cta-row{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin-top:1.2rem;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      min-height:2.7rem;
      padding:.72rem 1rem;
      border-radius:var(--radius);
      border:1px solid transparent;
      transition:transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg,var(--green),var(--green-2));
      box-shadow:0 12px 24px rgba(23,55,40,.18);
    }
    .btn-primary:hover{box-shadow:0 16px 28px rgba(23,55,40,.22)}
    .btn-secondary{
      color:var(--green);
      background:rgba(255,250,241,.8);
      border-color:rgba(191,174,144,.9);
    }
    .btn-secondary:hover{
      border-color:rgba(23,55,40,.26);
      background:#fffdf8;
      box-shadow:var(--shadow-soft);
    }
    .micro-line{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem .8rem;
      margin-top:.9rem;
      color:var(--muted);
      font-size:.92rem;
    }
    .micro-line span{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.28rem 0;
    }
    .hero-panel{
      border:1px solid rgba(216,202,179,.95);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,250,241,.88), rgba(245,239,228,.94));
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      padding:1rem 1rem .85rem;
      border-bottom:1px solid rgba(216,202,179,.75);
    }
    .panel-head h2{
      font-size:1rem;
      color:var(--green);
    }
    .panel-head small{
      color:var(--muted);
      font-size:.85rem;
    }
    .court-board{
      position:relative;
      padding:1rem;
      background:
        linear-gradient(135deg, rgba(23,55,40,.04), rgba(200,160,77,.04)),
        linear-gradient(rgba(23,55,40,.05) 1px, transparent 1px) 0 0/100% 86px,
        linear-gradient(90deg, rgba(23,55,40,.05) 1px, transparent 1px) 0 0/86px 100%;
    }
    .score-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:.65rem;
    }
    .score-tile{
      min-height:5.15rem;
      padding:.8rem;
      border-radius:var(--radius);
      border:1px solid rgba(191,174,144,.9);
      background:rgba(255,250,241,.9);
    }
    .score-tile strong{
      display:block;
      color:var(--green);
      font-size:1rem;
      margin-bottom:.18rem;
    }
    .score-tile span{
      color:var(--muted);
      font-size:.88rem;
    }
    .tag-wall{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-top:.8rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.48rem .68rem;
      border-radius:var(--radius);
      border:1px solid rgba(191,174,144,.9);
      background:#fffdf8;
      color:var(--green);
      font-size:.9rem;
      transition:transform .18s ease, background-color .18s ease, border-color .18s ease;
    }
    .tag:hover{
      transform:translateY(-1px);
      border-color:rgba(23,55,40,.26);
      background:#fff;
    }
    .avatar-row{
      display:flex;
      align-items:center;
      gap:.55rem;
      margin-top:1rem;
      flex-wrap:wrap;
    }
    .avatar{
      width:2.2rem;
      height:2.2rem;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,var(--green),var(--green-2));
      color:#fff;
      border:2px solid rgba(255,250,241,.95);
      box-shadow:0 8px 18px rgba(23,55,40,.15);
      font-size:.8rem;
    }
    .avatar-note{
      color:var(--muted);
      font-size:.88rem;
      margin-left:.2rem;
    }
    .band{
      margin-top:1rem;
      border:1px solid rgba(216,202,179,.88);
      border-radius:var(--radius);
      background:rgba(255,250,241,.85);
      overflow:hidden;
      box-shadow:var(--shadow-soft);
    }
    .band-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1px;
      background:rgba(216,202,179,.88);
    }
    .band-item{
      background:rgba(255,250,241,.96);
      padding:1rem;
      min-height:6.2rem;
    }
    .band-item strong{
      display:flex;
      align-items:center;
      gap:.45rem;
      color:var(--green);
      font-size:1rem;
    }
    .band-item p{
      margin-top:.35rem;
      color:var(--muted);
      font-size:.92rem;
    }
    .section{
      padding:1.1rem 0;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:.85rem;
    }
    .section-head h2{
      font-size:1.18rem;
      color:var(--green);
    }
    .section-head p{
      color:var(--muted);
      font-size:.95rem;
      max-width:60ch;
    }
    .filter-bar{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:.65rem;
      padding:.9rem;
      border:1px solid rgba(216,202,179,.9);
      border-radius:var(--radius);
      background:rgba(255,250,241,.84);
      box-shadow:var(--shadow-soft);
    }
    .filter-group{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      flex:1 1 auto;
    }
    .filter-btn{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      min-height:2.35rem;
      padding:.45rem .8rem;
      border-radius:var(--radius);
      border:1px solid rgba(191,174,144,.95);
      background:#fffdf8;
      color:var(--green);
      transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .filter-btn:hover{
      transform:translateY(-1px);
      border-color:rgba(23,55,40,.28);
      box-shadow:var(--shadow-soft);
    }
    .filter-btn.is-active{
      color:#fff;
      background:linear-gradient(135deg,var(--green),var(--green-2));
      border-color:transparent;
      box-shadow:0 10px 20px rgba(23,55,40,.16);
    }
    .filter-tools{
      display:flex;
      align-items:center;
      gap:.55rem;
      flex:0 0 auto;
      flex-wrap:wrap;
      margin-left:auto;
    }
    .clear-btn{
      display:inline-flex;
      align-items:center;
      gap:.38rem;
      padding:.45rem .76rem;
      border-radius:var(--radius);
      border:1px solid rgba(216,202,179,.95);
      background:transparent;
      color:var(--muted);
      transition:transform .18s ease, border-color .18s ease, color .18s ease;
    }
    .clear-btn:hover{
      transform:translateY(-1px);
      border-color:rgba(23,55,40,.24);
      color:var(--green);
    }
    .chip-wall{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-top:.8rem;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.45rem .68rem;
      border-radius:var(--radius);
      border:1px solid rgba(191,174,144,.88);
      background:#fffdf8;
      color:var(--muted);
      font-size:.9rem;
      transition:transform .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease;
    }
    .chip:hover{
      transform:translateY(-1px);
      border-color:rgba(23,55,40,.24);
      color:var(--green);
    }
    .selection-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:.9rem;
      margin-top:.9rem;
    }
    .select-card{
      display:flex;
      flex-direction:column;
      overflow:hidden;
      border:1px solid rgba(216,202,179,.94);
      border-radius:var(--radius);
      background:rgba(255,250,241,.92);
      box-shadow:var(--shadow-soft);
      transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .select-card:hover{
      transform:translateY(-2px);
      border-color:rgba(23,55,40,.22);
      box-shadow:var(--shadow);
    }
    .card-thumb{
      position:relative;
      min-height:11rem;
      background:
        linear-gradient(135deg, rgba(23,55,40,.96), rgba(35,75,55,.94)),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/32px 100%;
    }
    .card-thumb::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0/62px 100%,
        linear-gradient(180deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0/100% 42px;
      opacity:.35;
    }
    .card-thumb::after{
      content:"";
      position:absolute;
      inset:auto 1rem 1rem 1rem;
      height:2.6rem;
      border-radius:var(--radius);
      background:linear-gradient(90deg, rgba(255,250,241,.14), rgba(255,250,241,.04));
      border:1px solid rgba(255,250,241,.14);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
    }
    .card-badge{
      position:absolute;
      top:.85rem;
      left:.85rem;
      z-index:1;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.35rem .62rem;
      border-radius:var(--radius);
      background:rgba(255,250,241,.92);
      color:var(--green);
      border:1px solid rgba(255,255,255,.75);
      font-size:.82rem;
    }
    .card-content{
      padding:.95rem;
      display:flex;
      flex-direction:column;
      gap:.7rem;
      flex:1 1 auto;
    }
    .card-title{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:.75rem;
    }
    .card-title h3{
      font-size:1.02rem;
      color:var(--green);
      line-height:1.3;
    }
    .card-title small{
      color:var(--muted);
      font-size:.82rem;
      flex:0 0 auto;
    }
    .card-content p{
      color:var(--muted);
      font-size:.92rem;
      min-height:2.8rem;
    }
    .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:.4rem;
    }
    .meta{
      display:inline-flex;
      align-items:center;
      gap:.28rem;
      padding:.34rem .52rem;
      border-radius:var(--radius);
      border:1px solid rgba(216,202,179,.94);
      background:#fffdf8;
      color:var(--muted);
      font-size:.82rem;
    }
    .card-actions{
      display:flex;
      gap:.5rem;
      margin-top:auto;
      padding-top:.1rem;
    }
    .card-actions .btn{
      min-height:2.4rem;
      padding:.58rem .72rem;
      font-size:.92rem;
      flex:1 1 auto;
    }
    .btn-muted{
      color:var(--green);
      border:1px solid rgba(191,174,144,.95);
      background:#fffdf8;
    }
    .btn-muted:hover{
      border-color:rgba(23,55,40,.22);
      box-shadow:var(--shadow-soft);
    }
    .empty-state{
      display:none;
      margin-top:1rem;
      padding:1rem;
      border-radius:var(--radius);
      border:1px dashed rgba(191,174,144,.95);
      background:rgba(255,250,241,.82);
      color:var(--muted);
    }
    .flow-grid{
      display:grid;
      grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
      gap:.9rem;
      margin-top:.9rem;
    }
    .flow-panel{
      border:1px solid rgba(216,202,179,.9);
      border-radius:var(--radius);
      background:rgba(255,250,241,.86);
      box-shadow:var(--shadow-soft);
      padding:1rem;
    }
    .flow-steps{
      display:grid;
      gap:.75rem;
    }
    .step{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:.8rem;
      align-items:start;
      padding:.7rem .8rem;
      border-radius:var(--radius);
      border:1px solid rgba(216,202,179,.82);
      background:#fffdf8;
    }
    .step-index{
      width:2rem;
      height:2rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:var(--radius);
      background:rgba(23,55,40,.08);
      color:var(--green);
      font-weight:700;
    }
    .step strong{
      display:block;
      color:var(--green);
      margin-bottom:.12rem;
    }
    .step p{
      color:var(--muted);
      font-size:.92rem;
    }
    .route-board{
      display:grid;
      gap:.7rem;
    }
    .route-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      padding:.8rem .85rem;
      border-radius:var(--radius);
      border:1px solid rgba(191,174,144,.92);
      background:linear-gradient(135deg, rgba(255,250,241,.92), rgba(242,234,219,.78));
    }
    .route-item strong{
      color:var(--green);
      display:block;
      margin-bottom:.08rem;
    }
    .route-item span{
      color:var(--muted);
      font-size:.88rem;
    }
    .route-pill{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:4.1rem;
      padding:.42rem .65rem;
      border-radius:var(--radius);
      color:var(--green);
      background:#fffdf8;
      border:1px solid rgba(191,174,144,.94);
    }
    .proof-grid{
      display:grid;
      grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
      gap:.9rem;
      margin-top:.9rem;
    }
    .proof-panel{
      border:1px solid rgba(216,202,179,.92);
      border-radius:var(--radius);
      background:rgba(255,250,241,.84);
      box-shadow:var(--shadow-soft);
      padding:1rem;
    }
    .avatar-wall{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      align-items:flex-start;
    }
    .avatar-card{
      width:3.9rem;
      text-align:center;
    }
    .avatar-card .avatar{
      margin:0 auto .4rem;
    }
    .avatar-card b{
      display:block;
      color:var(--green);
      font-size:.82rem;
      font-weight:600;
    }
    .avatar-card em{
      display:block;
      color:var(--muted);
      font-style:normal;
      font-size:.74rem;
      margin-top:.1rem;
    }
    .bubble-list{
      display:grid;
      gap:.65rem;
    }
    .bubble{
      position:relative;
      padding:.85rem .9rem;
      border-radius:var(--radius);
      border:1px solid rgba(191,174,144,.92);
      background:#fffdf8;
      box-shadow:var(--shadow-soft);
    }
    .bubble::before{
      content:"";
      position:absolute;
      left:.85rem;
      top:-.35rem;
      width:.7rem;
      height:.7rem;
      transform:rotate(45deg);
      background:#fffdf8;
      border-left:1px solid rgba(191,174,144,.92);
      border-top:1px solid rgba(191,174,144,.92);
    }
    .bubble-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin-bottom:.4rem;
    }
    .bubble-head strong{
      color:var(--green);
      font-size:.92rem;
    }
    .bubble-head span{
      color:var(--muted);
      font-size:.82rem;
    }
    .bubble p{
      color:var(--muted);
      font-size:.92rem;
    }
    .faq-list{
      display:grid;
      gap:.65rem;
      margin-top:.9rem;
    }
    .faq-item{
      border:1px solid rgba(216,202,179,.92);
      border-radius:var(--radius);
      background:rgba(255,250,241,.88);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .faq-item summary{
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.95rem 1rem;
      color:var(--green);
      cursor:pointer;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary span{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      font-weight:600;
    }
    .faq-item .answer{
      padding:0 1rem 1rem;
      color:var(--muted);
      font-size:.94rem;
    }
    .faq-item[open]{
      border-color:rgba(23,55,40,.22);
    }
    .cta-band{
      margin-top:1rem;
      border:1px solid rgba(23,55,40,.16);
      border-radius:var(--radius);
      background:linear-gradient(135deg, rgba(23,55,40,.98), rgba(35,75,55,.96));
      color:#fff;
      box-shadow:0 18px 36px rgba(23,55,40,.18);
      overflow:hidden;
    }
    .cta-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1.2rem;
      flex-wrap:wrap;
    }
    .cta-inner p{
      color:rgba(255,250,241,.84);
      max-width:56ch;
      margin-top:.35rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
    }
    .cta-actions .btn-secondary{
      color:#fff;
      background:transparent;
      border-color:rgba(255,250,241,.42);
    }
    .cta-actions .btn-secondary:hover{
      background:rgba(255,250,241,.08);
      border-color:rgba(255,250,241,.62);
    }
    .site-footer{
      margin-top:1rem;
      border-top:1px solid rgba(216,202,179,.8);
      padding:1.1rem 0 5.5rem;
      color:var(--muted);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,.85fr);
      gap:1rem;
      align-items:start;
    }
    .footer-brand{
      color:var(--green);
      font-weight:700;
      font-size:1rem;
      margin-bottom:.45rem;
    }
    .footer-links{
      display:grid;
      gap:.45rem;
    }
    .footer-links a{
      color:var(--muted);
      transition:color .18s ease, transform .18s ease;
    }
    .footer-links a:hover{
      color:var(--green);
      transform:translateX(1px);
    }
    .footer-note{
      display:grid;
      gap:.4rem;
      justify-items:start;
    }
    .footer-line{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.4rem .65rem;
      border-radius:var(--radius);
      border:1px solid rgba(191,174,144,.92);
      background:#fffdf8;
      color:var(--green);
    }
    .bottom-cta{
      position:fixed;
      left:50%;
      transform:translateX(-50%);
      bottom:1rem;
      z-index:58;
      width:min(1180px, calc(100% - 2rem));
      border:1px solid rgba(23,55,40,.16);
      border-radius:var(--radius);
      background:rgba(255,250,241,.94);
      box-shadow:var(--shadow);
      backdrop-filter:blur(12px);
      overflow:hidden;
    }
    .bottom-cta-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.85rem 1rem;
      flex-wrap:wrap;
    }
    .bottom-cta strong{
      color:var(--green);
      display:block;
      margin-bottom:.15rem;
    }
    .bottom-cta span{
      color:var(--muted);
      font-size:.88rem;
    }
    .bottom-actions{
      display:flex;
      align-items:center;
      gap:.55rem;
      flex-wrap:wrap;
    }
    .bottom-actions .btn{
      min-height:2.55rem;
      padding:.62rem .9rem;
    }
    .ghost-btn{
      color:var(--green);
      border:1px solid rgba(191,174,144,.95);
      background:#fffdf8;
    }
    .ghost-btn:hover{
      border-color:rgba(23,55,40,.24);
      box-shadow:var(--shadow-soft);
    }
    @media (max-width: 1024px){
      .hero-grid,
      .flow-grid,
      .proof-grid,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .selection-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }
    @media (max-width: 768px){
      .dock-nav{
        flex-wrap:wrap;
      }
      .nav-scroll{
        order:3;
        flex:1 1 100%;
        padding-top:.15rem;
      }
      .dock-search{
        order:4;
        flex:1 1 100%;
        min-width:0;
      }
      .dock-cta{
        order:5;
        width:100%;
      }
      h1{
        font-size:1.95rem;
      }
      .band-grid{
        grid-template-columns:1fr;
      }
      .selection-grid{
        grid-template-columns:1fr;
      }
      .filter-tools{
        margin-left:0;
        width:100%;
        justify-content:flex-start;
      }
      .cta-inner,
      .bottom-cta-inner{
        align-items:flex-start;
      }
    }
    @media (max-width: 520px){
      .container{
        width:min(100% - 1rem, 1180px);
      }
      .dock-header{
        top:.5rem;
        padding:0 .5rem;
      }
      .dock-nav{
        padding:.75rem;
      }
      .hero{
        padding-top:.8rem;
      }
      .panel-head,
      .court-board,
      .band-item,
      .filter-bar,
      .select-card .card-content,
      .flow-panel,
      .proof-panel,
      .cta-inner,
      .site-footer{
        padding-left:.85rem;
        padding-right:.85rem;
      }
      .bottom-cta{
        left:0;
        transform:none;
        width:100%;
        bottom:0;
        border-radius:0;
      }
      .page-wrap{
        padding-bottom:10.5rem;
      }
    }