/* roulang page: index */
:root{
      --bg:#f5f1ea;
      --bg-soft:#efe8de;
      --panel:#fffaf2;
      --panel-2:#17191f;
      --panel-3:#20232b;
      --line:rgba(29,32,40,.12);
      --line-strong:rgba(29,32,40,.18);
      --text:#1e222b;
      --muted:#656c78;
      --muted-2:#8b929f;
      --gold:#c8a15a;
      --gold-2:#e0bd74;
      --emerald:#6abf8c;
      --emerald-2:#88d6a6;
      --amber:#dca84d;
      --shadow:0 18px 50px rgba(25,28,35,.08);
      --shadow-strong:0 24px 70px rgba(15,18,24,.14);
      --radius:18px;
      --radius-lg:26px;
      --radius-sm:12px;
      --container:1200px;
      --header-h:78px;
      --ease:cubic-bezier(.2,.7,.2,1);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 15% 0%, rgba(200,161,90,.10), transparent 28%),
        radial-gradient(circle at 90% 14%, rgba(106,191,140,.09), transparent 24%),
        linear-gradient(180deg, #f8f4ed 0%, #f2ede5 100%);
      overflow-x:hidden;
      line-height:1.65;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px) 0 0/72px 72px,
        linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px) 0 0/72px 72px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.14), transparent 28%);
      opacity:.25;
      z-index:-1;
    }
    a{color:inherit;text-decoration:none;transition:all .22s var(--ease)}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(200,161,90,.28)}
    .container{width:min(var(--container), calc(100% - 40px)); margin-inline:auto}
    .skip-link{
      position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden
    }
    .skip-link:focus{
      left:16px;top:16px;width:auto;height:auto;background:#fff;color:#111;
      padding:10px 14px;border-radius:999px;z-index:1000;box-shadow:var(--shadow)
    }

    .site-header{
      position:sticky;top:0;z-index:60;
      backdrop-filter: blur(18px);
      background:rgba(245,241,234,.78);
      border-bottom:1px solid rgba(34,38,45,.08);
    }
    .nav-shell{
      min-height:var(--header-h);
      display:flex;align-items:center;justify-content:space-between;gap:18px;
    }
    .brand{
      display:inline-flex;align-items:center;gap:12px;min-width:0;
      font-weight:900;letter-spacing:.02em;
    }
    .brand-mark{
      width:38px;height:38px;border-radius:14px;
      display:grid;place-items:center;
      color:#fff;
      background:
        linear-gradient(145deg, rgba(200,161,90,1), rgba(230,190,114,1));
      box-shadow:0 10px 24px rgba(200,161,90,.25), inset 0 1px 0 rgba(255,255,255,.35);
      border:1px solid rgba(255,255,255,.42);
      flex:none;
    }
    .brand-text{
      font-size:1.02rem;
      white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis;
    }
    .desktop-nav{
      display:flex;align-items:center;gap:10px;flex:1;justify-content:center;
    }
    .nav-link{
      display:inline-flex;align-items:center;justify-content:center;
      padding:10px 16px;
      border-radius:999px;
      color:var(--muted);
      border:1px solid transparent;
      background:transparent;
      font-weight:700;
      line-height:1;
    }
    .nav-link:hover,.nav-link:focus-visible{
      color:var(--text);
      background:rgba(255,255,255,.72);
      border-color:rgba(34,38,45,.08);
      transform:translateY(-1px);
      outline:none;
      box-shadow:0 10px 20px rgba(20,24,30,.06);
    }
    .nav-link.active,[aria-current="page"]{
      color:#201709;background:linear-gradient(180deg, rgba(224,189,116,.95), rgba(200,161,90,.86));
      border-color:rgba(255,255,255,.42);
      box-shadow:0 12px 24px rgba(200,161,90,.22);
    }
    .header-cta{
      display:inline-flex;align-items:center;justify-content:center;
      gap:8px;padding:12px 18px;border-radius:999px;
      background:linear-gradient(135deg, #1f2229, #2a2f39);
      color:#f6f1e6;font-weight:800;
      box-shadow:0 18px 28px rgba(17,19,24,.18);
      border:1px solid rgba(255,255,255,.10);
    }
    .header-cta:hover,.header-cta:focus-visible{
      transform:translateY(-1px);
      background:linear-gradient(135deg, #2a2f39, #323844);
      box-shadow:0 22px 34px rgba(17,19,24,.2);
      outline:none;
    }

    .menu-toggle{
      display:none;
      width:44px;height:44px;border-radius:14px;
      border:1px solid rgba(34,38,45,.08);
      background:rgba(255,255,255,.68);
      align-items:center;justify-content:center;
      box-shadow:0 8px 22px rgba(19,22,29,.05);
    }
    .menu-toggle span,
    .menu-toggle span::before,
    .menu-toggle span::after{
      display:block;width:18px;height:2px;border-radius:999px;background:#1f232b;position:relative;
    }
    .menu-toggle span::before,
    .menu-toggle span::after{content:"";position:absolute;left:0}
    .menu-toggle span::before{top:-6px}
    .menu-toggle span::after{top:6px}

    .mobile-drawer{
      position:fixed;inset:0;
      background:rgba(13,15,19,.58);
      opacity:0;pointer-events:none;
      transition:opacity .25s var(--ease);
      z-index:80;
    }
    .mobile-drawer.is-open{opacity:1;pointer-events:auto}
    .drawer-panel{
      position:absolute;right:0;top:0;bottom:0;width:min(92vw, 380px);
      background:linear-gradient(180deg, #fdfaf4, #f4eee4);
      box-shadow:-20px 0 40px rgba(13,15,19,.18);
      transform:translateX(100%);
      transition:transform .3s var(--ease);
      padding:22px;
      display:flex;flex-direction:column;gap:18px;
    }
    .mobile-drawer.is-open .drawer-panel{transform:translateX(0)}
    .drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .drawer-close{
      width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
      background:#fff;font-size:1.2rem;color:var(--text)
    }
    .drawer-links{display:grid;gap:10px;margin-top:6px}
    .drawer-links a{
      padding:14px 15px;border-radius:16px;background:#fff;border:1px solid var(--line);
      font-weight:800;
    }
    .drawer-links a.active{background:linear-gradient(135deg, rgba(224,189,116,.95), rgba(200,161,90,.88));color:#261a05}
    .drawer-actions{margin-top:auto;display:grid;gap:10px}
    .drawer-actions .btn{width:100%}

    .hero{
      position:relative;
      overflow:hidden;
      padding:34px 0 26px;
      background:
        radial-gradient(circle at 20% 20%, rgba(224,189,116,.18), transparent 22%),
        radial-gradient(circle at 82% 18%, rgba(136,214,166,.16), transparent 20%),
        linear-gradient(180deg, #15161b 0%, #1a1d24 55%, #17191f 100%);
      color:#f8f4ed;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .hero::before,.hero::after{
      content:"";
      position:absolute;inset:auto;
      width:420px;height:420px;border-radius:50%;
      filter:blur(24px);opacity:.18;pointer-events:none;
    }
    .hero::before{left:-120px;top:-120px;background:rgba(200,161,90,.8)}
    .hero::after{right:-140px;bottom:-140px;background:rgba(106,191,140,.8)}
    .hero-grid{
      display:grid;
      grid-template-columns:1.06fr .94fr;
      gap:28px;
      align-items:stretch;
      position:relative;
      z-index:1;
      min-height:560px;
      padding:16px 0 8px;
    }
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      color:#e7d3a7;background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      padding:8px 12px;border-radius:999px;
      font-size:.92rem;font-weight:700;letter-spacing:.03em;
    }
    .eyebrow::before{
      content:"";width:8px;height:8px;border-radius:50%;
      background:linear-gradient(180deg, var(--gold-2), var(--emerald-2));
      box-shadow:0 0 0 4px rgba(224,189,116,.12);
    }
    .hero-copy{
      display:flex;flex-direction:column;justify-content:center;
      padding:16px 0;
    }
    .hero h1{
      margin:18px 0 14px;
      font-size:clamp(2.45rem, 4.5vw, 4.9rem);
      line-height:1.06;
      letter-spacing:-.03em;
      max-width:12ch;
    }
    .hero p.lead{
      margin:0;
      max-width:62ch;
      color:rgba(248,244,237,.82);
      font-size:1.06rem;
    }
    .hero-points{
      display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px;
    }
    .hero-chip{
      display:inline-flex;align-items:center;gap:8px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.05);
      color:#f7f3eb;
      font-weight:700;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .hero-chip i{
      width:8px;height:8px;border-radius:50%;
      background:linear-gradient(180deg, var(--gold-2), var(--emerald-2));
      box-shadow:0 0 18px rgba(224,189,116,.38);
      display:inline-block;
    }
    .hero-actions{
      display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px;
    }
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      padding:13px 18px;border-radius:999px;
      border:1px solid transparent;
      font-weight:800;
      letter-spacing:.01em;
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), opacity .22s var(--ease);
      user-select:none;
    }
    .btn:focus-visible,.nav-link:focus-visible,.hero-card:focus-visible,.news-item a:focus-visible,.footer-links a:focus-visible,.dot:focus-visible,.carousel-btn:focus-visible,.accordion-button:focus-visible,.copy-btn:focus-visible,.chip:focus-visible{
      outline:3px solid rgba(224,189,116,.28);
      outline-offset:2px;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0)}
    .btn-primary{
      background:linear-gradient(135deg, #e0bd74 0%, #c8a15a 100%);
      color:#251901;
      box-shadow:0 18px 30px rgba(200,161,90,.22);
      border-color:rgba(255,255,255,.34);
    }
    .btn-primary:hover{box-shadow:0 20px 36px rgba(200,161,90,.30)}
    .btn-secondary{
      background:rgba(255,255,255,.06);
      color:#f7f3eb;border-color:rgba(255,255,255,.12);
    }
    .btn-secondary:hover{
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.18);
      box-shadow:0 14px 24px rgba(0,0,0,.12);
    }
    .btn-ghost{
      background:transparent;color:#f7f3eb;border-color:rgba(255,255,255,.14);
    }
    .btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
    .hero-stats{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      margin-top:30px;
    }
    .stat{
      padding:14px 16px;border-radius:16px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
    }
    .stat strong{display:block;font-size:1.08rem;color:#fff}
    .stat span{display:block;font-size:.92rem;color:rgba(248,244,237,.72)}

    .hero-stage{
      position:relative;
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
      align-content:center;
      padding:24px;
      border-radius:28px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(31,34,41,.88), rgba(24,27,33,.92)),
        radial-gradient(circle at top left, rgba(224,189,116,.10), transparent 28%),
        radial-gradient(circle at bottom right, rgba(106,191,140,.10), transparent 26%);
      box-shadow:var(--shadow-strong);
      overflow:hidden;
      min-height:520px;
    }
    .hero-stage::before{
      content:"";
      position:absolute;inset:18px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.06);
      background:
        linear-gradient(135deg, transparent 0%, rgba(255,255,255,.03) 50%, transparent 100%);
      pointer-events:none;
    }
    .portal{
      grid-column:1/-1;
      padding:18px 18px 16px;
      border-radius:22px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
      border:1px solid rgba(255,255,255,.08);
      position:relative;
      overflow:hidden;
    }
    .portal::after{
      content:"";
      position:absolute;inset:auto -40px -50px auto;width:180px;height:180px;
      background:radial-gradient(circle, rgba(224,189,116,.22), transparent 62%);
      filter:blur(8px);
    }
    .portal-head{
      display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px
    }
    .portal-title{
      display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.02rem;color:#fff
    }
    .portal-title .sigil{
      width:14px;height:14px;border-radius:5px;
      background:linear-gradient(135deg, var(--gold-2), var(--emerald-2));
      box-shadow:0 0 18px rgba(224,189,116,.28);
    }
    .portal-note{font-size:.9rem;color:rgba(248,244,237,.68)}
    .portal-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    .hero-card{
      min-height:126px;
      padding:14px 15px;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.09);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
      display:flex;flex-direction:column;justify-content:space-between;
      transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
    }
    .hero-card:hover{
      transform:translateY(-3px);
      border-color:rgba(224,189,116,.30);
      box-shadow:0 20px 32px rgba(0,0,0,.14);
    }
    .hero-card .card-top{
      display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;
      color:#fff;font-weight:900;
    }
    .hero-card small{color:rgba(248,244,237,.72);line-height:1.55}
    .hero-card .tag{
      display:inline-flex;align-self:flex-start;
      padding:6px 9px;border-radius:999px;
      background:rgba(255,255,255,.07);color:#f0e2c2;font-weight:700;font-size:.8rem;
      border:1px solid rgba(255,255,255,.08);
    }
    .hero-map{
      grid-column:1/-1;
      padding:16px 18px;
      border-radius:22px;
      background:
        linear-gradient(135deg, rgba(224,189,116,.12), rgba(255,255,255,.04)),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.09);
      display:flex;align-items:center;justify-content:space-between;gap:16px;
    }
    .hero-map strong{display:block;color:#fff;font-size:1rem}
    .hero-map span{display:block;color:rgba(248,244,237,.74);font-size:.92rem}
    .hero-map .map-badge{
      padding:10px 12px;border-radius:14px;
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);
      color:#fff;font-weight:800;white-space:nowrap;
    }

    main{display:block}
    .section{
      padding:72px 0;
    }
    .section-tight{padding:58px 0}
    .section-heading{
      display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
      margin-bottom:24px;
    }
    .section-heading h2{
      margin:0;
      font-size:clamp(1.6rem, 2.5vw, 2.5rem);
      line-height:1.15;
      letter-spacing:-.02em;
    }
    .section-heading p{
      margin:0;
      max-width:58ch;
      color:var(--muted);
      font-size:1rem;
    }
    .heading-copy{max-width:740px}
    .section-note{
      margin-top:8px;
      color:var(--muted);
      font-size:.98rem;
    }

    .chip-row{
      display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 18px;
    }
    .chip{
      display:inline-flex;align-items:center;gap:8px;
      padding:10px 14px;border-radius:999px;
      background:rgba(255,255,255,.72);
      border:1px solid var(--line);
      box-shadow:0 10px 20px rgba(23,26,31,.04);
      color:var(--muted);
      font-weight:700;
      transition:transform .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease);
    }
    .chip:hover,.chip.active{
      transform:translateY(-1px);
      color:var(--text);
      border-color:rgba(200,161,90,.28);
      background:#fff;
    }
    .chip.active{
      background:linear-gradient(135deg, rgba(224,189,116,.20), rgba(255,255,255,.98));
    }

    .carousel-shell{
      position:relative;
      border-radius:26px;
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,244,237,.86));
      border:1px solid rgba(34,38,45,.08);
      box-shadow:var(--shadow);
      padding:18px;
      overflow:hidden;
    }
    .carousel-top{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      margin-bottom:14px;
    }
    .carousel-nav{
      display:flex;align-items:center;gap:10px;
    }
    .carousel-btn{
      width:42px;height:42px;border-radius:14px;
      border:1px solid var(--line);
      background:#fff;color:var(--text);
      box-shadow:0 8px 20px rgba(24,28,35,.05);
    }
    .carousel-btn:hover{
      transform:translateY(-1px);
      border-color:rgba(200,161,90,.28);
      box-shadow:0 14px 24px rgba(24,28,35,.08);
    }
    .carousel{
      display:flex;
      gap:16px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scroll-behavior:smooth;
      padding-bottom:8px;
      scrollbar-width:none;
    }
    .carousel::-webkit-scrollbar{display:none}
    .slide{
      scroll-snap-align:start;
      flex:0 0 auto;
      min-height:220px;
      border-radius:22px;
      padding:18px;
      border:1px solid rgba(34,38,45,.08);
      background:
        radial-gradient(circle at top right, rgba(224,189,116,.10), transparent 28%),
        linear-gradient(180deg, #ffffff, #f8f4ed);
      box-shadow:0 14px 26px rgba(18,22,28,.05);
      position:relative;
      overflow:hidden;
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
    }
    .slide:hover{
      transform:translateY(-3px);
      border-color:rgba(200,161,90,.25);
      box-shadow:0 18px 36px rgba(18,22,28,.08);
    }
    .slide.large{width:min(390px, 74vw)}
    .slide.medium{width:min(300px, 64vw)}
    .slide.small{width:min(240px, 56vw)}
    .slide .mini-icon{
      width:46px;height:46px;border-radius:16px;
      display:grid;place-items:center;
      color:#fff;
      background:linear-gradient(135deg, #1f232b, #2c313b);
      box-shadow:0 14px 24px rgba(19,22,28,.12);
      margin-bottom:14px;
    }
    .slide h3{
      margin:0 0 8px;
      font-size:1.1rem;
      line-height:1.3;
    }
    .slide p{margin:0;color:var(--muted);font-size:.96rem}
    .slide .slide-foot{
      margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:10px;
      color:var(--muted-2);font-size:.9rem
    }
    .slide .badge{
      padding:7px 10px;border-radius:999px;
      background:rgba(200,161,90,.12);
      color:#745214;
      border:1px solid rgba(200,161,90,.16);
      font-weight:700;
    }
    .carousel-dots{
      display:flex;gap:8px;justify-content:center;margin-top:14px
    }
    .dot{
      width:9px;height:9px;border-radius:999px;
      background:rgba(32,35,43,.20);
      border:none;
      transition:all .22s var(--ease);
    }
    .dot.active{width:26px;background:linear-gradient(135deg, var(--gold), var(--emerald));}

    .info-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
    }
    .info-card{
      position:relative;
      padding:18px;
      border-radius:22px;
      background:linear-gradient(180deg, #fff, #f8f4ec);
      border:1px solid var(--line);
      box-shadow:0 12px 24px rgba(22,26,32,.05);
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
      overflow:hidden;
      min-height:200px;
    }
    .info-card::before{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(135deg, rgba(224,189,116,.12), transparent 34%);
      pointer-events:none;
    }
    .info-card:hover{
      transform:translateY(-4px);
      border-color:rgba(200,161,90,.24);
      box-shadow:0 18px 34px rgba(22,26,32,.08);
    }
    .info-ico{
      width:48px;height:48px;border-radius:16px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, #1f232b, #313845);
      color:#fff;
      margin-bottom:14px;
      box-shadow:0 14px 26px rgba(16,18,24,.14);
    }
    .info-card h3{margin:0 0 8px;font-size:1.05rem}
    .info-card p{margin:0;color:var(--muted);font-size:.96rem}
    .check-list{
      margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px
    }
    .check-list li{
      display:flex;gap:9px;align-items:flex-start;color:#39404d;font-size:.93rem
    }
    .check-list li::before{
      content:"";width:8px;height:8px;border-radius:50%;
      background:linear-gradient(180deg, var(--gold), var(--emerald));
      box-shadow:0 0 0 4px rgba(200,161,90,.08);
      flex:none;margin-top:8px
    }

    .timeline{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
      position:relative;
    }
    .timeline::before{
      content:"";position:absolute;left:8%;right:8%;top:42px;height:2px;
      background:linear-gradient(90deg, rgba(200,161,90,.1), rgba(200,161,90,.38), rgba(106,191,140,.26));
      z-index:0;
    }
    .step{
      position:relative;z-index:1;
      padding:20px 18px;
      border-radius:22px;
      background:linear-gradient(180deg, #fff, #f8f4ec);
      border:1px solid var(--line);
      box-shadow:0 12px 24px rgba(22,26,32,.05);
      min-height:190px;
    }
    .step .num{
      width:38px;height:38px;border-radius:14px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, var(--gold), #efce87);
      color:#251901;font-weight:900;
      margin-bottom:14px;
      box-shadow:0 12px 24px rgba(200,161,90,.18);
    }
    .step h3{margin:0 0 8px;font-size:1.06rem}
    .step p{margin:0;color:var(--muted);font-size:.96rem}

    .news-layout{
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:18px;
      align-items:start;
    }
    .news-list{
      display:grid;
      gap:10px;
      padding:0;margin:0;list-style:none;
    }
    .news-item a{
      display:flex;justify-content:space-between;gap:14px;
      align-items:flex-start;
      padding:15px 16px;
      border-radius:18px;
      background:linear-gradient(180deg, #fff, #f9f5ee);
      border:1px solid var(--line);
      box-shadow:0 10px 20px rgba(22,26,32,.04);
    }
    .news-item a:hover{
      transform:translateY(-2px);
      border-color:rgba(200,161,90,.24);
      box-shadow:0 16px 26px rgba(22,26,32,.07);
    }
    .news-copy{min-width:0}
    .news-copy strong{display:block;margin-bottom:4px;font-size:1.01rem}
    .news-copy span{display:block;color:var(--muted);font-size:.95rem}
    .news-tag{
      flex:none;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(106,191,140,.12);
      color:#2f6a46;
      border:1px solid rgba(106,191,140,.18);
      font-size:.84rem;
      font-weight:700;
      white-space:nowrap;
    }
    .news-aside{
      position:sticky;top:98px;
      padding:22px;
      border-radius:24px;
      background:
        radial-gradient(circle at top right, rgba(200,161,90,.12), transparent 30%),
        linear-gradient(180deg, #1b1e24, #22262e);
      color:#f5f1e8;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-strong);
    }
    .news-aside h3{margin:0 0 10px;font-size:1.15rem}
    .news-aside p{margin:0 0 16px;color:rgba(245,241,232,.76)}
    .side-list{display:grid;gap:10px;list-style:none;padding:0;margin:0}
    .side-list li{
      display:flex;gap:10px;align-items:flex-start;
      color:rgba(245,241,232,.88);font-size:.96rem
    }
    .side-list li::before{
      content:"";width:9px;height:9px;border-radius:50%;
      background:linear-gradient(180deg, var(--gold-2), var(--emerald-2));
      box-shadow:0 0 14px rgba(224,189,116,.24);
      flex:none;margin-top:8px
    }
    .mini-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
    .mini-actions .btn{padding:11px 14px;font-size:.95rem}

    .reviews-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr .85fr;
      gap:16px;
    }
    .review-card{
      padding:18px;
      border-radius:22px;
      background:linear-gradient(180deg, #fff, #f8f4ed);
      border:1px solid var(--line);
      box-shadow:0 12px 24px rgba(22,26,32,.05);
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
      min-height:220px;
    }
    .review-card:hover{
      transform:translateY(-3px);
      border-color:rgba(200,161,90,.24);
      box-shadow:0 18px 36px rgba(22,26,32,.08);
    }
    .review-card.featured{
      background:
        radial-gradient(circle at top right, rgba(224,189,116,.11), transparent 22%),
        linear-gradient(180deg, #ffffff, #faf6ef);
      min-height:240px;
    }
    .review-head{
      display:flex;align-items:center;gap:12px;margin-bottom:14px
    }
    .avatar{
      width:48px;height:48px;border-radius:50%;
      display:grid;place-items:center;
      color:#fff;font-weight:900;
      background:linear-gradient(135deg, #1f232b, #3d4451);
      box-shadow:0 12px 22px rgba(17,21,27,.12);
      flex:none;
    }
    .avatar.gold{background:linear-gradient(135deg, #d9b16a, #b98535)}
    .avatar.green{background:linear-gradient(135deg, #68b88a, #3f8d63)}
    .review-name{font-weight:900}
    .stars{color:#d89f3f;letter-spacing:1px;font-size:.93rem}
    .review-text{margin:0;color:#3b424f;font-size:.97rem}
    .review-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
    .review-tags .badge{
      padding:7px 10px;border-radius:999px;
      background:rgba(200,161,90,.10);
      border:1px solid rgba(200,161,90,.16);
      color:#725317;font-weight:700;font-size:.84rem
    }

    .trust-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
    }
    .trust-card{
      padding:18px;
      border-radius:22px;
      background:linear-gradient(180deg, #fff, #f8f4ec);
      border:1px solid var(--line);
      box-shadow:0 12px 24px rgba(22,26,32,.05);
      min-height:176px;
    }
    .trust-card h3{margin:0 0 10px;font-size:1.04rem}
    .trust-card p{margin:0;color:var(--muted);font-size:.95rem}
    .trust-card .kicker{
      display:inline-flex;
      padding:7px 10px;border-radius:999px;
      background:rgba(106,191,140,.12);
      color:#2f6b48;font-size:.84rem;font-weight:700;
      margin-bottom:12px;
    }

    .cta-band{
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at left top, rgba(224,189,116,.14), transparent 24%),
        radial-gradient(circle at right bottom, rgba(106,191,140,.14), transparent 24%),
        linear-gradient(180deg, #17191f, #1f232b);
      color:#f8f4ed;
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .cta-grid{
      display:grid;
      grid-template-columns:1fr .92fr;
      gap:18px;
      align-items:center;
    }
    .cta-box{
      padding:28px;
      border-radius:28px;
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-strong);
    }
    .cta-box h2{margin:0 0 12px;font-size:clamp(1.7rem, 2.5vw, 2.8rem);line-height:1.15}
    .cta-box p{margin:0;color:rgba(248,244,237,.78);max-width:58ch}
    .cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
    .cta-actions .btn{min-width:140px}
    .copy-card{
      padding:22px;
      border-radius:26px;
      background:
        radial-gradient(circle at top right, rgba(224,189,116,.12), transparent 28%),
        rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
    }
    .copy-card label{
      display:block;margin-bottom:10px;color:rgba(248,244,237,.8);font-weight:700
    }
    .copy-row{display:flex;gap:10px}
    .copy-input{
      flex:1;
      padding:14px 15px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(14,16,20,.28);
      color:#fff;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .copy-input::placeholder{color:rgba(248,244,237,.5)}
    .copy-btn{
      padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);
      background:linear-gradient(135deg, #e0bd74, #c8a15a);
      color:#241900;font-weight:900;
      white-space:nowrap;
    }
    .copy-btn:hover{transform:translateY(-1px);box-shadow:0 16px 24px rgba(200,161,90,.18)}
    .copy-hint{margin-top:10px;color:rgba(248,244,237,.66);font-size:.92rem}

    .faq-wrap{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }
    .accordion-item{
      background:linear-gradient(180deg, #fff, #f8f4ec);
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:0 12px 22px rgba(22,26,32,.04);
      overflow:hidden;
    }
    .accordion-button{
      width:100%;
      display:flex;justify-content:space-between;align-items:center;gap:16px;
      padding:18px;
      border:none;background:transparent;color:var(--text);text-align:left;
      font-weight:900;font-size:1.02rem;
    }
    .accordion-icon{
      width:34px;height:34px;border-radius:12px;
      display:grid;place-items:center;
      background:rgba(200,161,90,.12);
      color:#7c5a16;
      transition:transform .22s var(--ease), background .22s var(--ease);
      flex:none;
    }
    .accordion-item.active .accordion-icon{transform:rotate(45deg);background:rgba(106,191,140,.14);color:#2a6c48}
    .accordion-panel{
      max-height:0;overflow:hidden;
      transition:max-height .32s var(--ease);
    }
    .accordion-content{
      padding:0 18px 18px;color:var(--muted);font-size:.96rem;
    }

    .site-footer{
      padding:40px 0 110px;
      border-top:1px solid rgba(34,38,45,.08);
      background:
        radial-gradient(circle at 20% 0%, rgba(200,161,90,.08), transparent 22%),
        linear-gradient(180deg, #f4efe6, #f0e8dd);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr .8fr;
      gap:20px;
      align-items:start;
    }
    .footer-brand{display:flex;flex-direction:column;gap:14px}
    .footer-brand p{margin:0;color:var(--muted);max-width:52ch}
    .footer-links{
      display:grid;gap:10px;
    }
    .footer-links a{
      display:inline-flex;align-items:center;gap:8px;
      color:var(--muted);
      font-weight:700;
    }
    .footer-links a:hover{color:var(--text);transform:translateX(2px)}
    .footer-meta{
      color:var(--muted);font-size:.95rem;display:grid;gap:8px
    }
    .footer-mark{
      display:inline-flex;align-items:center;gap:10px;font-weight:900;color:var(--text)
    }
    .footer-mark .brand-mark{transform:scale(.92)}
    .copyright{
      margin-top:24px;
      padding-top:16px;
      border-top:1px solid rgba(34,38,45,.08);
      color:var(--muted-2);
      font-size:.92rem;
      display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
    }

    .mobile-bar{
      position:fixed;
      left:0;right:0;bottom:0;
      z-index:55;
      display:none;
      padding:10px 12px calc(10px + env(safe-area-inset-bottom));
      background:rgba(245,241,234,.86);
      backdrop-filter:blur(18px);
      border-top:1px solid rgba(34,38,45,.08);
      box-shadow:0 -10px 30px rgba(19,22,28,.08);
    }
    .mobile-bar-inner{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    .mobile-bar .btn{
      width:100%;
      padding:13px 10px;
      border-radius:16px;
      font-size:.95rem;
      min-width:0;
    }

    .to-top{
      position:fixed;right:18px;bottom:96px;z-index:54;
      width:46px;height:46px;border-radius:16px;border:1px solid var(--line);
      background:rgba(255,255,255,.86);color:var(--text);
      box-shadow:var(--shadow);
      opacity:0;pointer-events:none;transform:translateY(10px);
      transition:all .22s var(--ease);
    }
    .to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
    .toast{
      position:fixed;left:50%;bottom:114px;transform:translateX(-50%) translateY(10px);
      background:#1f232b;color:#f7f3eb;
      padding:12px 16px;border-radius:999px;
      box-shadow:var(--shadow-strong);
      opacity:0;pointer-events:none;
      transition:all .26s var(--ease);
      z-index:90;
      border:1px solid rgba(255,255,255,.08);
      font-size:.95rem;
    }
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

    @media (max-width: 1180px){
      .hero-grid{grid-template-columns:1fr}
      .hero-stage{min-height:auto}
      .news-layout,.cta-grid,.footer-grid{grid-template-columns:1fr}
      .news-aside{position:static}
      .reviews-grid{grid-template-columns:1fr 1fr}
      .reviews-grid .featured{grid-column:1/-1}
      .info-grid,.timeline,.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .section-heading{flex-direction:column;align-items:flex-start}
      .section-heading p{max-width:none}
    }
    @media (max-width: 900px){
      .desktop-nav,.header-cta{display:none}
      .menu-toggle{display:inline-flex}
      .hero{padding-top:20px}
      .hero h1{max-width:100%}
      .hero-stats{grid-template-columns:1fr}
      .portal-grid{grid-template-columns:1fr}
      .hero-stage{padding:18px}
      .slide.large,.slide.medium,.slide.small{width:min(86vw, 100%)}
      .info-grid,.timeline,.trust-grid,.reviews-grid{grid-template-columns:1fr}
      .timeline::before{display:none}
      .copy-row{flex-direction:column}
      .copy-btn{width:100%}
    }
    @media (max-width: 768px){
      .section{padding:56px 0}
      .mobile-bar{display:block}
      .to-top{bottom:166px}
      .hero h1{font-size:clamp(2.1rem, 9vw, 3.4rem)}
      .hero p.lead{font-size:1rem}
      .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
      .hero-actions .btn:last-child{grid-column:1/-1}
      .carousel-shell{padding:14px}
      .carousel-top{align-items:flex-start;flex-direction:column}
      .carousel-nav{width:100%;justify-content:flex-end}
      .footer-grid{gap:14px}
      .copyright{flex-direction:column}
    }
    @media (max-width: 520px){
      .container{width:min(var(--container), calc(100% - 28px))}
      .brand-text{font-size:.95rem}
      .hero-stage,.cta-box,.news-aside{border-radius:22px}
      .hero-card,.info-card,.step,.review-card,.trust-card,.accordion-item,.news-item a{border-radius:16px}
      .hero-actions,.mini-actions{grid-template-columns:1fr}
      .hero-actions{display:grid}
      .hero-actions .btn{width:100%}
      .stat strong{font-size:1rem}
      .hero-map{flex-direction:column;align-items:flex-start}
      .mobile-bar .btn{padding:12px 8px;font-size:.9rem}
      .footer-links{grid-template-columns:1fr}
    }

/* roulang page: category2 */
:root{
      --bg: #f4efe5;
      --bg-soft: #ece4d7;
      --bg-alt: #e8e0d3;
      --panel: rgba(255,255,255,.78);
      --panel-strong: #16181d;
      --panel-deep: #1b1d22;
      --text: #1d232d;
      --text-strong: #0f1217;
      --muted: #66707f;
      --line: rgba(24, 28, 35, .12);
      --line-strong: rgba(255,255,255,.12);
      --gold: #b58a45;
      --gold-2: #d0a763;
      --emerald: #4f8670;
      --jade: #2e6f5a;
      --amber: #d6ad57;
      --shadow: 0 18px 40px rgba(26, 22, 16, .08);
      --shadow-strong: 0 26px 60px rgba(20, 18, 16, .16);
      --radius: 18px;
      --radius-sm: 12px;
      --radius-lg: 28px;
      --container: 1200px;
      --header-h: 72px;
      --transition: 220ms cubic-bezier(.2,.8,.2,1);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:
        radial-gradient(circle at top left, rgba(213, 172, 92, .13), transparent 28%),
        radial-gradient(circle at top right, rgba(79, 134, 112, .12), transparent 24%),
        linear-gradient(180deg, #f7f3eb 0%, #efe7da 42%, #f5f1e8 100%);
      color:var(--text);
      line-height:1.7;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{border:0;background:none;color:inherit;cursor:pointer}
    ::selection{background:rgba(181,138,69,.2);color:#111}
    ::-webkit-scrollbar{width:10px;height:10px}
    ::-webkit-scrollbar-track{background:rgba(20,20,20,.04)}
    ::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(181,138,69,.55), rgba(79,134,112,.55));border-radius:999px}

    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:80;
      backdrop-filter:saturate(160%) blur(18px);
      background:linear-gradient(180deg, rgba(247,242,233,.92) 0%, rgba(244,239,229,.78) 100%);
      border-bottom:1px solid rgba(31, 34, 40, .08);
      transition:box-shadow var(--transition), background var(--transition), transform var(--transition);
    }
    .site-header.is-scrolled{
      background:linear-gradient(180deg, rgba(246,241,232,.97) 0%, rgba(240,233,222,.92) 100%);
      box-shadow:0 12px 30px rgba(35, 29, 21, .08);
    }
    .nav-shell{
      min-height:var(--header-h);
      display:flex;
      align-items:center;
      gap:18px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      letter-spacing:.02em;
      color:var(--text-strong);
      white-space:nowrap;
    }
    .brand-mark{
      width:28px;
      height:28px;
      display:grid;
      place-items:center;
      border-radius:10px;
      color:#efe5cf;
      background:linear-gradient(145deg, #201b16, #5a4525);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 20px rgba(25,19,10,.16);
      font-size:.95rem;
      flex:none;
    }
    .brand-text{
      font-size:1.02rem;
      line-height:1.1;
    }

    .desktop-nav{
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:auto;
      margin-right:0;
      flex-wrap:wrap;
      justify-content:center;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 16px;
      border-radius:999px;
      color:var(--muted);
      border:1px solid transparent;
      transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      color:var(--text-strong);
      background:rgba(255,255,255,.7);
      border-color:rgba(27,31,38,.08);
      box-shadow:0 10px 24px rgba(25, 21, 15, .06);
      transform:translateY(-1px);
      outline:none;
    }
    .nav-link.active{
      color:#171717;
      background:linear-gradient(145deg, rgba(181,138,69,.16), rgba(79,134,112,.12));
      border-color:rgba(181,138,69,.28);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
    }

    .header-cta,
    .primary-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:44px;
      padding:0 18px;
      border-radius:999px;
      background:linear-gradient(145deg, var(--gold), var(--amber));
      color:#1b1710;
      font-weight:800;
      letter-spacing:.02em;
      box-shadow:0 14px 30px rgba(181,138,69,.24);
      transition:transform var(--transition), box-shadow var(--transition), filter var(--transition), background var(--transition);
      white-space:nowrap;
    }
    .header-cta:hover,
    .header-cta:focus-visible,
    .primary-btn:hover,
    .primary-btn:focus-visible{
      transform:translateY(-2px);
      box-shadow:0 18px 36px rgba(181,138,69,.32);
      filter:saturate(1.04);
      outline:none;
    }
    .header-cta:active,
    .primary-btn:active{
      transform:translateY(0);
      box-shadow:0 10px 22px rgba(181,138,69,.22);
    }

    .secondary-btn,
    .ghost-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid rgba(28, 33, 42, .14);
      background:rgba(255,255,255,.65);
      color:#20252d;
      font-weight:700;
      transition:transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition);
      white-space:nowrap;
    }
    .secondary-btn:hover,
    .secondary-btn:focus-visible,
    .ghost-btn:hover,
    .ghost-btn:focus-visible{
      transform:translateY(-2px);
      border-color:rgba(181,138,69,.32);
      box-shadow:0 14px 26px rgba(19, 18, 16, .06);
      color:#111;
      outline:none;
    }
    .secondary-btn:active,
    .ghost-btn:active{
      transform:translateY(0);
    }

    .menu-toggle{
      display:none;
      width:46px;
      height:46px;
      border-radius:14px;
      border:1px solid rgba(25, 30, 36, .12);
      background:rgba(255,255,255,.72);
      position:relative;
      flex:none;
      margin-left:auto;
      box-shadow:0 8px 20px rgba(28,24,17,.05);
      transition:transform var(--transition), border-color var(--transition), background var(--transition);
    }
    .menu-toggle:hover,
    .menu-toggle:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(181,138,69,.35);
      outline:none;
    }
    .menu-toggle span,
    .menu-toggle span::before,
    .menu-toggle span::after{
      position:absolute;
      left:50%;
      width:18px;
      height:2px;
      margin-left:-9px;
      border-radius:99px;
      background:#242424;
      content:"";
      transition:transform var(--transition), top var(--transition), opacity var(--transition);
    }
    .menu-toggle span{top:50%;margin-top:-1px}
    .menu-toggle span::before{top:-6px}
    .menu-toggle span::after{top:6px}
    .menu-toggle.is-active span{background:transparent}
    .menu-toggle.is-active span::before{top:0;transform:rotate(45deg)}
    .menu-toggle.is-active span::after{top:0;transform:rotate(-45deg)}

    .mobile-drawer{
      position:fixed;
      inset:0;
      z-index:90;
      pointer-events:none;
      opacity:0;
      transition:opacity var(--transition);
    }
    .mobile-drawer.is-open{
      pointer-events:auto;
      opacity:1;
    }
    .drawer-backdrop{
      position:absolute;
      inset:0;
      background:rgba(10, 12, 15, .42);
      backdrop-filter:blur(8px);
    }
    .drawer-panel{
      position:absolute;
      top:0;
      right:0;
      width:min(92vw, 360px);
      height:100%;
      background:linear-gradient(180deg, rgba(248,244,236,.98), rgba(239,232,220,.98));
      box-shadow:-20px 0 60px rgba(23, 18, 12, .18);
      padding:18px;
      transform:translateX(104%);
      transition:transform var(--transition);
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    .mobile-drawer.is-open .drawer-panel{transform:translateX(0)}
    .drawer-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .drawer-brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      color:var(--text-strong);
    }
    .drawer-close{
      width:42px;
      height:42px;
      border-radius:12px;
      border:1px solid rgba(29, 33, 40, .1);
      background:rgba(255,255,255,.72);
      font-size:1.15rem;
      line-height:1;
      transition:transform var(--transition), border-color var(--transition);
    }
    .drawer-close:hover,
    .drawer-close:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(181,138,69,.32);
      outline:none;
    }
    .drawer-nav{
      display:grid;
      gap:10px;
    }
    .drawer-nav .nav-link{
      justify-content:flex-start;
      width:100%;
      padding:13px 16px;
      background:rgba(255,255,255,.7);
    }
    .drawer-actions{
      display:grid;
      gap:10px;
      margin-top:auto;
    }
    .drawer-note{
      font-size:.92rem;
      color:var(--muted);
      background:rgba(255,255,255,.66);
      border:1px solid rgba(31, 34, 40, .08);
      border-radius:16px;
      padding:14px 14px 13px;
    }

    .hero-panel{
      padding:22px 0 12px;
      position:relative;
      overflow:hidden;
    }
    .hero-panel::before,
    .hero-panel::after{
      content:"";
      position:absolute;
      pointer-events:none;
      inset:auto;
      border-radius:50%;
      filter:blur(6px);
      opacity:.55;
    }
    .hero-panel::before{
      width:260px;
      height:260px;
      background:radial-gradient(circle, rgba(181,138,69,.16), transparent 70%);
      top:-70px;
      left:-80px;
    }
    .hero-panel::after{
      width:360px;
      height:360px;
      background:radial-gradient(circle, rgba(79,134,112,.14), transparent 68%);
      right:-120px;
      top:40px;
    }

    .crumbs{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      color:var(--muted);
      font-size:.95rem;
      margin-bottom:14px;
    }
    .crumbs span{opacity:.6}

    .hero-banner{
      background:
        linear-gradient(135deg, rgba(255,255,255,.74), rgba(246,240,230,.88)),
        radial-gradient(circle at top right, rgba(181,138,69,.14), transparent 24%),
        radial-gradient(circle at bottom left, rgba(79,134,112,.11), transparent 22%);
      border:1px solid rgba(32, 36, 44, .08);
      border-radius:28px;
      box-shadow:var(--shadow);
      padding:24px;
      position:relative;
      overflow:hidden;
    }
    .hero-banner::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,.42) 14%, transparent 28%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.02) 100%);
      opacity:.65;
      pointer-events:none;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0, 1.2fr) minmax(340px, .95fr);
      gap:22px;
      align-items:stretch;
      position:relative;
      z-index:1;
    }

    .hero-copy{
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:330px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:fit-content;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(181,138,69,.12);
      color:#8e6a2c;
      font-size:.92rem;
      font-weight:700;
      letter-spacing:.02em;
      margin-bottom:14px;
      border:1px solid rgba(181,138,69,.16);
    }
    .hero-copy h1{
      margin:0 0 16px;
      color:#12161b;
      font-size:clamp(2.1rem, 4vw, 4rem);
      line-height:1.06;
      letter-spacing:-.03em;
      max-width:11ch;
    }
    .hero-copy p{
      margin:0 0 18px;
      max-width:54ch;
      font-size:1.02rem;
      color:var(--muted);
    }
    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:2px 0 18px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      background:rgba(255,255,255,.8);
      border:1px solid rgba(29, 33, 40, .08);
      color:#313641;
      font-size:.92rem;
      box-shadow:0 10px 18px rgba(25, 22, 16, .04);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-bottom:14px;
    }
    .hero-note{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:.92rem;
      color:#6a717d;
    }
    .hero-note::before{
      content:"";
      width:10px;
      height:10px;
      border-radius:50%;
      background:linear-gradient(145deg, var(--emerald), var(--gold));
      box-shadow:0 0 0 6px rgba(79,134,112,.08);
      flex:none;
    }

    .hero-visual{
      position:relative;
      min-height:330px;
    }
    .visual-frame{
      height:100%;
      border-radius:24px;
      background:
        linear-gradient(160deg, rgba(21,23,28,.98), rgba(28,32,38,.95)),
        radial-gradient(circle at 20% 20%, rgba(181,138,69,.22), transparent 22%),
        radial-gradient(circle at 85% 10%, rgba(79,134,112,.22), transparent 20%);
      color:#f6f0e0;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 50px rgba(18, 18, 20, .24);
      overflow:hidden;
      position:relative;
      padding:18px;
    }
    .visual-frame::before{
      content:"";
      position:absolute;
      inset:-20% -10% auto auto;
      width:260px;
      height:260px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(213,171,92,.12), transparent 68%);
      pointer-events:none;
    }
    .visual-frame::after{
      content:"";
      position:absolute;
      inset:auto auto -18% -10%;
      width:300px;
      height:300px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(79,134,112,.1), transparent 70%);
      pointer-events:none;
    }
    .visual-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-weight:800;
      letter-spacing:.03em;
      margin-bottom:14px;
      position:relative;
      z-index:1;
    }
    .visual-title small{
      font-weight:600;
      color:rgba(240,236,225,.72);
    }
    .signal-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      position:relative;
      z-index:1;
    }
    .signal-card{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.1);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      padding:14px;
      min-height:96px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }
    .signal-card span{
      color:rgba(240,236,225,.68);
      font-size:.9rem;
    }
    .signal-card strong{
      font-size:1.34rem;
      letter-spacing:-.02em;
      line-height:1.15;
    }
    .signal-card.note{
      grid-column:1/-1;
      min-height:auto;
      padding:18px;
      background:
        radial-gradient(circle at top right, rgba(181,138,69,.18), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    }
    .signal-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:12px;
    }
    .signal-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:8px 12px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.1);
      color:#f4ecda;
      font-size:.9rem;
    }

    .section{
      padding:26px 0;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:18px;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#8d6c34;
      font-weight:800;
      font-size:.9rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      margin-bottom:8px;
    }
    .section-head h2{
      margin:0 0 6px;
      color:var(--text-strong);
      font-size:clamp(1.35rem, 2vw, 2rem);
      line-height:1.15;
      letter-spacing:-.02em;
    }
    .section-head p{
      margin:0;
      color:var(--muted);
      max-width:60ch;
    }

    .quick-search{
      display:flex;
      gap:10px;
      align-items:center;
      width:min(420px, 100%);
    }
    .quick-search input{
      flex:1;
      min-height:48px;
      padding:0 14px;
      border-radius:14px;
      border:1px solid rgba(29, 33, 40, .12);
      background:rgba(255,255,255,.75);
      color:var(--text);
      outline:none;
      transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
      box-shadow:0 10px 24px rgba(28, 21, 15, .04);
    }
    .quick-search input::placeholder{color:#8a8f98}
    .quick-search input:focus{
      border-color:rgba(181,138,69,.5);
      box-shadow:0 0 0 4px rgba(181,138,69,.14);
      background:#fff;
    }
    .quick-search button{
      min-height:48px;
      padding:0 16px;
      border-radius:14px;
      background:linear-gradient(145deg, #1c2129, #2d3138);
      color:#f6efe2;
      font-weight:700;
      box-shadow:0 14px 28px rgba(20, 20, 24, .16);
      transition:transform var(--transition), box-shadow var(--transition), filter var(--transition);
    }
    .quick-search button:hover,
    .quick-search button:focus-visible{
      transform:translateY(-1px);
      box-shadow:0 18px 32px rgba(20, 20, 24, .2);
      filter:brightness(1.02);
      outline:none;
    }

    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:42px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(31, 35, 42, .1);
      background:rgba(255,255,255,.74);
      color:#414852;
      transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    }
    .chip:hover,
    .chip:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(181,138,69,.28);
      box-shadow:0 10px 20px rgba(24, 20, 14, .06);
      outline:none;
    }
    .chip.is-active{
      background:linear-gradient(145deg, rgba(181,138,69,.16), rgba(79,134,112,.11));
      border-color:rgba(181,138,69,.24);
      color:#191510;
      font-weight:700;
    }

    .stream-layout{
      display:grid;
      grid-template-columns:minmax(0, 1.9fr) minmax(300px, .95fr);
      gap:22px;
      align-items:start;
    }

    .feature-spot{
      background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(244,237,225,.9)),
        radial-gradient(circle at top right, rgba(181,138,69,.12), transparent 24%);
      border:1px solid rgba(29, 33, 40, .08);
      border-radius:26px;
      box-shadow:var(--shadow);
      padding:22px;
      display:grid;
      grid-template-columns:minmax(0, 1.05fr) minmax(260px, .95fr);
      gap:18px;
      overflow:hidden;
      position:relative;
    }
    .feature-spot::before{
      content:"";
      position:absolute;
      inset:auto -10% -22% auto;
      width:280px;
      height:280px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(79,134,112,.13), transparent 70%);
      pointer-events:none;
    }
    .feature-copy{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:12px;
    }
    .tag{
      width:fit-content;
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(21, 24, 28, .06);
      color:#58606c;
      font-size:.9rem;
      font-weight:700;
    }
    .feature-copy h2{
      margin:0;
      font-size:clamp(1.5rem, 2.3vw, 2.4rem);
      line-height:1.1;
      color:#151820;
      letter-spacing:-.03em;
    }
    .feature-copy p{
      margin:0;
      color:var(--muted);
      max-width:45ch;
    }
    .mini-metrics{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:4px;
    }
    .mini-metrics .metric{
      min-width:112px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(31, 35, 42, .08);
      box-shadow:0 10px 20px rgba(26, 20, 14, .04);
    }
    .metric strong{
      display:block;
      font-size:1.08rem;
      color:#14181f;
    }
    .metric span{
      display:block;
      color:var(--muted);
      font-size:.88rem;
    }

    .feature-visual{
      border-radius:22px;
      background:
        radial-gradient(circle at top left, rgba(181,138,69,.16), transparent 22%),
        linear-gradient(180deg, rgba(23, 25, 31, .98), rgba(30, 34, 41, .98));
      color:#f4ecda;
      padding:18px;
      position:relative;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.06);
      min-height:270px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    }
    .feature-visual::before,
    .feature-visual::after{
      content:"";
      position:absolute;
      border-radius:50%;
      pointer-events:none;
    }
    .feature-visual::before{
      width:190px;
      height:190px;
      right:-40px;
      top:-38px;
      background:radial-gradient(circle, rgba(213,171,92,.18), transparent 66%);
    }
    .feature-visual::after{
      width:220px;
      height:220px;
      left:-60px;
      bottom:-74px;
      background:radial-gradient(circle, rgba(79,134,112,.14), transparent 68%);
    }
    .visual-map{
      display:grid;
      gap:12px;
      position:relative;
      z-index:1;
    }
    .visual-map-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-weight:700;
      color:#f7f0df;
    }
    .glow-ring{
      width:104px;
      height:104px;
      margin:8px auto 2px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(circle at center, rgba(255,255,255,.16) 0 8%, transparent 10% 100%),
        radial-gradient(circle at center, rgba(181,138,69,.2), transparent 55%);
      box-shadow:0 0 0 18px rgba(255,255,255,.03), inset 0 0 40px rgba(255,255,255,.08);
      position:relative;
    }
    .glow-ring::before,
    .glow-ring::after{
      content:"";
      position:absolute;
      inset:50% auto auto 50%;
      width:160px;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
      transform:translate(-50%, -50%);
    }
    .glow-ring::after{
      transform:translate(-50%, -50%) rotate(90deg);
    }
    .visual-list{
      display:grid;
      gap:10px;
      margin-top:4px;
    }
    .visual-list .row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      padding:11px 12px;
      border-radius:14px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.08);
      color:#f2ead7;
      font-size:.95rem;
    }
    .visual-list .row strong{font-weight:800}
    .visual-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:10px;
      margin-top:12px;
    }
    .visual-grid .cell{
      min-height:72px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      padding:12px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .visual-grid .cell span{color:rgba(246,239,225,.68);font-size:.84rem}
    .visual-grid .cell strong{font-size:1.04rem}

    .stream-main{
      min-width:0;
    }
    .masonry-wall{
      column-count:2;
      column-gap:18px;
      margin-top:18px;
    }
    .masonry-card{
      break-inside:avoid;
      margin:0 0 18px;
      border-radius:22px;
      border:1px solid rgba(29, 33, 40, .08);
      background:rgba(255,255,255,.76);
      box-shadow:var(--shadow);
      padding:18px;
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
      overflow:hidden;
      position:relative;
    }
    .masonry-card:hover,
    .masonry-card:focus-within{
      transform:translateY(-3px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(181,138,69,.22);
    }
    .masonry-card::after{
      content:"";
      position:absolute;
      inset:auto -22px -32px auto;
      width:120px;
      height:120px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(181,138,69,.12), transparent 70%);
      pointer-events:none;
    }
    .masonry-card.feature{
      background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(245,239,228,.96)),
        radial-gradient(circle at top right, rgba(79,134,112,.1), transparent 24%);
    }
    .masonry-card.tall{min-height:290px}
    .masonry-card.compact{min-height:220px}
    .masonry-card .card-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }
    .masonry-card h3{
      margin:0;
      font-size:1.12rem;
      line-height:1.2;
      color:#141820;
      letter-spacing:-.02em;
    }
    .masonry-card p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }
    .masonry-card .card-badges{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }
    .tiny-badge{
      display:inline-flex;
      align-items:center;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(21, 25, 31, .05);
      border:1px solid rgba(21, 25, 31, .07);
      color:#4b5260;
      font-size:.84rem;
      font-weight:600;
    }
    .masonry-card ul{
      list-style:none;
      padding:0;
      margin:12px 0 0;
      display:grid;
      gap:10px;
    }
    .masonry-card li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#424956;
      font-size:.94rem;
    }
    .masonry-card li::before{
      content:"";
      width:8px;
      height:8px;
      margin-top:8px;
      border-radius:50%;
      background:linear-gradient(145deg, var(--gold), var(--emerald));
      flex:none;
      box-shadow:0 0 0 4px rgba(181,138,69,.08);
    }
    .masonry-card .action-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }
    .masonry-card.accent{
      color:#f7f0df;
      background:
        linear-gradient(145deg, rgba(27, 30, 36, .98), rgba(38, 43, 51, .96)),
        radial-gradient(circle at top right, rgba(181,138,69,.16), transparent 22%);
    }
    .masonry-card.accent h3,
    .masonry-card.accent p,
    .masonry-card.accent li,
    .masonry-card.accent .tiny-badge{color:inherit}
    .masonry-card.accent .tiny-badge{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.08);
    }
    .masonry-card.accent li::before{background:linear-gradient(145deg, var(--gold-2), #f2e1ae)}

    .sidebar{
      display:grid;
      gap:16px;
      position:sticky;
      top:90px;
    }
    .side-panel{
      border-radius:22px;
      background:rgba(255,255,255,.77);
      border:1px solid rgba(29, 33, 40, .08);
      box-shadow:var(--shadow);
      padding:18px;
    }
    .side-panel.dark{
      background:
        radial-gradient(circle at top right, rgba(181,138,69,.16), transparent 24%),
        linear-gradient(180deg, rgba(23, 26, 31, .98), rgba(28, 31, 37, .98));
      color:#f4ecda;
      border-color:rgba(255,255,255,.08);
    }
    .side-panel h3{
      margin:0 0 10px;
      font-size:1.06rem;
      line-height:1.2;
      color:inherit;
    }
    .side-panel p{
      margin:0;
      color:inherit;
      opacity:.88;
      font-size:.95rem;
    }
    .side-buttons{
      display:grid;
      gap:10px;
      margin-top:14px;
    }
    .side-buttons .header-cta,
    .side-buttons .secondary-btn,
    .side-buttons .ghost-btn{
      width:100%;
    }
    .system-list{
      display:grid;
      gap:12px;
      margin-top:10px;
    }
    .system-list .sys-row{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:14px;
      padding:11px 0;
      border-bottom:1px dashed rgba(31, 35, 42, .1);
      color:#404755;
      font-size:.95rem;
    }
    .system-list .sys-row:last-child{border-bottom:0;padding-bottom:0}
    .system-list .sys-row strong{color:#161a22}
    .hot-list{
      display:grid;
      gap:10px;
      margin-top:10px;
    }
    .hot-item{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      padding:11px 12px;
      border-radius:14px;
      background:rgba(21, 25, 31, .04);
      border:1px solid rgba(21, 25, 31, .06);
    }
    .hot-item span{color:#6b7280;font-size:.88rem}
    .hot-item strong{display:block;font-size:.96rem;color:#171b20}
    .tip-box{
      border-radius:16px;
      padding:14px;
      background:linear-gradient(145deg, rgba(79,134,112,.09), rgba(181,138,69,.08));
      border:1px solid rgba(181,138,69,.12);
      color:#404754;
      font-size:.94rem;
    }

    .req-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:16px;
    }
    .req-card{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(29, 33, 40, .08);
      border-radius:20px;
      box-shadow:var(--shadow);
      padding:18px;
      min-height:170px;
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .req-card:hover,
    .req-card:focus-within{
      transform:translateY(-3px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(181,138,69,.22);
      outline:none;
    }
    .req-card .icon{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg, rgba(181,138,69,.16), rgba(79,134,112,.12));
      color:#1f1f1f;
      margin-bottom:12px;
      font-size:1.05rem;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
    }
    .req-card h3{
      margin:0 0 8px;
      font-size:1.05rem;
      color:#151a21;
    }
    .req-card p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }

    .review-grid{
      display:grid;
      grid-template-columns:1.12fr .88fr 1fr;
      gap:16px;
      align-items:stretch;
    }
    .review-card{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(29, 33, 40, .08);
      border-radius:22px;
      box-shadow:var(--shadow);
      padding:18px;
      position:relative;
      overflow:hidden;
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .review-card:hover,
    .review-card:focus-within{
      transform:translateY(-3px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(181,138,69,.2);
    }
    .review-card::after{
      content:"";
      position:absolute;
      right:-18px;
      bottom:-18px;
      width:120px;
      height:120px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(181,138,69,.1), transparent 72%);
      pointer-events:none;
    }
    .review-card.large{transform:translateY(6px)}
    .review-card.large:hover{transform:translateY(3px)}
    .review-head{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:12px;
    }
    .avatar{
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:800;
      background:linear-gradient(145deg, #252a31, #5b4630);
      box-shadow:0 12px 22px rgba(24, 20, 16, .16);
      flex:none;
    }
    .review-meta strong{
      display:block;
      color:#141820;
      margin-bottom:2px;
    }
    .review-meta span{
      color:var(--muted);
      font-size:.88rem;
    }
    .stars{
      display:flex;
      gap:3px;
      color:#c99a46;
      font-size:.92rem;
      margin-left:auto;
      white-space:nowrap;
    }
    .review-card p{
      margin:0;
      color:#3f4653;
    }
    .review-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }

    .cta-band{
      background:
        radial-gradient(circle at top right, rgba(181,138,69,.15), transparent 24%),
        linear-gradient(145deg, rgba(23, 26, 32, .98), rgba(34, 39, 47, .98));
      color:#f5ebd9;
      border-radius:28px;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-strong);
      padding:26px;
      position:relative;
      overflow:hidden;
    }
    .cta-band::before{
      content:"";
      position:absolute;
      inset:auto -8% -32% auto;
      width:260px;
      height:260px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(79,134,112,.14), transparent 68%);
      pointer-events:none;
    }
    .cta-band h2{
      margin:0 0 10px;
      color:#fff7e8;
      font-size:clamp(1.5rem, 2.4vw, 2.4rem);
      letter-spacing:-.03em;
    }
    .cta-band p{
      margin:0;
      max-width:60ch;
      color:rgba(246, 239, 225, .82);
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:18px;
    }
    .cta-actions .header-cta,
    .cta-actions .secondary-btn,
    .cta-actions .ghost-btn{
      min-width:132px;
    }
    .cta-sidenote{
      margin-top:14px;
      color:rgba(246, 239, 225, .72);
      font-size:.92rem;
    }

    .faq-list{
      display:grid;
      gap:12px;
    }
    .faq-item{
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(29, 33, 40, .08);
      background:rgba(255,255,255,.8);
      box-shadow:var(--shadow);
    }
    .faq-question{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:18px 18px;
      text-align:left;
      color:#141820;
      font-weight:700;
      transition:background var(--transition), color var(--transition);
    }
    .faq-question:hover,
    .faq-question:focus-visible{
      background:rgba(181,138,69,.06);
      outline:none;
    }
    .faq-question .sign{
      width:32px;
      height:32px;
      border-radius:50%;
      display:grid;
      place-items:center;
      flex:none;
      background:rgba(21, 25, 31, .06);
      color:#313642;
      transition:transform var(--transition), background var(--transition);
    }
    .faq-item.is-open .faq-question .sign{
      transform:rotate(45deg);
      background:rgba(181,138,69,.14);
    }
    .faq-answer{
      max-height:0;
      overflow:hidden;
      transition:max-height var(--transition), padding var(--transition);
      padding:0 18px;
      color:var(--muted);
    }
    .faq-item.is-open .faq-answer{
      max-height:220px;
      padding:0 18px 18px;
    }

    .pager-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      padding:8px 0 16px;
    }
    .pager-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .page-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:42px;
      min-height:42px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(29, 33, 40, .1);
      background:rgba(255,255,255,.74);
      color:#3f4653;
      transition:transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
    }
    .page-pill:hover,
    .page-pill:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(181,138,69,.28);
      box-shadow:0 10px 20px rgba(24, 20, 14, .06);
      outline:none;
    }
    .page-pill.active{
      background:linear-gradient(145deg, rgba(181,138,69,.16), rgba(79,134,112,.1));
      border-color:rgba(181,138,69,.24);
      color:#191510;
      font-weight:700;
    }
    .back-top-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#525b68;
      font-weight:700;
    }
    .back-top-link:hover,
    .back-top-link:focus-visible{
      color:#141820;
      outline:none;
    }

    .site-footer{
      margin-top:10px;
      padding:24px 0 20px;
      background:
        linear-gradient(180deg, rgba(17, 20, 26, .98), rgba(25, 28, 34, .99));
      color:#ebe2d1;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .9fr 1fr;
      gap:20px;
      align-items:start;
    }
    .footer-brand p{
      margin:12px 0 0;
      color:rgba(235, 226, 209, .78);
      max-width:34ch;
      font-size:.95rem;
    }
    .footer-mark{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      color:#fff5e3;
      font-size:1.02rem;
    }
    .footer-links{
      display:grid;
      gap:10px;
      justify-content:start;
    }
    .footer-links a{
      color:rgba(235, 226, 209, .84);
      transition:color var(--transition), transform var(--transition);
      width:fit-content;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color:#fff;
      transform:translateX(2px);
      outline:none;
    }
    .footer-meta{
      display:grid;
      gap:10px;
      color:rgba(235, 226, 209, .78);
      font-size:.94rem;
    }
    .copyright{
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-top:18px;
      padding-top:16px;
      border-top:1px solid rgba(255,255,255,.08);
      color:rgba(235, 226, 209, .7);
      font-size:.9rem;
    }

    .mobile-cta{
      display:none;
      position:fixed;
      left:12px;
      right:12px;
      bottom:12px;
      z-index:70;
      background:rgba(248,244,236,.88);
      backdrop-filter:blur(16px);
      border:1px solid rgba(29, 33, 40, .08);
      box-shadow:0 18px 40px rgba(22, 19, 14, .16);
      border-radius:18px;
      padding:10px;
      gap:10px;
    }
    .mobile-cta a{
      flex:1;
      min-height:46px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      font-weight:800;
    }
    .mobile-cta a.primary{
      background:linear-gradient(145deg, var(--gold), #c49b54);
      color:#1b1710;
      box-shadow:0 12px 22px rgba(181,138,69,.2);
    }
    .mobile-cta a.secondary{
      background:#fff;
      color:#2b3038;
      border:1px solid rgba(29, 33, 40, .1);
    }

    .mobile-drawer{
      position:fixed;
      inset:0;
      background:rgba(11, 13, 17, .72);
      backdrop-filter:blur(14px);
      display:none;
      z-index:90;
    }
    .mobile-drawer.is-open{display:block}
    .drawer-panel{
      position:absolute;
      top:0;
      right:0;
      width:min(92vw, 360px);
      height:100%;
      background:linear-gradient(180deg, rgba(249,245,237,.98), rgba(242,236,225,.98));
      box-shadow:-20px 0 50px rgba(12, 13, 18, .24);
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .drawer-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding-bottom:8px;
      border-bottom:1px solid rgba(29, 33, 40, .08);
    }
    .drawer-close{
      width:40px;
      height:40px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:#fff;
      border:1px solid rgba(29, 33, 40, .08);
      color:#1b1f26;
    }
    .drawer-links{
      display:grid;
      gap:10px;
    }
    .drawer-links a{
      min-height:48px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 14px;
      border-radius:14px;
      background:rgba(255,255,255,.75);
      border:1px solid rgba(29, 33, 40, .08);
      color:#1c2129;
      font-weight:700;
    }
    .drawer-links a.active{
      background:linear-gradient(145deg, rgba(181,138,69,.16), rgba(79,134,112,.11));
      border-color:rgba(181,138,69,.22);
    }
    .drawer-note{
      margin-top:auto;
      padding:14px;
      border-radius:16px;
      background:linear-gradient(145deg, rgba(23, 26, 31, .96), rgba(37, 41, 48, .96));
      color:#f5ebd9;
      font-size:.93rem;
      line-height:1.7;
    }

    .backdrop{
      position:fixed;
      inset:0;
      background:rgba(8, 10, 14, .34);
      opacity:0;
      visibility:hidden;
      transition:opacity var(--transition), visibility var(--transition);
      z-index:60;
      pointer-events:none;
    }
    .backdrop.is-show{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }

    @media (max-width: 1199px){
      .hero-grid,
      .feature-spot,
      .stream-layout,
      .review-grid,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .sidebar{
        position:relative;
        top:0;
      }
      .req-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .hero-copy h1{max-width:14ch}
      .masonry-wall{
        column-count:1;
      }
    }

    @media (max-width: 991px){
      .desktop-nav,
      .header-cta{
        display:none;
      }
      .menu-toggle{
        display:inline-flex;
      }
      .hero-banner,
      .section{
        padding-left:0;
        padding-right:0;
      }
      .mobile-cta{
        display:flex;
      }
      .hero-copy{
        min-height:auto;
      }
      .feature-visual{
        min-height:auto;
      }
      .signal-grid{
        grid-template-columns:1fr;
      }
      .signal-card.note{
        grid-column:auto;
      }
      .review-card.large{
        transform:none;
      }
    }

    @media (max-width: 767px){
      .site-header{
        top:8px;
      }
      .nav-shell{
        min-height:62px;
        padding:12px 14px;
      }
      .brand-text{
        font-size:1rem;
      }
      .hero-banner{
        padding:16px;
        border-radius:22px;
      }
      .hero-copy h1{
        font-size:clamp(1.9rem, 8vw, 2.7rem);
      }
      .section{
        padding:18px 0;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .quick-search{
        width:100%;
      }
      .req-grid,
      .review-grid{
        grid-template-columns:1fr;
      }
      .cta-actions,
      .hero-actions{
        flex-direction:column;
      }
      .cta-actions .header-cta,
      .cta-actions .secondary-btn,
      .cta-actions .ghost-btn,
      .hero-actions .header-cta,
      .hero-actions .secondary-btn,
      .hero-actions .ghost-btn{
        width:100%;
      }
      .masonry-wall{
        column-count:1;
      }
      .masonry-card{
        padding:16px;
      }
      .footer-grid,
      .copyright{
        grid-template-columns:1fr;
      }
      .copyright{
        display:grid;
      }
      .pager-wrap{
        align-items:flex-start;
      }
    }

    @media (max-width: 520px){
      .container{
        width:min(100% - 24px, var(--container));
      }
      .hero-banner,
      .feature-spot,
      .side-panel,
      .masonry-card,
      .req-card,
      .review-card,
      .cta-band{
        border-radius:18px;
      }
      .badge,
      .chip,
      .tiny-badge,
      .page-pill{
        min-height:38px;
        font-size:.88rem;
      }
      .signal-card strong{
        font-size:1.15rem;
      }
      .visual-grid{
        grid-template-columns:1fr;
      }
      .drawer-panel{
        width:100vw;
        border-radius:0;
      }
      .mobile-cta{
        left:10px;
        right:10px;
        bottom:10px;
      }
    }

/* roulang page: category1 */
:root{
      --bg:#f4efe6;
      --bg-soft:#fbf8f2;
      --panel:#fffdf8;
      --panel-strong:#17191c;
      --panel-dark:#1f2227;
      --text:#1e1f22;
      --muted:#65686f;
      --muted-2:#8a8f97;
      --line:rgba(27,31,35,.12);
      --line-strong:rgba(181,138,58,.30);
      --gold:#b08b43;
      --gold-2:#d0b06a;
      --emerald:#2f5f4d;
      --emerald-2:#4d846f;
      --amber:#d6a24a;
      --shadow:0 18px 45px rgba(18,20,24,.08);
      --shadow-strong:0 24px 60px rgba(18,20,24,.14);
      --radius:18px;
      --radius-sm:12px;
      --radius-lg:26px;
      --container:1240px;
      --gap:24px;
      --transition:all .24s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      color:var(--text);
      line-height:1.7;
      background:
        radial-gradient(circle at 20% 0%, rgba(208,176,106,.12), transparent 18%),
        radial-gradient(circle at 80% 10%, rgba(47,95,77,.10), transparent 20%),
        linear-gradient(180deg, #f7f2ea 0%, #f4efe6 38%, #f7f3ec 100%);
      min-height:100vh;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    body.no-scroll{overflow:hidden}
    a{color:inherit;text-decoration:none;transition:var(--transition)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{cursor:pointer;border:none;background:none;padding:0}
    ::selection{background:rgba(176,139,67,.22);color:#111}
    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      backdrop-filter:blur(18px);
      background:rgba(248,244,236,.82);
      border-bottom:1px solid rgba(27,31,35,.08);
      box-shadow:0 8px 24px rgba(12,14,16,.04);
    }
    .nav-shell{
      min-height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      font-weight:800;
      letter-spacing:.02em;
      color:#17181c;
    }
    .brand-mark{
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:12px;
      color:#fff7e5;
      background:
        linear-gradient(145deg, rgba(176,139,67,1), rgba(47,95,77,1));
      box-shadow:0 10px 20px rgba(47,95,77,.18);
      font-size:15px;
      flex:0 0 auto;
    }
    .brand-text{font-size:1.02rem}
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px;
      border:1px solid rgba(27,31,35,.08);
      background:rgba(255,255,255,.56);
      border-radius:999px;
      box-shadow:0 10px 24px rgba(24,27,30,.04);
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:42px;
      padding:0 16px;
      border-radius:999px;
      color:var(--muted);
      font-size:.96rem;
      font-weight:600;
      letter-spacing:.01em;
      position:relative;
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      color:#17181c;
      background:rgba(176,139,67,.08);
      outline:none;
    }
    .nav-link.active{
      color:#fff9ef;
      background:linear-gradient(135deg, var(--emerald), #25463a);
      box-shadow:0 10px 18px rgba(47,95,77,.18);
    }
    .header-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 18px;
      border-radius:999px;
      font-weight:700;
      color:#fff8ea;
      background:linear-gradient(135deg, var(--gold), var(--amber));
      box-shadow:0 12px 26px rgba(176,139,67,.22);
      white-space:nowrap;
    }
    .header-cta:hover,
    .header-cta:focus-visible{
      transform:translateY(-1px);
      filter:saturate(1.03);
      outline:none;
      box-shadow:0 16px 28px rgba(176,139,67,.28);
    }
    .menu-toggle{
      display:none;
      width:46px;
      height:46px;
      border-radius:14px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(27,31,35,.08);
      box-shadow:0 10px 20px rgba(24,27,30,.04);
      align-items:center;
      justify-content:center;
    }
    .menu-toggle span,
    .menu-toggle span::before,
    .menu-toggle span::after{
      content:"";
      display:block;
      width:18px;
      height:2px;
      border-radius:99px;
      background:#202226;
      position:relative;
      transition:var(--transition);
    }
    .menu-toggle span::before{
      position:absolute;
      top:-6px;
      left:0;
    }
    .menu-toggle span::after{
      position:absolute;
      top:6px;
      left:0;
    }
    .page-rail{
      padding:18px 0 4px;
    }
    .breadcrumb{
      color:var(--muted);
      font-size:.95rem;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
    }
    .breadcrumb span{color:#b1a28a}
    .rail-row{
      margin-top:10px;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:12px;
      justify-content:space-between;
    }
    .rail-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 14px;
      border-radius:999px;
      border:1px solid rgba(176,139,67,.22);
      background:rgba(255,255,255,.68);
      color:#694d16;
      font-weight:700;
      letter-spacing:.02em;
      box-shadow:0 10px 24px rgba(24,27,30,.04);
    }
    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(27,31,35,.10);
      background:rgba(255,255,255,.66);
      color:#4d525a;
      font-size:.92rem;
      font-weight:600;
      transition:var(--transition);
    }
    .chip:hover,
    .chip:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(176,139,67,.28);
      background:#fff;
      color:#202226;
      outline:none;
    }
    .chip.active{
      color:#fff8eb;
      background:linear-gradient(135deg, var(--emerald), #274b3e);
      border-color:transparent;
      box-shadow:0 14px 24px rgba(47,95,77,.18);
    }
    .category-hero{
      padding:18px 0 26px;
    }
    .hero-shell{
      position:relative;
      overflow:hidden;
      border-radius:calc(var(--radius-lg) + 6px);
      background:
        linear-gradient(145deg, rgba(25,27,31,.98), rgba(42,45,50,.94)),
        radial-gradient(circle at top left, rgba(208,176,106,.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(47,95,77,.15), transparent 32%);
      color:#f8f5ed;
      box-shadow:var(--shadow-strong);
      border:1px solid rgba(255,255,255,.08);
    }
    .hero-shell::before,
    .hero-shell::after{
      content:"";
      position:absolute;
      inset:auto;
      border-radius:50%;
      pointer-events:none;
    }
    .hero-shell::before{
      width:420px;
      height:420px;
      top:-180px;
      right:-120px;
      background:radial-gradient(circle, rgba(208,176,106,.18), transparent 62%);
      filter:blur(4px);
    }
    .hero-shell::after{
      width:300px;
      height:300px;
      bottom:-170px;
      left:-110px;
      background:radial-gradient(circle, rgba(47,95,77,.18), transparent 62%);
      filter:blur(6px);
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:28px;
      padding:28px;
      align-items:stretch;
    }
    .hero-copy{
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:360px;
      padding:10px 0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:max-content;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      color:#ddd7c8;
      font-size:.88rem;
      font-weight:700;
      letter-spacing:.06em;
      text-transform:none;
    }
    h1{
      margin:14px 0 12px;
      font-size:clamp(2rem, 3.4vw, 3.5rem);
      line-height:1.08;
      letter-spacing:-.03em;
      color:#fffaf0;
    }
    .hero-lead{
      margin:0;
      max-width:58ch;
      color:rgba(248,242,232,.86);
      font-size:1.02rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:26px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:48px;
      padding:0 18px;
      border-radius:999px;
      font-weight:800;
      letter-spacing:.02em;
      transition:var(--transition);
      border:1px solid transparent;
      box-shadow:none;
      outline:none;
    }
    .btn-primary{
      color:#fff9ef;
      background:linear-gradient(135deg, var(--gold), #c79944);
      box-shadow:0 14px 28px rgba(176,139,67,.26);
    }
    .btn-secondary{
      color:#fffaf0;
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.12);
    }
    .btn-ghost{
      color:#f7ecda;
      background:rgba(47,95,77,.18);
      border-color:rgba(255,255,255,.10);
    }
    .btn:hover,
    .btn:focus-visible{
      transform:translateY(-1px);
      outline:none;
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      box-shadow:0 16px 30px rgba(176,139,67,.30);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible,
    .btn-ghost:hover,
    .btn-ghost:focus-visible{
      background:rgba(255,255,255,.10);
    }
    .hero-tips{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .tip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      color:#ece2cf;
      font-size:.9rem;
    }
    .hero-stats{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
      margin-top:24px;
    }
    .metric{
      border-radius:18px;
      padding:16px 14px;
      background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .metric strong{
      display:block;
      color:#fff8ee;
      font-size:1.34rem;
      line-height:1.1;
      margin-bottom:5px;
    }
    .metric span{
      color:rgba(238,230,215,.78);
      font-size:.92rem;
    }
    .hero-visual{
      display:flex;
      align-items:stretch;
      min-height:360px;
    }
    .portal{
      position:relative;
      width:100%;
      overflow:hidden;
      border-radius:28px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 50% 40%, rgba(208,176,106,.14), transparent 32%),
        radial-gradient(circle at 50% 50%, rgba(47,95,77,.15), transparent 45%),
        linear-gradient(180deg, rgba(13,14,16,.96), rgba(25,27,30,.96));
      padding:20px;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
    }
    .portal::before{
      content:"";
      position:absolute;
      inset:14px;
      border-radius:24px;
      border:1px solid rgba(208,176,106,.18);
      pointer-events:none;
    }
    .portal-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
      position:relative;
      z-index:1;
    }
    .portal-chip{
      display:inline-flex;
      align-items:center;
      min-height:32px;
      padding:0 12px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.09);
      color:#e9dfcc;
      font-size:.86rem;
      font-weight:700;
    }
    .portal-chip.alt{
      background:rgba(176,139,67,.14);
      border-color:rgba(208,176,106,.22);
      color:#f8e8c6;
    }
    .portal-ring{
      position:absolute;
      inset:86px auto auto 50%;
      transform:translateX(-50%);
      width:min(250px, 72%);
      aspect-ratio:1;
      border-radius:50%;
      border:1px solid rgba(208,176,106,.24);
      background:
        radial-gradient(circle at center, rgba(208,176,106,.18), rgba(208,176,106,0) 46%),
        conic-gradient(from 90deg, rgba(208,176,106,.12), rgba(47,95,77,.08), rgba(255,255,255,.04), rgba(208,176,106,.12));
      box-shadow:0 0 0 24px rgba(255,255,255,.02), 0 0 40px rgba(176,139,67,.12);
      opacity:.92;
    }
    .portal-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
      margin-top:76px;
    }
    .portal-card{
      border-radius:20px;
      padding:16px 14px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 16px 30px rgba(0,0,0,.18);
      backdrop-filter:blur(3px);
      min-height:110px;
    }
    .portal-card.big{
      grid-column:1 / -1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      min-height:96px;
    }
    .portal-card strong{
      display:block;
      font-size:1.1rem;
      margin-bottom:4px;
      color:#fff8ef;
    }
    .portal-card p{
      margin:0;
      color:rgba(238,230,215,.76);
      font-size:.93rem;
      line-height:1.55;
    }
    .portal-stat{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .portal-stat .count{
      font-size:1.7rem;
      font-weight:900;
      color:#f8edd4;
      letter-spacing:-.03em;
      line-height:1;
    }
    .portal-stat .label{
      color:rgba(236,229,215,.74);
      font-size:.9rem;
    }
    .portal-flow{
      position:absolute;
      inset:auto 18px 18px auto;
      display:grid;
      gap:10px;
      z-index:1;
    }
    .float-tag{
      min-width:120px;
      padding:10px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.08);
      color:#f1e6d0;
      box-shadow:0 14px 26px rgba(0,0,0,.18);
      font-size:.9rem;
      backdrop-filter:blur(6px);
    }
    .section{
      padding:18px 0 4px;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
    }
    .section-title{
      margin:0;
      font-size:clamp(1.35rem, 1.9vw, 2.05rem);
      line-height:1.2;
      letter-spacing:-.02em;
      color:#17181c;
    }
    .section-subtitle{
      margin:0;
      color:var(--muted);
      font-size:.98rem;
      max-width:62ch;
    }
    .section-tools{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .carousel-shell{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      background:rgba(255,255,255,.44);
      border:1px solid rgba(27,31,35,.08);
      box-shadow:var(--shadow);
      padding:16px;
    }
    .carousel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }
    .carousel-nav{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .carousel-btn{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#22262c;
      background:#fff;
      border:1px solid rgba(27,31,35,.10);
      box-shadow:0 10px 20px rgba(24,27,30,.05);
      transition:var(--transition);
    }
    .carousel-btn:hover,
    .carousel-btn:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(176,139,67,.25);
      outline:none;
      box-shadow:0 14px 26px rgba(24,27,30,.08);
    }
    .carousel-track{
      display:flex;
      gap:14px;
      overflow-x:auto;
      padding-bottom:6px;
      scroll-snap-type:x mandatory;
      scrollbar-width:none;
    }
    .carousel-track::-webkit-scrollbar{display:none}
    .show-card{
      scroll-snap-align:start;
      flex:0 0 auto;
      width:280px;
      border-radius:20px;
      background:linear-gradient(180deg, #fff, #f8f3ea);
      border:1px solid rgba(27,31,35,.08);
      box-shadow:0 14px 30px rgba(24,27,30,.06);
      padding:16px;
      position:relative;
      overflow:hidden;
      transition:var(--transition);
    }
    .show-card.wide{width:360px}
    .show-card.tall{width:240px; min-height:220px}
    .show-card:hover,
    .show-card:focus-within{
      transform:translateY(-3px);
      box-shadow:0 18px 36px rgba(24,27,30,.10);
      border-color:rgba(176,139,67,.24);
    }
    .show-card .icon{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:14px;
      background:linear-gradient(135deg, rgba(47,95,77,.12), rgba(176,139,67,.14));
      color:#355947;
      font-size:1.05rem;
      margin-bottom:14px;
      border:1px solid rgba(176,139,67,.14);
    }
    .show-card h3{
      margin:0 0 8px;
      font-size:1.05rem;
      line-height:1.3;
    }
    .show-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.6;
    }
    .show-card .meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-top:16px;
    }
    .meta .label-badge{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(176,139,67,.10);
      color:#7b5b1a;
      font-size:.84rem;
      font-weight:700;
    }
    .meta a{
      color:#275043;
      font-weight:700;
      font-size:.92rem;
    }
    .requirements{
      padding-top:24px;
    }
    .requirements-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:16px;
    }
    .info-card{
      position:relative;
      overflow:hidden;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(251,246,239,.98));
      border:1px solid rgba(27,31,35,.10);
      box-shadow:var(--shadow);
      padding:18px 16px;
      min-height:150px;
      transition:var(--transition);
    }
    .info-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(176,139,67,.08), transparent 42%, rgba(47,95,77,.05));
      pointer-events:none;
    }
    .info-card:hover,
    .info-card:focus-within{
      transform:translateY(-3px);
      border-color:rgba(176,139,67,.24);
      box-shadow:0 18px 34px rgba(24,27,30,.10);
    }
    .info-ico{
      width:44px;
      height:44px;
      border-radius:15px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(47,95,77,.12), rgba(176,139,67,.14));
      border:1px solid rgba(176,139,67,.16);
      color:#335d4d;
      font-size:1.05rem;
      position:relative;
      z-index:1;
    }
    .info-card h3{
      position:relative;
      z-index:1;
      margin:14px 0 8px;
      font-size:1.02rem;
      line-height:1.3;
    }
    .info-card p{
      position:relative;
      z-index:1;
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.7;
    }
    .catalog-layout{
      display:grid;
      grid-template-columns:minmax(0, 1.42fr) minmax(280px, .58fr);
      gap:24px;
      align-items:start;
      padding-top:18px;
    }
    .main-column,
    .side-column{
      min-width:0;
    }
    .filter-panel{
      padding:18px;
      border-radius:24px;
      background:rgba(255,255,255,.58);
      border:1px solid rgba(27,31,35,.08);
      box-shadow:var(--shadow);
      margin-bottom:18px;
    }
    .filter-panel .section-head{
      margin-bottom:14px;
    }
    .filter-status{
      color:var(--muted-2);
      font-size:.93rem;
      white-space:nowrap;
    }
    .filter-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .filter-chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(27,31,35,.10);
      background:#fff;
      color:#4e5259;
      font-size:.92rem;
      font-weight:700;
      transition:var(--transition);
    }
    .filter-chip:hover,
    .filter-chip:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(176,139,67,.28);
      color:#202226;
      outline:none;
      box-shadow:0 12px 22px rgba(24,27,30,.06);
    }
    .filter-chip.active{
      color:#fff7eb;
      background:linear-gradient(135deg, var(--emerald), #28493d);
      border-color:transparent;
      box-shadow:0 12px 22px rgba(47,95,77,.18);
    }
    .card-grid{
      display:grid;
      grid-template-columns:repeat(12, minmax(0,1fr));
      gap:18px;
    }
    .entry-card{
      grid-column:span 4;
      position:relative;
      overflow:hidden;
      border-radius:22px;
      background:linear-gradient(180deg, #fff, #faf5ec);
      border:1px solid rgba(27,31,35,.09);
      box-shadow:var(--shadow);
      transition:var(--transition);
      min-height:190px;
    }
    .entry-card:hover,
    .entry-card:focus-within{
      transform:translateY(-3px);
      box-shadow:0 18px 34px rgba(24,27,30,.10);
      border-color:rgba(176,139,67,.24);
    }
    .entry-card a.card-link{
      display:block;
      height:100%;
      color:inherit;
      padding:18px;
    }
    .entry-card.featured{
      grid-column:span 8;
      min-height:250px;
      background:
        linear-gradient(145deg, rgba(25,27,31,.98), rgba(39,43,48,.96)),
        radial-gradient(circle at top right, rgba(208,176,106,.15), transparent 26%);
      color:#f8f2e5;
    }
    .entry-card.featured .card-meta,
    .entry-card.featured .card-desc,
    .entry-card.featured .card-note{color:rgba(242,235,220,.8)}
    .entry-card.featured .tag,
    .entry-card.featured .card-link-btn{
      border-color:rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:#f8edd6;
    }
    .entry-card.featured .card-link-btn{
      background:linear-gradient(135deg, var(--gold), #c79944);
      border-color:transparent;
      color:#fff9ef;
    }
    .entry-card.medium{grid-column:span 4}
    .entry-card.narrow{grid-column:span 3}
    .entry-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }
    .entry-icon{
      width:44px;
      height:44px;
      border-radius:15px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(47,95,77,.12), rgba(176,139,67,.12));
      border:1px solid rgba(176,139,67,.16);
      color:#335d4d;
      font-size:1.05rem;
      flex:0 0 auto;
    }
    .entry-card.featured .entry-icon{
      background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(208,176,106,.18));
      border-color:rgba(255,255,255,.10);
      color:#ffefcf;
    }
    .entry-card h3{
      margin:0 0 8px;
      font-size:1.06rem;
      line-height:1.35;
    }
    .entry-card.featured h3{
      font-size:1.25rem;
    }
    .card-desc{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
      line-height:1.65;
    }
    .card-note{
      margin-top:12px;
      color:#70757e;
      font-size:.88rem;
    }
    .tag-list{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(47,95,77,.08);
      border:1px solid rgba(47,95,77,.12);
      color:#355a4d;
      font-size:.82rem;
      font-weight:700;
    }
    .card-bottom{
      margin-top:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .card-link-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:0 14px;
      border-radius:999px;
      background:rgba(255,255,255,.86);
      color:#1f2328;
      border:1px solid rgba(27,31,35,.10);
      font-size:.9rem;
      font-weight:800;
    }
    .card-link-btn:hover,
    .card-link-btn:focus-visible{
      transform:translateY(-1px);
      outline:none;
      border-color:rgba(176,139,67,.28);
      box-shadow:0 12px 20px rgba(24,27,30,.06);
    }
    .side-sticky{
      position:sticky;
      top:94px;
      display:grid;
      gap:16px;
    }
    .side-card{
      position:relative;
      overflow:hidden;
      border-radius:22px;
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,245,237,.98));
      border:1px solid rgba(27,31,35,.10);
      box-shadow:var(--shadow);
      padding:18px;
    }
    .side-card h3{
      margin:0 0 12px;
      font-size:1.02rem;
      line-height:1.25;
    }
    .side-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.65;
    }
    .side-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .side-list a{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.76);
      border:1px solid rgba(27,31,35,.08);
      color:#22262c;
      transition:var(--transition);
    }
    .side-list a:hover,
    .side-list a:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(176,139,67,.24);
      outline:none;
      box-shadow:0 12px 22px rgba(24,27,30,.06);
    }
    .side-list span{
      display:block;
      color:var(--muted);
      font-size:.86rem;
      margin-top:3px;
    }
    .side-pill{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(176,139,67,.10);
      color:#7a5b1a;
      font-size:.8rem;
      font-weight:800;
    }
    .mini-search{
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      margin-top:12px;
    }
    .mini-search input{
      width:100%;
      min-height:44px;
      border-radius:14px;
      border:1px solid rgba(27,31,35,.12);
      background:#fff;
      padding:0 14px;
      color:#202226;
      outline:none;
      transition:var(--transition);
    }
    .mini-search input::placeholder{color:#9aa0a8}
    .mini-search input:focus{
      border-color:rgba(176,139,67,.34);
      box-shadow:0 0 0 4px rgba(176,139,67,.12);
    }
    .mini-search .btn{
      min-width:104px;
      min-height:44px;
      padding:0 14px;
      font-size:.92rem;
    }
    .review-section{
      padding-top:24px;
    }
    .review-grid{
      display:grid;
      grid-template-columns:repeat(12, minmax(0,1fr));
      gap:16px;
    }
    .review-card{
      grid-column:span 4;
      border-radius:24px;
      background:linear-gradient(180deg, #fff, #faf4ea);
      border:1px solid rgba(27,31,35,.09);
      box-shadow:var(--shadow);
      padding:18px;
      position:relative;
      overflow:hidden;
      transition:var(--transition);
    }
    .review-card:nth-child(1){transform:rotate(-.6deg)}
    .review-card:nth-child(2){transform:translateY(10px)}
    .review-card:nth-child(3){transform:rotate(.5deg)}
    .review-card:hover,
    .review-card:focus-within{
      transform:translateY(-3px);
      box-shadow:0 18px 32px rgba(24,27,30,.10);
      border-color:rgba(176,139,67,.24);
    }
    .review-top{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:12px;
    }
    .avatar{
      width:48px;
      height:48px;
      border-radius:18px;
      display:grid;
      place-items:center;
      color:#fff9ef;
      font-weight:900;
      background:
        linear-gradient(145deg, #355d4d, #b08b43);
      box-shadow:0 12px 24px rgba(47,95,77,.16);
      flex:0 0 auto;
    }
    .review-name{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .review-name strong{
      font-size:1rem;
      line-height:1.2;
    }
    .review-name span{
      color:var(--muted);
      font-size:.85rem;
    }
    .stars{
      color:#c79842;
      letter-spacing:.12em;
      font-size:.96rem;
      margin-left:auto;
      flex:0 0 auto;
    }
    .review-card p{
      margin:0;
      color:#3a4048;
      font-size:.95rem;
      line-height:1.75;
    }
    .review-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }
    .review-tags .tag{
      background:rgba(176,139,67,.10);
      border-color:rgba(176,139,67,.14);
      color:#76561a;
    }
    .cta-section{
      padding-top:28px;
    }
    .cta-panel{
      overflow:hidden;
      border-radius:28px;
      background:
        linear-gradient(145deg, rgba(25,27,31,.98), rgba(41,44,49,.96));
      color:#f9f4ea;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-strong);
      padding:26px;
      position:relative;
    }
    .cta-panel::before{
      content:"";
      position:absolute;
      inset:-120px auto auto -80px;
      width:260px;
      height:260px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(208,176,106,.16), transparent 66%);
      pointer-events:none;
    }
    .cta-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:20px;
      align-items:center;
    }
    .cta-panel h2{
      margin:0 0 10px;
      font-size:clamp(1.4rem, 2.2vw, 2rem);
      line-height:1.2;
    }
    .cta-panel p{
      margin:0;
      color:rgba(240,231,218,.82);
      max-width:58ch;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:flex-end;
    }
    .cta-actions .btn{
      min-width:144px;
      min-height:50px;
    }
    .faq-section{
      padding-top:28px;
    }
    .faq-list{
      display:grid;
      gap:14px;
    }
    .faq-item{
      border-radius:20px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(27,31,35,.10);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .faq-question{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:18px 18px;
      color:#202226;
      font-weight:800;
      text-align:left;
      background:none;
    }
    .faq-question span{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:32px;
      height:32px;
      border-radius:12px;
      background:rgba(176,139,67,.10);
      color:#7b5b1a;
      flex:0 0 auto;
      transition:var(--transition);
    }
    .faq-question:hover span,
    .faq-question:focus-visible span{
      background:rgba(176,139,67,.16);
    }
    .faq-question:focus-visible{
      outline:none;
      box-shadow:inset 0 0 0 2px rgba(176,139,67,.18);
    }
    .faq-answer{
      max-height:0;
      overflow:hidden;
      transition:max-height .3s ease, padding .3s ease;
      padding:0 18px;
    }
    .faq-item.open .faq-answer{
      max-height:220px;
      padding:0 18px 18px;
    }
    .faq-answer p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:.95rem;
    }
    .bottom-rail{
      padding:26px 0 10px;
    }
    .pager-row{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
      justify-content:center;
      margin-top:16px;
    }
    .pager{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:42px;
      min-height:42px;
      padding:0 14px;
      border-radius:14px;
      border:1px solid rgba(27,31,35,.10);
      background:rgba(255,255,255,.7);
      color:#3d4249;
      font-weight:700;
      box-shadow:0 10px 20px rgba(24,27,30,.04);
    }
    .pager.active{
      color:#fff7eb;
      background:linear-gradient(135deg, var(--emerald), #274b3e);
      border-color:transparent;
    }
    .site-footer{
      margin-top:30px;
      padding:30px 0 92px;
      background:linear-gradient(180deg, rgba(21,23,26,.98), rgba(14,16,18,.99));
      color:#f0e7d7;
      border-top:1px solid rgba(255,255,255,.07);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.1fr .7fr .8fr;
      gap:24px;
      align-items:start;
    }
    .footer-mark{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      color:#fff8ef;
      margin-bottom:12px;
    }
    .footer-brand p{
      margin:0;
      color:rgba(238,230,215,.78);
      line-height:1.75;
      font-size:.95rem;
      max-width:40ch;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a{
      color:#f1eadb;
      opacity:.92;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color:#fff;
      transform:translateX(2px);
      outline:none;
    }
    .footer-meta{
      display:grid;
      gap:10px;
      color:rgba(238,230,215,.80);
      font-size:.92rem;
      line-height:1.7;
    }
    .copyright{
      margin-top:24px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.08);
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      color:rgba(238,230,215,.74);
      font-size:.9rem;
    }
    .mobile-drawer{
      position:fixed;
      inset:0;
      z-index:1200;
      pointer-events:none;
      opacity:0;
      transition:opacity .24s ease;
    }
    .mobile-drawer.open{
      opacity:1;
      pointer-events:auto;
    }
    .drawer-backdrop{
      position:absolute;
      inset:0;
      background:rgba(12,14,17,.56);
      backdrop-filter:blur(4px);
    }
    .drawer-panel{
      position:absolute;
      top:12px;
      right:12px;
      bottom:12px;
      width:min(92vw, 360px);
      border-radius:24px;
      background:linear-gradient(180deg, rgba(249,245,238,.98), rgba(243,237,228,.99));
      box-shadow:0 24px 60px rgba(0,0,0,.26);
      border:1px solid rgba(27,31,35,.08);
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:16px;
      transform:translateX(10px);
    }
    .mobile-drawer.open .drawer-panel{
      transform:translateX(0);
    }
    .drawer-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .drawer-close{
      width:40px;
      height:40px;
      border-radius:12px;
      background:#fff;
      border:1px solid rgba(27,31,35,.10);
      font-size:1.2rem;
      color:#262a2f;
    }
    .drawer-links{
      display:grid;
      gap:8px;
    }
    .drawer-links a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-height:48px;
      padding:0 14px;
      border-radius:16px;
      background:#fff;
      border:1px solid rgba(27,31,35,.08);
      color:#262a2f;
      font-weight:700;
    }
    .drawer-links a.active{
      color:#fff7ea;
      background:linear-gradient(135deg, var(--emerald), #28493d);
      border-color:transparent;
    }
    .drawer-note{
      margin-top:auto;
      padding:14px;
      border-radius:18px;
      background:rgba(176,139,67,.08);
      border:1px solid rgba(176,139,67,.14);
      color:#6f541e;
      line-height:1.7;
      font-size:.92rem;
    }
    .drawer-cta{
      display:grid;
      gap:10px;
    }
    .mobile-bottom-cta{
      display:none;
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:900;
      padding:10px 12px 14px;
      background:linear-gradient(180deg, rgba(244,239,230,0), rgba(244,239,230,.94) 18%, rgba(244,239,230,.98));
      backdrop-filter:blur(8px);
    }
    .mobile-bottom-cta .bar{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      width:min(var(--container), calc(100% - 8px));
      margin:0 auto;
    }
    .mobile-bottom-cta .btn{
      min-height:50px;
      width:100%;
    }
    .back-to-top{
      position:fixed;
      right:16px;
      bottom:86px;
      z-index:920;
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, var(--panel-dark), #34383e);
      color:#fff7eb;
      box-shadow:0 16px 28px rgba(0,0,0,.18);
      opacity:0;
      pointer-events:none;
      transform:translateY(6px);
      transition:var(--transition);
    }
    .back-to-top.show{
      opacity:1;
      pointer-events:auto;
      transform:translateY(0);
    }
    .back-to-top:hover,
    .back-to-top:focus-visible{
      outline:none;
      transform:translateY(-2px);
      box-shadow:0 18px 32px rgba(0,0,0,.22);
    }
    @media (max-width: 1180px){
      .hero-grid{grid-template-columns:1fr .95fr}
      .requirements-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
      .catalog-layout{grid-template-columns:1fr}
      .side-sticky{position:static}
      .entry-card.featured{grid-column:span 12}
      .entry-card.medium{grid-column:span 6}
      .entry-card.narrow{grid-column:span 4}
      .review-card{grid-column:span 6}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 960px){
      .desktop-nav,
      .header-cta{display:none}
      .menu-toggle{display:inline-flex}
      .nav-shell{min-height:68px}
      .hero-grid,
      .cta-grid{
        grid-template-columns:1fr;
      }
      .hero-copy{
        min-height:auto;
        padding-bottom:0;
      }
      .hero-visual{
        min-height:auto;
      }
      .portal{
        min-height:300px;
      }
      .entry-card.featured,
      .entry-card.medium,
      .entry-card.narrow{
        grid-column:span 12;
      }
      .review-card{
        grid-column:span 12;
        transform:none !important;
      }
      .footer-grid{
        grid-template-columns:1fr;
      }
      .cta-actions{
        justify-content:flex-start;
      }
    }
    @media (max-width: 768px){
      .page-rail{padding-top:14px}
      .rail-row{justify-content:flex-start}
      .chip-row{justify-content:flex-start}
      .hero-grid{padding:18px}
      .hero-stats{
        grid-template-columns:1fr;
      }
      .portal-grid{
        grid-template-columns:1fr;
        margin-top:64px;
      }
      .portal-card.big{
        grid-column:auto;
        flex-direction:column;
        align-items:flex-start;
      }
      .requirements-grid{
        grid-template-columns:1fr;
      }
      .card-grid{
        gap:14px;
      }
      .filter-panel{
        padding:14px;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .section-tools{
        justify-content:flex-start;
      }
      .cta-panel{
        padding:20px;
      }
      .mobile-bottom-cta{display:block}
      .back-to-top{bottom:154px}
      .site-footer{padding-bottom:168px}
      .carousel-shell{padding:12px}
      .show-card,
      .show-card.wide,
      .show-card.tall{
        width:78vw;
        min-height:auto;
      }
      .mini-search{
        grid-template-columns:1fr;
      }
      .mini-search .btn{
        width:100%;
      }
      .copyright{
        align-items:flex-start;
      }
    }
    @media (max-width: 520px){
      .container{width:min(var(--container), calc(100% - 22px))}
      .brand-text{font-size:.98rem}
      .hero-shell{border-radius:22px}
      .hero-grid{gap:18px}
      h1{font-size:clamp(1.8rem, 8.4vw, 2.5rem)}
      .hero-lead{font-size:.98rem}
      .btn,
      .header-cta,
      .nav-link,
      .chip,
      .filter-chip{min-height:42px}
      .faq-question{padding:16px}
      .faq-item.open .faq-answer{padding:0 16px 16px}
      .show-card,
      .show-card.wide,
      .show-card.tall{
        width:84vw;
      }
      .mobile-bottom-cta .bar{
        grid-template-columns:1fr;
      }
    }