/* roulang page: index */
:root{
      --paper:#F7F1E8;
      --paper-soft:#FFFDF8;
      --ink:#171717;
      --muted:#6F665D;
      --plum:#6D3B5C;
      --plum-dark:#543047;
      --coral:#E56B5D;
      --sage:#7A8F72;
      --line:#E4D9CB;
      --footer:#1D1A1B;
      --shadow:0 14px 34px rgba(42,32,24,.10);
      --shadow-soft:0 10px 24px rgba(42,32,24,.07);
      --radius:24px;
    }
    *{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:
        radial-gradient(circle at 12% 10%, rgba(229,107,93,.10), transparent 26%),
        radial-gradient(circle at 85% 18%, rgba(109,59,92,.10), transparent 28%),
        linear-gradient(0deg, rgba(255,255,255,.35), rgba(255,255,255,.35)),
        var(--paper);
      line-height:1.75;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.28;
      background-image:
        linear-gradient(rgba(109,59,92,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109,59,92,.04) 1px, transparent 1px);
      background-size:32px 32px;
      mask-image:linear-gradient(to bottom, #000, transparent 75%);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    .site-container{width:min(1180px, calc(100% - 32px));margin:0 auto}
    .section{padding:72px 0}
    .section-tight{padding:46px 0}
    .paper-card{
      background:rgba(255,253,248,.88);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .paper-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(109,59,92,.45)}
    .badge{
      display:inline-flex;align-items:center;gap:6px;
      min-height:30px;padding:5px 12px;border-radius:999px;
      border:1px solid rgba(228,217,203,.9);
      background:rgba(255,253,248,.78);
      color:var(--muted);font-size:13px;font-weight:700;
    }
    .badge-sage{background:rgba(122,143,114,.12);color:#516249;border-color:rgba(122,143,114,.25)}
    .badge-coral{background:rgba(229,107,93,.12);color:#9b3f36;border-color:rgba(229,107,93,.24)}
    .badge-plum{background:rgba(109,59,92,.12);color:var(--plum);border-color:rgba(109,59,92,.23)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      min-height:46px;padding:12px 20px;border-radius:999px;
      font-weight:800;border:1px solid transparent;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      white-space:nowrap;
    }
    .btn-primary{background:var(--plum);color:#fff;box-shadow:0 12px 24px rgba(109,59,92,.22)}
    .btn-primary:hover,.btn-primary:focus{background:var(--plum-dark);transform:translateY(-2px);box-shadow:0 16px 30px rgba(109,59,92,.28)}
    .btn-secondary{background:rgba(255,253,248,.74);color:var(--ink);border-color:var(--line)}
    .btn-secondary:hover,.btn-secondary:focus{border-color:var(--coral);background:rgba(229,107,93,.08);transform:translateY(-2px)}
    .btn:focus,.search-box:focus-within,.faq-btn:focus-visible,input:focus,select:focus{outline:3px solid rgba(109,59,92,.18);outline-offset:3px}
    .site-header{
      position:sticky;top:0;z-index:50;
      background:rgba(247,241,232,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(228,217,203,.75);
      transition:box-shadow .2s ease,border-color .2s ease;
    }
    .site-header.scrolled{box-shadow:0 10px 26px rgba(42,32,24,.08);border-color:rgba(109,59,92,.18)}
    .nav-wrap{min-height:78px;display:grid;grid-template-columns:auto minmax(280px,1fr) auto;align-items:center;gap:18px}
    .logo{
      display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:-.02em;color:var(--ink);
      min-width:max-content;
    }
    .logo-mark{
      width:38px;height:38px;border-radius:14px;
      background:linear-gradient(135deg,var(--plum),#8b597b 55%,var(--coral));
      box-shadow:0 10px 18px rgba(109,59,92,.22);
      display:grid;place-items:center;color:#fff;font-weight:950;
    }
    .search-box{
      height:50px;border-radius:999px;border:1px solid var(--line);
      background:rgba(255,253,248,.86);
      display:flex;align-items:center;gap:10px;padding:0 14px 0 18px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
      transition:border-color .2s ease, box-shadow .2s ease;
    }
    .search-box:focus-within{border-color:var(--plum);box-shadow:0 0 0 5px rgba(229,107,93,.09)}
    .search-box input{width:100%;border:0;background:transparent;outline:0;color:var(--ink);font-size:15px}
    .search-box input::placeholder{color:#8b8178}
    .nav-links{display:flex;align-items:center;gap:8px;white-space:nowrap}
    .nav-link{
      min-height:42px;padding:9px 13px;border-radius:999px;color:var(--muted);
      font-weight:800;font-size:14px;display:inline-flex;align-items:center;
      border:1px solid transparent;transition:.2s ease;
    }
    .nav-link:hover{color:var(--plum);background:rgba(109,59,92,.08)}
    .nav-link.active{color:var(--plum);background:rgba(109,59,92,.12);border-color:rgba(109,59,92,.16)}
    .age-pill{min-height:42px;padding:8px 12px;border-radius:999px;background:rgba(122,143,114,.14);color:#4f6249;border:1px solid rgba(122,143,114,.25);font-weight:900;font-size:13px}
    .hero-band{
      padding:34px 0 28px;
      border-bottom:1px solid rgba(228,217,203,.85);
      background:linear-gradient(180deg,rgba(255,253,248,.58),rgba(247,241,232,.3));
    }
    .hero-title{
      font-size:clamp(32px,5vw,56px);
      line-height:1.16;
      letter-spacing:-.045em;
      font-weight:950;
      max-width:940px;
    }
    .highlight{
      position:relative;
      z-index:1;
    }
    .highlight:after{
      content:"";position:absolute;left:-2px;right:-2px;bottom:.07em;height:.28em;
      background:rgba(229,107,93,.34);border-radius:999px;z-index:-1;transform:rotate(-1deg);
    }
    .note-banner{
      margin-top:26px;border:1px solid var(--line);border-radius:26px;
      background:rgba(255,253,248,.78);
      box-shadow:var(--shadow-soft);
      display:grid;grid-template-columns:1.1fr .9fr;gap:22px;padding:22px;
    }
    .matrix{
      display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
    }
    .matrix-item{
      border:1px dashed rgba(109,59,92,.28);
      background:rgba(247,241,232,.68);
      border-radius:18px;padding:12px;min-height:82px;
    }
    .matrix-item strong{display:block;font-size:14px;margin-bottom:4px}
    .matrix-item span{font-size:12px;color:var(--muted);line-height:1.45}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:24px}
    .section-head h2{font-size:clamp(25px,3vw,36px);line-height:1.22;font-weight:950;letter-spacing:-.03em}
    .section-head p{max-width:620px;color:var(--muted);font-size:16px}
    .vertical-notes{display:grid;grid-template-columns:.82fr 1.18fr;gap:18px}
    .tall-note{
      min-height:470px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;
      background:
        linear-gradient(135deg,rgba(109,59,92,.08),transparent 42%),
        rgba(255,253,248,.9);
    }
    .mini-stack{display:grid;gap:16px}
    .solution-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
    .solution-large{padding:28px;min-height:288px}
    .solution-small-grid{display:grid;gap:18px}
    .step-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
    .step-card{padding:18px;border-radius:20px;border:1px solid var(--line);background:rgba(255,253,248,.78)}
    .step-num{width:34px;height:34px;border-radius:12px;background:rgba(229,107,93,.14);color:#a13e34;display:grid;place-items:center;font-weight:950;margin-bottom:10px}
    .ranking-list{display:grid;gap:10px}
    .rank-row{
      display:grid;grid-template-columns:46px 1fr auto;gap:14px;align-items:center;
      padding:15px;border-radius:18px;border:1px solid var(--line);background:rgba(255,253,248,.82);
      transition:.2s ease;
    }
    .rank-row:hover{border-color:rgba(229,107,93,.5);transform:translateX(3px)}
    .rank-no{width:34px;height:34px;border-radius:12px;background:rgba(109,59,92,.12);color:var(--plum);display:grid;place-items:center;font-weight:950}
    .reviews{display:grid;grid-template-columns:.7fr 1.3fr;gap:18px}
    .score-card{padding:26px;background:var(--footer);color:#fff;border-radius:var(--radius)}
    .review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .info-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
    .info-list{display:grid;gap:10px}
    .info-link{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,253,248,.84);transition:.2s ease}
    .info-link:hover{border-color:var(--plum);background:#fff}
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .stat-card{padding:20px;position:relative;overflow:hidden}
    .stat-card:after{content:"";position:absolute;left:20px;right:20px;bottom:16px;height:7px;background:rgba(229,107,93,.25);border-radius:999px;transform:rotate(-1deg)}
    .stat-num{font-size:38px;line-height:1;font-weight:950;color:var(--coral)}
    .privacy-zone{
      background:var(--footer);color:#fff;border-radius:32px;padding:28px;
      display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;
      box-shadow:0 18px 40px rgba(29,26,27,.18);
    }
    .privacy-zone p,.privacy-zone li{color:rgba(255,255,255,.76)}
    .privacy-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:18px}
    .faq-list{display:grid;gap:12px}
    .faq-item{border:1px solid var(--line);border-radius:20px;background:rgba(255,253,248,.86);overflow:hidden}
    .faq-btn{width:100%;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;font-weight:900;text-align:left}
    .faq-answer{display:none;padding:0 18px 18px 22px;color:var(--muted);border-left:4px solid var(--coral);margin:0 18px 18px}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-btn span:last-child{transform:rotate(45deg)}
    .faq-btn span:last-child{transition:.2s ease;font-size:24px;color:var(--plum)}
    .cta-card{
      padding:28px;border-radius:32px;
      background:linear-gradient(135deg,rgba(109,59,92,.12),rgba(229,107,93,.10)),rgba(255,253,248,.9);
      border:1px solid rgba(109,59,92,.18);
      display:flex;align-items:center;justify-content:space-between;gap:20px;
    }
    .site-footer{background:var(--footer);color:#f8efe5;padding:46px 0 28px;margin-top:40px}
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:24px}
    .footer-link{display:block;color:rgba(248,239,229,.72);padding:5px 0;transition:.2s ease}
    .footer-link:hover{color:#fff;transform:translateX(2px)}
    .modal-overlay{
      position:fixed;inset:0;background:rgba(23,23,23,.52);backdrop-filter:blur(8px);
      display:none;align-items:center;justify-content:center;z-index:80;padding:20px;
    }
    .modal-overlay.show{display:flex}
    .modal-card{
      width:min(620px,100%);border-radius:26px;background:var(--paper-soft);
      border:1px solid var(--line);box-shadow:0 22px 60px rgba(0,0,0,.24);
      padding:24px;animation:modalIn .22s ease;
    }
    @keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
    .form-grid{display:grid;gap:14px;margin-top:16px}
    .form-grid label{font-weight:850;font-size:14px}
    .form-grid input,.form-grid select{
      width:100%;min-height:46px;border-radius:16px;border:1px solid var(--line);background:#fffaf3;
      padding:10px 12px;outline:0;color:var(--ink);
    }
    .checkbox-row{display:flex;align-items:flex-start;gap:10px;color:var(--muted);font-size:14px}
    .checkbox-row input{width:18px;height:18px;margin-top:4px;accent-color:var(--plum);min-height:auto}
    @media (max-width:1024px){
      .nav-wrap{grid-template-columns:1fr;gap:10px;padding:12px 0}
      .nav-links{overflow-x:auto;padding-bottom:4px}
      .note-banner,.vertical-notes,.solution-grid,.reviews,.info-layout,.privacy-zone{grid-template-columns:1fr}
      .step-strip,.stats-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:640px){
      .site-container{width:min(100% - 22px,1180px)}
      .section{padding:52px 0}
      .hero-band{padding:24px 0}
      .note-banner{padding:16px;border-radius:22px}
      .matrix,.review-grid,.step-strip,.stats-grid{grid-template-columns:1fr}
      .section-head{display:block}
      .section-head p{margin-top:8px}
      .cta-card{display:block}
      .cta-card .btn{margin-top:16px;width:100%}
      .rank-row{grid-template-columns:40px 1fr;align-items:start}
      .rank-row .badge{grid-column:2}
      .footer-grid{grid-template-columns:1fr}
      .modal-overlay{align-items:flex-end;padding:0}
      .modal-card{border-radius:26px 26px 0 0;padding:20px;max-height:92vh;overflow:auto}
      .btn{width:100%}
      .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
    }

/* roulang page: category1 */
:root{
      --paper:#F7F1E8;
      --paper-soft:#FFFDF8;
      --ink:#171717;
      --muted:#6F665D;
      --plum:#6D3B5C;
      --plum-dark:#543047;
      --coral:#E56B5D;
      --sage:#7A8F72;
      --line:#E4D9CB;
      --dark:#1D1A1B;
      --radius-lg:26px;
      --radius-md:18px;
      --shadow-card:0 12px 30px rgba(42,32,24,.08);
      --shadow-hover:0 18px 42px rgba(42,32,24,.13);
      --container:1220px;
    }
    *{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:
        radial-gradient(circle at 18% 10%, rgba(229,107,93,.10), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(109,59,92,.10), transparent 30%),
        linear-gradient(90deg, rgba(228,217,203,.36) 1px, transparent 1px),
        linear-gradient(180deg, rgba(228,217,203,.32) 1px, transparent 1px),
        var(--paper);
      background-size:auto, auto, 34px 34px, 34px 34px, auto;
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    input,select{outline:none}
    .site-container{
      width:min(var(--container), calc(100% - 40px));
      margin:0 auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(247,241,232,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(228,217,203,.78);
      transition:box-shadow .25s ease,border-color .25s ease,background .25s ease;
    }
    .site-header.is-scrolled{
      box-shadow:0 12px 28px rgba(42,32,24,.10);
      border-color:rgba(109,59,92,.18);
      background:rgba(255,253,248,.92);
    }
    .nav-wrap{
      min-height:78px;
      display:grid;
      grid-template-columns:auto minmax(280px,1fr) auto;
      align-items:center;
      gap:18px;
    }
    .logo{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      letter-spacing:-.02em;
      color:var(--ink);
      white-space:nowrap;
    }
    .logo-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:var(--dark);
      color:#F8EFE5;
      font-size:14px;
      box-shadow:inset 0 -3px 0 rgba(255,255,255,.08), 0 8px 18px rgba(29,26,27,.18);
    }
    .search-box{
      height:50px;
      border:1px solid var(--line);
      background:rgba(255,253,248,.92);
      border-radius:999px;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 10px 0 18px;
      box-shadow:0 8px 24px rgba(42,32,24,.06);
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .search-box:focus-within{
      border-color:var(--plum);
      box-shadow:0 0 0 4px rgba(229,107,93,.14),0 12px 28px rgba(109,59,92,.10);
      transform:translateY(-1px);
    }
    .search-box span{color:var(--plum);font-size:20px;font-weight:900}
    .search-box input{
      flex:1;
      min-width:80px;
      border:0;
      background:transparent;
      color:var(--ink);
      height:44px;
    }
    .search-box input::placeholder{color:rgba(111,102,93,.72)}
    .search-box button{
      width:34px;
      height:34px;
      border:0;
      border-radius:50%;
      background:rgba(109,59,92,.08);
      color:var(--plum);
      transition:background .2s ease, color .2s ease, transform .2s ease;
    }
    .search-box button:hover,.search-box button:focus{
      background:var(--plum);
      color:#fff;
      transform:translateY(-1px);
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:8px;
      white-space:nowrap;
    }
    .nav-link{
      min-height:42px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0 14px;
      border-radius:999px;
      color:var(--muted);
      font-weight:800;
      transition:background .2s ease,color .2s ease,transform .2s ease;
    }
    .nav-link:hover,.nav-link:focus{
      background:rgba(229,107,93,.12);
      color:var(--ink);
      transform:translateY(-1px);
    }
    .nav-link.active{
      background:var(--plum);
      color:#fff;
      box-shadow:0 10px 20px rgba(109,59,92,.18);
    }
    .age-pill{
      min-height:42px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(122,143,114,.35);
      background:rgba(122,143,114,.13);
      color:#43523f;
      font-weight:900;
      transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .age-pill:hover,.age-pill:focus{
      transform:translateY(-1px);
      box-shadow:0 10px 22px rgba(122,143,114,.14);
      background:rgba(122,143,114,.20);
    }
    .section{
      padding:72px 0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:1px solid rgba(109,59,92,.18);
      background:rgba(255,253,248,.75);
      color:var(--plum);
      border-radius:999px;
      padding:7px 12px;
      font-size:13px;
      font-weight:900;
      box-shadow:0 8px 18px rgba(42,32,24,.05);
    }
    .highlight{
      position:relative;
      display:inline;
      z-index:1;
    }
    .highlight:after{
      content:"";
      position:absolute;
      left:-.08em;
      right:-.08em;
      bottom:.08em;
      height:.30em;
      background:rgba(229,107,93,.28);
      border-radius:999px;
      z-index:-1;
    }
    .btn{
      min-height:48px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:0 20px;
      border-radius:999px;
      font-weight:900;
      border:1px solid transparent;
      transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
    }
    .btn-primary{
      background:var(--plum);
      color:#fff;
      box-shadow:0 12px 24px rgba(109,59,92,.22);
    }
    .btn-primary:hover,.btn-primary:focus{
      background:var(--plum-dark);
      transform:translateY(-2px);
      box-shadow:0 16px 32px rgba(109,59,92,.28);
    }
    .btn-secondary{
      background:rgba(255,253,248,.85);
      border-color:var(--line);
      color:var(--ink);
    }
    .btn-secondary:hover,.btn-secondary:focus{
      border-color:var(--coral);
      background:rgba(229,107,93,.08);
      transform:translateY(-2px);
    }
    .note-card{
      background:rgba(255,253,248,.88);
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-card);
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
      position:relative;
      overflow:hidden;
    }
    .note-card:before{
      content:"";
      position:absolute;
      top:0;
      left:24px;
      right:24px;
      height:4px;
      border-radius:0 0 999px 999px;
      background:linear-gradient(90deg,var(--coral),rgba(109,59,92,.58),rgba(122,143,114,.62));
      opacity:.62;
    }
    .note-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(109,59,92,.35);
    }
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(109,59,92,.08);
      color:var(--plum);
      font-size:12px;
      font-weight:900;
      border:1px solid rgba(109,59,92,.10);
    }
    .tag.sage{background:rgba(122,143,114,.13);color:#465742;border-color:rgba(122,143,114,.16)}
    .tag.coral{background:rgba(229,107,93,.12);color:#9e3e34;border-color:rgba(229,107,93,.16)}
    .category-hero{
      padding:62px 0 42px;
    }
    .hero-panel{
      display:grid;
      grid-template-columns:minmax(0,1.02fr) minmax(340px,.72fr);
      gap:28px;
      align-items:stretch;
    }
    .headline{
      font-size:clamp(32px,4.4vw,54px);
      line-height:1.16;
      letter-spacing:-.04em;
      font-weight:950;
      margin:18px 0 18px;
    }
    .lead{
      color:var(--muted);
      font-size:18px;
      max-width:760px;
    }
    .slot-board{
      background:linear-gradient(180deg,rgba(255,253,248,.94),rgba(247,241,232,.92));
      border:1px solid var(--line);
      border-radius:30px;
      padding:22px;
      box-shadow:0 20px 48px rgba(42,32,24,.10);
      position:relative;
    }
    .slot-board:after{
      content:"适合环境再继续";
      position:absolute;
      right:18px;
      top:-13px;
      transform:rotate(2deg);
      background:#F8E2A6;
      color:#6d4b10;
      border-radius:12px;
      padding:5px 10px;
      font-size:12px;
      font-weight:900;
      box-shadow:0 8px 16px rgba(42,32,24,.08);
    }
    .mini-search{
      display:flex;
      align-items:center;
      gap:10px;
      border:1px dashed rgba(109,59,92,.32);
      background:#fff;
      border-radius:18px;
      padding:12px 14px;
      color:var(--muted);
      font-weight:800;
    }
    .slot-row{
      display:grid;
      grid-template-columns:1fr auto;
      gap:12px;
      align-items:center;
      border:1px solid rgba(228,217,203,.86);
      background:rgba(255,253,248,.72);
      border-radius:18px;
      padding:14px;
      margin-top:12px;
    }
    .slot-time{
      font-weight:950;
      color:var(--ink);
    }
    .slot-state{
      border-radius:999px;
      padding:6px 10px;
      font-size:12px;
      font-weight:950;
      background:rgba(122,143,114,.14);
      color:#41513c;
    }
    .filter-shell{
      position:sticky;
      top:78px;
      z-index:30;
      padding:12px 0;
      background:linear-gradient(180deg,rgba(247,241,232,.96),rgba(247,241,232,.84));
      backdrop-filter:blur(14px);
      border-block:1px solid rgba(228,217,203,.62);
    }
    .filter-bar{
      display:flex;
      align-items:center;
      gap:10px;
      overflow-x:auto;
      padding:4px 0;
      scrollbar-width:none;
    }
    .filter-bar::-webkit-scrollbar{display:none}
    .filter-pill{
      flex:0 0 auto;
      min-height:42px;
      padding:0 15px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,253,248,.82);
      color:var(--muted);
      font-weight:900;
      transition:all .2s ease;
    }
    .filter-pill:hover,.filter-pill.active{
      color:#fff;
      background:var(--plum);
      border-color:var(--plum);
      box-shadow:0 10px 20px rgba(109,59,92,.16);
      transform:translateY(-1px);
    }
    .filter-select{
      flex:0 0 auto;
      min-height:42px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,253,248,.9);
      padding:0 36px 0 14px;
      color:var(--ink);
      font-weight:800;
    }
    .entry-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }
    .entry-card{
      padding:24px;
      min-height:252px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .entry-card.featured{
      grid-column:span 2;
      min-height:300px;
      background:
        radial-gradient(circle at 90% 12%, rgba(229,107,93,.16), transparent 28%),
        linear-gradient(135deg,rgba(255,253,248,.96),rgba(247,241,232,.86));
    }
    .entry-num{
      width:38px;
      height:38px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      background:var(--dark);
      color:#F8EFE5;
      font-weight:950;
      box-shadow:0 8px 16px rgba(29,26,27,.16);
    }
    .entry-title{
      font-size:22px;
      line-height:1.25;
      font-weight:950;
      margin-top:16px;
    }
    .entry-desc{
      color:var(--muted);
      margin-top:10px;
    }
    .tip-band{
      border-radius:30px;
      background:var(--dark);
      color:#F8EFE5;
      padding:28px;
      position:relative;
      overflow:hidden;
      box-shadow:0 22px 52px rgba(29,26,27,.18);
    }
    .tip-band:before{
      content:"";
      position:absolute;
      width:240px;
      height:240px;
      border-radius:999px;
      background:rgba(229,107,93,.16);
      right:-80px;
      top:-90px;
    }
    .tip-grid{
      display:grid;
      grid-template-columns:1.1fr repeat(3,1fr);
      gap:16px;
      position:relative;
      z-index:1;
    }
    .tip-item{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      border-radius:20px;
      padding:18px;
    }
    .faq-wrap{
      display:grid;
      grid-template-columns:.42fr .58fr;
      gap:24px;
      align-items:start;
    }
    .faq-item{
      background:rgba(255,253,248,.88);
      border:1px solid var(--line);
      border-radius:20px;
      margin-bottom:12px;
      overflow:hidden;
      box-shadow:0 8px 22px rgba(42,32,24,.05);
    }
    .faq-question{
      width:100%;
      min-height:58px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:16px 18px;
      border:0;
      background:transparent;
      color:var(--ink);
      text-align:left;
      font-weight:950;
    }
    .faq-question span:last-child{
      width:28px;
      height:28px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(109,59,92,.08);
      color:var(--plum);
      transition:transform .2s ease,background .2s ease,color .2s ease;
      flex:0 0 auto;
    }
    .faq-answer{
      display:none;
      color:var(--muted);
      padding:0 18px 18px 20px;
      border-left:4px solid var(--coral);
      margin-left:18px;
    }
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-question span:last-child{
      transform:rotate(45deg);
      background:var(--plum);
      color:#fff;
    }
    .cta-card{
      border-radius:34px;
      border:1px solid rgba(109,59,92,.18);
      background:
        linear-gradient(135deg,rgba(109,59,92,.10),rgba(229,107,93,.10)),
        rgba(255,253,248,.90);
      padding:34px;
      box-shadow:var(--shadow-card);
      display:grid;
      grid-template-columns:1fr auto;
      gap:22px;
      align-items:center;
    }
    .site-footer{
      background:linear-gradient(135deg,#1D1A1B,#2a2026 58%,#3b2432);
      color:#F8EFE5;
      padding:54px 0 26px;
      margin-top:40px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.4fr .7fr .9fr;
      gap:32px;
      align-items:start;
    }
    .site-footer .logo{color:#F8EFE5}
    .site-footer .logo-mark{background:rgba(248,239,229,.14);border:1px solid rgba(248,239,229,.18)}
    .footer-link{
      display:block;
      color:rgba(248,239,229,.72);
      padding:6px 0;
      transition:color .2s ease,transform .2s ease;
    }
    .footer-link:hover,.footer-link:focus{
      color:#fff;
      transform:translateX(3px);
    }
    .modal-backdrop{
      position:fixed;
      inset:0;
      z-index:80;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(29,26,27,.58);
      backdrop-filter:blur(8px);
      padding:20px;
    }
    .modal-backdrop.show{display:flex}
    .modal-card{
      width:min(620px,100%);
      background:var(--paper-soft);
      border:1px solid var(--line);
      border-radius:26px;
      box-shadow:0 30px 80px rgba(0,0,0,.28);
      padding:24px;
      animation:modalIn .2s ease both;
    }
    @keyframes modalIn{
      from{opacity:0;transform:translateY(12px) scale(.98)}
      to{opacity:1;transform:translateY(0) scale(1)}
    }
    .form-field{
      display:block;
      margin-top:14px;
    }
    .form-field span{
      display:block;
      font-size:13px;
      color:var(--muted);
      font-weight:900;
      margin-bottom:6px;
    }
    .form-input{
      width:100%;
      min-height:46px;
      border:1px solid var(--line);
      border-radius:16px;
      background:#fff;
      padding:0 14px;
      color:var(--ink);
      transition:border-color .2s ease,box-shadow .2s ease;
    }
    .form-input:focus{
      border-color:var(--plum);
      box-shadow:0 0 0 4px rgba(229,107,93,.12);
    }
    @media (max-width:1024px){
      .nav-wrap{
        grid-template-columns:1fr;
        gap:10px;
        padding:14px 0 10px;
      }
      .nav-links{
        overflow-x:auto;
        padding-bottom:4px;
      }
      .hero-panel,.faq-wrap,.cta-card{
        grid-template-columns:1fr;
      }
      .entry-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .tip-grid{
        grid-template-columns:1fr 1fr;
      }
      .filter-shell{top:152px}
    }
    @media (max-width:640px){
      .site-container{width:min(100% - 28px,var(--container))}
      .section{padding:48px 0}
      .category-hero{padding:42px 0 30px}
      .headline{font-size:34px}
      .lead{font-size:16px}
      .search-box{height:48px}
      .nav-link,.age-pill{min-height:40px}
      .entry-grid,.tip-grid,.footer-grid{
        grid-template-columns:1fr;
      }
      .entry-card.featured{grid-column:auto}
      .slot-board,.tip-band,.cta-card{border-radius:24px;padding:22px}
      .filter-shell{top:154px}
      .modal-backdrop{
        align-items:flex-end;
        padding:0;
      }
      .modal-card{
        border-radius:26px 26px 0 0;
        max-height:88vh;
        overflow:auto;
      }
    }