/* roulang page: index */
:root{
      --berry:#321F32;
      --wine:#8E304A;
      --coral:#D87563;
      --ivory:#FAF6F1;
      --mist:#F0E9EC;
      --card:#FFFDFC;
      --ink:#2B2528;
      --muted:#756A70;
      --line:rgba(50,31,50,.12);
      --shadow:0 8px 24px rgba(50,31,50,.06);
      --shadow-hover:0 12px 30px rgba(50,31,50,.12);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at top left, rgba(141,48,74,.09), transparent 30%),
        radial-gradient(circle at top right, rgba(216,117,99,.08), transparent 24%),
        linear-gradient(180deg, #fffdfa 0%, #faf6f1 46%, #f7f1f3 100%);
      line-height:1.8;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{width:min(1240px, calc(100% - 32px)); margin:0 auto}
    .brand-bar{
      background:linear-gradient(135deg, #3a2138 0%, #2d1b2d 100%);
      color:#fff;
    }
    .channel-bar{
      background:rgba(255,253,252,.88);
      backdrop-filter:saturate(1.1);
      border-bottom:1px solid var(--line);
    }
    .card{
      background:rgba(255,253,252,.96);
      border:1px solid rgba(50,31,50,.09);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .card-hover{
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    }
    .card-hover:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(142,48,74,.36);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      min-height:44px;
      border-radius:9999px;
      padding:.8rem 1.2rem;
      font-weight:700;
      transition:all .18s ease;
      border:1px solid transparent;
    }
    .btn-primary{background:var(--wine);color:#fff;box-shadow:0 10px 20px rgba(142,48,74,.14)}
    .btn-primary:hover{background:var(--berry);transform:translateY(-1px)}
    .btn-secondary{background:#fff;border-color:rgba(50,31,50,.16);color:var(--berry)}
    .btn-secondary:hover{border-color:rgba(142,48,74,.35);background:#fff8f9}
    .btn-ghost{background:transparent;border-color:rgba(255,255,255,.16);color:#fff}
    .btn-ghost:hover{background:rgba(255,255,255,.08)}
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      min-height:30px;
      padding:.2rem .72rem;
      border-radius:9999px;
      font-size:.78rem;
      font-weight:700;
      letter-spacing:.01em;
      border:1px solid transparent;
    }
    .tag-soft{background:#f7eef1;color:var(--wine);border-color:rgba(142,48,74,.14)}
    .tag-dark{background:rgba(50,31,50,.86);color:#fff}
    .tag-muted{background:#f5f1f3;color:#6d6268;border-color:rgba(50,31,50,.08)}
    .section-pad{padding:72px 0}
    .section-head{margin-bottom:24px}
    .section-head h2{
      font-size:clamp(24px, 2.4vw, 32px);
      line-height:1.25;
      color:var(--berry);
      letter-spacing:-.02em;
    }
    .section-head p{color:var(--muted);max-width:72ch}
    .hero-title{
      font-size:clamp(34px, 5vw, 52px);
      line-height:1.1;
      letter-spacing:-.03em;
      color:var(--berry);
    }
    .hero-panel{
      background:
        radial-gradient(circle at 20% 20%, rgba(216,117,99,.16), transparent 24%),
        radial-gradient(circle at 80% 18%, rgba(142,48,74,.2), transparent 20%),
        linear-gradient(180deg, #382138 0%, #271827 100%);
      color:#fff;
      border-radius:28px;
      overflow:hidden;
      position:relative;
      box-shadow:0 18px 42px rgba(50,31,50,.18);
    }
    .hero-panel:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 50%),
        radial-gradient(circle at 60% 72%, rgba(255,255,255,.08), transparent 26%);
      pointer-events:none;
    }
    .hero-glow{
      position:absolute;
      width:220px;height:220px;border-radius:50%;
      background:radial-gradient(circle, rgba(216,117,99,.24), transparent 68%);
      filter:blur(4px);
      right:-40px;top:-50px;
      pointer-events:none;
    }
    .metric-num{
      font-variant-numeric:tabular-nums;
      letter-spacing:-.03em;
    }
    .rule{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(50,31,50,.12), transparent);
    }
    .sticky-note{
      border-left:4px solid var(--wine);
      background:#fff9fa;
    }
    .faq details{
      border:1px solid rgba(50,31,50,.1);
      border-radius:16px;
      background:#fffdfc;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .faq summary{
      list-style:none;
      cursor:pointer;
      padding:18px 20px;
      font-weight:700;
      color:var(--berry);
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:center;
      outline:none;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq details[open] summary{
      background:#fbf4f6;
      border-bottom:1px solid rgba(50,31,50,.08);
    }
    .faq .answer{
      padding:0 20px 18px;
      color:var(--muted);
    }
    .focus-ring:focus-visible,
    .btn:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px rgba(216,117,99,.25);
      border-color:rgba(216,117,99,.8) !important;
    }
    .input{
      width:100%;
      min-height:48px;
      border-radius:14px;
      border:1px solid rgba(50,31,50,.12);
      background:#fff;
      padding:.85rem 1rem;
      color:var(--ink);
      transition:all .18s ease;
    }
    .input::placeholder{color:#a2959b}
    .input:hover{border-color:rgba(142,48,74,.28)}
    .overlay{
      position:fixed;
      inset:0;
      background:rgba(24,18,24,.66);
      z-index:80;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
    }
    .overlay-hidden{display:none}
    .modal{
      width:min(560px,100%);
      background:linear-gradient(180deg, #fffdfc 0%, #fff7f4 100%);
      border-radius:24px;
      box-shadow:0 28px 60px rgba(0,0,0,.3);
      border:1px solid rgba(255,255,255,.42);
    }
    .scrollbar-hide::-webkit-scrollbar{display:none}
    .scrollbar-hide{scrollbar-width:none;-ms-overflow-style:none}
    .mini-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.34rem .75rem;
      border-radius:9999px;
      background:rgba(255,255,255,.08);
      color:#fff;
      border:1px solid rgba(255,255,255,.1);
      font-size:.8rem;
      white-space:nowrap;
    }
    .soft-grid{
      background-image:
        linear-gradient(rgba(50,31,50,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50,31,50,.05) 1px, transparent 1px);
      background-size:22px 22px;
      background-position:-1px -1px;
    }
    .panel-title{
      font-size:1.02rem;
      font-weight:800;
      color:var(--berry);
      letter-spacing:-.01em;
    }
    .table-like{
      border:1px solid rgba(50,31,50,.1);
      border-radius:22px;
      overflow:hidden;
      background:#fffdfd;
    }
    .table-like .row{
      display:grid;
      grid-template-columns:1.2fr .8fr 1fr;
      gap:16px;
      padding:16px 18px;
      border-top:1px solid rgba(50,31,50,.08);
    }
    .table-like .row:first-child{border-top:none;background:#fcf5f6;font-weight:700;color:var(--berry)}
    .footer-links a{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.25rem 0;
      color:rgba(255,255,255,.82);
      transition:color .18s ease;
    }
    .footer-links a:hover{color:#fff}
    @media (max-width: 1024px){
      .section-pad{padding:56px 0}
      .table-like .row{grid-template-columns:1fr}
    }
    @media (max-width: 768px){
      .hero-title{font-size:clamp(32px, 9vw, 42px)}
      .brand-wrap{gap:.75rem}
      .channel-bar .container{width:min(100% - 16px, 1240px)}
      .section-pad{padding:44px 0}
    }

/* roulang page: category1 */
:root{
      --berry:#321F32;
      --wine:#8E304A;
      --coral:#D87563;
      --ivory:#FAF6F1;
      --mist:#F0E9EC;
      --paper:#FFFDFC;
      --ink:#2B2528;
      --muted:#756A70;
      --line:rgba(50,31,50,.12);
      --soft-shadow:0 8px 24px rgba(50,31,50,.06);
      --lift-shadow:0 12px 30px rgba(50,31,50,.12);
      --radius:24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      background:var(--ivory);
      color:var(--ink);
      line-height:1.8;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 12% 12%, rgba(142,48,74,.08), transparent 26%),
        radial-gradient(circle at 88% 4%, rgba(216,117,99,.12), transparent 18%),
        radial-gradient(circle at 78% 82%, rgba(50,31,50,.06), transparent 28%);
      z-index:-1;
    }
    a,button,input,select,textarea{
      transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease;
    }
    img{max-width:100%;display:block}
    .brand-bar{
      background:linear-gradient(135deg,var(--berry),#40203B 55%, #522843);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .channel-bar{
      background:rgba(250,246,241,.88);
      backdrop-filter:saturate(140%) blur(8px);
      border-bottom:1px solid var(--line);
    }
    .mini-pill{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 .75rem;
      border-radius:9999px;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.12);
      color:rgba(255,255,255,.86);
      font-size:12px;
      line-height:1;
      letter-spacing:.02em;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:32px;
      padding:0 .8rem;
      border-radius:9999px;
      border:1px solid rgba(142,48,74,.16);
      background:rgba(142,48,74,.08);
      color:var(--wine);
      font-size:13px;
      font-weight:600;
    }
    .tag-muted{
      background:rgba(50,31,50,.06);
      border-color:rgba(50,31,50,.08);
      color:var(--muted);
    }
    .card-surface{
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:28px;
      box-shadow:var(--soft-shadow);
    }
    .lift-card:hover{
      box-shadow:var(--lift-shadow);
      transform:translateY(-2px);
      border-color:rgba(142,48,74,.24);
    }
    .btn-primary, .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      min-height:48px;
      padding:0 1.25rem;
      border-radius:9999px;
      font-weight:700;
      letter-spacing:.01em;
      text-decoration:none;
      border:1px solid transparent;
      cursor:pointer;
      user-select:none;
    }
    .btn-primary{
      background:var(--wine);
      color:#fff;
      box-shadow:0 10px 22px rgba(142,48,74,.18);
    }
    .btn-primary:hover{background:var(--berry);transform:translateY(-1px)}
    .btn-secondary{
      background:#fff;
      color:var(--berry);
      border-color:rgba(50,31,50,.14);
    }
    .btn-secondary:hover{
      border-color:rgba(142,48,74,.32);
      color:var(--wine);
      box-shadow:0 10px 22px rgba(50,31,50,.06);
      transform:translateY(-1px);
    }
    .focus-ring:focus-visible,
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible{
      outline:2px solid var(--coral);
      outline-offset:2px;
    }
    .rule{
      height:1px;
      background:linear-gradient(90deg,transparent,rgba(50,31,50,.18),transparent);
    }
    .scrollbar-hide::-webkit-scrollbar{display:none}
    .scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
    .section-title{
      font-size:clamp(22px,2.3vw,30px);
      line-height:1.25;
      letter-spacing:-.02em;
      color:var(--berry);
      font-weight:800;
    }
    .subtle{
      color:var(--muted);
      font-size:15px;
      line-height:1.8;
    }
    .stat-num{
      font-size:clamp(28px,4vw,42px);
      line-height:1;
      font-weight:900;
      letter-spacing:-.04em;
      color:var(--berry);
    }
    .list-bullet li{
      position:relative;
      padding-left:1.05rem;
    }
    .list-bullet li::before{
      content:"";
      position:absolute;
      left:0;
      top:.92rem;
      width:.42rem;
      height:.42rem;
      border-radius:999px;
      background:var(--wine);
      box-shadow:0 0 0 4px rgba(142,48,74,.08);
    }
    details > summary{
      list-style:none;
      cursor:pointer;
    }
    details > summary::-webkit-details-marker{display:none}
    details[open] .faq-panel{
      border-left:3px solid var(--wine);
      background:rgba(240,233,236,.55);
    }
    .footer-links a{
      color:rgba(255,255,255,.78);
    }
    .footer-links a:hover{
      color:#fff;
      text-decoration:underline;
      text-underline-offset:3px;
    }
    .soft-grid{
      background-image:linear-gradient(to right, rgba(50,31,50,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,31,50,.04) 1px, transparent 1px);
      background-size:20px 20px;
      border-radius:24px;
    }
    .cover-shape{
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 28%),
        radial-gradient(circle at 80% 30%, rgba(216,117,99,.25), transparent 24%),
        linear-gradient(160deg, #4a2942, #8E304A 62%, #d87563 140%);
    }
    .count-chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:9999px;
      padding:.35rem .7rem;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.08);
      color:rgba(255,255,255,.92);
      font-size:12px;
    }
    .age-badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border-radius:9999px;
      padding:.4rem .8rem;
      background:rgba(142,48,74,.1);
      color:var(--wine);
      border:1px solid rgba(142,48,74,.16);
      font-size:13px;
      font-weight:600;
    }
    .input-field{
      width:100%;
      min-height:48px;
      border-radius:16px;
      border:1px solid rgba(50,31,50,.14);
      background:#fff;
      padding:.85rem 1rem;
      color:var(--ink);
      box-shadow:none;
    }
    .input-field::placeholder{color:#9b8f94}
    .input-field:focus{
      border-color:rgba(216,117,99,.8);
      box-shadow:0 0 0 4px rgba(216,117,99,.12);
      outline:none;
    }
    .select-field{
      width:100%;
      min-height:48px;
      border-radius:16px;
      border:1px solid rgba(50,31,50,.14);
      background:#fff;
      padding:.85rem 1rem;
      color:var(--ink);
    }
    .select-field:focus{
      border-color:rgba(216,117,99,.8);
      box-shadow:0 0 0 4px rgba(216,117,99,.12);
      outline:none;
    }
    .faq-summary{
      color:var(--berry);
      font-weight:700;
      font-size:16px;
      line-height:1.6;
    }
    .arrow{
      transition:transform .2s ease;
    }
    .lift-card:hover .arrow{transform:translateX(3px)}
    .page-link{
      min-width:42px;
      min-height:42px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:9999px;
      border:1px solid rgba(50,31,50,.12);
      background:#fff;
      color:var(--berry);
      font-weight:700;
      text-decoration:none;
    }
    .page-link.active{
      background:var(--wine);
      color:#fff;
      border-color:var(--wine);
    }
    .page-link:hover{
      border-color:rgba(142,48,74,.3);
      box-shadow:0 10px 22px rgba(50,31,50,.06);
    }
    @media (max-width: 768px){
      .brand-stack{gap:.6rem}
    }