/* roulang page: index */
:root{
      --bg:#0b1117;
      --bg2:#0f1722;
      --panel:#111a26;
      --panel2:#0f1824;
      --line:rgba(148,163,184,.16);
      --line-strong:rgba(120,200,255,.28);
      --text:#e8eef7;
      --muted:#9fb0c3;
      --accent:#78c8ff;
      --accent2:#33d0bf;
      --radius:20px;
      --shadow:0 18px 50px rgba(4,10,18,.36);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;
      background:
        radial-gradient(circle at 12% 12%, rgba(120,200,255,.14), transparent 24%),
        radial-gradient(circle at 88% 10%, rgba(51,208,191,.10), transparent 20%),
        linear-gradient(180deg, #0b1117 0%, #0d1420 48%, #0a1017 100%);
      color:var(--text);
      line-height:1.65;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    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:32px 32px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.10) 68%, rgba(0,0,0,0));
      opacity:.34;
      z-index:-1;
    }
    ::selection{background:rgba(120,200,255,.25);color:#fff}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    .container-page{width:min(1200px, calc(100% - 2rem)); margin-inline:auto}
    .panel{
      background:linear-gradient(180deg, rgba(17,26,38,.93), rgba(12,19,29,.92));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
    }
    .panel:hover{transform:translateY(-2px); border-color:var(--line-strong); box-shadow:0 22px 60px rgba(4,10,18,.45)}
    .nav-link{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.55rem .85rem;
      border-radius:999px;
      color:rgba(232,238,247,.88);
      transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
    }
    .nav-link:hover,.nav-link:focus-visible{
      background:rgba(255,255,255,.06);
      color:#fff;
      transform:translateY(-1px);
      outline:none;
    }
    .nav-link.active{
      background:linear-gradient(135deg, rgba(120,200,255,.18), rgba(51,208,191,.14));
      color:#fff;
      box-shadow:0 0 0 1px rgba(120,200,255,.18) inset;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.42rem .7rem;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.20);
      background:rgba(255,255,255,.04);
      color:rgba(232,238,247,.88);
      transition:all .2s ease;
      white-space:nowrap;
    }
    .chip:hover{border-color:rgba(120,200,255,.32); background:rgba(120,200,255,.08); color:#fff}
    .chip.active{
      background:linear-gradient(135deg, rgba(120,200,255,.18), rgba(51,208,191,.14));
      border-color:rgba(120,200,255,.35);
      color:#fff;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      padding:.86rem 1.2rem;
      font-weight:600;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      border:1px solid transparent;
      cursor:pointer;
      user-select:none;
    }
    .btn:hover,.btn:focus-visible{transform:translateY(-1px); outline:none}
    .btn-primary{
      background:linear-gradient(135deg, #79c9ff 0%, #33d0bf 100%);
      color:#07101a;
      box-shadow:0 18px 36px rgba(40, 151, 186, .22);
    }
    .btn-primary:hover{box-shadow:0 22px 44px rgba(40, 151, 186, .28)}
    .btn-secondary{
      background:rgba(255,255,255,.04);
      border-color:rgba(148,163,184,.24);
      color:#edf5ff;
    }
    .btn-secondary:hover{background:rgba(255,255,255,.07); border-color:rgba(120,200,255,.32)}
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.38rem .7rem;
      border-radius:999px;
      background:rgba(120,200,255,.08);
      border:1px solid rgba(120,200,255,.18);
      color:#cfe7ff;
      font-size:.82rem;
      letter-spacing:.04em;
    }
    .title-lg{
      font-size:clamp(2rem, 4vw, 3.5rem);
      line-height:1.08;
      letter-spacing:-.03em;
      font-weight:800;
    }
    .title-md{
      font-size:clamp(1.35rem, 2.5vw, 2rem);
      line-height:1.15;
      font-weight:700;
      letter-spacing:-.02em;
    }
    .muted{color:var(--muted)}
    .card-soft{
      background:linear-gradient(180deg, rgba(18,28,41,.94), rgba(12,19,29,.94));
      border:1px solid rgba(148,163,184,.14);
      border-radius:18px;
      transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .card-soft:hover{
      transform:translateY(-2px);
      border-color:rgba(120,200,255,.26);
      box-shadow:0 16px 40px rgba(4,10,18,.30);
    }
    .metric{
      padding:1rem 1.1rem;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(148,163,184,.14);
    }
    .metric-num{
      font-size:1.35rem;
      font-weight:800;
      letter-spacing:-.03em;
      color:#fff;
    }
    .section-space{padding:4.5rem 0}
    .list-link{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 0;
      border-bottom:1px solid rgba(148,163,184,.12);
      transition:color .2s ease, transform .2s ease;
    }
    .list-link:hover{color:#fff; transform:translateX(2px)}
    .faq details{
      border-top:1px solid rgba(148,163,184,.12);
      padding:1rem 0;
    }
    .faq details:last-child{border-bottom:1px solid rgba(148,163,184,.12)}
    .faq summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      gap:1rem;
      font-weight:600;
      color:#edf5ff;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq summary::after{
      content:"+";
      color:#9fdcff;
      font-weight:700;
      transition:transform .2s ease;
    }
    .faq details[open] summary::after{content:"—"}
    .faq p{margin:.8rem 0 0; color:var(--muted)}
    .mobile-drawer{
      transition:max-height .3s ease, opacity .25s ease, transform .25s ease;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.3rem .55rem;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      color:#d6e6f8;
      border:1px solid rgba(148,163,184,.14);
      font-size:.78rem;
    }
    .stat-bar{
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      overflow:hidden;
      border:1px solid rgba(148,163,184,.10);
    }
    .stat-bar > span{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(120,200,255,.95), rgba(51,208,191,.95));
    }
    .mini-tile{
      min-height:84px;
      padding: .9rem;
      border-radius:16px;
      border:1px solid rgba(148,163,184,.14);
      background:rgba(255,255,255,.035);
      transition:transform .2s ease,border-color .2s ease,background .2s ease;
    }
    .mini-tile:hover{
      transform:translateY(-2px);
      border-color:rgba(120,200,255,.30);
      background:rgba(120,200,255,.07);
    }
    .grid-grid{
      display:grid;
      gap:1rem;
    }
    .news-item{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 0;
      border-bottom:1px solid rgba(148,163,184,.12);
    }
    .news-item:hover .news-title{color:#fff}
    .news-title{transition:color .2s ease}
    .toast{
      position:fixed;
      right:1rem;
      bottom:1rem;
      z-index:60;
      background:rgba(11,17,23,.92);
      border:1px solid rgba(120,200,255,.22);
      color:#f0f7ff;
      padding:.85rem 1rem;
      border-radius:14px;
      box-shadow:var(--shadow);
      opacity:0;
      transform:translateY(16px);
      pointer-events:none;
      transition:opacity .25s ease, transform .25s ease;
    }
    .toast.show{opacity:1; transform:translateY(0)}
    @media (max-width: 1024px){
      .section-space{padding:3.75rem 0}
    }
    @media (max-width: 768px){
      .title-lg{font-size:clamp(1.8rem, 7vw, 2.6rem)}
      .container-page{width:min(100% - 1.25rem, 1200px)}
      .section-space{padding:3.25rem 0}
    }
    @media (max-width: 520px){
      .nav-link{padding:.5rem .7rem}
      .btn{width:100%}
      .mobile-stack > *{width:100%}
    }

/* roulang page: category1 */
:root {
      --bg: #081018;
      --bg-2: #0d1722;
      --panel: #101c2a;
      --panel-2: #142131;
      --line: rgba(148, 163, 184, 0.16);
      --text: #e5eef7;
      --muted: #8ca0b8;
      --accent: #2dd4bf;
      --accent-2: #7dd3fc;
      --accent-3: #93c5fd;
      --radius: 18px;
      --shadow: 0 16px 40px rgba(2, 8, 23, 0.35);
      --shadow-hover: 0 20px 50px rgba(45, 212, 191, 0.12);
      --container: 1200px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(circle at top left, rgba(45, 212, 191, 0.08), transparent 30%),
        radial-gradient(circle at 85% 8%, rgba(125, 211, 252, 0.08), transparent 24%),
        linear-gradient(180deg, #09111a 0%, #071019 100%);
      color: var(--text);
      line-height: 1.7;
      letter-spacing: 0;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, select { font: inherit; }
    ::selection { background: rgba(45, 212, 191, 0.25); color: #fff; }
    .container-page { width: min(var(--container), calc(100% - 2rem)); margin: 0 auto; }
    .section-space { padding-top: 5rem; padding-bottom: 5rem; }
    .grid-lines {
      background-image:
        linear-gradient(to right, rgba(148,163,184,0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148,163,184,0.06) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent 92%);
    }
    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .7rem 1rem;
      border-radius: 9999px;
      color: #c6d3e2;
      transition: all .2s ease;
      border: 1px solid transparent;
    }
    .nav-link:hover {
      border-color: rgba(125, 211, 252, 0.22);
      background: rgba(13, 23, 34, 0.65);
      color: #fff;
      transform: translateY(-1px);
    }
    .nav-link.active {
      color: #fff;
      background: rgba(45, 212, 191, 0.12);
      border-color: rgba(45, 212, 191, 0.32);
      box-shadow: 0 10px 24px rgba(45, 212, 191, 0.08);
    }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      border: 1px solid var(--line);
      background: rgba(16, 28, 42, 0.72);
      color: #d8e4f0;
      padding: .45rem .8rem;
      border-radius: 9999px;
      font-size: .85rem;
      transition: all .2s ease;
      white-space: nowrap;
    }
    .tag:hover { border-color: rgba(125, 211, 252, 0.28); background: rgba(20, 33, 49, 0.9); transform: translateY(-1px); }
    .tag.active { border-color: rgba(45, 212, 191, 0.4); background: rgba(45, 212, 191, 0.12); color: #fff; }
    .panel {
      background: linear-gradient(180deg, rgba(16, 28, 42, 0.94), rgba(13, 23, 34, 0.94));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .panel-soft {
      background: rgba(16, 28, 42, 0.72);
      border: 1px solid var(--line);
      border-radius: 16px;
    }
    .card {
      background: linear-gradient(180deg, rgba(20, 33, 49, 0.92), rgba(13, 23, 34, 0.92));
      border: 1px solid rgba(148, 163, 184, 0.14);
      border-radius: 16px;
      box-shadow: var(--shadow);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .card:hover {
      transform: translateY(-2px);
      border-color: rgba(45, 212, 191, 0.28);
      box-shadow: var(--shadow-hover);
    }
    .btn-primary, .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: .9rem 1.2rem;
      border-radius: 9999px;
      transition: all .2s ease;
      border: 1px solid transparent;
      font-weight: 600;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--accent), #22c55e);
      color: #041018;
      box-shadow: 0 18px 32px rgba(45, 212, 191, 0.18);
    }
    .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
    .btn-secondary {
      background: rgba(16, 28, 42, 0.7);
      color: #eaf3fb;
      border-color: rgba(125, 211, 252, 0.18);
    }
    .btn-secondary:hover { background: rgba(20, 33, 49, 0.94); border-color: rgba(125, 211, 252, 0.28); transform: translateY(-1px); }
    .metric {
      background: rgba(12, 22, 34, 0.85);
      border: 1px solid rgba(148, 163, 184, 0.12);
      border-radius: 14px;
      padding: 1rem;
    }
    .thumb {
      aspect-ratio: 16 / 9;
      background:
        linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(125, 211, 252, 0.08)),
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.28), transparent 18%),
        linear-gradient(135deg, #0f1b29, #18273a 60%, #0f1b29);
      border-bottom: 1px solid rgba(148, 163, 184, 0.12);
      position: relative;
      overflow: hidden;
    }
    .thumb::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 20px 20px;
      opacity: .35;
      pointer-events: none;
    }
    .list-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .85rem 0;
      border-bottom: 1px solid rgba(148, 163, 184, 0.12);
      color: #d6e1ee;
      transition: color .2s ease, transform .2s ease;
    }
    .list-link:hover { color: #fff; transform: translateX(2px); }
    .faq-item {
      border-top: 1px solid rgba(148, 163, 184, 0.14);
    }
    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.1rem 0;
      text-align: left;
      color: #fff;
      background: transparent;
      border: 0;
      cursor: pointer;
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .25s ease;
      color: var(--muted);
      padding-right: 2rem;
    }
    .faq-item.open .faq-answer { max-height: 160px; padding-bottom: 1rem; }
    .faq-icon { transition: transform .2s ease; }
    .faq-item.open .faq-icon { transform: rotate(45deg); }
    .mobile-menu {
      display: none;
      position: absolute;
      top: calc(100% + .75rem);
      left: 0;
      right: 0;
      padding: .75rem;
      border-radius: 18px;
      border: 1px solid rgba(148, 163, 184, 0.16);
      background: rgba(7, 16, 25, 0.98);
      box-shadow: var(--shadow);
      z-index: 40;
    }
    .mobile-menu.open { display: block; }
    @media (max-width: 1024px) {
      .section-space { padding-top: 4rem; padding-bottom: 4rem; }
    }
    @media (max-width: 768px) {
      .container-page { width: min(var(--container), calc(100% - 1.25rem)); }
      .section-space { padding-top: 3.25rem; padding-bottom: 3.25rem; }
    }

