/* roulang page: index */
:root{
      --bg:#0f111a;
      --bg-2:#151824;
      --bg-3:#1c2233;
      --panel:rgba(16,20,31,.84);
      --panel-2:rgba(21,24,36,.92);
      --line:rgba(148,163,184,.18);
      --line-strong:rgba(148,163,184,.28);
      --text:#ffffff;
      --muted:#94a3b8;
      --soft:#cbd5e1;
      --cyan:#00e5ff;
      --lime:#39ff14;
      --amber:#fbbf24;
      --rose:#fb7185;
      --shadow:0 18px 50px rgba(0,0,0,.34);
      --shadow-soft:0 10px 26px rgba(0,0,0,.24);
      --radius:8px;
      --radius-sm:6px;
      --container:1180px;
      --gap:24px;
      --gap-sm:14px;
      --topbar:92px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:
        linear-gradient(180deg, rgba(15,17,26,.88), rgba(15,17,26,.94)),
        url('/assets/images/backpic/back-2.jpg') center/cover fixed;
      color:var(--text);
      font:16px/1.6 Arial, Helvetica, sans-serif;
      letter-spacing:0;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{border:0;background:none;color:inherit;cursor:pointer}
    :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .site-header{
      position:fixed;
      top:0;left:0;right:0;
      z-index:60;
      background:rgba(10,12,20,.82);
      backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .header-inner{
      display:grid;
      grid-template-columns:1fr auto;
      gap:16px;
      align-items:center;
      padding:16px 0 12px;
    }
    .brand-row{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .brand-mark{
      width:42px;height:42px;
      border-radius:8px;
      background:
        linear-gradient(145deg, rgba(0,229,255,.95), rgba(57,255,20,.9));
      box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 24px rgba(0,229,255,.18);
      position:relative;
      flex:0 0 auto;
    }
    .brand-mark::before{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:5px;
      border:2px solid rgba(15,17,26,.78);
      transform:rotate(15deg);
    }
    .brand-copy{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .brand-name{
      font-size:15px;
      font-weight:800;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:100%;
    }
    .brand-sub{
      color:var(--muted);
      font-size:12px;
      line-height:1.2;
    }
    .header-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .auth-link{
      padding:10px 12px;
      border-radius:999px;
      color:#e2e8f0;
      border:1px solid transparent;
      transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      white-space:nowrap;
    }
    .auth-link:hover{transform:translateY(-1px);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
    .auth-link.primary{
      background:linear-gradient(135deg, rgba(0,229,255,.92), rgba(57,255,20,.9));
      color:#081018;
      font-weight:800;
      box-shadow:0 10px 24px rgba(0,229,255,.18);
    }
    .auth-link.primary:hover{transform:translateY(-1px);filter:saturate(1.04)}
    .nav-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:0 0 14px;
    }
    .main-nav{
      display:flex;
      align-items:center;
      gap:10px;
      overflow:auto;
      scrollbar-width:none;
      padding-bottom:2px;
      flex:1;
    }
    .main-nav::-webkit-scrollbar{display:none}
    .nav-link{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      color:#dbe4f0;
      border:1px solid transparent;
      border-radius:999px;
      white-space:nowrap;
      transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
      flex:0 0 auto;
    }
    .nav-link:hover{
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.08);
      transform:translateY(-1px);
    }
    .nav-link.active{
      background:rgba(0,229,255,.11);
      border-color:rgba(0,229,255,.34);
      color:#fff;
    }
    .nav-dot{
      width:6px;height:6px;border-radius:50%;
      background:var(--lime);
      box-shadow:0 0 10px rgba(57,255,20,.8);
    }
    .quick-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      color:#e8eef7;
      white-space:nowrap;
    }
    .quick-pill .mini{
      width:8px;height:8px;border-radius:50%;
      background:var(--rose);
      box-shadow:0 0 14px rgba(251,113,133,.9);
    }
    main{padding-top:var(--topbar)}
    section{position:relative}
    .hero{
      padding:34px 0 26px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
      gap:22px;
      align-items:stretch;
    }
    .hero-copy,
    .hero-coupon,
    .feature-panel,
    .data-strip,
    .form-panel,
    .news-panel,
    .trust-panel,
    .steps-panel,
    .faq-panel,
    .cta-panel{
      background:linear-gradient(180deg, rgba(21,24,36,.92), rgba(13,15,24,.94));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .hero-copy{
      overflow:hidden;
      min-height:620px;
      padding:28px;
      background:
        linear-gradient(110deg, rgba(9,11,18,.58), rgba(9,11,18,.2)),
        url('/assets/images/backpic/back-1.jpg') center/cover;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      border-color:rgba(255,255,255,.12);
      position:relative;
    }
    .hero-copy::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(15,17,26,.34), rgba(15,17,26,.82));
      pointer-events:none;
    }
    .hero-copy > *{position:relative;z-index:1}
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:max-content;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(7,10,18,.72);
      border:1px solid rgba(0,229,255,.22);
      color:#e5faff;
      font-size:13px;
      font-weight:700;
    }
    .hero-kicker .pulse{
      width:8px;height:8px;border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 0 6px rgba(0,229,255,.12);
    }
    h1{
      margin:18px 0 12px;
      font-size:58px;
      line-height:1.02;
      letter-spacing:0;
      max-width:16ch;
      text-wrap:balance;
    }
    .hero-lead{
      max-width:740px;
      color:#e5ebf4;
      font-size:18px;
      line-height:1.72;
      margin:0 0 22px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin:0 0 22px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      min-height:48px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid transparent;
      transition:transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
      white-space:nowrap;
      font-weight:800;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{
      background:linear-gradient(135deg, var(--cyan), var(--lime));
      color:#071019;
      box-shadow:0 14px 30px rgba(0,229,255,.16);
    }
    .btn-primary:hover{filter:saturate(1.04)}
    .btn-secondary{
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.12);
      color:#fff;
    }
    .btn-secondary:hover{background:rgba(255,255,255,.07)}
    .btn-ghost{
      background:transparent;
      border-color:rgba(0,229,255,.18);
      color:#dffbff;
    }
    .btn-ghost:hover{background:rgba(0,229,255,.08)}
    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      margin-top:8px;
    }
    .metric{
      padding:14px 15px;
      border-radius:var(--radius-sm);
      background:rgba(11,14,22,.72);
      border:1px solid rgba(255,255,255,.08);
      min-height:96px;
    }
    .metric strong{
      display:block;
      font-size:24px;
      line-height:1.15;
      color:#fff;
      margin-bottom:6px;
    }
    .metric span{
      display:block;
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }
    .hero-coupon{
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:14px;
      justify-content:space-between;
      background:
        linear-gradient(180deg, rgba(21,24,36,.88), rgba(12,14,22,.96));
    }
    .coupon-board{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
    }
    .coupon-main{
      position:relative;
      border-radius:var(--radius);
      overflow:hidden;
      border:1px solid rgba(0,229,255,.26);
      background:
        linear-gradient(145deg, rgba(0,229,255,.14), rgba(57,255,20,.14)),
        rgba(9,12,20,.86);
      padding:18px;
      min-height:250px;
      box-shadow:0 18px 36px rgba(0,229,255,.08);
    }
    .coupon-main::before{
      content:"";
      position:absolute;
      inset:12px;
      border:1px dashed rgba(255,255,255,.12);
      border-radius:calc(var(--radius) - 3px);
      pointer-events:none;
    }
    .coupon-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom:18px;
    }
    .coupon-head h2{
      margin:0;
      font-size:22px;
      line-height:1.2;
    }
    .coupon-tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.1);
      color:#f8fbff;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
    }
    .coupon-value{
      display:flex;
      align-items:flex-end;
      gap:12px;
      margin:6px 0 14px;
      flex-wrap:wrap;
    }
    .coupon-value strong{
      font-size:54px;
      line-height:1;
      letter-spacing:0;
      color:#fff;
      text-shadow:0 0 20px rgba(0,229,255,.12);
    }
    .coupon-value span{
      color:#d8f7ff;
      font-size:18px;
      font-weight:700;
      line-height:1.4;
      max-width:18ch;
    }
    .coupon-copy{
      color:#d1dae7;
      max-width:34ch;
      margin:0 0 18px;
    }
    .coupon-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .coupon-mini-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    .mini-card{
      padding:14px;
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.035);
      border:1px solid rgba(255,255,255,.08);
      min-height:92px;
    }
    .mini-card strong{
      display:block;
      font-size:18px;
      line-height:1.2;
      margin-bottom:6px;
    }
    .mini-card p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.55;
    }
    .section{
      padding:18px 0 0;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:16px;
      margin-bottom:16px;
    }
    .section-head h2{
      margin:0;
      font-size:30px;
      line-height:1.15;
      text-wrap:balance;
    }
    .section-head p{
      margin:0;
      max-width:640px;
      color:var(--muted);
    }
    .channel-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
    }
    .channel-card{
      overflow:hidden;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:rgba(21,24,36,.9);
      box-shadow:var(--shadow-soft);
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .channel-card:hover{
      transform:translateY(-3px);
      border-color:rgba(0,229,255,.28);
      box-shadow:0 16px 34px rgba(0,0,0,.34);
    }
    .channel-media{
      position:relative;
      aspect-ratio:16/10;
      overflow:hidden;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .channel-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1.01);
      transition:transform .3s ease;
    }
    .channel-card:hover .channel-media img{transform:scale(1.05)}
    .channel-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(12,14,21,.08), rgba(12,14,21,.78));
    }
    .channel-body{
      padding:16px;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:12px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      background:rgba(255,255,255,.05);
      color:#dbe7f2;
      border:1px solid rgba(255,255,255,.08);
    }
    .tag.accent{
      background:rgba(0,229,255,.1);
      color:#dffcff;
      border-color:rgba(0,229,255,.18);
    }
    .tag.lime{
      background:rgba(57,255,20,.1);
      color:#f0ffe8;
      border-color:rgba(57,255,20,.18);
    }
    .channel-body h3{
      margin:0 0 8px;
      font-size:20px;
      line-height:1.25;
    }
    .channel-body p{
      margin:0 0 14px;
      color:var(--muted);
      line-height:1.65;
      min-height:78px;
    }
    .link-row{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .text-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#dffcff;
      font-weight:800;
      transition:color .2s ease, transform .2s ease;
    }
    .text-link:hover{color:#fff;transform:translateX(2px)}
    .data-strip{
      padding:20px;
      margin-top:24px;
      border-color:rgba(255,255,255,.1);
    }
    .data-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
    }
    .data-box{
      padding:16px;
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      min-height:118px;
    }
    .data-box strong{
      display:block;
      font-size:28px;
      line-height:1.1;
      margin-bottom:8px;
      color:#fff;
    }
    .data-box span{
      display:block;
      color:var(--muted);
      font-size:13px;
      line-height:1.55;
    }
    .promo-band{
      margin-top:24px;
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:16px;
      align-items:stretch;
    }
    .form-panel{
      padding:20px;
    }
    .form-panel h2,
    .news-panel h2,
    .trust-panel h2,
    .steps-panel h2,
    .faq-panel h2,
    .cta-panel h2{
      margin:0 0 10px;
      font-size:28px;
      line-height:1.18;
    }
    .form-panel p,
    .news-panel p,
    .trust-panel p,
    .steps-panel p,
    .faq-panel p,
    .cta-panel p{
      margin:0 0 18px;
      color:var(--muted);
      line-height:1.65;
    }
    .form-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:14px;
    }
    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .field label{
      font-size:13px;
      color:#dbe5f1;
      font-weight:700;
    }
    .field input,
    .field select,
    .field textarea{
      width:100%;
      min-height:48px;
      border-radius:var(--radius-sm);
      border:1px solid rgba(255,255,255,.1);
      background:rgba(8,10,17,.72);
      color:#fff;
      padding:12px 14px;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .field textarea{min-height:96px;resize:vertical}
    .field input::placeholder,
    .field textarea::placeholder{color:#7f8da3}
    .field input:focus,
    .field select:focus,
    .field textarea:focus{
      border-color:rgba(0,229,255,.35);
      box-shadow:0 0 0 3px rgba(0,229,255,.1);
      background:rgba(8,10,17,.9);
    }
    .form-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
      align-items:center;
    }
    .privacy-note{
      margin-top:12px;
      color:#9fb0c7;
      font-size:13px;
      line-height:1.6;
    }
    .news-panel{
      padding:20px;
    }
    .news-layout{
      display:grid;
      grid-template-columns:1.12fr .88fr;
      gap:16px;
      align-items:start;
    }
    .news-list{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .news-item{
      display:flex;
      gap:14px;
      align-items:flex-start;
      padding:14px;
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.035);
      border:1px solid rgba(255,255,255,.08);
      transition:transform .2s ease, border-color .2s ease;
    }
    .news-item:hover{
      transform:translateY(-2px);
      border-color:rgba(0,229,255,.22);
    }
    .news-icon{
      width:40px;height:40px;
      border-radius:10px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      background:rgba(0,229,255,.12);
      border:1px solid rgba(0,229,255,.18);
      color:#dffcff;
    }
    .news-text h3{
      margin:0 0 5px;
      font-size:16px;
      line-height:1.35;
    }
    .news-text p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.55;
    }
    .news-meta{
      margin-top:7px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .news-meta .tag{font-size:11px}
    .news-side{
      display:grid;
      gap:12px;
    }
    .side-card{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius);
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      min-height:190px;
    }
    .side-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:saturate(1.05) contrast(1.05);
    }
    .side-card::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(8,10,16,.08), rgba(8,10,16,.82));
    }
    .side-copy{
      position:absolute;
      inset:auto 14px 14px 14px;
      z-index:1;
    }
    .side-copy strong{
      display:block;
      font-size:18px;
      line-height:1.25;
      margin-bottom:6px;
    }
    .side-copy span{
      display:block;
      font-size:13px;
      color:#d8e3f0;
      line-height:1.5;
      max-width:26ch;
    }
    .trust-panel{
      margin-top:24px;
      padding:20px;
    }
    .trust-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
    }
    .trust-item{
      padding:16px;
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.035);
      border:1px solid rgba(255,255,255,.08);
      min-height:130px;
    }
    .trust-item .icon{
      width:40px;height:40px;
      border-radius:12px;
      display:grid;
      place-items:center;
      margin-bottom:10px;
      background:rgba(57,255,20,.1);
      border:1px solid rgba(57,255,20,.18);
      color:#eaffea;
    }
    .trust-item strong{
      display:block;
      font-size:17px;
      line-height:1.3;
      margin-bottom:7px;
    }
    .trust-item p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.55;
    }
    .highlight-wrap{
      margin-top:24px;
      display:grid;
      grid-template-columns:1fr;
      gap:16px;
    }
    .feature-panel{
      padding:20px;
    }
    .feature-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
    }
    .feature-box{
      padding:16px;
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.035);
      border:1px solid rgba(255,255,255,.08);
      min-height:170px;
    }
    .feature-box strong{
      display:block;
      font-size:18px;
      line-height:1.25;
      margin-bottom:8px;
    }
    .feature-box p{
      margin:0;
      color:var(--muted);
      line-height:1.6;
      font-size:13px;
    }
    .feature-box .check{
      display:flex;
      align-items:center;
      gap:8px;
      margin-top:12px;
      color:#dbfef0;
      font-size:13px;
      font-weight:700;
    }
    .feature-box .dot{
      width:8px;height:8px;border-radius:50%;
      background:var(--lime);
      box-shadow:0 0 12px rgba(57,255,20,.7);
      flex:0 0 auto;
    }
    .bundle{
      margin-top:24px;
      padding:20px;
      border-radius:var(--radius);
      background:
        linear-gradient(120deg, rgba(0,229,255,.08), rgba(57,255,20,.07)),
        rgba(21,24,36,.9);
      border:1px solid rgba(0,229,255,.18);
      box-shadow:var(--shadow-soft);
      display:grid;
      grid-template-columns:1fr auto;
      gap:16px;
      align-items:center;
    }
    .bundle strong{
      display:block;
      font-size:26px;
      line-height:1.2;
      margin-bottom:8px;
    }
    .bundle p{
      margin:0;
      color:#d2dcec;
      max-width:740px;
    }
    .bundle-right{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .timer{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:12px 14px;
      border-radius:var(--radius-sm);
      background:rgba(8,10,17,.7);
      border:1px solid rgba(255,255,255,.08);
      min-width:220px;
    }
    .timer b{
      font-size:18px;
      color:#fff;
      letter-spacing:0;
    }
    .timer small{
      color:var(--muted);
      display:block;
      font-size:12px;
      line-height:1.4;
    }
    .steps-panel{
      margin-top:24px;
      padding:20px;
    }
    .steps-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
    }
    .step{
      padding:16px;
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.035);
      border:1px solid rgba(255,255,255,.08);
      min-height:148px;
    }
    .step-num{
      width:34px;height:34px;
      border-radius:10px;
      display:grid;
      place-items:center;
      font-weight:900;
      margin-bottom:10px;
      background:rgba(0,229,255,.12);
      border:1px solid rgba(0,229,255,.18);
      color:#fff;
    }
    .step strong{
      display:block;
      font-size:17px;
      line-height:1.25;
      margin-bottom:8px;
    }
    .step p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }
    .faq-panel{
      margin-top:24px;
      padding:20px;
    }
    .faq-list{
      display:grid;
      gap:12px;
    }
    details.faq{
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.035);
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
    }
    details.faq[open]{border-color:rgba(0,229,255,.22)}
    details.faq summary{
      list-style:none;
      padding:16px 18px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      font-weight:800;
      color:#fff;
    }
    details.faq summary::-webkit-details-marker{display:none}
    .faq-answer{
      padding:0 18px 16px;
      color:var(--muted);
      line-height:1.7;
    }
    .faq-answer p{margin:0}
    .faq-symbol{
      width:26px;height:26px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      flex:0 0 auto;
      color:#dffcff;
      transition:transform .2s ease;
    }
    details[open] .faq-symbol{transform:rotate(45deg)}
    .cta-panel{
      margin-top:24px;
      padding:22px;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:18px;
      align-items:center;
      background:
        linear-gradient(135deg, rgba(0,229,255,.08), rgba(57,255,20,.06)),
        rgba(20,23,34,.95);
    }
    .cta-panel .cta-box{
      padding:18px;
      border-radius:var(--radius);
      background:rgba(8,10,17,.58);
      border:1px solid rgba(255,255,255,.08);
    }
    .cta-badges{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }
    .footer{
      margin-top:28px;
      padding:24px 0 34px;
      border-top:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(10,12,18,.2), rgba(8,10,17,.88));
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr .8fr;
      gap:18px;
      align-items:start;
    }
    .footer h3{
      margin:0 0 10px;
      font-size:18px;
      line-height:1.3;
    }
    .footer p,
    .footer a{
      color:var(--muted);
      line-height:1.7;
    }
    .footer-links{
      display:grid;
      gap:8px;
    }
    .footer-links a{
      transition:color .2s ease, transform .2s ease;
    }
    .footer-links a:hover{color:#fff;transform:translateX(2px)}
    .footer-bar{
      margin-top:18px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.08);
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:space-between;
      color:var(--muted);
      font-size:13px;
    }
    .footer-badges{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:30px;
      padding:0 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
      color:#e8f0fb;
      font-size:12px;
      font-weight:800;
    }
    .badge.soft{
      background:rgba(0,229,255,.08);
      border-color:rgba(0,229,255,.18);
      color:#e9feff;
    }
    .badge.warn{
      background:rgba(251,191,36,.08);
      border-color:rgba(251,191,36,.16);
      color:#fff4d0;
    }
    .fab{
      position:fixed;
      left:18px;
      bottom:18px;
      z-index:70;
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-radius:999px;
      background:rgba(22,15,32,.78);
      border:1px solid rgba(0,229,255,.24);
      box-shadow:0 16px 30px rgba(0,0,0,.34), 0 0 26px rgba(0,229,255,.12);
      color:#f7fbff;
      cursor:grab;
      user-select:none;
      touch-action:none;
      opacity:.95;
      transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .fab:hover{
      transform:translateY(-2px);
      opacity:1;
      box-shadow:0 18px 34px rgba(0,0,0,.38), 0 0 28px rgba(0,229,255,.16);
    }
    .fab:active{cursor:grabbing}
    .fab-icon{
      width:36px;height:36px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(0,229,255,.95), rgba(57,255,20,.8));
      color:#05111a;
      flex:0 0 auto;
      box-shadow:0 6px 16px rgba(0,229,255,.18);
    }
    .fab-copy{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }
    .fab-copy strong{
      font-size:13px;
      line-height:1.2;
    }
    .fab-copy span{
      font-size:11px;
      color:#b8c8dc;
      line-height:1.2;
    }
    .fab-pill{
      margin-left:auto;
      padding:5px 8px;
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      background:rgba(251,113,133,.12);
      color:#ffdbe2;
      border:1px solid rgba(251,113,133,.2);
    }
    .fab .dot{
      position:absolute;
      top:-3px;
      right:-3px;
      width:12px;
      height:12px;
      border-radius:50%;
      background:var(--rose);
      box-shadow:0 0 0 3px rgba(15,17,26,.95), 0 0 14px rgba(251,113,133,.9);
    }
    .fab-wrap{
      position:fixed;
      left:0;
      bottom:0;
      width:100%;
      height:0;
      pointer-events:none;
      z-index:69;
    }
    .fab{pointer-events:auto}
    @keyframes breathe{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-4px)}
    }
    .fab{
      animation:breathe 4s ease-in-out infinite;
    }
    @media (max-width:1100px){
      h1{font-size:46px}
      .hero-grid,
      .promo-band,
      .news-layout,
      .cta-panel,
      .footer-grid{grid-template-columns:1fr}
      .channel-grid,
      .data-grid,
      .trust-grid,
      .feature-grid,
      .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .hero-copy{min-height:540px}
      .form-grid{grid-template-columns:1fr}
      .bundle{grid-template-columns:1fr}
      .bundle-right{justify-content:flex-start}
    }
    @media (max-width:900px){
      .header-inner{
        grid-template-columns:1fr;
        gap:12px;
      }
      .nav-row{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        padding-bottom:12px;
      }
      .main-nav{width:100%}
      .header-actions{justify-content:flex-start}
      main{padding-top:128px}
      h1{font-size:40px;max-width:100%}
      .hero-lead{font-size:17px}
      .hero-metrics{grid-template-columns:1fr}
      .coupon-mini-grid{grid-template-columns:1fr}
    }
    @media (max-width:700px){
      .container{width:min(var(--container), calc(100% - 22px))}
      .hero{padding-top:18px}
      .hero-copy{padding:20px;min-height:auto}
      .hero-copy::after{background:linear-gradient(180deg, rgba(15,17,26,.24), rgba(15,17,26,.88))}
      h1{font-size:34px}
      .section-head,
      .bundle,
      .cta-panel{gap:12px}
      .section-head h2,
      .form-panel h2,
      .news-panel h2,
      .trust-panel h2,
      .steps-panel h2,
      .faq-panel h2,
      .cta-panel h2{font-size:24px}
      .channel-grid,
      .data-grid,
      .trust-grid,
      .feature-grid,
      .steps-grid{grid-template-columns:1fr}
      .coupon-value strong{font-size:42px}
      .coupon-main{min-height:auto}
      .fab{left:12px;bottom:12px}
    }
    @media (max-width:520px){
      .brand-name{max-width:200px}
      .auth-link{padding:9px 10px;font-size:13px}
      .nav-link{padding:9px 10px;font-size:13px}
      .hero-lead{font-size:16px}
      .btn{width:100%;justify-content:center}
      .hero-actions{display:grid;grid-template-columns:1fr}
      .metric strong{font-size:22px}
      .coupon-head{flex-direction:column;align-items:flex-start}
      .coupon-tag{white-space:normal}
      .coupon-row .btn{width:auto}
      .news-item{padding:12px}
      .footer-bar{flex-direction:column}
      .fab-copy span{display:none}
    }

