/* roulang page: index */
:root{
      --bg:#0b0d10;
      --bg-2:#10141a;
      --panel:#12171d;
      --panel-2:#171d24;
      --soft:#f3efe6;
      --text:#f4f6f8;
      --muted:#a7b0bb;
      --muted-2:#76808c;
      --line:rgba(255,255,255,.08);
      --line-2:rgba(255,255,255,.12);
      --hot:#ff3b30;
      --hot-2:#ff7a18;
      --cyan:#00d0c2;
      --gold:#ffd166;
      --good:#78e08f;
      --shadow:0 20px 50px rgba(0,0,0,.38);
      --radius:8px;
      --radius-sm:6px;
      --gap:clamp(14px, 1.8vw, 22px);
      --container:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 220px),
        linear-gradient(180deg, #090b0e 0%, #0c0f14 42%, #0b0d10 100%);
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.6;
      letter-spacing:0;
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none;transition:color .18s ease, opacity .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease}
    a:hover{color:#fff}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(255,59,48,.28);color:#fff}

    .page-wrap{
      min-height:100vh;
      background:
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%),
        transparent;
    }

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

    .top-strip{
      background:linear-gradient(90deg, #f6f2e9 0%, #efe7d6 100%);
      color:#121316;
      border-bottom:1px solid rgba(0,0,0,.08);
      font-size:.86rem;
    }
    .top-strip-inner{
      min-height:42px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:8px 0;
    }
    .top-strip-left,
    .top-strip-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .top-strip-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 10px;
      border-radius:999px;
      background:rgba(18,19,22,.08);
      color:#121316;
      font-weight:700;
      font-size:.8rem;
    }
    .top-strip-note{
      color:#3a4047;
    }
    .top-strip a{
      color:#121316;
      font-weight:700;
      border-bottom:1px solid rgba(18,19,22,.2);
      padding-bottom:1px;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:40;
      backdrop-filter:saturate(1.05) blur(12px);
      background:rgba(11,13,16,.78);
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .site-nav{
      padding:12px 0;
    }
    .site-nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .brand-mark{
      width:38px;
      height:38px;
      border-radius:8px;
      background:
        linear-gradient(135deg, rgba(255,59,48,1), rgba(255,122,24,1));
      box-shadow:0 10px 24px rgba(255,77,48,.22);
      position:relative;
      flex:0 0 auto;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:9px;
      border:1px solid rgba(255,255,255,.45);
      border-radius:6px;
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    .brand-title{
      font-size:1.02rem;
      font-weight:900;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-sub{
      color:var(--muted);
      font-size:.82rem;
      line-height:1.2;
      margin-top:2px;
    }

    .nav-menu{
      display:flex;
      align-items:center;
      gap:8px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .nav-menu a{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 13px;
      border-radius:7px;
      color:var(--muted);
      border:1px solid transparent;
      background:transparent;
      font-weight:600;
      font-size:.95rem;
    }
    .nav-menu a:hover,
    .nav-menu a:focus-visible,
    .nav-menu a.is-active{
      color:#fff;
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.08);
      box-shadow:0 8px 20px rgba(0,0,0,.18);
    }
    .nav-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:18px;
      height:18px;
      border-radius:999px;
      padding:0 5px;
      font-size:.72rem;
      font-weight:800;
      background:rgba(255,59,48,.16);
      color:#ff8f8b;
    }
    .nav-cta{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:7px;
      background:linear-gradient(135deg, var(--hot), var(--hot-2));
      color:#fff;
      font-weight:800;
      border:1px solid rgba(255,255,255,.06);
      box-shadow:0 14px 28px rgba(255,59,48,.24);
    }
    .nav-cta:hover{transform:translateY(-1px);color:#fff}
    .nav-cta i{font-size:.9rem}

    .title-bar{
      background:transparent;
      color:#fff;
      padding:10px 0;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .title-bar .menu-icon{
      margin-right:10px;
    }
    .title-bar-title{
      font-weight:900;
      font-size:1rem;
      line-height:1;
    }

    .hero-shell{
      padding:18px 0 10px;
    }

    .countdown-strip{
      background:linear-gradient(90deg, #f7f1e6 0%, #efe1cd 100%);
      color:#14161a;
      border-radius:8px;
      padding:14px 16px;
      border:1px solid rgba(255,255,255,.06);
      box-shadow:0 14px 35px rgba(0,0,0,.16);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }
    .countdown-label{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      letter-spacing:0;
    }
    .countdown-badge{
      padding:4px 9px;
      border-radius:999px;
      background:#121316;
      color:#fff;
      font-size:.78rem;
      font-weight:800;
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .countdown-time{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      font-size:.94rem;
      font-weight:700;
    }
    .time-chip{
      min-width:58px;
      text-align:center;
      padding:8px 10px;
      border-radius:7px;
      background:#121316;
      color:#fff;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .countdown-note{
      color:#36393f;
      font-weight:600;
    }

    .hero-banner{
      margin-top:14px;
      border-radius:8px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
        linear-gradient(180deg, #11161d 0%, #0d1015 100%);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero-banner::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(120deg, rgba(255,59,48,.18), rgba(255,59,48,0) 34%),
        linear-gradient(90deg, rgba(0,208,194,.08), rgba(0,208,194,0) 28%);
      pointer-events:none;
    }
    .hero-content{
      position:relative;
      padding:28px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.35fr) minmax(290px,.92fr);
      gap:24px;
      align-items:stretch;
    }

    .eyebrow-row{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
      margin-bottom:12px;
    }
    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
      color:#e8edf3;
      font-size:.8rem;
      font-weight:800;
      letter-spacing:0;
    }
    .status-pill.hot{
      background:rgba(255,59,48,.12);
      color:#ff9c95;
      border-color:rgba(255,59,48,.18);
    }
    .status-pill.good{
      background:rgba(0,208,194,.1);
      color:#91f4ea;
      border-color:rgba(0,208,194,.16);
    }
    .status-pill.gold{
      background:rgba(255,209,102,.12);
      color:#ffe6a1;
      border-color:rgba(255,209,102,.16);
    }

    .hero-title{
      margin:0;
      font-size:clamp(2rem, 3.4vw, 3.4rem);
      line-height:1.08;
      font-weight:1000;
      letter-spacing:0;
      max-width:12.8em;
    }
    .hero-title em{
      font-style:normal;
      color:#fff;
      text-shadow:0 0 24px rgba(255,59,48,.16);
    }
    .hero-copy{
      margin:14px 0 0;
      max-width:42rem;
      color:#d4dbe3;
      font-size:1rem;
    }

    .hero-actions{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      margin-top:22px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:12px 16px;
      border-radius:7px;
      border:1px solid transparent;
      font-weight:900;
      font-size:.97rem;
      line-height:1;
      cursor:pointer;
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
      letter-spacing:0;
    }
    .btn:hover,
    .btn:focus-visible{
      transform:translateY(-1px);
    }
    .btn-primary{
      background:linear-gradient(135deg, var(--hot), var(--hot-2));
      color:#fff;
      box-shadow:0 16px 30px rgba(255,59,48,.24);
      border-color:rgba(255,255,255,.06);
    }
    .btn-primary:hover{color:#fff;box-shadow:0 18px 34px rgba(255,59,48,.3)}
    .btn-secondary{
      background:rgba(255,255,255,.04);
      color:#fff;
      border-color:rgba(255,255,255,.1);
    }
    .btn-secondary:hover{
      background:rgba(255,255,255,.07);
      color:#fff;
    }
    .btn-tertiary{
      background:transparent;
      color:#dbe2ea;
      border-color:rgba(255,255,255,.1);
    }
    .btn-tertiary:hover{
      color:#fff;
      border-color:rgba(255,255,255,.18);
      background:rgba(255,255,255,.04);
    }
    .btn i{font-size:.9rem}

    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
      margin-top:20px;
    }
    .metric-box{
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      border-radius:8px;
      padding:14px 14px 12px;
      min-height:92px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .metric-label{
      color:var(--muted);
      font-size:.8rem;
      margin-bottom:8px;
      display:flex;
      align-items:center;
      gap:7px;
    }
    .metric-value{
      font-size:1.55rem;
      font-weight:1000;
      line-height:1;
      color:#fff;
      letter-spacing:0;
    }
    .metric-desc{
      color:#bbc4cf;
      font-size:.86rem;
      margin-top:8px;
    }

    .hero-side{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border:1px solid rgba(255,255,255,.08);
      border-radius:8px;
      padding:18px;
      position:relative;
      overflow:hidden;
    }
    .hero-side::after{
      content:"";
      position:absolute;
      inset:auto -24% -35% auto;
      width:220px;
      height:220px;
      background:radial-gradient(circle at center, rgba(255,122,24,.18), rgba(255,122,24,0) 65%);
      pointer-events:none;
    }
    .side-title{
      margin:0 0 8px;
      font-size:1rem;
      font-weight:900;
    }
    .side-note{
      margin:0 0 14px;
      color:var(--muted);
      font-size:.92rem;
    }
    .status-stack{
      display:grid;
      gap:10px;
      position:relative;
      z-index:1;
    }
    .status-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:11px 12px;
      background:rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.08);
      border-radius:8px;
    }
    .status-row strong{
      display:block;
      font-size:.92rem;
      color:#fff;
      line-height:1.25;
    }
    .status-row span{
      display:block;
      color:var(--muted);
      font-size:.82rem;
      margin-top:2px;
    }
    .mini-tag{
      flex:0 0 auto;
      padding:6px 9px;
      border-radius:999px;
      background:rgba(255,59,48,.13);
      color:#ff9c95;
      border:1px solid rgba(255,59,48,.14);
      font-size:.76rem;
      font-weight:800;
    }
    .mini-tag.cyan{
      background:rgba(0,208,194,.12);
      color:#a7fff8;
      border-color:rgba(0,208,194,.18);
    }
    .mini-tag.gold{
      background:rgba(255,209,102,.12);
      color:#ffe39f;
      border-color:rgba(255,209,102,.18);
    }

    .section-band{
      padding:26px 0;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
      flex-wrap:wrap;
    }
    .section-title{
      margin:0;
      font-size:1.4rem;
      line-height:1.2;
      font-weight:950;
      letter-spacing:0;
    }
    .section-desc{
      margin:8px 0 0;
      max-width:48rem;
      color:var(--muted);
      font-size:.96rem;
    }
    .section-link{
      color:#fff;
      font-weight:800;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 0;
      border-bottom:1px solid rgba(255,255,255,.18);
    }

    .feature-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
    }
    .feature-card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:8px;
      padding:16px;
      min-height:176px;
      position:relative;
      overflow:hidden;
      box-shadow:0 10px 26px rgba(0,0,0,.18);
    }
    .feature-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(140deg, rgba(255,59,48,.08), transparent 40%);
      pointer-events:none;
    }
    .feature-icon{
      width:42px;
      height:42px;
      border-radius:8px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg, rgba(255,59,48,.92), rgba(255,122,24,.92));
      box-shadow:0 12px 22px rgba(255,59,48,.16);
      margin-bottom:12px;
      position:relative;
      z-index:1;
    }
    .feature-card h3{
      margin:0 0 8px;
      font-size:1.02rem;
      font-weight:900;
      line-height:1.2;
      position:relative;
      z-index:1;
    }
    .feature-card p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      position:relative;
      z-index:1;
    }
    .feature-card .status-pill{
      margin-top:14px;
      position:relative;
      z-index:1;
    }

    .mosaic-grid{
      display:grid;
      grid-template-columns:repeat(12, minmax(0, 1fr));
      gap:12px;
      grid-auto-flow:dense;
    }
    .mosaic-tile{
      min-height:180px;
      border-radius:8px;
      overflow:hidden;
      position:relative;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
        linear-gradient(135deg, rgba(255,59,48,.18), rgba(255,122,24,.05) 50%, rgba(0,208,194,.12));
      box-shadow:0 16px 32px rgba(0,0,0,.22);
      padding:16px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .mosaic-tile::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 30px 30px,
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%);
      opacity:.5;
      pointer-events:none;
    }
    .mosaic-tile .tile-top,
    .mosaic-tile .tile-bottom{
      position:relative;
      z-index:1;
    }
    .mosaic-tile strong{
      display:block;
      margin-top:10px;
      font-size:1.1rem;
      line-height:1.2;
      font-weight:1000;
    }
    .mosaic-tile span{
      color:#dfe5eb;
      font-size:.9rem;
    }
    .mosaic-tile .chip-row{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:12px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 9px;
      border-radius:999px;
      background:rgba(10,12,15,.48);
      border:1px solid rgba(255,255,255,.1);
      color:#fff;
      font-size:.76rem;
      font-weight:800;
    }
    .mosaic-tile.big{
      grid-column:span 5;
      min-height:320px;
    }
    .mosaic-tile.tall{
      grid-column:span 4;
      min-height:320px;
    }
    .mosaic-tile.mid{
      grid-column:span 3;
    }
    .mosaic-tile.wide{
      grid-column:span 6;
      min-height:220px;
    }
    .mosaic-tile.narrow{
      grid-column:span 3;
    }
    .mosaic-tile .poster-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      position:relative;
      z-index:1;
    }
    .poster-dot{
      width:11px;
      height:11px;
      border-radius:50%;
      background:var(--gold);
      box-shadow:0 0 0 5px rgba(255,209,102,.12);
      flex:0 0 auto;
    }

    .cta-band{
      padding:28px 0 18px;
    }
    .cta-panel{
      border-radius:8px;
      border:1px solid rgba(255,255,255,.1);
      background:
        linear-gradient(135deg, rgba(255,59,48,.16), rgba(255,122,24,.06) 48%, rgba(0,208,194,.08)),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .cta-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 36px 36px,
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 50%);
      opacity:.45;
      pointer-events:none;
    }
    .cta-content{
      position:relative;
      padding:26px;
    }
    .cta-grid{
      display:grid;
      grid-template-columns:minmax(0,1.2fr) minmax(300px,.9fr);
      gap:20px;
      align-items:center;
    }
    .cta-title{
      margin:0;
      font-size:clamp(1.45rem, 2.8vw, 2.2rem);
      line-height:1.15;
      font-weight:1000;
    }
    .cta-copy{
      margin:12px 0 0;
      max-width:44rem;
      color:#e4e9ef;
      font-size:.98rem;
    }
    .cta-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:18px;
    }
    .cta-rules{
      display:grid;
      gap:10px;
    }
    .rule-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 13px;
      border-radius:8px;
      background:rgba(8,10,13,.34);
      border:1px solid rgba(255,255,255,.08);
    }
    .rule-row strong{
      font-size:.92rem;
      display:block;
    }
    .rule-row span{
      color:var(--muted);
      font-size:.84rem;
      display:block;
      margin-top:2px;
    }

    .faq-wrap{
      display:grid;
      grid-template-columns:minmax(0,1fr);
      gap:14px;
    }
    .accordion{
      border:none;
      background:transparent;
      margin:0;
    }
    .accordion-item{
      border:1px solid rgba(255,255,255,.08);
      border-radius:8px;
      overflow:hidden;
      background:rgba(255,255,255,.03);
      margin-bottom:10px;
    }
    .accordion-title{
      font-size:1rem;
      font-weight:900;
      color:#fff;
      padding:16px 18px;
      background:transparent;
      border:none;
      line-height:1.3;
      letter-spacing:0;
    }
    .accordion-title:hover,
    .accordion-title:focus-visible{
      background:rgba(255,255,255,.03);
      color:#fff;
    }
    .accordion-content{
      color:#d6dce3;
      padding:0 18px 18px;
      border-top:1px solid rgba(255,255,255,.07);
      background:rgba(0,0,0,.14);
      font-size:.95rem;
    }
    .accordion-content p{
      margin:14px 0 0;
    }
    .faq-note{
      color:var(--muted);
      font-size:.92rem;
      margin-top:8px;
    }

    .news-grid{
      display:grid;
      grid-template-columns:minmax(0,1.25fr) minmax(280px,.9fr);
      gap:18px;
      align-items:start;
    }
    .news-list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .news-item{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      padding:14px 15px;
      border-radius:8px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
    }
    .news-item:hover{
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.12);
    }
    .news-title{
      display:block;
      font-weight:900;
      margin-bottom:6px;
      line-height:1.25;
    }
    .news-meta{
      color:var(--muted);
      font-size:.84rem;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .news-meta .dot{
      width:4px;
      height:4px;
      border-radius:50%;
      background:rgba(255,255,255,.3);
      display:inline-block;
    }
    .news-side{
      display:grid;
      gap:12px;
    }
    .promo-card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:8px;
      padding:16px;
    }
    .promo-card h3{
      margin:0 0 8px;
      font-size:1rem;
      font-weight:900;
    }
    .promo-card p{
      margin:0 0 12px;
      color:var(--muted);
      font-size:.92rem;
    }
    .promo-list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .promo-list li{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 11px;
      border-radius:8px;
      background:rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.08);
      color:#e9eef4;
      font-size:.92rem;
    }

    .trust-band{
      padding:6px 0 30px;
    }
    .trust-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
      margin-bottom:14px;
    }
    .trust-box{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      border-radius:8px;
      padding:16px;
      min-height:124px;
    }
    .trust-num{
      font-size:1.55rem;
      font-weight:1000;
      line-height:1;
      color:#fff;
    }
    .trust-label{
      margin-top:8px;
      color:var(--muted);
      font-size:.9rem;
    }
    .quote-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:14px;
    }
    .quote-card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:8px;
      padding:16px;
      min-height:162px;
    }
    .quote-head{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:10px;
    }
    .quote-avatar{
      width:38px;
      height:38px;
      border-radius:8px;
      background:linear-gradient(135deg, rgba(0,208,194,.86), rgba(255,209,102,.8));
      flex:0 0 auto;
    }
    .quote-name{
      font-weight:900;
      line-height:1.2;
    }
    .quote-role{
      color:var(--muted);
      font-size:.82rem;
    }
    .quote-text{
      color:#dbe2ea;
      font-size:.93rem;
      margin:0;
    }

    .site-footer{
      border-top:1px solid rgba(255,255,255,.08);
      background:rgba(0,0,0,.22);
      padding:22px 0 32px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.9fr);
      gap:20px;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .footer-brand .brand-mark{
      margin-top:2px;
    }
    .footer-text h2{
      margin:0 0 10px;
      font-size:1.02rem;
      font-weight:900;
    }
    .footer-text p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      max-width:34rem;
    }
    .footer-links{
      display:grid;
      gap:8px;
    }
    .footer-links a{
      color:#dce2e9;
      font-weight:700;
    }
    .footer-links a:hover{color:#fff}
    .footer-note{
      color:var(--muted-2);
      font-size:.85rem;
      margin-top:12px;
    }
    .copyright{
      margin-top:18px;
      color:#8f98a3;
      font-size:.84rem;
    }

    .menu-icon::after{
      background:#fff;
      box-shadow:0 7px 0 #fff, 0 14px 0 #fff;
    }

    .hide-desktop{display:none}

    .focus-outline:focus-visible,
    a:focus-visible,
    button:focus-visible,
    summary:focus-visible{
      outline:2px solid rgba(0,208,194,.75);
      outline-offset:2px;
    }

    @media (max-width: 1024px){
      .hero-grid,
      .cta-grid,
      .news-grid,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .feature-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .trust-grid,
      .quote-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .mosaic-tile.big,
      .mosaic-tile.tall,
      .mosaic-tile.wide,
      .mosaic-tile.mid,
      .mosaic-tile.narrow{
        grid-column:span 6;
        min-height:220px;
      }
    }

    @media (max-width: 768px){
      .top-strip-inner{
        align-items:flex-start;
        flex-direction:column;
      }
      .hero-content{
        padding:20px 16px 16px;
      }
      .countdown-strip{
        padding:12px 14px;
      }
      .hero-title{
        max-width:none;
      }
      .feature-grid,
      .trust-grid,
      .quote-grid{
        grid-template-columns:1fr;
      }
      .mosaic-grid{
        grid-template-columns:1fr 1fr;
      }
      .mosaic-tile.big,
      .mosaic-tile.tall,
      .mosaic-tile.wide,
      .mosaic-tile.mid,
      .mosaic-tile.narrow{
        grid-column:span 2;
      }
      .cta-content{
        padding:18px 16px;
      }
      .section-band{
        padding:22px 0;
      }
    }

    @media (max-width: 520px){
      .container-wide{
        width:min(100% - 22px, var(--container));
      }
      .top-strip{
        font-size:.8rem;
      }
      .hero-banner,
      .cta-panel,
      .mosaic-tile,
      .feature-card,
      .trust-box,
      .quote-card,
      .promo-card,
      .news-item,
      .accordion-item{
        border-radius:7px;
      }
      .hero-actions,
      .cta-actions{
        gap:8px;
      }
      .btn,
      .nav-cta{
        width:100%;
      }
      .hero-metrics{
        grid-template-columns:1fr;
      }
      .mosaic-grid{
        grid-template-columns:1fr;
      }
      .mosaic-tile.big,
      .mosaic-tile.tall,
      .mosaic-tile.wide,
      .mosaic-tile.mid,
      .mosaic-tile.narrow{
        grid-column:auto;
      }
      .news-item,
      .status-row,
      .rule-row{
        flex-direction:column;
        align-items:flex-start;
      }
      .nav-menu{
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:6px;
      }
      .nav-menu a{
        width:100%;
        justify-content:space-between;
      }
      .nav-cta{
        justify-content:center;
      }
      .hero-copy,
      .section-desc,
      .cta-copy,
      .footer-text p{
        font-size:.94rem;
      }
    }

/* roulang page: category2 */
:root {
      --bg: #08090d;
      --bg-soft: #10131a;
      --panel: #131722;
      --panel-2: #171c27;
      --line: rgba(255, 255, 255, 0.08);
      --line-strong: rgba(255, 255, 255, 0.14);
      --text: #f3f6fb;
      --muted: #a5afbf;
      --muted-2: #7f899a;
      --accent: #ff4f39;
      --accent-2: #ffb11a;
      --accent-3: #35d28c;
      --accent-4: #64dcff;
      --radius: 8px;
      --shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
      --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.22);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        linear-gradient(180deg, rgba(255, 79, 57, 0.06), transparent 18%),
        linear-gradient(180deg, #090a0f 0%, #0b0c11 36%, #07080b 100%);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.6;
      letter-spacing: 0;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 64px 64px;
      opacity: 0.16;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.05) 72%, transparent);
    }

    ::selection {
      background: rgba(255, 177, 26, 0.25);
      color: #fff;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }

    a:hover {
      color: inherit;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
      color: inherit;
    }

    button {
      cursor: pointer;
    }

    h1,
    h2,
    h3,
    h4,
    p {
      margin-top: 0;
      letter-spacing: 0;
    }

    .container-wide {
      width: min(1280px, calc(100% - 2rem));
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .page-section {
      padding: 2.5rem 0;
    }

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

    .section-head h2 {
      margin: 0;
      font-size: 1.35rem;
      line-height: 1.1;
      font-weight: 900;
      letter-spacing: 0;
    }

    .section-head p {
      margin: 0;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.32rem 0.55rem;
      border: 1px solid rgba(255, 79, 57, 0.22);
      border-radius: 6px;
      background: rgba(255, 79, 57, 0.12);
      color: #ffd8d2;
      font-size: 0.78rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.28rem 0.52rem;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.03);
      color: var(--text);
      font-size: 0.76rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .badge.hot {
      border-color: rgba(255, 79, 57, 0.3);
      background: rgba(255, 79, 57, 0.12);
      color: #ffe2de;
    }

    .badge.warn {
      border-color: rgba(255, 177, 26, 0.3);
      background: rgba(255, 177, 26, 0.12);
      color: #ffe9bc;
    }

    .badge.good {
      border-color: rgba(53, 210, 140, 0.28);
      background: rgba(53, 210, 140, 0.12);
      color: #cffff0;
    }

    .badge.info {
      border-color: rgba(100, 220, 255, 0.28);
      background: rgba(100, 220, 255, 0.12);
      color: #dcfbff;
    }

    .button,
    .nav-cta,
    .cta-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      min-height: 44px;
      padding: 0.78rem 1rem;
      border-radius: 8px;
      border: 1px solid transparent;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1;
      white-space: nowrap;
      box-shadow: none;
    }

    .button.primary,
    .nav-cta {
      background: linear-gradient(135deg, var(--accent) 0%, #ff785b 100%);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.08);
    }

    .button.primary:hover,
    .nav-cta:hover {
      transform: translateY(-1px);
      filter: brightness(1.03);
      color: #fff;
    }

    .button.secondary {
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
      border-color: var(--line);
    }

    .button.secondary:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: var(--line-strong);
      color: var(--text);
    }

    .focus-outline:focus-visible,
    a:focus-visible,
    button:focus-visible,
    select:focus-visible,
    summary:focus-visible {
      outline: 2px solid var(--accent-2);
      outline-offset: 3px;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: none;
      background: rgba(8, 9, 13, 0.96);
      border-bottom: 1px solid var(--line);
    }

    .top-strip {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(255, 255, 255, 0.02);
    }

    .top-strip-inner {
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .top-strip-left,
    .top-strip-right {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      flex-wrap: wrap;
    }

    .top-strip-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.3rem 0.55rem;
      border-radius: 6px;
      border: 1px solid rgba(255, 177, 26, 0.24);
      background: rgba(255, 177, 26, 0.1);
      color: #ffe7b1;
      font-weight: 800;
    }

    .top-strip-note {
      color: var(--muted);
    }

    .top-strip-right a {
      color: var(--accent-2);
      font-weight: 800;
    }

    .title-bar {
      background: transparent;
      padding: 0;
    }

    .title-bar.hide-for-medium {
      display: none;
    }

    .site-nav {
      padding: 0.82rem 0 1rem;
    }

    .site-nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 0.76rem;
      min-width: 0;
      flex: 0 1 auto;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      position: relative;
      flex: 0 0 auto;
      background: linear-gradient(135deg, #ff4f39 0%, #ff7a58 42%, #ffb11a 100%);
      box-shadow: 0 10px 22px rgba(255, 79, 57, 0.2);
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      inset: 9px;
      border: 1px solid rgba(255, 255, 255, 0.48);
      border-radius: 6px;
      opacity: 0.9;
    }

    .brand-text {
      min-width: 0;
    }

    .brand-title {
      display: block;
      font-size: 1rem;
      line-height: 1.15;
      font-weight: 900;
    }

    .brand-sub {
      display: block;
      margin-top: 0.18rem;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.25;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      list-style: none;
      margin: 0;
      padding: 0;
      flex: 1 1 auto;
      justify-content: center;
      min-width: 0;
    }

    .nav-menu li {
      min-width: 0;
    }

    .nav-menu a {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.72rem 0.95rem;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text);
      font-size: 0.94rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .nav-menu a:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: var(--line);
    }

    .nav-menu a.is-active {
      background: linear-gradient(135deg, rgba(255, 79, 57, 0.16), rgba(255, 177, 26, 0.12));
      border-color: rgba(255, 79, 57, 0.34);
      box-shadow: 0 0 0 1px rgba(255, 79, 57, 0.08) inset;
    }

    .nav-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.15rem;
      height: 1.15rem;
      border-radius: 4px;
      background: var(--accent);
      color: #fff;
      font-size: 0.62rem;
      font-weight: 900;
      line-height: 1;
    }

    .nav-cta {
      flex: 0 0 auto;
    }

    .menu-icon {
      position: relative;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
    }

    .menu-icon::before {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      top: 14px;
      height: 2px;
      background: currentColor;
      box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
    }

    .hero {
      padding: 1.1rem 0 2rem;
    }

    .countdown-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.05rem;
      border-radius: 8px;
      border: 1px solid rgba(255, 79, 57, 0.34);
      background: linear-gradient(135deg, rgba(255, 79, 57, 0.18), rgba(255, 177, 26, 0.12));
      box-shadow: var(--shadow-soft);
      margin-bottom: 1rem;
    }

    .countdown-left {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      min-width: 0;
    }

    .countdown-title {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-size: 0.86rem;
      font-weight: 900;
      color: #ffe8e4;
      white-space: nowrap;
    }

    .countdown-sub {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.84rem;
    }

    .countdown-clock {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex: 0 0 auto;
      font-variant-numeric: tabular-nums;
    }

    .clock-box {
      min-width: 68px;
      text-align: center;
      padding: 0.5rem 0.55rem;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.28);
    }

    .clock-box strong {
      display: block;
      font-size: 1.1rem;
      line-height: 1.1;
      font-weight: 900;
    }

    .clock-box span {
      display: block;
      margin-top: 0.15rem;
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
      gap: 1rem;
      align-items: stretch;
    }

    .hero-copy,
    .hero-panel,
    .content-panel,
    .cta-panel,
    .side-panel,
    .entry-row,
    .feature-card,
    .update-card,
    .faq-wrap {
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow-soft);
    }

    .hero-copy {
      padding: 1.35rem;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background:
        linear-gradient(180deg, rgba(255, 79, 57, 0.06), rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #151824 0%, #10131a 100%);
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      align-self: flex-start;
      padding: 0.28rem 0.55rem;
      border-radius: 6px;
      border: 1px solid rgba(255, 79, 57, 0.25);
      background: rgba(255, 79, 57, 0.12);
      color: #ffd9d2;
      font-size: 0.78rem;
      font-weight: 800;
    }

    .hero-copy h1 {
      margin: 0.92rem 0 0.75rem;
      font-size: 3.2rem;
      line-height: 1.02;
      font-weight: 950;
      letter-spacing: 0;
      max-width: 12ch;
    }

    .hero-copy p {
      margin: 0;
      max-width: 60ch;
      color: var(--muted);
      font-size: 1.02rem;
    }

    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 1rem 0 1.05rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
    }

    .hero-note {
      margin-top: 0.95rem;
      color: var(--muted-2);
      font-size: 0.84rem;
    }

    .hero-panel {
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
      background: linear-gradient(180deg, #121722 0%, #0f1218 100%);
    }

    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      font-weight: 900;
    }

    .panel-head small {
      color: var(--muted);
      font-weight: 700;
    }

    .panel-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.3rem 0.5rem;
      border-radius: 6px;
      border: 1px solid rgba(53, 210, 140, 0.25);
      background: rgba(53, 210, 140, 0.11);
      color: #d3ffee;
      font-size: 0.76rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .mosaic-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr 0.9fr;
      grid-template-rows: 170px 126px;
      gap: 0.68rem;
    }

    .mosaic-tile {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(160deg, #171c26 0%, #11141c 100%);
      min-height: 122px;
      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    }

    .mosaic-tile::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(255, 79, 57, 0.26), transparent 44%),
        linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.68)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 35%);
      opacity: 0.95;
    }

    .mosaic-tile::after {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      opacity: 0.9;
    }

    .tile-large {
      grid-row: 1 / span 2;
      min-height: 318px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255, 177, 26, 0.28), transparent 25%),
        linear-gradient(160deg, #2b1110 0%, #11141b 42%, #090a0f 100%);
    }

    .tile-2 {
      background:
        radial-gradient(circle at 75% 25%, rgba(100, 220, 255, 0.24), transparent 28%),
        linear-gradient(160deg, #1c1217 0%, #10131a 100%);
    }

    .tile-3 {
      background:
        radial-gradient(circle at 25% 20%, rgba(53, 210, 140, 0.25), transparent 28%),
        linear-gradient(160deg, #121c19 0%, #0f1218 100%);
    }

    .tile-4 {
      background:
        radial-gradient(circle at 75% 35%, rgba(255, 177, 26, 0.28), transparent 28%),
        linear-gradient(160deg, #22161a 0%, #10131a 100%);
    }

    .tile-5 {
      background:
        radial-gradient(circle at 35% 25%, rgba(100, 220, 255, 0.2), transparent 30%),
        linear-gradient(160deg, #181b28 0%, #0f1118 100%);
    }

    .tile-content {
      position: absolute;
      inset: 0;
      padding: 0.9rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.5rem;
      z-index: 1;
    }

    .tile-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .tile-title {
      margin: 0;
      font-size: 1rem;
      font-weight: 900;
      line-height: 1.1;
    }

    .tile-copy {
      margin: 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: 0.8rem;
      max-width: 22ch;
    }

    .tile-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      color: #dce4f3;
      font-size: 0.78rem;
      font-weight: 700;
    }

    .signal-list {
      display: grid;
      gap: 0.55rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .signal-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.85rem;
      padding: 0.75rem 0.85rem;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.03);
    }

    .signal-row span {
      color: var(--muted);
      font-size: 0.82rem;
    }

    .signal-row strong {
      font-size: 0.92rem;
      font-weight: 900;
    }

    .signal-row strong.good {
      color: #cffff0;
    }

    .signal-row strong.hot {
      color: #ffe2de;
    }

    .signal-row strong.warn {
      color: #ffe8ba;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.85rem;
    }

    .feature-card {
      padding: 1rem;
      min-height: 100%;
      background: linear-gradient(180deg, #141924 0%, #10131a 100%);
    }

    .feature-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
      margin-bottom: 0.7rem;
    }

    .feature-card h3 {
      margin: 0 0 0.45rem;
      font-size: 1.02rem;
      font-weight: 900;
      line-height: 1.1;
    }

    .feature-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.55;
    }

    .update-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.85rem;
    }

    .update-card {
      padding: 1rem;
      background: linear-gradient(180deg, #141924 0%, #10131a 100%);
      min-height: 100%;
    }

    .update-card h3 {
      margin: 0 0 0.45rem;
      font-size: 1rem;
      font-weight: 900;
    }

    .update-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.55;
    }

    .update-foot {
      margin-top: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
      color: var(--muted-2);
      font-size: 0.8rem;
      border-top: 1px solid var(--line);
      padding-top: 0.7rem;
    }

    .layout-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
      gap: 1rem;
      align-items: start;
    }

    .entry-list {
      display: grid;
      gap: 0.75rem;
    }

    .entry-row {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr) auto;
      gap: 0.9rem;
      align-items: center;
      padding: 0.95rem;
      background: linear-gradient(180deg, #141924 0%, #10131a 100%);
    }

    .entry-thumb {
      width: 96px;
      aspect-ratio: 4 / 5;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        radial-gradient(circle at 25% 20%, rgba(255, 177, 26, 0.2), transparent 30%),
        linear-gradient(160deg, #2a1110 0%, #141822 42%, #090a0f 100%);
      position: relative;
      overflow: hidden;
    }

    .entry-thumb::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.58)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%);
    }

    .entry-body h3 {
      margin: 0 0 0.34rem;
      font-size: 1.05rem;
      line-height: 1.12;
      font-weight: 900;
    }

    .entry-body p {
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.55;
      max-width: 52ch;
    }

    .entry-meta {
      margin-top: 0.65rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      align-items: center;
    }

    .entry-action {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.45rem;
      flex-wrap: wrap;
    }

    .entry-action .button {
      min-width: 96px;
    }

    .side-panel {
      padding: 1rem;
      background: linear-gradient(180deg, #141924 0%, #10131a 100%);
      position: sticky;
      top: 8.6rem;
    }

    .side-panel h3 {
      margin: 0 0 0.45rem;
      font-size: 1.04rem;
      line-height: 1.15;
      font-weight: 900;
    }

    .side-panel p {
      margin: 0;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.55;
    }

    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin: 0.85rem 0 1rem;
    }

    .filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.42rem 0.65rem;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.03);
      color: var(--text);
      font-size: 0.8rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .filter-chip:hover {
      border-color: rgba(255, 177, 26, 0.22);
      background: rgba(255, 177, 26, 0.08);
    }

    .filter-chip.is-active {
      border-color: rgba(255, 79, 57, 0.32);
      background: rgba(255, 79, 57, 0.13);
      color: #ffe8e4;
    }

    .select-wrap {
      margin-top: 0.75rem;
    }

    .select-wrap label {
      display: block;
      margin-bottom: 0.35rem;
      color: var(--muted);
      font-size: 0.84rem;
      font-weight: 700;
    }

    .select-wrap select {
      width: 100%;
      min-height: 44px;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: var(--bg-soft);
      color: var(--text);
      padding: 0.55rem 0.8rem;
      outline: none;
      box-shadow: none;
    }

    .side-list {
      list-style: none;
      margin: 1rem 0 0;
      padding: 0;
      display: grid;
      gap: 0.55rem;
    }

    .side-list li {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.6rem 0;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.86rem;
    }

    .side-list li strong {
      color: var(--text);
      font-weight: 900;
    }

    .cta-panel {
      padding: 1.2rem;
      background:
        linear-gradient(135deg, rgba(255, 79, 57, 0.15), rgba(255, 177, 26, 0.12)),
        linear-gradient(180deg, #141924 0%, #10131a 100%);
      border-color: rgba(255, 79, 57, 0.3);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .cta-panel h2 {
      margin: 0.3rem 0 0.45rem;
      font-size: 1.7rem;
      line-height: 1.08;
      font-weight: 950;
    }

    .cta-panel p {
      margin: 0;
      color: var(--muted);
      max-width: 62ch;
      font-size: 0.95rem;
      line-height: 1.6;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.7rem;
      flex: 0 0 auto;
    }

    .cta-mini {
      margin-top: 0.85rem;
      color: var(--muted-2);
      font-size: 0.82rem;
    }

    .faq-wrap {
      padding: 1rem;
      background: linear-gradient(180deg, #141924 0%, #10131a 100%);
    }

    .faq-list {
      display: grid;
      gap: 0.7rem;
    }

    details.faq-item {
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.03);
      overflow: hidden;
    }

    details.faq-item[open] {
      border-color: rgba(255, 177, 26, 0.24);
      background: rgba(255, 177, 26, 0.06);
    }

    details.faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 0.9rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.85rem;
      font-weight: 900;
      color: var(--text);
      outline: none;
    }

    details.faq-item summary::-webkit-details-marker {
      display: none;
    }

    details.faq-item summary::after {
      content: "+";
      width: 1.35rem;
      height: 1.35rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      border: 1px solid var(--line);
      color: var(--muted);
      flex: 0 0 auto;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    details.faq-item[open] summary::after {
      content: "−";
      color: var(--text);
      background: rgba(255, 255, 255, 0.04);
    }

    .faq-answer {
      padding: 0 1rem 1rem;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.7;
    }

    .site-footer {
      padding: 2rem 0 1.5rem;
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.01);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
      gap: 1rem;
      align-items: start;
    }

    .footer-brand {
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
    }

    .footer-text h2 {
      margin: 0 0 0.45rem;
      font-size: 1.1rem;
      line-height: 1.15;
      font-weight: 900;
    }

    .footer-text p {
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.65;
      max-width: 54ch;
    }

    .footer-note {
      margin-top: 0.7rem;
      color: #8d97aa;
      font-size: 0.82rem;
    }

    .footer-links {
      display: grid;
      gap: 0.55rem;
      align-content: start;
    }

    .footer-links a {
      color: var(--muted);
      font-size: 0.9rem;
    }

    .footer-links a:hover {
      color: #fff;
    }

    .copyright {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--line);
      color: #8b94a7;
      font-size: 0.82rem;
    }

    @media (max-width: 1024px) {
      .hero-copy h1 {
        font-size: 2.6rem;
      }

      .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .update-grid {
        grid-template-columns: 1fr;
      }

      .layout-grid {
        grid-template-columns: 1fr;
      }

      .side-panel {
        position: static;
      }
    }

    @media (max-width: 880px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }

      .mosaic-grid {
        grid-template-columns: 1.1fr 0.9fr;
        grid-template-rows: 180px 136px 136px;
      }

      .tile-large {
        grid-row: 1 / span 2;
      }

      .feature-grid {
        grid-template-columns: 1fr 1fr;
      }

      .cta-panel {
        align-items: flex-start;
        flex-direction: column;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

      .footer-brand {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 768px) {
      .top-strip-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 0.55rem 0;
      }

      .site-nav {
        padding-bottom: 0.75rem;
      }

      .site-nav-inner {
        flex-wrap: wrap;
      }

      .nav-menu {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .nav-cta {
        margin-left: auto;
      }

      .hero-copy {
        padding: 1.1rem;
      }

      .hero-copy h1 {
        font-size: 2.25rem;
        max-width: 14ch;
      }

      .countdown-bar {
        align-items: flex-start;
        flex-direction: column;
      }

      .countdown-clock {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .feature-grid {
        grid-template-columns: 1fr;
      }

      .mosaic-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 160px 130px 130px 130px;
      }

      .tile-large {
        grid-row: 1 / span 2;
        grid-column: 1 / span 2;
      }

      .entry-row {
        grid-template-columns: 84px minmax(0, 1fr);
      }

      .entry-action {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 0;
      }

      .cta-panel h2 {
        font-size: 1.45rem;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .title-bar.hide-for-medium {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.7rem 0 0.9rem;
      }

      .title-bar-title {
        min-width: 0;
        font-size: 0.95rem;
        font-weight: 900;
      }

      .site-nav {
        padding-top: 0;
      }

      #site-nav {
        display: block;
      }

      #site-nav .site-nav-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding-bottom: 0.85rem;
      }

      .nav-menu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
      }

      .nav-menu a {
        width: 100%;
        justify-content: flex-start;
      }

      .nav-cta.show-for-medium {
        display: none !important;
      }

      .hero {
        padding-top: 0.9rem;
      }

      .hero-copy h1 {
        font-size: 2rem;
      }

      .hero-actions,
      .cta-actions {
        width: 100%;
      }

      .button,
      .nav-cta {
        width: 100%;
        justify-content: center;
      }

      .mosaic-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 120px);
      }

      .tile-large {
        grid-column: auto;
        grid-row: auto;
        min-height: 120px;
      }

      .section-head {
        flex-direction: column;
        align-items: flex-start;
      }

      .countdown-clock {
        gap: 0.4rem;
      }

      .clock-box {
        min-width: 64px;
      }

      .entry-row {
        grid-template-columns: 72px minmax(0, 1fr);
      }

      .entry-thumb {
        width: 72px;
      }

      .entry-body p {
        max-width: 100%;
      }
    }

    @media (max-width: 520px) {
      .container-wide {
        width: min(1280px, calc(100% - 1rem));
      }

      .hero-copy,
      .hero-panel,
      .cta-panel,
      .faq-wrap,
      .side-panel,
      .feature-card,
      .update-card,
      .entry-row {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
      }

      .hero-copy {
        padding-top: 1rem;
        padding-bottom: 1rem;
      }

      .hero-copy h1 {
        font-size: 1.8rem;
      }

      .clock-box {
        min-width: 58px;
        padding: 0.48rem 0.45rem;
      }

      .clock-box strong {
        font-size: 1rem;
      }
    }

