/* roulang page: index */
:root{
      --bg:#21151d;
      --bg-deep:#160f15;
      --panel:#fff7f2;
      --panel-soft:#fff0ea;
      --card:#2d1c28;
      --card-2:#392132;
      --text:#fffaf7;
      --muted:#d8c2c9;
      --dark:#2a1822;
      --ink:#38222f;
      --line:rgba(255,255,255,.16);
      --line-dark:rgba(70,36,55,.16);
      --primary:#ff5a7d;
      --primary-dark:#e23d64;
      --secondary:#ffb347;
      --accent:#b96cff;
      --ok:#70d7a6;
      --warn:#ffd36a;
      --radius-sm:12px;
      --radius:18px;
      --radius-lg:26px;
      --radius-pill:999px;
      --shadow:0 22px 70px rgba(20,10,16,.34);
      --shadow-soft:0 14px 42px rgba(255,90,125,.16);
      --container:1220px;
      --ease:180ms ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
      line-height:1.72;
      color:var(--text);
      background:
        radial-gradient(circle at 18% 12%,rgba(255,90,125,.22),transparent 34%),
        radial-gradient(circle at 86% 6%,rgba(255,179,71,.18),transparent 28%),
        linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 54%,#24131f 100%);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.13;
      background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
      background-size:34px 34px;
      z-index:-1;
    }
    a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease)}
    img{display:block;max-width:100%;height:auto}
    button,input,select{font:inherit}
    button{cursor:pointer}
    input,select{
      width:100%;
      min-height:48px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:14px;
      background:rgba(255,255,255,.08);
      color:var(--text);
      padding:0 14px;
      outline:none;
      transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
    }
    input:focus,select:focus,a:focus-visible,button:focus-visible{
      outline:3px solid rgba(255,179,71,.42);
      outline-offset:3px;
    }
    input::placeholder{color:rgba(255,250,247,.62)}
    .site-shell{position:relative;min-height:100vh}
    .container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
    .section{padding:76px 0}
    .section.tight{padding:52px 0}
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:24px;
      margin-bottom:28px;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--secondary);
      font-size:14px;
      font-weight:700;
      margin-bottom:8px;
    }
    .section-kicker:before{
      content:"";
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--primary);
      box-shadow:0 0 0 6px rgba(255,90,125,.16);
    }
    h1,h2,h3,p{margin-top:0}
    h1{
      max-width:920px;
      font-size:clamp(40px,7vw,84px);
      line-height:1.05;
      letter-spacing:0;
      margin-bottom:22px;
      font-weight:900;
    }
    h2{
      color:var(--text);
      font-size:clamp(28px,4vw,44px);
      line-height:1.16;
      margin-bottom:10px;
      font-weight:860;
      letter-spacing:0;
    }
    h3{
      font-size:21px;
      line-height:1.35;
      margin-bottom:10px;
      font-weight:800;
      letter-spacing:0;
    }
    p{color:var(--muted);font-size:16px}
    .text-dark h2,.text-dark h3{color:var(--ink)}
    .text-dark p{color:#765a68}
    .pill-nav-wrap{
      position:fixed;
      top:18px;
      left:0;
      right:0;
      z-index:50;
      pointer-events:none;
    }
    .pill-nav{
      pointer-events:auto;
      width:min(calc(100% - 28px),1160px);
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:10px 12px 10px 16px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:var(--radius-pill);
      background:rgba(34,19,30,.78);
      box-shadow:0 18px 56px rgba(15,7,12,.38);
      backdrop-filter:blur(14px);
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
      font-weight:900;
      color:#fff;
      white-space:nowrap;
    }
    .brand-mark{
      width:36px;
      height:36px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      color:#2a121c;
      font-weight:900;
      box-shadow:0 10px 26px rgba(255,90,125,.35);
    }
    .nav-scroll{
      display:flex;
      align-items:center;
      gap:6px;
      overflow-x:auto;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
    }
    .nav-scroll::-webkit-scrollbar{display:none}
    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:0 15px;
      border-radius:var(--radius-pill);
      color:rgba(255,250,247,.78);
      font-size:14px;
      font-weight:700;
      white-space:nowrap;
    }
    .nav-link:hover{color:#fff;background:rgba(255,255,255,.1)}
    .nav-link.active{
      color:#2a121c;
      background:linear-gradient(135deg,var(--secondary),var(--primary));
      box-shadow:0 10px 25px rgba(255,90,125,.24);
    }
    .nav-age{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:0 14px;
      border-radius:var(--radius-pill);
      border:1px solid rgba(255,211,106,.48);
      color:#ffe6a8;
      font-weight:800;
      font-size:13px;
      background:rgba(255,211,106,.1);
    }
    .hero{
      position:relative;
      min-height:760px;
      padding:126px 0 64px;
      display:flex;
      align-items:center;
      overflow:hidden;
    }
    .hero-media{
      position:absolute;
      inset:0;
      z-index:0;
      background:
        linear-gradient(90deg,rgba(22,15,21,.92),rgba(22,15,21,.52) 48%,rgba(22,15,21,.86)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23ff5a7d'/%3E%3Cstop offset='.52' stop-color='%237b3cff'/%3E%3Cstop offset='1' stop-color='%23ffb347'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='%2321141c'/%3E%3Cpath d='M1120 70c190 62 280 200 260 386-24 216-217 337-429 344-187 6-319-86-370-220-65-171 30-352 202-453 98-58 211-91 337-57z' fill='url(/%23g)' opacity='.55'/%3E%3Cpath d='M150 755c213-244 422-322 628-235 91 39 175 115 252 229' fill='none' stroke='%23fff7f2' stroke-opacity='.12' stroke-width='38'/%3E%3Cg opacity='.20'%3E%3Crect x='920' y='145' width='108' height='520' rx='54' fill='%23fff7f2'/%3E%3Crect x='1060' y='95' width='132' height='610' rx='66' fill='%23ffb347'/%3E%3Crect x='1235' y='182' width='104' height='480' rx='52' fill='%23ff5a7d'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
    }
    .hero-media:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(22,15,21,.05),var(--bg) 96%);
    }
    .hero-content{
      position:relative;
      z-index:1;
      width:100%;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) 430px;
      gap:42px;
      align-items:end;
    }
    .hero-copy{
      padding-top:70px;
    }
    .hero-copy .lead{
      max-width:760px;
      font-size:19px;
      color:#f3dfe6;
      margin-bottom:28px;
    }
    .hero-badges,.tag-cloud,.filter-tags{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .badge,.tag{
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:32px;
      padding:5px 12px;
      border-radius:var(--radius-pill);
      font-size:13px;
      font-weight:800;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.08);
      color:#fff7f2;
    }
    .badge.hot{background:rgba(255,90,125,.18);border-color:rgba(255,90,125,.42);color:#ffd5df}
    .badge.safe{background:rgba(112,215,166,.14);border-color:rgba(112,215,166,.45);color:#bff5d9}
    .tag:hover,.tag.active{background:rgba(255,90,125,.22);border-color:rgba(255,90,125,.55);transform:translateY(-2px)}
    .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:48px;
      padding:0 22px;
      border-radius:var(--radius-pill);
      border:1px solid transparent;
      font-weight:900;
      line-height:1;
      transition:transform var(--ease),box-shadow var(--ease),background var(--ease),border-color var(--ease),color var(--ease);
    }
    .btn.primary{
      color:#2b101b;
      background:linear-gradient(135deg,var(--secondary),var(--primary));
      box-shadow:0 16px 36px rgba(255,90,125,.3);
    }
    .btn.secondary{
      color:#fff7f2;
      border-color:rgba(255,255,255,.22);
      background:rgba(255,255,255,.08);
    }
    .btn.ghost{
      color:#ffe0a6;
      border-color:rgba(255,211,106,.38);
      background:rgba(255,211,106,.08);
    }
    .btn:hover{transform:translateY(-3px)}
    .btn.primary:hover{box-shadow:0 20px 46px rgba(255,90,125,.42)}
    .btn.secondary:hover,.btn.ghost:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.13)}
    .btn:active{transform:translateY(-1px)}
    .hero-panel{
      border:1px solid rgba(255,255,255,.16);
      background:rgba(45,28,40,.84);
      border-radius:var(--radius-lg);
      padding:18px;
      box-shadow:var(--shadow);
    }
    .matrix{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .matrix-card{
      min-height:122px;
      border-radius:22px;
      padding:16px;
      background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.14);
      position:relative;
      overflow:hidden;
    }
    .matrix-card:after{
      content:"";
      position:absolute;
      width:84px;
      height:84px;
      right:-26px;
      bottom:-26px;
      border-radius:50%;
      background:rgba(255,90,125,.22);
    }
    .matrix-card strong{display:block;font-size:18px;margin-bottom:6px}
    .matrix-card span{position:relative;z-index:1;color:var(--muted);font-size:13px}
    .age-note{
      margin-top:14px;
      padding:14px 15px;
      border-radius:18px;
      border:1px solid rgba(255,211,106,.38);
      background:rgba(255,211,106,.08);
      color:#ffe7ad;
      font-size:14px;
      font-weight:700;
    }
    .play-button{
      width:66px;
      height:66px;
      border-radius:50%;
      display:grid;
      place-items:center;
      margin-bottom:20px;
      color:#2b101b;
      background:linear-gradient(135deg,#fff7f2,var(--secondary));
      box-shadow:0 16px 40px rgba(255,179,71,.36);
      border:0;
    }
    .play-button span{
      width:0;
      height:0;
      border-top:11px solid transparent;
      border-bottom:11px solid transparent;
      border-left:17px solid #2b101b;
      margin-left:4px;
    }
    .step-rail{
      display:grid;
      grid-template-columns:1.1fr .9fr 1fr .9fr;
      gap:16px;
      align-items:stretch;
    }
    .step-card{
      border:1px solid rgba(255,255,255,.14);
      background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
      border-radius:var(--radius-lg);
      padding:22px;
      min-height:178px;
      position:relative;
      overflow:hidden;
      transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease);
    }
    .step-card:nth-child(even){transform:translateY(24px)}
    .step-card:hover{transform:translateY(-3px);border-color:rgba(255,90,125,.42);box-shadow:var(--shadow-soft)}
    .step-card:nth-child(even):hover{transform:translateY(18px)}
    .step-num{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:rgba(255,90,125,.18);
      color:#ffd6df;
      font-weight:900;
      margin-bottom:18px;
    }
    .reward-band{
      background:var(--panel);
      color:var(--ink);
      position:relative;
    }
    .reward-grid{
      display:grid;
      grid-template-columns:1.35fr repeat(2,1fr);
      gap:18px;
    }
    .vertical-card{
      background:#fff;
      border:1px solid rgba(70,36,55,.1);
      border-radius:var(--radius-lg);
      overflow:hidden;
      box-shadow:0 14px 36px rgba(52,25,41,.1);
      transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
    }
    .vertical-card:hover{
      transform:translateY(-4px);
      box-shadow:0 22px 48px rgba(255,90,125,.18);
      border-color:rgba(255,90,125,.26);
    }
    .visual{
      aspect-ratio:9/10;
      background:
        linear-gradient(145deg,rgba(255,90,125,.82),rgba(185,108,255,.66)),
        linear-gradient(90deg,rgba(255,255,255,.18) 0 12%,transparent 12% 22%,rgba(255,255,255,.12) 22% 34%,transparent 34%);
      position:relative;
      overflow:hidden;
    }
    .visual:before{
      content:"";
      position:absolute;
      inset:18px;
      border-radius:26px;
      border:1px solid rgba(255,255,255,.24);
      background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);
    }
    .visual.gold{background:linear-gradient(145deg,rgba(255,179,71,.9),rgba(255,90,125,.68))}
    .visual.plum{background:linear-gradient(145deg,rgba(185,108,255,.86),rgba(255,90,125,.64))}
    .visual.green{background:linear-gradient(145deg,rgba(112,215,166,.76),rgba(255,179,71,.62))}
    .card-body{padding:18px}
    .card-body p{color:#765a68;font-size:14px;margin-bottom:14px}
    .card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
    .mini-tag{
      display:inline-flex;
      align-items:center;
      min-height:26px;
      padding:2px 9px;
      border-radius:var(--radius-pill);
      background:#fff0ea;
      color:#9a3352;
      font-weight:800;
      font-size:12px;
    }
    .card-link{
      display:inline-flex;
      align-items:center;
      color:#8c2747;
      font-weight:900;
    }
    .wide-card{
      grid-row:span 2;
      display:grid;
      grid-template-rows:minmax(260px,1fr) auto;
    }
    .wide-card .visual{aspect-ratio:auto;min-height:310px}
    .progress-wrap{
      display:grid;
      grid-template-columns:1fr 370px;
      gap:22px;
      align-items:stretch;
    }
    .progress-panel,.age-form,.info-panel{
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.07);
      border-radius:var(--radius-lg);
      padding:24px;
      box-shadow:var(--shadow);
    }
    .progress-line{
      position:relative;
      display:grid;
      gap:18px;
      margin-top:18px;
    }
    .progress-item{
      display:grid;
      grid-template-columns:42px 1fr auto;
      gap:14px;
      align-items:center;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.1);
    }
    .dot{
      width:42px;
      height:42px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#2b101b;
      background:linear-gradient(135deg,var(--secondary),var(--primary));
      font-weight:900;
    }
    .status{
      color:#bff5d9;
      font-size:13px;
      font-weight:900;
    }
    .bar{
      height:12px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      overflow:hidden;
      margin-top:20px;
    }
    .bar span{
      display:block;
      height:100%;
      width:72%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
    }
    .form-row{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
    .check{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#f5dce4;
      font-size:14px;
      margin:10px 0 16px;
    }
    .check input{
      width:18px;
      height:18px;
      min-height:18px;
      margin-top:4px;
      accent-color:var(--primary);
    }
    .topic-strip{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .topic-card{
      min-height:150px;
      padding:18px;
      border-radius:22px;
      background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.13);
      transition:transform var(--ease),background var(--ease),border-color var(--ease);
    }
    .topic-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.11);border-color:rgba(255,179,71,.36)}
    .topic-card strong{display:block;font-size:18px;margin-bottom:8px}
    .topic-card p{font-size:14px;margin-bottom:0}
    .news-band{
      background:#fff7f2;
      color:var(--ink);
    }
    .news-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 360px;
      gap:22px;
    }
    .news-list,.side-reco{
      border:1px solid var(--line-dark);
      border-radius:var(--radius-lg);
      background:#fff;
      padding:18px;
      box-shadow:0 16px 38px rgba(52,25,41,.08);
    }
    .news-item{
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:14px;
      align-items:center;
      padding:16px 10px;
      border-bottom:1px solid rgba(70,36,55,.1);
    }
    .news-item:last-child{border-bottom:0}
    .news-date{
      min-width:72px;
      color:#a03655;
      font-weight:900;
      font-size:14px;
    }
    .news-item a{
      color:var(--ink);
      font-weight:850;
    }
    .news-item a:hover{color:var(--primary-dark)}
    .news-item span{color:#8a6a78;font-size:13px}
    .side-reco .tag{background:#fff0ea;color:#9a3352;border-color:#ffd1dc}
    .ip-row{
      display:flex;
      gap:16px;
      overflow-x:auto;
      padding-bottom:8px;
      scrollbar-color:rgba(255,90,125,.45) transparent;
    }
    .ip-card{
      flex:0 0 265px;
      border-radius:var(--radius-lg);
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.08);
      padding:16px;
      transition:transform var(--ease),border-color var(--ease);
    }
    .ip-card:hover{transform:translateY(-4px);border-color:rgba(255,90,125,.42)}
    .avatar-art{
      width:72px;
      height:72px;
      border-radius:24px;
      margin-bottom:14px;
      background:linear-gradient(135deg,var(--primary),var(--accent));
      position:relative;
      overflow:hidden;
    }
    .avatar-art:after{
      content:"";
      position:absolute;
      inset:18px 14px -10px;
      border-radius:999px 999px 18px 18px;
      background:rgba(255,255,255,.28);
    }
    .faq-band{
      background:linear-gradient(180deg,#24131f,#180f16);
    }
    .accordion{
      background:transparent;
    }
    .accordion-item{
      margin-bottom:12px;
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
    }
    .accordion-title{
      color:#fff7f2;
      font-size:17px;
      font-weight:900;
      border:0;
      padding:18px 54px 18px 18px;
      background:transparent;
    }
    .accordion-title:hover,.accordion-title:focus{background:rgba(255,255,255,.08);color:#fff}
    .accordion-content{
      color:#ead1da;
      background:rgba(255,255,255,.04);
      border:0;
      padding:0 18px 18px;
    }
    .accordion-content p{margin-bottom:0}
    .final-cta{
      text-align:center;
      padding:70px 24px;
      border-radius:32px;
      background:
        linear-gradient(135deg,rgba(255,90,125,.88),rgba(255,179,71,.82)),
        radial-gradient(circle at 80% 20%,rgba(255,255,255,.25),transparent 28%);
      color:#2b101b;
      box-shadow:0 24px 72px rgba(255,90,125,.28);
    }
    .final-cta h2{color:#2b101b}
    .final-cta p{max-width:780px;margin:0 auto;color:#55293a}
    .final-cta .btn.secondary{color:#2b101b;border-color:rgba(43,16,27,.26);background:rgba(255,255,255,.28)}
    .compliance-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      margin-top:24px;
    }
    .compliance-item{
      border:1px solid rgba(255,255,255,.13);
      border-radius:18px;
      padding:16px;
      background:rgba(255,255,255,.06);
    }
    .compliance-item strong{display:block;margin-bottom:5px;color:#fff7f2}
    .compliance-item span{color:var(--muted);font-size:13px}
    .site-footer{
      padding:46px 0 34px;
      background:#130c12;
      border-top:1px solid rgba(255,255,255,.1);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr 1fr;
      gap:28px;
      align-items:start;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .footer-links a{
      min-height:34px;
      display:inline-flex;
      align-items:center;
      padding:0 12px;
      border-radius:var(--radius-pill);
      color:#dac2ca;
      background:rgba(255,255,255,.06);
      font-size:14px;
    }
    .footer-links a:hover{color:#fff;background:rgba(255,90,125,.18)}
    .copyright{
      margin-top:24px;
      color:#9f8790;
      font-size:13px;
      border-top:1px solid rgba(255,255,255,.08);
      padding-top:18px;
    }
    @media (max-width:1024px){
      .hero-grid,.progress-wrap,.news-layout{grid-template-columns:1fr}
      .hero{min-height:auto;padding-top:112px}
      .hero-panel{max-width:620px}
      .step-rail{grid-template-columns:1fr 1fr}
      .step-card:nth-child(even),.step-card:nth-child(even):hover{transform:none}
      .reward-grid{grid-template-columns:1fr 1fr}
      .wide-card{grid-column:span 2}
      .topic-strip,.compliance-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .container{width:min(calc(100% - 28px),var(--container))}
      .section{padding:54px 0}
      .pill-nav{align-items:center;gap:10px;padding:8px 10px;border-radius:26px}
      .brand span:last-child{max-width:130px;overflow:hidden;text-overflow:ellipsis}
      .nav-age{display:none}
      .nav-scroll{flex:1}
      .hero-copy{padding-top:46px}
      .hero-copy .lead{font-size:16px}
      .matrix{grid-template-columns:1fr 1fr}
      .section-head{display:block}
      .reward-grid{grid-template-columns:1fr}
      .wide-card{grid-column:auto}
      .wide-card .visual{min-height:260px}
      .news-item{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .footer-links{justify-content:flex-start}
    }
    @media (max-width:520px){
      .pill-nav-wrap{top:10px}
      .pill-nav{width:calc(100% - 16px)}
      .brand-mark{width:32px;height:32px}
      .nav-link{min-height:38px;padding:0 12px;font-size:13px}
      h1{font-size:38px}
      .btn-row{display:grid;grid-template-columns:1fr}
      .btn{width:100%;min-height:48px}
      .matrix,.step-rail,.topic-strip,.compliance-grid{grid-template-columns:1fr}
      .progress-item{grid-template-columns:38px 1fr}
      .progress-item .status{grid-column:2}
      .ip-card{flex-basis:230px}
    }
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
    }

/* roulang page: category1 */
:root{
      --bg:#1b1016;
      --bg-soft:#2a1721;
      --panel:#fff7f2;
      --panel-2:#f9e9e3;
      --text:#fff9f6;
      --text-dark:#241116;
      --muted:#d7b7c2;
      --muted-dark:#765c64;
      --primary:#ff4f7b;
      --primary-deep:#d93663;
      --accent:#ffb84d;
      --accent-2:#8df0d2;
      --line:rgba(255,255,255,.16);
      --line-dark:rgba(36,17,22,.12);
      --shadow:0 22px 70px rgba(0,0,0,.28);
      --shadow-warm:0 18px 44px rgba(255,79,123,.22);
      --radius:22px;
      --radius-sm:14px;
      --container:1220px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
      line-height:1.7;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%,rgba(255,79,123,.24),transparent 28%),
        radial-gradient(circle at 84% 18%,rgba(255,184,77,.18),transparent 26%),
        linear-gradient(180deg,#1b1016 0%,#24131c 48%,#160d12 100%);
      min-height:100vh;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.18;
      background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
      background-size:34px 34px;
      z-index:-1;
    }
    a{color:inherit;text-decoration:none;transition:.22s ease}
    img{max-width:100%;display:block}
    button,input,select{font:inherit}
    button{cursor:pointer}
    .container{
      width:min(var(--container),calc(100% - 40px));
      margin-inline:auto;
    }
    .pill-nav-wrap{
      position:fixed;
      top:18px;
      left:0;
      right:0;
      z-index:50;
      padding:0 18px;
    }
    .pill-nav{
      width:min(1180px,100%);
      margin:0 auto;
      min-height:68px;
      display:flex;
      align-items:center;
      gap:14px;
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      background:rgba(35,17,25,.86);
      box-shadow:0 18px 44px rgba(0,0,0,.32);
      backdrop-filter:blur(12px);
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
      font-weight:800;
      color:#fff;
      white-space:nowrap;
    }
    .brand:hover,.brand:focus{color:#fff;transform:translateY(-1px)}
    .brand-mark{
      display:inline-grid;
      place-items:center;
      width:40px;
      height:40px;
      border-radius:50%;
      color:#241116;
      background:linear-gradient(135deg,var(--accent),var(--primary));
      font-size:13px;
      box-shadow:0 10px 22px rgba(255,79,123,.3);
    }
    .nav-scroll{
      display:flex;
      align-items:center;
      gap:6px;
      flex:1 1 auto;
      overflow-x:auto;
      scrollbar-width:none;
      padding:4px;
    }
    .nav-scroll::-webkit-scrollbar{display:none}
    .nav-link,.nav-age{
      min-height:42px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0 16px;
      border-radius:999px;
      color:#f3d7de;
      white-space:nowrap;
      font-size:14px;
      border:1px solid transparent;
    }
    .nav-link:hover,.nav-age:hover,.nav-link:focus,.nav-age:focus{
      color:#fff;
      border-color:rgba(255,255,255,.24);
      background:rgba(255,255,255,.08);
      outline:none;
    }
    .nav-link.active{
      color:#241116;
      background:linear-gradient(135deg,var(--accent),var(--primary));
      box-shadow:0 10px 26px rgba(255,79,123,.28);
      font-weight:800;
    }
    .nav-age{
      flex:0 0 auto;
      background:rgba(255,184,77,.12);
      border-color:rgba(255,184,77,.3);
      color:#ffe1ae;
    }
    .hero{
      padding:132px 0 68px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.02fr) minmax(360px,.72fr);
      gap:26px;
      align-items:stretch;
    }
    .hero-copy{
      padding:28px 0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid var(--line);
      color:#ffe1ae;
      font-size:14px;
      margin-bottom:18px;
    }
    h1{
      margin:0;
      max-width:820px;
      font-size:clamp(34px,5vw,66px);
      line-height:1.08;
      font-weight:900;
      color:#fff;
    }
    .hero-copy h1 span{color:var(--accent)}
    .hero-lead{
      max-width:720px;
      margin:20px 0 0;
      color:#ead0d7;
      font-size:18px;
    }
    .hero-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:26px;
    }
    .btn{
      min-height:48px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:0 20px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:800;
      transition:.22s ease;
    }
    .btn-primary{
      color:#241116;
      background:linear-gradient(135deg,var(--accent),var(--primary));
      box-shadow:var(--shadow-warm);
    }
    .btn-primary:hover,.btn-primary:focus{
      color:#241116;
      transform:translateY(-3px);
      box-shadow:0 24px 54px rgba(255,79,123,.3);
      outline:none;
    }
    .btn-secondary{
      color:#fff7f2;
      background:rgba(255,255,255,.07);
      border-color:rgba(255,255,255,.2);
    }
    .btn-secondary:hover,.btn-secondary:focus{
      color:#fff;
      background:rgba(255,255,255,.12);
      border-color:rgba(255,184,77,.5);
      outline:none;
      transform:translateY(-2px);
    }
    .hero-panel{
      border-radius:30px;
      border:1px solid var(--line);
      background:linear-gradient(160deg,rgba(255,247,242,.14),rgba(255,79,123,.09));
      box-shadow:var(--shadow);
      padding:18px;
      overflow:hidden;
    }
    .featured-choice{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }
    .choice-card{
      position:relative;
      overflow:hidden;
      min-height:132px;
      padding:18px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.17);
      background:rgba(255,255,255,.08);
    }
    .choice-card.recommend{
      min-height:184px;
      background:
        linear-gradient(135deg,rgba(255,184,77,.22),rgba(255,79,123,.22)),
        linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
      box-shadow:0 18px 40px rgba(255,79,123,.18);
    }
    .choice-card:before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg,transparent 0 28%,rgba(255,255,255,.12) 28% 38%,transparent 38% 100%);
      transform:translateX(-40%);
      transition:.35s ease;
    }
    .choice-card:hover:before{transform:translateX(28%)}
    .choice-card > *{position:relative}
    .choice-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(255,184,77,.18);
      border:1px solid rgba(255,184,77,.34);
      color:#ffe0ad;
      font-size:13px;
      font-weight:800;
    }
    .choice-card h2,.choice-card h3{
      margin:14px 0 8px;
      color:#fff;
      font-size:24px;
      line-height:1.25;
    }
    .choice-card h3{font-size:19px}
    .choice-card p{margin:0;color:#ead0d7}
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.13);
      color:#f5dce3;
      font-size:13px;
    }
    main{position:relative}
    .section{
      padding:52px 0;
    }
    .section.light{
      color:var(--text-dark);
      background:linear-gradient(180deg,var(--panel),var(--panel-2));
      border-radius:38px 38px 0 0;
      margin-top:18px;
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:24px;
      margin-bottom:24px;
    }
    .section-head h2{
      margin:0;
      font-size:clamp(26px,3.2vw,42px);
      line-height:1.18;
      color:inherit;
    }
    .section-head p{
      margin:0;
      max-width:560px;
      color:var(--muted);
    }
    .light .section-head p{color:var(--muted-dark)}
    .filter-strip{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      padding:12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.07);
      margin-bottom:26px;
    }
    .filter-strip button{
      min-height:40px;
      border:1px solid rgba(255,255,255,.16);
      border-radius:999px;
      padding:0 14px;
      color:#f7d9e1;
      background:rgba(255,255,255,.06);
      transition:.2s ease;
    }
    .filter-strip button:hover,.filter-strip button:focus,.filter-strip button.active{
      color:#241116;
      background:linear-gradient(135deg,var(--accent),var(--primary));
      outline:none;
      border-color:transparent;
    }
    .content-flow{
      display:grid;
      grid-template-columns:1.15fr .85fr .85fr;
      gap:18px;
      align-items:stretch;
    }
    .vertical-card{
      overflow:hidden;
      border-radius:24px;
      background:#fff;
      color:var(--text-dark);
      border:1px solid var(--line-dark);
      box-shadow:0 16px 38px rgba(36,17,22,.12);
      transition:.22s ease;
    }
    .vertical-card:hover{
      transform:translateY(-4px);
      box-shadow:0 24px 54px rgba(36,17,22,.18);
    }
    .visual{
      position:relative;
      aspect-ratio:4/5;
      overflow:hidden;
      background:
        radial-gradient(circle at 18% 18%,rgba(255,184,77,.9),transparent 22%),
        linear-gradient(145deg,#492235,#ff4f7b 52%,#241116);
    }
    .wide .visual{aspect-ratio:16/9}
    .visual:after{
      content:"";
      position:absolute;
      inset:16px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.32);
      background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 52%);
    }
    .visual.alt{background:linear-gradient(145deg,#251017,#8df0d2 42%,#ff4f7b)}
    .visual.gold{background:linear-gradient(145deg,#2a1721,#ffb84d 46%,#d93663)}
    .visual.plum{background:linear-gradient(145deg,#311827,#7b3158 45%,#ff4f7b)}
    .card-body{padding:18px}
    .card-body h3{
      margin:10px 0 8px;
      font-size:21px;
      line-height:1.28;
      color:var(--text-dark);
    }
    .card-body p{margin:0;color:var(--muted-dark);font-size:15px}
    .card-meta{
      display:flex;
      justify-content:space-between;
      gap:10px;
      margin-top:14px;
      color:#9a4b5f;
      font-size:13px;
      font-weight:700;
    }
    .mini-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      margin-top:16px;
      padding:0 14px;
      border-radius:999px;
      color:#241116;
      background:#ffe4b0;
      font-weight:800;
    }
    .mini-link:hover,.mini-link:focus{
      background:var(--primary);
      color:#fff;
      outline:none;
    }
    .index-band{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
      margin-top:28px;
    }
    .index-item{
      padding:16px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.07);
      color:#fff7f2;
    }
    .index-item strong{display:block;font-size:20px;color:var(--accent)}
    .index-item span{display:block;margin-top:4px;color:#e5c3cb;font-size:14px}
    .steps{
      display:grid;
      grid-template-columns:1fr 1.15fr 1fr;
      gap:16px;
      align-items:center;
    }
    .step-card{
      min-height:160px;
      padding:20px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.08);
    }
    .step-card:nth-child(2){transform:translateY(18px)}
    .step-num{
      width:38px;
      height:38px;
      display:grid;
      place-items:center;
      border-radius:50%;
      color:#241116;
      background:linear-gradient(135deg,var(--accent),var(--primary));
      font-weight:900;
    }
    .step-card h3{margin:14px 0 8px;font-size:21px}
    .step-card p{margin:0;color:#e7c8d0}
    .progress-wrap{
      padding:24px;
      border-radius:28px;
      background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
      border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .progress-lines{
      display:grid;
      gap:14px;
    }
    .progress-item{
      display:grid;
      grid-template-columns:150px 1fr auto;
      gap:14px;
      align-items:center;
    }
    .progress-label{font-weight:800;color:#fff}
    .bar{
      height:12px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      overflow:hidden;
    }
    .bar span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--accent),var(--primary),var(--accent-2));
    }
    .progress-state{color:#ffe0ad;font-weight:800}
    .age-card{
      display:grid;
      grid-template-columns:1fr 1fr auto;
      gap:12px;
      align-items:end;
      margin-top:20px;
      padding:18px;
      border-radius:22px;
      background:rgba(255,184,77,.1);
      border:1px solid rgba(255,184,77,.26);
    }
    label{color:#ffe8d7;font-weight:800}
    input[type="number"]{
      min-height:48px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.2);
      background:rgba(255,255,255,.08);
      color:#fff;
      box-shadow:none;
      margin:6px 0 0;
    }
    input[type="number"]:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(255,184,77,.18);
      background:rgba(255,255,255,.11);
    }
    .checkline{
      display:flex;
      align-items:center;
      gap:10px;
      min-height:48px;
      color:#f5dce3;
      font-weight:700;
    }
    .checkline input{width:20px;height:20px;margin:0}
    .form-note{
      grid-column:1/-1;
      color:#ffd4de;
      min-height:24px;
      margin:0;
      font-size:14px;
    }
    .cta-band{
      padding:42px;
      border-radius:34px;
      color:#241116;
      background:
        radial-gradient(circle at 92% 18%,rgba(141,240,210,.7),transparent 24%),
        linear-gradient(135deg,#fff2cd,#ffcad7 58%,#ffb84d);
      box-shadow:var(--shadow-warm);
      display:grid;
      grid-template-columns:1fr auto;
      gap:22px;
      align-items:center;
    }
    .cta-band h2{margin:0 0 8px;font-size:34px;line-height:1.18;color:#241116}
    .cta-band p{margin:0;color:#6c3c48;max-width:680px}
    .cta-band .btn-secondary{
      color:#241116;
      border-color:rgba(36,17,22,.22);
      background:rgba(255,255,255,.44);
    }
    .accordion{
      background:transparent;
    }
    .accordion-item{
      margin-bottom:10px;
      border-radius:18px;
      overflow:hidden;
      border:1px solid var(--line-dark);
      background:#fff;
      box-shadow:0 12px 28px rgba(36,17,22,.08);
    }
    .accordion-title{
      color:var(--text-dark);
      font-weight:900;
      font-size:17px;
      padding:18px 52px 18px 18px;
      border:0;
    }
    .accordion-title:hover,.accordion-title:focus{
      color:var(--primary-deep);
      background:#fff4ef;
      outline:none;
    }
    .accordion-content{
      border:0;
      color:var(--muted-dark);
      background:#fff;
      padding:0 18px 18px;
    }
    .compliance-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:18px;
      align-items:start;
    }
    .notice-box{
      padding:22px;
      border-radius:24px;
      background:rgba(255,255,255,.08);
      border:1px solid var(--line);
    }
    .notice-box h2,.notice-box h3{margin:0 0 10px;color:#fff}
    .notice-box p{margin:0;color:#e7c8d0}
    .notice-list{
      display:grid;
      gap:10px;
      margin:16px 0 0;
      padding:0;
      list-style:none;
    }
    .notice-list li{
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.12);
      color:#f7d9e1;
    }
    .site-footer{
      padding:44px 0 28px;
      background:#13090e;
      border-top:1px solid rgba(255,255,255,.12);
      color:#fff;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1fr auto;
      gap:28px;
      align-items:start;
    }
    .footer-links{
      display:grid;
      grid-template-columns:repeat(2,minmax(120px,auto));
      gap:10px 18px;
    }
    .footer-links a{
      color:#f0cbd4;
      font-weight:700;
    }
    .footer-links a:hover,.footer-links a:focus{
      color:var(--accent);
      outline:none;
    }
    .copyright{
      margin-top:28px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.1);
      color:#b9919b;
      font-size:14px;
    }
    @media (prefers-reduced-motion:reduce){
      *,*:before,*:after{transition:none!important;scroll-behavior:auto!important}
    }
    @media (max-width:1024px){
      .hero-grid,.compliance-grid{grid-template-columns:1fr}
      .content-flow{grid-template-columns:1fr 1fr}
      .content-flow .wide{grid-column:1/-1}
      .steps{grid-template-columns:1fr}
      .step-card:nth-child(2){transform:none}
      .index-band{grid-template-columns:repeat(2,1fr)}
      .cta-band{grid-template-columns:1fr}
      .age-card{grid-template-columns:1fr 1fr}
      .age-card .btn{grid-column:1/-1}
    }
    @media (max-width:768px){
      .container{width:min(100% - 28px,var(--container))}
      .pill-nav-wrap{top:10px;padding:0 10px}
      .pill-nav{border-radius:26px;align-items:flex-start;gap:8px;min-height:auto;flex-wrap:wrap}
      .brand{width:100%;justify-content:space-between;padding:0 4px}
      .nav-scroll{order:3;width:100%;padding-bottom:2px}
      .nav-link,.nav-age{min-height:40px;padding:0 13px;font-size:13px}
      .hero{padding-top:150px}
      .section{padding:40px 0}
      .section-head{display:block}
      .section-head p{margin-top:10px}
      .filter-strip{border-radius:22px;overflow-x:auto;flex-wrap:nowrap}
      .content-flow{grid-template-columns:1fr 1fr;gap:12px}
      .card-body{padding:14px}
      .card-body h3{font-size:18px}
      .progress-item{grid-template-columns:1fr;gap:8px}
      .age-card{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .footer-links{grid-template-columns:1fr 1fr}
    }
    @media (max-width:520px){
      h1{font-size:36px}
      .hero-actions .btn{width:100%}
      .content-flow{grid-template-columns:1fr}
      .index-band{grid-template-columns:1fr}
      .cta-band{padding:26px}
      .cta-band h2{font-size:26px}
      .footer-links{grid-template-columns:1fr}
    }

/* roulang page: category3 */
:root{
      --bg:#1d1117;
      --bg-2:#2b1623;
      --panel:#fff7f5;
      --panel-2:#2f1a27;
      --text:#fff6f3;
      --text-dark:#2b151d;
      --muted:#d8b8c2;
      --muted-dark:#74545f;
      --line:rgba(255,255,255,.16);
      --line-dark:rgba(56,25,38,.14);
      --primary:#ff4f88;
      --primary-deep:#e23570;
      --accent:#ffb12f;
      --accent-2:#50e3c2;
      --danger:#ff6a5f;
      --radius-sm:14px;
      --radius-md:20px;
      --radius-lg:28px;
      --radius-pill:999px;
      --shadow:0 22px 70px rgba(14,5,10,.34);
      --shadow-soft:0 14px 35px rgba(72,22,42,.18);
      --container:1220px;
      --ease:180ms ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      line-height:1.72;
      background:
        radial-gradient(circle at 12% 8%, rgba(255,79,136,.24), transparent 30%),
        radial-gradient(circle at 88% 22%, rgba(255,177,47,.20), transparent 28%),
        linear-gradient(135deg,#1d1117 0%,#2a1422 45%,#140d11 100%);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.12;
      background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
      background-size:34px 34px;
      z-index:-1;
    }
    a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
    a:hover,a:focus{color:inherit}
    img{max-width:100%;height:auto;display:block}
    button,input,select{font:inherit}
    button{cursor:pointer}
    input,select{
      min-height:48px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.2);
      background:rgba(255,255,255,.08);
      color:var(--text);
      padding:0 16px;
      outline:none;
      transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
    }
    input:focus,select:focus,button:focus-visible,a:focus-visible{
      outline:3px solid rgba(80,227,194,.34);
      outline-offset:3px;
      border-color:var(--accent-2);
    }
    .container{width:min(calc(100% - 32px),var(--container));margin:0 auto}
    .section{padding:74px 0}
    .section-tight{padding:48px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#ffd4df;
      background:rgba(255,79,136,.14);
      border:1px solid rgba(255,79,136,.32);
      border-radius:var(--radius-pill);
      padding:7px 12px;
      font-size:14px;
      font-weight:700;
    }
    .pill-nav-wrap{
      position:fixed;
      top:18px;
      left:0;
      right:0;
      z-index:30;
      padding:0 16px;
      pointer-events:none;
    }
    .pill-nav{
      width:min(1180px,100%);
      margin:0 auto;
      min-height:64px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:9px 10px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:var(--radius-pill);
      background:rgba(34,17,27,.88);
      box-shadow:0 18px 48px rgba(0,0,0,.32);
      backdrop-filter:blur(10px);
      pointer-events:auto;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      min-width:max-content;
      font-weight:900;
      color:#fff;
      padding:8px 12px;
      border-radius:var(--radius-pill);
    }
    .brand:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
    .brand-mark{
      display:inline-grid;
      place-items:center;
      width:38px;
      height:38px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--primary),var(--accent));
      color:#2a1018;
      font-weight:950;
      box-shadow:0 10px 24px rgba(255,79,136,.32);
    }
    .nav-scroll{
      display:flex;
      align-items:center;
      gap:6px;
      overflow-x:auto;
      scrollbar-width:none;
      padding:3px;
    }
    .nav-scroll::-webkit-scrollbar{display:none}
    .nav-link,.nav-age{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:42px;
      white-space:nowrap;
      border-radius:var(--radius-pill);
      color:#f0d7df;
      padding:0 15px;
      font-size:14px;
      font-weight:800;
      border:1px solid transparent;
    }
    .nav-link:hover,.nav-age:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
    .nav-link.active{
      color:#2a1018;
      background:linear-gradient(135deg,var(--accent),#ff6fa1);
      box-shadow:0 10px 24px rgba(255,177,47,.24);
    }
    .nav-age{
      background:rgba(80,227,194,.12);
      border-color:rgba(80,227,194,.3);
      color:#d9fff5;
    }
    .hero{
      position:relative;
      padding:128px 0 62px;
      min-height:640px;
      display:flex;
      align-items:center;
    }
    .hero:after{
      content:"";
      position:absolute;
      inset:auto -10% 0 -10%;
      height:140px;
      background:linear-gradient(180deg,transparent,var(--bg));
      pointer-events:none;
    }
    .hero-grid{position:relative;z-index:1;align-items:center}
    .hero h1{
      margin:18px 0 16px;
      max-width:760px;
      font-size:clamp(38px,6vw,72px);
      line-height:1.08;
      font-weight:950;
      color:#fff;
      letter-spacing:0;
    }
    .hero h1 .mark{color:var(--accent);text-shadow:0 12px 34px rgba(255,177,47,.18)}
    .hero-lead{
      max-width:710px;
      color:#f2cfd8;
      font-size:18px;
      margin:0 0 24px;
    }
    .question-form{
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      width:min(660px,100%);
      padding:10px;
      border-radius:24px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.16);
      box-shadow:var(--shadow);
    }
    .question-form input{width:100%;background:rgba(255,255,255,.12)}
    .question-form input::placeholder{color:#dcc0c8}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:48px;
      border:0;
      border-radius:var(--radius-pill);
      padding:0 20px;
      font-weight:900;
      color:#281017;
      background:#fff;
      box-shadow:none;
    }
    .btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.18)}
    .btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#291018}
    .btn-primary:hover{background:linear-gradient(135deg,var(--primary-deep),#ffa018)}
    .btn-outline{
      color:#fff;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.22);
    }
    .btn-outline:hover{border-color:var(--accent);background:rgba(255,177,47,.12)}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
    .hero-note{
      display:flex;
      gap:10px;
      align-items:flex-start;
      max-width:650px;
      margin-top:22px;
      padding:14px 16px;
      border-radius:18px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.14);
      color:#f5dce3;
      font-size:14px;
    }
    .side-panel{
      padding:18px;
      border-radius:30px;
      background:rgba(255,247,245,.96);
      color:var(--text-dark);
      box-shadow:var(--shadow);
      transform:rotate(1deg);
    }
    .panel-title{font-size:18px;font-weight:950;margin-bottom:12px;color:#32131d}
    .tag-cloud{display:flex;flex-wrap:wrap;gap:9px}
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:34px;
      padding:0 12px;
      border-radius:var(--radius-pill);
      font-size:13px;
      font-weight:800;
      color:#5c2838;
      background:#ffe3ea;
      border:1px solid #ffd0dc;
    }
    .tag.hot{background:#2d1320;color:#ffd6df;border-color:#5a263a}
    .tag.safe{background:#e2fff7;color:#104336;border-color:#b8f4e5}
    .entry-matrix{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:12px;
      margin-top:18px;
    }
    .entry{
      min-height:112px;
      padding:16px;
      border-radius:22px;
      background:linear-gradient(135deg,#3a1425,#201118);
      color:#fff;
      position:relative;
      overflow:hidden;
    }
    .entry:nth-child(2){background:linear-gradient(135deg,#ffb12f,#ff5f8e);color:#2b1018}
    .entry:nth-child(3){grid-column:1 / -1;background:linear-gradient(135deg,#1e6f63,#2a1620)}
    .entry strong{display:block;font-size:17px;margin-bottom:4px}
    .entry span{font-size:13px;color:inherit;opacity:.82}
    .visual-stack{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      margin-top:16px;
    }
    .visual-slice{
      aspect-ratio:4/5.4;
      border-radius:20px;
      background:
        linear-gradient(160deg,rgba(255,255,255,.28),transparent 34%),
        linear-gradient(145deg,#ff4f88,#381422 60%,#ffb12f);
      box-shadow:var(--shadow-soft);
    }
    .visual-slice:nth-child(2){margin-top:20px;background:linear-gradient(145deg,#50e3c2,#321623 58%,#ff6fa1)}
    .visual-slice:nth-child(3){margin-top:6px;background:linear-gradient(145deg,#ffb12f,#4c182b 54%,#ff4f88)}
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:20px;
      margin-bottom:28px;
    }
    .section-head h2{
      margin:10px 0 0;
      font-size:clamp(28px,3.4vw,44px);
      line-height:1.16;
      font-weight:950;
      color:#fff;
    }
    .section-head p{max-width:620px;margin:0;color:var(--muted)}
    .filter-bar{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      padding:14px;
      border-radius:24px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.14);
      margin-bottom:24px;
    }
    .filter-chip{
      min-height:42px;
      border-radius:var(--radius-pill);
      padding:0 15px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);
      color:#ffe8ee;
      font-weight:850;
    }
    .filter-chip:hover,.filter-chip.active{background:var(--primary);border-color:var(--primary);color:#2a1018;transform:translateY(-1px)}
    .content-grid{
      display:grid;
      grid-template-columns:1.25fr .85fr .85fr;
      gap:18px;
      align-items:stretch;
    }
    .vertical-card{
      position:relative;
      overflow:hidden;
      border-radius:26px;
      background:var(--panel);
      color:var(--text-dark);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:var(--shadow-soft);
      transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
    }
    .vertical-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.25);border-color:rgba(255,177,47,.5)}
    .vertical-card.featured{grid-row:span 2}
    .card-visual{
      aspect-ratio:4/5;
      border-radius:24px 24px 0 0;
      background:
        linear-gradient(160deg,rgba(255,255,255,.24),transparent 30%),
        radial-gradient(circle at 70% 20%,rgba(255,177,47,.58),transparent 28%),
        linear-gradient(145deg,#4d172e,#ff4f88 48%,#201118);
      transform:scale(1);
      transition:transform var(--ease);
    }
    .vertical-card:hover .card-visual{transform:scale(1.035)}
    .card-visual.alt{background:linear-gradient(145deg,#193a36,#50e3c2 40%,#321623)}
    .card-visual.warm{background:linear-gradient(145deg,#ffb12f,#622038 50%,#241016)}
    .card-body{padding:18px}
    .card-body h3{font-size:20px;line-height:1.3;margin:10px 0 8px;font-weight:950;color:#2d1019}
    .card-body p{margin:0 0 14px;color:#684a54;font-size:14px}
    .meta-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
    .badge{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      border-radius:var(--radius-pill);
      background:#fde2eb;
      color:#7b223c;
      font-size:12px;
      font-weight:900;
      border:1px solid #f8c7d6;
    }
    .badge.ok{background:#e7fff8;color:#145142;border-color:#bdf2e5}
    .card-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      margin-top:16px;
      padding:0 14px;
      border-radius:var(--radius-pill);
      background:#2b111b;
      color:#fff;
      font-weight:900;
    }
    .card-link:hover{background:var(--primary);color:#2b1018}
    .index-band{
      border-radius:30px;
      padding:26px;
      background:linear-gradient(135deg,rgba(255,247,245,.98),rgba(255,230,238,.96));
      color:var(--text-dark);
      box-shadow:var(--shadow-soft);
    }
    .index-row{
      display:grid;
      grid-template-columns:160px 1fr auto;
      gap:16px;
      align-items:center;
      padding:16px 0;
      border-bottom:1px solid var(--line-dark);
    }
    .index-row:last-child{border-bottom:0}
    .index-row strong{font-size:17px;color:#32131d}
    .index-row span{color:#694a54}
    .status-dot{
      display:inline-flex;
      align-items:center;
      gap:7px;
      color:#176052;
      font-weight:900;
      white-space:nowrap;
    }
    .status-dot:before{
      content:"";
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--accent-2);
      box-shadow:0 0 0 5px rgba(80,227,194,.16);
    }
    .progress-panel{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
      align-items:stretch;
    }
    .progress-card,.age-card{
      border-radius:30px;
      padding:26px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.16);
      box-shadow:var(--shadow);
    }
    .steps{display:grid;gap:16px;margin-top:22px}
    .step{
      display:grid;
      grid-template-columns:42px 1fr;
      gap:14px;
      align-items:start;
    }
    .step-num{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:linear-gradient(135deg,var(--primary),var(--accent));
      color:#2a1018;
      font-weight:950;
    }
    .step strong{display:block;font-size:17px;color:#fff;margin-bottom:2px}
    .step p{margin:0;color:var(--muted);font-size:14px}
    .progress-line{
      height:14px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.12);
      margin-top:18px;
      border:1px solid rgba(255,255,255,.12);
    }
    .progress-line span{
      display:block;
      width:78%;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--primary));
    }
    .age-card form{display:grid;gap:12px;margin-top:18px}
    .check-line{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding:12px;
      border-radius:16px;
      background:rgba(255,255,255,.07);
      color:#f3d7df;
    }
    .check-line input{min-height:auto;width:18px;height:18px;margin-top:5px;accent-color:var(--primary)}
    .compliance-box{
      border-radius:30px;
      padding:28px;
      background:#fff7f5;
      color:var(--text-dark);
      box-shadow:var(--shadow-soft);
    }
    .compliance-list{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      margin-top:18px;
    }
    .compliance-item{
      padding:16px;
      border-radius:18px;
      background:#fff;
      border:1px solid #f0d5dd;
    }
    .compliance-item strong{display:block;color:#30131c;margin-bottom:4px}
    .compliance-item p{margin:0;color:#71515c;font-size:14px}
    .faq-wrap{
      border-radius:30px;
      overflow:hidden;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.14);
    }
    .accordion{background:transparent;margin:0}
    .accordion-item{border-bottom:1px solid rgba(255,255,255,.12)}
    .accordion-item:last-child{border-bottom:0}
    .accordion-title{
      border:0;
      color:#fff;
      background:transparent;
      font-size:17px;
      font-weight:900;
      padding:20px 54px 20px 22px;
    }
    .accordion-title:hover,.accordion-title:focus{background:rgba(255,255,255,.08);color:#fff}
    .accordion-content{
      border:0;
      background:#fff7f5;
      color:#624652;
      padding:18px 22px 22px;
    }
    .cta-band{
      position:relative;
      overflow:hidden;
      border-radius:36px;
      padding:42px;
      background:
        radial-gradient(circle at 82% 20%,rgba(80,227,194,.32),transparent 25%),
        linear-gradient(135deg,#ff4f88,#2b1421 56%,#ffb12f);
      box-shadow:var(--shadow);
    }
    .cta-band h2{margin:0 0 10px;font-size:clamp(28px,4vw,46px);line-height:1.15;font-weight:950}
    .cta-band p{max-width:680px;margin:0 0 22px;color:#ffe1e8}
    .site-footer{
      padding:54px 0 30px;
      background:#140b10;
      border-top:1px solid rgba(255,255,255,.12);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:28px;
      align-items:start;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .footer-links a{
      min-height:38px;
      display:inline-flex;
      align-items:center;
      padding:0 12px;
      border-radius:var(--radius-pill);
      color:#f4d7df;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.1);
      font-size:14px;
      font-weight:800;
    }
    .footer-links a:hover{background:rgba(255,79,136,.2);border-color:rgba(255,79,136,.4)}
    .copyright{
      margin-top:28px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.1);
      color:#b9939f;
      font-size:13px;
    }
    @media (prefers-reduced-motion:reduce){
      *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
    }
    @media (max-width:1024px){
      .pill-nav{border-radius:28px;align-items:flex-start}
      .nav-scroll{max-width:54vw}
      .hero{padding-top:118px}
      .side-panel{margin-top:30px;transform:none}
      .content-grid{grid-template-columns:1fr 1fr}
      .vertical-card.featured{grid-row:auto;grid-column:1 / -1}
      .progress-panel,.footer-grid{grid-template-columns:1fr}
      .footer-links{justify-content:flex-start}
      .compliance-list{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:768px){
      .section{padding:56px 0}
      .pill-nav-wrap{top:10px;padding:0 10px}
      .pill-nav{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px;border-radius:24px}
      .brand{font-size:14px;padding:6px 8px}
      .brand-mark{width:34px;height:34px;font-size:13px}
      .nav-scroll{grid-column:1 / -1;max-width:100%;order:3}
      .nav-link,.nav-age{min-height:40px;padding:0 12px;font-size:13px}
      .hero{min-height:auto;padding:140px 0 46px}
      .hero h1{font-size:42px}
      .question-form{grid-template-columns:1fr}
      .hero-actions .btn{width:100%}
      .entry-matrix{grid-template-columns:1fr}
      .entry:nth-child(3){grid-column:auto}
      .section-head{display:block}
      .section-head p{margin-top:12px}
      .content-grid{grid-template-columns:1fr}
      .index-row{grid-template-columns:1fr;gap:6px}
      .compliance-list{grid-template-columns:1fr}
      .cta-band{padding:30px 22px;border-radius:28px}
    }
    @media (max-width:520px){
      .container{width:min(calc(100% - 24px),var(--container))}
      .hero h1{font-size:34px}
      .hero-lead{font-size:16px}
      .filter-bar{overflow-x:auto;flex-wrap:nowrap}
      .filter-chip{white-space:nowrap}
      .visual-stack{grid-template-columns:repeat(2,1fr)}
      .visual-slice:nth-child(3){display:none}
      .card-body h3{font-size:18px}
      .progress-card,.age-card,.index-band,.compliance-box{padding:20px;border-radius:24px}
    }

/* roulang page: category2 */
:root{
  --ink:#21151d;--ink-soft:#38242f;--plum:#4e193d;--plum-deep:#28121f;
  --coral:#ff6e61;--pink:#f3427c;--yellow:#ffd166;--cream:#fff7f1;
  --muted:#806b75;--line:#ead7dc;--white:#fff;--shadow:0 18px 50px rgba(48,16,36,.14);
  --radius-xl:28px;--radius-lg:20px;--radius-md:15px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
img{display:block;max-width:100%}
button,input,select{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(243,66,124,.38);outline-offset:3px}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.pill-nav-wrap{position:absolute;z-index:10;top:24px;left:0;right:0}
.pill-nav{width:min(1180px,calc(100% - 40px));margin:auto;display:flex;align-items:center;gap:18px;padding:10px 12px 10px 18px;background:rgba(42,17,31,.92);border:1px solid rgba(255,255,255,.15);border-radius:999px;box-shadow:0 16px 36px rgba(38,10,28,.24);color:#fff}
.brand{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;font-weight:800;letter-spacing:0}
.brand-mark{display:inline-grid;place-items:center;width:35px;height:35px;border-radius:12px;background:var(--coral);color:#fff;font-size:12px;font-weight:900}
.nav-scroll{display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:none;flex:1}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-link,.nav-age{padding:9px 13px;border-radius:999px;white-space:nowrap;color:#e9d9df;font-size:14px}
.nav-link:hover,.nav-link.active{background:var(--pink);color:#fff}
.nav-age{border:1px solid rgba(255,255,255,.26);color:#fff}
.nav-age:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.hero{position:relative;overflow:hidden;background:var(--plum-deep);color:#fff;padding:150px 0 92px;min-height:650px}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 28%,rgba(243,66,124,.26),transparent 30%),radial-gradient(circle at 12% 80%,rgba(255,110,97,.18),transparent 26%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:5fr 7fr;gap:54px;align-items:center}
.eyebrow,.tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.04em}
.eyebrow{color:var(--yellow);margin-bottom:18px}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--yellow)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(38px,5vw,68px);line-height:1.12;letter-spacing:0;margin-bottom:22px;max-width:620px}
.hero-copy p{max-width:570px;color:#e4cbd6;font-size:17px;margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:25px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 19px;border-radius:14px;border:1px solid transparent;font-weight:800;cursor:pointer}
.button.primary{background:var(--coral);color:#fff;box-shadow:0 10px 20px rgba(255,110,97,.23)}
.button.primary:hover{background:#ee574f;transform:translateY(-2px);box-shadow:0 14px 26px rgba(255,110,97,.3)}
.button.secondary{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.button.secondary:hover{background:#fff;color:var(--plum);transform:translateY(-2px)}
.hero-note{display:flex;gap:9px;align-items:center;color:#d9bcc8;font-size:13px}
.hero-note strong{color:var(--yellow)}
.cover-stage{position:relative;min-height:420px;transform:rotate(2deg)}
.cover-panel{position:absolute;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.cover-main{inset:18px 22px 0 36px;background:linear-gradient(145deg,#ff8777 0%,#db3971 42%,#50183e 100%);padding:30px;display:flex;align-items:flex-end}
.cover-main:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,transparent 25%,rgba(255,255,255,.22) 26%,transparent 43%),radial-gradient(ellipse at 67% 42%,rgba(255,240,215,.7) 0 8%,transparent 9%),linear-gradient(160deg,transparent 44%,rgba(40,12,31,.5) 45% 64%,transparent 65%)}
.cover-main span{position:relative;z-index:1;font-size:28px;font-weight:900;line-height:1.25;max-width:220px}
.cover-side{right:0;top:0;width:130px;height:170px;background:linear-gradient(160deg,var(--yellow),var(--coral) 55%,var(--pink));padding:17px;color:var(--ink);font-weight:900}
.cover-bottom{left:0;bottom:25px;width:164px;height:178px;background:linear-gradient(155deg,#fbe1dd,#ff6e61 48%,#4e193d);padding:18px;color:#fff;display:flex;align-items:flex-end}
.cover-bottom small{font-weight:800}
.section{padding:88px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}
.section-head h2{font-size:clamp(27px,3vw,42px);line-height:1.2;margin-bottom:8px}
.section-head p{color:var(--muted);margin-bottom:0;max-width:560px}
.filter-band{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:0 9px 30px rgba(62,21,42,.06);margin-bottom:32px}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filter-label{font-weight:800;margin-right:6px}
.filter-chip{border:1px solid var(--line);background:#fff8f5;color:var(--ink-soft);padding:9px 15px;border-radius:999px;cursor:pointer}
.filter-chip:hover,.filter-chip.active{background:var(--plum);border-color:var(--plum);color:#fff}
.entry-layout{display:grid;grid-template-columns:1.2fr 1.8fr;gap:22px}
.feature-entry{min-height:390px;padding:30px;border-radius:var(--radius-xl);color:#fff;background:linear-gradient(145deg,#5b1c45,#d83e73 67%,#ff8571);position:relative;overflow:hidden}
.feature-entry:after{content:"";position:absolute;width:230px;height:230px;border:34px solid rgba(255,255,255,.14);border-radius:50%;right:-58px;top:30px}
.feature-entry .entry-content{position:relative;z-index:1;display:flex;height:100%;flex-direction:column;justify-content:space-between}
.feature-entry h3{font-size:30px;line-height:1.25;max-width:310px}
.feature-entry p{color:#ffe8ec;max-width:330px}
.entry-meta{display:flex;gap:7px;flex-wrap:wrap}
.tag{padding:6px 10px;border-radius:999px;background:#fff0ed;color:var(--plum);font-size:11px}
.tag.dark{background:rgba(38,12,31,.34);color:#fff}
.entry-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.entry-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 8px 22px rgba(62,21,42,.07);transition:transform .2s ease,box-shadow .2s ease}
.entry-card:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(62,21,42,.14)}
.entry-visual{height:135px;padding:17px;display:flex;align-items:flex-end;color:#fff;font-weight:900;position:relative}
.entry-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.2),transparent 45%),linear-gradient(0deg,rgba(27,8,22,.4),transparent)}
.entry-visual span{position:relative;z-index:1}
.visual-a{background:linear-gradient(145deg,#ffb56b,#ef526a,#5b1b48)}
.visual-b{background:linear-gradient(145deg,#ffc95c,#ff806c,#8c285f)}
.visual-c{background:linear-gradient(145deg,#e85e8d,#723369,#281a35)}
.visual-d{background:linear-gradient(145deg,#ff9b8b,#d74270,#37142f)}
.entry-body{padding:17px}
.entry-body h3{font-size:17px;margin-bottom:7px}
.entry-body p{font-size:13px;color:var(--muted);margin-bottom:12px}
.entry-link{font-size:13px;color:var(--plum);font-weight:900}
.index-strip{margin-top:32px;padding:22px 26px;background:var(--ink);border-radius:var(--radius-md);color:#fff;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.index-strip strong{color:var(--yellow)}
.index-tags{display:flex;gap:8px;flex-wrap:wrap}
.index-tags span{border:1px solid rgba(255,255,255,.2);color:#f7dbe5;padding:6px 11px;border-radius:999px;font-size:12px}
.progress-section{background:#f8e8e4}
.progress-box{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.progress-copy h2{font-size:34px;line-height:1.25;margin-bottom:12px}
.progress-copy p{color:var(--muted)}
.progress-track{height:12px;background:#e7cbd2;border-radius:999px;overflow:hidden;margin:18px 0}
.progress-track span{display:block;height:100%;width:66%;background:linear-gradient(90deg,var(--coral),var(--pink));border-radius:inherit}
.step-list{display:grid;gap:12px}
.step{display:flex;align-items:center;gap:12px;padding:13px 15px;background:#fff;border:1px solid var(--line);border-radius:14px}
.step-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--plum);color:#fff;font-size:13px;font-weight:900}
.step.pending .step-dot{background:#ead9de;color:var(--muted)}
.faq-wrap{max-width:850px;margin:auto}
.accordion-item{border:1px solid var(--line)!important;border-radius:14px!important;margin-bottom:10px;overflow:hidden;background:#fff}
.accordion-title{color:var(--ink)!important;font-weight:800;font-size:16px;padding:19px 22px!important;border:0!important;background:#fff}
.accordion-title:hover{background:#fff5f1}
.accordion-content{border:0!important;background:#fffaf8;color:var(--muted);padding:0 22px 19px!important}
.cta{padding:68px 0;background:var(--plum);color:#fff}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
.cta h2{font-size:36px;line-height:1.25;margin-bottom:10px}
.cta p{color:#e3c6d1;margin:0;max-width:650px}
.age-box{margin-top:26px;padding:22px;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(255,255,255,.06)}
.age-box h3{font-size:18px;margin-bottom:8px}
.age-box p{font-size:13px;margin-bottom:15px}
.age-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.age-form select{min-height:46px;border:1px solid rgba(255,255,255,.3);background:#fff;color:var(--ink);border-radius:12px;padding:8px 12px}
.checkline{display:flex;align-items:center;gap:8px;font-size:13px;color:#f4dce4}
.site-footer{background:#21121b;color:#fff;padding:48px 0 24px}
.footer-grid{display:flex;justify-content:space-between;gap:40px}
.site-footer .brand{color:#fff}
.site-footer p{color:#d7b7c2;margin-top:14px;max-width:520px}
.footer-links{display:flex;gap:12px 20px;flex-wrap:wrap;align-content:flex-start;max-width:410px}
.footer-links a{color:#d7b7c2;font-size:13px}
.footer-links a:hover{color:var(--yellow)}
.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;color:#a98b98;font-size:12px}
@media(max-width:900px){
 .hero-grid{gap:28px}.entry-layout{grid-template-columns:1fr}.progress-box{grid-template-columns:1fr}.cta-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:640px){
 .container{width:min(100% - 28px,1180px)}.pill-nav-wrap{top:12px}.pill-nav{width:calc(100% - 24px);padding-left:12px;gap:8px}.pill-nav .brand span:last-child{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-link,.nav-age{font-size:13px;padding:9px 11px}
 .hero{padding:122px 0 58px;min-height:auto}.hero-grid{grid-template-columns:1fr}.hero-copy p{font-size:15px}.hero-actions{display:grid;grid-template-columns:1fr}.button{width:100%}.cover-stage{min-height:330px;transform:none}.cover-main{inset:12px 20px 0 20px}.cover-side{width:105px;height:135px}.cover-bottom{width:130px;height:140px;bottom:14px}
 .section{padding:58px 0}.section-head{display:block;margin-bottom:23px}.section-head h2{font-size:29px}.section-head p{font-size:14px;margin-top:8px}.filter-band{padding:17px}.filter-row{gap:8px}.filter-label{width:100%}.filter-chip{font-size:13px;padding:8px 11px}
 .entry-grid{grid-template-columns:repeat(2,1fr);gap:12px}.entry-visual{height:118px;padding:12px}.entry-body{padding:13px}.entry-body h3{font-size:15px}.entry-body p{font-size:12px}.feature-entry{min-height:330px;padding:23px}.feature-entry h3{font-size:26px}
 .index-strip{padding:18px}.progress-copy h2,.cta h2{font-size:29px}.age-form{align-items:stretch;flex-direction:column}.age-form select,.age-form .button{width:100%}.footer-grid{display:block}.footer-links{margin-top:25px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}