/* roulang page: category2 */
:root{
      --bg:#08131a;
      --bg-soft:#0c1821;
      --surface:#0f1d28;
      --surface-2:#132431;
      --line:rgba(255,255,255,.08);
      --line-strong:rgba(125,214,230,.22);
      --text:#eef5fb;
      --muted:#8fa5b8;
      --accent:#4dd0e1;
      --accent-2:#7ce5a7;
      --accent-3:#7da7ff;
      --shadow:0 22px 54px rgba(0,0,0,.28);
      --radius:22px;
      --radius-sm:16px;
      --section: clamp(1.25rem, 2vw, 2rem);
      --container: min(1280px, calc(100% - 2rem));
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      line-height:1.6;
      background:
        radial-gradient(circle at 20% 10%, rgba(77,208,225,.12), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(124,229,167,.10), transparent 22%),
        radial-gradient(circle at 50% 88%, rgba(125,167,255,.08), transparent 24%),
        linear-gradient(180deg, #08131a 0%, #071118 42%, #061018 100%);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 56px 56px;
      opacity:.12;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 85%);
      z-index:-1;
    }
    a{color:inherit; text-decoration:none}
    img{display:block; max-width:100%}
    button, input, select, textarea{
      font:inherit;
      color:inherit;
    }
    ::selection{background:rgba(77,208,225,.25); color:#fff}
    :focus-visible{
      outline:2px solid rgba(77,208,225,.8);
      outline-offset:3px;
    }
    .container-page{width:var(--container); margin-inline:auto}
    .section-space{padding-block:clamp(1.4rem, 2.6vw, 2.5rem)}
    .surface{
      position:relative;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .surface::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(130deg, rgba(77,208,225,.08), transparent 28%, transparent 72%, rgba(124,229,167,.06));
      opacity:.45;
    }
    .surface-inner{position:relative; z-index:1}
    .soft-grid{
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at top left, rgba(77,208,225,.16), transparent 20%),
        radial-gradient(circle at bottom right, rgba(124,229,167,.10), transparent 18%);
      opacity:.7;
      pointer-events:none;
    }
    .nav-link{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.65rem .95rem;
      border-radius:999px;
      color:#bfd0df;
      border:1px solid transparent;
      transition:all .18s ease;
      font-size:.95rem;
      line-height:1;
    }
    .nav-link:hover{
      color:#fff;
      border-color:rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      transform:translateY(-1px);
    }
    .nav-link.active{
      color:#08131a;
      background:linear-gradient(135deg, rgba(77,208,225,1), rgba(124,229,167,1));
      box-shadow:0 10px 26px rgba(77,208,225,.18);
    }
    .list-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.8rem 0;
      color:#d7e4ee;
      border-bottom:1px solid rgba(255,255,255,.06);
      transition:all .18s ease;
    }
    .list-link:hover{
      color:#fff;
      padding-left:.25rem;
      border-bottom-color:rgba(77,208,225,.25);
    }
    .badge-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid rgba(77,208,225,.18);
      color:#cfeef4;
      background:rgba(77,208,225,.08);
      border-radius:999px;
      padding:.38rem .75rem;
      font-size:.82rem;
      white-space:nowrap;
    }
    .badge-chip.secondary{
      border-color:rgba(255,255,255,.08);
      color:#d7e4ee;
      background:rgba(255,255,255,.03);
    }
    .btn-primary,
    .btn-secondary,
    .btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      padding:.9rem 1.2rem;
      transition:all .18s ease;
      font-weight:600;
      border:1px solid transparent;
      line-height:1;
      white-space:nowrap;
    }
    .btn-primary{
      color:#071118;
      background:linear-gradient(135deg, #4dd0e1, #7ce5a7);
      box-shadow:0 14px 28px rgba(77,208,225,.18);
    }
    .btn-primary:hover{
      transform:translateY(-1px);
      filter:brightness(1.02);
      box-shadow:0 18px 32px rgba(77,208,225,.24);
    }
    .btn-secondary{
      color:#eff7fc;
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.09);
    }
    .btn-secondary:hover{
      background:rgba(255,255,255,.07);
      border-color:rgba(77,208,225,.22);
      transform:translateY(-1px);
    }
    .btn-ghost{
      color:#d7e4ee;
      background:transparent;
      border-color:rgba(255,255,255,.09);
    }
    .btn-ghost:hover{
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.16);
      transform:translateY(-1px);
    }
    .pill-group{
      display:inline-flex;
      border-radius:999px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.03);
    }
    .pill-group button{
      padding:.55rem .82rem;
      border:0;
      background:transparent;
      color:#9fb4c7;
      transition:all .18s ease;
      font-size:.8rem;
      line-height:1;
    }
    .pill-group button:hover{color:#fff; background:rgba(255,255,255,.05)}
    .pill-group button.active{
      color:#071118;
      background:linear-gradient(135deg, #4dd0e1, #7ce5a7);
      font-weight:700;
    }
    .stat-card,
    .mini-card,
    .info-card{
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      border-radius:18px;
      box-shadow:0 12px 28px rgba(0,0,0,.16);
      transition:all .18s ease;
    }
    .stat-card:hover,
    .mini-card:hover,
    .info-card:hover{
      transform:translateY(-2px);
      border-color:rgba(77,208,225,.22);
      box-shadow:0 18px 34px rgba(0,0,0,.22);
    }
    .thumb{
      position:relative;
      overflow:hidden;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(circle at 30% 30%, rgba(77,208,225,.25), transparent 26%),
        radial-gradient(circle at 72% 70%, rgba(124,229,167,.18), transparent 24%),
        linear-gradient(135deg, rgba(18,36,49,1), rgba(8,19,26,1));
    }
    .thumb::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%),
        linear-gradient(90deg, transparent 0 49%, rgba(255,255,255,.05) 50%, transparent 51% 100%);
      opacity:.5;
      mix-blend-mode:screen;
    }
    .thumb::after{
      content:"";
      position:absolute;
      inset:-20%;
      background:linear-gradient(135deg, transparent 32%, rgba(255,255,255,.08), transparent 68%);
      transform:translateX(-15%) rotate(10deg);
      animation: shine 8s linear infinite;
      opacity:.25;
    }
    @keyframes shine{
      0%{transform:translateX(-22%) rotate(10deg)}
      100%{transform:translateX(22%) rotate(10deg)}
    }
    .section-title{
      font-size:clamp(1.35rem, 2vw, 2rem);
      line-height:1.2;
      font-weight:800;
      letter-spacing:.01em;
    }
    .section-lead{
      color:#99adbe;
      max-width:68ch;
      font-size:.95rem;
    }
    .count-box{
      min-width:4.5rem;
      padding:.8rem .65rem;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      text-align:center;
    }
    .count-box strong{
      display:block;
      font-size:1.5rem;
      line-height:1;
      color:#fff;
      letter-spacing:.04em;
    }
    .count-box span{
      display:block;
      margin-top:.35rem;
      font-size:.78rem;
      color:#8ea4b7;
    }
    .faq-item{
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      background:rgba(255,255,255,.03);
      overflow:hidden;
      transition:all .18s ease;
    }
    .faq-item:hover{
      border-color:rgba(77,208,225,.18);
      background:rgba(255,255,255,.045);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.05rem;
      font-weight:650;
      color:#eff7fc;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      color:#8ea4b7;
      font-size:1.1rem;
      line-height:1;
      transition:transform .18s ease;
    }
    .faq-item[open] summary::after{
      content:"–";
      color:#4dd0e1;
    }
    .faq-body{
      padding:0 1.05rem 1rem 1.05rem;
      color:#9eb2c4;
      font-size:.94rem;
    }
    .mobile-drawer{
      position:fixed;
      inset:4.6rem 1rem auto 1rem;
      z-index:60;
      border:1px solid rgba(255,255,255,.10);
      border-radius:22px;
      background:rgba(7,17,24,.95);
      box-shadow:var(--shadow);
      backdrop-filter:blur(16px);
    }
    .hidden-soft{display:none}
    @media (min-width: 1024px){
      .hidden-soft{display:block}
    }
    @media (max-width: 767px){
      .section-space{padding-block:1.1rem}
      .section-title{font-size:1.35rem}
    }