/* roulang page: category2 */
:root{
      --bg:#0F111A;
      --bg-2:#151824;
      --panel:rgba(18,22,34,.82);
      --panel-2:rgba(22,27,41,.92);
      --line:rgba(148,163,184,.18);
      --line-strong:rgba(0,229,255,.35);
      --text:#FFFFFF;
      --muted:#94A3B8;
      --soft:#CBD5E1;
      --accent:#00E5FF;
      --accent-2:#39FF14;
      --hot:#FF4D7D;
      --warn:#FFD166;
      --shadow:0 20px 60px rgba(0,0,0,.38);
      --shadow-strong:0 22px 80px rgba(0,229,255,.18);
      --radius:22px;
      --radius-sm:14px;
      --radius-xs:10px;
      --space:clamp(16px, 2vw, 24px);
      --container:1180px;
      --ring:0 0 0 3px rgba(0,229,255,.22);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(0,229,255,.10), transparent 24%),
        radial-gradient(circle at 95% 10%, rgba(57,255,20,.08), transparent 20%),
        linear-gradient(180deg, #0B0D14 0%, var(--bg) 28%, #0C0F18 100%);
      min-height:100vh;
      overflow-x:hidden;
      padding-top:138px;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.68), transparent 88%);
      opacity:.4;
      z-index:0;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(0,229,255,.28);color:#fff}
    :focus-visible{outline:none;box-shadow:var(--ring)}
    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
      position:relative;
      z-index:1;
    }
    .page-offset{height:0}
    .section{padding:28px 0 74px}
    .section + .section{padding-top:0}
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:24px;
    }
    .section-head.center{
      flex-direction:column;
      align-items:flex-start;
      margin-bottom:28px;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 14px;
      border:1px solid var(--line);
      border-radius:999px;
      color:#DFFBFF;
      background:rgba(0,229,255,.06);
      font-size:13px;
      letter-spacing:.02em;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
    }
    .section-kicker .dot{
      width:8px;height:8px;border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      box-shadow:0 0 0 6px rgba(0,229,255,.12);
      flex:0 0 auto;
    }
    .section-title{
      margin:14px 0 0;
      font-size:clamp(28px, 4vw, 46px);
      line-height:1.08;
      letter-spacing:-.04em;
    }
    .section-lead{
      margin:0;
      color:var(--muted);
      max-width:760px;
      line-height:1.8;
      font-size:15px;
    }
    .site-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:1000;
      backdrop-filter:blur(18px);
      background:linear-gradient(180deg, rgba(10,12,19,.92), rgba(10,12,19,.78));
      border-bottom:1px solid rgba(255,255,255,.06);
      box-shadow:0 8px 40px rgba(0,0,0,.18);
    }
    .header-inner{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      padding:18px 0 12px;
      flex-wrap:wrap;
    }
    .brand-row{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }
    .brand-mark{
      width:44px;height:44px;border-radius:14px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 26%),
        linear-gradient(145deg, rgba(0,229,255,.95), rgba(57,255,20,.85));
      box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(0,229,255,.24);
      position:relative;
      overflow:hidden;
      flex:0 0 auto;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:9px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.72);
      opacity:.88;
      transform:rotate(18deg);
    }
    .brand-copy{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }
    .brand-name{
      font-weight:800;
      letter-spacing:-.03em;
      font-size:18px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:min(56vw, 430px);
    }
    .brand-sub{
      color:var(--muted);
      font-size:13px;
      line-height:1.35;
    }
    .header-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-left:auto;
    }
    .auth-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:42px;
      padding:0 14px;
      border-radius:999px;
      color:#E5F3FF;
      border:1px solid rgba(148,163,184,.20);
      background:rgba(255,255,255,.03);
      transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
      white-space:nowrap;
    }
    .auth-link:hover{
      transform:translateY(-1px);
      border-color:rgba(0,229,255,.36);
      background:rgba(0,229,255,.08);
    }
    .auth-link.primary{
      color:#08101A;
      background:linear-gradient(135deg, var(--accent), #6FFFE9);
      border-color:transparent;
      box-shadow:0 14px 28px rgba(0,229,255,.25);
      font-weight:700;
    }
    .auth-link.primary:hover{
      box-shadow:0 16px 34px rgba(0,229,255,.34);
      transform:translateY(-1px) scale(1.01);
    }
    .nav-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:0 0 16px;
    }
    .main-nav{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:nowrap;
      overflow:auto;
      scrollbar-width:none;
      -ms-overflow-style:none;
      padding-bottom:2px;
    }
    .main-nav::-webkit-scrollbar{display:none}
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid transparent;
      background:rgba(255,255,255,.02);
      color:#E6EDF7;
      font-size:14px;
      line-height:1;
      white-space:nowrap;
      transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .nav-link:hover{
      border-color:rgba(0,229,255,.28);
      background:rgba(0,229,255,.06);
      transform:translateY(-1px);
    }
    .nav-link.active{
      background:linear-gradient(135deg, rgba(0,229,255,.18), rgba(57,255,20,.14));
      border-color:rgba(0,229,255,.36);
      box-shadow:0 8px 22px rgba(0,229,255,.11);
    }
    .nav-dot{
      width:8px;height:8px;border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      box-shadow:0 0 0 4px rgba(0,229,255,.12);
      flex:0 0 auto;
    }
    .quick-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      background:linear-gradient(135deg, rgba(21,24,36,.92), rgba(21,24,36,.72));
      border:1px solid rgba(255,255,255,.08);
      color:#E9F7FF;
      font-size:13px;
      white-space:nowrap;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
    }
    .quick-pill .mini{
      width:10px;height:10px;border-radius:50%;
      background:var(--accent-2);
      box-shadow:0 0 0 5px rgba(57,255,20,.12), 0 0 18px rgba(57,255,20,.34);
      animation:pulse 2.2s ease-in-out infinite;
    }
    @keyframes pulse{
      0%,100%{transform:scale(.92);opacity:.72}
      50%{transform:scale(1.08);opacity:1}
    }
    .hero{
      padding:0 0 36px;
    }
    .hero-shell{
      position:relative;
      border-radius:30px;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(5,7,14,.9), rgba(8,11,19,.72)),
        url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow), 0 0 0 1px rgba(0,229,255,.06) inset;
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 20% 20%, rgba(0,229,255,.14), transparent 24%),
        radial-gradient(circle at 82% 16%, rgba(57,255,20,.12), transparent 20%),
        linear-gradient(180deg, rgba(10,12,19,.42), rgba(10,12,19,.18));
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.12fr .88fr;
      gap:26px;
      padding:28px;
      align-items:center;
    }
    .promo-strip{
      display:inline-flex;
      align-items:center;
      gap:10px;
      width:fit-content;
      padding:10px 16px;
      border-radius:999px;
      background:rgba(255,209,102,.10);
      color:#FFE9AF;
      border:1px solid rgba(255,209,102,.28);
      box-shadow:0 10px 30px rgba(255,209,102,.08);
      font-size:13px;
      margin-bottom:16px;
    }
    .promo-strip .flash{
      width:10px;height:10px;border-radius:50%;
      background:var(--warn);
      box-shadow:0 0 0 6px rgba(255,209,102,.15);
    }
    .hero-title{
      margin:0;
      font-size:clamp(34px, 5vw, 64px);
      line-height:1.02;
      letter-spacing:-.05em;
      max-width:12ch;
    }
    .hero-title span{
      display:block;
      background:linear-gradient(135deg, #fff, #B9F4FF 38%, #8BFFE4 70%, #CCFFAA);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero-sub{
      margin:18px 0 0;
      color:#D5E2F5;
      max-width:60ch;
      line-height:1.86;
      font-size:16px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:26px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 18px;
      border-radius:14px;
      border:1px solid transparent;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
      cursor:pointer;
      font-weight:700;
      letter-spacing:-.01em;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{
      color:#061018;
      background:linear-gradient(135deg, var(--accent), #7DFFB3);
      box-shadow:0 16px 32px rgba(0,229,255,.24);
    }
    .btn-primary:hover{box-shadow:0 18px 38px rgba(0,229,255,.34)}
    .btn-secondary{
      color:#ECF8FF;
      background:rgba(255,255,255,.04);
      border-color:rgba(148,163,184,.18);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
    }
    .btn-secondary:hover{
      border-color:rgba(0,229,255,.34);
      background:rgba(0,229,255,.08);
    }
    .btn-sm{min-height:42px;padding:0 14px;border-radius:12px;font-size:14px}
    .hero-stats{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:12px;
      margin-top:24px;
    }
    .stat{
      padding:16px;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(18,22,34,.88), rgba(15,17,26,.82));
      border:1px solid rgba(255,255,255,.07);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
    }
    .stat strong{
      display:block;
      font-size:22px;
      line-height:1;
      letter-spacing:-.04em;
      margin-bottom:8px;
    }
    .stat span{
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }
    .hero-visual{
      position:relative;
      min-height:100%;
      padding:4px;
    }
    .story-card{
      position:relative;
      border-radius:28px;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(11,14,24,.82), rgba(9,11,18,.95));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-strong);
      min-height:640px;
      display:flex;
      flex-direction:column;
    }
    .story-cover{
      position:relative;
      flex:1;
      min-height:430px;
      background:
        linear-gradient(180deg, rgba(8,11,18,.14), rgba(8,11,18,.88)),
        url('/assets/images/coverpic/cover-1.jpg') center/cover no-repeat;
    }
    .story-cover::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(0,229,255,.12), transparent 34%, rgba(57,255,20,.10));
      mix-blend-mode:screen;
      pointer-events:none;
    }
    .story-overlay{
      position:absolute;
      inset:auto 18px 18px 18px;
      display:grid;
      gap:10px;
    }
    .overlay-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(8,10,16,.72);
      border:1px solid rgba(255,255,255,.10);
      color:#F4FBFF;
      font-size:12px;
      backdrop-filter:blur(10px);
    }
    .chip i{
      width:7px;height:7px;border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      box-shadow:0 0 0 4px rgba(0,229,255,.12);
      display:inline-block;
    }
    .story-metrics{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
      padding:16px;
      background:linear-gradient(180deg, rgba(16,19,29,.94), rgba(12,15,24,.96));
      border-top:1px solid rgba(255,255,255,.08);
    }
    .metric{
      padding:12px;
      border-radius:16px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.05);
    }
    .metric strong{
      display:block;
      margin-bottom:6px;
      font-size:18px;
      letter-spacing:-.03em;
    }
    .metric span{
      color:var(--muted);
      font-size:12px;
      line-height:1.5;
    }
    .surface{
      background:linear-gradient(180deg, rgba(19,22,34,.86), rgba(14,17,27,.92));
      border:1px solid rgba(255,255,255,.08);
      border-radius:28px;
      box-shadow:var(--shadow);
      padding:24px;
    }
    .grid-3{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:18px;
    }
    .mini-card{
      padding:20px;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(17,20,31,.92), rgba(13,16,24,.88));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 12px 34px rgba(0,0,0,.18);
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
      min-height:100%;
    }
    .mini-card:hover{
      transform:translateY(-3px);
      border-color:rgba(0,229,255,.24);
      box-shadow:0 18px 42px rgba(0,0,0,.28);
    }
    .mini-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }
    .mini-num{
      width:42px;height:42px;border-radius:14px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, rgba(0,229,255,.16), rgba(57,255,20,.14));
      border:1px solid rgba(0,229,255,.24);
      font-weight:800;
      color:#EFFFFF;
      box-shadow:0 10px 24px rgba(0,229,255,.08);
      flex:0 0 auto;
    }
    .mini-card h3{
      margin:0 0 10px;
      font-size:20px;
      line-height:1.25;
      letter-spacing:-.03em;
    }
    .mini-card p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
      font-size:14px;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      padding:7px 11px;
      border-radius:999px;
      font-size:12px;
      color:#E6F7FF;
      background:rgba(0,229,255,.08);
      border:1px solid rgba(0,229,255,.16);
    }
    .tag.alt{
      background:rgba(57,255,20,.08);
      border-color:rgba(57,255,20,.18);
    }
    .tag.hot{
      background:rgba(255,77,125,.10);
      border-color:rgba(255,77,125,.18);
    }
    .rank-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:18px;
    }
    .game-card{
      position:relative;
      overflow:hidden;
      border-radius:26px;
      background:linear-gradient(180deg, rgba(18,22,34,.94), rgba(13,16,24,.96));
      border:1px solid rgba(0,229,255,.12);
      box-shadow:var(--shadow);
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
      display:flex;
      flex-direction:column;
      min-height:100%;
    }
    .game-card:hover{
      transform:translateY(-5px);
      border-color:rgba(0,229,255,.32);
      box-shadow:0 18px 42px rgba(0,0,0,.30), 0 0 0 1px rgba(0,229,255,.08) inset;
    }
    .game-media{
      position:relative;
      aspect-ratio:16/10;
      overflow:hidden;
      border-bottom:1px solid rgba(255,255,255,.06);
      background:#10131d;
    }
    .game-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1.01);
      transition:transform .35s ease, filter .35s ease;
      filter:saturate(1.08) contrast(1.02);
    }
    .game-card:hover .game-media img{
      transform:scale(1.06);
      filter:saturate(1.16) contrast(1.06);
    }
    .game-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(6,8,12,.02), rgba(6,8,12,.74));
      pointer-events:none;
    }
    .rank-badge{
      position:absolute;
      top:14px;
      left:14px;
      z-index:2;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:46px;
      height:34px;
      padding:0 12px;
      border-radius:999px;
      background:rgba(8,10,16,.72);
      color:#F4FBFF;
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter:blur(10px);
      font-weight:800;
    }
    .game-body{
      padding:20px;
      display:flex;
      flex-direction:column;
      gap:14px;
      flex:1;
    }
    .game-body h3{
      margin:0;
      font-size:22px;
      line-height:1.22;
      letter-spacing:-.03em;
    }
    .game-body p{
      margin:0;
      color:var(--muted);
      line-height:1.82;
      font-size:14px;
    }
    .mini-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .mini-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#DDE9F8;
      font-size:13px;
      line-height:1.5;
    }
    .mini-list li::before{
      content:"";
      width:9px;
      height:9px;
      border-radius:50%;
      margin-top:5px;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      box-shadow:0 0 0 4px rgba(0,229,255,.11);
      flex:0 0 auto;
    }
    .card-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-top:auto;
      padding-top:2px;
    }
    .tiny-note{
      color:var(--muted);
      font-size:12px;
      line-height:1.4;
    }
    .feature-shell{
      display:grid;
      grid-template-columns:1fr .9fr;
      gap:18px;
    }
    .feature-list{
      display:grid;
      gap:14px;
    }
    .feature-item{
      display:flex;
      gap:14px;
      align-items:flex-start;
      padding:18px;
      border-radius:22px;
      background:linear-gradient(180deg, rgba(18,22,34,.88), rgba(12,15,23,.94));
      border:1px solid rgba(255,255,255,.08);
    }
    .feature-icon{
      width:46px;height:46px;border-radius:16px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, rgba(0,229,255,.16), rgba(57,255,20,.12));
      border:1px solid rgba(0,229,255,.20);
      box-shadow:0 10px 26px rgba(0,229,255,.08);
      flex:0 0 auto;
    }
    .feature-item h3{
      margin:0 0 8px;
      font-size:18px;
      line-height:1.25;
    }
    .feature-item p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:14px;
    }
    .progress-card{
      position:relative;
      padding:22px;
      border-radius:28px;
      background:
        radial-gradient(circle at top right, rgba(0,229,255,.14), transparent 24%),
        linear-gradient(180deg, rgba(17,21,32,.95), rgba(11,14,23,.96));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    .progress-card h3{
      margin:0;
      font-size:22px;
      line-height:1.2;
      letter-spacing:-.03em;
    }
    .progress-card p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
      font-size:14px;
    }
    .bar-group{
      display:grid;
      gap:14px;
    }
    .bar-item{
      display:grid;
      gap:8px;
    }
    .bar-label{
      display:flex;
      justify-content:space-between;
      gap:14px;
      color:#E8F4FF;
      font-size:13px;
    }
    .bar{
      height:12px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.06);
      border-radius:999px;
      overflow:hidden;
    }
    .bar > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--accent), var(--accent-2));
      box-shadow:0 10px 20px rgba(0,229,255,.14);
    }
    .steps-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
    }
    .step-card{
      position:relative;
      padding:22px;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(18,22,34,.88), rgba(13,16,24,.94));
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
    }
    .step-card::before{
      content:"";
      position:absolute;
      inset:auto -20% -22% auto;
      width:160px;
      height:160px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(0,229,255,.16), transparent 60%);
      pointer-events:none;
    }
    .step-index{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:38px;height:38px;
      border-radius:13px;
      background:rgba(0,229,255,.10);
      border:1px solid rgba(0,229,255,.18);
      color:#EFFFFF;
      font-weight:800;
      margin-bottom:14px;
    }
    .step-card h3{
      margin:0 0 10px;
      font-size:18px;
      line-height:1.3;
      letter-spacing:-.02em;
    }
    .step-card p{
      margin:0;
      color:var(--muted);
      line-height:1.78;
      font-size:14px;
    }
    .quote-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
    }
    .quote-card{
      padding:22px;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(18,22,34,.86), rgba(13,16,24,.95));
      border:1px solid rgba(255,255,255,.08);
      display:flex;
      flex-direction:column;
      gap:16px;
      box-shadow:0 12px 30px rgba(0,0,0,.18);
    }
    .quote-mark{
      width:46px;height:46px;border-radius:16px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, rgba(255,77,125,.14), rgba(0,229,255,.14));
      border:1px solid rgba(255,255,255,.08);
      font-size:24px;
      line-height:1;
    }
    .quote-card p{
      margin:0;
      color:#E7F2FF;
      line-height:1.85;
      font-size:14px;
    }
    .quote-meta{
      display:flex;
      align-items:center;
      gap:12px;
      margin-top:auto;
    }
    .avatar{
      width:42px;height:42px;border-radius:50%;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.36), transparent 24%),
        linear-gradient(135deg, rgba(0,229,255,.34), rgba(57,255,20,.28));
      border:1px solid rgba(255,255,255,.10);
      flex:0 0 auto;
    }
    .quote-meta strong{
      display:block;
      margin-bottom:3px;
      font-size:14px;
    }
    .quote-meta span{
      color:var(--muted);
      font-size:12px;
    }
    .faq-wrap{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }
    details.faq{
      border-radius:20px;
      background:linear-gradient(180deg, rgba(18,22,34,.88), rgba(13,16,24,.94));
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      box-shadow:0 10px 26px rgba(0,0,0,.16);
    }
    details.faq[open]{
      border-color:rgba(0,229,255,.22);
      box-shadow:0 16px 34px rgba(0,0,0,.22);
    }
    details.faq summary{
      list-style:none;
      cursor:pointer;
      padding:18px 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      font-weight:700;
      letter-spacing:-.01em;
    }
    details.faq summary::-webkit-details-marker{display:none}
    details.faq summary::after{
      content:"+";
      color:var(--accent);
      font-size:22px;
      line-height:1;
      transition:transform .2s ease;
      flex:0 0 auto;
    }
    details.faq[open] summary::after{
      content:"–";
      transform:translateY(-1px);
    }
    .faq-body{
      padding:0 20px 20px;
      color:var(--muted);
      line-height:1.82;
      font-size:14px;
    }
    .cta-panel{
      position:relative;
      overflow:hidden;
      border-radius:30px;
      padding:28px;
      background:
        linear-gradient(135deg, rgba(0,229,255,.12), rgba(57,255,20,.08)),
        linear-gradient(180deg, rgba(18,22,34,.96), rgba(13,16,24,.94));
      border:1px solid rgba(255,255,255,.10);
      box-shadow:var(--shadow);
    }
    .cta-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:20px;
      align-items:start;
    }
    .cta-panel h2{
      margin:0;
      font-size:clamp(28px, 4vw, 44px);
      line-height:1.08;
      letter-spacing:-.04em;
    }
    .cta-panel p{
      margin:16px 0 0;
      color:#D3E3F8;
      line-height:1.84;
      font-size:15px;
      max-width:60ch;
    }
    .contact-form{
      display:grid;
      gap:12px;
      padding:20px;
      border-radius:24px;
      background:rgba(9,11,18,.46);
      border:1px solid rgba(255,255,255,.08);
    }
    .field{
      display:grid;
      gap:7px;
    }
    .field label{
      color:#E9F6FF;
      font-size:13px;
      font-weight:600;
    }
    .field input,
    .field select{
      width:100%;
      min-height:46px;
      border-radius:14px;
      border:1px solid rgba(148,163,184,.18);
      background:rgba(255,255,255,.04);
      color:#fff;
      padding:0 14px;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .field input::placeholder{color:#8AA0BC}
    .field input:focus,
    .field select:focus{
      border-color:rgba(0,229,255,.35);
      box-shadow:var(--ring);
      background:rgba(255,255,255,.06);
    }
    .form-note{
      min-height:20px;
      color:#CDEFFF;
      font-size:13px;
      line-height:1.5;
    }
    .trust-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      font-size:12px;
      letter-spacing:.01em;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:#EEF7FF;
    }
    .badge::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:currentColor;
      opacity:.95;
      box-shadow:0 0 0 4px rgba(255,255,255,.08);
    }
    .badge.warn{
      background:rgba(255,77,125,.10);
      color:#FFD7E3;
      border-color:rgba(255,77,125,.18);
    }
    .badge.soft{
      background:rgba(0,229,255,.10);
      color:#DDFDFF;
      border-color:rgba(0,229,255,.16);
    }
    .footer{
      margin-top:10px;
      padding:30px 0 28px;
      background:linear-gradient(180deg, rgba(10,12,19,.1), rgba(10,12,19,.58));
      border-top:1px solid rgba(255,255,255,.06);
      position:relative;
      z-index:1;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr .8fr;
      gap:24px;
      padding-bottom:22px;
    }
    .footer h3{
      margin:0 0 14px;
      font-size:16px;
      line-height:1.2;
    }
    .footer p{
      margin:14px 0 0;
      color:var(--muted);
      line-height:1.8;
      font-size:14px;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a{
      color:#DDE8F5;
      font-size:14px;
      transition:color .2s ease, transform .2s ease;
      width:fit-content;
    }
    .footer-links a:hover{
      color:#FFFFFF;
      transform:translateX(2px);
    }
    .footer-badges{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .footer-bar{
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }
    .floating-support{
      position:fixed;
      left:18px;
      bottom:18px;
      z-index:1200;
      width:min(178px, calc(100vw - 36px));
      user-select:none;
      touch-action:none;
      cursor:grab;
      opacity:.96;
      transform:translateZ(0);
    }
    .floating-support:active{cursor:grabbing}
    .fab-chip{
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px 14px;
      border-radius:18px;
      background:
        linear-gradient(135deg, rgba(25,10,34,.9), rgba(12,10,24,.92));
      border:1px solid rgba(57,255,20,.38);
      box-shadow:
        0 0 0 1px rgba(0,229,255,.08) inset,
        0 16px 34px rgba(0,0,0,.34),
        0 0 24px rgba(57,255,20,.16);
      position:relative;
      overflow:hidden;
    }
    .fab-chip::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:linear-gradient(90deg, transparent, rgba(0,229,255,.34), rgba(57,255,20,.34), transparent);
      transform:translateX(-70%);
      animation:glide 5s linear infinite;
      opacity:.42;
      pointer-events:none;
    }
    @keyframes glide{
      0%{transform:translateX(-70%)}
      100%{transform:translateX(70%)}
    }
    .fab-icon{
      width:44px;height:44px;border-radius:14px;
      background:linear-gradient(135deg, rgba(0,229,255,.16), rgba(57,255,20,.18));
      border:1px solid rgba(255,255,255,.08);
      display:grid;
      place-items:center;
      box-shadow:0 10px 20px rgba(0,0,0,.22);
      flex:0 0 auto;
    }
    .fab-icon svg{
      width:24px;height:24px;
      stroke:#D9FFFF;
      fill:none;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .fab-copy{
      display:flex;
      flex-direction:column;
      gap:3px;
      min-width:0;
    }
    .fab-copy strong{
      font-size:13px;
      letter-spacing:-.01em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .fab-copy span{
      color:#AED8E6;
      font-size:12px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .fab-new{
      position:absolute;
      top:9px;
      right:10px;
      width:10px;
      height:10px;
      border-radius:50%;
      background:#FF3B5C;
      box-shadow:0 0 0 4px rgba(255,59,92,.18);
      animation:blink 1.35s ease-in-out infinite;
    }
    @keyframes blink{
      0%,100%{transform:scale(.92);opacity:.7}
      50%{transform:scale(1.08);opacity:1}
    }
    .icon-inline{
      width:18px;height:18px;
      display:inline-block;
      vertical-align:-3px;
    }
    .link-muted{color:var(--muted)}
    .subtle-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
      margin:22px 0;
    }
    @media (max-width: 1024px){
      body{padding-top:154px}
      .hero-grid,
      .feature-shell,
      .cta-grid{
        grid-template-columns:1fr;
      }
      .grid-3,
      .steps-grid,
      .quote-grid,
      .footer-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .rank-grid{
        grid-template-columns:1fr;
      }
      .story-card{min-height:auto}
      .hero-visual{min-height:0}
    }
    @media (max-width: 768px){
      body{padding-top:174px}
      .header-inner{
        align-items:flex-start;
        gap:14px;
      }
      .brand-copy{max-width:100%}
      .brand-name{max-width:100%}
      .header-actions{
        width:100%;
        justify-content:flex-start;
      }
      .nav-row{
        flex-direction:column;
        align-items:stretch;
      }
      .quick-pill{
        width:100%;
        justify-content:center;
      }
      .hero-grid{
        padding:18px;
      }
      .hero-stats,
      .story-metrics{
        grid-template-columns:1fr;
      }
      .section{
        padding:22px 0 62px;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .grid-3,
      .steps-grid,
      .quote-grid,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .mini-card,
      .game-body,
      .feature-item,
      .progress-card,
      .step-card,
      .quote-card,
      .cta-panel,
      .surface{
        border-radius:22px;
      }
      .hero-title{max-width:100%}
    }
    @media (max-width: 520px){
      body{padding-top:186px}
      .container{
        width:min(var(--container), calc(100% - 20px));
      }
      .auth-link{
        flex:1 1 calc(50% - 5px);
      }
      .hero-actions .btn{
        flex:1 1 100%;
      }
      .game-body h3,
      .mini-card h3{
        font-size:20px;
      }
      .cta-panel,
      .surface{
        padding:18px;
      }
      .contact-form{
        padding:16px;
      }
      .floating-support{
        left:10px;
        bottom:10px;
        width:min(166px, calc(100vw - 20px));
      }
    }

/* roulang page: category1 */
:root{
      --bg:#0b0e14;
      --bg-2:#101521;
      --bg-3:#151824;
      --panel:rgba(17,22,34,.82);
      --panel-2:rgba(20,25,38,.92);
      --line:rgba(148,163,184,.18);
      --line-strong:rgba(148,163,184,.28);
      --text:#ffffff;
      --muted:#94a3b8;
      --soft:#cbd5e1;
      --cyan:#00e5ff;
      --green:#39ff14;
      --gold:#f7c948;
      --red:#ff5d73;
      --shadow:0 24px 60px rgba(0,0,0,.45);
      --shadow-soft:0 12px 30px rgba(0,0,0,.28);
      --glow:0 0 0 1px rgba(0,229,255,.14), 0 0 28px rgba(0,229,255,.12);
      --radius:24px;
      --radius-lg:30px;
      --radius-md:18px;
      --radius-sm:14px;
      --space:clamp(18px, 2.2vw, 28px);
      --container:min(1180px, calc(100% - 32px));
      --header-h: 118px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height:1.6;
      background:
        radial-gradient(circle at top left, rgba(0,229,255,.12), transparent 28%),
        radial-gradient(circle at 80% 20%, rgba(57,255,20,.08), transparent 20%),
        linear-gradient(180deg, #090b11 0%, #0b0e14 42%, #0d111a 100%);
      min-height:100vh;
      overflow-x:hidden;
      padding-top:var(--header-h);
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:72px 72px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25));
      opacity:.35;
      z-index:-2;
    }
    body::after{
      content:"";
      position:fixed;
      inset:auto -10% -20% -10%;
      height:40vh;
      pointer-events:none;
      background:radial-gradient(circle, rgba(0,229,255,.12), transparent 55%);
      filter:blur(30px);
      z-index:-2;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(0,229,255,.28);color:#fff}
    .container{width:var(--container);margin:0 auto}
    .site-header{
      position:fixed;
      top:0;left:0;right:0;
      z-index:1000;
      background:rgba(10,13,20,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(148,163,184,.12);
      box-shadow:0 10px 30px rgba(0,0,0,.2);
    }
    .header-inner{
      padding:14px 0 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }
    .brand-row{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }
    .brand-mark{
      width:46px;height:46px;
      border-radius:16px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 26%),
        linear-gradient(135deg, rgba(0,229,255,.95), rgba(57,255,20,.85));
      box-shadow:0 0 0 1px rgba(0,229,255,.18), 0 12px 28px rgba(0,229,255,.18);
      position:relative;
      overflow:hidden;
    }
    .brand-mark::before{
      content:"";
      position:absolute;
      inset:8px;
      border-radius:12px;
      background:linear-gradient(135deg, rgba(10,13,20,.9), rgba(16,21,33,.3));
      border:1px solid rgba(255,255,255,.12);
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:50% auto auto 50%;
      width:12px;height:12px;
      transform:translate(-50%,-50%) rotate(45deg);
      background:linear-gradient(135deg, #fff, rgba(255,255,255,.1));
      box-shadow:0 0 18px rgba(255,255,255,.35);
      border-radius:2px;
    }
    .brand-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
    .brand-name{
      font-weight:800;
      letter-spacing:.2px;
      font-size:1.02rem;
      line-height:1.15;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-sub{
      color:var(--muted);
      font-size:.86rem;
      line-height:1.25;
    }
    .header-actions{
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:auto;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .auth-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:42px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.18);
      color:#e5eef9;
      background:rgba(255,255,255,.03);
      transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
      font-size:.92rem;
      white-space:nowrap;
    }
    .auth-link:hover,
    .auth-link:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(0,229,255,.35);
      box-shadow:0 0 0 3px rgba(0,229,255,.12);
      outline:none;
    }
    .auth-link.primary{
      background:linear-gradient(135deg, rgba(0,229,255,.98), rgba(57,255,20,.92));
      color:#061019;
      font-weight:800;
      box-shadow:0 10px 24px rgba(0,229,255,.18);
    }
    .nav-row{
      padding:0 0 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .main-nav{
      display:flex;
      align-items:center;
      gap:10px;
      overflow-x:auto;
      padding-bottom:2px;
      scrollbar-width:none;
      -ms-overflow-style:none;
      min-width:0;
      flex:1 1 auto;
    }
    .main-nav::-webkit-scrollbar{display:none}
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:11px 15px;
      border-radius:999px;
      border:1px solid transparent;
      color:#dbe7f3;
      background:rgba(255,255,255,.02);
      transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
      white-space:nowrap;
      font-size:.95rem;
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(0,229,255,.25);
      background:rgba(0,229,255,.08);
      box-shadow:0 0 0 3px rgba(0,229,255,.08);
      outline:none;
    }
    .nav-link.active{
      background:linear-gradient(135deg, rgba(0,229,255,.18), rgba(57,255,20,.12));
      border-color:rgba(0,229,255,.36);
      color:#fff;
      box-shadow:var(--glow);
    }
    .nav-dot{
      width:8px;height:8px;border-radius:50%;
      background:linear-gradient(180deg, var(--cyan), var(--green));
      box-shadow:0 0 12px rgba(0,229,255,.45);
      flex:none;
    }
    .quick-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(247,201,72,.2);
      background:linear-gradient(135deg, rgba(247,201,72,.1), rgba(255,255,255,.03));
      color:#f7e7b1;
      font-size:.9rem;
      white-space:nowrap;
      box-shadow:0 0 0 1px rgba(247,201,72,.05) inset;
    }
    .quick-pill .mini{
      width:10px;height:10px;
      border-radius:50%;
      background:linear-gradient(180deg, #ffe08a, #f7c948);
      box-shadow:0 0 14px rgba(247,201,72,.55);
      flex:none;
      position:relative;
    }
    .quick-pill .mini::after{
      content:"";
      position:absolute;
      top:-2px;left:-2px;
      width:14px;height:14px;
      border-radius:50%;
      border:1px solid rgba(247,201,72,.22);
      animation:pulse 2.8s infinite ease-out;
    }
    main{padding-bottom:64px}
    section{
      position:relative;
      padding:28px 0;
    }
    section[id]{scroll-margin-top:110px}
    .hero{
      padding-top:18px;
    }
    .hero-shell{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-lg);
      border:1px solid rgba(148,163,184,.16);
      background:
        linear-gradient(180deg, rgba(9,12,18,.72), rgba(9,12,18,.92)),
        url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
      box-shadow:var(--shadow);
      isolation:isolate;
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(120deg, rgba(0,229,255,.08), transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(57,255,20,.08), transparent 30%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.5));
      z-index:-1;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:28px;
      align-items:center;
      padding:30px;
      min-height:580px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 14px;
      border-radius:999px;
      border:1px solid rgba(0,229,255,.22);
      background:rgba(0,229,255,.08);
      color:#cffaff;
      font-weight:700;
      letter-spacing:.02em;
      margin-bottom:16px;
      font-size:.92rem;
    }
    .eyebrow .spark{
      width:10px;height:10px;border-radius:50%;
      background:linear-gradient(180deg, var(--cyan), var(--green));
      box-shadow:0 0 14px rgba(0,229,255,.45);
    }
    .hero h1{
      margin:0 0 14px;
      font-size:clamp(2rem, 4.8vw, 4.45rem);
      line-height:1.02;
      letter-spacing:-.03em;
      max-width:12ch;
      text-wrap:balance;
    }
    .hero .lead{
      margin:0 0 24px;
      color:#d3deeb;
      font-size:1.04rem;
      max-width:62ch;
    }
    .hero-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:18px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid transparent;
      cursor:pointer;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
      text-decoration:none;
      font-weight:800;
      letter-spacing:.01em;
      user-select:none;
    }
    .btn:hover,
    .btn:focus-visible{
      transform:translateY(-2px);
      outline:none;
    }
    .btn-primary{
      color:#061019;
      background:linear-gradient(135deg, var(--cyan), #6cfff0 38%, var(--green));
      box-shadow:0 16px 28px rgba(0,229,255,.18);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      box-shadow:0 18px 36px rgba(0,229,255,.25);
      filter:saturate(1.1);
    }
    .btn-secondary{
      color:#eaf3ff;
      background:rgba(255,255,255,.04);
      border-color:rgba(148,163,184,.22);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      border-color:rgba(0,229,255,.28);
      background:rgba(0,229,255,.08);
      box-shadow:0 0 0 3px rgba(0,229,255,.08);
    }
    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:14px 0 0;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(148,163,184,.16);
      color:#dce8f6;
      font-size:.88rem;
    }
    .chip strong{color:#fff}
    .metric-row{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:12px;
      margin-top:22px;
    }
    .metric{
      border-radius:18px;
      border:1px solid rgba(148,163,184,.14);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
      padding:14px 16px;
      box-shadow:var(--shadow-soft);
    }
    .metric strong{
      display:block;
      font-size:1.25rem;
      margin-bottom:4px;
      letter-spacing:-.02em;
    }
    .metric span{
      color:var(--muted);
      font-size:.88rem;
    }
    .poster-card{
      position:relative;
      border-radius:28px;
      overflow:hidden;
      min-height:520px;
      border:1px solid rgba(148,163,184,.18);
      background:var(--panel);
      box-shadow:var(--shadow);
      transform:translateZ(0);
    }
    .poster-media{
      position:absolute;
      inset:0;
    }
    .poster-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      opacity:.92;
      filter:saturate(1.08) contrast(1.02);
      transform:scale(1.02);
      animation:drift 11s ease-in-out infinite alternate;
    }
    .poster-overlay{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      padding:22px;
      background:
        linear-gradient(180deg, rgba(7,10,16,.1), rgba(7,10,16,.58) 52%, rgba(7,10,16,.94));
    }
    .poster-top{
      position:absolute;
      top:18px;left:18px;right:18px;
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:center;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      font-weight:800;
      letter-spacing:.01em;
      font-size:.84rem;
      line-height:1;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .badge.warn{
      color:#fff3cf;
      border-color:rgba(247,201,72,.24);
      background:rgba(247,201,72,.12);
      box-shadow:0 0 0 1px rgba(247,201,72,.06) inset;
    }
    .badge.soft{
      color:#dce8f6;
      border-color:rgba(148,163,184,.18);
      background:rgba(255,255,255,.05);
    }
    .poster-card h3{
      margin:0 0 10px;
      font-size:1.65rem;
      line-height:1.15;
      max-width:12ch;
    }
    .poster-card p{
      margin:0 0 16px;
      color:#d3deeb;
      max-width:32ch;
    }
    .progress-wrap{
      margin:12px 0 16px;
    }
    .progress-label{
      display:flex;
      justify-content:space-between;
      gap:12px;
      font-size:.9rem;
      margin-bottom:8px;
    }
    .progress-label span{color:var(--muted)}
    .progress-label strong{color:#fff}
    .progress-bar{
      height:12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.1);
      overflow:hidden;
      box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
    }
    .progress-bar span{
      display:block;
      height:100%;
      width:86%;
      border-radius:inherit;
      background:linear-gradient(90deg, #8bfaff, var(--cyan) 45%, var(--green));
      box-shadow:0 0 18px rgba(0,229,255,.25);
      position:relative;
    }
    .progress-bar span::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
      animation:shine 3s linear infinite;
    }
    .poster-meta{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:10px;
      margin-top:4px;
    }
    .poster-mini{
      padding:12px 12px 11px;
      border-radius:18px;
      background:rgba(10,13,20,.62);
      border:1px solid rgba(255,255,255,.1);
      backdrop-filter:blur(10px);
    }
    .poster-mini strong{
      display:block;
      font-size:1rem;
      margin-bottom:2px;
    }
    .poster-mini span{
      color:#b6c3d4;
      font-size:.82rem;
    }
    .offer-band{
      padding-top:6px;
    }
    .offer-panel{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:18px;
      align-items:center;
      padding:22px;
      border-radius:28px;
      border:1px solid rgba(247,201,72,.15);
      background:
        linear-gradient(135deg, rgba(247,201,72,.08), rgba(0,229,255,.04)),
        rgba(15,17,26,.84);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .offer-panel h2{
      margin:10px 0 10px;
      font-size:clamp(1.45rem, 2.4vw, 2.1rem);
      line-height:1.1;
    }
    .offer-panel p{
      margin:0;
      color:#d5dfeb;
      max-width:56ch;
    }
    .offer-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:12px;
    }
    .shine-card{
      position:relative;
      padding:16px 15px;
      border-radius:18px;
      border:1px solid rgba(148,163,184,.16);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      color:#eef5ff;
      min-height:104px;
      overflow:hidden;
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .shine-card::before{
      content:"";
      position:absolute;
      inset:-40% auto auto -35%;
      width:110px;height:110px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(0,229,255,.18), transparent 65%);
      pointer-events:none;
    }
    .shine-card:hover{
      transform:translateY(-3px);
      border-color:rgba(0,229,255,.26);
      box-shadow:0 16px 30px rgba(0,0,0,.18);
    }
    .shine-card strong{
      display:block;
      font-size:1rem;
      margin-bottom:6px;
    }
    .shine-card span{
      color:var(--muted);
      font-size:.88rem;
      line-height:1.45;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-end;
      margin-bottom:18px;
      flex-wrap:wrap;
    }
    .section-label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#cffaff;
      font-size:.86rem;
      font-weight:800;
      letter-spacing:.09em;
      text-transform:uppercase;
      margin-bottom:8px;
    }
    .section-label::before{
      content:"";
      width:28px;height:1px;
      background:linear-gradient(90deg, var(--cyan), var(--green));
      box-shadow:0 0 14px rgba(0,229,255,.35);
    }
    .section-head h2{
      margin:0;
      font-size:clamp(1.5rem, 2.7vw, 2.4rem);
      line-height:1.08;
      letter-spacing:-.025em;
    }
    .section-head p{
      margin:0;
      max-width:58ch;
      color:var(--muted);
    }
    .game-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:16px;
    }
    .game-card{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(20,25,38,.92), rgba(11,14,20,.95));
      border:1px solid rgba(148,163,184,.16);
      box-shadow:var(--shadow-soft);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      min-height:100%;
    }
    .game-card:hover{
      transform:translateY(-5px);
      border-color:rgba(0,229,255,.32);
      box-shadow:0 20px 36px rgba(0,0,0,.32), 0 0 0 1px rgba(0,229,255,.08);
    }
    .game-media{
      position:relative;
      height:198px;
      overflow:hidden;
    }
    .game-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent 45%, rgba(10,13,20,.85));
      pointer-events:none;
    }
    .game-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .35s ease, filter .35s ease;
      filter:saturate(1.05) contrast(1.02);
    }
    .game-card:hover .game-media img{
      transform:scale(1.06);
    }
    .card-badges{
      position:absolute;
      top:14px;left:14px;right:14px;
      display:flex;
      justify-content:space-between;
      gap:10px;
      z-index:1;
    }
    .card-tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      color:#fff;
      font-size:.78rem;
      font-weight:800;
      backdrop-filter:blur(10px);
      background:rgba(11,14,20,.52);
      border:1px solid rgba(255,255,255,.12);
    }
    .card-body{
      padding:16px 16px 18px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .card-body h3{
      margin:0;
      font-size:1.03rem;
      line-height:1.25;
      letter-spacing:-.01em;
    }
    .card-body p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.52;
      min-height:4.2em;
    }
    .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:4px;
    }
    .meta-row .mini{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      color:#dfeaf7;
      background:rgba(255,255,255,.045);
      border:1px solid rgba(148,163,184,.14);
      font-size:.78rem;
      white-space:nowrap;
    }
    .split-panel{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:18px;
      align-items:stretch;
      padding:22px;
      border-radius:28px;
      border:1px solid rgba(148,163,184,.16);
      background:
        linear-gradient(135deg, rgba(21,24,36,.88), rgba(11,14,20,.94)),
        url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
      box-shadow:var(--shadow-soft);
    }
    .split-visual{
      border-radius:24px;
      overflow:hidden;
      position:relative;
      min-height:330px;
      border:1px solid rgba(148,163,184,.15);
    }
    .split-visual img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:saturate(1.06);
    }
    .split-visual::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent 44%, rgba(8,10,16,.72));
      pointer-events:none;
    }
    .split-visual .caption{
      position:absolute;
      inset:auto 16px 16px 16px;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .caption .tagline{
      display:inline-flex;
      align-items:center;
      width:max-content;
      gap:8px;
      border-radius:999px;
      padding:7px 11px;
      background:rgba(10,13,20,.62);
      border:1px solid rgba(255,255,255,.12);
      color:#eaf3ff;
      font-weight:800;
      font-size:.8rem;
    }
    .caption strong{
      font-size:1.2rem;
      line-height:1.2;
    }
    .caption span{
      color:#c5d1e0;
      font-size:.9rem;
      max-width:36ch;
    }
    .split-copy{
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:14px;
      padding:6px 6px 6px 10px;
    }
    .split-copy h2{
      margin:0;
      font-size:clamp(1.5rem, 2.6vw, 2.15rem);
      line-height:1.1;
    }
    .split-copy p{
      margin:0;
      color:#d4deeb;
      max-width:58ch;
    }
    .feature-list{
      list-style:none;
      padding:0;
      margin:4px 0 0;
      display:grid;
      gap:12px;
    }
    .feature-list li{
      position:relative;
      padding-left:28px;
      color:#e9f2fb;
    }
    .feature-list li::before{
      content:"";
      position:absolute;
      left:0;top:.48em;
      width:16px;height:16px;
      border-radius:50%;
      background:linear-gradient(180deg, var(--cyan), var(--green));
      box-shadow:0 0 14px rgba(0,229,255,.25);
    }
    .feature-list li::after{
      content:"";
      position:absolute;
      left:5px;top:.73em;
      width:6px;height:3px;
      border-left:2px solid #061019;
      border-bottom:2px solid #061019;
      transform:rotate(-45deg);
    }
    .process-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
    }
    .process-card,
    .review-card,
    .faq-item,
    .cta-panel,
    .info-card{
      border-radius:24px;
      border:1px solid rgba(148,163,184,.16);
      background:linear-gradient(180deg, rgba(20,25,38,.88), rgba(11,14,20,.96));
      box-shadow:var(--shadow-soft);
    }
    .process-card{
      padding:18px;
      min-height:100%;
      transition:transform .2s ease, border-color .2s ease;
    }
    .process-card:hover{
      transform:translateY(-3px);
      border-color:rgba(0,229,255,.28);
    }
    .step-num{
      width:42px;height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      font-weight:900;
      color:#061019;
      background:linear-gradient(135deg, var(--cyan), var(--green));
      box-shadow:0 10px 18px rgba(0,229,255,.15);
      margin-bottom:14px;
    }
    .process-card h3{
      margin:0 0 8px;
      font-size:1.05rem;
    }
    .process-card p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.55;
    }
    .review-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
    }
    .review-card{
      padding:18px;
      position:relative;
      overflow:hidden;
    }
    .review-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at top right, rgba(0,229,255,.12), transparent 28%),
        radial-gradient(circle at bottom left, rgba(57,255,20,.08), transparent 28%);
      pointer-events:none;
    }
    .quote{
      position:relative;
      font-size:1rem;
      color:#e8f2fc;
      margin:0 0 16px;
      line-height:1.7;
    }
    .review-meta{
      position:relative;
      display:flex;
      align-items:center;
      gap:12px;
    }
    .avatar{
      width:42px;height:42px;
      border-radius:50%;
      display:grid;
      place-items:center;
      font-weight:900;
      background:linear-gradient(135deg, rgba(0,229,255,.2), rgba(57,255,20,.16));
      border:1px solid rgba(148,163,184,.2);
      color:#fff;
      flex:none;
    }
    .review-meta strong{
      display:block;
      font-size:.95rem;
      line-height:1.2;
    }
    .review-meta span{
      color:var(--muted);
      font-size:.84rem;
    }
    .faq-list{
      display:grid;
      gap:12px;
    }
    .faq-item{
      padding:0;
      overflow:hidden;
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:18px 20px;
      font-weight:800;
      color:#f4f9ff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      width:30px;height:30px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(148,163,184,.16);
      color:#dce8f6;
      flex:none;
      transition:transform .2s ease, background .2s ease;
    }
    .faq-item[open] summary::after{
      content:"–";
      background:rgba(0,229,255,.12);
      transform:rotate(180deg);
    }
    .faq-body{
      padding:0 20px 18px;
      color:var(--muted);
    }
    .cta-panel{
      display:grid;
      grid-template-columns:1.02fr .98fr;
      gap:18px;
      padding:22px;
      align-items:center;
      background:
        linear-gradient(135deg, rgba(0,229,255,.06), rgba(57,255,20,.05)),
        linear-gradient(180deg, rgba(20,25,38,.9), rgba(11,14,20,.96));
      position:relative;
      overflow:hidden;
    }
    .cta-panel::before{
      content:"";
      position:absolute;
      inset:auto -8% -35% auto;
      width:320px;height:320px;
      background:radial-gradient(circle, rgba(0,229,255,.18), transparent 60%);
      filter:blur(12px);
      pointer-events:none;
    }
    .cta-copy h2{
      margin:0 0 10px;
      font-size:clamp(1.5rem, 2.8vw, 2.25rem);
      line-height:1.1;
    }
    .cta-copy p{
      margin:0 0 16px;
      color:#d3deeb;
      max-width:54ch;
    }
    .cta-points{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .cta-points li{
      position:relative;
      padding-left:26px;
      color:#ebf3ff;
    }
    .cta-points li::before{
      content:"";
      position:absolute;
      left:0;top:.45em;
      width:16px;height:16px;
      border-radius:50%;
      background:linear-gradient(180deg, var(--cyan), var(--green));
      box-shadow:0 0 12px rgba(0,229,255,.22);
    }
    .form-card{
      position:relative;
      z-index:1;
      padding:18px;
      border-radius:24px;
      background:rgba(8,11,18,.58);
      border:1px solid rgba(148,163,184,.16);
      backdrop-filter:blur(12px);
    }
    .form-card label{
      display:block;
      margin-bottom:8px;
      color:#eef5ff;
      font-weight:700;
    }
    .form-field{
      display:grid;
      gap:10px;
      margin-top:12px;
    }
    .form-field input,
    .form-field textarea{
      width:100%;
      border-radius:16px;
      border:1px solid rgba(148,163,184,.16);
      background:rgba(255,255,255,.04);
      color:#fff;
      padding:14px 15px;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .form-field input::placeholder,
    .form-field textarea::placeholder{color:#8f9db1}
    .form-field input:focus,
    .form-field textarea:focus{
      border-color:rgba(0,229,255,.38);
      box-shadow:0 0 0 3px rgba(0,229,255,.1);
      background:rgba(255,255,255,.06);
    }
    .form-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:14px;
    }
    .helper-line{
      margin-top:12px;
      color:var(--muted);
      font-size:.88rem;
    }
    .footer{
      border-top:1px solid rgba(148,163,184,.14);
      background:linear-gradient(180deg, rgba(9,12,18,.82), rgba(7,9,14,.98));
      padding:34px 0 18px;
      position:relative;
      overflow:hidden;
    }
    .footer::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 10% 0%, rgba(0,229,255,.08), transparent 24%),
        radial-gradient(circle at 90% 0%, rgba(57,255,20,.06), transparent 20%);
      pointer-events:none;
    }
    .footer-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.4fr .8fr .9fr;
      gap:22px;
      align-items:start;
      margin-bottom:20px;
    }
    .footer h3{
      margin:0 0 12px;
      font-size:1rem;
      letter-spacing:.01em;
    }
    .footer p{
      margin:14px 0 0;
      color:var(--muted);
      max-width:44ch;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a{
      color:#dce7f4;
      transition:color .2s ease, transform .2s ease, opacity .2s ease;
      width:max-content;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color:#fff;
      transform:translateX(2px);
      outline:none;
    }
    .footer-badges{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .footer-bar{
      position:relative;
      padding-top:16px;
      border-top:1px solid rgba(148,163,184,.12);
      display:flex;
      flex-wrap:wrap;
      gap:10px 16px;
      justify-content:space-between;
      color:#90a0b6;
      font-size:.88rem;
    }
    .info-card{
      padding:18px;
    }
    .info-card .row{
      display:flex;
      justify-content:space-between;
      gap:14px;
      align-items:center;
      margin-bottom:14px;
    }
    .info-card strong{
      font-size:1.06rem;
    }
    .info-card .small{
      color:var(--muted);
      font-size:.9rem;
    }
    .support-fab{
      position:fixed;
      left:22px;
      bottom:22px;
      z-index:1100;
      display:inline-flex;
      align-items:center;
      gap:12px;
      padding:12px 16px 12px 14px;
      border-radius:999px;
      border:1px solid rgba(0,229,255,.32);
      background:rgba(17,14,28,.72);
      color:#f6fbff;
      box-shadow:0 14px 30px rgba(0,0,0,.34), 0 0 26px rgba(0,229,255,.14);
      backdrop-filter:blur(12px);
      cursor:grab;
      user-select:none;
      touch-action:none;
      opacity:.82;
      animation:floaty 4.5s ease-in-out infinite;
    }
    .support-fab:hover,
    .support-fab:focus-visible{
      opacity:1;
      transform:scale(1.05);
      outline:none;
      box-shadow:0 18px 34px rgba(0,0,0,.36), 0 0 34px rgba(0,229,255,.22);
    }
    .support-chip{
      width:42px;height:42px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.34), transparent 24%),
        linear-gradient(135deg, rgba(0,229,255,.95), rgba(57,255,20,.82));
      box-shadow:0 0 0 1px rgba(0,229,255,.22);
      flex:none;
      position:relative;
    }
    .support-chip svg{width:22px;height:22px;fill:#071019}
    .support-copy{
      display:flex;
      flex-direction:column;
      line-height:1.1;
      gap:3px;
      padding-right:8px;
    }
    .support-copy strong{
      font-size:.95rem;
      letter-spacing:.01em;
    }
    .support-copy span{
      color:#adc0d4;
      font-size:.8rem;
    }
    .support-fab::after{
      content:"";
      position:absolute;
      top:8px;
      right:8px;
      width:10px;
      height:10px;
      background:linear-gradient(180deg, #ff9db0, #d81d3a);
      transform:rotate(45deg);
      border-radius:2px;
      box-shadow:0 0 12px rgba(255,93,115,.55);
      animation:blink 1.8s ease-in-out infinite;
    }
    .support-fab.is-notification{
      animation:floaty 4.5s ease-in-out infinite, wobble 2.8s ease-in-out infinite;
    }
    @keyframes floaty{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-6px)}
    }
    @keyframes wobble{
      0%,100%{rotate:0deg}
      35%{rotate:-1.3deg}
      70%{rotate:1.2deg}
    }
    @keyframes blink{
      0%,100%{opacity:.9; transform:rotate(45deg) scale(1)}
      50%{opacity:.4; transform:rotate(45deg) scale(.85)}
    }
    @keyframes pulse{
      0%{transform:scale(.82);opacity:.8}
      100%{transform:scale(1.7);opacity:0}
    }
    @keyframes drift{
      from{transform:scale(1.02) translateY(0)}
      to{transform:scale(1.07) translateY(-8px)}
    }
    @keyframes shine{
      0%{transform:translateX(-120%)}
      100%{transform:translateX(120%)}
    }
    @media (max-width: 1180px){
      .game-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
    }
    @media (max-width: 1024px){
      :root{--header-h: 132px}
      .hero-grid,
      .offer-panel,
      .split-panel,
      .cta-panel{
        grid-template-columns:1fr;
      }
      .poster-card{min-height:460px}
      .game-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
      .process-grid,
      .review-grid,
      .footer-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .footer-grid > :first-child{grid-column:1/-1}
      .offer-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
      .split-copy{padding:0}
    }
    @media (max-width: 768px){
      :root{--header-h: 178px}
      .site-header{box-shadow:0 8px 24px rgba(0,0,0,.25)}
      .header-inner{
        padding:12px 0 8px;
      }
      .nav-row{
        padding-bottom:12px;
        width:100%;
        flex-direction:column;
        align-items:stretch;
      }
      .quick-pill{
        width:max-content;
        align-self:flex-start;
      }
      .main-nav{
        width:100%;
      }
      .hero-grid{
        padding:22px;
        min-height:auto;
      }
      .hero h1{
        max-width:100%;
      }
      .metric-row{
        grid-template-columns:1fr;
      }
      .poster-meta{
        grid-template-columns:1fr;
      }
      .game-grid,
      .process-grid,
      .review-grid,
      .footer-grid,
      .offer-grid{
        grid-template-columns:1fr;
      }
      .split-visual{min-height:260px}
      .support-fab{
        left:14px;
        bottom:14px;
        max-width:calc(100vw - 28px);
      }
      .auth-link{min-height:38px;padding:0 12px;font-size:.86rem}
    }
    @media (max-width: 520px){
      :root{--header-h: 186px}
      .container{width:min(100% - 24px, 1180px)}
      .brand-name{font-size:.98rem}
      .brand-sub{font-size:.8rem}
      .hero-shell,
      .offer-panel,
      .split-panel,
      .cta-panel{
        border-radius:22px;
      }
      .hero-grid{padding:18px}
      .hero h1{font-size:clamp(1.9rem, 12vw, 3rem)}
      .hero-actions .btn{flex:1 1 100%}
      .btn{width:100%}
      .card-body p{min-height:auto}
      .poster-card{min-height:420px}
      .footer-bar{flex-direction:column}
      .support-copy span{display:none}
      .support-fab{padding:10px 14px 10px 12px}
    }

