/* roulang page: index */
:root{
      --bg: #f4f8fc;
      --bg-soft: #eef5fb;
      --panel: #ffffff;
      --panel-2: #f8fbff;
      --line: #d7e3f0;
      --line-strong: #c4d2e1;
      --text: #17324d;
      --text-2: #4f6782;
      --muted: #7b8fa7;
      --brand: #1d63d6;
      --brand-2: #4d92ff;
      --accent: #16b8a6;
      --accent-2: #ffb547;
      --danger: #e15b64;
      --shadow: 0 14px 38px rgba(26, 56, 93, .08);
      --shadow-sm: 0 8px 24px rgba(26, 56, 93, .06);
      --radius: 18px;
      --radius-lg: 24px;
      --radius-xl: 30px;
      --space: clamp(1rem, 1.8vw, 1.4rem);
      --sidebar-w: 18rem;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 15% 0%, rgba(29,99,214,.08), transparent 45%),
        radial-gradient(800px 520px at 100% 8%, rgba(22,184,166,.08), transparent 40%),
        linear-gradient(180deg, #f7fbff 0%, var(--bg) 42%, #f6f9fd 100%);
      line-height:1.7;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }

    a{
      color:inherit;
      text-decoration:none;
      transition:color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
    }
    a:hover{color:var(--brand)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(29,99,214,.18);color:var(--text)}

    .off-canvas-wrapper,
    .off-canvas-content{
      background:transparent;
    }

    .shell-canvas{
      width:var(--sidebar-w);
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(250,252,255,.98));
      border-right:1px solid rgba(199,214,230,.75);
      box-shadow:12px 0 40px rgba(35, 63, 100, .04);
    }

    .sidebar-shell{
      min-height:100vh;
      padding:1.35rem 1.15rem 1.15rem;
      display:flex;
      flex-direction:column;
      gap:1rem;
    }

    .brand-box{
      padding:.95rem 1rem;
      border-radius:20px;
      background:linear-gradient(180deg, #ffffff, #f8fbff);
      border:1px solid rgba(207,220,235,.9);
      box-shadow:var(--shadow-sm);
    }

    .brand-mark{
      display:flex;
      align-items:center;
      gap:.8rem;
    }

    .brand-icon{
      width:46px;height:46px;
      border-radius:15px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg, var(--brand), #2f86ff);
      box-shadow:0 14px 26px rgba(29,99,214,.22);
      font-size:1.05rem;
      flex:0 0 auto;
    }

    .brand-name{
      font-size:1.03rem;
      font-weight:800;
      letter-spacing:.2px;
      line-height:1.25;
    }

    .brand-sub{
      margin:.35rem 0 0;
      color:var(--muted);
      font-size:.9rem;
    }

    .sidebar-nav{
      display:grid;
      gap:.55rem;
    }

    .sidebar-link{
      display:flex;
      align-items:center;
      gap:.75rem;
      padding:.88rem 1rem;
      border-radius:16px;
      border:1px solid transparent;
      color:var(--text-2);
      background:rgba(255,255,255,.55);
    }

    .sidebar-link i{
      width:1.35rem;
      text-align:center;
      color:var(--brand);
    }

    .sidebar-link:hover,
    .sidebar-link:focus-visible{
      background:#fff;
      border-color:rgba(29,99,214,.18);
      box-shadow:0 12px 28px rgba(35,63,100,.06);
      transform:translateY(-1px);
      color:var(--text);
    }

    .sidebar-link.is-active{
      background:linear-gradient(135deg, rgba(29,99,214,.1), rgba(77,146,255,.14));
      border-color:rgba(29,99,214,.15);
      color:var(--text);
    }

    .sidebar-cta{
      margin-top:auto;
      padding:1rem;
      border-radius:20px;
      background:linear-gradient(180deg, #f9fcff, #f2f8ff);
      border:1px solid rgba(199,214,235,.92);
      box-shadow:var(--shadow-sm);
    }

    .sidebar-cta h3{
      margin:0 0 .35rem;
      font-size:1rem;
      line-height:1.35;
    }

    .sidebar-cta p{
      margin:0 0 .95rem;
      color:var(--muted);
      font-size:.94rem;
    }

    .sidebar-note{
      color:var(--muted);
      font-size:.88rem;
      padding:.65rem .2rem 0;
    }

    .topbar-mobile{
      display:none;
      position:sticky;
      top:0;
      z-index:90;
      background:rgba(247,251,255,.88);
      backdrop-filter:saturate(160%) blur(14px);
      border-bottom:1px solid rgba(198,214,233,.82);
      box-shadow:0 8px 24px rgba(18,45,78,.04);
    }

    .topbar-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.85rem 1rem;
    }

    .topbar-brand{
      display:flex;
      align-items:center;
      gap:.72rem;
      min-width:0;
    }

    .topbar-brand .brand-mini{
      width:38px;height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, var(--brand), #52a0ff);
      color:#fff;
      box-shadow:0 12px 22px rgba(29,99,214,.2);
      flex:0 0 auto;
    }

    .topbar-brand strong{
      display:block;
      font-size:.98rem;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .topbar-brand span{
      display:block;
      color:var(--muted);
      font-size:.8rem;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .menu-toggle{
      border:1px solid rgba(199,214,235,.95);
      background:#fff;
      color:var(--text);
      border-radius:14px;
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      box-shadow:var(--shadow-sm);
    }

    .menu-toggle:hover,
    .menu-toggle:focus-visible{
      color:var(--brand);
      border-color:rgba(29,99,214,.22);
      transform:translateY(-1px);
    }

    .page-main{
      padding:1rem 1rem 4.5rem;
    }

    .main-shell{
      max-width:1440px;
      margin:0 auto;
    }

    .section{
      margin-bottom:1rem;
    }

    .section-panel{
      background:var(--panel);
      border:1px solid rgba(199,214,235,.92);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .section-pad{
      padding:clamp(1rem, 2vw, 1.5rem);
    }

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

    .section-head h2,
    .section-head h3{
      margin:0;
      font-size:clamp(1.18rem, 2vw, 1.55rem);
      line-height:1.25;
      letter-spacing:.1px;
    }

    .section-head p{
      margin:.45rem 0 0;
      color:var(--muted);
      max-width:62ch;
      font-size:.98rem;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.34rem .7rem;
      border-radius:999px;
      background:rgba(29,99,214,.09);
      border:1px solid rgba(29,99,214,.12);
      color:var(--brand);
      font-size:.82rem;
      font-weight:700;
      letter-spacing:.15px;
    }

    .eyebrow i{font-size:.85rem}

    .hero-card{
      background:
        linear-gradient(135deg, rgba(29,99,214,.07), rgba(77,146,255,.05) 40%, rgba(22,184,166,.05) 100%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border:1px solid rgba(199,214,235,.9);
      border-radius:28px;
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.25fr) minmax(300px,.95fr);
      gap:1rem;
      align-items:stretch;
      padding:clamp(1rem, 2vw, 1.5rem);
    }

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

    .hero-copy h1{
      margin:0;
      font-size:clamp(1.95rem, 4.4vw, 3.55rem);
      line-height:1.08;
      letter-spacing:-.4px;
      max-width:11.5ch;
    }

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

    .cta-row{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      align-items:center;
    }

    .button{
      margin:0;
      border:none;
      border-radius:14px;
      padding:.92rem 1.15rem;
      font-weight:700;
      letter-spacing:.1px;
      box-shadow:none;
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
    }

    .button.primary{
      background:linear-gradient(135deg, var(--brand), #3d87ff);
      color:#fff;
      box-shadow:0 16px 28px rgba(29,99,214,.22);
    }

    .button.primary:hover,
    .button.primary:focus-visible{
      background:linear-gradient(135deg, #1b5ccd, #2f7df3);
      box-shadow:0 18px 34px rgba(29,99,214,.28);
      transform:translateY(-1px);
      color:#fff;
    }

    .button.secondary{
      background:#fff;
      color:var(--text);
      border:1px solid rgba(200,214,231,.95);
    }

    .button.secondary:hover,
    .button.secondary:focus-visible{
      border-color:rgba(29,99,214,.18);
      color:var(--brand);
      box-shadow:0 12px 24px rgba(35,63,100,.06);
      transform:translateY(-1px);
      background:#fff;
    }

    .button.ghost{
      background:rgba(29,99,214,.08);
      color:var(--brand);
      border:1px solid rgba(29,99,214,.14);
    }

    .button.ghost:hover,
    .button.ghost:focus-visible{
      background:rgba(29,99,214,.12);
      transform:translateY(-1px);
    }

    .button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    .accordion-title:focus-visible{
      outline:3px solid rgba(29,99,214,.26);
      outline-offset:2px;
    }

    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.5rem .78rem;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(199,214,235,.95);
      color:var(--text-2);
      font-size:.86rem;
      box-shadow:0 8px 16px rgba(35,63,100,.04);
    }

    .chip i{
      color:var(--brand);
    }

    .hero-preview{
      border-radius:24px;
      background:linear-gradient(180deg, #f8fbff 0%, #eef5fc 100%);
      border:1px solid rgba(199,214,235,.9);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
      padding:1rem;
      display:flex;
      flex-direction:column;
      gap:.9rem;
      min-height:100%;
    }

    .preview-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }

    .live-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.38rem .72rem;
      border-radius:999px;
      font-size:.8rem;
      font-weight:700;
      color:#0b6b64;
      background:rgba(22,184,166,.12);
      border:1px solid rgba(22,184,166,.16);
    }

    .cover-card{
      position:relative;
      min-height:220px;
      border-radius:22px;
      overflow:hidden;
      background:
        radial-gradient(160px 160px at 25% 25%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
        linear-gradient(135deg, rgba(29,99,214,.9), rgba(77,146,255,.78) 45%, rgba(22,184,166,.72));
      box-shadow:0 18px 34px rgba(29,99,214,.18);
      color:#fff;
      padding:1rem;
    }

    .cover-card:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 35%),
        radial-gradient(circle at 80% 18%, rgba(255,255,255,.18), transparent 24%);
      pointer-events:none;
    }

    .cover-grid{
      position:relative;
      z-index:1;
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:1rem;
    }

    .cover-label{
      display:inline-flex;
      align-self:flex-start;
      align-items:center;
      gap:.45rem;
      padding:.36rem .7rem;
      border-radius:999px;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.18);
      font-size:.8rem;
      font-weight:700;
      letter-spacing:.08px;
    }

    .cover-play{
      display:grid;
      place-items:center;
      width:64px;height:64px;
      border-radius:20px;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.24);
      backdrop-filter:blur(12px);
      box-shadow:0 18px 28px rgba(7, 31, 65, .18);
      font-size:1.25rem;
      margin-top:auto;
    }

    .cover-meta{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }

    .cover-meta .title{
      font-size:1rem;
      font-weight:700;
      margin:0 0 .25rem;
    }

    .cover-meta .sub{
      margin:0;
      color:rgba(255,255,255,.84);
      font-size:.9rem;
    }

    .countdown-box{
      background:#fff;
      border-radius:20px;
      border:1px solid rgba(199,214,235,.95);
      padding:.95rem;
      display:grid;
      gap:.7rem;
      box-shadow:var(--shadow-sm);
    }

    .countdown-row{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:.55rem;
    }

    .count-item{
      border-radius:16px;
      background:linear-gradient(180deg, #fbfdff, #f4f8fd);
      border:1px solid rgba(199,214,235,.85);
      padding:.7rem .55rem;
      text-align:center;
    }

    .count-item strong{
      display:block;
      font-size:1.4rem;
      line-height:1.1;
      color:var(--text);
    }

    .count-item span{
      display:block;
      margin-top:.2rem;
      color:var(--muted);
      font-size:.78rem;
    }

    .countdown-note{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      color:var(--text-2);
      font-size:.92rem;
    }

    .countdown-note .small{
      color:var(--muted);
      font-size:.85rem;
    }

    .countdown-note .button{
      padding:.65rem .9rem;
      border-radius:12px;
      font-size:.9rem;
    }

    .stats-grid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:1rem;
    }

    .stat-card{
      grid-column:span 3;
      padding:1rem;
      border-radius:22px;
      background:linear-gradient(180deg, #ffffff, #f8fbff);
      border:1px solid rgba(199,214,235,.94);
      box-shadow:var(--shadow-sm);
      min-height:150px;
      display:flex;
      flex-direction:column;
      gap:.85rem;
    }

    .stat-card.wide{grid-column:span 6}
    .stat-card.mid{grid-column:span 4}
    .stat-card .stat-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }

    .stat-icon{
      width:44px;height:44px;
      border-radius:15px;
      display:grid;
      place-items:center;
      color:var(--brand);
      background:rgba(29,99,214,.08);
      border:1px solid rgba(29,99,214,.12);
      flex:0 0 auto;
    }

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

    .stat-sub{
      margin:0;
      color:var(--muted);
      font-size:.9rem;
    }

    .kpi{
      margin-top:auto;
    }

    .kpi strong{
      display:block;
      font-size:1.8rem;
      line-height:1;
      margin-bottom:.22rem;
      letter-spacing:-.3px;
    }

    .kpi span{
      color:var(--muted);
      font-size:.88rem;
    }

    .progress-line{
      width:100%;
      height:8px;
      border-radius:999px;
      background:#e8eff7;
      overflow:hidden;
      margin-top:.65rem;
    }

    .progress-line > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--brand), var(--brand-2));
      box-shadow:0 8px 16px rgba(29,99,214,.16);
    }

    .matrix-grid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:1rem;
    }

    .matrix-card{
      border-radius:22px;
      border:1px solid rgba(199,214,235,.94);
      background:linear-gradient(180deg, #ffffff, #f7fbff);
      box-shadow:var(--shadow-sm);
      padding:1rem;
      min-height:100%;
      display:flex;
      flex-direction:column;
      gap:.85rem;
    }

    .matrix-card.feature{
      grid-column:span 6;
      padding:1.2rem;
      background:
        linear-gradient(135deg, rgba(29,99,214,.08), rgba(77,146,255,.05) 45%, rgba(22,184,166,.05)),
        linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .matrix-card.small{grid-column:span 3}
    .matrix-card.long{grid-column:span 9}

    .matrix-card h3{
      margin:0;
      font-size:1.06rem;
      line-height:1.3;
    }

    .matrix-card p{
      margin:0;
      color:var(--text-2);
      font-size:.94rem;
    }

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

    .matrix-list li{
      display:flex;
      align-items:flex-start;
      gap:.65rem;
      color:var(--text-2);
      font-size:.94rem;
    }

    .matrix-list i{
      color:var(--accent);
      margin-top:.18rem;
    }

    .timeline{
      display:grid;
      gap:.75rem;
    }

    .timeline-item{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:.9rem;
      align-items:start;
      padding:1rem;
      border-radius:18px;
      background:#fff;
      border:1px solid rgba(199,214,235,.9);
      box-shadow:var(--shadow-sm);
    }

    .timeline-dot{
      width:14px;height:14px;
      border-radius:50%;
      margin-top:.3rem;
      background:linear-gradient(135deg, var(--brand), var(--accent));
      box-shadow:0 0 0 5px rgba(29,99,214,.08);
    }

    .timeline-item h4{
      margin:0 0 .2rem;
      font-size:1rem;
    }

    .timeline-item p{
      margin:0;
      color:var(--text-2);
      font-size:.94rem;
    }

    .split-grid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:1rem;
    }

    .news-list-wrap{
      grid-column:span 8;
      display:flex;
      flex-direction:column;
      gap:.85rem;
    }

    .news-side{
      grid-column:span 4;
      display:flex;
      flex-direction:column;
      gap:1rem;
    }

    .news-item{
      display:grid;
      grid-template-columns:160px minmax(0,1fr);
      gap:1rem;
      border-radius:22px;
      background:#fff;
      border:1px solid rgba(199,214,235,.92);
      box-shadow:var(--shadow-sm);
      overflow:hidden;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .news-item:hover{
      transform:translateY(-2px);
      box-shadow:0 16px 30px rgba(35,63,100,.09);
      border-color:rgba(29,99,214,.18);
    }

    .news-thumb{
      min-height:100%;
      padding:1rem;
      position:relative;
      background:
        radial-gradient(120px 120px at 30% 25%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
        linear-gradient(135deg, rgba(29,99,214,.88), rgba(77,146,255,.78) 58%, rgba(22,184,166,.74));
      color:#fff;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:1rem;
    }

    .thumb-tag{
      display:inline-flex;
      align-self:flex-start;
      align-items:center;
      gap:.35rem;
      padding:.34rem .64rem;
      border-radius:999px;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.2);
      font-size:.76rem;
      font-weight:700;
    }

    .thumb-icon{
      display:grid;
      place-items:center;
      width:46px;height:46px;
      border-radius:16px;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 10px 24px rgba(13,34,66,.12);
      font-size:1rem;
      margin-top:auto;
    }

    .news-body{
      padding:1rem 1rem 1rem 0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:.6rem;
      min-width:0;
    }

    .news-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem .65rem;
      align-items:center;
      color:var(--muted);
      font-size:.82rem;
    }

    .meta-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.25rem .55rem;
      border-radius:999px;
      background:rgba(29,99,214,.08);
      border:1px solid rgba(29,99,214,.12);
      color:var(--brand);
      font-weight:700;
    }

    .news-body h3{
      margin:0;
      font-size:1.08rem;
      line-height:1.42;
    }

    .news-body p{
      margin:0;
      color:var(--text-2);
      font-size:.94rem;
      max-width:60ch;
    }

    .news-link{
      margin-top:.15rem;
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      font-weight:700;
      color:var(--brand);
      width:max-content;
    }

    .news-link:hover{
      color:#124fae;
      transform:translateX(2px);
    }

    .side-card{
      padding:1rem;
      border-radius:22px;
      background:linear-gradient(180deg, #fff, #f8fbff);
      border:1px solid rgba(199,214,235,.92);
      box-shadow:var(--shadow-sm);
    }

    .side-card h4{
      margin:0 0 .45rem;
      font-size:1rem;
    }

    .side-card p{
      margin:0;
      color:var(--text-2);
      font-size:.94rem;
    }

    .side-checks{
      list-style:none;
      margin:.9rem 0 0;
      padding:0;
      display:grid;
      gap:.55rem;
    }

    .side-checks li{
      display:flex;
      align-items:flex-start;
      gap:.55rem;
      color:var(--text-2);
      font-size:.93rem;
    }

    .side-checks i{
      color:var(--accent);
      margin-top:.2rem;
    }

    .compare-grid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:1rem;
    }

    .compare-card{
      grid-column:span 6;
      border-radius:22px;
      border:1px solid rgba(199,214,235,.92);
      background:#fff;
      box-shadow:var(--shadow-sm);
      padding:1rem;
    }

    .compare-card.featured{
      background:
        linear-gradient(135deg, rgba(29,99,214,.07), rgba(22,184,166,.05)),
        #fff;
    }

    .compare-card h3{
      margin:0 0 .35rem;
      font-size:1.08rem;
    }

    .compare-card p{
      margin:0 0 .9rem;
      color:var(--text-2);
      font-size:.94rem;
    }

    .compare-row{
      display:grid;
      gap:.35rem;
      margin-bottom:.85rem;
    }

    .compare-row:last-child{margin-bottom:0}
    .compare-row .top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      font-size:.92rem;
      color:var(--text-2);
    }

    .bar{
      width:100%;
      height:10px;
      border-radius:999px;
      background:#e9f0f7;
      overflow:hidden;
    }

    .bar > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--brand), var(--brand-2));
    }

    .compare-note{
      grid-column:span 12;
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:1rem;
      padding:1rem 1.15rem;
      border-radius:22px;
      background:linear-gradient(135deg, rgba(29,99,214,.08), rgba(77,146,255,.06));
      border:1px solid rgba(29,99,214,.12);
    }

    .compare-note strong{
      display:block;
      font-size:1rem;
      margin-bottom:.15rem;
    }

    .compare-note span{
      color:var(--text-2);
      font-size:.94rem;
    }

    .reviews-grid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:1rem;
    }

    .review-summary{
      grid-column:span 4;
      padding:1rem;
      border-radius:22px;
      background:linear-gradient(180deg, #ffffff, #f8fbff);
      border:1px solid rgba(199,214,235,.92);
      box-shadow:var(--shadow-sm);
      display:flex;
      flex-direction:column;
      gap:.9rem;
    }

    .rating{
      display:flex;
      align-items:baseline;
      gap:.55rem;
    }

    .rating strong{
      font-size:2.65rem;
      line-height:1;
      letter-spacing:-.8px;
    }

    .rating span{
      color:var(--muted);
      font-size:.9rem;
    }

    .stars{
      color:#f1b73f;
      letter-spacing:.12rem;
      font-size:1rem;
    }

    .review-card{
      grid-column:span 4;
      padding:1rem;
      border-radius:22px;
      background:#fff;
      border:1px solid rgba(199,214,235,.92);
      box-shadow:var(--shadow-sm);
      display:flex;
      flex-direction:column;
      gap:.9rem;
      min-height:100%;
    }

    .review-card .avatar{
      width:46px;height:46px;
      border-radius:16px;
      background:linear-gradient(135deg, rgba(29,99,214,.13), rgba(22,184,166,.13));
      border:1px solid rgba(29,99,214,.12);
      display:grid;
      place-items:center;
      color:var(--brand);
      font-weight:800;
    }

    .review-card .quote{
      margin:0;
      color:var(--text);
      font-size:.96rem;
    }

    .review-card .who{
      margin-top:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      color:var(--muted);
      font-size:.86rem;
    }

    .review-feed{
      grid-column:span 4;
      padding:1rem;
      border-radius:22px;
      background:
        linear-gradient(180deg, #fff, #f8fbff);
      border:1px solid rgba(199,214,235,.92);
      box-shadow:var(--shadow-sm);
      display:grid;
      gap:.75rem;
    }

    .feed-card{
      border-radius:18px;
      background:#fff;
      border:1px solid rgba(199,214,235,.92);
      padding:.85rem .9rem;
      display:flex;
      gap:.75rem;
      align-items:flex-start;
    }

    .feed-thumb{
      width:54px;
      height:54px;
      border-radius:16px;
      flex:0 0 auto;
      background:
        radial-gradient(50px 50px at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 65%),
        linear-gradient(135deg, rgba(29,99,214,.86), rgba(77,146,255,.7));
      box-shadow:0 12px 22px rgba(29,99,214,.16);
      display:grid;
      place-items:center;
      color:#fff;
    }

    .feed-card h4{
      margin:0 0 .2rem;
      font-size:.95rem;
    }

    .feed-card p{
      margin:0;
      color:var(--text-2);
      font-size:.88rem;
      line-height:1.55;
    }

    .accordion{
      background:transparent;
      border:0;
    }

    .accordion-item{
      margin-bottom:.8rem;
      border-radius:20px;
      overflow:hidden;
      border:1px solid rgba(199,214,235,.92);
      background:#fff;
      box-shadow:var(--shadow-sm);
    }

    .accordion-title{
      display:block;
      padding:1rem 1.05rem;
      background:transparent;
      color:var(--text);
      font-weight:700;
      line-height:1.45;
      border:0;
    }

    .accordion-title:hover{
      background:rgba(29,99,214,.04);
      color:var(--brand);
    }

    .accordion-title:before{
      right:1rem;
      margin-top:-.5rem;
      border-color:var(--brand) transparent transparent;
    }

    .is-active > .accordion-title{
      border-bottom:1px solid rgba(199,214,235,.75);
      background:linear-gradient(135deg, rgba(29,99,214,.05), rgba(77,146,255,.03));
    }

    .accordion-content{
      color:var(--text-2);
      padding:1rem 1.05rem 1.1rem;
      border:0;
      background:#fff;
      font-size:.95rem;
    }

    .form-grid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:1rem;
    }

    .form-side{
      grid-column:span 4;
      padding:1rem;
      border-radius:22px;
      background:linear-gradient(180deg, #ffffff, #f8fbff);
      border:1px solid rgba(199,214,235,.92);
      box-shadow:var(--shadow-sm);
      display:flex;
      flex-direction:column;
      gap:1rem;
    }

    .trust-line{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }

    .trust-badge{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      padding:.45rem .68rem;
      border-radius:999px;
      background:rgba(29,99,214,.08);
      border:1px solid rgba(29,99,214,.12);
      color:var(--brand);
      font-size:.84rem;
      font-weight:700;
    }

    .form-card{
      grid-column:span 8;
      padding:1rem;
      border-radius:22px;
      background:#fff;
      border:1px solid rgba(199,214,235,.92);
      box-shadow:var(--shadow-sm);
    }

    .form-card label{
      display:block;
      margin-bottom:.35rem;
      font-weight:700;
      color:var(--text);
    }

    .form-card .help-text{
      color:var(--muted);
      font-size:.88rem;
      margin-top:.35rem;
    }

    .form-card input,
    .form-card textarea{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(199,214,235,.95);
      background:#fbfdff;
      color:var(--text);
      box-shadow:none;
      transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }

    .form-card input:hover,
    .form-card textarea:hover{
      border-color:rgba(29,99,214,.18);
      background:#fff;
    }

    .form-card input:focus,
    .form-card textarea:focus{
      border-color:rgba(29,99,214,.32);
      background:#fff;
      box-shadow:0 0 0 4px rgba(29,99,214,.08);
    }

    .form-card textarea{
      min-height:132px;
      resize:vertical;
    }

    .form-note{
      display:flex;
      align-items:flex-start;
      gap:.55rem;
      color:var(--text-2);
      font-size:.9rem;
      margin-top:.8rem;
    }

    .form-note i{
      color:var(--accent);
      margin-top:.15rem;
    }

    .site-footer{
      margin-top:1rem;
      padding:1.4rem 0 5.5rem;
    }

    .footer-panel{
      border-radius:28px;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
      border:1px solid rgba(199,214,235,.92);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .footer-grid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:1rem;
      padding:1.15rem 1.2rem;
    }

    .footer-brand{
      grid-column:span 5;
    }

    .footer-brand .brand-name{
      font-size:1.08rem;
    }

    .footer-brand p{
      margin:.55rem 0 0;
      color:var(--muted);
      font-size:.92rem;
      max-width:48ch;
    }

    .footer-links{
      grid-column:span 3;
    }

    .footer-links h4,
    .footer-note h4{
      margin:0 0 .6rem;
      font-size:1rem;
    }

    .footer-links a{
      display:block;
      color:var(--text-2);
      padding:.18rem 0;
    }

    .footer-links a:hover{
      color:var(--brand);
      transform:translateX(2px);
    }

    .footer-note{
      grid-column:span 4;
      color:var(--text-2);
      font-size:.92rem;
    }

    .footer-copy{
      border-top:1px solid rgba(199,214,235,.85);
      padding:1rem 1.2rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:.88rem;
      background:rgba(247,250,253,.82);
    }

    .empty-state{
      padding:1.2rem;
      border-radius:22px;
      border:1px dashed rgba(29,99,214,.24);
      background:linear-gradient(180deg, rgba(29,99,214,.04), rgba(77,146,255,.02));
      color:var(--text-2);
      text-align:center;
      box-shadow:var(--shadow-sm);
    }

    .empty-state p{
      margin:0;
      font-weight:700;
      letter-spacing:.2px;
    }

    .mobile-cta{
      display:none;
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:85;
      padding:.7rem .85rem calc(.7rem + env(safe-area-inset-bottom));
      background:rgba(247,251,255,.9);
      backdrop-filter:saturate(160%) blur(14px);
      border-top:1px solid rgba(198,214,233,.85);
      box-shadow:0 -10px 24px rgba(18,45,78,.05);
    }

    .mobile-cta-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.85rem;
    }

    .mobile-cta strong{
      display:block;
      font-size:.95rem;
      line-height:1.25;
    }

    .mobile-cta span{
      display:block;
      color:var(--muted);
      font-size:.82rem;
    }

    .mobile-cta .button{
      padding:.75rem 1rem;
      border-radius:14px;
      white-space:nowrap;
      flex:0 0 auto;
    }

    .soft-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(199,214,235,.95), transparent);
      margin:.3rem 0;
    }

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

    .tiny-list li{
      display:flex;
      gap:.5rem;
      align-items:flex-start;
      color:var(--text-2);
      font-size:.9rem;
    }

    .tiny-list i{
      color:var(--brand);
      margin-top:.2rem;
    }

    .inline-badges{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }

    .inline-badges .chip{
      font-size:.8rem;
      padding:.4rem .68rem;
    }

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

    .section-title-slim .left{
      min-width:0;
    }

    .section-title-slim h2,
    .section-title-slim h3{
      margin:0;
      font-size:clamp(1.16rem, 2vw, 1.5rem);
      line-height:1.3;
    }

    .section-title-slim p{
      margin:.35rem 0 0;
      color:var(--muted);
      max-width:68ch;
      font-size:.96rem;
    }

    @media (max-width: 74.99em){
      .hero-grid,
      .split-grid,
      .compare-grid,
      .reviews-grid,
      .form-grid,
      .footer-grid{
        grid-template-columns:repeat(12, 1fr);
      }
      .stat-card{grid-column:span 6}
      .matrix-card.feature{grid-column:span 12}
      .matrix-card.small{grid-column:span 6}
      .matrix-card.long{grid-column:span 12}
      .news-list-wrap{grid-column:span 12}
      .news-side{grid-column:span 12}
      .compare-card{grid-column:span 12}
      .review-summary,
      .review-card,
      .review-feed{grid-column:span 12}
      .form-side,
      .form-card{grid-column:span 12}
      .footer-brand,
      .footer-links,
      .footer-note{grid-column:span 12}
    }

    @media (max-width: 63.998em){
      .topbar-mobile{display:block}
      .sidebar-shell{min-height:auto}
      .page-main{padding-top:.9rem;padding-bottom:6rem}
      .shell-canvas{width:var(--sidebar-w)}
      .hero-grid{
        grid-template-columns:1fr;
      }
      .hero-copy h1{
        max-width:none;
      }
      .news-item{
        grid-template-columns:1fr;
      }
      .news-thumb{
        min-height:152px;
      }
      .news-body{
        padding:1rem;
      }
      .footer-copy{
        flex-direction:column;
        align-items:flex-start;
      }
    }

    @media (max-width: 47.998em){
      .page-main{padding-left:.85rem;padding-right:.85rem}
      .section-panel,
      .hero-card,
      .footer-panel,
      .compare-note,
      .accordion-item,
      .review-card,
      .review-summary,
      .review-feed,
      .side-card,
      .form-card,
      .form-side{
        border-radius:22px;
      }
      .stat-card,
      .matrix-card.small,
      .matrix-card.feature,
      .matrix-card.long{
        grid-column:span 12;
      }
      .countdown-row{
        grid-template-columns:1fr;
      }
      .countdown-note{
        flex-direction:column;
        align-items:flex-start;
      }
      .mobile-cta{display:block}
    }

    @media (max-width: 34.998em){
      .hero-copy h1{
        font-size:clamp(1.72rem, 8vw, 2.5rem);
      }
      .button{
        width:100%;
        justify-content:center;
      }
      .cta-row .button{
        width:100%;
      }
      .cta-row{
        display:grid;
        gap:.6rem;
      }
      .hero-badges{
        gap:.45rem;
      }
      .chip{
        width:100%;
        justify-content:flex-start;
      }
      .section-head p,
      .section-title-slim p{
        font-size:.92rem;
      }
    }

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *, *::before, *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
      }
    }