/* roulang page: category1 */
:root{
      --bg:#0b0d10;
      --bg-soft:#10141a;
      --panel:#131821;
      --panel-2:#171d26;
      --line:#273140;
      --line-soft:#1b232f;
      --text:#f5f7fa;
      --muted:#9ca6b4;
      --accent:#ff4d2d;
      --accent-2:#ffb020;
      --accent-3:#36d6b1;
      --accent-4:#7c5cff;
      --shadow:0 16px 34px rgba(0,0,0,.35);
      --shadow-soft:0 8px 20px rgba(0,0,0,.24);
      --radius:8px;
      --radius-sm:6px;
      --space:1rem;
    }

    *{
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(255,77,45,.05), rgba(255,77,45,0) 20%),
        linear-gradient(135deg, rgba(54,214,177,.04), rgba(54,214,177,0) 30%),
        linear-gradient(180deg, #090b0f 0%, #0b0d10 38%, #0a0c10 100%);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
      line-height:1.65;
      overflow-x:hidden;
      letter-spacing:0;
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(135deg, rgba(255,77,45,.10), rgba(255,77,45,0) 28%),
        linear-gradient(315deg, rgba(255,176,32,.06), rgba(255,176,32,0) 26%),
        repeating-linear-gradient(180deg, rgba(255,255,255,.015) 0 1px, transparent 1px 118px);
      opacity:.7;
      z-index:-1;
    }

    ::selection{
      background:rgba(255,77,45,.28);
      color:#fff;
    }

    a{
      color:inherit;
      text-decoration:none;
      transition:color .2s ease, opacity .2s ease, transform .2s ease, border-color .2s ease, background-color .2s ease;
    }

    img{
      max-width:100%;
      display:block;
    }

    button,
    input,
    select,
    textarea{
      font:inherit;
    }

    button{
      cursor:pointer;
    }

    .focus-outline:focus,
    .button:focus,
    .chip:focus,
    .menu-icon:focus,
    input:focus,
    select:focus,
    summary:focus{
      outline:2px solid rgba(255,176,32,.85);
      outline-offset:2px;
    }

    .container-wide{
      width:min(1240px, calc(100% - 2rem));
      margin:0 auto;
    }

    .site-header{
      position:relative;
      z-index:30;
      border-bottom:1px solid var(--line-soft);
      background:rgba(9,11,15,.92);
      backdrop-filter: blur(8px);
    }

    .top-strip{
      border-bottom:1px solid rgba(255,255,255,.05);
      background:rgba(15,18,24,.92);
      font-size:.86rem;
    }

    .top-strip-inner{
      min-height:38px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.4rem 0;
    }

    .top-strip-left,
    .top-strip-right{
      display:flex;
      align-items:center;
      gap:.65rem;
      flex-wrap:wrap;
    }

    .top-strip-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.18rem .55rem;
      border-radius:4px;
      border:1px solid rgba(255,77,45,.38);
      background:rgba(255,77,45,.12);
      color:#ffb8a9;
      font-weight:700;
      letter-spacing:0;
      white-space:nowrap;
    }

    .top-strip-note{
      color:var(--muted);
      white-space:nowrap;
    }

    .top-strip-right a{
      color:#ffd2c9;
      font-weight:700;
      border-bottom:1px solid rgba(255,210,201,.35);
      white-space:nowrap;
    }

    .top-strip-right a:hover{
      color:#fff;
      border-color:#fff;
    }

    .title-bar{
      padding:.9rem 0;
      background:transparent;
    }

    .title-bar.hide-for-medium{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }

    .title-bar-title{
      font-size:1rem;
      font-weight:800;
      color:var(--text);
      letter-spacing:0;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .menu-icon{
      position:relative;
      width:2.4rem;
      height:2.4rem;
      margin:0;
      border:1px solid var(--line);
      border-radius:6px;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    }

    .menu-icon::after{
      box-shadow:0 8px 0 #f5f7fa, 0 -8px 0 #f5f7fa;
      background:#f5f7fa;
      left:.55rem;
      top:50%;
      width:1.2rem;
      height:2px;
      margin-top:-1px;
    }

    .nav-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      min-height:2.4rem;
      padding:.55rem .95rem;
      border-radius:6px;
      border:1px solid rgba(255,77,45,.55);
      background:linear-gradient(180deg, rgba(255,77,45,.22), rgba(255,77,45,.12));
      color:#ffe6df;
      font-weight:800;
      white-space:nowrap;
      box-shadow:0 8px 18px rgba(255,77,45,.10);
    }

    .nav-cta:hover{
      color:#fff;
      border-color:rgba(255,77,45,.85);
      background:linear-gradient(180deg, rgba(255,77,45,.35), rgba(255,77,45,.2));
      transform:translateY(-1px);
    }

    .site-nav{
      display:none;
    }

    .site-nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.85rem 0 1rem;
      border-top:1px solid rgba(255,255,255,.05);
    }

    .brand{
      display:inline-flex;
      align-items:center;
      gap:.8rem;
      min-width:0;
      flex:0 0 auto;
    }

    .brand-mark{
      position:relative;
      width:2.45rem;
      height:2.45rem;
      border-radius:6px;
      background:
        linear-gradient(135deg, rgba(255,77,45,.96), rgba(255,176,32,.95));
      box-shadow:0 10px 20px rgba(255,77,45,.22);
      flex:0 0 auto;
    }

    .brand-mark::before{
      content:"";
      position:absolute;
      inset:.45rem;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.38);
    }

    .brand-mark::after{
      content:"";
      position:absolute;
      left:.45rem;
      right:.45rem;
      top:50%;
      height:2px;
      margin-top:-1px;
      background:rgba(255,255,255,.7);
      box-shadow:0 -6px 0 rgba(255,255,255,.35), 0 6px 0 rgba(255,255,255,.35);
    }

    .brand-text{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:.08rem;
    }

    .brand-title{
      font-size:1.05rem;
      font-weight:900;
      line-height:1.1;
      color:var(--text);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .brand-sub{
      font-size:.9rem;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .nav-menu{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      list-style:none;
      margin:0;
      padding:0;
      flex:1 1 auto;
      min-width:0;
      flex-wrap:wrap;
    }

    .nav-menu li{
      margin:0;
    }

    .nav-menu a{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      min-height:2.6rem;
      padding:.5rem .85rem;
      border-radius:6px;
      border:1px solid transparent;
      color:#d6dbe3;
      background:transparent;
      font-weight:700;
      white-space:nowrap;
    }

    .nav-menu a:hover{
      color:#fff;
      border-color:rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
    }

    .nav-menu a.is-active{
      color:#fff;
      border-color:rgba(255,77,45,.42);
      background:rgba(255,77,45,.12);
      box-shadow:0 8px 16px rgba(255,77,45,.08);
    }

    .nav-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:1.1rem;
      height:1.1rem;
      padding:0 .22rem;
      border-radius:3px;
      background:rgba(255,176,32,.14);
      border:1px solid rgba(255,176,32,.38);
      color:#ffd88c;
      font-size:.72rem;
      line-height:1;
      font-weight:800;
    }

    main{
      display:block;
    }

    .section-band{
      position:relative;
      padding:1.8rem 0;
      border-top:1px solid rgba(255,255,255,.04);
    }

    .section-band.alt{
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    }

    .section-band.emphasis{
      background:
        linear-gradient(180deg, rgba(255,77,45,.06), rgba(255,77,45,0) 58%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    }

    .countdown-strip{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.9rem 1rem;
      margin:0 0 1rem;
      border-radius:8px;
      border:1px solid rgba(255,77,45,.35);
      background:
        linear-gradient(90deg, rgba(255,77,45,.18), rgba(255,77,45,.08) 42%, rgba(19,24,33,.96) 100%);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }

    .countdown-label{
      display:flex;
      align-items:center;
      gap:.55rem;
      color:#ffe3dc;
      font-weight:800;
      white-space:nowrap;
    }

    .countdown-clock{
      display:flex;
      align-items:center;
      gap:.55rem;
      flex-wrap:wrap;
      color:#fff;
      font-weight:900;
    }

    .countdown-clock span{
      display:inline-flex;
      align-items:baseline;
      gap:.18rem;
      padding:.2rem .55rem;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(9,11,15,.42);
      min-width:4.2rem;
      justify-content:center;
    }

    .countdown-clock strong{
      font-size:1.05rem;
      line-height:1;
    }

    .countdown-clock em{
      font-style:normal;
      color:var(--muted);
      font-size:.78rem;
    }

    .hero-grid{
      align-items:center;
    }

    .hero-copy{
      padding:1rem 0;
    }

    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      margin-bottom:.85rem;
      padding:.25rem .6rem;
      border-radius:4px;
      background:rgba(255,176,32,.12);
      border:1px solid rgba(255,176,32,.3);
      color:#ffd88c;
      font-size:.88rem;
      font-weight:800;
      letter-spacing:0;
    }

    .hero-title{
      margin:0;
      font-size:3.1rem;
      line-height:1.06;
      letter-spacing:0;
      font-weight:900;
      color:#fff;
      text-wrap:balance;
      max-width:11.5ch;
    }

    .hero-lead{
      margin:1rem 0 0;
      max-width:36rem;
      color:#c3cad4;
      font-size:1.02rem;
      line-height:1.8;
    }

    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin:1rem 0 1.1rem;
    }

    .mini-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      min-height:1.8rem;
      padding:.22rem .55rem;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#dce1e8;
      font-size:.84rem;
      font-weight:700;
      white-space:nowrap;
    }

    .mini-badge.hot{
      border-color:rgba(255,77,45,.35);
      background:rgba(255,77,45,.12);
      color:#ffd3ca;
    }

    .mini-badge.new{
      border-color:rgba(54,214,177,.28);
      background:rgba(54,214,177,.12);
      color:#bbf7e9;
    }

    .mini-badge.warn{
      border-color:rgba(255,176,32,.32);
      background:rgba(255,176,32,.12);
      color:#ffe0a3;
    }

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin:1rem 0 0;
    }

    .button{
      margin:0;
      border-radius:6px;
      border:1px solid transparent;
      font-weight:800;
      letter-spacing:0;
      transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
    }

    .button.primary,
    .button.button-primary,
    .button.success,
    .button.alert{
      background:linear-gradient(180deg, var(--accent), #dd3518);
      color:#fff;
      box-shadow:0 10px 20px rgba(255,77,45,.2);
    }

    .button.primary:hover,
    .button.button-primary:hover,
    .button.success:hover,
    .button.alert:hover{
      transform:translateY(-1px);
      background:linear-gradient(180deg, #ff6142, #e93d1f);
      color:#fff;
    }

    .button.secondary,
    .button.button-secondary,
    .button.ghost{
      background:rgba(255,255,255,.02);
      color:#e7ebf0;
      border-color:rgba(255,255,255,.1);
    }

    .button.secondary:hover,
    .button.button-secondary:hover,
    .button.ghost:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.05);
      color:#fff;
      border-color:rgba(255,255,255,.18);
    }

    .button.small{
      padding:.72rem .95rem;
      min-height:2.5rem;
      line-height:1;
    }

    .entry-form{
      margin-top:1.25rem;
      padding:1rem;
      border-radius:8px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.02);
      box-shadow:var(--shadow-soft);
    }

    .entry-form label{
      display:block;
      margin:0 0 .55rem;
      color:#e9edf2;
      font-size:.92rem;
      font-weight:700;
    }

    .input-row{
      display:flex;
      gap:.65rem;
      align-items:stretch;
    }

    .entry-form input,
    .sort-wrap select{
      width:100%;
      min-height:2.8rem;
      padding:.65rem .85rem;
      border-radius:6px;
      border:1px solid var(--line);
      background:var(--panel);
      color:var(--text);
      box-shadow:none;
      margin:0;
    }

    .entry-form input::placeholder{
      color:#7f8997;
    }

    .entry-form .button{
      min-width:8.5rem;
      padding-left:1rem;
      padding-right:1rem;
    }

    .form-note{
      margin:.6rem 0 0;
      color:var(--muted);
      font-size:.86rem;
    }

    .hero-panel{
      padding:1rem;
      border-radius:8px;
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        linear-gradient(135deg, rgba(255,77,45,.08), rgba(19,24,33,.96) 58%);
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }

    .hero-panel::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        linear-gradient(120deg, transparent 0 30%, rgba(255,255,255,.04) 31% 33%, transparent 34% 100%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
      pointer-events:none;
    }

    .panel-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin:0 0 .85rem;
      font-size:1rem;
      font-weight:800;
      color:#fff;
    }

    .status-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:.65rem;
    }

    .status-card{
      min-height:5.6rem;
      padding:.8rem .85rem;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(9,11,15,.38);
    }

    .status-label{
      display:block;
      color:var(--muted);
      font-size:.8rem;
      margin-bottom:.35rem;
    }

    .status-value{
      display:block;
      color:#fff;
      font-size:1.1rem;
      line-height:1.25;
      font-weight:900;
      letter-spacing:0;
    }

    .status-list{
      display:grid;
      gap:.6rem;
      margin-top:.85rem;
    }

    .status-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      padding:.68rem .75rem;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.02);
    }

    .status-row .left{
      display:flex;
      align-items:center;
      gap:.45rem;
      min-width:0;
      color:#e3e8ef;
      font-weight:700;
    }

    .status-dot{
      width:.55rem;
      height:.55rem;
      border-radius:50%;
      background:var(--accent-2);
      box-shadow:0 0 0 4px rgba(255,176,32,.12);
      flex:0 0 auto;
    }

    .status-row .right{
      color:#ffd9d1;
      font-weight:800;
      white-space:nowrap;
    }

    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin:0 0 1rem;
    }

    .section-title{
      margin:0;
      font-size:1.55rem;
      line-height:1.15;
      font-weight:900;
      color:#fff;
      letter-spacing:0;
    }

    .section-desc{
      margin:.3rem 0 0;
      color:var(--muted);
      max-width:48rem;
      font-size:.96rem;
      line-height:1.75;
    }

    .feature-grid{
      display:grid;
      grid-template-columns:repeat(5, minmax(0, 1fr));
      gap:.75rem;
    }

    .feature-card{
      position:relative;
      padding:1rem;
      border-radius:8px;
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        rgba(19,24,33,.98);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      min-height:10rem;
    }

    .feature-card::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:2px;
      background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
      opacity:.8;
    }

    .feature-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      margin-bottom:.8rem;
      padding:.2rem .5rem;
      border-radius:4px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      color:#dce2ea;
      font-size:.78rem;
      font-weight:800;
    }

    .feature-title{
      margin:0 0 .5rem;
      font-size:1.02rem;
      line-height:1.35;
      font-weight:900;
      color:#fff;
    }

    .feature-text{
      margin:0;
      color:#b8c0cb;
      font-size:.92rem;
      line-height:1.7;
    }

    .feature-foot{
      margin-top:.75rem;
      color:#ffd9d1;
      font-size:.84rem;
      font-weight:700;
    }

    .filter-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      margin:0 0 .85rem;
      padding:.85rem 1rem;
      border-radius:8px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.02);
    }

    .chip-group{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:2.3rem;
      padding:.38rem .72rem;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      color:#d9dee6;
      font-size:.88rem;
      font-weight:700;
      letter-spacing:0;
    }

    .chip:hover{
      color:#fff;
      border-color:rgba(255,255,255,.18);
      background:rgba(255,255,255,.05);
    }

    .chip.is-active{
      color:#fff;
      border-color:rgba(255,77,45,.42);
      background:rgba(255,77,45,.12);
    }

    .sort-wrap{
      display:flex;
      align-items:center;
      gap:.55rem;
      min-width:14rem;
    }

    .sort-wrap label{
      flex:0 0 auto;
      color:var(--muted);
      font-size:.88rem;
      white-space:nowrap;
    }

    .status-row-wrap{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin:0 0 1rem;
    }

    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.28rem .56rem;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      color:#dfe4eb;
      font-size:.82rem;
      font-weight:700;
      white-space:nowrap;
    }

    .status-pill.good{
      border-color:rgba(54,214,177,.3);
      background:rgba(54,214,177,.12);
      color:#bff7ea;
    }

    .status-pill.hot{
      border-color:rgba(255,77,45,.3);
      background:rgba(255,77,45,.12);
      color:#ffd2c9;
    }

    .status-pill.warn{
      border-color:rgba(255,176,32,.3);
      background:rgba(255,176,32,.12);
      color:#ffe1a8;
    }

    .content-grid{
      display:grid;
      grid-template-columns:minmax(0, 1.5fr) minmax(290px, .7fr);
      gap:1rem;
      align-items:start;
    }

    .entry-list{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:.85rem;
    }

    .entry-card{
      display:grid;
      grid-template-columns:98px minmax(0, 1fr);
      gap:.85rem;
      padding:.9rem;
      border-radius:8px;
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        rgba(19,24,33,.98);
      box-shadow:var(--shadow-soft);
      min-width:0;
    }

    .entry-thumb{
      position:relative;
      min-height:100%;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      padding:.65rem .6rem;
      background:
        linear-gradient(135deg, rgba(255,77,45,.28), rgba(255,176,32,.12)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    }

    .entry-thumb::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 2px, transparent 2px 12px),
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 42%);
      opacity:.28;
    }

    .entry-thumb.teal{
      background:
        linear-gradient(135deg, rgba(54,214,177,.32), rgba(255,255,255,.04)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    }

    .entry-thumb.amber{
      background:
        linear-gradient(135deg, rgba(255,176,32,.38), rgba(255,255,255,.04)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    }

    .entry-thumb.violet{
      background:
        linear-gradient(135deg, rgba(124,92,255,.35), rgba(255,255,255,.04)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    }

    .entry-thumb .entry-index{
      position:relative;
      z-index:1;
      font-size:1.9rem;
      line-height:1;
      font-weight:900;
      color:#fff;
      text-shadow:0 4px 16px rgba(0,0,0,.3);
    }

    .entry-thumb .entry-state{
      position:relative;
      z-index:1;
      padding:.18rem .38rem;
      border-radius:4px;
      background:rgba(9,11,15,.38);
      border:1px solid rgba(255,255,255,.12);
      font-size:.72rem;
      font-weight:800;
      color:#fff;
      white-space:nowrap;
    }

    .entry-body{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:.55rem;
    }

    .entry-topline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.5rem;
      flex-wrap:wrap;
    }

    .entry-time{
      color:var(--muted);
      font-size:.82rem;
      white-space:nowrap;
    }

    .entry-title{
      margin:0;
      font-size:1.06rem;
      line-height:1.35;
      font-weight:900;
      color:#fff;
      letter-spacing:0;
    }

    .entry-desc{
      margin:0;
      color:#b9c1cc;
      font-size:.92rem;
      line-height:1.7;
    }

    .entry-tags{
      display:flex;
      gap:.4rem;
      flex-wrap:wrap;
    }

    .entry-tags span{
      display:inline-flex;
      align-items:center;
      min-height:1.65rem;
      padding:.16rem .46rem;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.02);
      color:#dfe4eb;
      font-size:.76rem;
      font-weight:700;
      white-space:nowrap;
    }

    .entry-actions{
      margin-top:auto;
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:.5rem;
    }

    .entry-actions .button{
      min-width:5.4rem;
    }

    .summary-panel{
      position:sticky;
      top:1rem;
      padding:1rem;
      border-radius:8px;
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        rgba(19,24,33,.98);
      box-shadow:var(--shadow-soft);
    }

    .summary-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin-bottom:.85rem;
    }

    .summary-title{
      margin:0;
      font-size:1rem;
      line-height:1.25;
      font-weight:900;
      color:#fff;
    }

    .summary-note{
      color:var(--muted);
      font-size:.84rem;
    }

    .summary-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:.65rem;
    }

    .summary-list li{
      display:flex;
      align-items:flex-start;
      gap:.6rem;
      padding:.72rem .75rem;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.02);
    }

    .summary-list .num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:1.45rem;
      height:1.45rem;
      border-radius:4px;
      background:rgba(255,77,45,.14);
      border:1px solid rgba(255,77,45,.35);
      color:#ffd3ca;
      font-size:.82rem;
      font-weight:900;
      flex:0 0 auto;
    }

    .summary-list .text{
      color:#dce1e8;
      font-size:.9rem;
      line-height:1.6;
    }

    .summary-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:1rem;
    }

    .spotlight-wall{
      display:grid;
      grid-template-columns:repeat(12, minmax(0, 1fr));
      gap:.8rem;
    }

    .wall-tile{
      position:relative;
      min-height:10rem;
      padding:1rem;
      border-radius:8px;
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        rgba(19,24,33,.98);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      display:flex;
      align-items:flex-end;
    }

    .wall-tile::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.8;
      background:
        linear-gradient(135deg, rgba(255,77,45,.18), transparent 55%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 15px);
    }

    .wall-tile.teal::before{
      background:
        linear-gradient(135deg, rgba(54,214,177,.2), transparent 55%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 15px);
    }

    .wall-tile.amber::before{
      background:
        linear-gradient(135deg, rgba(255,176,32,.22), transparent 55%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 15px);
    }

    .wall-tile.violet::before{
      background:
        linear-gradient(135deg, rgba(124,92,255,.2), transparent 55%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 15px);
    }

    .wall-tile.red::before{
      background:
        linear-gradient(135deg, rgba(255,77,45,.24), transparent 55%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 15px);
    }

    .wall-inner{
      position:relative;
      z-index:1;
      max-width:24rem;
    }

    .wall-tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      margin-bottom:.5rem;
      padding:.2rem .5rem;
      border-radius:4px;
      background:rgba(9,11,15,.34);
      border:1px solid rgba(255,255,255,.1);
      color:#fff;
      font-size:.76rem;
      font-weight:800;
    }

    .wall-title{
      margin:0;
      font-size:1.35rem;
      line-height:1.2;
      font-weight:900;
      color:#fff;
      letter-spacing:0;
    }

    .wall-text{
      margin:.45rem 0 0;
      color:#d9dee6;
      font-size:.9rem;
      line-height:1.65;
      max-width:28rem;
    }

    .wall-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-top:.7rem;
    }

    .wall-meta span{
      display:inline-flex;
      align-items:center;
      min-height:1.6rem;
      padding:.15rem .46rem;
      border-radius:4px;
      background:rgba(9,11,15,.36);
      border:1px solid rgba(255,255,255,.1);
      color:#fff;
      font-size:.76rem;
      font-weight:700;
    }

    .tile-large{
      grid-column:span 6;
      min-height:18rem;
    }

    .tile-tall{
      grid-column:span 3;
      min-height:18rem;
    }

    .tile-wide{
      grid-column:span 4;
      min-height:10.5rem;
    }

    .cta-panel{
      position:relative;
      padding:1.3rem;
      border-radius:8px;
      border:1px solid rgba(255,77,45,.35);
      background:
        linear-gradient(135deg, rgba(255,77,45,.2), rgba(255,176,32,.07) 38%, rgba(19,24,33,.98) 78%),
        rgba(19,24,33,.98);
      box-shadow:0 18px 40px rgba(0,0,0,.35);
      overflow:hidden;
    }

    .cta-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(255,255,255,.05), transparent 30%),
        linear-gradient(90deg, rgba(255,255,255,.03), transparent 14%);
      pointer-events:none;
    }

    .cta-panel-inner{
      position:relative;
      z-index:1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }

    .cta-copy{
      max-width:44rem;
    }

    .cta-kicker{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      margin-bottom:.55rem;
      padding:.2rem .5rem;
      border-radius:4px;
      background:rgba(255,77,45,.16);
      border:1px solid rgba(255,77,45,.35);
      color:#ffd3ca;
      font-size:.8rem;
      font-weight:800;
    }

    .cta-title{
      margin:0;
      font-size:1.7rem;
      line-height:1.18;
      font-weight:900;
      color:#fff;
      letter-spacing:0;
    }

    .cta-desc{
      margin:.55rem 0 0;
      color:#d4d9e1;
      font-size:.96rem;
      line-height:1.75;
    }

    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      align-items:center;
      justify-content:flex-end;
    }

    .cta-actions .button{
      min-width:7rem;
    }

    .faq-list{
      display:grid;
      gap:.75rem;
    }

    .faq-item{
      border-radius:8px;
      border:1px solid var(--line);
      background:rgba(19,24,33,.98);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }

    .faq-item summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem;
      color:#fff;
      font-weight:800;
      font-size:1rem;
      line-height:1.45;
    }

    .faq-item summary::-webkit-details-marker{
      display:none;
    }

    .faq-item summary::after{
      content:"+";
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:1.4rem;
      height:1.4rem;
      border-radius:4px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#fff;
      font-weight:900;
      flex:0 0 auto;
    }

    .faq-item[open] summary{
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .faq-item[open] summary::after{
      content:"–";
    }

    .faq-answer{
      padding:0 1rem 1rem;
      color:#c4cbd4;
      font-size:.94rem;
      line-height:1.8;
    }

    .site-footer{
      border-top:1px solid var(--line-soft);
      background:#090b0f;
      padding:1.6rem 0 1.2rem;
    }

    .footer-grid{
      display:grid;
      grid-template-columns:1.25fr .8fr .8fr;
      gap:1rem;
      align-items:start;
    }

    .footer-brand{
      display:flex;
      align-items:flex-start;
      gap:.8rem;
    }

    .footer-text h2{
      margin:0 0 .35rem;
      font-size:1.05rem;
      line-height:1.3;
      font-weight:900;
      color:#fff;
      letter-spacing:0;
    }

    .footer-text p{
      margin:0;
      color:#b7bec8;
      font-size:.92rem;
      line-height:1.75;
      max-width:34rem;
    }

    .footer-note{
      margin-top:.7rem;
      color:#8f98a7;
      font-size:.85rem;
    }

    .footer-links{
      display:flex;
      flex-direction:column;
      gap:.55rem;
    }

    .footer-links a{
      color:#d7dce3;
      font-weight:700;
      line-height:1.5;
    }

    .footer-links a:hover{
      color:#fff;
    }

    .copyright{
      margin-top:1rem;
      padding-top:1rem;
      border-top:1px solid rgba(255,255,255,.06);
      color:#7d8794;
      font-size:.84rem;
    }

    @media screen and (max-width: 74.9375em){
      .feature-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
      }

      .content-grid{
        grid-template-columns:1fr;
      }

      .summary-panel{
        position:static;
      }

      .tile-large{
        grid-column:span 12;
      }

      .tile-tall{
        grid-column:span 6;
      }

      .tile-wide{
        grid-column:span 6;
      }
    }

    @media screen and (max-width: 63.9375em){
      .hero-title{
        font-size:2.55rem;
      }

      .section-title{
        font-size:1.35rem;
      }

      .feature-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }

      .entry-list{
        grid-template-columns:1fr;
      }

      .footer-grid{
        grid-template-columns:1fr;
      }

      .cta-panel-inner{
        align-items:flex-start;
      }

      .cta-actions{
        justify-content:flex-start;
      }
    }

    @media screen and (max-width: 39.9375em){
      .container-wide{
        width:min(100%, calc(100% - 1rem));
      }

      .top-strip-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:.45rem;
      }

      .top-strip-note,
      .top-strip-right a{
        white-space:normal;
      }

      .title-bar.hide-for-medium{
        gap:.75rem;
      }

      .title-bar-title{
        font-size:.95rem;
      }

      .site-nav{
        display:none;
      }

      .site-nav.is-open{
        display:block;
        padding-bottom:.8rem;
      }

      .site-nav-inner{
        flex-direction:column;
        align-items:stretch;
        gap:.75rem;
      }

      .nav-menu{
        align-items:stretch;
        justify-content:flex-start;
        flex-direction:column;
      }

      .nav-menu a{
        width:100%;
        justify-content:flex-start;
      }

      .brand{
        width:100%;
      }

      .nav-cta.show-for-medium{
        display:none !important;
      }

      .hero-title{
        font-size:2.05rem;
        max-width:none;
      }

      .hero-lead{
        font-size:.98rem;
      }

      .countdown-strip{
        flex-direction:column;
        align-items:flex-start;
      }

      .countdown-clock{
        gap:.4rem;
      }

      .countdown-clock span{
        min-width:4rem;
      }

      .input-row{
        flex-direction:column;
      }

      .entry-form .button{
        width:100%;
      }

      .feature-grid{
        grid-template-columns:1fr;
      }

      .filter-bar{
        flex-direction:column;
        align-items:stretch;
      }

      .sort-wrap{
        min-width:0;
      }

      .spotlight-wall{
        grid-template-columns:1fr;
      }

      .tile-large,
      .tile-tall,
      .tile-wide{
        grid-column:span 1;
        min-height:13rem;
      }

      .entry-card{
        grid-template-columns:1fr;
      }

      .entry-thumb{
        min-height:8rem;
      }

      .cta-title{
        font-size:1.35rem;
      }

      .cta-actions .button{
        width:100%;
      }

      .section-band{
        padding:1.35rem 0;
      }

      .countdown-strip,
      .entry-form,
      .hero-panel,
      .feature-card,
      .filter-bar,
      .summary-panel,
      .wall-tile,
      .cta-panel,
      .faq-item{
        border-radius:6px;
      }
    }