/* roulang page: index */
:root{
      --color-bg:#f5f0e6;
      --color-surface:#fffaf0;
      --color-surface-2:#eef3ed;
      --color-ink:#10251f;
      --color-muted:#63756d;
      --color-pine:#123b32;
      --color-moss:#245f4f;
      --color-lime:#b9f24b;
      --color-mint:#8ee6bd;
      --color-border:rgba(18,59,50,.14);
      --shadow-soft:0 18px 55px rgba(16,37,31,.12);
      --shadow-lift:0 24px 70px rgba(16,37,31,.18);
      --radius-lg:28px;
      --radius-xl:36px;
      --sidebar:236px;
      --mobile-top:68px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      color:var(--color-ink);
      background:
        radial-gradient(circle at 78% 8%, rgba(185,242,75,.22), transparent 26rem),
        radial-gradient(circle at 18% 34%, rgba(142,230,189,.18), transparent 22rem),
        linear-gradient(135deg,#f5f0e6 0%,#eef3ed 58%,#f8f3e8 100%);
      line-height:1.75;
      min-height:100vh;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img,svg{display:block;max-width:100%}
    button,input,select,textarea{font:inherit}
    button{border:0;cursor:pointer}
    ::selection{background:rgba(185,242,75,.75);color:#10251f}
    :focus-visible{outline:3px solid rgba(185,242,75,.95);outline-offset:3px}
    .site-shell{min-height:100vh}
    .desktop-sidebar{
      position:fixed;
      inset:18px auto 18px 18px;
      width:var(--sidebar);
      z-index:40;
      border:1px solid rgba(255,255,255,.14);
      border-radius:32px;
      background:
        linear-gradient(180deg,rgba(18,59,50,.96),rgba(16,37,31,.98)),
        radial-gradient(circle at 30% 10%,rgba(185,242,75,.18),transparent 16rem);
      color:#f8f3e8;
      box-shadow:0 24px 70px rgba(16,37,31,.26);
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .desktop-sidebar:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
      background-size:18px 18px;
      opacity:.14;
      pointer-events:none;
    }
    .brand{
      position:relative;
      display:flex;
      align-items:center;
      gap:12px;
      padding:24px 20px 18px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .brand-mark{
      width:46px;height:46px;flex:0 0 46px;
      border-radius:16px;
      background:linear-gradient(135deg,var(--color-lime),var(--color-mint));
      color:#10251f;
      display:grid;
      place-items:center;
      font-weight:900;
      letter-spacing:-.08em;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 32px rgba(185,242,75,.18);
    }
    .brand-name{font-size:15px;font-weight:800;line-height:1.15;word-break:break-all}
    .brand-tag{margin-top:4px;font-size:12px;color:rgba(248,243,232,.66)}
    .side-nav{
      position:relative;
      padding:18px 12px;
      display:grid;
      gap:8px;
    }
    .nav-link{
      position:relative;
      display:flex;
      align-items:center;
      gap:11px;
      min-height:48px;
      padding:12px 14px;
      border-radius:18px;
      color:rgba(248,243,232,.76);
      font-weight:700;
      font-size:14px;
      transition:background .2s ease,color .2s ease,transform .2s ease;
    }
    .nav-link svg{width:19px;height:19px;opacity:.9}
    .nav-link:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateX(2px)}
    .nav-link.active{
      background:rgba(185,242,75,.14);
      color:#faffed;
      box-shadow:inset 0 0 0 1px rgba(185,242,75,.18);
    }
    .nav-link.active:before{
      content:"";
      position:absolute;
      left:0;
      top:12px;
      bottom:12px;
      width:3px;
      border-radius:999px;
      background:var(--color-lime);
    }
    .side-status{
      position:relative;
      margin:auto 14px 14px;
      padding:16px;
      border-radius:24px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
    }
    .status-dot{
      width:9px;height:9px;border-radius:999px;background:var(--color-lime);
      box-shadow:0 0 0 6px rgba(185,242,75,.12);
    }
    .mobile-header{
      display:none;
      position:sticky;
      top:0;
      z-index:50;
      height:var(--mobile-top);
      padding:10px 14px;
      background:rgba(245,240,230,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid var(--color-border);
    }
    .mobile-panel{
      display:none;
      position:fixed;
      top:76px;
      left:14px;
      right:14px;
      z-index:49;
      padding:12px;
      border-radius:26px;
      background:#fffaf0;
      border:1px solid var(--color-border);
      box-shadow:var(--shadow-lift);
    }
    .mobile-panel.open{display:block}
    .main-area{
      margin-left:calc(var(--sidebar) + 36px);
      padding:18px 22px 0 0;
    }
    .page-container{
      width:min(100%,1320px);
      margin:0 auto;
    }
    .section{padding:42px 0}
    .section-title{
      font-size:clamp(28px,4vw,44px);
      line-height:1.18;
      font-weight:850;
      letter-spacing:-.04em;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(36,95,79,.08);
      color:var(--color-moss);
      border:1px solid rgba(36,95,79,.14);
      font-size:13px;
      font-weight:800;
    }
    .section-kicker:before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--color-lime);
      box-shadow:0 0 0 5px rgba(185,242,75,.18);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:48px;
      padding:12px 18px;
      border-radius:999px;
      font-weight:850;
      letter-spacing:-.01em;
      transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
      white-space:nowrap;
    }
    .btn-primary{
      background:var(--color-pine);
      color:#fffaf0;
      box-shadow:0 16px 34px rgba(18,59,50,.24);
    }
    .btn-primary:hover{transform:translateY(-2px);background:#0d2f28;box-shadow:0 22px 48px rgba(18,59,50,.3)}
    .btn-secondary{
      background:rgba(255,250,240,.66);
      color:var(--color-pine);
      border:1px solid rgba(18,59,50,.18);
    }
    .btn-secondary:hover{transform:translateY(-2px);background:rgba(223,233,222,.82);border-color:rgba(18,59,50,.28)}
    .badge,.tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      line-height:1;
    }
    .badge{background:var(--color-lime);color:var(--color-ink)}
    .tag{background:rgba(18,59,50,.07);color:var(--color-moss);border:1px solid rgba(18,59,50,.08)}
    .card{
      border-radius:var(--radius-lg);
      background:rgba(255,250,240,.78);
      border:1px solid var(--color-border);
      box-shadow:var(--shadow-soft);
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:rgba(185,242,75,.75)}
    .ticket-bar{
      position:relative;
      overflow:hidden;
      border-radius:999px;
      background:rgba(255,250,240,.78);
      border:1px dashed rgba(36,95,79,.28);
      box-shadow:var(--shadow-soft);
    }
    .ticket-bar:before,.ticket-bar:after{
      content:"";
      position:absolute;
      top:50%;
      width:20px;height:20px;
      border-radius:50%;
      background:var(--color-bg);
      transform:translateY(-50%);
    }
    .ticket-bar:before{left:-10px}.ticket-bar:after{right:-10px}
    .count-box{
      min-width:54px;
      padding:8px 10px;
      border-radius:16px;
      background:#123b32;
      color:#fffaf0;
      text-align:center;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
    }
    .count-box strong{display:block;font-size:18px;line-height:1;font-weight:900}
    .count-box span{font-size:11px;color:rgba(255,250,240,.68)}
    .hero{
      position:relative;
      overflow:hidden;
      border-radius:40px;
      padding:42px;
      background:
        linear-gradient(135deg,rgba(255,250,240,.92),rgba(223,233,222,.86)),
        radial-gradient(circle at 75% 22%,rgba(185,242,75,.34),transparent 22rem);
      border:1px solid rgba(255,255,255,.72);
      box-shadow:var(--shadow-soft);
    }
    .hero:after{
      content:"";
      position:absolute;
      inset:0;
      background-image:linear-gradient(rgba(18,59,50,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(18,59,50,.055) 1px,transparent 1px);
      background-size:34px 34px;
      mask-image:linear-gradient(120deg,transparent 0%,#000 24%,#000 76%,transparent 100%);
      pointer-events:none;
    }
    .hero-content{position:relative;z-index:1}
    .hero h1{
      font-size:clamp(36px,6vw,66px);
      line-height:1.08;
      letter-spacing:-.065em;
      font-weight:900;
      max-width:780px;
    }
    .hero-panel{
      position:relative;
      border-radius:34px;
      padding:24px;
      background:linear-gradient(180deg,#123b32,#10251f);
      color:#fffaf0;
      box-shadow:0 24px 70px rgba(16,37,31,.26);
      overflow:hidden;
    }
    .hero-panel:before{
      content:"";
      position:absolute;
      width:220px;height:220px;
      right:-88px;top:-88px;
      background:radial-gradient(circle,rgba(185,242,75,.34),transparent 68%);
    }
    .progress-track{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
    .progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--color-lime),var(--color-mint));width:72%}
    .step-card{
      position:relative;
      padding:24px;
      min-height:180px;
    }
    .step-card .num{
      width:44px;height:44px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:var(--color-pine);
      color:#fffaf0;
      font-weight:900;
    }
    .mosaic{
      display:grid;
      grid-template-columns:1.25fr .8fr .8fr;
      gap:16px;
    }
    .mosaic-card{
      min-height:190px;
      padding:24px;
      border-radius:30px;
      overflow:hidden;
      position:relative;
      background:#fffaf0;
      border:1px solid var(--color-border);
      box-shadow:var(--shadow-soft);
    }
    .mosaic-card.big{grid-row:span 2;min-height:396px;background:linear-gradient(145deg,#123b32,#245f4f);color:#fffaf0}
    .mosaic-card:after{
      content:"";
      position:absolute;
      width:180px;height:180px;
      right:-70px;bottom:-70px;
      border-radius:50%;
      background:rgba(185,242,75,.18);
    }
    .rank-row{
      display:grid;
      grid-template-columns:58px 1fr auto;
      gap:14px;
      align-items:center;
      padding:16px;
      border-radius:22px;
      background:rgba(255,250,240,.7);
      border:1px solid var(--color-border);
      transition:.22s ease;
    }
    .rank-row:hover{transform:translateX(3px);border-color:rgba(185,242,75,.8);background:#fffaf0}
    .medal{
      width:42px;height:42px;border-radius:16px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,var(--color-lime),var(--color-mint));
      font-weight:900;color:var(--color-ink);
    }
    .form-control{
      width:100%;
      min-height:50px;
      border:1px solid rgba(18,59,50,.14);
      border-radius:18px;
      padding:12px 14px;
      background:rgba(255,250,240,.92);
      color:var(--color-ink);
      transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .form-control:focus{
      outline:none;
      border-color:rgba(185,242,75,.95);
      box-shadow:0 0 0 4px rgba(185,242,75,.22);
      background:#fffef8;
    }
    textarea.form-control{min-height:126px;resize:vertical}
    label{display:block;margin-bottom:7px;font-size:13px;font-weight:850;color:var(--color-pine)}
    details{
      border-radius:24px;
      background:rgba(255,250,240,.78);
      border:1px solid var(--color-border);
      box-shadow:0 12px 32px rgba(16,37,31,.07);
      overflow:hidden;
    }
    summary{
      list-style:none;
      cursor:pointer;
      padding:20px 22px;
      font-weight:850;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
    }
    summary::-webkit-details-marker{display:none}
    summary:after{
      content:"+";
      width:28px;height:28px;
      flex:0 0 28px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:rgba(18,59,50,.08);
      color:var(--color-pine);
      transition:transform .2s ease,background .2s ease;
    }
    details[open] summary:after{transform:rotate(45deg);background:var(--color-lime)}
    details p{
      margin:0;
      padding:0 22px 20px;
      color:var(--color-muted);
      border-top:1px solid rgba(18,59,50,.08);
      padding-top:16px;
    }
    .site-footer{
      margin-top:42px;
      border-radius:36px 36px 0 0;
      background:linear-gradient(135deg,#10251f,#123b32);
      color:#fffaf0;
      padding:42px;
      position:relative;
      overflow:hidden;
    }
    .site-footer:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);
      background-size:20px 20px;
      opacity:.16;
    }
    .footer-inner{position:relative;z-index:1}
    .footer-link{color:rgba(255,250,240,.72);transition:color .2s ease}
    .footer-link:hover{color:var(--color-lime)}
    .mini-chart{
      display:flex;
      align-items:end;
      gap:8px;
      height:86px;
      margin-top:22px;
    }
    .mini-chart span{
      flex:1;
      border-radius:999px 999px 8px 8px;
      background:linear-gradient(180deg,var(--color-lime),rgba(142,230,189,.55));
      min-height:22px;
    }
    .mini-chart span:nth-child(1){height:45%}.mini-chart span:nth-child(2){height:64%}.mini-chart span:nth-child(3){height:38%}.mini-chart span:nth-child(4){height:82%}.mini-chart span:nth-child(5){height:58%}
    .floating-shape{
      position:absolute;
      border:1px solid rgba(18,59,50,.12);
      background:rgba(255,250,240,.35);
      border-radius:26px;
      transform:rotate(-8deg);
    }
    @media (max-width:1024px){
      :root{--sidebar:92px}
      .desktop-sidebar{width:92px}
      .brand{justify-content:center;padding:22px 12px}.brand-text,.nav-label,.side-status p,.side-status strong{display:none}
      .nav-link{justify-content:center;padding:14px}.nav-link.active:before{left:5px}
      .side-status{display:grid;place-items:center;padding:18px 8px}
      .main-area{margin-left:128px;padding-right:18px}
      .hero{padding:32px}
      .mosaic{grid-template-columns:1fr 1fr}.mosaic-card.big{grid-column:span 2;grid-row:auto;min-height:290px}
    }
    @media (max-width:768px){
      .desktop-sidebar{display:none}
      .mobile-header{display:flex;align-items:center;justify-content:space-between}
      .main-area{margin-left:0;padding:16px 14px 0}
      .page-container{width:100%}
      .section{padding:30px 0}
      .hero{border-radius:32px;padding:26px 20px}
      .ticket-bar{border-radius:28px}
      .mosaic{grid-template-columns:1fr}
      .mosaic-card.big{grid-column:auto;min-height:260px}
      .rank-row{grid-template-columns:48px 1fr}
      .rank-row .rank-cta{grid-column:2}
      .site-footer{padding:30px 20px;border-radius:30px 30px 0 0}
    }
    @media (max-width:520px){
      .btn{width:100%;min-height:48px}
      .count-box{min-width:48px;padding:8px 7px}
      .hero h1{font-size:34px}
      .section-title{font-size:28px}
      .card,.mosaic-card{border-radius:24px}
    }

/* roulang page: category1 */
:root{
      --color-pine:#123f35;
      --color-pine-dark:#0d2f28;
      --color-ink:#17211e;
      --color-muted:#65746e;
      --color-cream:#f5f0e7;
      --color-fog:#edf3ec;
      --color-sage:#dbe8dd;
      --color-mint:#9cf05b;
      --color-lime:#c7ff71;
      --border:rgba(18,63,53,.14);
      --shadow-soft:0 22px 70px rgba(18,63,53,.12);
      --shadow-lift:0 18px 44px rgba(18,63,53,.16);
      --radius-lg:34px;
      --radius-md:24px;
      --radius-sm:16px;
      --sidebar:248px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      color:var(--color-ink);
      background:
        radial-gradient(circle at 18% 12%, rgba(156,240,91,.22), transparent 26%),
        radial-gradient(circle at 82% 5%, rgba(219,232,221,.75), transparent 30%),
        linear-gradient(135deg,#f7f1e8 0%,#edf4ec 54%,#f5f0e7 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(18,63,53,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,63,53,.045) 1px, transparent 1px);
      background-size:32px 32px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 78%);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    img,svg{display:block;max-width:100%}
    :focus-visible{
      outline:3px solid rgba(156,240,91,.8);
      outline-offset:3px;
      border-radius:14px;
    }
    .app-shell{min-height:100vh}
    .desktop-sidebar{
      position:fixed;
      z-index:50;
      top:18px;
      left:18px;
      bottom:18px;
      width:var(--sidebar);
      border-radius:34px;
      background:linear-gradient(180deg,#123f35 0%,#0b2923 100%);
      color:#fff;
      padding:20px;
      box-shadow:var(--shadow-dark,0 24px 80px rgba(4,18,15,.28));
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .desktop-sidebar::after{
      content:"";
      position:absolute;
      width:170px;
      height:170px;
      right:-76px;
      top:15%;
      border-radius:999px;
      background:rgba(199,255,113,.14);
      filter:blur(2px);
    }
    .brand-area{
      position:relative;
      z-index:1;
      display:flex;
      align-items:center;
      gap:12px;
      padding:8px 6px 18px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .brand-mark{
      min-width:46px;
      height:46px;
      border-radius:16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,var(--color-lime),var(--color-mint));
      color:#0d2f28;
      font-weight:950;
      letter-spacing:-.04em;
      box-shadow:0 12px 30px rgba(156,240,91,.22);
    }
    .side-nav{
      position:relative;
      z-index:1;
      display:grid;
      gap:10px;
      margin-top:22px;
    }
    .nav-link{
      position:relative;
      display:flex;
      align-items:center;
      gap:12px;
      padding:13px 14px;
      border-radius:18px;
      color:rgba(255,255,255,.72);
      transition:transform .22s var(--ease),background .22s var(--ease),color .22s var(--ease);
    }
    .nav-link svg{width:21px;height:21px;flex:0 0 auto}
    .nav-link:hover{
      color:#fff;
      background:rgba(255,255,255,.09);
      transform:translateX(2px);
    }
    .nav-link.active{
      color:#0d2f28;
      background:linear-gradient(135deg,rgba(199,255,113,.96),rgba(245,240,231,.92));
      font-weight:800;
      box-shadow:0 12px 34px rgba(0,0,0,.18);
    }
    .nav-link.active::before{
      content:"";
      position:absolute;
      left:-8px;
      top:16px;
      bottom:16px;
      width:4px;
      border-radius:999px;
      background:var(--color-lime);
    }
    .sidebar-status{
      position:relative;
      z-index:1;
      margin-top:auto;
      padding:16px;
      border-radius:24px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
    }
    .status-dot{
      width:9px;
      height:9px;
      display:inline-block;
      border-radius:999px;
      background:var(--color-mint);
      box-shadow:0 0 0 6px rgba(156,240,91,.14);
    }
    .mobile-topbar{
      display:none;
      position:sticky;
      top:0;
      z-index:60;
      background:rgba(245,240,231,.86);
      backdrop-filter:blur(16px);
      border-bottom:1px solid var(--border);
    }
    .mobile-drawer{
      display:none;
      border-top:1px solid var(--border);
      background:rgba(245,240,231,.96);
      padding:12px 16px 18px;
    }
    .mobile-drawer.open{display:block}
    .mobile-drawer .nav-link{
      color:var(--color-ink);
      background:rgba(18,63,53,.05);
    }
    .mobile-drawer .nav-link.active{
      background:var(--color-pine);
      color:#fff;
    }
    .main-content{
      margin-left:calc(var(--sidebar) + 38px);
      padding:18px 18px 0 0;
    }
    .page-wrap{
      max-width:1260px;
      margin:0 auto;
      padding:0 0 38px;
    }
    .section{padding:42px 0}
    .section-title{
      font-size:clamp(1.85rem,3vw,2.65rem);
      line-height:1.16;
      letter-spacing:-.04em;
      font-weight:950;
      color:var(--color-ink);
    }
    .section-lead{
      margin-top:14px;
      color:var(--color-muted);
      max-width:760px;
      font-size:1rem;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:8px 13px;
      font-size:13px;
      font-weight:800;
      color:var(--color-pine);
      background:rgba(156,240,91,.22);
      border:1px solid rgba(18,63,53,.12);
      white-space:nowrap;
    }
    .badge.dark{
      color:#efffea;
      background:rgba(255,255,255,.1);
      border-color:rgba(255,255,255,.15);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:48px;
      padding:12px 19px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:900;
      transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease);
    }
    .btn-primary{
      background:var(--color-pine);
      color:#fffaf0;
      box-shadow:0 15px 34px rgba(18,63,53,.24);
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      background:var(--color-pine-dark);
      box-shadow:0 18px 44px rgba(18,63,53,.3);
    }
    .btn-secondary{
      background:rgba(255,255,255,.48);
      color:var(--color-pine);
      border-color:var(--border);
    }
    .btn-secondary:hover{
      transform:translateY(-2px);
      background:rgba(156,240,91,.16);
      border-color:rgba(18,63,53,.25);
    }
    .ticket-bar{
      position:relative;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:16px 18px;
      border-radius:26px;
      background:rgba(255,255,255,.62);
      border:1px dashed rgba(18,63,53,.28);
      box-shadow:var(--shadow-soft);
    }
    .ticket-bar::before,.ticket-bar::after{
      content:"";
      position:absolute;
      top:50%;
      width:22px;
      height:22px;
      border-radius:50%;
      background:var(--color-cream);
      transform:translateY(-50%);
      border:1px solid rgba(18,63,53,.08);
    }
    .ticket-bar::before{left:-11px}
    .ticket-bar::after{right:-11px}
    .countdown{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .time-box{
      min-width:54px;
      border-radius:16px;
      background:var(--color-pine);
      color:#fff;
      padding:7px 9px;
      text-align:center;
      line-height:1.15;
      box-shadow:inset 0 -1px 0 rgba(255,255,255,.12);
    }
    .time-box strong{display:block;font-size:18px;letter-spacing:-.02em}
    .time-box span{display:block;font-size:11px;color:rgba(255,255,255,.64);margin-top:3px}
    .hero-panel{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-lg);
      background:
        linear-gradient(135deg,rgba(255,255,255,.76),rgba(237,243,236,.82)),
        radial-gradient(circle at 85% 18%,rgba(199,255,113,.28),transparent 34%);
      border:1px solid rgba(18,63,53,.12);
      box-shadow:var(--shadow-soft);
      padding:clamp(24px,4vw,44px);
    }
    .hero-panel::after{
      content:"";
      position:absolute;
      right:-80px;
      bottom:-110px;
      width:280px;
      height:280px;
      border-radius:999px;
      background:rgba(18,63,53,.08);
    }
    .resource-card,.list-card,.filter-card,.faq-card,.mini-card{
      border:1px solid rgba(18,63,53,.12);
      background:rgba(255,255,255,.68);
      border-radius:26px;
      box-shadow:0 12px 36px rgba(18,63,53,.08);
      transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
    }
    .resource-card:hover,.list-card:hover,.filter-card:hover,.faq-card:hover,.mini-card:hover{
      transform:translateY(-3px);
      border-color:rgba(156,240,91,.78);
      box-shadow:var(--shadow-lift);
      background:rgba(255,255,255,.88);
    }
    .filter-pill{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(18,63,53,.12);
      background:rgba(255,255,255,.54);
      color:var(--color-muted);
      font-weight:850;
      font-size:14px;
      transition:.22s var(--ease);
    }
    .filter-pill:hover,.filter-pill.active{
      background:var(--color-pine);
      color:#fff;
      border-color:var(--color-pine);
      transform:translateY(-1px);
    }
    .tag{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      padding:5px 10px;
      font-size:12px;
      font-weight:850;
      color:var(--color-pine);
      background:rgba(156,240,91,.2);
      border:1px solid rgba(18,63,53,.1);
    }
    .arrow{
      transition:transform .22s var(--ease);
    }
    .list-card:hover .arrow{transform:translateX(4px)}
    .progress-line{
      height:10px;
      border-radius:999px;
      background:rgba(18,63,53,.09);
      overflow:hidden;
    }
    .progress-line span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--color-mint),var(--color-lime));
    }
    .visual-wall{
      display:grid;
      grid-template-columns:1.2fr .8fr .9fr;
      gap:16px;
    }
    .wall-card{
      position:relative;
      overflow:hidden;
      min-height:190px;
      border-radius:30px;
      padding:22px;
      border:1px solid rgba(18,63,53,.12);
      background:rgba(255,255,255,.62);
      box-shadow:0 12px 36px rgba(18,63,53,.08);
    }
    .wall-card.large{
      grid-row:span 2;
      min-height:400px;
      background:
        radial-gradient(circle at 74% 22%,rgba(199,255,113,.36),transparent 30%),
        linear-gradient(160deg,#123f35,#0c2923);
      color:#fff;
    }
    .wall-card::after{
      content:"";
      position:absolute;
      right:18px;
      bottom:16px;
      width:96px;
      height:96px;
      border-radius:28px;
      border:1px dashed rgba(18,63,53,.18);
      background:linear-gradient(135deg,rgba(156,240,91,.18),rgba(255,255,255,.14));
      transform:rotate(-8deg);
    }
    .wall-card.large::after{
      border-color:rgba(255,255,255,.22);
      background:rgba(255,255,255,.08);
      width:150px;
      height:150px;
      border-radius:40px;
    }
    .form-control{
      width:100%;
      height:50px;
      border-radius:16px;
      border:1px solid rgba(18,63,53,.16);
      background:rgba(255,255,255,.76);
      color:var(--color-ink);
      padding:0 14px;
      transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
    }
    textarea.form-control{
      height:124px;
      padding-top:12px;
      resize:vertical;
    }
    .form-control:focus{
      outline:none;
      border-color:rgba(156,240,91,.95);
      box-shadow:0 0 0 4px rgba(156,240,91,.18);
      background:#fff;
    }
    .site-footer{
      margin-top:42px;
      background:linear-gradient(180deg,#123f35,#071d18);
      color:#fff;
      border-radius:38px 38px 0 0;
      box-shadow:0 -18px 60px rgba(18,63,53,.16);
    }
    .footer-inner{
      max-width:1260px;
      margin:0 auto;
      padding:44px 28px 28px;
    }
    .footer-link{
      color:rgba(255,255,255,.66);
      transition:color .2s var(--ease),transform .2s var(--ease);
    }
    .footer-link:hover{
      color:var(--color-lime);
      transform:translateX(2px);
    }
    @media (max-width:1180px){
      :root{--sidebar:92px}
      .desktop-sidebar{width:92px;padding:16px 12px;align-items:center}
      .brand-area{padding:8px 0 16px;justify-content:center}
      .brand-area .brand-text,.nav-label,.sidebar-status{display:none}
      .nav-link{justify-content:center;padding:14px}
      .nav-link.active::before{left:-5px}
      .main-content{margin-left:118px}
    }
    @media (max-width:900px){
      .desktop-sidebar{display:none}
      .mobile-topbar{display:block}
      .main-content{margin-left:0;padding:0}
      .page-wrap{padding:16px 16px 34px}
      .ticket-bar{align-items:flex-start;flex-direction:column}
      .visual-wall{grid-template-columns:1fr 1fr}
      .wall-card.large{grid-column:1/-1;min-height:320px}
    }
    @media (max-width:640px){
      body{background-size:auto}
      .hero-panel{border-radius:26px;padding:22px}
      .section{padding:32px 0}
      .section-title{font-size:1.78rem}
      .countdown{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}
      .time-box{min-width:0}
      .visual-wall{grid-template-columns:1fr}
      .wall-card,.wall-card.large{min-height:210px}
      .btn{width:100%}
      .footer-inner{padding:34px 18px 24px}
      .site-footer{border-radius:28px 28px 0 0}
    }

/* roulang page: category2 */
:root{
      --color-bg:#f3f0e7;
      --color-panel:#fffaf0;
      --color-panel-2:#edf4ea;
      --color-ink:#16211f;
      --color-muted:#65716d;
      --color-pine:#123c35;
      --color-pine-dark:#0c2d28;
      --color-lime:#b8f35d;
      --color-cyan:#60f0c8;
      --color-border:rgba(18,60,53,.14);
      --radius-lg:28px;
      --radius-xl:34px;
      --shadow-soft:0 24px 70px rgba(20,55,48,.12);
      --shadow-card:0 14px 36px rgba(18,60,53,.10);
      --sidebar:236px;
      --topbar:68px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      color:var(--color-ink);
      background:
        radial-gradient(circle at 90% 8%, rgba(184,243,93,.20), transparent 28%),
        radial-gradient(circle at 8% 20%, rgba(96,240,200,.16), transparent 30%),
        linear-gradient(135deg,#f7f1e6 0%,#edf4ea 52%,#f3f0e7 100%);
      line-height:1.8;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.38;
      background-image:
        linear-gradient(rgba(18,60,53,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,60,53,.06) 1px, transparent 1px);
      background-size:34px 34px;
      mask-image:linear-gradient(to bottom, #000, transparent 78%);
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    img,svg{max-width:100%;display:block}
    ::selection{background:rgba(184,243,93,.55);color:#0c2d28}
    :focus-visible{outline:3px solid rgba(184,243,93,.9);outline-offset:3px;border-radius:14px}
    .app-shell{min-height:100vh}
    .desktop-sidebar{
      position:fixed;
      left:18px;
      top:18px;
      bottom:18px;
      width:var(--sidebar);
      z-index:50;
      border-radius:30px;
      background:
        radial-gradient(circle at 30% 0%, rgba(184,243,93,.18), transparent 30%),
        linear-gradient(180deg,#123c35,#0c2d28);
      color:#fff;
      padding:18px;
      box-shadow:0 25px 60px rgba(12,45,40,.28);
      border:1px solid rgba(255,255,255,.12);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .brand-link{display:flex;align-items:center;gap:12px;padding:8px 6px 20px;border-bottom:1px solid rgba(255,255,255,.10)}
    .brand-mark{
      width:44px;height:44px;min-width:44px;
      border-radius:16px;
      display:inline-flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,var(--color-lime),var(--color-cyan));
      color:#0b2a25;
      font-weight:950;
      letter-spacing:-.04em;
      box-shadow:inset 0 -8px 18px rgba(12,45,40,.16);
    }
    .brand-text{font-weight:950;line-height:1.1;word-break:break-all}
    .brand-sub{font-size:12px;color:rgba(255,255,255,.58);margin-top:3px}
    .side-nav{display:grid;gap:10px;margin-top:20px}
    .nav-link{
      position:relative;
      display:flex;
      align-items:center;
      gap:12px;
      min-height:48px;
      padding:12px 12px;
      border-radius:18px;
      color:rgba(255,255,255,.70);
      transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
    }
    .nav-link svg{width:21px;height:21px;min-width:21px}
    .nav-label{font-size:14px;font-weight:800}
    .nav-link:hover{background:rgba(255,255,255,.10);color:#fff;transform:translateX(2px)}
    .nav-link.active{
      background:rgba(237,244,234,.95);
      color:#123c35;
      box-shadow:0 12px 30px rgba(0,0,0,.16);
    }
    .nav-link.active::before{
      content:"";
      position:absolute;
      left:-8px;
      top:14px;
      bottom:14px;
      width:4px;
      border-radius:999px;
      background:var(--color-lime);
    }
    .sidebar-status{
      margin-top:18px;
      border-radius:22px;
      padding:15px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
    }
    .status-dot{width:8px;height:8px;border-radius:999px;background:var(--color-lime);box-shadow:0 0 0 6px rgba(184,243,93,.14)}
    .mobile-header{
      display:none;
      position:sticky;
      top:0;
      z-index:60;
      background:rgba(247,241,230,.86);
      backdrop-filter:blur(18px);
      border-bottom:1px solid var(--color-border);
    }
    .mobile-menu{
      display:none;
      border-top:1px solid var(--color-border);
      padding:12px 16px 18px;
      background:rgba(247,241,230,.96);
    }
    .mobile-menu.open{display:block}
    .mobile-menu .nav-link{color:var(--color-pine);background:rgba(255,255,255,.62);border:1px solid var(--color-border)}
    .mobile-menu .nav-link.active{background:#123c35;color:#fff}
    .menu-button{
      width:44px;height:44px;border-radius:16px;
      border:1px solid var(--color-border);
      background:#fffaf0;
      display:inline-flex;align-items:center;justify-content:center;
      transition:.25s var(--ease);
    }
    .menu-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
    .main-content{margin-left:calc(var(--sidebar) + 36px);padding:24px 24px 0}
    .page-container{width:min(1180px,100%);margin:0 auto}
    .section{padding:38px 0}
    .section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:22px}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;
      border-radius:999px;
      color:#123c35;
      background:rgba(184,243,93,.24);
      border:1px solid rgba(18,60,53,.12);
      font-size:13px;
      font-weight:900;
    }
    .eyebrow::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--color-lime);box-shadow:0 0 0 5px rgba(184,243,93,.18)}
    .status-strip{
      border:1px solid var(--color-border);
      border-radius:999px;
      background:rgba(255,250,240,.78);
      box-shadow:var(--shadow-card);
      padding:10px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      overflow:hidden;
    }
    .count-grid{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
    .count-box{
      min-width:58px;
      padding:7px 9px;
      border-radius:15px;
      background:#123c35;
      color:#fff;
      text-align:center;
      line-height:1.15;
    }
    .count-box strong{display:block;font-size:18px;font-weight:950}
    .count-box span{font-size:11px;color:rgba(255,255,255,.66)}
    .hero{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-xl);
      border:1px solid rgba(18,60,53,.12);
      background:
        radial-gradient(circle at 78% 16%, rgba(184,243,93,.28), transparent 27%),
        linear-gradient(135deg,rgba(255,250,240,.92),rgba(219,231,215,.86));
      box-shadow:var(--shadow-soft);
      padding:42px;
    }
    .hero::after{
      content:"";
      position:absolute;
      right:-80px;
      bottom:-90px;
      width:300px;height:300px;
      border-radius:50%;
      border:38px solid rgba(18,60,53,.06);
      pointer-events:none;
    }
    .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:32px;align-items:center;position:relative;z-index:1}
    .hero h1{
      margin:14px 0 18px;
      font-size:clamp(2.25rem,5vw,4rem);
      line-height:1.1;
      font-weight:950;
      letter-spacing:-.055em;
    }
    .hero p{color:var(--color-muted);font-size:17px;max-width:760px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:46px;
      padding:12px 18px;
      border-radius:999px;
      font-weight:900;
      border:1px solid transparent;
      transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
      white-space:nowrap;
    }
    .btn-primary{background:#123c35;color:#fff;box-shadow:0 12px 28px rgba(18,60,53,.24)}
    .btn-primary:hover{background:#0c2d28;transform:translateY(-2px);box-shadow:0 18px 38px rgba(18,60,53,.30)}
    .btn-secondary{background:rgba(255,255,255,.55);color:#123c35;border-color:rgba(18,60,53,.18)}
    .btn-secondary:hover{background:rgba(184,243,93,.22);transform:translateY(-2px)}
    .btn-mini{min-height:38px;padding:9px 13px;font-size:13px}
    .hero-panel{
      position:relative;
      border-radius:30px;
      padding:20px;
      background:#123c35;
      color:#fff;
      box-shadow:0 22px 44px rgba(12,45,40,.24);
      overflow:hidden;
    }
    .hero-panel::before{
      content:"";
      position:absolute;
      inset:14px;
      border:1px dashed rgba(255,255,255,.20);
      border-radius:24px;
      pointer-events:none;
    }
    .support-meter{
      border-radius:22px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.12);
      padding:16px;
    }
    .meter-line{height:10px;border-radius:999px;background:rgba(255,255,255,.13);overflow:hidden}
    .meter-line span{display:block;height:100%;width:72%;border-radius:999px;background:linear-gradient(90deg,var(--color-lime),var(--color-cyan))}
    .mini-card{
      border:1px solid var(--color-border);
      background:rgba(255,250,240,.82);
      border-radius:24px;
      padding:18px;
      box-shadow:var(--shadow-card);
      transition:.25s var(--ease);
    }
    .mini-card:hover{transform:translateY(-3px);border-color:rgba(184,243,93,.8);box-shadow:var(--shadow-soft)}
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:5px 10px;
      font-size:12px;
      font-weight:900;
      color:#123c35;
      background:rgba(219,231,215,.8);
      border:1px solid rgba(18,60,53,.10);
    }
    .timeline{
      position:relative;
      display:grid;
      gap:18px;
      padding:12px 0;
    }
    .timeline::before{
      content:"";
      position:absolute;
      left:50%;
      top:30px;
      bottom:30px;
      width:2px;
      background:linear-gradient(to bottom, transparent, rgba(18,60,53,.22), transparent);
    }
    .step{
      position:relative;
      display:grid;
      grid-template-columns:1fr 58px 1fr;
      gap:20px;
      align-items:center;
    }
    .step:nth-child(even) .step-card{grid-column:3}
    .step:nth-child(even) .step-node{grid-column:2;grid-row:1}
    .step:nth-child(even) .step-empty{grid-column:1}
    .step-card{
      border-radius:28px;
      padding:22px;
      background:rgba(255,250,240,.86);
      border:1px solid var(--color-border);
      box-shadow:var(--shadow-card);
      transition:.25s var(--ease);
    }
    .step-card:hover{transform:translateY(-3px);border-color:rgba(184,243,93,.8);box-shadow:var(--shadow-soft)}
    .step-node{
      width:58px;height:58px;border-radius:22px;
      display:flex;align-items:center;justify-content:center;
      background:#123c35;
      color:#fff;
      border:6px solid #edf4ea;
      font-weight:950;
      box-shadow:0 14px 28px rgba(18,60,53,.20);
      z-index:2;
    }
    .mosaic{
      display:grid;
      grid-template-columns:1.15fr .85fr .85fr;
      gap:18px;
    }
    .mosaic-card{
      position:relative;
      min-height:190px;
      overflow:hidden;
      border-radius:30px;
      padding:22px;
      border:1px solid rgba(18,60,53,.12);
      background:rgba(255,250,240,.76);
      box-shadow:var(--shadow-card);
      transition:.25s var(--ease);
    }
    .mosaic-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:rgba(96,240,200,.65)}
    .mosaic-card.large{grid-row:span 2;min-height:398px;background:linear-gradient(145deg,#123c35,#1e5a4f);color:#fff}
    .mosaic-card.large p{color:rgba(255,255,255,.68)}
    .abstract-lines{
      position:absolute;
      right:-26px;
      bottom:-18px;
      width:180px;height:180px;
      border-radius:42px;
      background:
        linear-gradient(90deg, rgba(184,243,93,.28) 1px, transparent 1px),
        linear-gradient(rgba(184,243,93,.28) 1px, transparent 1px);
      background-size:18px 18px;
      transform:rotate(-10deg);
      opacity:.9;
    }
    .support-board{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:20px;
      align-items:stretch;
    }
    .resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    .notice-card{
      border-radius:30px;
      padding:24px;
      background:#123c35;
      color:#fff;
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .notice-card::after{
      content:"";
      position:absolute;
      width:170px;height:170px;
      border-radius:50%;
      right:-70px;top:-70px;
      background:rgba(184,243,93,.18);
    }
    .scroll-board{
      display:flex;
      gap:16px;
      overflow-x:auto;
      padding:8px 4px 18px;
      scroll-snap-type:x mandatory;
    }
    .scroll-board::-webkit-scrollbar{height:8px}
    .scroll-board::-webkit-scrollbar-thumb{background:rgba(18,60,53,.22);border-radius:999px}
    .board-card{
      flex:0 0 300px;
      scroll-snap-align:start;
      border-radius:28px;
      min-height:220px;
      padding:22px;
      background:rgba(255,250,240,.82);
      border:1px solid var(--color-border);
      box-shadow:var(--shadow-card);
      transition:.25s var(--ease);
    }
    .board-card:hover{transform:translateY(-3px);border-color:rgba(184,243,93,.78)}
    .form-panel{
      border-radius:34px;
      padding:28px;
      background:
        radial-gradient(circle at 95% 5%, rgba(184,243,93,.22), transparent 25%),
        linear-gradient(135deg,#fffaf0,#edf4ea);
      border:1px solid var(--color-border);
      box-shadow:var(--shadow-soft);
    }
    .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    .field label{display:block;font-size:13px;font-weight:900;color:#123c35;margin-bottom:7px}
    .field input,.field select,.field textarea{
      width:100%;
      border:1px solid rgba(18,60,53,.16);
      border-radius:17px;
      background:rgba(255,255,255,.72);
      min-height:50px;
      padding:12px 14px;
      color:var(--color-ink);
      transition:.2s var(--ease);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
    }
    .field textarea{min-height:122px;resize:vertical}
    .field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(18,60,53,.28)}
    .field input:focus,.field select:focus,.field textarea:focus{
      outline:none;
      border-color:rgba(184,243,93,.95);
      box-shadow:0 0 0 5px rgba(184,243,93,.18);
      background:#fff;
    }
    .faq-layout{display:grid;grid-template-columns:310px 1fr;gap:20px;align-items:start}
    .faq-index{
      position:sticky;
      top:24px;
      border-radius:28px;
      padding:18px;
      background:#123c35;
      color:#fff;
      box-shadow:var(--shadow-card);
    }
    .faq-answer{
      border-radius:26px;
      padding:22px;
      background:rgba(255,250,240,.82);
      border:1px solid var(--color-border);
      box-shadow:var(--shadow-card);
    }
    .faq-answer + .faq-answer{margin-top:14px}
    .faq-answer h3{font-size:18px;font-weight:950;margin-bottom:8px}
    .site-footer{
      margin-top:54px;
      margin-left:calc(var(--sidebar) + 36px);
      background:
        radial-gradient(circle at 80% 0%, rgba(184,243,93,.16), transparent 28%),
        linear-gradient(180deg,#123c35,#0b2521);
      color:#fff;
      border-radius:34px 0 0 0;
    }
    .footer-inner{width:min(1180px,100%);margin:0 auto;padding:42px 24px 28px}
    .footer-link{color:rgba(255,255,255,.64);transition:.2s var(--ease)}
    .footer-link:hover{color:var(--color-lime);transform:translateX(2px)}
    @media (max-width:1180px){
      :root{--sidebar:88px}
      .desktop-sidebar{width:88px;padding:16px 12px}
      .brand-link{justify-content:center;padding-bottom:16px}
      .brand-text-wrap,.nav-label,.sidebar-status span,.sidebar-status p{display:none}
      .nav-link{justify-content:center;padding:12px}
      .nav-link.active::before{left:-6px}
      .sidebar-status{padding:14px;display:flex;justify-content:center}
      .main-content,.site-footer{margin-left:124px}
      .hero-grid{grid-template-columns:1fr}
      .hero-panel{max-width:560px}
    }
    @media (max-width:900px){
      .desktop-sidebar{display:none}
      .mobile-header{display:block}
      .main-content{margin-left:0;padding:18px 16px 0}
      .site-footer{margin-left:0;border-radius:28px 28px 0 0}
      .hero{padding:28px 20px}
      .section{padding:30px 0}
      .section-heading{display:block}
      .status-strip{border-radius:26px;align-items:flex-start;flex-direction:column}
      .timeline::before{left:29px}
      .step,.step:nth-child(even){
        grid-template-columns:58px 1fr;
        gap:14px;
      }
      .step-card,.step:nth-child(even) .step-card{grid-column:2}
      .step-node,.step:nth-child(even) .step-node{grid-column:1;grid-row:1}
      .step-empty{display:none}
      .mosaic{grid-template-columns:1fr}
      .mosaic-card.large{min-height:300px}
      .support-board{grid-template-columns:1fr}
      .faq-layout{grid-template-columns:1fr}
      .faq-index{position:relative;top:auto}
    }
    @media (max-width:620px){
      .brand-mark{width:40px;height:40px;min-width:40px;border-radius:14px}
      .hero h1{font-size:2.35rem}
      .hero p{font-size:15px}
      .btn{width:100%;white-space:normal}
      .count-box{min-width:52px}
      .resource-grid,.form-grid{grid-template-columns:1fr}
      .board-card{flex-basis:86vw}
      .footer-inner{padding:34px 18px 24px}
    }