/* roulang page: article */
:root{
      --bg: #f4f8fc;
      --bg-soft: #eef5fb;
      --panel: #ffffff;
      --panel-2: #f8fbff;
      --line: #d7e3f0;
      --line-strong: #c4d2e1;
      --text: #17324d;
      --text-2: #4f6782;
      --muted: #7b8fa7;
      --brand: #1d63d6;
      --brand-2: #4d92ff;
      --accent: #16b8a6;
      --accent-2: #ffb547;
      --danger: #e15b64;
      --shadow: 0 14px 38px rgba(26, 56, 93, .08);
      --shadow-sm: 0 8px 24px rgba(26, 56, 93, .06);
      --radius: 18px;
      --radius-lg: 24px;
      --radius-xl: 30px;
      --space: clamp(1rem, 1.8vw, 1.4rem);
      --sidebar-w: 18rem;
    }

    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 15% 0%, rgba(29,99,214,.08), transparent 45%),
        radial-gradient(800px 520px at 100% 8%, rgba(22,184,166,.08), transparent 40%),
        linear-gradient(180deg, #f7fbff 0%, var(--bg) 42%, #f6f9fd 100%);
      line-height:1.7;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    *{box-sizing:border-box}
    ::selection{background:rgba(29,99,214,.16);color:var(--text)}
    a{
      color:inherit;
      text-decoration:none;
      transition:color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
    }
    a:hover{color:var(--brand)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    :focus-visible{
      outline:3px solid rgba(29,99,214,.2);
      outline-offset:2px;
    }

    .off-canvas-wrapper,
    .off-canvas-content{
      background:transparent;
      min-height:100vh;
    }

    .sidebar-drawer{
      width:var(--sidebar-w);
      background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      border-right:1px solid rgba(199,214,235,.9);
      box-shadow:12px 0 30px rgba(18,45,78,.04);
      padding:1rem;
    }

    .brand-box{
      padding:.95rem 1rem;
      border-radius:20px;
      background:linear-gradient(180deg, #ffffff, #f8fbff);
      border:1px solid rgba(207,220,235,.9);
      box-shadow:var(--shadow-sm);
    }
    .brand-mark{
      display:flex;
      align-items:center;
      gap:.8rem;
    }
    .brand-icon{
      width:46px;height:46px;
      border-radius:15px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg, var(--brand), #2f86ff);
      box-shadow:0 14px 26px rgba(29,99,214,.22);
      font-size:1.05rem;
      flex:0 0 auto;
    }
    .brand-name{
      display:block;
      font-size:1.03rem;
      font-weight:800;
      letter-spacing:.2px;
      line-height:1.25;
    }
    .brand-sub{
      display:block;
      margin:.35rem 0 0;
      color:var(--muted);
      font-size:.9rem;
    }

    .sidebar-shell{
      min-height:calc(100vh - 2rem);
      display:flex;
      flex-direction:column;
      gap:1rem;
      position:sticky;
      top:1rem;
    }

    .sidebar-nav{
      display:grid;
      gap:.55rem;
    }
    .sidebar-link{
      display:flex;
      align-items:center;
      gap:.75rem;
      padding:.92rem 1rem;
      border-radius:16px;
      color:var(--text-2);
      border:1px solid transparent;
      background:transparent;
      font-weight:700;
      letter-spacing:.1px;
    }
    .sidebar-link i{
      width:1rem;
      text-align:center;
      color:var(--brand);
      opacity:.95;
    }
    .sidebar-link:hover,
    .sidebar-link:focus-visible{
      background:rgba(29,99,214,.07);
      border-color:rgba(29,99,214,.12);
      color:var(--text);
      transform:translateX(2px);
    }
    .sidebar-link.is-active,
    .sidebar-link[aria-current="page"]{
      background:linear-gradient(135deg, rgba(29,99,214,.13), rgba(77,146,255,.08));
      border-color:rgba(29,99,214,.16);
      color:var(--brand);
      box-shadow:0 10px 20px rgba(29,99,214,.08);
    }

    .sidebar-cta{
      margin-top:auto;
      padding:1rem;
      border-radius:20px;
      background:linear-gradient(180deg, #f9fcff, #f2f8ff);
      border:1px solid rgba(199,214,235,.92);
      box-shadow:var(--shadow-sm);
    }
    .sidebar-cta h3{
      margin:0 0 .35rem;
      font-size:1rem;
      line-height:1.35;
    }
    .sidebar-cta p{
      margin:0 0 .95rem;
      color:var(--muted);
      font-size:.94rem;
    }

    .topbar-mobile{
      display:none;
      position:sticky;
      top:0;
      z-index:90;
      background:rgba(247,251,255,.88);
      backdrop-filter:saturate(160%) blur(14px);
      border-bottom:1px solid rgba(198,214,233,.82);
      box-shadow:0 8px 24px rgba(18,45,78,.04);
    }
    .topbar-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.85rem 1rem;
    }
    .topbar-brand{
      display:flex;
      align-items:center;
      gap:.72rem;
      min-width:0;
    }
    .topbar-brand .brand-mini{
      width:38px;height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, var(--brand), #52a0ff);
      color:#fff;
      box-shadow:0 12px 22px rgba(29,99,214,.2);
      flex:0 0 auto;
    }
    .topbar-brand strong{
      display:block;
      font-size:.98rem;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .topbar-brand span{
      display:block;
      color:var(--muted);
      font-size:.8rem;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .menu-toggle{
      border:1px solid rgba(199,214,235,.95);
      background:#fff;
      color:var(--text);
      border-radius:14px;
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      box-shadow:var(--shadow-sm);
    }
    .menu-toggle:hover,
    .menu-toggle:focus-visible{
      color:var(--brand);
      border-color:rgba(29,99,214,.22);
      transform:translateY(-1px);
    }

    .page-main{
      padding:1rem 1rem 4.5rem;
    }
    .main-shell{
      max-width:1440px;
      margin:0 auto;
    }
    .desktop-shell{
      display:grid;
      grid-template-columns:minmax(280px, var(--sidebar-w)) minmax(0, 1fr);
      gap:var(--space);
      align-items:start;
    }

    .section-panel{
      background:var(--panel);
      border:1px solid rgba(199,214,235,.92);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .section-pad{
      padding:clamp(1rem, 2vw, 1.5rem);
    }
    .section-head{
      margin-bottom:1rem;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }
    .section-head h2,
    .section-head h3{
      margin:0;
      font-size:clamp(1.18rem, 2vw, 1.55rem);
      line-height:1.25;
      letter-spacing:.1px;
    }
    .section-head p{
      margin:.45rem 0 0;
      color:var(--muted);
      max-width:62ch;
      font-size:.98rem;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.34rem .7rem;
      border-radius:999px;
      background:rgba(29,99,214,.09);
      border:1px solid rgba(29,99,214,.12);
      color:var(--brand);
      font-size:.82rem;
      font-weight:700;
      letter-spacing:.15px;
    }
    .eyebrow i{font-size:.85rem}

    .content-column{
      min-width:0;
      display:grid;
      gap:var(--space);
    }

    .article-head{
      background:
        linear-gradient(135deg, rgba(29,99,214,.07), rgba(77,146,255,.05) 40%, rgba(22,184,166,.05) 100%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border:1px solid rgba(199,214,235,.9);
      border-radius:28px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .article-head .section-pad{
      padding:clamp(1.1rem, 2.2vw, 1.65rem);
    }
    .breadcrumb{
      display:flex;
      align-items:center;
      gap:.45rem;
      flex-wrap:wrap;
      margin:.8rem 0 1rem;
      color:var(--muted);
      font-size:.9rem;
    }
    .breadcrumb a{
      color:var(--text-2);
      font-weight:700;
    }
    .breadcrumb a:hover{color:var(--brand)}
    .breadcrumb span{opacity:.8}

    .article-head h1{
      margin:.2rem 0 .75rem;
      font-size:clamp(1.6rem, 3vw, 2.35rem);
      line-height:1.22;
      letter-spacing:-.2px;
      color:var(--text);
    }
    .article-summary{
      margin:0;
      color:var(--text-2);
      font-size:1.02rem;
      max-width:78ch;
    }
    .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      margin-top:1rem;
    }
    .meta-item{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.5rem .75rem;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(199,214,235,.88);
      color:var(--text-2);
      font-size:.88rem;
      box-shadow:0 8px 18px rgba(18,45,78,.04);
    }
    .meta-item i{color:var(--brand)}
    .tag-list{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:1rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.48rem .76rem;
      border-radius:999px;
      background:rgba(29,99,214,.08);
      border:1px solid rgba(29,99,214,.12);
      color:var(--brand);
      font-size:.86rem;
      font-weight:700;
    }
    .tag.alt{
      background:rgba(22,184,166,.08);
      border-color:rgba(22,184,166,.14);
      color:#0f877a;
    }

    .article-layout{
      display:grid;
      grid-template-columns:minmax(0, 1.6fr) minmax(260px, .82fr);
      gap:var(--space);
      align-items:start;
      padding:var(--space);
    }
    .article-content-wrap{
      min-width:0;
      background:var(--panel);
      border:1px solid rgba(199,214,235,.92);
      border-radius:24px;
      box-shadow:var(--shadow-sm);
      overflow:hidden;
    }
    .article-content{
      padding:clamp(1rem, 2vw, 1.5rem);
      font-size:1.02rem;
      line-height:1.9;
      color:var(--text);
      word-break:break-word;
    }
    .article-content > :first-child{margin-top:0}
    .article-content > :last-child{margin-bottom:0}
    .article-content h2,
    .article-content h3,
    .article-content h4{
      color:var(--text);
      line-height:1.35;
      margin:1.5rem 0 .8rem;
      letter-spacing:-.1px;
    }
    .article-content h2{font-size:1.42rem}
    .article-content h3{font-size:1.18rem}
    .article-content p{
      margin:0 0 1rem;
      color:var(--text);
    }
    .article-content ul,
    .article-content ol{
      margin:0 0 1rem 1.2rem;
      padding:0;
    }
    .article-content li{margin:.35rem 0}
    .article-content a{
      color:var(--brand);
      font-weight:700;
      border-bottom:1px solid rgba(29,99,214,.18);
    }
    .article-content a:hover{
      color:#104fb8;
      border-bottom-color:rgba(16,79,184,.35);
    }
    .article-content img,
    .article-content video,
    .article-content iframe{
      max-width:100%;
      height:auto;
      border-radius:18px;
      border:1px solid rgba(199,214,235,.88);
      box-shadow:0 12px 26px rgba(18,45,78,.08);
      margin:1rem 0;
      background:#fff;
    }
    .article-content blockquote{
      margin:1.2rem 0;
      padding:1rem 1.1rem;
      background:linear-gradient(180deg, #f9fcff, #f4f9ff);
      border-left:4px solid var(--brand);
      border-radius:16px;
      color:var(--text-2);
      box-shadow:0 10px 24px rgba(18,45,78,.04);
    }
    .article-content hr{
      border:0;
      border-top:1px solid rgba(199,214,235,.9);
      margin:1.4rem 0;
    }
    .article-content code{
      padding:.16rem .38rem;
      border-radius:8px;
      background:#edf4ff;
      color:#0e4da8;
      font-size:.94em;
    }
    .article-content pre{
      margin:1rem 0;
      padding:1rem;
      border-radius:18px;
      overflow:auto;
      background:#0f1f31;
      color:#ecf4ff;
      box-shadow:0 14px 28px rgba(18,45,78,.12);
    }
    .article-content table{
      width:100%;
      border-collapse:collapse;
      margin:1rem 0;
      display:block;
      overflow:auto;
      border:1px solid rgba(199,214,235,.9);
      border-radius:16px;
    }
    .article-content th,
    .article-content td{
      padding:.8rem .9rem;
      border-bottom:1px solid rgba(215,227,240,.9);
      text-align:left;
      white-space:nowrap;
    }
    .article-content th{
      background:#f7fbff;
      color:var(--text);
      font-weight:800;
    }
    .article-content figure{
      margin:1rem 0;
    }
    .article-content figcaption{
      margin-top:.55rem;
      color:var(--muted);
      font-size:.9rem;
      text-align:center;
    }

    .article-aside{
      display:grid;
      gap:var(--space);
      position:sticky;
      top:1rem;
    }
    .info-card{
      background:linear-gradient(180deg, #ffffff, #f8fbff);
      border:1px solid rgba(199,214,235,.92);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      padding:1rem;
    }
    .info-card h3{
      margin:0 0 .8rem;
      font-size:1.02rem;
      line-height:1.35;
    }
    .info-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:.75rem;
    }
    .info-list li{
      display:flex;
      gap:.7rem;
      align-items:flex-start;
      color:var(--text-2);
      font-size:.95rem;
    }
    .info-list li i{
      margin-top:.2rem;
      color:var(--brand);
      width:1rem;
      text-align:center;
      flex:0 0 auto;
    }
    .inline-links{
      display:grid;
      gap:.6rem;
      margin-top:.85rem;
    }

    .button,
    .site-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      border-radius:14px;
      font-weight:800;
      letter-spacing:.1px;
      padding:.88rem 1.15rem;
      border:1px solid transparent;
      box-shadow:none;
      text-decoration:none;
      transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
    }
    .button.primary,
    .site-btn.primary{
      background:linear-gradient(135deg, var(--brand), var(--brand-2));
      color:#fff;
      border-color:rgba(29,99,214,.08);
      box-shadow:0 14px 26px rgba(29,99,214,.18);
    }
    .button.primary:hover,
    .site-btn.primary:hover{
      color:#fff;
      transform:translateY(-1px);
      box-shadow:0 16px 30px rgba(29,99,214,.22);
    }
    .button.secondary,
    .site-btn.secondary{
      background:#fff;
      color:var(--text);
      border-color:rgba(199,214,235,.96);
      box-shadow:var(--shadow-sm);
    }
    .button.secondary:hover,
    .site-btn.secondary:hover{
      background:#f8fbff;
      color:var(--brand);
      border-color:rgba(29,99,214,.18);
      transform:translateY(-1px);
    }

    .related-panel{
      background:linear-gradient(180deg, #ffffff, #f8fbff);
      border:1px solid rgba(199,214,235,.92);
      border-radius:24px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .related-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:var(--space);
    }
    .related-card{
      display:block;
      padding:1rem;
      border-radius:20px;
      background:#fff;
      border:1px solid rgba(199,214,235,.9);
      box-shadow:var(--shadow-sm);
      min-height:100%;
    }
    .related-card:hover{
      transform:translateY(-2px);
      border-color:rgba(29,99,214,.16);
      box-shadow:0 16px 30px rgba(18,45,78,.08);
    }
    .related-card .rel-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:.75rem;
      color:var(--muted);
      font-size:.88rem;
    }
    .related-card h4{
      margin:0 0 .45rem;
      font-size:1.02rem;
      line-height:1.45;
      color:var(--text);
    }
    .related-card p{
      margin:0;
      color:var(--text-2);
      font-size:.94rem;
    }

    .empty-state{
      min-height:320px;
      display:grid;
      place-items:center;
      text-align:center;
      padding:2rem 1rem;
    }
    .empty-state-inner{
      max-width:28rem;
      display:grid;
      gap:1rem;
      justify-items:center;
    }
    .empty-icon{
      width:70px;height:70px;
      border-radius:22px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(29,99,214,.12), rgba(22,184,166,.12));
      color:var(--brand);
      font-size:1.6rem;
      box-shadow:0 16px 28px rgba(29,99,214,.12);
    }
    .empty-state h1,
    .empty-state h2{
      margin:0;
      font-size:1.5rem;
      line-height:1.3;
    }
    .empty-state p{
      margin:0;
      color:var(--text-2);
    }
    .empty-actions{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:.75rem;
      margin-top:.25rem;
    }

    .site-footer{
      padding:0 1rem 1rem;
    }
    .footer-panel{
      max-width:1440px;
      margin:0 auto;
      background:linear-gradient(180deg, #ffffff, #f8fbff);
      border:1px solid rgba(199,214,235,.92);
      border-radius:28px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0, .8fr));
      gap:var(--space);
      padding:clamp(1rem, 2vw, 1.5rem);
    }
    .footer-brand p,
    .footer-note p{
      margin:.75rem 0 0;
      color:var(--text-2);
      font-size:.95rem;
      line-height:1.8;
    }
    .footer-links h4,
    .footer-note h4{
      margin:0 0 .8rem;
      font-size:1rem;
      color:var(--text);
    }
    .footer-links{
      display:grid;
      align-content:start;
      gap:.4rem;
    }
    .footer-links a{
      display:inline-flex;
      width:fit-content;
      color:var(--text-2);
      padding:.12rem 0;
      border-bottom:1px solid transparent;
    }
    .footer-links a:hover{
      color:var(--brand);
      border-bottom-color:rgba(29,99,214,.22);
    }
    .footer-copy{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:.75rem 1rem;
      padding:1rem 1.5rem 1.1rem;
      color:var(--muted);
      border-top:1px solid rgba(215,227,240,.9);
      font-size:.92rem;
      background:linear-gradient(180deg, #fbfdff, #f8fbff);
    }

    .light-card{
      background:linear-gradient(180deg, #ffffff, #f8fbff);
      border:1px solid rgba(199,214,235,.92);
      border-radius:24px;
      box-shadow:var(--shadow-sm);
    }

    @media (max-width: 1024px){
      .desktop-shell{
        grid-template-columns:1fr;
      }
      .article-layout{
        grid-template-columns:1fr;
      }
      .article-aside{
        position:static;
      }
      .sidebar-drawer{
        box-shadow:12px 0 30px rgba(18,45,78,.08);
      }
    }

    @media (max-width: 768px){
      .topbar-mobile{
        display:block;
      }
      .page-main{
        padding:0 1rem 3.5rem;
      }
      .sidebar-panel.show-for-large{
        display:none !important;
      }
      .article-head h1{
        font-size:1.55rem;
      }
      .footer-grid{
        grid-template-columns:1fr;
      }
      .footer-copy{
        flex-direction:column;
        align-items:flex-start;
      }
      .related-grid{
        grid-template-columns:1fr;
      }
      .article-content{
        font-size:1rem;
      }
    }

    @media (max-width: 520px){
      .topbar-inner{
        padding:.8rem .85rem;
      }
      .topbar-brand strong{
        font-size:.94rem;
      }
      .topbar-brand span{
        display:none;
      }
      .section-pad,
      .article-head .section-pad{
        padding:1rem;
      }
      .sidebar-drawer{
        width:min(88vw, var(--sidebar-w));
        padding:.85rem;
      }
      .brand-box,
      .sidebar-cta,
      .info-card,
      .related-card,
      .section-panel,
      .article-head{
        border-radius:20px;
      }
      .meta-item,
      .tag{
        font-size:.82rem;
      }
      .button,
      .site-btn{
        width:100%;
      }
      .empty-actions{
        width:100%;
      }
    }