/* roulang page: index */
:root{
      --brand:#ff6a3d;
      --brand-2:#ffb347;
      --brand-3:#7c4dff;
      --ink:#241b18;
      --muted:#736962;
      --soft:#fff8f2;
      --soft-2:#fff1e5;
      --card:#ffffff;
      --line:rgba(70,42,28,.12);
      --shadow:0 18px 50px rgba(95,54,31,.12);
      --shadow-sm:0 10px 28px rgba(95,54,31,.09);
      --radius-xl:30px;
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:14px;
      --container:1180px;
      --nav-h:72px;
      --focus:0 0 0 4px rgba(255,106,61,.18);
    }
    *{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",Arial,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 8%, rgba(255,179,71,.28), transparent 26%),
        radial-gradient(circle at 92% 12%, rgba(124,77,255,.14), transparent 28%),
        linear-gradient(180deg,#fffaf5 0%,#fff7ef 42%,#fffdf9 100%);
      line-height:1.72;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:.22s ease}
    a:hover{color:var(--brand)}
    img{max-width:100%;display:block}
    button,input,select{font:inherit}
    button{border:0}
    ::selection{background:rgba(255,106,61,.22)}
    .site-container{width:min(var(--container),calc(100% - 32px));margin-inline:auto}
    .skip-link{
      position:absolute;left:-999px;top:12px;z-index:9999;background:#fff;color:var(--brand);
      padding:10px 14px;border-radius:12px;box-shadow:var(--shadow-sm)
    }
    .skip-link:focus{left:18px;outline:none;box-shadow:var(--focus)}
    .dock-header{
      position:sticky;top:18px;z-index:1000;padding:0 12px;margin-top:14px;
      pointer-events:none;
    }
    .dock-nav{
      pointer-events:auto;width:min(1080px,100%);min-height:var(--nav-h);margin:auto;
      display:flex;align-items:center;gap:14px;justify-content:space-between;
      padding:12px 14px;border:1px solid rgba(255,255,255,.82);
      background:rgba(255,255,255,.76);backdrop-filter:blur(18px);
      border-radius:999px;box-shadow:0 18px 45px rgba(122,72,42,.13);
    }
    .brand{
      display:flex;align-items:center;gap:10px;min-width:220px;font-weight:900;letter-spacing:-.02em;
      white-space:nowrap;
    }
    .brand-mark{
      width:42px;height:42px;border-radius:16px;
      display:grid;place-items:center;color:#fff;
      background:linear-gradient(135deg,var(--brand),var(--brand-2) 55%,var(--brand-3));
      box-shadow:0 12px 24px rgba(255,106,61,.22);
      flex:0 0 auto;
    }
    .nav-links{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
    .nav-link{
      display:flex;align-items:center;gap:7px;padding:10px 14px;border-radius:999px;
      color:#4f433c;font-weight:700;font-size:14px;
    }
    .nav-link:hover{background:rgba(255,106,61,.10);color:var(--brand);transform:translateY(-1px)}
    .nav-link.active{background:linear-gradient(135deg,rgba(255,106,61,.16),rgba(255,179,71,.18));color:#d84f25}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .search-mini{
      display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:999px;
      border:1px solid var(--line);background:rgba(255,248,242,.82);min-width:190px;
    }
    .search-mini input{
      width:125px;border:0;background:transparent;outline:0;color:var(--ink);font-size:14px;
    }
    .search-mini:focus-within{box-shadow:var(--focus);border-color:rgba(255,106,61,.38);background:#fff}
    .btn-brand,.btn-ghost,.btn-soft{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      min-height:46px;padding:12px 18px;border-radius:999px;font-weight:800;
      transition:.22s ease;white-space:nowrap;cursor:pointer;
    }
    .btn-brand{
      color:#fff;background:linear-gradient(135deg,var(--brand),#ff8d3c 55%,var(--brand-2));
      box-shadow:0 14px 28px rgba(255,106,61,.22);
    }
    .btn-brand:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 36px rgba(255,106,61,.28)}
    .btn-brand:active,.btn-ghost:active,.btn-soft:active{transform:translateY(0) scale(.98)}
    .btn-brand:focus-visible,.btn-ghost:focus-visible,.btn-soft:focus-visible{outline:none;box-shadow:var(--focus)}
    .btn-brand[disabled],.btn-soft[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
    .btn-brand.is-loading{position:relative;color:rgba(255,255,255,.72)}
    .btn-brand.is-loading:after{
      content:"";width:14px;height:14px;border:2px solid rgba(255,255,255,.55);
      border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;
    }
    @keyframes spin{to{transform:rotate(360deg)}}
    .btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.68);color:#4a3e37}
    .btn-ghost:hover{background:#fff;color:var(--brand);transform:translateY(-2px)}
    .btn-soft{background:rgba(255,106,61,.10);color:#d95026}
    .btn-soft:hover{background:rgba(255,106,61,.16);color:#bd431d;transform:translateY(-2px)}
    main{padding-top:26px}
    section{position:relative}
    .section-pad{padding:58px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:24px}
    .section-kicker{
      display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
      background:rgba(255,106,61,.10);color:#d44d25;font-weight:800;font-size:13px;
    }
    .section-title{font-size:clamp(26px,3vw,40px);line-height:1.2;margin:10px 0 8px;font-weight:950;letter-spacing:-.03em}
    .section-desc{max-width:680px;margin:0;color:var(--muted);font-size:16px}
    .hero{
      padding:42px 0 26px;
    }
    .creator-cover{
      overflow:hidden;border-radius:var(--radius-xl);box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.85);
      background:
        linear-gradient(135deg,rgba(255,106,61,.92),rgba(255,179,71,.82) 48%,rgba(124,77,255,.72)),
        radial-gradient(circle at 15% 20%,rgba(255,255,255,.36),transparent 28%);
      color:#fff;
    }
    .cover-pattern{
      position:relative;min-height:385px;padding:34px;
      display:grid;grid-template-columns:1.12fr .88fr;gap:24px;align-items:end;
    }
    .cover-pattern:before{
      content:"";position:absolute;inset:0;
      background:
        radial-gradient(circle at 82% 22%,rgba(255,255,255,.26),transparent 24%),
        linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px),
        linear-gradient(0deg,rgba(255,255,255,.08) 1px,transparent 1px);
      background-size:auto,46px 46px,46px 46px;
      opacity:.75;pointer-events:none;
    }
    .creator-info,.hero-board{position:relative;z-index:1}
    .avatar-row{display:flex;align-items:center;gap:16px;margin-bottom:20px}
    .avatar{
      width:78px;height:78px;border-radius:28px;display:grid;place-items:center;
      background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.48);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
      font-size:34px;
    }
    .nickname{font-size:18px;font-weight:900;margin:0}
    .follow-note{font-size:13px;margin:3px 0 0;color:rgba(255,255,255,.82)}
    h1{
      font-size:clamp(34px,5vw,66px);line-height:1.04;margin:0 0 18px;
      font-weight:1000;letter-spacing:-.05em;max-width:780px;
    }
    .hero-intro{font-size:17px;color:rgba(255,255,255,.90);max-width:720px;margin:0 0 24px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
    .hero .btn-ghost{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42);color:#fff}
    .hero .btn-ghost:hover{background:#fff;color:var(--brand)}
    .hero-board{
      align-self:stretch;border-radius:28px;background:rgba(255,255,255,.20);
      border:1px solid rgba(255,255,255,.38);backdrop-filter:blur(14px);
      padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;
    }
    .badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .data-badge{
      min-height:78px;border-radius:20px;padding:14px;background:rgba(255,255,255,.22);
      border:1px solid rgba(255,255,255,.32);
    }
    .data-badge b{display:block;font-size:24px;line-height:1;font-weight:950}
    .data-badge span{display:block;margin-top:8px;color:rgba(255,255,255,.84);font-size:13px}
    .visual-anchor{
      border-radius:22px;background:rgba(255,255,255,.92);color:var(--ink);padding:16px;
      display:flex;align-items:center;gap:14px;box-shadow:0 18px 40px rgba(54,30,18,.12);
    }
    .anchor-icon{
      width:48px;height:48px;border-radius:18px;display:grid;place-items:center;color:#fff;
      background:linear-gradient(135deg,var(--brand-3),var(--brand));
      flex:0 0 auto;
    }
    .visual-anchor strong{display:block;line-height:1.25}
    .visual-anchor small{color:var(--muted)}
    .coupon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .coupon-card{
      position:relative;overflow:hidden;min-height:190px;padding:22px;border-radius:var(--radius-lg);
      background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }
    .coupon-card:before,.coupon-card:after{
      content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:#fff7ef;top:92px;
      border:1px solid var(--line);
    }
    .coupon-card:before{left:-12px}.coupon-card:after{right:-12px}
    .coupon-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .coupon-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}
    .tag,.status-badge{
      display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-weight:800;font-size:12px;
      padding:6px 10px;line-height:1;
    }
    .tag{background:rgba(255,106,61,.10);color:#d95026}
    .status-badge{background:rgba(124,77,255,.10);color:#6840d8}
    .coupon-title{font-size:20px;font-weight:950;line-height:1.25;margin:0 0 10px}
    .coupon-text{margin:0;color:var(--muted);font-size:14px}
    .rule-wrap{
      display:grid;grid-template-columns:.88fr 1.12fr;gap:18px;align-items:stretch;
    }
    .rule-panel,.glass-card,.content-card,.news-panel,.compare-card,.faq-item,.cta-box{
      border:1px solid var(--line);background:rgba(255,255,255,.78);
      border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
    }
    .rule-panel{padding:26px}
    .rule-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
    .rule-list li{
      display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:rgba(255,248,242,.78);
      border:1px solid rgba(255,106,61,.08);
    }
    .rule-list i{color:var(--brand);margin-top:4px}
    .rule-list strong{display:block;margin-bottom:2px}
    .rule-list span{color:var(--muted);font-size:14px}
    .directory{
      display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
    }
    .dir-card{
      padding:20px;border-radius:22px;background:#fff;border:1px solid var(--line);
      transition:.22s ease;min-height:142px;
    }
    .dir-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:rgba(255,106,61,.28)}
    .dir-card i{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:var(--soft-2);color:var(--brand);margin-bottom:14px}
    .dir-card h3{font-size:18px;font-weight:950;margin:0 0 8px}
    .dir-card p{font-size:14px;color:var(--muted);margin:0}
    .featured-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
    .content-card{overflow:hidden;transition:.24s ease}
    .content-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .cover-art{
      min-height:190px;padding:18px;display:flex;align-items:flex-start;justify-content:space-between;
      background:
        linear-gradient(135deg,rgba(255,106,61,.88),rgba(255,179,71,.78)),
        radial-gradient(circle at 80% 20%,rgba(255,255,255,.35),transparent 25%);
      color:#fff;
    }
    .cover-art.purple{background:linear-gradient(135deg,rgba(124,77,255,.82),rgba(255,106,61,.76))}
    .cover-art.green{background:linear-gradient(135deg,rgba(48,179,139,.82),rgba(255,179,71,.76))}
    .cover-art .status-badge{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28)}
    .card-body-custom{padding:20px}
    .entry-title{font-size:22px;line-height:1.28;font-weight:950;margin:0 0 10px}
    .entry-text{color:var(--muted);margin:0 0 14px;font-size:15px}
    .tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}
    .entry-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}
    .meta{color:var(--muted);font-size:13px}
    .mini-list{display:grid;gap:18px}
    .mini-list .content-card{display:grid;grid-template-columns:150px 1fr}
    .mini-list .cover-art{min-height:100%;border-radius:0}
    .compare-card{padding:24px;overflow:hidden}
    .compare-table{width:100%;border-collapse:separate;border-spacing:0 10px;margin-top:18px}
    .compare-table th{color:#8a7568;font-size:13px;font-weight:900;padding:0 14px 6px}
    .compare-table td{
      padding:16px 14px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      vertical-align:middle;
    }
    .compare-table td:first-child{border-left:1px solid var(--line);border-radius:18px 0 0 18px;font-weight:900}
    .compare-table td:last-child{border-right:1px solid var(--line);border-radius:0 18px 18px 0}
    .check{color:#22a06b}.warn{color:#e08a24}
    .live-card{
      display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;border-radius:var(--radius-xl);
      background:linear-gradient(135deg,#2f1e18,#6f3f2c 55%,#a84f31);
      color:#fff;padding:24px;overflow:hidden;box-shadow:var(--shadow);
    }
    .live-cover{
      min-height:260px;border-radius:24px;background:
        radial-gradient(circle at 32% 30%,rgba(255,255,255,.32),transparent 26%),
        linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.06));
      border:1px solid rgba(255,255,255,.20);display:grid;place-items:center;text-align:center;padding:22px;
    }
    .live-cover i{font-size:42px;margin-bottom:10px;color:#ffd48a}
    .countdown{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
    .timebox{
      min-width:74px;padding:12px;border-radius:16px;background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.18);text-align:center;
    }
    .timebox b{display:block;font-size:22px;line-height:1}
    .timebox span{font-size:12px;color:rgba(255,255,255,.72)}
    .point-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
    .point-list li{display:flex;gap:10px;color:rgba(255,255,255,.88)}
    .point-list i{color:#ffd48a;margin-top:5px}
    .news-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
    .news-panel{padding:24px}
    .news-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
    .news-list li{border-bottom:1px solid var(--line)}
    .news-list li:last-child{border-bottom:0}
    .news-list a{
      display:grid;grid-template-columns:1fr auto;gap:14px;padding:16px 0;align-items:center;
    }
    .news-list a:hover{transform:translateX(4px)}
    .news-title{font-weight:900;line-height:1.45}
    .news-date{font-size:13px;color:var(--muted);white-space:nowrap}
    .recommend-rail{
      display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:16px;overflow-x:auto;
      padding:4px 2px 16px;scroll-snap-type:x mandatory;
    }
    .recommend-rail::-webkit-scrollbar{height:8px}
    .recommend-rail::-webkit-scrollbar-thumb{background:rgba(255,106,61,.22);border-radius:999px}
    .rec-card{
      scroll-snap-align:start;border-radius:24px;background:#fff;border:1px solid var(--line);
      padding:20px;min-height:172px;box-shadow:var(--shadow-sm);transition:.22s ease;
    }
    .rec-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .rec-card h3{font-size:19px;font-weight:950;margin:12px 0 8px}
    .rec-card p{color:var(--muted);font-size:14px;margin:0}
    .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .faq-item{padding:22px}
    .faq-item h3{font-size:18px;font-weight:950;margin:0 0 8px;display:flex;gap:10px;align-items:flex-start}
    .faq-item h3 i{color:var(--brand);margin-top:4px}
    .faq-item p{margin:0;color:var(--muted);font-size:15px}
    .cta-box{
      padding:34px;border-radius:var(--radius-xl);
      background:
        linear-gradient(135deg,rgba(255,106,61,.10),rgba(255,179,71,.14)),
        rgba(255,255,255,.86);
      display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center;
    }
    .share-form{display:flex;gap:10px;justify-content:flex-end;align-items:center}
    .share-form input{
      width:min(320px,100%);height:50px;border-radius:999px;border:1px solid var(--line);
      padding:0 16px;background:#fff;outline:0;
    }
    .share-form input:focus{border-color:rgba(255,106,61,.40);box-shadow:var(--focus)}
    .site-footer{
      margin-top:34px;padding:34px 0 28px;background:#211713;color:rgba(255,255,255,.78);
    }
    .footer-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
    .footer-brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:950;margin-bottom:10px}
    .footer-brand .brand-mark{width:40px;height:40px;border-radius:15px}
    .footer-note{max-width:560px;margin:0;color:rgba(255,255,255,.62);font-size:14px}
    .footer-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
    .footer-links a{padding:8px 10px;border-radius:999px;color:rgba(255,255,255,.74)}
    .footer-links a:hover{background:rgba(255,255,255,.08);color:#fff}
    .copyright{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.10);font-size:13px;color:rgba(255,255,255,.56)}
    @media (max-width:1024px){
      .dock-nav{border-radius:28px;align-items:flex-start;flex-wrap:wrap}
      .brand{min-width:auto}
      .nav-links{order:3;width:100%;justify-content:center;overflow-x:auto;padding-top:4px}
      .cover-pattern,.rule-wrap,.featured-grid,.live-card,.news-layout,.cta-box{grid-template-columns:1fr}
      .coupon-grid{grid-template-columns:repeat(2,1fr)}
      .directory{grid-template-columns:repeat(2,1fr)}
      .share-form{justify-content:flex-start}
    }
    @media (max-width:768px){
      .dock-header{top:8px;margin-top:8px}
      .dock-nav{padding:10px;border-radius:24px;gap:10px}
      .brand span{max-width:178px;overflow:hidden;text-overflow:ellipsis}
      .search-mini{display:none}
      .nav-actions{margin-left:auto}
      .nav-link{padding:9px 11px;font-size:13px}
      .section-pad{padding:42px 0}
      .section-head{display:block}
      .cover-pattern{padding:24px;min-height:auto}
      h1{font-size:36px}
      .hero-intro{font-size:16px}
      .badge-grid{grid-template-columns:1fr 1fr}
      .mini-list .content-card{grid-template-columns:1fr}
      .mini-list .cover-art{min-height:150px}
      .faq-grid{grid-template-columns:1fr}
      .compare-table{font-size:14px}
      .compare-table th:nth-child(3),.compare-table td:nth-child(3){display:none}
    }
    @media (max-width:520px){
      .site-container{width:min(100% - 22px,var(--container))}
      .brand-mark{width:38px;height:38px}
      .brand{font-size:14px}
      .nav-actions .btn-brand{padding:10px 12px;min-height:40px;font-size:13px}
      .nav-links{justify-content:flex-start}
      .coupon-grid,.directory{grid-template-columns:1fr}
      .avatar-row{align-items:flex-start}
      .avatar{width:62px;height:62px;border-radius:22px;font-size:26px}
      .hero-actions .btn-brand,.hero-actions .btn-ghost,.hero-actions .btn-soft{width:100%}
      .badge-grid{grid-template-columns:1fr}
      .data-badge{min-height:auto}
      .cover-art{min-height:160px}
      .entry-actions{display:block}
      .entry-actions .btn-soft{margin-top:12px;width:100%}
      .live-card{padding:18px}
      .timebox{min-width:68px}
      .news-list a{grid-template-columns:1fr}
      .news-date{white-space:normal}
      .share-form{display:grid;grid-template-columns:1fr}
      .share-form .btn-brand{width:100%}
      .footer-grid{display:block}
      .footer-links{justify-content:flex-start;margin-top:18px}
    }

/* roulang page: category1 */
:root{
            --bg:#f6f8fc;
            --bg-2:#eef4ff;
            --surface:rgba(255,255,255,.88);
            --surface-solid:#ffffff;
            --text:#182033;
            --muted:#647089;
            --line:#d9e1ef;
            --line-strong:#c6d0e2;
            --primary:#ff6b57;
            --primary-2:#ffb45c;
            --secondary:#4f7cff;
            --accent:#18b8a6;
            --success:#21b07b;
            --warning:#f0b429;
            --shadow:0 18px 40px rgba(19,31,62,.10);
            --shadow-soft:0 10px 24px rgba(19,31,62,.08);
            --radius-xl:28px;
            --radius-lg:22px;
            --radius-md:16px;
            --radius-sm:12px;
            --container:1180px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
            color:var(--text);
            line-height:1.7;
            background:
                radial-gradient(1100px 600px at 12% -8%, rgba(79,124,255,.14), transparent 58%),
                radial-gradient(900px 540px at 88% 0%, rgba(255,107,87,.12), transparent 54%),
                linear-gradient(180deg, #f9fbff 0%, var(--bg) 42%, #f8fafc 100%);
            min-height:100vh;
        }

        a{
            color:inherit;
            text-decoration:none;
            transition:all .2s ease;
        }

        a:hover{color:var(--primary)}
        img{max-width:100%;display:block}
        button,input,select{
            font:inherit;
        }

        ::selection{
            background:rgba(255,107,87,.18);
            color:var(--text);
        }

        .site-container{
            width:min(calc(100% - 32px), var(--container));
            margin:0 auto;
        }

        .dock-header{
            position:sticky;
            top:12px;
            z-index:1040;
            padding:12px 0 6px;
            pointer-events:none;
        }

        .dock-nav{
            pointer-events:auto;
            width:min(calc(100% - 16px), 1120px);
            margin:0 auto;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:14px 18px;
            border:1px solid rgba(255,255,255,.62);
            background:rgba(255,255,255,.74);
            backdrop-filter:blur(18px);
            box-shadow:0 14px 36px rgba(35,48,81,.12);
            border-radius:999px;
        }

        .brand{
            display:flex;
            align-items:center;
            gap:10px;
            min-width:0;
            font-weight:800;
            font-size:1rem;
            letter-spacing:0;
            white-space:nowrap;
        }

        .brand span:last-child{
            overflow:hidden;
            text-overflow:ellipsis;
        }

        .brand-mark,
        .footer-brand .brand-mark{
            width:38px;
            height:38px;
            border-radius:14px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            color:#fff;
            background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 55%, var(--accent) 100%);
            box-shadow:0 8px 18px rgba(79,124,255,.22);
            flex:0 0 auto;
        }

        .nav-links{
            display:flex;
            align-items:center;
            gap:8px;
            list-style:none;
            padding:0;
            margin:0;
            flex:1 1 auto;
            justify-content:center;
        }

        .nav-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 15px;
            border-radius:999px;
            color:var(--muted);
            font-weight:700;
            border:1px solid transparent;
            line-height:1;
        }

        .nav-link:hover,
        .nav-link:focus-visible{
            color:var(--text);
            background:rgba(79,124,255,.08);
            border-color:rgba(79,124,255,.14);
        }

        .nav-link.active{
            color:#fff;
            background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            box-shadow:0 12px 24px rgba(79,124,255,.22);
        }

        .nav-actions{
            display:flex;
            align-items:center;
            gap:10px;
            flex:0 0 auto;
        }

        .search-mini{
            display:flex;
            align-items:center;
            gap:10px;
            min-width:250px;
            padding:10px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.92);
            border:1px solid var(--line);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
        }

        .search-mini i{
            color:var(--muted);
            font-size:.95rem;
        }

        .search-mini input{
            border:0;
            outline:0;
            width:100%;
            background:transparent;
            color:var(--text);
            min-width:0;
        }

        .search-mini input::placeholder{color:#8a94a8}

        .btn-brand,
        .btn-soft,
        .btn-outline-soft,
        .btn-ghost{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            border-radius:999px;
            font-weight:700;
            padding:12px 18px;
            border:1px solid transparent;
            white-space:nowrap;
            transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
            min-height:46px;
        }

        .btn-brand{
            color:#fff;
            background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            box-shadow:0 14px 26px rgba(255,107,87,.24);
        }

        .btn-brand:hover,
        .btn-brand:focus-visible{
            transform:translateY(-1px);
            color:#fff;
            box-shadow:0 18px 28px rgba(79,124,255,.22);
        }

        .btn-soft{
            color:var(--text);
            background:rgba(255,255,255,.9);
            border-color:var(--line);
            box-shadow:var(--shadow-soft);
        }

        .btn-soft:hover,
        .btn-soft:focus-visible{
            transform:translateY(-1px);
            color:var(--text);
            border-color:#bfd0f1;
            background:#fff;
        }

        .btn-outline-soft{
            color:var(--text);
            background:transparent;
            border-color:rgba(104,116,140,.22);
        }

        .btn-outline-soft:hover,
        .btn-outline-soft:focus-visible{
            color:var(--text);
            background:rgba(255,255,255,.78);
            border-color:rgba(79,124,255,.18);
        }

        .btn-ghost{
            color:var(--muted);
            background:transparent;
            border-color:transparent;
            padding-inline:14px;
        }

        .btn-ghost:hover,
        .btn-ghost:focus-visible{
            color:var(--text);
            background:rgba(79,124,255,.08);
        }

        .btn:focus,
        .btn:focus-visible,
        .form-control:focus,
        .form-select:focus{
            box-shadow:0 0 0 .22rem rgba(79,124,255,.18);
            border-color:rgba(79,124,255,.34);
        }

        .hero{
            position:relative;
            padding:36px 0 8px;
        }

        .hero-shell{
            position:relative;
            overflow:hidden;
            border-radius:34px;
            border:1px solid rgba(255,255,255,.72);
            background:
                linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.76) 52%, rgba(244,248,255,.90) 100%);
            box-shadow:var(--shadow);
        }

        .hero-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 8% 16%, rgba(255,107,87,.15), transparent 22%),
                radial-gradient(circle at 92% 12%, rgba(79,124,255,.13), transparent 20%),
                linear-gradient(135deg, rgba(255,180,92,.07), transparent 45%);
            pointer-events:none;
        }

        .hero-inner{
            position:relative;
            padding:30px;
            display:grid;
            grid-template-columns:1.15fr .95fr;
            gap:24px;
            align-items:stretch;
        }

        .hero-copy{
            display:flex;
            flex-direction:column;
            justify-content:center;
            gap:16px;
            min-width:0;
        }

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            width:fit-content;
            padding:8px 13px;
            border-radius:999px;
            border:1px solid rgba(79,124,255,.16);
            background:rgba(255,255,255,.86);
            color:var(--secondary);
            font-weight:800;
            font-size:.92rem;
            box-shadow:0 8px 18px rgba(79,124,255,.07);
        }

        .hero h1{
            margin:0;
            font-size:clamp(2rem, 4vw, 3.35rem);
            line-height:1.1;
            letter-spacing:0;
            font-weight:900;
            max-width:12em;
        }

        .hero-lead{
            margin:0;
            color:var(--muted);
            font-size:1.05rem;
            max-width:44rem;
        }

        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
        }

        .hero-stats{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:4px;
        }

        .stat-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.9);
            border:1px solid var(--line);
            box-shadow:0 10px 22px rgba(28,42,75,.06);
            font-weight:700;
            color:var(--text);
        }

        .stat-badge span{
            color:var(--secondary);
            font-weight:900;
        }

        .hero-visual{
            display:grid;
            grid-template-columns:1fr;
            align-content:center;
            gap:14px;
            min-width:0;
        }

        .feature-stage{
            position:relative;
            border-radius:28px;
            padding:18px;
            background:linear-gradient(135deg, rgba(79,124,255,.14), rgba(255,255,255,.88) 42%, rgba(255,107,87,.14));
            border:1px solid rgba(255,255,255,.8);
            min-height:318px;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
        }

        .feature-stage .stage-frame{
            position:absolute;
            inset:18px;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,251,255,.95));
            border:1px solid rgba(198,208,226,.75);
            overflow:hidden;
            box-shadow:0 16px 30px rgba(30,47,88,.08);
        }

        .stage-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:16px 16px 12px;
            border-bottom:1px solid rgba(198,208,226,.65);
        }

        .stage-dots{
            display:flex;
            gap:7px;
        }

        .stage-dots span{
            width:10px;
            height:10px;
            border-radius:999px;
            background:#d5deee;
        }

        .stage-dots span:nth-child(1){background:#ffb45c}
        .stage-dots span:nth-child(2){background:#71d1c2}
        .stage-dots span:nth-child(3){background:#6d8bff}

        .stage-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(79,124,255,.09);
            color:var(--secondary);
            font-weight:800;
            font-size:.92rem;
        }

        .stage-body{
            padding:16px;
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:12px;
            height:calc(100% - 58px);
        }

        .stage-card,
        .stage-mini{
            border-radius:22px;
            background:#fff;
            border:1px solid rgba(209,218,233,.88);
            box-shadow:0 10px 22px rgba(36,49,80,.06);
            overflow:hidden;
        }

        .stage-card{
            display:flex;
            flex-direction:column;
            min-height:100%;
        }

        .stage-card-media{
            position:relative;
            flex:1 1 auto;
            min-height:126px;
            background:
                linear-gradient(135deg, rgba(255,107,87,.85), rgba(79,124,255,.82)),
                linear-gradient(135deg, #ff6b57, #4f7cff);
        }

        .stage-card-media::before,
        .stage-card-media::after{
            content:"";
            position:absolute;
            inset:auto;
            border-radius:999px;
            background:rgba(255,255,255,.17);
            filter:blur(1px);
        }

        .stage-card-media::before{
            width:150px;
            height:150px;
            right:-42px;
            top:-34px;
        }

        .stage-card-media::after{
            width:120px;
            height:120px;
            left:-28px;
            bottom:-32px;
        }

        .stage-card-copy{
            padding:14px;
        }

        .stage-card-copy h3{
            margin:0 0 6px;
            font-size:1rem;
            font-weight:800;
        }

        .stage-card-copy p{
            margin:0;
            color:var(--muted);
            font-size:.93rem;
        }

        .stage-mini{
            padding:14px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:10px;
        }

        .mini-row{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:10px;
        }

        .mini-title{
            margin:0;
            font-size:1rem;
            font-weight:800;
        }

        .mini-note{
            margin:4px 0 0;
            color:var(--muted);
            font-size:.93rem;
        }

        .mini-meter{
            display:flex;
            flex-direction:column;
            gap:8px;
        }

        .meter-line{
            width:100%;
            height:10px;
            border-radius:999px;
            background:#edf2fa;
            overflow:hidden;
        }

        .meter-line span{
            display:block;
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--accent), var(--secondary), var(--primary));
        }

        .mini-pills{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }

        .mini-pills .pill{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:8px 10px;
            border-radius:999px;
            background:rgba(243,247,255,.96);
            color:var(--muted);
            border:1px solid rgba(205,216,232,.7);
            font-size:.88rem;
            font-weight:700;
        }

        .section{
            padding:34px 0 0;
        }

        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:18px;
        }

        .section-title{
            margin:0;
            font-size:1.55rem;
            font-weight:900;
            letter-spacing:0;
        }

        .section-sub{
            margin:0;
            color:var(--muted);
            max-width:46rem;
        }

        .section-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--secondary);
            font-weight:800;
            white-space:nowrap;
        }

        .section-link:hover{color:var(--primary)}

        .directory-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:14px;
        }

        .dir-card{
            position:relative;
            overflow:hidden;
            border-radius:24px;
            border:1px solid rgba(212,221,236,.9);
            background:rgba(255,255,255,.9);
            box-shadow:0 12px 24px rgba(29,43,71,.06);
            padding:18px;
            min-height:156px;
        }

        .dir-card::before{
            content:"";
            position:absolute;
            inset:auto -40px -42px auto;
            width:100px;
            height:100px;
            border-radius:28px;
            background:linear-gradient(135deg, rgba(255,107,87,.18), rgba(79,124,255,.16));
            transform:rotate(14deg);
        }

        .dir-card .dir-icon{
            width:42px;
            height:42px;
            border-radius:14px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(135deg, rgba(255,107,87,.12), rgba(79,124,255,.12));
            color:var(--secondary);
            margin-bottom:14px;
            font-size:1rem;
        }

        .dir-card h3{
            margin:0 0 6px;
            font-size:1.02rem;
            font-weight:850;
        }

        .dir-card p{
            margin:0;
            color:var(--muted);
            font-size:.95rem;
        }

        .dir-meta{
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
            margin-top:14px;
        }

        .tag,
        .badge-soft{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 10px;
            border-radius:999px;
            border:1px solid rgba(199,210,227,.82);
            background:rgba(248,250,255,.96);
            color:var(--muted);
            font-size:.84rem;
            font-weight:800;
        }

        .tag.tag-hot{
            color:#a45300;
            border-color:rgba(240,180,41,.28);
            background:rgba(240,180,41,.12);
        }

        .tag.tag-new{
            color:#0c6b87;
            border-color:rgba(24,184,166,.22);
            background:rgba(24,184,166,.10);
        }

        .tag.tag-save{
            color:#7a1b1b;
            border-color:rgba(255,107,87,.24);
            background:rgba(255,107,87,.10);
        }

        .toolbar{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
            justify-content:space-between;
            padding:14px 16px;
            border-radius:22px;
            background:rgba(255,255,255,.88);
            border:1px solid rgba(211,220,235,.92);
            box-shadow:0 12px 24px rgba(19,31,62,.06);
            margin-bottom:18px;
        }

        .toolbar-group{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:10px;
        }

        .filter-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            border:1px solid rgba(205,216,232,.92);
            background:#fff;
            color:var(--muted);
            font-weight:800;
            box-shadow:0 8px 18px rgba(26,39,67,.05);
            cursor:pointer;
        }

        .filter-chip.active{
            color:#fff;
            background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-color:transparent;
            box-shadow:0 12px 24px rgba(79,124,255,.22);
        }

        .toolbar .form-select{
            border-radius:999px;
            min-height:46px;
            padding-inline:16px 42px 16px 16px;
            border-color:var(--line);
            background-color:#fff;
            box-shadow:0 8px 18px rgba(20,34,61,.04);
            font-weight:700;
            color:var(--text);
        }

        .card-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:16px;
        }

        .content-card{
            position:relative;
            overflow:hidden;
            border-radius:26px;
            border:1px solid rgba(210,219,235,.92);
            background:rgba(255,255,255,.92);
            box-shadow:0 14px 26px rgba(29,43,71,.07);
            min-height:100%;
            display:flex;
            flex-direction:column;
            transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }

        .content-card:hover{
            transform:translateY(-3px);
            box-shadow:0 20px 36px rgba(29,43,71,.10);
            border-color:rgba(79,124,255,.20);
        }

        .card-cover{
            position:relative;
            height:168px;
            overflow:hidden;
        }

        .card-cover .cover-art{
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 18% 24%, rgba(255,255,255,.26), transparent 18%),
                radial-gradient(circle at 84% 18%, rgba(255,255,255,.22), transparent 16%),
                linear-gradient(135deg, rgba(255,107,87,.88), rgba(79,124,255,.88) 56%, rgba(24,184,166,.82));
        }

        .tone-a .cover-art{background:linear-gradient(135deg, rgba(255,107,87,.92), rgba(79,124,255,.82))}
        .tone-b .cover-art{background:linear-gradient(135deg, rgba(79,124,255,.92), rgba(24,184,166,.84))}
        .tone-c .cover-art{background:linear-gradient(135deg, rgba(24,184,166,.92), rgba(255,180,92,.84))}
        .tone-d .cover-art{background:linear-gradient(135deg, rgba(255,180,92,.92), rgba(255,107,87,.78))}
        .tone-e .cover-art{background:linear-gradient(135deg, rgba(87,101,255,.9), rgba(122,64,255,.82))}
        .tone-f .cover-art{background:linear-gradient(135deg, rgba(255,107,87,.84), rgba(24,184,166,.88))}

        .cover-art::before,
        .cover-art::after{
            content:"";
            position:absolute;
            border-radius:26px;
            background:rgba(255,255,255,.16);
        }

        .cover-art::before{
            width:120px;
            height:120px;
            right:-24px;
            top:-18px;
        }

        .cover-art::after{
            width:140px;
            height:140px;
            left:-24px;
            bottom:-56px;
        }

        .cover-badge{
            position:absolute;
            top:16px;
            left:16px;
            z-index:2;
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:8px 12px;
            border-radius:999px;
            color:#fff;
            background:rgba(15,20,32,.22);
            backdrop-filter:blur(6px);
            border:1px solid rgba(255,255,255,.22);
            font-size:.84rem;
            font-weight:800;
        }

        .cover-score{
            position:absolute;
            right:16px;
            bottom:16px;
            z-index:2;
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:9px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.92);
            color:var(--text);
            font-size:.84rem;
            font-weight:900;
            box-shadow:0 10px 20px rgba(20,31,54,.14);
        }

        .card-body-wrap{
            padding:16px 16px 18px;
            display:flex;
            flex-direction:column;
            gap:12px;
            flex:1 1 auto;
        }

        .card-title{
            margin:0;
            font-size:1.08rem;
            line-height:1.35;
            font-weight:900;
            letter-spacing:0;
        }

        .card-desc{
            margin:0;
            color:var(--muted);
            font-size:.96rem;
        }

        .card-info{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }

        .card-actions{
            margin-top:auto;
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }

        .mini-btn{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 13px;
            border-radius:999px;
            border:1px solid rgba(205,216,232,.92);
            color:var(--text);
            background:#fff;
            font-weight:800;
            min-height:42px;
        }

        .mini-btn:hover{
            color:var(--secondary);
            border-color:rgba(79,124,255,.20);
            background:rgba(79,124,255,.06);
        }

        .related-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:16px;
        }

        .related-card{
            border-radius:24px;
            padding:18px;
            background:rgba(255,255,255,.9);
            border:1px solid rgba(212,221,236,.92);
            box-shadow:0 10px 22px rgba(28,41,68,.06);
            min-height:168px;
        }

        .related-card .related-icon{
            width:44px;
            height:44px;
            border-radius:14px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            color:#fff;
            background:linear-gradient(135deg, var(--secondary), var(--primary));
            margin-bottom:14px;
            box-shadow:0 12px 20px rgba(79,124,255,.18);
        }

        .related-card h3{
            margin:0 0 6px;
            font-size:1.03rem;
            font-weight:850;
        }

        .related-card p{
            margin:0;
            color:var(--muted);
            font-size:.95rem;
        }

        .faq-wrap{
            border-radius:28px;
            background:rgba(255,255,255,.92);
            border:1px solid rgba(212,221,236,.92);
            box-shadow:0 14px 26px rgba(29,43,71,.06);
            overflow:hidden;
        }

        .accordion-item{
            border:0;
            border-bottom:1px solid rgba(214,223,236,.84);
            background:transparent;
        }

        .accordion-item:last-child{border-bottom:0}

        .accordion-button{
            box-shadow:none!important;
            border-radius:0!important;
            padding:18px 20px;
            font-weight:800;
            color:var(--text);
            background:transparent;
        }

        .accordion-button:not(.collapsed){
            color:var(--secondary);
            background:rgba(79,124,255,.05);
        }

        .accordion-button::after{
            width:1rem;
            height:1rem;
            background-size:1rem;
        }

        .accordion-body{
            padding:0 20px 18px;
            color:var(--muted);
        }

        .cta-band{
            overflow:hidden;
            border-radius:30px;
            border:1px solid rgba(255,255,255,.75);
            background:
                linear-gradient(135deg, rgba(79,124,255,.92) 0%, rgba(255,107,87,.88) 58%, rgba(24,184,166,.88) 100%);
            color:#fff;
            box-shadow:0 18px 38px rgba(53,74,138,.18);
        }

        .cta-band .cta-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            padding:26px;
        }

        .cta-band h2{
            margin:0 0 6px;
            font-size:1.55rem;
            font-weight:900;
            letter-spacing:0;
        }

        .cta-band p{
            margin:0;
            color:rgba(255,255,255,.88);
            max-width:42rem;
        }

        .cta-actions{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }

        .cta-band .btn-lightish{
            color:var(--text);
            background:#fff;
            border:1px solid rgba(255,255,255,.84);
            box-shadow:0 10px 22px rgba(20,34,61,.16);
        }

        .cta-band .btn-lightish:hover{
            transform:translateY(-1px);
            color:var(--text);
        }

        .cta-band .btn-ink{
            color:#fff;
            background:rgba(255,255,255,.14);
            border:1px solid rgba(255,255,255,.24);
        }

        .cta-band .btn-ink:hover{
            color:#fff;
            background:rgba(255,255,255,.18);
        }

        .collect-row{
            margin-top:16px;
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:14px;
            align-items:stretch;
        }

        .collect-card{
            padding:18px;
            border-radius:24px;
            background:rgba(255,255,255,.92);
            border:1px solid rgba(212,221,236,.92);
            box-shadow:0 12px 22px rgba(26,39,67,.06);
        }

        .collect-card h3{
            margin:0 0 8px;
            font-size:1.05rem;
            font-weight:850;
        }

        .collect-card p{
            margin:0;
            color:var(--muted);
        }

        .share-box{
            display:flex;
            flex-direction:column;
            gap:12px;
        }

        .share-input{
            display:flex;
            gap:10px;
            align-items:center;
            padding:10px 12px;
            border-radius:18px;
            background:#fff;
            border:1px solid var(--line);
            box-shadow:0 10px 20px rgba(19,31,62,.05);
        }

        .share-input input{
            border:0;
            outline:0;
            background:transparent;
            width:100%;
            min-width:0;
            color:var(--text);
        }

        .share-input input::placeholder{color:#8a94a8}

        .site-footer{
            margin-top:34px;
            padding:24px 0 30px;
            color:var(--muted);
        }

        .site-footer .site-container{
            border-top:1px solid rgba(214,223,236,.9);
            padding-top:22px;
        }

        .footer-grid{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:20px;
        }

        .footer-brand{
            display:flex;
            align-items:center;
            gap:10px;
            font-weight:900;
            color:var(--text);
            margin-bottom:10px;
        }

        .footer-note{
            margin:0;
            max-width:46rem;
        }

        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px 16px;
            justify-content:flex-end;
        }

        .footer-links a{
            color:var(--muted);
            font-weight:700;
        }

        .footer-links a:hover{color:var(--secondary)}

        .copyright{
            margin-top:18px;
            padding-top:16px;
            border-top:1px solid rgba(214,223,236,.86);
            font-size:.94rem;
        }

        .page-gap{padding-bottom:24px}

        .sticky-badges{
            position:absolute;
            top:-14px;
            right:18px;
            display:flex;
            gap:8px;
            flex-wrap:wrap;
        }

        .floating-chip{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:8px 10px;
            border-radius:999px;
            background:rgba(255,255,255,.92);
            border:1px solid rgba(206,216,233,.88);
            color:var(--muted);
            font-size:.84rem;
            font-weight:800;
            box-shadow:0 10px 20px rgba(29,42,73,.06);
        }

        .reveal{
            opacity:1;
        }

        .hidden-card{
            display:none !important;
        }

        .pagination-wrap{
            display:flex;
            justify-content:center;
            margin-top:18px;
        }

        .pagination{
            gap:8px;
        }

        .page-link{
            border-radius:14px;
            border-color:rgba(205,216,232,.92);
            color:var(--text);
            box-shadow:0 8px 16px rgba(18,29,52,.04);
        }

        .page-link:hover{
            color:var(--secondary);
            background:rgba(79,124,255,.06);
        }

        .page-item.active .page-link{
            border-color:transparent;
            background:linear-gradient(135deg, var(--primary), var(--secondary));
        }

        .page-item.disabled .page-link{
            color:#9aa3b5;
            background:#fff;
        }

        .top-strip{
            margin-top:10px;
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-items:center;
        }

        .top-strip .floating-chip{
            background:rgba(255,255,255,.88);
        }

        @media (max-width: 1199.98px){
            .hero-inner{
                grid-template-columns:1fr;
            }
            .feature-stage{
                min-height:286px;
            }
            .card-grid,
            .related-grid{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }
            .directory-grid{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 991.98px){
            .site-container{
                width:min(100% - 28px, 1180px);
            }
            .dock-nav{
                border-radius:24px;
                justify-content:flex-start;
            }
            .nav-links{
                order:3;
                width:100%;
                overflow-x:auto;
                padding-bottom:2px;
                scrollbar-width:none;
            }
            .nav-links::-webkit-scrollbar{display:none}
            .nav-actions{
                margin-left:auto;
            }
            .search-mini{
                width:190px;
            }
            .section-head{
                align-items:flex-start;
                flex-direction:column;
            }
            .collect-row{
                grid-template-columns:1fr;
            }
            .footer-grid{
                flex-direction:column;
            }
            .footer-links{
                justify-content:flex-start;
            }
        }

        @media (max-width: 767.98px){
            body{
                padding-top:142px;
            }
            .dock-header{
                top:10px;
            }
            .dock-nav{
                padding:9px;
                gap:8px;
            }
            .brand{
                min-height:42px;
                padding:7px 10px 7px 7px;
                max-width:100%;
                flex:1 1 auto;
            }
            .brand span:last-child{
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }
            .nav-actions{
                width:100%;
                justify-content:space-between;
                margin-left:0;
            }
            .search-mini{
                flex:1 1 180px;
                width:auto;
                min-width:0;
            }
            .btn-brand{
                padding-inline:13px;
            }
            .hero{
                padding-top:18px;
            }
            .hero-shell{
                border-radius:26px;
            }
            .hero-inner{
                padding:20px;
                gap:18px;
            }
            .hero h1{
                font-size:2rem;
                max-width:100%;
            }
            .hero-lead{
                font-size:1rem;
            }
            .feature-stage{
                min-height:364px;
                padding:12px;
            }
            .feature-stage .stage-frame{
                inset:12px;
                border-radius:20px;
            }
            .stage-body{
                grid-template-columns:1fr;
                height:auto;
            }
            .stage-card-media{
                min-height:116px;
            }
            .directory-grid,
            .card-grid,
            .related-grid{
                grid-template-columns:1fr;
            }
            .card-cover{
                height:156px;
            }
            .toolbar{
                align-items:stretch;
            }
            .toolbar-group{
                width:100%;
            }
            .toolbar .form-select{
                width:100%;
            }
            .filter-chip{
                flex:1 1 auto;
                justify-content:center;
            }
            .cta-band .cta-inner{
                flex-direction:column;
                align-items:flex-start;
                padding:22px;
            }
            .cta-actions{
                width:100%;
                justify-content:flex-start;
            }
            .cta-actions .btn{
                flex:1 1 160px;
            }
        }

        @media (max-width: 520px){
            body{
                padding-top:164px;
            }
            .site-container{
                width:min(100% - 20px, 1180px);
            }
            .brand-mark{
                width:36px;
                height:36px;
                border-radius:12px;
            }
            .nav-link{
                min-height:40px;
                padding:9px 11px;
                font-size:.92rem;
            }
            .nav-actions .btn-brand{
                min-height:42px;
                font-size:.92rem;
            }
            .search-mini{
                min-height:42px;
            }
            .hero-inner{
                padding:16px;
            }
            .hero-actions .btn{
                width:100%;
            }
            .hero-stats{
                display:grid;
                grid-template-columns:1fr;
            }
            .stat-badge{
                justify-content:space-between;
            }
            .feature-stage{
                min-height:394px;
            }
            .stage-top{
                padding:12px;
            }
            .stage-body{
                padding:12px;
            }
            .section{
                padding-top:28px;
            }
            .section-title{
                font-size:1.34rem;
            }
            .dir-card,
            .related-card,
            .collect-card{
                border-radius:20px;
                padding:16px;
            }
            .content-card{
                border-radius:22px;
            }
            .card-body-wrap{
                padding:15px;
            }
            .top-strip{
                display:grid;
                grid-template-columns:1fr;
            }
            .floating-chip{
                justify-content:center;
            }
        }