/* roulang page: category3 */
:root{
      --bg:#0f111a;
      --bg-2:#151824;
      --surface:rgba(17, 24, 39, .84);
      --surface-2:rgba(9, 12, 20, .76);
      --line:rgba(148, 163, 184, .18);
      --line-strong:rgba(0, 229, 255, .24);
      --text:#ffffff;
      --muted:#94a3b8;
      --muted-2:#cbd5e1;
      --cyan:#00e5ff;
      --green:#39ff14;
      --amber:#f8c44f;
      --rose:#ff6b6b;
      --shadow:0 18px 40px rgba(0, 0, 0, .32);
      --shadow-soft:0 10px 24px rgba(0, 0, 0, .22);
      --radius:18px;
      --radius-sm:12px;
      --radius-xs:10px;
      --container:1180px;
      --space:clamp(18px, 3vw, 30px);
      --transition:180ms ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height:1.6;
      background:
        linear-gradient(180deg, rgba(8,10,16,.92), rgba(10,12,18,.96)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 120px),
        repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 120px),
        var(--bg);
      min-height:100vh;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(140deg, rgba(0,229,255,.08), transparent 28%),
        linear-gradient(320deg, rgba(57,255,20,.08), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%);
      opacity:.9;
      z-index:-1;
    }
    img{
      display:block;
      max-width:100%;
      height:auto;
    }
    a{
      color:inherit;
      text-decoration:none;
      transition:color var(--transition), transform var(--transition), border-color var(--transition), background-color var(--transition), box-shadow var(--transition), opacity var(--transition);
    }
    button,
    input,
    select,
    textarea{
      font:inherit;
      color:inherit;
    }
    button{
      border:0;
      background:none;
      padding:0;
      cursor:pointer;
    }
    :focus-visible{
      outline:2px solid var(--cyan);
      outline-offset:2px;
    }
    .container{
      width:min(var(--container), calc(100% - 32px));
      margin-inline:auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter:blur(14px);
      background:rgba(8, 10, 16, .72);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:14px 0 10px;
      flex-wrap:wrap;
    }
    .brand-row{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .brand-mark{
      width:44px;
      height:44px;
      border-radius:14px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), transparent 28%),
        linear-gradient(135deg, rgba(0,229,255,.95), rgba(57,255,20,.9));
      box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0, 229, 255, .16);
      position:relative;
      flex:0 0 auto;
    }
    .brand-mark::before,
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.85);
      opacity:.85;
    }
    .brand-mark::after{
      inset:15px 11px 11px 15px;
      border-radius:10px;
      transform:rotate(12deg);
      opacity:.55;
    }
    .brand-copy{
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    .brand-name{
      font-weight:800;
      letter-spacing:0;
      line-height:1.15;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:min(36vw, 470px);
    }
    .brand-sub{
      color:var(--muted);
      font-size:.9rem;
      line-height:1.35;
    }
    .header-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-left:auto;
    }
    .auth-link{
      min-height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      color:var(--muted-2);
      background:rgba(255,255,255,.02);
      font-weight:600;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .auth-link:hover{
      border-color:rgba(0,229,255,.38);
      color:var(--text);
      transform:translateY(-1px);
      box-shadow:0 8px 20px rgba(0, 229, 255, .08);
    }
    .auth-link.primary{
      background:linear-gradient(135deg, rgba(0,229,255,.94), rgba(57,255,20,.9));
      color:#081018;
      border-color:transparent;
      box-shadow:0 14px 28px rgba(0, 229, 255, .14);
    }
    .auth-link.primary:hover{
      color:#061017;
      transform:translateY(-1px);
      box-shadow:0 18px 30px rgba(57,255,20,.16);
    }
    .nav-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:0 0 14px;
    }
    .main-nav{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      min-width:0;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:40px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid transparent;
      color:var(--muted-2);
      background:rgba(255,255,255,.02);
      white-space:nowrap;
      font-weight:600;
    }
    .nav-link:hover{
      color:var(--text);
      border-color:rgba(148,163,184,.22);
      background:rgba(255,255,255,.05);
      transform:translateY(-1px);
    }
    .nav-link.active{
      color:var(--text);
      background:linear-gradient(135deg, rgba(0,229,255,.16), rgba(57,255,20,.12));
      border-color:rgba(0,229,255,.22);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .nav-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 0 3px rgba(0,229,255,.14);
      flex:0 0 auto;
    }
    .quick-pill{
      display:flex;
      align-items:center;
      gap:10px;
      white-space:nowrap;
      color:var(--muted-2);
      font-size:.92rem;
      padding:8px 14px;
      border-radius:999px;
      border:1px solid rgba(57,255,20,.22);
      background:linear-gradient(135deg, rgba(57,255,20,.08), rgba(0,229,255,.05));
    }
    .quick-pill .mini{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 0 4px rgba(57,255,20,.14);
    }
    main{
      display:block;
      padding:22px 0 56px;
    }
    .section{
      padding:28px 0;
      position:relative;
    }
    .section + .section{
      border-top:1px solid rgba(255,255,255,.05);
    }
    .hero{
      padding-top:18px;
    }
    .limited-strip{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
      margin-bottom:16px;
      padding:12px 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(90deg, rgba(255,107,107,.1), rgba(0,229,255,.08), rgba(57,255,20,.08));
      box-shadow:var(--shadow-soft);
    }
    .limited-strip strong{
      color:var(--text);
      letter-spacing:.01em;
    }
    .limited-strip span{
      color:var(--muted-2);
      font-size:.94rem;
    }
    .section-label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      border:1px solid rgba(0,229,255,.2);
      background:rgba(0,229,255,.06);
      color:var(--muted-2);
      font-size:.88rem;
      margin-bottom:12px;
    }
    .section-label::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 0 3px rgba(0,229,255,.16);
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0, 1.05fr) minmax(320px, .95fr);
      gap:24px;
      align-items:stretch;
    }
    .hero-copy{
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:18px;
      padding:22px 0;
    }
    .hero h1{
      margin:0;
      font-size:clamp(2.2rem, 4.4vw, 4.1rem);
      line-height:1.03;
      letter-spacing:0;
      text-wrap:balance;
      max-width:12ch;
    }
    .hero-lead{
      margin:0;
      max-width:60ch;
      color:var(--muted-2);
      font-size:1.04rem;
    }
    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:var(--muted-2);
      font-size:.92rem;
      white-space:nowrap;
    }
    .chip.emph{
      border-color:rgba(57,255,20,.24);
      background:linear-gradient(135deg, rgba(57,255,20,.1), rgba(0,229,255,.06));
      color:var(--text);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:4px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:700;
      line-height:1;
      transition:transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition);
    }
    .btn:hover{
      transform:translateY(-1px);
    }
    .btn-primary{
      color:#071018;
      background:linear-gradient(135deg, var(--cyan), var(--green));
      box-shadow:0 16px 28px rgba(0,229,255,.14);
    }
    .btn-primary:hover{
      box-shadow:0 20px 36px rgba(57,255,20,.16);
    }
    .btn-secondary{
      color:var(--text);
      border-color:rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
    }
    .btn-secondary:hover{
      border-color:rgba(0,229,255,.3);
      background:rgba(0,229,255,.08);
    }
    .btn svg{
      width:18px;
      height:18px;
      flex:0 0 auto;
    }
    .portrait-frame{
      position:relative;
      border-radius:28px;
      overflow:hidden;
      min-height:640px;
      background:
        linear-gradient(180deg, rgba(6,8,14,.12), rgba(6,8,14,.8)),
        url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      isolation:isolate;
    }
    .portrait-frame::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(8,10,16,.1), rgba(8,10,16,.58)),
        linear-gradient(90deg, rgba(0,229,255,.08), transparent 26%, transparent 74%, rgba(57,255,20,.08));
      z-index:0;
    }
    .portrait-frame::after{
      content:"";
      position:absolute;
      inset:14px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.08);
      z-index:1;
      pointer-events:none;
    }
    .portrait-stack{
      position:absolute;
      inset:0;
      display:grid;
      grid-template-rows:auto 1fr auto;
      gap:16px;
      padding:18px;
      z-index:2;
    }
    .mini-card{
      padding:14px;
      border-radius:18px;
      background:rgba(8,10,16,.62);
      border:1px solid rgba(0,229,255,.18);
      backdrop-filter:blur(12px);
      box-shadow:0 10px 20px rgba(0,0,0,.22);
    }
    .mini-card.top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .mini-card.top strong{
      font-size:1rem;
    }
    .mini-metrics{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:10px;
    }
    .metric{
      border-radius:16px;
      padding:12px;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
    }
    .metric span{
      display:block;
      color:var(--muted);
      font-size:.82rem;
      margin-bottom:6px;
    }
    .metric strong{
      display:block;
      font-size:1.1rem;
      line-height:1.2;
    }
    .video-card{
      align-self:end;
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      padding:14px;
      border-radius:22px;
      background:rgba(7, 10, 16, .66);
      border:1px solid rgba(57,255,20,.16);
      box-shadow:0 18px 34px rgba(0,0,0,.28);
    }
    .video-cover{
      aspect-ratio:9 / 12;
      border-radius:18px;
      overflow:hidden;
      position:relative;
      border:1px solid rgba(255,255,255,.08);
      background:#101523;
    }
    .video-cover img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .video-cover .overlay{
      position:absolute;
      inset:auto 0 0 0;
      padding:14px;
      background:linear-gradient(180deg, transparent, rgba(6,8,14,.92));
      color:var(--text);
    }
    .video-cover .overlay strong{
      display:block;
      font-size:1.02rem;
      margin-bottom:4px;
    }
    .video-cover .overlay span{
      color:var(--muted-2);
      font-size:.9rem;
    }
    .hero-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .hero-tags .tag{
      padding:8px 11px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:var(--muted-2);
      font-size:.88rem;
      white-space:nowrap;
    }
    .hero-tags .tag.hot{
      color:#061018;
      background:linear-gradient(135deg, var(--amber), #ff8f5f);
      border-color:transparent;
      font-weight:700;
    }
    .stats-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:14px;
      margin-top:14px;
    }
    .stat{
      padding:18px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(17,24,39,.88), rgba(10,14,22,.82));
      box-shadow:var(--shadow-soft);
      min-height:120px;
    }
    .stat .num{
      font-size:1.7rem;
      line-height:1;
      font-weight:800;
      margin-bottom:10px;
      display:block;
      background:linear-gradient(135deg, var(--cyan), var(--green));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .stat p{
      margin:0;
      color:var(--muted-2);
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:20px;
      flex-wrap:wrap;
    }
    .section-head h2{
      margin:0;
      font-size:clamp(1.45rem, 2.6vw, 2.2rem);
      line-height:1.15;
      letter-spacing:0;
    }
    .section-head p{
      margin:0;
      color:var(--muted-2);
      max-width:62ch;
    }
    .game-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:16px;
    }
    .game-card{
      position:relative;
      display:flex;
      flex-direction:column;
      min-width:0;
      border-radius:20px;
      background:var(--surface);
      border:1px solid rgba(0,229,255,.18);
      overflow:hidden;
      box-shadow:var(--shadow-soft);
      transform:translateY(0);
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .game-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 32px rgba(0,0,0,.34);
      border-color:rgba(57,255,20,.24);
    }
    .game-thumb{
      position:relative;
      aspect-ratio:4 / 4.8;
      overflow:hidden;
      background:#0f1421;
    }
    .game-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1);
      transition:transform 260ms ease;
    }
    .game-card:hover .game-thumb img{
      transform:scale(1.04);
    }
    .game-thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent 42%, rgba(7,10,16,.96));
    }
    .game-badge{
      position:absolute;
      top:12px;
      left:12px;
      z-index:2;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(8,10,16,.72);
      border:1px solid rgba(255,255,255,.12);
      color:var(--text);
      font-size:.82rem;
      backdrop-filter:blur(10px);
    }
    .game-body{
      padding:15px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .game-body h3{
      margin:0;
      font-size:1rem;
      line-height:1.25;
      letter-spacing:0;
    }
    .game-body p{
      margin:0;
      color:var(--muted-2);
      font-size:.94rem;
    }
    .game-foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding-top:2px;
      margin-top:auto;
    }
    .rating{
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:var(--amber);
      font-weight:700;
      white-space:nowrap;
    }
    .mini-tags{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .mini-tags span{
      padding:6px 8px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      color:var(--muted-2);
      font-size:.8rem;
    }
    .promo-band{
      display:grid;
      grid-template-columns:minmax(0, 1.1fr) minmax(280px, .9fr);
      gap:18px;
      align-items:center;
      padding:22px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(135deg, rgba(255,107,107,.1), rgba(0,229,255,.08) 50%, rgba(57,255,20,.08)),
        rgba(14,17,27,.88);
      box-shadow:var(--shadow);
    }
    .promo-band h2{
      margin:0 0 10px;
      font-size:clamp(1.5rem, 2.8vw, 2.3rem);
      line-height:1.12;
    }
    .promo-band p{
      margin:0;
      color:var(--muted-2);
      max-width:60ch;
    }
    .promo-list{
      display:grid;
      gap:10px;
    }
    .promo-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:13px 14px;
      border-radius:16px;
      background:rgba(8,10,16,.58);
      border:1px solid rgba(255,255,255,.08);
    }
    .promo-item strong{
      font-size:.98rem;
    }
    .promo-item span{
      color:var(--muted-2);
      font-size:.88rem;
    }
    .promo-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:18px;
    }
    .use-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:16px;
    }
    .use-card{
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:18px;
      border-radius:20px;
      background:linear-gradient(180deg, rgba(17,24,39,.9), rgba(11,14,21,.84));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
      min-height:260px;
    }
    .use-image{
      position:relative;
      overflow:hidden;
      border-radius:16px;
      aspect-ratio:16 / 10;
      border:1px solid rgba(255,255,255,.08);
      background:#111723;
    }
    .use-image img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .use-image::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent, rgba(8,10,16,.72));
    }
    .use-card h3{
      margin:0;
      font-size:1.02rem;
      line-height:1.25;
    }
    .use-card p{
      margin:0;
      color:var(--muted-2);
      font-size:.95rem;
    }
    .check-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:8px;
    }
    .check-list li{
      position:relative;
      padding-left:22px;
      color:var(--muted-2);
      font-size:.94rem;
    }
    .check-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.65em;
      width:11px;
      height:11px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--cyan), var(--green));
      box-shadow:0 0 0 3px rgba(0,229,255,.12);
      transform:translateY(-50%);
    }
    .faq-wrap{
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(300px, .78fr);
      gap:18px;
      align-items:start;
    }
    .faq-list{
      display:grid;
      gap:12px;
    }
    details.faq-item{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(17,24,39,.84);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    details.faq-item[open]{
      border-color:rgba(0,229,255,.22);
    }
    details.faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      font-weight:700;
      line-height:1.35;
    }
    details.faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary span{
      color:var(--text);
    }
    .faq-item summary .mark{
      width:28px;
      height:28px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.08);
      display:grid;
      place-items:center;
      color:var(--muted-2);
      background:rgba(255,255,255,.03);
      flex:0 0 auto;
    }
    .faq-item .answer{
      padding:0 18px 18px;
      color:var(--muted-2);
    }
    .faq-side{
      padding:18px;
      border-radius:22px;
      background:linear-gradient(180deg, rgba(0,229,255,.08), rgba(17,24,39,.88));
      border:1px solid rgba(0,229,255,.16);
      box-shadow:var(--shadow-soft);
    }
    .faq-side h3{
      margin:0 0 10px;
      font-size:1.15rem;
      line-height:1.3;
    }
    .faq-side p{
      margin:0 0 14px;
      color:var(--muted-2);
    }
    .side-badges{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:32px;
      padding:0 12px;
      border-radius:999px;
      font-size:.84rem;
      font-weight:700;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .badge.warn{
      background:rgba(255,107,107,.12);
      border-color:rgba(255,107,107,.18);
      color:#ffd2d2;
    }
    .badge.soft{
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.08);
      color:var(--muted-2);
    }
    .cta-wrap{
      display:grid;
      grid-template-columns:minmax(0, .98fr) minmax(340px, 1.02fr);
      gap:18px;
      align-items:stretch;
    }
    .cta-panel,
    .form-panel{
      border-radius:24px;
      padding:22px;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      background:linear-gradient(180deg, rgba(17,24,39,.92), rgba(10,14,21,.86));
    }
    .cta-panel{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:18px;
      background:
        linear-gradient(135deg, rgba(0,229,255,.12), rgba(57,255,20,.08)),
        rgba(14,17,27,.9);
    }
    .cta-panel h2{
      margin:0 0 12px;
      font-size:clamp(1.5rem, 2.6vw, 2.2rem);
      line-height:1.1;
    }
    .cta-panel p{
      margin:0;
      color:var(--muted-2);
      max-width:56ch;
    }
    .cta-list{
      display:grid;
      gap:10px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .cta-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:var(--muted-2);
    }
    .cta-list li::before{
      content:"";
      width:10px;
      height:10px;
      border-radius:50%;
      margin-top:.6em;
      background:linear-gradient(135deg, var(--cyan), var(--green));
      box-shadow:0 0 0 3px rgba(0,229,255,.12);
      flex:0 0 auto;
    }
    form{
      display:grid;
      gap:14px;
    }
    .field-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    .field{
      display:grid;
      gap:8px;
    }
    .field label{
      font-size:.9rem;
      color:var(--muted-2);
      font-weight:600;
    }
    .field input,
    .field select,
    .field textarea{
      width:100%;
      min-height:48px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(5,8,14,.7);
      padding:12px 14px;
      color:var(--text);
      outline:none;
      transition:border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
    }
    .field textarea{
      min-height:120px;
      resize:vertical;
    }
    .field input::placeholder,
    .field textarea::placeholder{
      color:#6b7280;
    }
    .field input:focus,
    .field select:focus,
    .field textarea:focus{
      border-color:rgba(0,229,255,.38);
      box-shadow:0 0 0 4px rgba(0,229,255,.08);
      background:rgba(6,10,16,.84);
    }
    .form-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-top:2px;
    }
    .form-note{
      color:var(--muted);
      font-size:.9rem;
      line-height:1.45;
    }
    .form-result{
      display:none;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(57,255,20,.18);
      background:rgba(57,255,20,.08);
      color:#d8ffe2;
    }
    .footer{
      padding:34px 0 28px;
      border-top:1px solid rgba(255,255,255,.06);
      background:linear-gradient(180deg, rgba(8,10,16,.2), rgba(8,10,16,.9));
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.4fr .8fr .8fr;
      gap:18px;
      align-items:start;
      padding-bottom:18px;
    }
    .footer h3{
      margin:0 0 12px;
      font-size:1rem;
    }
    .footer p{
      margin:12px 0 0;
      color:var(--muted-2);
      max-width:58ch;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a{
      color:var(--muted-2);
      width:max-content;
    }
    .footer-links a:hover{
      color:var(--text);
    }
    .footer-badges{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .footer-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:.92rem;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.06);
    }
    .fab-support{
      position:fixed;
      left:18px;
      bottom:18px;
      z-index:60;
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px 14px 12px 12px;
      border-radius:20px;
      border:1px solid rgba(0,229,255,.28);
      background:linear-gradient(135deg, rgba(9,12,20,.88), rgba(21,24,36,.86));
      color:var(--text);
      box-shadow:0 18px 28px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.03);
      backdrop-filter:blur(14px);
      max-width:300px;
      user-select:none;
      touch-action:none;
      animation:fabric-breathe 4.4s ease-in-out infinite;
    }
    .fab-support:hover{
      transform:scale(1.06);
      border-color:rgba(57,255,20,.36);
      box-shadow:0 22px 34px rgba(0,0,0,.42), 0 0 22px rgba(0,229,255,.18);
    }
    .fab-icon{
      width:40px;
      height:40px;
      border-radius:14px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(0,229,255,.18), rgba(57,255,20,.12));
      border:1px solid rgba(255,255,255,.08);
      position:relative;
    }
    .fab-icon svg{
      width:22px;
      height:22px;
      stroke:var(--cyan);
    }
    .fab-copy{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }
    .fab-copy strong{
      font-size:.95rem;
      line-height:1.15;
    }
    .fab-copy span{
      font-size:.8rem;
      color:var(--muted-2);
    }
    .fab-alert{
      position:absolute;
      top:8px;
      right:8px;
      width:10px;
      height:10px;
      background:#ff3166;
      clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      box-shadow:0 0 0 3px rgba(255,49,102,.18);
      animation:blink 1.8s ease-in-out infinite;
    }
    @keyframes fabric-breathe{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-3px)}
    }
    @keyframes blink{
      0%,100%{opacity:.25}
      50%{opacity:1}
    }
    .icon{
      width:18px;
      height:18px;
      display:inline-block;
      vertical-align:middle;
    }
    .icon svg{
      width:100%;
      height:100%;
      stroke:currentColor;
      fill:none;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .section-grid-note{
      color:var(--muted);
      font-size:.93rem;
      margin-top:8px;
    }
    @media (max-width: 1100px){
      .hero-grid,
      .promo-band,
      .faq-wrap,
      .cta-wrap{
        grid-template-columns:1fr;
      }
      .game-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
      }
      .use-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .stats-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .footer-grid{
        grid-template-columns:1fr 1fr;
      }
      .footer-grid > :first-child{
        grid-column:1 / -1;
      }
      .portrait-frame{
        min-height:560px;
      }
    }
    @media (max-width: 768px){
      .header-inner,
      .nav-row{
        align-items:flex-start;
      }
      .brand-name{
        max-width:100%;
      }
      .header-actions{
        margin-left:0;
      }
      .main-nav{
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
        flex-wrap:nowrap;
        scrollbar-width:thin;
      }
      .quick-pill{
        display:none;
      }
      .hero h1{
        max-width:100%;
      }
      .game-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .use-grid{
        grid-template-columns:1fr;
      }
      .field-grid{
        grid-template-columns:1fr;
      }
      .footer-grid{
        grid-template-columns:1fr;
      }
      .stats-grid{
        grid-template-columns:1fr 1fr;
      }
      .portrait-frame{
        min-height:500px;
      }
    }
    @media (max-width: 520px){
      .container{
        width:min(var(--container), calc(100% - 22px));
      }
      .site-header{
        position:sticky;
      }
      .header-inner{
        gap:12px;
      }
      .brand-sub{
        font-size:.82rem;
      }
      .auth-link{
        min-height:36px;
        padding:0 12px;
        font-size:.88rem;
      }
      .nav-link{
        min-height:36px;
        padding:0 12px;
        font-size:.88rem;
      }
      .limited-strip{
        border-radius:18px;
      }
      .hero-copy{
        padding-top:8px;
      }
      .hero h1{
        font-size:2rem;
      }
      .hero-lead{
        font-size:.98rem;
      }
      .stats-grid,
      .game-grid{
        grid-template-columns:1fr;
      }
      .section{
        padding:22px 0;
      }
      .portrait-frame{
        min-height:460px;
        border-radius:22px;
      }
      .video-cover{
        aspect-ratio:9 / 13;
      }
      .fab-support{
        left:12px;
        right:12px;
        max-width:none;
        width:calc(100% - 24px);
      }
    }
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,
      *::before,
      *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
      }
    }