/* roulang page: index */
:root{
      --bg:#F7FAFC;
      --bg2:#F3F8F7;
      --card:#FFFFFF;
      --text:#1F2933;
      --muted:#64748B;
      --line:#DDE7EE;
      --rose:#F2557A;
      --mint:#28C7B7;
      --violet:#8B5CF6;
      --orange:#FFB454;
      --shadow:0 12px 30px rgba(31,41,51,.08);
      --shadow-strong:0 18px 38px rgba(31,41,51,.12);
    }
    html{scroll-behavior:smooth}
    body{
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.92)),
        repeating-linear-gradient(90deg, rgba(31,41,51,.025) 0, rgba(31,41,51,.025) 1px, transparent 1px, transparent 24px),
        repeating-linear-gradient(0deg, rgba(31,41,51,.018) 0, rgba(31,41,51,.018) 1px, transparent 1px, transparent 24px),
        var(--bg);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      letter-spacing: 0;
    }
    ::selection{background:rgba(242,85,122,.16); color:var(--text)}
    a{color:inherit; text-decoration:none}
    img{display:block; max-width:100%}
    .container-page{max-width:1240px; margin:0 auto; padding:0 18px}
    .soft-panel{
      background:rgba(255,255,255,.9);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      border-radius:14px;
      backdrop-filter: blur(10px);
    }
    .soft-panel-hover{
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    }
    .soft-panel-hover:hover{
      transform: translateY(-2px);
      box-shadow:var(--shadow-strong);
      border-color: rgba(242,85,122,.35);
    }
    .nav-link{
      position:relative;
      color:var(--muted);
      transition: color .2s ease;
    }
    .nav-link:hover,
    .nav-link.active{color:var(--text)}
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-10px;
      height:2px;
      background:var(--rose);
      border-radius:999px;
    }
    .btn-primary{
      background:var(--rose);
      color:#fff;
      border:1px solid rgba(242,85,122,.8);
      box-shadow:0 10px 18px rgba(242,85,122,.18);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn-primary:hover{
      transform: translateY(-1px);
      background:#e6466c;
      box-shadow:0 14px 22px rgba(242,85,122,.22);
    }
    .btn-ghost{
      background:#fff;
      color:var(--text);
      border:1px solid var(--line);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .btn-ghost:hover{
      transform: translateY(-1px);
      border-color:rgba(40,199,183,.55);
      box-shadow:0 12px 24px rgba(40,199,183,.08);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.35rem .7rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--muted);
      font-size:12px;
      line-height:1;
    }
    .badge-rose{
      border-color:rgba(242,85,122,.26);
      color:var(--rose);
      background:rgba(242,85,122,.08);
    }
    .badge-mint{
      border-color:rgba(40,199,183,.28);
      color:#159988;
      background:rgba(40,199,183,.09);
    }
    .badge-violet{
      border-color:rgba(139,92,246,.2);
      color:var(--violet);
      background:rgba(139,92,246,.08);
    }
    .count-box{
      min-width:72px;
      padding:14px 12px;
      border-radius:12px;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,248,247,.96));
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      text-align:center;
    }
    .count-num{
      font-size:32px;
      line-height:1;
      font-weight:800;
      color:var(--rose);
    }
    .count-label{
      margin-top:8px;
      font-size:12px;
      color:var(--muted);
    }
    .art-panel{
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(242,85,122,.14), rgba(40,199,183,.11)),
        linear-gradient(180deg, #fff, #f7fbfc);
      border:1px solid var(--line);
      border-radius:14px;
      box-shadow:var(--shadow);
      min-height:100%;
    }
    .art-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 20% 20%, rgba(242,85,122,.18) 0 12%, transparent 13%),
        radial-gradient(circle at 76% 18%, rgba(40,199,183,.18) 0 10%, transparent 11%),
        radial-gradient(circle at 72% 76%, rgba(139,92,246,.12) 0 12%, transparent 13%),
        repeating-linear-gradient(135deg, rgba(31,41,51,.035) 0, rgba(31,41,51,.035) 2px, transparent 2px, transparent 16px);
      opacity:.9;
      pointer-events:none;
    }
    .art-chip{
      position:absolute;
      z-index:2;
      border-radius:999px;
      font-size:12px;
      line-height:1;
      padding:.4rem .7rem;
      background:rgba(255,255,255,.86);
      border:1px solid rgba(221,231,238,.95);
      box-shadow:0 10px 18px rgba(31,41,51,.07);
    }
    .step-card, .info-card, .update-card, .faq-card, .trust-card{
      background:rgba(255,255,255,.94);
      border:1px solid var(--line);
      border-radius:14px;
      box-shadow:var(--shadow);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .step-card:hover, .info-card:hover, .update-card:hover, .trust-card:hover{
      transform: translateY(-2px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(40,199,183,.42);
    }
    .step-index{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:54px;
      height:28px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid rgba(40,199,183,.35);
      color:#0f8d7f;
      background:rgba(40,199,183,.08);
      font-size:12px;
      font-weight:700;
    }
    .summary-icon{
      width:22px;
      height:22px;
      flex:none;
      border-radius:999px;
      border:1px solid rgba(242,85,122,.25);
      display:grid;
      place-items:center;
      color:var(--rose);
      background:rgba(242,85,122,.08);
    }
    details[open] .summary-icon{
      background:rgba(40,199,183,.12);
      color:#0f8d7f;
      border-color:rgba(40,199,183,.35);
    }
    details[open]{
      border-color:rgba(40,199,183,.38);
      background:rgba(243,248,247,.88);
    }
    details summary::-webkit-details-marker{display:none}
    .menu-panel{
      transform-origin: top right;
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }
    .age-overlay{
      background:linear-gradient(180deg, rgba(247,250,252,.96), rgba(243,248,247,.96));
      backdrop-filter: blur(12px);
    }
    .footer-link{
      color:var(--muted);
      transition: color .2s ease;
    }
    .footer-link:hover{color:var(--rose)}
    .focusable:focus-visible,
    a:focus-visible,
    button:focus-visible,
    summary:focus-visible{
      outline:2px solid rgba(40,199,183,.5);
      outline-offset:2px;
    }
    @media (max-width: 768px){
      .count-num{font-size:26px}
      .nav-link.active::after{bottom:-6px}
    }

/* roulang page: category1 */
:root{
  --rose:#F2557A;
  --mint:#28C7B7;
  --violet:#8B5CF6;
  --amber:#FFB454;
  --bg:#F7FAFC;
  --bg-soft:#F3F8F7;
  --ink:#1F2933;
  --muted:#64748B;
  --line:#DDE7EE;
  --shadow:0 12px 30px rgba(31,41,51,.08);
  --shadow-strong:0 16px 36px rgba(31,41,51,.12);
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:
    linear-gradient(180deg,#FBFDFD 0%,#F7FAFC 45%,#F3F8F7 100%);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    repeating-linear-gradient(135deg, rgba(31,41,51,.035) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, rgba(40,199,183,.03), rgba(242,85,122,.02));
  opacity:.65;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
input[type="checkbox"]{accent-color:var(--rose)}
::selection{background:rgba(242,85,122,.18);color:#0f172a}
:focus-visible{outline:2px solid rgba(40,199,183,.55);outline-offset:2px}
.container-page{
  width:min(1240px,calc(100% - 32px));
  margin:0 auto;
}
.top-strip{
  background:rgba(242,85,122,.08);
  border-bottom:1px solid rgba(242,85,122,.12);
}
.nav-shell{
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 24px rgba(31,41,51,.04);
  backdrop-filter:blur(14px);
}
.nav-link{
  position:relative;
  color:#64748B;
  padding:.45rem 0;
  transition:color .18s ease, transform .18s ease;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  border-radius:999px;
  background:var(--rose);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s ease;
}
.nav-link:hover,
.nav-link.active{
  color:#111827;
}
.nav-link:hover::after,
.nav-link.active::after{
  transform:scaleX(1);
}
.footer-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:.7rem .8rem;
  border:1px solid transparent;
  border-radius:12px;
  color:#475569;
  transition:all .18s ease;
}
.footer-link:hover{
  background:#fff;
  border-color:var(--line);
  color:#111827;
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.section-shell{
  padding:72px 0;
}
.section-shell.tight{
  padding:56px 0;
}
.hero-shell{
  padding-top:28px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .78rem;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  border:1px solid rgba(242,85,122,.18);
  background:rgba(242,85,122,.08);
  color:var(--rose);
}
.tag-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.46rem .78rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:#475569;
  font-size:13px;
  line-height:1;
  transition:all .18s ease;
}
.tag-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(40,199,183,.35);
  box-shadow:var(--shadow);
}
.tag-chip.active{
  border-color:rgba(242,85,122,.24);
  background:rgba(242,85,122,.08);
  color:var(--rose);
}
.panel{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.panel-soft{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.card-soft{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card-soft:hover{
  transform:translateY(-2px);
  border-color:rgba(40,199,183,.35);
  box-shadow:var(--shadow-strong);
}
.btn-primary,.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:48px;
  padding:0 1.2rem;
  border-radius:12px;
  font-weight:700;
  letter-spacing:0;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.btn-primary{
  background:var(--rose);
  color:#fff;
  box-shadow:0 12px 26px rgba(242,85,122,.24);
}
.btn-primary:hover{
  transform:translateY(-1px);
  background:#eb446d;
  box-shadow:0 16px 30px rgba(242,85,122,.28);
}
.btn-secondary{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn-secondary:hover{
  transform:translateY(-1px);
  border-color:rgba(40,199,183,.35);
  box-shadow:var(--shadow);
}
.icon-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(40,199,183,.2);
  background:rgba(40,199,183,.08);
  color:var(--mint);
}
.step-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:32px;
  padding:0 .75rem;
  border-radius:999px;
  border:1px solid rgba(40,199,183,.28);
  color:var(--mint);
  background:rgba(40,199,183,.08);
  font-size:12px;
  font-weight:800;
}
.section-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
  color:var(--mint);
  text-transform:none;
}
.section-title{
  margin-top:.4rem;
  font-size:clamp(1.5rem,2.1vw,2.15rem);
  line-height:1.16;
  font-weight:800;
  color:#111827;
  letter-spacing:0;
}
.section-desc{
  margin-top:.7rem;
  max-width:68ch;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}
.countdown-digit{
  min-width:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#F8FBFC 100%);
  padding:12px 10px;
  box-shadow:0 8px 18px rgba(31,41,51,.05);
}
.countdown-value{
  display:block;
  font-size:24px;
  line-height:1;
  font-weight:800;
  color:var(--rose);
  font-variant-numeric:tabular-nums;
}
.countdown-label{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}
.faq-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  transition:all .18s ease;
}
.faq-item.open{
  background:rgba(40,199,183,.06);
  border-color:rgba(40,199,183,.42);
  box-shadow:var(--shadow);
}
.faq-question{
  width:100%;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  text-align:left;
  font-weight:700;
  color:#111827;
}
.faq-answer{
  display:none;
  padding:0 20px 18px;
  color:var(--muted);
  font-size:15px;
  line-height:1.85;
}
.faq-item.open .faq-answer{display:block}
.faq-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--line);
  color:#475569;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.faq-item.open .faq-icon{
  transform:rotate(45deg);
  border-color:rgba(40,199,183,.42);
  background:rgba(40,199,183,.08);
  color:var(--mint);
}
.mobile-menu{
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.94);
}
.input-check{
  width:18px;
  height:18px;
  margin-top:.1rem;
  flex:0 0 auto;
}
.soft-note{
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}
@media (max-width: 767px){
  .container-page{
    width:calc(100% - 24px);
  }
  .section-shell{
    padding:48px 0;
  }
  .hero-shell{
    padding-top:18px;
  }
}