/* roulang page: index */
:root{
      --bg:#fff7ed;
      --surface:#ffffff;
      --ink:#201411;
      --muted:#7a5b50;
      --line:#f1d9c8;
      --primary:#e11d48;
      --primary-dark:#be123c;
      --orange:#f97316;
      --amber:#f59e0b;
      --deep:#24110f;
      --soft:#fff1e6;
      --radius:22px;
      --radius-sm:14px;
      --shadow:0 22px 60px rgba(127,42,24,.14);
      --shadow-sm:0 12px 30px rgba(127,42,24,.10);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at top left,rgba(249,115,22,.18),transparent 34rem),
        linear-gradient(180deg,#fffaf4 0%,#fff7ed 48%,#fff 100%);
      line-height:1.65;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{cursor:pointer}
    .site-container{width:min(1180px,calc(100% - 32px));margin:0 auto}
    .skip-link{position:absolute;left:-999px;top:12px;background:#111;color:#fff;padding:10px 14px;border-radius:12px;z-index:100}
    .skip-link:focus{left:12px}
    .top-shell{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter:blur(18px);
      background:rgba(255,250,244,.88);
      border-bottom:1px solid rgba(241,217,200,.9);
    }
    .nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.02em;white-space:nowrap}
    .brand-icon{
      width:38px;height:38px;border-radius:14px;
      background:linear-gradient(135deg,var(--primary),var(--orange));
      display:grid;place-items:center;color:#fff;box-shadow:0 12px 28px rgba(225,29,72,.28);
    }
    .nav-links{display:flex;align-items:center;gap:8px}
    .nav-links a{
      padding:10px 14px;border-radius:999px;color:#624238;font-weight:700;font-size:14px;
      transition:.2s ease;
    }
    .nav-links a:hover,.nav-links a.active{background:#fff;color:var(--primary);box-shadow:var(--shadow-sm)}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .search-box{
      width:230px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
      border-radius:999px;padding:9px 13px;box-shadow:0 8px 22px rgba(90,42,22,.06);
    }
    .search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px}
    .search-box input::placeholder{color:#aa8c80}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      min-height:44px;padding:0 18px;border-radius:999px;border:1px solid transparent;
      font-weight:900;transition:.22s ease;white-space:nowrap;
    }
    .btn-primary{background:linear-gradient(135deg,var(--primary),var(--orange));color:#fff;box-shadow:0 14px 30px rgba(225,29,72,.25)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(225,29,72,.32)}
    .btn-secondary{background:#fff;color:var(--primary);border-color:#ffd1bd}
    .btn-secondary:hover{border-color:var(--primary);transform:translateY(-1px)}
    .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
    .btn-ghost:hover{background:rgba(255,255,255,.18)}
    .mobile-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:14px}
    section{padding:72px 0}
    .section-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#fff0e5;color:var(--primary);font-weight:900;font-size:13px}
    .section-title{margin:14px 0 12px;font-size:clamp(28px,4vw,44px);line-height:1.15;font-weight:950;letter-spacing:-.04em}
    .section-desc{max-width:760px;color:var(--muted);font-size:17px}
    .hero{padding:42px 0 76px}
    .hero-stage{
      position:relative;overflow:hidden;border-radius:34px;background:
      linear-gradient(112deg,#2a1210 0%,#3b1613 48%,#7f1d1d 100%);
      color:#fff;box-shadow:0 32px 90px rgba(82,22,12,.26);
    }
    .hero-stage:before{
      content:"";position:absolute;inset:-30% -10% auto auto;width:560px;height:560px;
      background:radial-gradient(circle,rgba(249,115,22,.45),transparent 62%);transform:rotate(16deg);
    }
    .hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:28px;padding:46px}
    .hero-left{display:flex;flex-direction:column;justify-content:center}
    .hero-badge{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
    .hero-badge span,.tag{
      display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
      background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);font-size:13px;font-weight:800;
    }
    h1{font-size:clamp(34px,5.4vw,66px);line-height:1.06;margin:0 0 18px;font-weight:950;letter-spacing:-.055em}
    .hero-intro{font-size:18px;color:#ffe9dc;max-width:680px;margin:0 0 26px}
    .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .stat{padding:14px;border-radius:18px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15)}
    .stat strong{display:block;font-size:26px;line-height:1;color:#fff}
    .stat span{display:block;margin-top:6px;color:#ffd7c3;font-size:13px}
    .data-panel{
      background:#fff;color:var(--ink);border-radius:28px;padding:20px;box-shadow:0 24px 70px rgba(10,10,10,.22);
      align-self:stretch;
    }
    .panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
    .panel-head h2{font-size:20px;margin:0;font-weight:950}
    .hot-list{display:grid;gap:10px}
    .hot-row{
      display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
      padding:13px;border:1px solid #f3d9c9;border-radius:18px;background:linear-gradient(180deg,#fff,#fff8f2);
      transition:.2s ease;
    }
    .hot-row:hover{transform:translateX(3px);border-color:#fb923c}
    .rank{width:30px;height:30px;border-radius:10px;background:#fff0e5;color:var(--primary);display:grid;place-items:center;font-weight:950}
    .hot-row b{display:block}
    .hot-row small{color:var(--muted)}
    .score{font-weight:950;color:var(--primary)}
    .deal-band{background:linear-gradient(90deg,#fff,#fff3e8)}
    .step-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:stretch}
    .ladder{
      display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
    }
    .deal-card,.compare-card,.content-card,.faq-item,.review-card,.entry-card{
      background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
      transition:.22s ease;
    }
    .deal-card:hover,.compare-card:hover,.content-card:hover,.review-card:hover,.entry-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#fb923c}
    .deal-card{padding:22px;position:relative;overflow:hidden}
    .deal-card:after{content:"";position:absolute;right:-36px;top:-36px;width:100px;height:100px;border-radius:50%;background:rgba(249,115,22,.12)}
    .price-like{font-size:36px;font-weight:950;color:var(--primary);line-height:1;margin:14px 0 8px}
    .price-like small{font-size:13px;color:var(--muted);font-weight:800}
    .deal-card h3,.compare-card h3,.entry-card h3{font-size:21px;margin:0 0 8px;font-weight:950}
    .deal-card p,.compare-card p,.entry-card p,.content-card p{color:var(--muted);margin:0}
    .side-note{padding:26px;border-radius:var(--radius);background:#2a1210;color:#fff;box-shadow:var(--shadow)}
    .side-note p{color:#ffe2d2}
    .compare-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:16px;margin-top:26px}
    .compare-card{padding:24px}
    .compare-card.featured{border:2px solid var(--primary);position:relative;transform:translateY(-8px)}
    .compare-card.featured:before{
      content:"推荐入口";position:absolute;right:18px;top:-14px;background:linear-gradient(135deg,var(--primary),var(--orange));
      color:#fff;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;
    }
    .compare-list{display:grid;gap:11px;margin:18px 0}
    .compare-list li{list-style:none;display:flex;gap:9px;color:#5b3d34}
    .compare-list li:before{content:"✓";color:var(--primary);font-weight:950}
    .guard-strip{
      padding:22px;border-radius:28px;background:#21100e;color:#fff;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
      box-shadow:0 24px 70px rgba(42,18,16,.22);
    }
    .guard-item{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
    .guard-icon{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--orange));display:grid;place-items:center;flex:0 0 auto}
    .guard-item strong{display:block}
    .guard-item span{display:block;color:#ffdcca;font-size:13px;margin-top:3px}
    .news-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:22px}
    .news-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
    .news-row{display:grid;grid-template-columns:110px 1fr 98px;gap:16px;align-items:center;padding:18px 20px;border-bottom:1px solid #f4dfd1}
    .news-row:last-child{border-bottom:0}
    .news-row a{font-weight:900}
    .news-row a:hover{color:var(--primary)}
    .news-row span{color:var(--muted);font-size:14px}
    .status-dot{display:inline-flex;align-items:center;gap:7px;color:#16a34a;font-weight:900;font-size:13px}
    .status-dot:before{content:"";width:8px;height:8px;background:#22c55e;border-radius:999px}
    .ranking{background:#fff7ed;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
    .ranking ol{margin:0;padding:0;display:grid;gap:10px;counter-reset:item}
    .ranking li{list-style:none;display:flex;justify-content:space-between;gap:10px;padding:12px;border-radius:16px;background:#fff}
    .ranking li:before{counter-increment:item;content:counter(item);font-weight:950;color:var(--primary)}
    .ranking b{flex:1}
    .entry-matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
    .entry-card{padding:20px}
    .entry-card .icon{width:44px;height:44px;border-radius:16px;background:#fff0e6;color:var(--primary);display:grid;place-items:center;margin-bottom:14px;font-size:22px}
    .reviews{display:flex;gap:16px;overflow-x:auto;padding:10px 2px 18px;scroll-snap-type:x mandatory}
    .review-card{min-width:330px;padding:22px;scroll-snap-align:start}
    .review-card p{color:#5f443b;margin:0 0 18px}
    .reviewer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}
    .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px}
    .faq-list{display:grid;gap:12px}
    .faq-item{padding:20px}
    .faq-item summary{cursor:pointer;font-weight:950;list-style:none}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item p{margin:12px 0 0;color:var(--muted)}
    .cta-section{padding-bottom:96px}
    .cta-box{
      position:relative;overflow:hidden;border-radius:34px;background:linear-gradient(135deg,var(--primary),var(--orange));
      color:#fff;padding:42px;box-shadow:0 28px 80px rgba(225,29,72,.28);
      display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
    }
    .cta-box:after{content:"";position:absolute;right:-80px;bottom:-100px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.16)}
    .cta-box h2{position:relative;margin:0 0 10px;font-size:clamp(28px,4vw,46px);font-weight:950;letter-spacing:-.04em}
    .cta-box p{position:relative;color:#fff3ea;margin:0;max-width:680px}
    .sticky-cta{
      position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;
      width:min(760px,calc(100% - 28px));background:rgba(35,16,14,.92);color:#fff;border:1px solid rgba(255,255,255,.12);
      backdrop-filter:blur(14px);border-radius:999px;padding:10px 12px 10px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;
      box-shadow:0 18px 50px rgba(0,0,0,.25);
    }
    .sticky-cta span{font-weight:800;font-size:14px;color:#ffe0cf}
    footer{background:#1f100e;color:#fff;padding:48px 0 88px}
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:28px}
    .footer-title{font-weight:950;font-size:20px;margin-bottom:12px}
    .footer-links{display:grid;gap:9px}
    .footer-links a{color:#ffd9c5}
    .footer-links a:hover{color:#fff}
    .copyright{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:#d9b8a6;font-size:13px}
    @media (max-width:1024px){
      .nav-actions .search-box{display:none}
      .hero-grid,.step-grid,.news-grid,.faq-grid,.cta-box{grid-template-columns:1fr}
      .compare-grid{grid-template-columns:1fr}
      .compare-card.featured{transform:none}
      .guard-strip,.entry-matrix{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:768px){
      .nav-wrap{height:auto;min-height:68px;flex-wrap:wrap;padding:12px 0}
      .mobile-toggle{display:inline-grid;place-items:center}
      .nav-links{order:3;width:100%;overflow-x:auto;padding-bottom:4px}
      .nav-actions{margin-left:auto}
      .nav-actions .btn-secondary{display:none}
      .hero-grid{padding:26px}
      .hero-stats,.ladder{grid-template-columns:1fr}
      .news-row{grid-template-columns:1fr;gap:6px}
      .guard-strip,.entry-matrix,.footer-grid{grid-template-columns:1fr}
      section{padding:52px 0}
      .sticky-cta{border-radius:22px;align-items:stretch;flex-direction:column}
      .sticky-cta .btn{width:100%}
    }
    @media (max-width:520px){
      .site-container{width:min(100% - 22px,1180px)}
      .brand span{font-size:14px}
      .hero-stage,.cta-box{border-radius:24px}
      .hero-grid{padding:22px}
      .hero-cta .btn{width:100%}
      .review-card{min-width:86vw}
      .data-panel{padding:15px}
      .hot-row{grid-template-columns:auto 1fr}
      .score{grid-column:2}
    }

/* roulang page: category1 */
:root {
      --bg: #fff8f2;
      --bg-2: #fff2e8;
      --card: #ffffff;
      --card-soft: #fffaf7;
      --line: rgba(194, 122, 86, 0.18);
      --text: #241a17;
      --muted: #6f5c53;
      --brand: #ff6a1f;
      --brand-dark: #e94f15;
      --brand-soft: #ffe4d4;
      --accent: #ff9b42;
      --shadow: 0 18px 42px rgba(215, 94, 36, 0.12);
      --shadow-strong: 0 22px 54px rgba(215, 94, 36, 0.18);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(255, 106, 31, 0.10), transparent 30%),
        radial-gradient(circle at top right, rgba(255, 155, 66, 0.12), transparent 22%),
        linear-gradient(180deg, #fffaf6 0%, #fff7f1 42%, #fffdfb 100%);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    ::selection { background: rgba(255, 106, 31, 0.18); color: #5a1f07; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff9b42, #ff6a1f); border-radius: 999px; border: 2px solid #fff6ef; }
    ::-webkit-scrollbar-track { background: #fff4eb; }

    .site-container {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }
    .section-shell {
      margin-top: 28px;
      padding: 0;
    }
    .panel {
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,251,248,0.96));
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
    }
    .panel-soft {
      background: linear-gradient(180deg, #fffdfb, #fff7f2);
      border: 1px solid rgba(244, 188, 156, 0.45);
      border-radius: var(--radius-xl);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 1.02rem;
      font-weight: 800;
      letter-spacing: 0.01em;
      color: var(--text);
      white-space: nowrap;
    }
    .brand-icon {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(135deg, #ff9b42, #ff5f1a);
      box-shadow: 0 10px 22px rgba(255, 106, 31, 0.24);
      flex: 0 0 auto;
    }
    .nav-links {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px;
      border-radius: 999px;
      background: rgba(255, 244, 235, 0.9);
      border: 1px solid rgba(229, 171, 136, 0.38);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    }
    .nav-links a {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 16px;
      border-radius: 999px;
      color: #5e4a41;
      font-weight: 700;
      transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible {
      color: #3b2317;
      background: rgba(255,255,255,0.8);
      box-shadow: 0 8px 18px rgba(217, 95, 38, 0.12);
      transform: translateY(-1px);
      outline: none;
    }
    .nav-links a.active {
      color: #fff;
      background: linear-gradient(135deg, #ff8b41, #ff5d17);
      box-shadow: 0 12px 22px rgba(255, 106, 31, 0.22);
    }
    .search-box {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 280px;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid rgba(213, 145, 109, 0.34);
      background: rgba(255,255,255,0.92);
      box-shadow: 0 10px 26px rgba(196, 102, 54, 0.08);
      transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
    }
    .search-box:focus-within {
      border-color: rgba(255, 106, 31, 0.52);
      box-shadow: 0 14px 34px rgba(255, 106, 31, 0.15);
      transform: translateY(-1px);
    }
    .search-box svg { width: 18px; height: 18px; color: #b66a43; flex: 0 0 auto; }
    .search-box input {
      width: 100%;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--text);
    }
    .search-box input::placeholder { color: #9c7e71; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      padding: 0 18px;
      border-radius: 999px;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn:hover,
    .btn:focus-visible {
      transform: translateY(-1px);
      outline: none;
    }
    .btn-primary {
      color: #fff;
      background: linear-gradient(135deg, #ff8b41, #ff5d17);
      box-shadow: 0 14px 28px rgba(255, 106, 31, 0.22);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible { box-shadow: 0 18px 34px rgba(255, 106, 31, 0.28); }
    .btn-ghost {
      color: #5c463d;
      background: rgba(255,255,255,0.9);
      border-color: rgba(212, 151, 120, 0.34);
    }
    .btn-ghost:hover,
    .btn-ghost:focus-visible {
      background: #fff;
      border-color: rgba(255, 106, 31, 0.34);
      color: #2d1f1a;
      box-shadow: 0 10px 22px rgba(223, 123, 73, 0.10);
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid rgba(245, 176, 136, 0.42);
      background: rgba(255, 244, 236, 0.88);
      color: #9b4b1c;
      font-size: 0.86rem;
      font-weight: 800;
      line-height: 1;
    }
    .badge-hot {
      color: #fff;
      background: linear-gradient(135deg, #ff8d47, #ff5d17);
      border-color: transparent;
      box-shadow: 0 10px 18px rgba(255, 106, 31, 0.18);
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(214, 154, 121, 0.34);
      background: rgba(255, 255, 255, 0.8);
      color: #624d43;
      font-size: 0.92rem;
      font-weight: 700;
      transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .chip:hover, .chip:focus-visible {
      transform: translateY(-1px);
      background: #fff;
      box-shadow: 0 10px 22px rgba(227, 114, 52, 0.09);
      outline: none;
    }
    .chip.active {
      color: #fff;
      background: linear-gradient(135deg, #ff8d47, #ff5d17);
      border-color: transparent;
      box-shadow: 0 12px 24px rgba(255, 106, 31, 0.18);
    }
    .metric {
      padding: 16px 18px;
      border-radius: 18px;
      background: linear-gradient(180deg, #fff, #fff7f2);
      border: 1px solid rgba(221, 159, 128, 0.22);
      box-shadow: 0 12px 24px rgba(204, 110, 66, 0.08);
    }
    .metric strong {
      display: block;
      font-size: 1.25rem;
      line-height: 1.15;
      color: #cc4a12;
      font-weight: 900;
    }
    .metric span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 0.88rem;
      font-weight: 600;
    }
    .card-item {
      height: 100%;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(215, 154, 119, 0.24);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,249,245,0.97));
      box-shadow: 0 12px 26px rgba(193, 93, 44, 0.08);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      overflow: hidden;
    }
    .card-item:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-strong);
      border-color: rgba(255, 106, 31, 0.34);
    }
    .card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .card-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      min-height: 42px;
      padding: 0 12px;
      border-radius: 14px;
      color: #fff;
      font-weight: 900;
      background: linear-gradient(135deg, #ff9b42, #ff5d17);
      box-shadow: 0 12px 20px rgba(255, 106, 31, 0.18);
    }
    .card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }
    .card-meta .mini {
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 800;
      background: rgba(255, 242, 233, 0.92);
      color: #a64914;
      border: 1px solid rgba(240, 182, 147, 0.34);
    }
    .action-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #b94111;
      font-weight: 800;
      transition: color .2s ease, transform .2s ease;
    }
    .action-link:hover { color: #8f2d0a; transform: translateX(2px); }
    .section-head h2 {
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: -0.02em;
      color: #261a16;
    }
    .section-head p {
      margin-top: 10px;
      color: var(--muted);
      max-width: 760px;
    }
    .hero {
      padding: 34px 0 10px;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 22px;
      align-items: stretch;
    }
    .hero-card {
      padding: 30px;
      border-radius: 30px;
      border: 1px solid rgba(233, 168, 131, 0.28);
      background:
        radial-gradient(circle at top right, rgba(255, 150, 82, 0.12), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255, 248, 243, 0.95));
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    .hero-card::after {
      content: "";
      position: absolute;
      inset: auto -80px -100px auto;
      width: 240px;
      height: 240px;
      background: radial-gradient(circle, rgba(255,106,31,0.14), transparent 66%);
      pointer-events: none;
    }
    .hero-title {
      font-size: clamp(2rem, 4.8vw, 4rem);
      line-height: 1.08;
      letter-spacing: -0.04em;
      font-weight: 900;
      margin: 16px 0 14px;
    }
    .hero-copy {
      font-size: 1.05rem;
      color: #5f4b41;
      max-width: 700px;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
    }
    .trust-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }
    .trust-row .badge {
      background: rgba(255,255,255,0.92);
    }
    .hero-side {
      padding: 24px;
      border-radius: 30px;
      border: 1px solid rgba(227, 161, 123, 0.24);
      background:
        linear-gradient(180deg, #fff8f3, #fff);
      box-shadow: var(--shadow);
      display: grid;
      gap: 16px;
    }
    .hero-side .side-card {
      padding: 18px;
      border-radius: 22px;
      background: linear-gradient(180deg, #fff, #fff8f4);
      border: 1px solid rgba(222, 166, 132, 0.23);
    }
    .side-card h3 {
      font-size: 1.06rem;
      font-weight: 900;
      margin-bottom: 8px;
    }
    .entry-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .entry-grid a {
      padding: 14px 14px 13px;
      border-radius: 18px;
      background: linear-gradient(180deg, #fff, #fff6f0);
      border: 1px solid rgba(230, 171, 138, 0.25);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .entry-grid a:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 106, 31, 0.34);
      box-shadow: 0 12px 24px rgba(228, 113, 48, 0.1);
    }
    .entry-grid strong {
      display: block;
      color: #b94011;
      font-weight: 900;
    }
    .entry-grid span {
      display: block;
      color: var(--muted);
      font-size: 0.86rem;
      margin-top: 4px;
    }
    .filter-bar {
      margin-top: 18px;
      padding: 18px;
      border-radius: 24px;
      border: 1px solid rgba(224, 165, 132, 0.24);
      background: rgba(255,255,255,0.92);
      box-shadow: 0 12px 24px rgba(190, 99, 50, 0.08);
    }
    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
    }
    .filter-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .toolbox {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-top: 18px;
    }
    .tool-card {
      padding: 18px;
      border-radius: 22px;
      background: linear-gradient(180deg, #fff, #fff7f1);
      border: 1px solid rgba(227, 167, 134, 0.25);
      box-shadow: 0 10px 22px rgba(193, 94, 44, 0.08);
    }
    .tool-card .k {
      color: #9d4c1c;
      font-size: 0.84rem;
      font-weight: 800;
      letter-spacing: 0.02em;
    }
    .tool-card .v {
      margin-top: 6px;
      font-size: 1.16rem;
      font-weight: 900;
      color: #261a16;
    }
    .tool-card .s {
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.92rem;
    }
    .reviews {
      margin-top: 18px;
      padding: 22px;
      border-radius: 28px;
      border: 1px solid rgba(225, 159, 124, 0.22);
      background: linear-gradient(180deg, #fff8f3, #fff);
      box-shadow: var(--shadow);
    }
    .reviews-track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(260px, 1fr);
      gap: 14px;
      overflow-x: auto;
      padding-bottom: 6px;
      scroll-snap-type: x mandatory;
    }
    .review-card {
      scroll-snap-align: start;
      padding: 18px;
      border-radius: 22px;
      background: #fff;
      border: 1px solid rgba(223, 160, 126, 0.24);
      box-shadow: 0 10px 20px rgba(188, 92, 42, 0.06);
      min-height: 184px;
    }
    .review-card p {
      color: #46372f;
      font-weight: 600;
      margin: 12px 0 14px;
    }
    .review-card .who {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #8e6350;
      font-size: 0.88rem;
      font-weight: 700;
    }
    .dots {
      display: flex;
      gap: 8px;
      margin-top: 16px;
      justify-content: center;
    }
    .dots span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 106, 31, 0.22);
    }
    .dots span.active { background: linear-gradient(135deg, #ff8d47, #ff5d17); width: 28px; border-radius: 999px; }
    .guard-strip {
      margin-top: 18px;
      padding: 20px;
      border-radius: 26px;
      border: 1px solid rgba(224, 159, 124, 0.22);
      background: linear-gradient(90deg, #fffaf7, #fff5ed);
      box-shadow: 0 12px 28px rgba(200, 101, 50, 0.07);
    }
    .guard-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    .guard-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255,255,255,0.86);
      border: 1px solid rgba(231, 177, 147, 0.22);
    }
    .guard-icon {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #ff9b42, #ff5d17);
      color: #fff;
      font-weight: 900;
      flex: 0 0 auto;
    }
    .guard-item strong { display: block; font-weight: 900; color: #2d201b; }
    .guard-item span { display: block; color: var(--muted); font-size: 0.88rem; }
    .faq-list {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .faq-item {
      overflow: hidden;
      border-radius: 20px;
      border: 1px solid rgba(220, 162, 132, 0.22);
      background: rgba(255,255,255,0.94);
      box-shadow: 0 10px 22px rgba(192, 94, 43, 0.07);
    }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 18px 20px;
      font-weight: 900;
      color: #2d201b;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      font-size: 1.4rem;
      line-height: 1;
      color: #c84f19;
      transition: transform .2s ease;
    }
    .faq-item[open] summary::after {
      content: "–";
    }
    .faq-item .faq-body {
      padding: 0 20px 18px;
      color: var(--muted);
    }
    .cta-box {
      margin-top: 18px;
      padding: 28px;
      border-radius: 30px;
      border: 1px solid rgba(221, 153, 115, 0.25);
      background:
        radial-gradient(circle at top right, rgba(255, 147, 66, 0.16), transparent 28%),
        linear-gradient(135deg, #fff4ec, #fffaf7);
      box-shadow: var(--shadow);
    }
    .cta-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 18px;
      align-items: center;
    }
    .cta-box h2 {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      line-height: 1.18;
      font-weight: 900;
      color: #231814;
    }
    .cta-box p {
      margin-top: 12px;
      color: #5d4a40;
      max-width: 700px;
    }
    .cta-stack {
      display: grid;
      gap: 12px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(233, 175, 145, 0.24);
    }
    .cta-stack .line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #513c32;
      font-weight: 700;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr .7fr .7fr;
      gap: 24px;
    }
    footer {
      margin-top: 28px;
      padding: 28px 0 24px;
      background: linear-gradient(180deg, #2b1812, #1d120e);
      color: #fff3ec;
      border-top: 1px solid rgba(255, 197, 163, 0.16);
    }
    .footer-title {
      font-weight: 900;
      margin-bottom: 12px;
      color: #ffd0b9;
    }
    .footer-links {
      display: grid;
      gap: 10px;
    }
    .footer-links a {
      color: #ffeadf;
      transition: color .2s ease, transform .2s ease;
    }
    .footer-links a:hover { color: #fff; transform: translateX(2px); }
    .copyright {
      margin-top: 22px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 197, 163, 0.14);
      color: rgba(255, 227, 214, 0.82);
      font-size: 0.92rem;
      text-align: center;
    }
    .mobile-menu-btn {
      display: none;
    }
    .nav-mobile {
      display: none;
    }
    .subtle-line {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(226, 157, 121, 0.5), transparent);
    }

    @media (max-width: 1024px) {
      .hero-grid,
      .cta-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .toolbox,
      .guard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .search-box { min-width: 220px; }
    }
    @media (max-width: 768px) {
      .site-container { width: min(100% - 24px, 1180px); }
      .desktop-only { display: none !important; }
      .mobile-menu-btn { display: inline-flex; }
      .nav-mobile {
        display: none;
        margin-top: 14px;
      }
      .nav-mobile.open { display: block; }
      .nav-links {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .nav-links::-webkit-scrollbar { display: none; }
      .search-box { min-width: 0; width: 100%; }
      .hero-card,
      .hero-side,
      .reviews,
      .guard-strip,
      .cta-box,
      .panel-soft {
        border-radius: 24px;
      }
      .hero-card { padding: 22px; }
      .hero-title { margin-top: 12px; }
    }
    @media (max-width: 520px) {
      .toolbox,
      .guard-grid,
      .entry-grid {
        grid-template-columns: 1fr;
      }
      .filter-row,
      .cta-stack .line {
        flex-direction: column;
        align-items: flex-start;
      }
      .hero-actions .btn,
      .cta-actions .btn {
        width: 100%;
      }
      .hero-copy,
      .cta-box p {
        font-size: 0.98rem;
      }
      .brand { font-size: 0.96rem; }
      .brand-icon { width: 36px; height: 36px; border-radius: 12px; }
    }