/* roulang page: index */
:root{
        --bg:#0b0c0f;
        --bg-2:#101217;
        --panel:#13161c;
        --panel-2:#171b22;
        --line:rgba(255,255,255,.08);
        --line-2:rgba(255,255,255,.12);
        --text:#f3f0ea;
        --muted:#a2a7b2;
        --muted-2:#7f8591;
        --brand:#f59e0b;
        --brand-2:#d97706;
        --brand-3:#7f1d1d;
        --success:#22c55e;
        --shadow:0 24px 70px rgba(0,0,0,.34);
        --radius:22px;
        --radius-lg:28px;
      }
      *,*::before,*::after{box-sizing:border-box}
      html{scroll-behavior:smooth}
      body{
        margin:0;
        font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
        background:
          radial-gradient(circle at 15% 10%, rgba(245,158,11,.14), transparent 24%),
          radial-gradient(circle at 85% 18%, rgba(127,29,29,.16), transparent 28%),
          radial-gradient(circle at 50% 78%, rgba(255,255,255,.05), transparent 22%),
          linear-gradient(180deg, #08090c 0%, #0b0c0f 100%);
        color:var(--text);
        line-height:1.85;
        text-rendering:optimizeLegibility;
        -webkit-font-smoothing:antialiased;
      }
      body::before{
        content:"";
        position:fixed;
        inset:0;
        pointer-events:none;
        background-image:
          linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
        background-size:72px 72px;
        mask-image:linear-gradient(180deg, rgba(0,0,0,.45), transparent 85%);
        opacity:.36;
        z-index:-1;
      }
      a{color:inherit;text-decoration:none;transition:all .24s ease}
      img{max-width:100%;display:block}
      button,input,textarea,select{font:inherit}
      ::selection{background:rgba(245,158,11,.28);color:#fff}
      .container{
        width:min(1200px,calc(100% - 2rem));
        margin-inline:auto;
      }
      .soft-border{border:1px solid var(--line)}
      .panel{
        background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
        border:1px solid var(--line);
        box-shadow:var(--shadow);
        backdrop-filter:blur(16px);
      }
      .panel-strong{
        background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
        border:1px solid var(--line-2);
        box-shadow:var(--shadow);
      }
      .kicker{
        display:inline-flex;
        align-items:center;
        gap:.55rem;
        padding:.42rem .8rem;
        border-radius:999px;
        color:#ffd89a;
        background:rgba(245,158,11,.09);
        border:1px solid rgba(245,158,11,.2);
        letter-spacing:.04em;
        font-size:.78rem;
        font-weight:700;
      }
      .kicker::before{
        content:"";
        width:.5rem;height:.5rem;border-radius:999px;background:var(--brand);
        box-shadow:0 0 0 5px rgba(245,158,11,.12);
      }
      .section-title{
        font-size:clamp(1.5rem, 1.1rem + 1.35vw, 2.35rem);
        line-height:1.2;
        letter-spacing:-.02em;
        margin:0;
      }
      .section-desc{
        color:var(--muted);
        margin-top:.9rem;
        max-width:72ch;
      }
      .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:.55rem;
        border-radius:999px;
        padding:.92rem 1.2rem;
        font-weight:700;
        transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
        border:1px solid transparent;
        user-select:none;
      }
      .btn:hover{transform:translateY(-1px)}
      .btn:active{transform:translateY(0)}
      .btn:focus-visible,
      .nav-link:focus-visible,
      .search-input:focus-visible,
      summary:focus-visible{
        outline:3px solid rgba(245,158,11,.45);
        outline-offset:2px;
      }
      .btn-primary{
        background:linear-gradient(135deg, var(--brand), #ffbf5b);
        color:#1a1203;
        box-shadow:0 18px 32px rgba(245,158,11,.18);
      }
      .btn-primary:hover{
        box-shadow:0 22px 40px rgba(245,158,11,.24);
        filter:saturate(1.05);
      }
      .btn-secondary{
        background:rgba(255,255,255,.03);
        color:var(--text);
        border-color:var(--line-2);
      }
      .btn-secondary:hover{
        background:rgba(255,255,255,.06);
        border-color:rgba(245,158,11,.28);
      }
      .nav-link{
        color:var(--muted);
        border:1px solid transparent;
      }
      .nav-link:hover{
        color:var(--text);
        background:rgba(255,255,255,.03);
        border-color:var(--line);
      }
      .nav-link.active{
        color:#fff;
        background:rgba(245,158,11,.12);
        border-color:rgba(245,158,11,.24);
      }
      .search-wrap{
        position:relative;
      }
      .search-input{
        width:100%;
        background:rgba(255,255,255,.03);
        border:1px solid var(--line-2);
        color:var(--text);
        border-radius:999px;
        padding:1rem 1rem 1rem 3rem;
        transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
      }
      .search-input::placeholder{color:#8b909a}
      .search-input:focus{
        border-color:rgba(245,158,11,.5);
        box-shadow:0 0 0 4px rgba(245,158,11,.14);
        background:rgba(255,255,255,.05);
      }
      .search-ico{
        position:absolute;
        left:1rem;
        top:50%;
        transform:translateY(-50%);
        width:1.05rem;height:1.05rem;
        color:#d8dde7;
        opacity:.9;
      }
      .tag{
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        padding:.42rem .75rem;
        border-radius:999px;
        border:1px solid var(--line);
        color:#dfe4ec;
        background:rgba(255,255,255,.03);
        font-size:.82rem;
      }
      .tag:hover{
        border-color:rgba(245,158,11,.22);
        color:#fff;
        background:rgba(245,158,11,.08);
      }
      .card{
        border-radius:var(--radius);
        background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
        border:1px solid var(--line);
        box-shadow:0 12px 40px rgba(0,0,0,.18);
      }
      .card:hover{
        border-color:rgba(245,158,11,.24);
        box-shadow:0 16px 52px rgba(0,0,0,.28);
        transform:translateY(-2px);
      }
      .card, .hover-lift{transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease}
      .meta{
        color:var(--muted-2);
        font-size:.82rem;
      }
      .badge{
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        border-radius:999px;
        padding:.34rem .65rem;
        font-size:.78rem;
        font-weight:700;
        border:1px solid rgba(245,158,11,.18);
        background:rgba(245,158,11,.08);
        color:#ffd38a;
      }
      .line-clamp-2{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
      }
      .line-clamp-3{
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
      }
      .hero-grid{
        position:relative;
      }
      .hero-grid::after{
        content:"";
        position:absolute;
        inset:auto 0 -1rem 0;
        height:1px;
        background:linear-gradient(90deg, transparent, rgba(245,158,11,.48), transparent);
        opacity:.7;
      }
      .ring-box{
        position:relative;
        width:min(100%, 340px);
        aspect-ratio:1/1;
        border-radius:999px;
        background:
          radial-gradient(circle at 35% 30%, rgba(255,255,255,.09), transparent 34%),
          conic-gradient(from 150deg, var(--brand) 0 var(--progress, 260deg), rgba(255,255,255,.08) 0);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 56px rgba(0,0,0,.42);
      }
      .ring-box::after{
        content:"";
        position:absolute;
        inset:18px;
        border-radius:999px;
        background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.08), rgba(255,255,255,.02) 58%, rgba(0,0,0,.16) 100%);
        border:1px solid rgba(255,255,255,.08);
      }
      .ring-center{
        position:absolute;
        inset:0;
        display:grid;
        place-items:center;
        z-index:1;
        text-align:center;
        padding:2rem;
      }
      .dot-line{
        display:flex;
        gap:.5rem;
        align-items:center;
        flex-wrap:wrap;
      }
      .dot{
        width:.54rem;height:.54rem;border-radius:999px;background:rgba(255,255,255,.26);
      }
      .dot.active{background:var(--brand); box-shadow:0 0 0 4px rgba(245,158,11,.15)}
      .quote{
        border-left:3px solid rgba(245,158,11,.7);
        background:rgba(245,158,11,.06);
      }
      .faq-item{
        border:1px solid var(--line);
        background:rgba(255,255,255,.025);
        border-radius:18px;
        overflow:hidden;
      }
      .faq-item[open]{
        border-color:rgba(245,158,11,.24);
        background:rgba(245,158,11,.06);
      }
      .faq-item summary{
        cursor:pointer;
        list-style:none;
        padding:1rem 1.05rem;
        font-weight:700;
        color:#fff;
      }
      .faq-item summary::-webkit-details-marker{display:none}
      .faq-answer{
        padding:0 1.05rem 1rem 1.05rem;
        color:var(--muted);
      }
      .floating-cta{
        border:1px solid rgba(245,158,11,.2);
        background:linear-gradient(180deg, rgba(19,22,28,.94), rgba(14,16,20,.94));
        box-shadow:0 16px 56px rgba(0,0,0,.36);
      }
      .input-mini{
        background:rgba(255,255,255,.03);
        border:1px solid var(--line-2);
        color:var(--text);
        border-radius:999px;
        padding:.92rem 1rem;
        transition:box-shadow .2s ease, border-color .2s ease;
      }
      .input-mini::placeholder{color:#9197a2}
      .input-mini:focus{
        outline:none;
        border-color:rgba(245,158,11,.5);
        box-shadow:0 0 0 4px rgba(245,158,11,.14);
      }
      .bar{
        height:.6rem;
        border-radius:999px;
        background:rgba(255,255,255,.07);
        overflow:hidden;
      }
      .bar > span{
        display:block;
        height:100%;
        border-radius:inherit;
        background:linear-gradient(90deg, var(--brand), #ffcc71);
      }
      @media (max-width: 1024px){
        .container{width:min(1200px, calc(100% - 1.2rem))}
      }
      @media (max-width: 768px){
        .section-desc{margin-top:.75rem}
        .ring-box{max-width:280px}
      }
      @media (max-width: 640px){
        .btn{width:100%}
        .nav-mobile-stack{flex-direction:column}
        .search-input{padding-left:2.8rem}
      }

/* roulang page: article */
:root{
      --bg:#0b0c0f;
      --bg-2:#101217;
      --panel:#13161c;
      --panel-2:#171b22;
      --line:rgba(255,255,255,.08);
      --line-2:rgba(255,255,255,.12);
      --text:#f3f0ea;
      --muted:#a2a7b2;
      --muted-2:#7f8591;
      --brand:#f59e0b;
      --brand-2:#d97706;
      --brand-3:#7f1d1d;
      --success:#22c55e;
      --shadow:0 24px 70px rgba(0,0,0,.34);
      --radius:22px;
      --radius-lg:28px;
    }
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      background:
        radial-gradient(circle at 15% 10%, rgba(245,158,11,.14), transparent 24%),
        radial-gradient(circle at 85% 18%, rgba(127,29,29,.16), transparent 28%),
        radial-gradient(circle at 50% 78%, rgba(255,255,255,.05), transparent 22%),
        linear-gradient(180deg, #08090c 0%, #0b0c0f 100%);
      color:var(--text);
      line-height:1.85;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:72px 72px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.45), transparent 85%);
      opacity:.36;
      z-index:-1;
    }
    ::selection{background:rgba(245,158,11,.26);color:#fff}
    a{color:inherit;text-decoration:none;transition:all .24s ease}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    .container{
      width:min(1200px,calc(100% - 2rem));
      margin-inline:auto;
    }
    .soft-border{border:1px solid var(--line)}
    .section-title{
      font-size:clamp(1.5rem, 1.1rem + 1.35vw, 2.35rem);
      line-height:1.2;
      letter-spacing:-.02em;
      margin:0;
    }
    .section-desc{
      color:var(--muted);
      margin-top:.9rem;
      max-width:72ch;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      padding:.92rem 1.2rem;
      font-weight:700;
      transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
      border:1px solid transparent;
      user-select:none;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:active{transform:translateY(0)}
    .btn:focus-visible,
    .nav-link:focus-visible,
    .search-input:focus-visible,
    summary:focus-visible,
    .toc-link:focus-visible{
      outline:3px solid rgba(245,158,11,.45);
      outline-offset:2px;
    }
    .btn-primary{
      background:linear-gradient(135deg, var(--brand), #ffbf5b);
      color:#1a1203;
      box-shadow:0 18px 32px rgba(245,158,11,.18);
    }
    .btn-primary:hover{
      box-shadow:0 22px 40px rgba(245,158,11,.24);
      filter:saturate(1.05);
    }
    .btn-secondary{
      background:rgba(255,255,255,.03);
      color:var(--text);
      border-color:var(--line-2);
    }
    .btn-secondary:hover{
      background:rgba(255,255,255,.06);
      border-color:rgba(245,158,11,.28);
    }
    .nav-link{
      color:var(--muted);
      border:1px solid transparent;
    }
    .nav-link:hover{
      color:var(--text);
      background:rgba(255,255,255,.03);
      border-color:var(--line);
    }
    .nav-link.active{
      color:#fff;
      background:rgba(245,158,11,.12);
      border-color:rgba(245,158,11,.24);
    }
    .search-wrap{
      position:relative;
    }
    .search-input{
      width:100%;
      background:rgba(255,255,255,.03);
      border:1px solid var(--line-2);
      color:var(--text);
      border-radius:999px;
      padding:1rem 1rem 1rem 3rem;
      transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    }
    .search-input::placeholder{color:#8b909a}
    .search-input:focus{
      border-color:rgba(245,158,11,.5);
      box-shadow:0 0 0 4px rgba(245,158,11,.14);
      background:rgba(255,255,255,.05);
    }
    .search-ico{
      position:absolute;
      left:1rem;
      top:50%;
      transform:translateY(-50%);
      width:1.05rem;
      height:1.05rem;
      color:#d8dde7;
      opacity:.9;
      pointer-events:none;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.42rem .75rem;
      border-radius:999px;
      border:1px solid var(--line);
      color:#dfe4ec;
      background:rgba(255,255,255,.03);
      font-size:.82rem;
    }
    .tag:hover{
      border-color:rgba(245,158,11,.22);
      color:#fff;
      background:rgba(245,158,11,.08);
    }
    .card{
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
      border:1px solid var(--line);
      box-shadow:0 12px 40px rgba(0,0,0,.18);
    }
    .card:hover{
      border-color:rgba(245,158,11,.24);
      box-shadow:0 16px 52px rgba(0,0,0,.28);
      transform:translateY(-2px);
    }
    .card, .hover-lift{transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease}
    .meta{
      color:var(--muted-2);
      font-size:.82rem;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.34rem .65rem;
      font-size:.78rem;
      font-weight:700;
      border:1px solid rgba(245,158,11,.18);
      background:rgba(245,158,11,.08);
      color:#ffd38a;
    }
    .hero-grid{
      position:relative;
    }
    .hero-grid::after{
      content:"";
      position:absolute;
      inset:auto 0 -1rem 0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(245,158,11,.48), transparent);
      opacity:.7;
    }
    .progress-track{
      width:100%;
      height:2px;
      background:rgba(255,255,255,.06);
      overflow:hidden;
    }
    #reading-progress{
      height:100%;
      width:0%;
      background:linear-gradient(90deg, var(--brand), #ffd48a 48%, #b91c1c 100%);
      box-shadow:0 0 18px rgba(245,158,11,.28);
      transition:width .12s linear;
    }
    .ring{
      --value:72;
      position:relative;
      width:132px;
      height:132px;
      border-radius:50%;
      background:
        radial-gradient(circle at center, rgba(11,12,15,.98) 58%, transparent 59%),
        conic-gradient(from 180deg, rgba(245,158,11,1) calc(var(--value) * 1%), rgba(255,255,255,.08) 0);
      display:grid;
      place-items:center;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.3);
    }
    .ring::before{
      content:"";
      position:absolute;
      inset:12px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.06);
      background:radial-gradient(circle at 50% 35%, rgba(245,158,11,.12), transparent 60%);
    }
    .ring b,
    .ring span{
      position:relative;
      z-index:1;
    }
    .ring b{
      display:block;
      font-size:1.95rem;
      line-height:1;
      color:#fff;
      letter-spacing:-.05em;
    }
    .ring span{
      display:block;
      margin-top:.22rem;
      font-size:.78rem;
      color:var(--muted);
    }
    .mini-card{
      display:block;
      padding:1rem 1rem 1.05rem;
      border-radius:18px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.025);
      transition:transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
    }
    .mini-card:hover{
      transform:translateY(-2px);
      border-color:rgba(245,158,11,.22);
      background:rgba(245,158,11,.05);
      box-shadow:0 14px 34px rgba(0,0,0,.22);
    }
    .mini-card strong{
      display:block;
      margin-top:.55rem;
      color:#fff;
      font-size:1rem;
      line-height:1.45;
    }
    .mini-card p{
      margin:.35rem 0 0;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.65;
    }
    .stat{
      border-radius:18px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.025);
      padding:.9rem 1rem;
    }
    .stat small{
      display:block;
      color:var(--muted-2);
      font-size:.78rem;
      letter-spacing:.02em;
    }
    .stat strong{
      display:block;
      color:#fff;
      margin-top:.2rem;
      font-size:1rem;
      line-height:1.35;
    }
    .article-content{
      color:#d8dbe2;
      font-size:1rem;
      line-height:1.9;
    }
    .article-content > * + *{margin-top:1.05rem}
    .article-content h2,
    .article-content h3,
    .article-content h4{
      color:#fff;
      line-height:1.3;
      letter-spacing:-.02em;
      scroll-margin-top:120px;
    }
    .article-content h2{
      margin-top:1.8rem;
      font-size:1.45rem;
    }
    .article-content h3{
      margin-top:1.4rem;
      font-size:1.15rem;
    }
    .article-content p{
      color:#d8dbe2;
      margin:0;
    }
    .article-content a{
      color:#ffd38a;
      text-decoration:underline;
      text-decoration-color:rgba(255,211,138,.35);
      text-underline-offset:3px;
    }
    .article-content a:hover{
      color:#fff;
      text-decoration-color:rgba(245,158,11,.7);
    }
    .article-content ul,
    .article-content ol{
      margin:0;
      padding-left:1.35rem;
    }
    .article-content li{margin:.45rem 0}
    .article-content blockquote{
      margin:1.3rem 0;
      padding:1rem 1.15rem;
      border-left:3px solid rgba(245,158,11,.58);
      border-radius:16px;
      background:rgba(245,158,11,.06);
      color:#f0e6d4;
    }
    .article-content hr{
      border:0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
      margin:1.4rem 0;
    }
    .article-content img{
      border-radius:18px;
      border:1px solid var(--line);
      box-shadow:0 16px 46px rgba(0,0,0,.24);
      margin:1.2rem 0;
    }
    .article-content figure{
      margin:1.2rem 0;
    }
    .article-content figcaption{
      margin-top:.55rem;
      font-size:.85rem;
      color:var(--muted-2);
      text-align:center;
    }
    .article-content code{
      padding:.2rem .42rem;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:#ffd38a;
      font-size:.92em;
    }
    .article-content pre{
      overflow:auto;
      padding:1rem 1.1rem;
      border-radius:18px;
      border:1px solid var(--line);
      background:#0f1218;
      color:#f1f5f9;
    }
    .article-content table{
      display:block;
      width:100%;
      overflow:auto;
      border-collapse:collapse;
      margin:1.2rem 0;
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(255,255,255,.02);
    }
    .article-content th,
    .article-content td{
      padding:.85rem .95rem;
      border-bottom:1px solid var(--line);
      text-align:left;
      white-space:nowrap;
    }
    .article-content th{
      color:#fff;
      background:rgba(255,255,255,.03);
      font-weight:700;
    }
    .article-content tr:last-child td{border-bottom:0}
    .toc-link{
      display:block;
      padding:.7rem .85rem;
      border-radius:14px;
      border:1px solid transparent;
      color:#dfe4ec;
      background:rgba(255,255,255,.02);
      line-height:1.55;
    }
    .toc-link:hover{
      border-color:rgba(245,158,11,.18);
      background:rgba(245,158,11,.06);
      color:#fff;
    }
    .toc-link.toc-sub{padding-left:1.2rem;color:#bfc5cf}
    .faq-item{
      border:1px solid var(--line);
      background:rgba(255,255,255,.025);
      border-radius:18px;
      overflow:hidden;
    }
    .faq-item[open]{
      border-color:rgba(245,158,11,.24);
      background:rgba(245,158,11,.06);
    }
    .faq-item summary{
      cursor:pointer;
      list-style:none;
      padding:1rem 1.05rem;
      font-weight:700;
      color:#fff;
      position:relative;
      padding-right:3rem;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      position:absolute;
      right:1rem;
      top:50%;
      transform:translateY(-50%);
      color:#ffd38a;
      font-size:1.1rem;
      line-height:1;
      transition:transform .22s ease;
    }
    .faq-item[open] summary::after{
      content:"–";
      transform:translateY(-50%);
    }
    .faq-answer{
      padding:0 1.05rem 1rem;
      color:var(--muted);
      font-size:.95rem;
      line-height:1.8;
    }
    .empty-state{
      border:1px dashed rgba(245,158,11,.24);
      background:rgba(245,158,11,.05);
      border-radius:28px;
    }
    .cta-panel{
      position:relative;
      overflow:hidden;
    }
    .cta-panel::before{
      content:"";
      position:absolute;
      inset:auto -12% -52% auto;
      width:340px;
      height:340px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(245,158,11,.18), transparent 64%);
      pointer-events:none;
    }
    .cta-panel::after{
      content:"";
      position:absolute;
      inset:-30% auto auto -20%;
      width:280px;
      height:280px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(127,29,29,.16), transparent 62%);
      pointer-events:none;
    }
    .footer-link{
      color:var(--muted);
    }
    .footer-link:hover{
      color:#fff;
    }
    .subtle-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
    }
    @media (max-width: 1279px){
      .container{width:min(1200px,calc(100% - 1.5rem))}
    }
    @media (max-width: 1024px){
      .hero-grid::after{display:none}
      .card:hover{transform:none}
    }
    @media (max-width: 768px){
      .section-title{font-size:clamp(1.35rem, 1rem + 1.4vw, 1.95rem)}
      .btn{padding:.86rem 1rem}
      .search-input{padding-top:.92rem;padding-bottom:.92rem}
      .article-content h2{font-size:1.3rem}
      .article-content h3{font-size:1.05rem}
    }
    @media (max-width: 520px){
      .container{width:min(100% - 1rem, 1200px)}
      .tag{font-size:.76rem;padding:.36rem .62rem}
      .badge{font-size:.74rem}
      .faq-item summary{padding-right:2.5rem}
    }