/* roulang page: index */
:root{
      --bg:#120324;
      --bg-2:#1C0738;
      --panel:#241047;
      --panel-2:#30105d;
      --text:#ffffff;
      --muted:#d9b6ff;
      --soft:#f472b6;
      --cyan:#22d3ee;
      --pink:#ec4899;
      --yellow:#facc15;
      --green:#22c55e;
      --red:#fb7185;
      --border:rgba(244,114,182,.26);
      --border-cyan:rgba(34,211,238,.32);
      --shadow:0 24px 80px rgba(0,0,0,.42);
      --shadow-neon:0 0 26px rgba(236,72,153,.35),0 0 36px rgba(34,211,238,.18);
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:14px;
      --container:1180px;
      --nav-h:78px;
      --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Helvetica Neue", sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(236,72,153,.24), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(34,211,238,.20), transparent 34%),
        linear-gradient(180deg, var(--bg) 0%, #17042f 34%, #090116 100%);
      line-height:1.62;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:46px 46px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 82%);
    }
    a{color:inherit;text-decoration:none;transition:color .2s ease, opacity .2s ease, transform .2s ease}
    a:hover,a:focus{color:var(--cyan)}
    img{max-width:100%;display:block;height:auto}
    button,input,select,textarea{font-family:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid rgba(34,211,238,.72);outline-offset:3px;border-radius:12px}
    .container{width:min(var(--container), calc(100% - 32px));margin:0 auto}
    .section{padding:84px 0;position:relative}
    .section.tight{padding:56px 0}
    .section.alt{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .section-title{
      max-width:780px;
      margin-bottom:34px;
    }
    .section-title.center{text-align:center;margin-left:auto;margin-right:auto}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border:1px solid var(--border-cyan);
      border-radius:999px;
      color:#bff6ff;
      background:rgba(34,211,238,.08);
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
      box-shadow:0 0 18px rgba(34,211,238,.12);
      margin-bottom:14px;
    }
    h1,h2,h3,h4,p{margin-top:0}
    h1{
      font-size:clamp(2.15rem, 5.4vw, 5.35rem);
      line-height:1.02;
      letter-spacing:-.055em;
      font-weight:950;
      margin-bottom:24px;
      text-wrap:balance;
    }
    h2{
      font-size:clamp(1.82rem, 3.1vw, 3.05rem);
      line-height:1.08;
      letter-spacing:-.035em;
      font-weight:920;
      margin-bottom:16px;
    }
    h3{
      font-size:clamp(1.08rem, 1.55vw, 1.45rem);
      line-height:1.25;
      font-weight:850;
      margin-bottom:10px;
    }
    p{color:var(--muted);font-size:1.02rem}
    .lead{font-size:clamp(1.04rem, 1.45vw, 1.25rem);color:#f4dbff;max-width:880px}
    .gradient-text{
      background:linear-gradient(90deg,#fff 0%, #f472b6 38%, #22d3ee 72%, #facc15 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:46px;
      padding:13px 20px;
      border-radius:999px;
      font-weight:850;
      font-size:.96rem;
      border:1px solid transparent;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(1px) scale(.98)}
    .btn-primary{
      color:#16051f;
      background:linear-gradient(135deg, var(--pink), var(--yellow));
      box-shadow:0 0 22px rgba(236,72,153,.42),0 8px 22px rgba(250,204,21,.18);
    }
    .btn-primary:hover{color:#16051f;box-shadow:0 0 35px rgba(236,72,153,.55),0 12px 28px rgba(250,204,21,.25)}
    .btn-secondary{
      color:#fff;
      border-color:rgba(34,211,238,.45);
      background:rgba(34,211,238,.08);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .btn-secondary:hover{background:rgba(34,211,238,.16);color:#fff}
    .btn-text{
      color:#fdf2ff;
      border:1px solid rgba(244,114,182,.38);
      background:rgba(255,255,255,.03);
    }
    .btn-text:hover{color:#fff;border-color:rgba(34,211,238,.6)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.8rem;
      font-weight:850;
      color:#fff;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
    }
    .badge.hot{background:rgba(236,72,153,.16);border-color:rgba(236,72,153,.42);color:#ffd8ef}
    .badge.safe{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.38);color:#c9f7ff}
    .badge.gold{background:rgba(250,204,21,.12);border-color:rgba(250,204,21,.42);color:#fff0a8}
    .site-header{
      position:fixed;
      top:0;left:0;right:0;
      z-index:1000;
      height:var(--nav-h);
      background:rgba(18,3,36,.78);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(244,114,182,.18);
      box-shadow:0 14px 50px rgba(0,0,0,.24);
    }
    .nav-wrap{
      height:var(--nav-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      font-weight:950;
      letter-spacing:-.03em;
      color:#fff;
    }
    .brand-mark{
      width:42px;height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(236,72,153,.95), rgba(34,211,238,.95));
      box-shadow:var(--shadow-neon);
      flex:0 0 auto;
    }
    .brand-text{
      max-width:350px;
      line-height:1.05;
      font-size:.98rem;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:4px;
      flex:1;
      justify-content:center;
      min-width:0;
    }
    .desktop-nav a{
      padding:10px 12px;
      border-radius:999px;
      color:#ead5ff;
      font-weight:780;
      font-size:.91rem;
      white-space:nowrap;
    }
    .desktop-nav a:hover,.desktop-nav a.active{
      color:#fff;
      background:rgba(255,255,255,.08);
      box-shadow:inset 0 0 0 1px rgba(244,114,182,.14);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
    }
    .nav-actions .btn{min-height:40px;padding:10px 15px;font-size:.88rem}
    .menu-toggle{
      display:none;
      width:42px;height:42px;
      border-radius:14px;
      color:#fff;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
    }
    .mobile-panel{
      display:none;
      position:absolute;
      left:16px;right:16px;top:calc(var(--nav-h) + 10px);
      padding:14px;
      border-radius:20px;
      background:rgba(28,7,56,.96);
      border:1px solid rgba(244,114,182,.22);
      box-shadow:var(--shadow);
    }
    .mobile-panel.open{display:block}
    .mobile-panel a{
      display:block;
      padding:12px 14px;
      border-radius:14px;
      color:#f7d7ff;
      font-weight:800;
    }
    .mobile-panel a.active,.mobile-panel a:hover{background:rgba(34,211,238,.11);color:#fff}
    main{padding-top:var(--nav-h)}
    .hero{
      min-height:720px;
      display:flex;
      align-items:stretch;
      background:
        linear-gradient(90deg, rgba(18,3,36,.96) 0%, rgba(18,3,36,.76) 46%, rgba(18,3,36,.54) 100%),
        url('/assets/images/fea226859f75d826.jpg') center/cover no-repeat;
      position:relative;
      overflow:hidden;
      border-bottom:1px solid rgba(244,114,182,.18);
    }
    .hero:after{
      content:"";
      position:absolute;
      inset:auto -15% -38% -15%;
      height:56%;
      background:radial-gradient(ellipse at center, rgba(236,72,153,.25), transparent 64%);
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      z-index:2;
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
      padding:86px 0 76px;
      display:grid;
      grid-template-columns:minmax(0,1.22fr) minmax(320px,.78fr);
      gap:34px;
      align-items:end;
    }
    .hero-copy{
      max-width:920px;
      padding:28px 0;
    }
    .hero-copy .lead{margin-bottom:28px}
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:12px;
      margin:28px 0 26px;
    }
    .countdown-strip{
      max-width:860px;
      border:1px solid rgba(244,114,182,.34);
      border-radius:22px;
      background:linear-gradient(135deg, rgba(236,72,153,.17), rgba(34,211,238,.09));
      box-shadow:var(--shadow-neon);
      overflow:hidden;
    }
    .countdown-top{
      display:flex;
      justify-content:space-between;
      gap:12px;
      padding:14px 18px;
      border-bottom:1px solid rgba(255,255,255,.08);
      color:#fff;
      font-weight:850;
    }
    .countdown-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:0;
    }
    .timebox{
      padding:16px 14px;
      border-right:1px solid rgba(255,255,255,.08);
      text-align:left;
    }
    .timebox:last-child{border-right:0}
    .timebox strong{
      display:block;
      font-size:1.8rem;
      line-height:1;
      color:#fff;
      letter-spacing:-.04em;
    }
    .timebox span{font-size:.78rem;color:#f6c8ff;font-weight:800}
    .hero-panel{
      align-self:center;
      border:1px solid rgba(34,211,238,.28);
      border-radius:var(--radius-xl);
      background:linear-gradient(180deg, rgba(36,16,71,.78), rgba(18,3,36,.88));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .hero-panel-img{
      height:210px;
      background:url('/assets/images/fa127146eec79ff2.png') center/cover no-repeat;
      position:relative;
    }
    .hero-panel-img:after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(180deg, transparent, rgba(18,3,36,.75));
    }
    .jackpot-live{
      padding:22px;
    }
    .jackpot-live .amount{
      font-size:2.35rem;
      line-height:1;
      font-weight:950;
      letter-spacing:-.05em;
      color:#facc15;
      text-shadow:0 0 20px rgba(250,204,21,.28);
      margin:4px 0 12px;
    }
    .live-row{
      display:flex;
      justify-content:space-between;
      gap:10px;
      padding:12px 0;
      border-top:1px solid rgba(255,255,255,.08);
      color:#e9c8ff;
      font-size:.94rem;
    }
    .pulse-dot{
      width:10px;height:10px;border-radius:50%;
      background:var(--green);
      box-shadow:0 0 12px rgba(34,197,94,.9);
      display:inline-block;
      margin-right:8px;
      animation:pulse 1.5s infinite;
    }
    @keyframes pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
    .metrics-grid{
      display:grid;
      grid-template-columns:1.1fr repeat(3,.8fr);
      gap:16px;
    }
    .metric-card,.glass-card,.game-card,.case-card,.article-card,.faq-item,.form-panel{
      border:1px solid var(--border);
      background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
      border-radius:var(--radius-lg);
      box-shadow:0 18px 48px rgba(0,0,0,.24);
    }
    .metric-card{
      padding:24px;
      min-height:154px;
      position:relative;
      overflow:hidden;
    }
    .metric-card.featured{
      background:
        linear-gradient(135deg, rgba(236,72,153,.26), rgba(34,211,238,.10)),
        url('/assets/images/d37d682e068bc58c.jpg') center/cover no-repeat;
    }
    .metric-card.featured:before{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(18,3,36,.62);
    }
    .metric-card>*{position:relative}
    .metric-value{
      font-size:clamp(2rem,3.2vw,3.3rem);
      line-height:1;
      font-weight:950;
      letter-spacing:-.055em;
      margin-bottom:10px;
      color:#fff;
    }
    .metric-label{color:#ffd6f0;font-weight:820}
    .metric-card p{font-size:.96rem;margin-bottom:0}
    .matrix{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .glass-card{
      padding:24px;
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .glass-card:hover{
      transform:translateY(-5px);
      border-color:rgba(34,211,238,.42);
      box-shadow:0 0 24px rgba(34,211,238,.18),0 18px 50px rgba(0,0,0,.28);
    }
    .icon-bubble{
      width:46px;height:46px;
      border-radius:16px;
      display:grid;
      place-items:center;
      margin-bottom:18px;
      background:linear-gradient(135deg, rgba(236,72,153,.22), rgba(34,211,238,.18));
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
    }
    .provider-tabs{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:22px 0 24px;
    }
    .provider-tabs span{
      padding:9px 13px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      color:#f7d4ff;
      background:rgba(255,255,255,.055);
      font-weight:800;
      font-size:.9rem;
    }
    .game-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .game-card{
      overflow:hidden;
      position:relative;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .game-card:hover{
      transform:scale(1.035) translateY(-5px);
      border-color:rgba(236,72,153,.52);
      box-shadow:var(--shadow-neon);
    }
    .game-card img{
      width:100%;
      aspect-ratio:1.22/1;
      object-fit:cover;
    }
    .game-body{padding:16px}
    .corner-tag{
      position:absolute;
      top:12px;right:12px;
      padding:5px 9px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--pink), #be123c);
      color:white;
      font-size:.72rem;
      font-weight:950;
      box-shadow:0 0 16px rgba(236,72,153,.5);
    }
    .split{
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:36px;
      align-items:center;
    }
    .media-frame{
      border-radius:var(--radius-xl);
      overflow:hidden;
      border:1px solid rgba(34,211,238,.25);
      box-shadow:var(--shadow);
      position:relative;
    }
    .media-frame img{width:100%;aspect-ratio:1.35/1;object-fit:cover}
    .media-frame:after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(135deg, rgba(236,72,153,.18), transparent 48%, rgba(34,211,238,.15));
      pointer-events:none;
    }
    .check-list{
      list-style:none;
      padding:0;
      margin:22px 0 0;
      display:grid;
      gap:13px;
    }
    .check-list li{
      display:flex;
      gap:12px;
      color:#eed7ff;
      padding-bottom:13px;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .check-list i{color:var(--cyan);margin-top:4px}
    .settlement-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
      align-items:stretch;
    }
    .payment-rail{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .payment-rail span{
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(250,204,21,.22);
      color:#fff0b5;
      background:rgba(250,204,21,.08);
      font-weight:850;
    }
    .comparison{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .compare-box{
      padding:26px;
      border-radius:var(--radius-xl);
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.045);
    }
    .compare-box.highlight{
      border-color:rgba(34,211,238,.35);
      background:linear-gradient(135deg, rgba(34,211,238,.13), rgba(236,72,153,.10));
      box-shadow:0 0 26px rgba(34,211,238,.12);
    }
    .compare-box ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px}
    .compare-box li{display:flex;gap:10px;color:#ead1ff}
    .compare-box i{margin-top:4px}
    .cases{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:18px;
    }
    .case-card{padding:26px}
    .case-card.large{
      min-height:310px;
      background:
        linear-gradient(135deg, rgba(18,3,36,.90), rgba(18,3,36,.62)),
        url('/assets/images/e5ec8aa00f128553.jpg') center/cover no-repeat;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
    }
    .quote{
      font-size:1.25rem;
      color:#fff;
      font-weight:800;
      line-height:1.45;
      margin-bottom:16px;
    }
    .category-wall{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .category-wall a{
      display:flex;
      min-height:170px;
      flex-direction:column;
      justify-content:space-between;
      padding:22px;
      border-radius:var(--radius-lg);
      border:1px solid rgba(244,114,182,.24);
      background:linear-gradient(135deg, rgba(236,72,153,.14), rgba(34,211,238,.07));
      box-shadow:0 14px 38px rgba(0,0,0,.18);
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .category-wall a:hover{
      color:#fff;
      transform:translateY(-4px);
      border-color:rgba(34,211,238,.5);
      box-shadow:var(--shadow-neon);
    }
    .category-wall small{color:#f2caff;font-weight:820}
    .category-wall strong{font-size:1.2rem;line-height:1.18}
    .timeline{
      position:relative;
      display:grid;
      gap:14px;
      padding-left:20px;
      border-left:1px solid rgba(244,114,182,.25);
    }
    .timeline-item{
      padding:18px 20px;
      border-radius:18px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.10);
      position:relative;
    }
    .timeline-item:before{
      content:"";
      position:absolute;
      left:-27px;top:24px;
      width:12px;height:12px;border-radius:50%;
      background:var(--pink);
      box-shadow:0 0 14px rgba(236,72,153,.75);
    }
    .content-layout{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:22px;
      align-items:start;
    }
    .article-list{
      display:grid;
      gap:14px;
    }
    .article-card{
      display:grid;
      grid-template-columns:156px 1fr;
      gap:16px;
      overflow:hidden;
      transition:transform .2s ease, border-color .2s ease;
    }
    .article-card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.42);color:#fff}
    .article-card img{width:100%;height:100%;min-height:132px;object-fit:cover}
    .article-text{padding:16px 16px 16px 0}
    .article-text h3{font-size:1.08rem}
    .article-text p{font-size:.94rem;margin-bottom:9px}
    .meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      color:#ffd1ef;
      font-size:.82rem;
      font-weight:800;
    }
    .side-feature{
      position:sticky;
      top:calc(var(--nav-h) + 22px);
      border-radius:var(--radius-xl);
      padding:26px;
      background:
        linear-gradient(180deg, rgba(236,72,153,.17), rgba(34,211,238,.08)),
        url('/assets/images/dc08346dece2043e.jpg') center/cover no-repeat;
      overflow:hidden;
      border:1px solid rgba(34,211,238,.25);
      box-shadow:var(--shadow);
    }
    .side-feature:before{
      content:"";
      position:absolute;inset:0;
      background:rgba(18,3,36,.72);
    }
    .side-feature>*{position:relative}
    .security-strip{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:12px;
      margin-top:24px;
    }
    .security-item{
      padding:16px 14px;
      border-radius:18px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.11);
      color:#f7dcff;
      font-weight:820;
    }
    .security-item i{color:var(--cyan);margin-right:8px}
    .quick-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .accordion.neon-accordion{
      background:transparent;
      border:0;
    }
    .accordion.neon-accordion .accordion-item{
      margin-bottom:12px;
      border-radius:18px;
      overflow:hidden;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.11);
    }
    .accordion.neon-accordion .accordion-title{
      border:0;
      color:#fff;
      font-weight:850;
      font-size:1rem;
      background:transparent;
      padding:18px 52px 18px 18px;
    }
    .accordion.neon-accordion .accordion-title:before{color:var(--cyan);font-size:1.2rem}
    .accordion.neon-accordion .accordion-title:hover,.accordion.neon-accordion .accordion-title:focus{
      background:rgba(34,211,238,.09);
      color:#fff;
    }
    .accordion.neon-accordion .accordion-content{
      border:0;
      background:rgba(18,3,36,.36);
      color:#e8cdfc;
      padding:0 18px 18px;
    }
    .criteria-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .criteria-card{
      padding:24px;
      border-radius:var(--radius-lg);
      border:1px solid rgba(34,211,238,.24);
      background:linear-gradient(180deg, rgba(34,211,238,.075), rgba(236,72,153,.055));
    }
    .join-wrap{
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:28px;
      align-items:center;
      border-radius:36px;
      border:1px solid rgba(244,114,182,.28);
      background:
        radial-gradient(circle at 88% 0%, rgba(34,211,238,.22), transparent 36%),
        linear-gradient(135deg, rgba(236,72,153,.18), rgba(255,255,255,.045));
      padding:34px;
      box-shadow:var(--shadow);
    }
    .form-panel{padding:26px;background:rgba(18,3,36,.56)}
    .lead-form{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .lead-form label{
      display:grid;
      gap:7px;
      color:#f6ceff;
      font-size:.88rem;
      font-weight:850;
    }
    .lead-form input,.lead-form select{
      height:48px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.07);
      color:#fff;
      padding:0 14px;
      box-shadow:none;
      margin:0;
    }
    .lead-form input::placeholder{color:#b99ed1}
    .lead-form input:focus,.lead-form select:focus{
      border-color:rgba(34,211,238,.58);
      background:rgba(255,255,255,.10);
      box-shadow:0 0 0 4px rgba(34,211,238,.12);
    }
    .lead-form .full{grid-column:1/-1}
    .privacy{font-size:.84rem;color:#cdaee7;margin:12px 0 0}
    .risk-note{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:16px 18px;
      border-radius:18px;
      border:1px solid rgba(250,204,21,.26);
      background:rgba(250,204,21,.08);
      color:#fff2b5;
      margin-top:18px;
    }
    .site-footer{
      border-top:1px solid rgba(244,114,182,.18);
      background:linear-gradient(180deg, rgba(18,3,36,.8), rgba(9,1,22,.98));
      padding:54px 0 28px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.25fr .75fr .75fr;
      gap:28px;
      align-items:start;
    }
    .footer-brand{
      font-size:1.1rem;
      font-weight:950;
      letter-spacing:-.03em;
      margin-bottom:12px;
    }
    .footer-links{
      display:grid;
      gap:9px;
    }
    .footer-links a{color:#dcbaf7;font-weight:760}
    .footer-links a:hover{color:#22d3ee}
    .license-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .license-row span{
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.055);
      color:#f1d4ff;
      font-size:.82rem;
      font-weight:850;
    }
    .copyright{
      margin-top:34px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.08);
      display:flex;
      justify-content:space-between;
      gap:16px;
      color:#b99ed1;
      font-size:.9rem;
    }
    .fab{
      position:fixed;
      left:16px;
      bottom:96px;
      z-index:50;
      width:58px;
      height:58px;
      border-radius:20px;
      display:grid;
      place-items:center;
      color:#fff;
      background:rgba(7,7,13,.82);
      backdrop-filter:blur(14px);
      border:1px solid rgba(34,211,238,.55);
      box-shadow:0 0 20px rgba(6,182,212,.45), inset 0 0 0 1px rgba(236,72,153,.2);
      opacity:.78;
      transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease;
      animation:neonPulse 2.4s infinite;
    }
    .fab:hover{
      opacity:1;
      color:#fff;
      transform:scale(1.1);
      box-shadow:0 0 32px rgba(236,72,153,.52),0 0 22px rgba(34,211,238,.46);
    }
    .fab:active{transform:scale(.94)}
    .fab i{font-size:1.25rem;text-shadow:0 0 12px rgba(34,211,238,.9)}
    .fab .notify{
      position:absolute;
      top:-4px;right:-4px;
      width:18px;height:18px;
      border-radius:50%;
      background:var(--pink);
      border:2px solid #fff;
      box-shadow:0 0 12px rgba(236,72,153,.9);
    }
    @keyframes neonPulse{
      0%,100%{border-color:rgba(34,211,238,.45)}
      50%{border-color:rgba(236,72,153,.72)}
    }
    .empty-state{
      padding:24px;
      border-radius:18px;
      border:1px dashed rgba(255,255,255,.22);
      color:#f2d7ff;
      background:rgba(255,255,255,.045);
    }
    @media (max-width:1100px){
      .brand-text{max-width:260px}
      .desktop-nav a{padding:9px 9px;font-size:.86rem}
      .metrics-grid{grid-template-columns:repeat(2,1fr)}
      .matrix,.game-grid,.category-wall{grid-template-columns:repeat(2,1fr)}
      .security-strip{grid-template-columns:repeat(3,1fr)}
    }
    @media (max-width:900px){
      :root{--nav-h:72px}
      .desktop-nav{display:none}
      .menu-toggle{display:grid;place-items:center}
      .brand-text{max-width:235px}
      .nav-actions{gap:7px}
      .nav-actions .btn{padding:9px 11px;font-size:.8rem}
      .hero{min-height:auto}
      .hero-inner{grid-template-columns:1fr;padding:54px 0 58px;align-items:start}
      .hero-panel{max-width:560px}
      .split,.settlement-grid,.comparison,.cases,.content-layout,.quick-grid,.join-wrap,.footer-grid{
        grid-template-columns:1fr;
      }
      .side-feature{position:relative;top:auto}
      .article-card{grid-template-columns:130px 1fr}
    }
    @media (max-width:640px){
      .container{width:min(100% - 24px, var(--container))}
      .section{padding:62px 0}
      .brand-mark{width:38px;height:38px;border-radius:13px}
      .brand-text{
        max-width:132px;
        font-size:.82rem;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
      }
      .nav-actions .btn-text{display:none}
      .nav-actions .btn-primary{padding:9px 10px}
      .hero-copy{padding:8px 0}
      .hero-actions{align-items:stretch}
      .hero-actions .btn{width:100%}
      .countdown-top{display:block}
      .countdown-grid{grid-template-columns:repeat(2,1fr)}
      .timebox:nth-child(2){border-right:0}
      .timebox:nth-child(1),.timebox:nth-child(2){border-bottom:1px solid rgba(255,255,255,.08)}
      .metrics-grid,.matrix,.game-grid,.category-wall,.criteria-grid,.security-strip{grid-template-columns:1fr}
      .article-card{grid-template-columns:1fr}
      .article-text{padding:16px}
      .article-card img{height:180px}
      .lead-form{grid-template-columns:1fr}
      .join-wrap{padding:22px;border-radius:24px}
      .copyright{flex-direction:column}
      .fab{left:12px;bottom:86px;width:54px;height:54px}
    }

/* roulang page: category1 */
:root{
      --bg:#120324;
      --bg-2:#1C0738;
      --panel:#241047;
      --panel-2:#30105d;
      --text:#ffffff;
      --muted:#d9b6ff;
      --soft:#f472b6;
      --cyan:#22d3ee;
      --pink:#ec4899;
      --yellow:#facc15;
      --green:#22c55e;
      --red:#fb7185;
      --border:rgba(244,114,182,.26);
      --border-cyan:rgba(34,211,238,.32);
      --shadow:0 24px 80px rgba(0,0,0,.42);
      --shadow-neon:0 0 26px rgba(236,72,153,.35),0 0 36px rgba(34,211,238,.18);
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:14px;
      --container:1180px;
      --nav-h:78px;
      --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Helvetica Neue", sans-serif;
    }
    :root{--nav-h:72px}
    html{scroll-behavior:smooth}
    *,*:before,*:after{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(236,72,153,.24), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(34,211,238,.20), transparent 34%),
        linear-gradient(180deg, var(--bg) 0%, #17042f 34%, #090116 100%);
      line-height:1.62;
      overflow-x:hidden;
      min-height:100vh;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:46px 46px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 82%);
    }
    a{color:inherit;text-decoration:none;transition:color .2s ease, opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease}
    a:hover,a:focus{color:var(--cyan)}
    img{max-width:100%;display:block;height:auto}
    button,input,select,textarea{font-family:inherit}
    button{cursor:pointer}
    input,select,textarea{
      width:100%;
      border:1px solid rgba(244,114,182,.28);
      border-radius:16px;
      background:rgba(255,255,255,.07);
      color:#fff;
      padding:14px 16px;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    input::placeholder,textarea::placeholder{color:rgba(217,182,255,.68)}
    input:focus,select:focus,textarea:focus{
      border-color:rgba(34,211,238,.76);
      box-shadow:0 0 0 4px rgba(34,211,238,.12);
      background:rgba(255,255,255,.1);
    }
    label{display:block;color:#f4dbff;font-weight:800;font-size:.9rem;margin-bottom:8px}
    .container{width:min(var(--container), calc(100% - 32px));margin:0 auto}
    .section{padding:84px 0;position:relative}
    .section.tight{padding:56px 0}
    .section.alt{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .section-title{max-width:780px;margin-bottom:34px}
    .section-title.center{text-align:center;margin-left:auto;margin-right:auto}
    .section-title h2,.section-title h3{margin:0;color:#fff;letter-spacing:-.045em;line-height:1.08}
    .section-title h2{font-size:clamp(2rem,4vw,3.4rem)}
    .section-title h3{font-size:clamp(1.7rem,3vw,2.5rem)}
    .section-title p{margin:14px 0 0;color:#f4dbff}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border:1px solid var(--border-cyan);
      border-radius:999px;
      color:#bff6ff;
      background:rgba(34,211,238,.08);
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
      box-shadow:0 0 18px rgba(34,211,238,.12);
      margin-bottom:14px;
    }
    .lead{font-size:clamp(1.04rem, 1.45vw, 1.25rem);color:#f4dbff;max-width:880px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:46px;
      padding:13px 20px;
      border-radius:999px;
      font-weight:850;
      font-size:.96rem;
      border:1px solid transparent;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(1px) scale(.98)}
    .btn-primary{
      color:#16051f;
      background:linear-gradient(135deg, var(--pink), var(--yellow));
      box-shadow:0 0 22px rgba(236,72,153,.42),0 8px 22px rgba(250,204,21,.18);
    }
    .btn-primary:hover{color:#16051f;box-shadow:0 0 35px rgba(236,72,153,.55),0 12px 28px rgba(250,204,21,.25)}
    .btn-secondary{
      color:#fff;
      border-color:rgba(34,211,238,.45);
      background:rgba(34,211,238,.08);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .btn-secondary:hover{background:rgba(34,211,238,.16);color:#fff}
    .btn-text{
      color:#fdf2ff;
      border:1px solid rgba(244,114,182,.38);
      background:rgba(255,255,255,.03);
    }
    .btn-text:hover{color:#fff;border-color:rgba(34,211,238,.6)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.8rem;
      font-weight:850;
      color:#fff;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
    }
    .badge.hot{background:rgba(236,72,153,.16);border-color:rgba(236,72,153,.42);color:#ffd8ef}
    .badge.safe{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.38);color:#c9f7ff}
    .badge.gold{background:rgba(250,204,21,.12);border-color:rgba(250,204,21,.42);color:#fff0a8}
    .site-header{
      position:fixed;
      top:0;left:0;right:0;
      z-index:1000;
      height:var(--nav-h);
      background:rgba(18,3,36,.78);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(244,114,182,.18);
      box-shadow:0 14px 50px rgba(0,0,0,.24);
    }
    .nav-wrap{
      height:var(--nav-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      position:relative;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      font-weight:950;
      letter-spacing:-.03em;
      color:#fff;
    }
    .brand-mark{
      width:42px;height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(236,72,153,.95), rgba(34,211,238,.95));
      box-shadow:var(--shadow-neon);
      flex:0 0 auto;
    }
    .brand-text{max-width:350px;line-height:1.05;font-size:.98rem}
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:4px;
      flex:1;
      justify-content:center;
      min-width:0;
    }
    .desktop-nav a{
      padding:10px 12px;
      border-radius:999px;
      color:#ead5ff;
      font-weight:780;
      font-size:.91rem;
      white-space:nowrap;
    }
    .desktop-nav a:hover,.desktop-nav a.active{
      color:#fff;
      background:rgba(255,255,255,.08);
      box-shadow:inset 0 0 0 1px rgba(244,114,182,.14);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
    }
    .nav-actions .btn{min-height:40px;padding:10px 15px;font-size:.88rem}
    .menu-toggle{
      display:none;
      width:42px;
      height:42px;
      border-radius:14px;
      border:1px solid rgba(34,211,238,.36);
      color:#fff;
      background:rgba(255,255,255,.06);
      align-items:center;
      justify-content:center;
    }
    .mobile-panel{
      display:none;
      position:absolute;
      right:0;
      top:calc(var(--nav-h) - 4px);
      width:min(320px, calc(100vw - 32px));
      padding:12px;
      border-radius:20px;
      border:1px solid rgba(244,114,182,.24);
      background:rgba(24,6,47,.96);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
    }
    .mobile-panel.open{display:grid;gap:7px}
    .mobile-panel a{
      padding:12px 14px;
      border-radius:14px;
      color:#ead5ff;
      font-weight:800;
    }
    .mobile-panel a.active,.mobile-panel a:hover{background:rgba(255,255,255,.08);color:#fff}
    .category-hero{
      min-height:680px;
      padding:calc(var(--nav-h) + 72px) 0 76px;
      display:flex;
      align-items:center;
      background:
        linear-gradient(90deg, rgba(18,3,36,.94) 0%, rgba(18,3,36,.72) 44%, rgba(18,3,36,.34) 100%),
        url('/assets/images/fea226859f75d826.jpg') center/cover no-repeat;
      border-bottom:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      position:relative;
    }
    .category-hero:after{
      content:"";
      position:absolute;
      inset:auto -8% -22% -8%;
      height:230px;
      background:radial-gradient(circle, rgba(236,72,153,.28), transparent 68%);
      filter:blur(12px);
      pointer-events:none;
    }
    .hero-panel{
      max-width:720px;
      position:relative;
      z-index:1;
    }
    .hero-panel h1{
      margin:0 0 18px;
      font-size:clamp(2.55rem,6vw,5.45rem);
      line-height:.98;
      letter-spacing:-.075em;
      color:#fff;
      text-shadow:0 0 34px rgba(236,72,153,.34);
    }
    .hero-panel .lead{margin-bottom:26px;color:#ffe9ff}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
    .hero-strip{
      margin-top:32px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .glass-card{
      border:1px solid rgba(244,114,182,.24);
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
      backdrop-filter:blur(16px);
    }
    .dashboard{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:26px;
      align-items:stretch;
    }
    .metric-board{
      padding:28px;
      position:relative;
      overflow:hidden;
    }
    .metric-board:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 80% 10%, rgba(34,211,238,.18), transparent 34%),
        radial-gradient(circle at 10% 90%, rgba(236,72,153,.18), transparent 38%);
      pointer-events:none;
    }
    .metric-board > *{position:relative}
    .metric-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
      margin-top:22px;
    }
    .metric-item{
      padding:20px;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.055);
    }
    .metric-number{
      display:block;
      font-size:clamp(1.85rem,4vw,3rem);
      font-weight:950;
      line-height:1;
      letter-spacing:-.055em;
      color:#fff;
    }
    .metric-label{margin-top:8px;color:#d9b6ff;font-weight:750}
    .security-visual{
      min-height:100%;
      overflow:hidden;
      position:relative;
    }
    .security-visual img{
      width:100%;
      height:100%;
      object-fit:cover;
      min-height:420px;
      opacity:.9;
      filter:saturate(1.05) contrast(1.05);
    }
    .visual-caption{
      position:absolute;
      left:22px;
      right:22px;
      bottom:22px;
      padding:18px;
      border-radius:20px;
      background:rgba(18,3,36,.74);
      border:1px solid rgba(34,211,238,.28);
      backdrop-filter:blur(14px);
    }
    .visual-caption strong{display:block;font-size:1.12rem;margin-bottom:4px}
    .visual-caption span{color:#f4dbff}
    .channel-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .channel-card{
      padding:22px;
      min-height:178px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.1);
      background:linear-gradient(180deg, rgba(48,16,93,.72), rgba(36,16,71,.54));
      box-shadow:0 12px 38px rgba(0,0,0,.22);
      position:relative;
      overflow:hidden;
    }
    .channel-card:after{
      content:"";
      position:absolute;
      width:130px;height:130px;
      right:-54px;top:-52px;
      border-radius:50%;
      background:rgba(34,211,238,.1);
      transition:transform .25s ease, background .25s ease;
    }
    .channel-card:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.4);color:#fff}
    .channel-card:hover:after{transform:scale(1.22);background:rgba(236,72,153,.15)}
    .channel-card.active{
      border-color:rgba(250,204,21,.56);
      box-shadow:0 0 24px rgba(250,204,21,.12), 0 14px 46px rgba(0,0,0,.28);
    }
    .channel-card i{font-size:1.55rem;color:var(--cyan);margin-bottom:18px}
    .channel-card h3{font-size:1.1rem;margin:0 0 8px;color:#fff}
    .channel-card p{margin:0;color:#d9b6ff;font-size:.95rem}
    .service-layout{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:34px;
      align-items:start;
    }
    .service-list{display:grid;gap:14px}
    .service-row{
      display:grid;
      grid-template-columns:54px 1fr;
      gap:16px;
      padding:20px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.055);
      transition:transform .22s ease, border-color .22s ease, background .22s ease;
    }
    .service-row:hover{
      transform:translateX(4px);
      border-color:rgba(34,211,238,.42);
      background:rgba(255,255,255,.078);
    }
    .icon-box{
      width:54px;height:54px;
      border-radius:18px;
      display:grid;
      place-items:center;
      color:#16051f;
      background:linear-gradient(135deg,var(--cyan),var(--pink));
      box-shadow:0 0 22px rgba(34,211,238,.22);
      font-size:1.15rem;
    }
    .service-row h3{font-size:1.08rem;margin:0 0 6px;color:#fff}
    .service-row p{margin:0;color:#d9b6ff}
    .compare-table{
      overflow:hidden;
      border-radius:var(--radius-xl);
      border:1px solid rgba(244,114,182,.24);
      background:rgba(255,255,255,.045);
      box-shadow:var(--shadow);
    }
    .compare-row{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .compare-row:last-child{border-bottom:0}
    .compare-row > div{padding:20px;border-right:1px solid rgba(255,255,255,.08)}
    .compare-row > div:last-child{border-right:0}
    .compare-head{
      color:#fff;
      font-weight:950;
      background:linear-gradient(90deg, rgba(236,72,153,.18), rgba(34,211,238,.12));
    }
    .compare-cell p{margin:0;color:#d9b6ff}
    .compare-cell strong{display:block;color:#fff;margin-bottom:5px}
    .timeline{
      position:relative;
      display:grid;
      gap:16px;
      max-width:980px;
    }
    .timeline-item{
      display:grid;
      grid-template-columns:120px 1fr;
      gap:22px;
      align-items:start;
    }
    .timeline-step{
      display:flex;
      align-items:center;
      gap:10px;
      color:#fff;
      font-weight:950;
    }
    .timeline-dot{
      width:14px;height:14px;
      border-radius:50%;
      background:var(--pink);
      box-shadow:0 0 18px rgba(236,72,153,.62);
      flex:0 0 auto;
    }
    .timeline-box{
      padding:22px;
      border-radius:24px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.1);
    }
    .timeline-box h3{margin:0 0 7px;font-size:1.12rem;color:#fff}
    .timeline-box p{margin:0;color:#d9b6ff}
    .post-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .post-card{
      border-radius:24px;
      overflow:hidden;
      border:1px solid rgba(244,114,182,.22);
      background:rgba(255,255,255,.055);
      min-height:100%;
      display:flex;
      flex-direction:column;
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .post-card:hover{
      transform:translateY(-5px);
      border-color:rgba(34,211,238,.42);
      box-shadow:0 0 24px rgba(34,211,238,.12), 0 18px 50px rgba(0,0,0,.28);
      color:#fff;
    }
    .post-thumb{
      aspect-ratio:16/9;
      background:
        linear-gradient(135deg, rgba(236,72,153,.32), rgba(34,211,238,.16)),
        url('/assets/images/9a86941102f312f8.png') center/cover no-repeat;
    }
    .post-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
    .post-meta{display:flex;gap:8px;flex-wrap:wrap;color:#bff6ff;font-size:.82rem;font-weight:800}
    .post-body h3{font-size:1.08rem;line-height:1.3;margin:0;color:#fff}
    .post-body p{margin:0;color:#d9b6ff}
    .empty-note{
      padding:24px;
      border-radius:22px;
      border:1px dashed rgba(34,211,238,.4);
      color:#d9b6ff;
      background:rgba(34,211,238,.06);
    }
    .trust-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:22px;
      align-items:stretch;
    }
    .trust-panel{padding:28px}
    .trust-points{
      list-style:none;
      margin:22px 0 0;
      padding:0;
      display:grid;
      gap:12px;
    }
    .trust-points li{
      display:flex;
      gap:12px;
      color:#f4dbff;
      align-items:flex-start;
    }
    .trust-points i{color:var(--green);margin-top:4px}
    .payment-box{
      padding:28px;
      background:
        linear-gradient(180deg, rgba(236,72,153,.12), rgba(34,211,238,.08)),
        rgba(255,255,255,.045);
    }
    .payment-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
    .quick-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .quick-item{
      padding:22px;
      border-left:3px solid var(--pink);
      background:rgba(255,255,255,.05);
      border-radius:0 22px 22px 0;
    }
    .quick-item:nth-child(2){border-left-color:var(--cyan)}
    .quick-item:nth-child(3){border-left-color:var(--yellow)}
    .quick-item h3{margin:0 0 8px;color:#fff;font-size:1.08rem}
    .quick-item p{margin:0;color:#d9b6ff}
    .faq-wrap{display:grid;gap:12px;max-width:940px}
    .faq-item{
      border:1px solid rgba(244,114,182,.22);
      border-radius:22px;
      background:rgba(255,255,255,.055);
      overflow:hidden;
    }
    .faq-question{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      border:0;
      color:#fff;
      background:transparent;
      padding:20px 22px;
      font-weight:900;
      font-size:1rem;
      text-align:left;
    }
    .faq-question i{color:var(--cyan);transition:transform .2s ease}
    .faq-item.open .faq-question i{transform:rotate(45deg)}
    .faq-answer{
      display:none;
      padding:0 22px 20px;
      color:#d9b6ff;
    }
    .faq-item.open .faq-answer{display:block}
    .conversion{
      padding:34px;
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      gap:28px;
      align-items:center;
      background:
        linear-gradient(135deg, rgba(236,72,153,.18), rgba(34,211,238,.1)),
        rgba(255,255,255,.05);
    }
    .conversion h2{
      font-size:clamp(2rem,4vw,3.35rem);
      line-height:1.05;
      letter-spacing:-.055em;
      margin:0 0 14px;
      color:#fff;
    }
    .conversion p{color:#f4dbff;margin:0}
    .signup-form{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    .signup-form .full{grid-column:1 / -1}
    .form-note{font-size:.86rem;color:#d9b6ff;margin:6px 0 0}
    .fab-support{
      position:fixed;
      left:16px;
      bottom:96px;
      z-index:50;
      width:60px;
      height:60px;
      border-radius:22px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(#07070D,#07070D) padding-box,
                 linear-gradient(135deg, var(--pink), var(--cyan), var(--yellow)) border-box;
      border:2px solid transparent;
      box-shadow:0 0 20px rgba(6,182,212,.45), 0 10px 34px rgba(0,0,0,.38);
      opacity:.78;
      transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease;
      animation:neonPulse 2.4s ease-in-out infinite;
    }
    .fab-support:hover{opacity:1;transform:scale(1.08);color:#fff;box-shadow:0 0 34px rgba(236,72,153,.52),0 0 24px rgba(34,211,238,.44)}
    .fab-support:active{transform:scale(.94)}
    .fab-support i{font-size:1.35rem;text-shadow:0 0 14px rgba(34,211,238,.8)}
    .fab-support .dot{
      position:absolute;
      right:7px;
      top:7px;
      width:12px;
      height:12px;
      border-radius:50%;
      background:var(--pink);
      box-shadow:0 0 12px rgba(236,72,153,.95);
      animation:blink 1s infinite;
    }
    @keyframes neonPulse{
      0%,100%{filter:hue-rotate(0deg);box-shadow:0 0 18px rgba(34,211,238,.34),0 10px 34px rgba(0,0,0,.38)}
      50%{filter:hue-rotate(28deg);box-shadow:0 0 26px rgba(236,72,153,.44),0 10px 34px rgba(0,0,0,.38)}
    }
    @keyframes blink{0%,100%{opacity:1}50%{opacity:.38}}
    .site-footer{
      padding:64px 0 28px;
      background:
        radial-gradient(circle at 10% 0%, rgba(236,72,153,.16), transparent 34%),
        linear-gradient(180deg, rgba(9,1,22,.42), rgba(4,0,12,.94));
      border-top:1px solid rgba(244,114,182,.18);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.3fr .7fr .9fr;
      gap:34px;
      align-items:start;
    }
    .footer-brand{
      color:#fff;
      font-weight:950;
      font-size:1.1rem;
      line-height:1.25;
      margin-bottom:12px;
    }
    .site-footer p{color:#d9b6ff;margin:0}
    .site-footer h3{font-size:1rem;color:#fff;margin:0 0 14px}
    .footer-links{display:grid;gap:9px}
    .footer-links a{color:#d9b6ff;font-weight:750}
    .footer-links a:hover{color:var(--cyan)}
    .license-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
    .license-row span{
      padding:6px 10px;
      border-radius:999px;
      color:#fff;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      font-size:.82rem;
      font-weight:800;
    }
    .copyright{
      margin-top:40px;
      padding-top:20px;
      border-top:1px solid rgba(255,255,255,.1);
      display:flex;
      justify-content:space-between;
      gap:18px;
      color:#bda3df;
      font-size:.9rem;
    }
    @media (max-width:1120px){
      .brand-text{max-width:250px}
      .desktop-nav a{font-size:.85rem;padding:9px 9px}
      .nav-actions .btn-text{display:inline-flex}
      .channel-grid{grid-template-columns:repeat(2,1fr)}
      .post-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:920px){
      .desktop-nav{display:none}
      .menu-toggle{display:flex}
      .brand-text{max-width:320px}
      .dashboard,.service-layout,.trust-grid,.conversion{grid-template-columns:1fr}
      .quick-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      .copyright{flex-direction:column}
    }
    @media (max-width:768px){
      :root{--nav-h:70px}
      .container{width:min(100% - 24px, var(--container))}
      .section{padding:64px 0}
      .category-hero{min-height:auto;padding:calc(var(--nav-h) + 54px) 0 58px}
      .hero-actions{align-items:stretch}
      .hero-actions .btn{width:100%}
      .metric-grid{grid-template-columns:1fr}
      .compare-row{grid-template-columns:1fr}
      .compare-row > div{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
      .compare-row > div:last-child{border-bottom:0}
      .timeline-item{grid-template-columns:1fr;gap:10px}
      .post-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .signup-form{grid-template-columns:1fr}
      .nav-actions{gap:7px}
      .nav-actions .btn{padding:9px 11px;font-size:.82rem}
      .brand-mark{width:38px;height:38px;border-radius:13px}
    }
    @media (max-width:520px){
      .brand-text{max-width:142px;font-size:.76rem}
      .nav-actions .btn-text{padding:8px 10px}
      .nav-actions .btn-primary{padding:8px 10px}
      .nav-actions .btn-primary i{display:none}
      .channel-grid{grid-template-columns:1fr}
      .category-hero{text-align:left}
      .hero-panel h1{font-size:2.45rem}
      .metric-board,.trust-panel,.payment-box,.conversion{padding:22px}
      .fab-support{width:56px;height:56px;bottom:92px}
    }

/* roulang page: article */
:root{
      --bg:#120324;
      --bg-2:#1C0738;
      --panel:#241047;
      --panel-2:#30105d;
      --panel-3:#18072e;
      --text:#ffffff;
      --muted:#d9b6ff;
      --soft:#f472b6;
      --cyan:#22d3ee;
      --pink:#ec4899;
      --yellow:#facc15;
      --green:#22c55e;
      --red:#fb7185;
      --orange:#fb923c;
      --border:rgba(244,114,182,.26);
      --border-cyan:rgba(34,211,238,.32);
      --glass:rgba(255,255,255,.065);
      --shadow:0 24px 80px rgba(0,0,0,.42);
      --shadow-neon:0 0 26px rgba(236,72,153,.35),0 0 36px rgba(34,211,238,.18);
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:14px;
      --container:1180px;
      --nav-h:78px;
      --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Helvetica Neue", sans-serif;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(236,72,153,.24), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(34,211,238,.20), transparent 34%),
        linear-gradient(180deg, var(--bg) 0%, #17042f 34%, #090116 100%);
      line-height:1.62;
      overflow-x:hidden;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:46px 46px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 82%);
    }
    a{color:inherit;text-decoration:none;transition:color .2s ease, opacity .2s ease, transform .2s ease}
    a:hover,a:focus{color:var(--cyan)}
    img{max-width:100%;display:block;height:auto}
    button,input,select,textarea{font-family:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(236,72,153,.45);color:#fff}
    :focus-visible{outline:3px solid rgba(34,211,238,.75);outline-offset:3px;border-radius:10px}

    .container{width:min(var(--container), calc(100% - 32px));margin:0 auto}
    .section{padding:84px 0;position:relative}
    .section.tight{padding:56px 0}
    .section.alt{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .section-title{max-width:780px;margin-bottom:34px}
    .section-title.center{text-align:center;margin-left:auto;margin-right:auto}
    .section-title h2{
      margin:0 0 12px;
      color:#fff;
      font-size:clamp(1.85rem, 3vw, 3.05rem);
      line-height:1.08;
      font-weight:950;
      letter-spacing:-.045em;
    }
    .section-title p{margin:0;color:#efd6ff;font-size:1.06rem}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border:1px solid var(--border-cyan);
      border-radius:999px;
      color:#bff6ff;
      background:rgba(34,211,238,.08);
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
      box-shadow:0 0 18px rgba(34,211,238,.12);
      margin-bottom:14px;
    }
    .lead{font-size:clamp(1.04rem, 1.45vw, 1.25rem);color:#f4dbff;max-width:880px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:46px;
      padding:13px 20px;
      border-radius:999px;
      font-weight:850;
      font-size:.96rem;
      border:1px solid transparent;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      white-space:nowrap;
      text-decoration:none;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(1px) scale(.98)}
    .btn-primary{
      color:#16051f;
      background:linear-gradient(135deg, var(--pink), var(--yellow));
      box-shadow:0 0 22px rgba(236,72,153,.42),0 8px 22px rgba(250,204,21,.18);
    }
    .btn-primary:hover{color:#16051f;box-shadow:0 0 35px rgba(236,72,153,.55),0 12px 28px rgba(250,204,21,.25)}
    .btn-secondary{
      color:#fff;
      border-color:rgba(34,211,238,.45);
      background:rgba(34,211,238,.08);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .btn-secondary:hover{background:rgba(34,211,238,.16);color:#fff}
    .btn-text{
      color:#fdf2ff;
      border:1px solid rgba(244,114,182,.38);
      background:rgba(255,255,255,.03);
    }
    .btn-text:hover{color:#fff;border-color:rgba(34,211,238,.6)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.8rem;
      font-weight:850;
      color:#fff;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
    }
    .badge.hot{background:rgba(236,72,153,.16);border-color:rgba(236,72,153,.42);color:#ffd8ef}
    .badge.safe{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.38);color:#c9f7ff}
    .badge.gold{background:rgba(250,204,21,.12);border-color:rgba(250,204,21,.42);color:#fff0a8}

    .site-header{
      position:fixed;
      top:0;left:0;right:0;
      z-index:1000;
      height:var(--nav-h);
      background:rgba(18,3,36,.78);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(244,114,182,.18);
      box-shadow:0 14px 50px rgba(0,0,0,.24);
    }
    .nav-wrap{
      height:var(--nav-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      position:relative;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      font-weight:950;
      letter-spacing:-.03em;
      color:#fff;
      flex:0 1 auto;
    }
    .brand:hover{color:#fff}
    .brand-mark{
      width:42px;height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(236,72,153,.95), rgba(34,211,238,.95));
      box-shadow:var(--shadow-neon);
      flex:0 0 auto;
    }
    .brand-text{
      max-width:350px;
      line-height:1.05;
      font-size:.98rem;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:4px;
      flex:1;
      justify-content:center;
      min-width:0;
    }
    .desktop-nav a{
      padding:10px 12px;
      border-radius:999px;
      color:#ead5ff;
      font-weight:780;
      font-size:.91rem;
      white-space:nowrap;
    }
    .desktop-nav a:hover,.desktop-nav a.active{
      color:#fff;
      background:rgba(255,255,255,.08);
      box-shadow:inset 0 0 0 1px rgba(244,114,182,.14);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
    }
    .nav-actions .btn{min-height:40px;padding:10px 15px;font-size:.88rem}
    .menu-toggle{
      display:none;
      width:42px;
      height:42px;
      border:1px solid rgba(244,114,182,.3);
      color:#fff;
      border-radius:14px;
      background:rgba(255,255,255,.06);
      align-items:center;
      justify-content:center;
      transition:background .2s ease, border-color .2s ease, transform .2s ease;
    }
    .menu-toggle:hover{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.45)}
    .menu-toggle:active{transform:scale(.96)}
    .mobile-panel{
      display:none;
      position:absolute;
      top:calc(var(--nav-h) - 4px);
      left:16px;
      right:16px;
      padding:14px;
      border-radius:22px;
      background:rgba(24,7,46,.96);
      border:1px solid rgba(244,114,182,.22);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
    }
    .mobile-panel a{
      display:block;
      padding:12px 14px;
      border-radius:14px;
      color:#f5dcff;
      font-weight:800;
    }
    .mobile-panel a:hover,.mobile-panel a.active{background:rgba(255,255,255,.08);color:#fff}

    .article-hero{
      padding:calc(var(--nav-h) + 58px) 0 72px;
      min-height:560px;
      display:flex;
      align-items:center;
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(18,3,36,.32), rgba(18,3,36,.96)),
        linear-gradient(90deg, rgba(18,3,36,.82), rgba(28,7,56,.42)),
        url('/assets/images/d37d682e068bc58c.jpg') center/cover no-repeat;
    }
    .article-hero:after{
      content:"";
      position:absolute;
      inset:auto -10% -28% -10%;
      height:220px;
      background:radial-gradient(circle, rgba(236,72,153,.28), transparent 64%);
      filter:blur(20px);
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      z-index:1;
      text-align:center;
      max-width:980px;
      margin:0 auto;
    }
    .hero-kicker{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
      margin-bottom:18px;
    }
    .article-hero h1{
      margin:0 auto 18px;
      color:#fff;
      font-size:clamp(2.15rem, 5vw, 5rem);
      line-height:.98;
      letter-spacing:-.07em;
      font-weight:1000;
      max-width:1040px;
      text-shadow:0 0 36px rgba(236,72,153,.35);
    }
    .hero-summary{
      margin:0 auto 26px;
      color:#f2d8ff;
      font-size:clamp(1.05rem, 1.7vw, 1.32rem);
      max-width:850px;
    }
    .search-card{
      max-width:760px;
      margin:0 auto;
      padding:10px;
      display:flex;
      align-items:center;
      gap:10px;
      border-radius:999px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(34,211,238,.34);
      box-shadow:0 0 0 1px rgba(255,255,255,.04), var(--shadow-neon);
      backdrop-filter:blur(14px);
    }
    .search-card i{margin-left:14px;color:var(--cyan);font-size:1.05rem}
    .search-card input{
      flex:1;
      min-width:0;
      height:48px;
      border:0;
      outline:0;
      background:transparent;
      color:#fff;
      font-size:1rem;
      font-weight:700;
    }
    .search-card input::placeholder{color:#cfa9ef}
    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:center;
      margin-top:18px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      color:#ffe9ff;
      background:rgba(255,255,255,.065);
      font-size:.9rem;
      font-weight:750;
    }

    .metric-board{
      margin-top:-48px;
      position:relative;
      z-index:3;
    }
    .metric-grid{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:16px;
    }
    .metric{
      padding:22px;
      border-radius:var(--radius-lg);
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
      border:1px solid rgba(244,114,182,.2);
      box-shadow:0 18px 50px rgba(0,0,0,.22);
      min-height:132px;
    }
    .metric strong{
      display:block;
      font-size:clamp(1.75rem, 3vw, 2.55rem);
      line-height:1;
      letter-spacing:-.04em;
      color:#fff;
      margin-bottom:10px;
    }
    .metric span{color:#e6c7ff;font-weight:740}
    .metric .pulse{
      width:9px;height:9px;border-radius:50%;
      display:inline-block;
      margin-right:7px;
      background:var(--green);
      box-shadow:0 0 0 7px rgba(34,197,94,.12),0 0 18px rgba(34,197,94,.45);
    }

    .summary-strip{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:22px;
      align-items:stretch;
    }
    .summary-panel,.cover-panel,.matrix-card,.compare-panel,.timeline-panel,.faq-item,.form-panel,.article-shell,.related-card{
      border-radius:var(--radius-xl);
      border:1px solid rgba(244,114,182,.22);
      background:linear-gradient(180deg, rgba(255,255,255,.082), rgba(255,255,255,.035));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .summary-panel{padding:30px}
    .summary-panel h2{
      margin:0 0 12px;
      color:#fff;
      font-size:clamp(1.8rem, 3vw, 2.7rem);
      line-height:1.08;
      letter-spacing:-.05em;
      font-weight:950;
    }
    .summary-panel p{color:#ecd5ff;margin:0 0 20px}
    .summary-list{
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:12px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .summary-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#f8e7ff;
      padding:12px;
      border-radius:16px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.08);
      font-weight:720;
    }
    .summary-list i{color:var(--cyan);margin-top:3px}
    .cover-panel{
      position:relative;
      min-height:320px;
      background:#19072f;
    }
    .cover-panel img{
      width:100%;
      height:100%;
      min-height:320px;
      object-fit:cover;
      filter:saturate(1.12) contrast(1.05);
    }
    .cover-caption{
      position:absolute;
      left:18px;
      right:18px;
      bottom:18px;
      padding:16px;
      border-radius:18px;
      background:rgba(18,3,36,.72);
      backdrop-filter:blur(14px);
      border:1px solid rgba(34,211,238,.25);
    }
    .cover-caption b{display:block;color:#fff;margin-bottom:4px}
    .cover-caption span{color:#d9b6ff}

    .article-layout{
      display:grid;
      grid-template-columns:minmax(0, 1fr) 330px;
      gap:24px;
      align-items:start;
    }
    .article-shell{padding:0}
    .article-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      padding:24px 28px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.035);
    }
    .article-content{
      padding:34px 34px 40px;
      color:#f4e4ff;
      font-size:1.05rem;
    }
    .article-content h2,.article-content h3,.article-content h4{
      color:#fff;
      line-height:1.18;
      letter-spacing:-.025em;
      margin:1.55em 0 .65em;
      font-weight:940;
    }
    .article-content h2{font-size:clamp(1.6rem, 2.5vw, 2.35rem)}
    .article-content h3{font-size:clamp(1.28rem, 2vw, 1.75rem)}
    .article-content p{margin:0 0 1.08em}
    .article-content a{
      color:#7eeaff;
      font-weight:850;
      border-bottom:1px solid rgba(34,211,238,.35);
    }
    .article-content a:hover{color:#fff;border-color:rgba(236,72,153,.55)}
    .article-content ul,.article-content ol{margin:0 0 1.1em 1.2em;padding:0}
    .article-content li{margin:.48em 0}
    .article-content blockquote{
      margin:1.5em 0;
      padding:20px 22px;
      border-left:4px solid var(--pink);
      border-radius:0 18px 18px 0;
      background:rgba(236,72,153,.1);
      color:#ffe5f6;
      box-shadow:inset 0 0 0 1px rgba(236,72,153,.16);
    }
    .article-content table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      margin:1.5em 0;
      background:rgba(255,255,255,.04);
    }
    .article-content th,.article-content td{
      padding:13px 14px;
      border-bottom:1px solid rgba(255,255,255,.09);
      color:#f8eaff;
      text-align:left;
    }
    .article-content th{background:rgba(34,211,238,.12);color:#d9fbff}
    .article-content img{border-radius:20px;margin:20px 0;box-shadow:0 20px 50px rgba(0,0,0,.28)}
    .not-found{
      padding:42px 28px;
      text-align:left;
    }
    .not-found h2{margin:0 0 10px;color:#fff;font-size:2rem}
    .not-found p{color:#e7cfff;margin-bottom:20px}

    .side-stack{display:grid;gap:16px}
    .side-card{
      padding:20px;
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.06);
      border:1px solid rgba(34,211,238,.22);
      box-shadow:0 18px 48px rgba(0,0,0,.22);
    }
    .side-card h3{margin:0 0 10px;color:#fff;font-size:1.1rem;font-weight:930}
    .side-card p{margin:0;color:#dcc4ef;font-size:.95rem}
    .side-card ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:9px}
    .side-card li{display:flex;gap:9px;color:#f2e4ff;font-weight:700;font-size:.94rem}
    .side-card li i{color:var(--yellow);margin-top:4px}
    .payment-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

    .matrix-grid{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:16px;
    }
    .matrix-card{
      padding:22px;
      min-height:228px;
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .matrix-card:hover{
      transform:translateY(-6px);
      border-color:rgba(34,211,238,.45);
      box-shadow:0 0 24px rgba(34,211,238,.16), 0 20px 55px rgba(0,0,0,.28);
      color:#fff;
    }
    .matrix-icon{
      width:48px;height:48px;
      display:grid;place-items:center;
      border-radius:16px;
      margin-bottom:18px;
      background:linear-gradient(135deg, rgba(236,72,153,.35), rgba(34,211,238,.22));
      color:#fff;
      box-shadow:0 0 22px rgba(236,72,153,.24);
    }
    .matrix-card h3{margin:0 0 9px;font-size:1.16rem;color:#fff;font-weight:950;letter-spacing:-.02em}
    .matrix-card p{margin:0;color:#dcc6f1;font-size:.96rem}
    .matrix-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#9ff3ff;font-weight:900}

    .compare-grid{
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      gap:22px;
      align-items:stretch;
    }
    .compare-panel{padding:28px}
    .compare-panel h2{margin:0 0 12px;font-size:clamp(1.7rem,2.8vw,2.55rem);line-height:1.08;letter-spacing:-.045em;font-weight:950}
    .compare-list{display:grid;gap:12px;margin:20px 0 0}
    .compare-item{
      display:grid;
      grid-template-columns:44px 1fr;
      gap:12px;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.08);
    }
    .compare-item i{
      width:44px;height:44px;
      border-radius:14px;
      display:grid;place-items:center;
      color:#111827;
      background:linear-gradient(135deg,var(--cyan),var(--yellow));
    }
    .compare-item b{display:block;color:#fff;margin-bottom:2px}
    .compare-item span{color:#dbc4ee;font-size:.94rem}
    .score-box{
      padding:28px;
      border-radius:var(--radius-xl);
      background:
        linear-gradient(180deg, rgba(250,204,21,.12), rgba(236,72,153,.08)),
        url('/assets/images/3538a1b6a662303c.jpg') center/cover no-repeat;
      border:1px solid rgba(250,204,21,.24);
      min-height:100%;
      position:relative;
      overflow:hidden;
    }
    .score-box:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(18,3,36,.84), rgba(18,3,36,.52));}
    .score-box > *{position:relative;z-index:1}
    .score-number{font-size:clamp(3rem,7vw,6rem);font-weight:1000;line-height:1;color:#fff;letter-spacing:-.08em;text-shadow:0 0 32px rgba(250,204,21,.35)}
    .score-box p{max-width:520px;color:#fff1ca;font-size:1.05rem}
    .progress-line{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin:20px 0}
    .progress-line span{display:block;width:92%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--yellow));box-shadow:0 0 20px rgba(34,211,238,.35)}

    .timeline{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:16px;
      counter-reset:step;
    }
    .timeline-panel{
      padding:24px;
      position:relative;
      min-height:220px;
    }
    .timeline-panel:before{
      counter-increment:step;
      content:"0" counter(step);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:42px;height:42px;
      border-radius:14px;
      color:#16051f;
      font-weight:1000;
      background:linear-gradient(135deg,var(--cyan),var(--yellow));
      margin-bottom:18px;
    }
    .timeline-panel h3{margin:0 0 9px;color:#fff;font-size:1.15rem;font-weight:950}
    .timeline-panel p{margin:0;color:#dcc7ef}

    .related-list{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:16px;
    }
    .related-card{
      display:block;
      padding:0;
      transition:transform .22s ease, border-color .22s ease;
    }
    .related-card:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.4);color:#fff}
    .related-thumb{height:170px;overflow:hidden;background:#18072e}
    .related-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
    .related-card:hover img{transform:scale(1.06)}
    .related-body{padding:18px}
    .related-body h3{margin:0 0 8px;color:#fff;font-size:1.08rem;line-height:1.32;font-weight:930}
    .related-body p{margin:0;color:#dcc5ef;font-size:.94rem}

    .trust-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:22px;
      align-items:stretch;
    }
    .trust-panel{
      padding:30px;
      border-radius:var(--radius-xl);
      border:1px solid rgba(34,211,238,.24);
      background:linear-gradient(180deg, rgba(34,211,238,.09), rgba(255,255,255,.035));
      box-shadow:var(--shadow);
    }
    .trust-panel h2{margin:0 0 12px;font-size:clamp(1.75rem,2.8vw,2.65rem);line-height:1.08;letter-spacing:-.045em;font-weight:950}
    .trust-panel p{color:#ead5ff;margin:0 0 18px}
    .trust-badges{display:flex;flex-wrap:wrap;gap:10px}
    .security-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
    .security-list li{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.08);
      color:#f7eaff;
      font-weight:720;
    }
    .security-list i{color:var(--green);margin-top:4px}

    .quick-grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:16px;
    }
    .quick-card{
      padding:22px;
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.058);
      border:1px solid rgba(244,114,182,.2);
      transition:transform .22s ease, background .22s ease;
    }
    .quick-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.085)}
    .quick-card i{color:var(--cyan);font-size:1.4rem;margin-bottom:14px}
    .quick-card h3{margin:0 0 8px;color:#fff;font-size:1.12rem;font-weight:950}
    .quick-card p{margin:0;color:#dcc5ef}

    .faq-wrap{display:grid;gap:14px;max-width:920px}
    .faq-item{padding:0}
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:20px 22px;
      color:#fff;
      font-weight:930;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{
      content:"+";
      width:28px;height:28px;
      display:grid;place-items:center;
      border-radius:50%;
      background:rgba(34,211,238,.12);
      border:1px solid rgba(34,211,238,.24);
      color:#bff6ff;
      flex:0 0 auto;
      transition:transform .2s ease;
    }
    .faq-item[open] summary:after{content:"−";transform:rotate(180deg)}
    .faq-item p{padding:0 22px 22px;margin:0;color:#ddc6ef}

    .cta-panel{
      border-radius:34px;
      padding:34px;
      overflow:hidden;
      position:relative;
      border:1px solid rgba(250,204,21,.25);
      background:
        linear-gradient(120deg, rgba(236,72,153,.22), rgba(34,211,238,.10)),
        url('/assets/images/1021b2dd97b50bb0.jpg') center/cover no-repeat;
      box-shadow:var(--shadow);
    }
    .cta-panel:before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(18,3,36,.92), rgba(18,3,36,.62));
    }
    .cta-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1fr 420px;
      gap:28px;
      align-items:center;
    }
    .cta-copy h2{margin:0 0 12px;color:#fff;font-size:clamp(1.9rem,3.4vw,3.2rem);line-height:1.04;font-weight:1000;letter-spacing:-.055em}
    .cta-copy p{color:#f4dcff;margin:0 0 20px;max-width:680px}
    .form-panel{padding:22px;background:rgba(18,3,36,.76);backdrop-filter:blur(14px)}
    .form-panel label{display:block;color:#fff;font-weight:850;margin-bottom:7px;font-size:.92rem}
    .form-panel input,.form-panel select{
      width:100%;
      min-height:48px;
      border:1px solid rgba(244,114,182,.24);
      border-radius:14px;
      background:rgba(255,255,255,.07);
      color:#fff;
      padding:0 14px;
      margin-bottom:13px;
      outline:0;
      transition:border-color .2s ease, box-shadow .2s ease;
    }
    .form-panel input:focus,.form-panel select:focus{border-color:rgba(34,211,238,.58);box-shadow:0 0 0 4px rgba(34,211,238,.1)}
    .form-panel input::placeholder{color:#c8a8e8}
    .form-panel select option{background:#18072e;color:#fff}
    .form-note{color:#d8c4ef;font-size:.86rem;margin:12px 0 0}

    .fab-support{
      position:fixed;
      left:16px;
      bottom:96px;
      z-index:950;
      width:58px;
      height:58px;
      border-radius:20px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(#120324,#120324) padding-box, linear-gradient(135deg,var(--pink),var(--cyan),var(--yellow)) border-box;
      border:2px solid transparent;
      box-shadow:0 0 22px rgba(34,211,238,.38),0 0 30px rgba(236,72,153,.24);
      opacity:.78;
      transition:transform .25s ease, opacity .25s ease, box-shadow .25s ease;
      animation:floatingFab 3.2s ease-in-out infinite;
    }
    .fab-support i{font-size:1.35rem;text-shadow:0 0 14px rgba(34,211,238,.7)}
    .fab-support:hover{opacity:1;transform:scale(1.1);box-shadow:0 0 30px rgba(34,211,238,.55),0 0 45px rgba(236,72,153,.32);color:#fff}
    .fab-support:active{transform:scale(.95) translateY(2px)}
    .fab-support:after{
      content:"";
      position:absolute;
      top:-4px;
      right:-4px;
      width:14px;height:14px;
      border-radius:50%;
      background:var(--pink);
      box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 16px rgba(236,72,153,.8);
      animation:alertDot 1.1s ease-in-out infinite;
    }
    @keyframes floatingFab{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
    @keyframes alertDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}

    .site-footer{
      padding:62px 0 28px;
      background:linear-gradient(180deg, rgba(9,1,22,.65), #080112);
      border-top:1px solid rgba(244,114,182,.18);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.35fr .75fr .9fr;
      gap:34px;
      align-items:start;
    }
    .footer-brand{
      color:#fff;
      font-weight:1000;
      font-size:1.12rem;
      line-height:1.16;
      letter-spacing:-.035em;
      margin-bottom:12px;
    }
    .site-footer p{color:#d5b9ec;margin:0}
    .license-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:18px;
    }
    .license-row span{
      display:inline-flex;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(250,204,21,.25);
      background:rgba(250,204,21,.08);
      color:#fff4b8;
      font-size:.82rem;
      font-weight:850;
    }
    .site-footer h3{
      color:#fff;
      margin:0 0 13px;
      font-size:1rem;
      font-weight:950;
    }
    .footer-links{display:grid;gap:9px}
    .footer-links a{color:#dfc4f6;font-weight:760}
    .footer-links a:hover{color:var(--cyan)}
    .copyright{
      margin-top:38px;
      padding-top:22px;
      border-top:1px solid rgba(255,255,255,.08);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      color:#bd9bd7;
      font-size:.9rem;
    }

    @media (max-width:1120px){
      .brand-text{max-width:245px}
      .desktop-nav a{padding:9px 9px;font-size:.86rem}
      .nav-actions .btn{padding:9px 12px}
      .article-layout{grid-template-columns:1fr}
      .side-stack{grid-template-columns:repeat(3,1fr)}
      .cta-grid{grid-template-columns:1fr}
    }
    @media (max-width:960px){
      :root{--nav-h:72px}
      .desktop-nav{display:none}
      .menu-toggle{display:flex}
      .mobile-panel.is-open{display:block}
      .brand-text{max-width:330px}
      .metric-grid,.matrix-grid,.timeline,.quick-grid{grid-template-columns:repeat(2,1fr)}
      .summary-strip,.compare-grid,.trust-grid{grid-template-columns:1fr}
      .side-stack{grid-template-columns:1fr}
      .related-list{grid-template-columns:1fr 1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      .copyright{flex-direction:column;align-items:flex-start}
    }
    @media (max-width:720px){
      .container{width:min(100% - 24px, var(--container))}
      .section{padding:62px 0}
      .section.tight{padding:42px 0}
      .brand-text{max-width:185px;font-size:.82rem}
      .brand-mark{width:38px;height:38px;border-radius:13px}
      .nav-wrap{gap:9px}
      .nav-actions{gap:6px}
      .nav-actions .btn{min-height:38px;padding:9px 10px;font-size:.78rem}
      .nav-actions .btn-primary i{display:none}
      .menu-toggle{width:38px;height:38px}
      .article-hero{padding:calc(var(--nav-h) + 36px) 0 58px;min-height:620px}
      .search-card{border-radius:24px;flex-wrap:wrap;justify-content:flex-start;padding:12px}
      .search-card i{margin-left:4px}
      .search-card input{flex:1 1 calc(100% - 42px)}
      .search-card .btn{width:100%}
      .metric-board{margin-top:-30px}
      .metric-grid,.matrix-grid,.timeline,.quick-grid,.related-list{grid-template-columns:1fr}
      .summary-list{grid-template-columns:1fr}
      .summary-panel,.article-content,.compare-panel,.trust-panel,.cta-panel{padding:22px}
      .article-meta{padding:18px}
      .article-content{font-size:1rem}
      .footer-grid{grid-template-columns:1fr}
      .cta-grid{gap:20px}
      .form-panel{padding:18px}
    }
    @media (max-width:520px){
      .brand-text{max-width:136px}
      .btn-text{display:inline-flex}
      .nav-actions .btn-text{padding:8px 9px}
      .article-hero h1{font-size:2.18rem;letter-spacing:-.055em}
      .hero-summary{font-size:1rem}
      .chip-row{justify-content:flex-start}
      .hero-inner{text-align:left}
      .hero-kicker{justify-content:flex-start}
      .search-card{margin-left:0;margin-right:0}
      .fab-support{left:14px;bottom:86px;width:54px;height:54px;border-radius:18px}
    }

/* roulang page: category3 */
:root{
      --bg:#120324;
      --bg-2:#1C0738;
      --panel:#241047;
      --panel-2:#30105d;
      --text:#ffffff;
      --muted:#d9b6ff;
      --soft:#f472b6;
      --cyan:#22d3ee;
      --pink:#ec4899;
      --yellow:#facc15;
      --green:#22c55e;
      --red:#fb7185;
      --border:rgba(244,114,182,.26);
      --border-cyan:rgba(34,211,238,.32);
      --shadow:0 24px 80px rgba(0,0,0,.42);
      --shadow-neon:0 0 26px rgba(236,72,153,.35),0 0 36px rgba(34,211,238,.18);
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:14px;
      --container:1180px;
      --nav-h:78px;
      --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Helvetica Neue", sans-serif;
    }
    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(236,72,153,.24), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(34,211,238,.20), transparent 34%),
        linear-gradient(180deg, var(--bg) 0%, #17042f 34%, #090116 100%);
      line-height:1.62;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:46px 46px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.72), transparent 82%);
    }
    a{color:inherit;text-decoration:none;transition:color .2s ease, opacity .2s ease, transform .2s ease}
    a:hover,a:focus{color:var(--cyan)}
    img{max-width:100%;display:block;height:auto}
    button,input,select,textarea{font-family:inherit}
    button{cursor:pointer}
    .container{width:min(var(--container), calc(100% - 32px));margin:0 auto}
    .section{padding:84px 0;position:relative}
    .section.tight{padding:56px 0}
    .section.alt{
      background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.014));
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .section-title{max-width:790px;margin-bottom:34px}
    .section-title.center{text-align:center;margin-left:auto;margin-right:auto}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border:1px solid var(--border-cyan);
      border-radius:999px;color:#bff6ff;background:rgba(34,211,238,.08);
      font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
      box-shadow:0 0 18px rgba(34,211,238,.12);margin-bottom:14px;
    }
    h1,h2,h3,h4{color:#fff;font-weight:950;letter-spacing:-.045em;line-height:1.08;margin:0 0 16px}
    h1{font-size:clamp(2.25rem, 5.2vw, 5rem)}
    h2{font-size:clamp(1.8rem, 3.4vw, 3.1rem)}
    h3{font-size:clamp(1.16rem, 1.6vw, 1.45rem)}
    p{margin:0 0 16px;color:#f0d9ff}
    .lead{font-size:clamp(1.04rem, 1.45vw, 1.25rem);color:#f4dbff;max-width:880px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      min-height:46px;padding:13px 20px;border-radius:999px;
      font-weight:850;font-size:.96rem;border:1px solid transparent;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(1px) scale(.98)}
    .btn:focus-visible,.menu-toggle:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
      outline:3px solid rgba(34,211,238,.52);outline-offset:3px;
    }
    .btn-primary{
      color:#16051f;background:linear-gradient(135deg, var(--pink), var(--yellow));
      box-shadow:0 0 22px rgba(236,72,153,.42),0 8px 22px rgba(250,204,21,.18);
    }
    .btn-primary:hover{color:#16051f;box-shadow:0 0 35px rgba(236,72,153,.55),0 12px 28px rgba(250,204,21,.25)}
    .btn-secondary{
      color:#fff;border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.08);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .btn-secondary:hover{background:rgba(34,211,238,.16);color:#fff}
    .btn-text{color:#fdf2ff;border:1px solid rgba(244,114,182,.38);background:rgba(255,255,255,.03)}
    .btn-text:hover{color:#fff;border-color:rgba(34,211,238,.6)}
    .badge{
      display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;
      font-size:.8rem;font-weight:850;color:#fff;background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
    }
    .badge.hot{background:rgba(236,72,153,.16);border-color:rgba(236,72,153,.42);color:#ffd8ef}
    .badge.safe{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.38);color:#c9f7ff}
    .badge.gold{background:rgba(250,204,21,.12);border-color:rgba(250,204,21,.42);color:#fff0a8}
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);
      background:rgba(18,3,36,.78);backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(244,114,182,.18);box-shadow:0 14px 50px rgba(0,0,0,.24);
    }
    .nav-wrap{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative}
    .brand{display:flex;align-items:center;gap:10px;min-width:0;font-weight:950;letter-spacing:-.03em;color:#fff}
    .brand-mark{
      width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
      background:linear-gradient(135deg, rgba(236,72,153,.95), rgba(34,211,238,.95));
      box-shadow:var(--shadow-neon);flex:0 0 auto;
    }
    .brand-text{max-width:350px;line-height:1.05;font-size:.98rem}
    .desktop-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center;min-width:0}
    .desktop-nav a{
      padding:10px 12px;border-radius:999px;color:#ead5ff;font-weight:780;font-size:.91rem;white-space:nowrap;
    }
    .desktop-nav a:hover,.desktop-nav a.active{
      color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(244,114,182,.14);
    }
    .nav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
    .nav-actions .btn{min-height:40px;padding:10px 15px;font-size:.88rem}
    .menu-toggle{
      display:none;width:42px;height:42px;border:1px solid rgba(244,114,182,.35);
      border-radius:14px;background:rgba(255,255,255,.05);color:#fff;
    }
    .mobile-panel{
      display:none;position:absolute;left:16px;right:16px;top:calc(var(--nav-h) - 4px);
      padding:14px;border-radius:20px;background:rgba(28,7,56,.96);
      border:1px solid rgba(244,114,182,.22);box-shadow:var(--shadow);
    }
    .mobile-panel a{display:block;padding:12px 14px;border-radius:14px;color:#f4dbff;font-weight:800}
    .mobile-panel a.active,.mobile-panel a:hover{background:rgba(255,255,255,.08);color:#fff}
    main{padding-top:var(--nav-h)}
    .hero{
      min-height:700px;display:flex;align-items:center;position:relative;overflow:hidden;
      background:
        linear-gradient(90deg, rgba(18,3,36,.96), rgba(18,3,36,.78) 48%, rgba(28,7,56,.72)),
        url('/assets/images/d37d682e068bc58c.jpg') center/cover no-repeat;
      border-bottom:1px solid rgba(244,114,182,.18);
    }
    .hero:after{
      content:"";position:absolute;inset:auto -15% -28% -15%;height:340px;
      background:radial-gradient(ellipse, rgba(236,72,153,.22), transparent 62%);
      pointer-events:none;
    }
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);gap:34px;align-items:center;position:relative;z-index:1}
    .hero-copy{padding:70px 0;text-align:left}
    .hero-copy h1 span{color:var(--yellow);text-shadow:0 0 28px rgba(250,204,21,.28)}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
    .hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
    .quick-grid{
      display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
      padding:18px;border-radius:var(--radius-xl);
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
      border:1px solid rgba(244,114,182,.28);box-shadow:var(--shadow-neon), var(--shadow);
    }
    .quick-tile{
      min-height:128px;padding:18px;border-radius:22px;background:rgba(9,1,22,.62);
      border:1px solid rgba(255,255,255,.10);position:relative;overflow:hidden;
      transition:transform .2s ease,border-color .2s ease,background .2s ease;
    }
    .quick-tile:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.48);background:rgba(34,211,238,.08)}
    .quick-tile i{font-size:1.42rem;color:var(--cyan);margin-bottom:16px}
    .quick-tile strong{display:block;font-size:1.06rem;color:#fff;margin-bottom:6px}
    .quick-tile span{display:block;color:#e8caff;font-size:.92rem;line-height:1.45}
    .dashboard{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch}
    .metric-board{
      border-radius:var(--radius-xl);padding:28px;background:linear-gradient(135deg, rgba(48,16,93,.94), rgba(36,16,71,.72));
      border:1px solid rgba(244,114,182,.26);box-shadow:var(--shadow);
    }
    .metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
    .metric{
      padding:18px;border-radius:20px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);
    }
    .metric b{display:block;font-size:clamp(1.7rem,3.2vw,2.55rem);line-height:1;color:#fff;margin-bottom:10px}
    .metric small{display:block;color:#e8caff;font-weight:760}
    .visual-card{
      border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(34,211,238,.24);
      background:#16062b;box-shadow:var(--shadow);min-height:360px;position:relative;
    }
    .visual-card img{height:100%;width:100%;object-fit:cover;opacity:.82}
    .visual-overlay{
      position:absolute;inset:auto 20px 20px 20px;padding:18px;border-radius:20px;
      background:rgba(18,3,36,.76);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);
    }
    .service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .service-card,.scenario-card,.assurance-card,.news-card,.faq-item{
      border-radius:var(--radius-lg);background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.032));
      border:1px solid rgba(244,114,182,.2);box-shadow:0 18px 50px rgba(0,0,0,.20);
    }
    .service-card{padding:22px;min-height:238px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
    .service-card:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.45);box-shadow:var(--shadow-neon)}
    .service-card i{width:46px;height:46px;display:grid;place-items:center;border-radius:16px;color:#13031f;background:linear-gradient(135deg,var(--cyan),var(--yellow));margin-bottom:18px}
    .service-card p,.scenario-card p,.assurance-card p,.faq-item p{color:#ead5ff}
    .compare-wrap{
      display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:start;
    }
    .compare-list{display:grid;gap:12px}
    .compare-row{
      display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;border-radius:18px;
      background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
    }
    .compare-row div{padding:12px;border-radius:14px}
    .compare-row .weak{color:#d6b6ea;background:rgba(255,255,255,.035)}
    .compare-row .strong{color:#dffcff;background:rgba(34,211,238,.09);border:1px solid rgba(34,211,238,.18)}
    .scenario-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
    .scenario-card{padding:24px}
    .scenario-card .num{font-size:2rem;font-weight:950;color:var(--yellow);line-height:1;margin-bottom:16px}
    .timeline{
      display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:var(--radius-xl);overflow:hidden;
      border:1px solid rgba(244,114,182,.23);background:rgba(255,255,255,.045);
    }
    .milestone{padding:26px;border-right:1px solid rgba(255,255,255,.08);position:relative}
    .milestone:last-child{border-right:0}
    .milestone:before{
      content:"";display:block;width:12px;height:12px;border-radius:999px;background:var(--pink);
      box-shadow:0 0 20px rgba(236,72,153,.72);margin-bottom:18px;
    }
    .milestone h3{font-size:1.15rem}
    .news-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:26px}
    .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .news-card{display:flex;flex-direction:column;min-height:245px;padding:22px;transition:transform .2s ease,border-color .2s ease}
    .news-card:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.42)}
    .news-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
    .news-card h3{font-size:1.22rem}
    .news-card p{margin-bottom:18px}
    .news-card .read-link{margin-top:auto;color:#aef6ff;font-weight:900}
    .empty-state{padding:26px;border-radius:22px;border:1px dashed rgba(244,114,182,.42);color:#f5d5ff;background:rgba(255,255,255,.04)}
    .assurance-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .assurance-card{padding:24px;display:flex;gap:16px;align-items:flex-start}
    .assurance-card i{font-size:1.35rem;color:var(--yellow);margin-top:3px}
    .answer-strip{
      display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;
      padding:30px;border-radius:var(--radius-xl);background:linear-gradient(135deg, rgba(236,72,153,.18), rgba(34,211,238,.10));
      border:1px solid rgba(244,114,182,.24);box-shadow:var(--shadow-neon);
    }
    .pill-list{display:flex;flex-wrap:wrap;gap:10px}
    .pill-list span{padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-weight:800;color:#fff}
    .faq-list{display:grid;gap:14px;max-width:930px}
    .faq-item{padding:22px}
    .faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;font-weight:950;color:#fff;font-size:1.08rem}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{content:"+";font-size:1.6rem;color:var(--cyan)}
    .faq-item[open] summary:after{content:"−"}
    .faq-item p{padding-top:12px;margin:0}
    .cta-panel{
      display:grid;grid-template-columns:.95fr 1.05fr;gap:26px;align-items:center;
      border-radius:32px;padding:28px;background:
        linear-gradient(90deg, rgba(18,3,36,.88), rgba(28,7,56,.7)),
        url('/assets/images/3538a1b6a662303c.jpg') center/cover no-repeat;
      border:1px solid rgba(34,211,238,.24);box-shadow:var(--shadow);overflow:hidden;
    }
    .bonus-form{
      display:grid;gap:14px;padding:22px;border-radius:24px;background:rgba(12,2,25,.72);
      border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(12px);
    }
    .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .bonus-form label{display:grid;gap:7px;color:#fff;font-weight:820;font-size:.92rem}
    .bonus-form input,.bonus-form select{
      height:48px;border-radius:14px;border:1px solid rgba(244,114,182,.28);
      background:rgba(255,255,255,.07);color:#fff;padding:0 14px;box-shadow:none;
      margin:0;
    }
    .bonus-form input::placeholder{color:#cda5e7}
    .bonus-form select option{background:#1C0738;color:#fff}
    .form-note{font-size:.86rem;color:#e8caff;margin:0}
    .fab{
      position:fixed;left:1rem;bottom:6rem;z-index:50;width:58px;height:58px;border-radius:20px;
      display:grid;place-items:center;color:#fff;background:rgba(7,7,13,.82);backdrop-filter:blur(14px);
      border:1px solid rgba(236,72,153,.55);box-shadow:0 0 20px rgba(236,72,153,.42),0 0 30px rgba(34,211,238,.22);
      opacity:.78;transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease;
    }
    .fab:before{content:"";position:absolute;inset:-2px;border-radius:22px;background:linear-gradient(135deg,var(--pink),var(--cyan),var(--yellow));z-index:-1;filter:blur(10px);opacity:.55;animation:pulseGlow 2.8s infinite}
    .fab:hover{opacity:1;transform:translateY(-4px) scale(1.06);color:#fff;box-shadow:0 0 28px rgba(34,211,238,.45),0 0 38px rgba(236,72,153,.36)}
    .fab:active{transform:scale(.95) translateY(2px)}
    .fab i{font-size:1.35rem;text-shadow:0 0 12px rgba(34,211,238,.8)}
    .fab-dot{position:absolute;right:7px;top:7px;width:11px;height:11px;border-radius:999px;background:var(--red);box-shadow:0 0 14px rgba(251,113,133,.9);ring:2px solid #fff}
    @keyframes pulseGlow{0%,100%{opacity:.38}50%{opacity:.78}}
    .site-footer{
      background:linear-gradient(180deg, rgba(9,1,22,.96), #05000d);
      border-top:1px solid rgba(244,114,182,.18);padding:58px 0 24px;
    }
    .footer-grid{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:34px}
    .footer-brand{font-size:1.1rem;font-weight:950;letter-spacing:-.03em;margin-bottom:14px;color:#fff}
    .license-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
    .license-row span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#ffe6fb;font-size:.82rem;font-weight:820}
    .site-footer h3{font-size:1rem;margin-bottom:14px}
    .footer-links{display:grid;gap:10px}
    .footer-links a{color:#ead5ff;font-weight:760}
    .footer-links a:hover{color:var(--cyan)}
    .copyright{
      margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
      display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#cda5e7;font-size:.9rem;
    }
    @media (max-width:1100px){
      .brand-text{max-width:240px}
      .desktop-nav a{padding:9px 9px;font-size:.86rem}
      .service-grid{grid-template-columns:repeat(2,1fr)}
      .timeline{grid-template-columns:repeat(2,1fr)}
      .milestone:nth-child(2){border-right:0}
      .milestone:nth-child(1),.milestone:nth-child(2){border-bottom:1px solid rgba(255,255,255,.08)}
    }
    @media (max-width:900px){
      :root{--nav-h:72px}
      .desktop-nav{display:none}
      .menu-toggle{display:grid;place-items:center}
      .mobile-panel.is-open{display:block}
      .brand-text{max-width:300px}
      .hero{min-height:auto}
      .hero-grid,.dashboard,.compare-wrap,.answer-strip,.cta-panel{grid-template-columns:1fr}
      .hero-copy{padding:58px 0 22px}
      .quick-grid{margin-bottom:44px}
      .scenario-grid,.news-grid{grid-template-columns:1fr 1fr}
      .assurance-layout{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      .footer-grid>div:first-child{grid-column:1/-1}
    }
    @media (max-width:640px){
      .container{width:min(100% - 22px, var(--container))}
      .section{padding:58px 0}
      .nav-wrap{gap:8px}
      .brand-mark{width:38px;height:38px;border-radius:13px}
      .brand-text{max-width:168px;font-size:.78rem}
      .nav-actions{gap:6px}
      .nav-actions .btn{padding:9px 10px;font-size:.78rem}
      .nav-actions .btn-text{display:inline-flex}
      .quick-grid,.metric-grid,.service-grid,.scenario-grid,.news-grid,.field-grid{grid-template-columns:1fr}
      .timeline{grid-template-columns:1fr}
      .milestone{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
      .milestone:last-child{border-bottom:0}
      .compare-row{grid-template-columns:1fr}
      .news-head{display:block}
      .news-head .btn{margin-top:14px}
      .footer-grid{grid-template-columns:1fr}
      .copyright{display:block}
      .copyright span{display:block;margin-bottom:8px}
      .fab{left:.85rem;bottom:5.5rem}
    }

/* roulang page: category2 */
:root{
      --bg:#120324;
      --bg-2:#1C0738;
      --panel:#241047;
      --panel-2:#30105d;
      --text:#ffffff;
      --muted:#d9b6ff;
      --soft:#f472b6;
      --cyan:#22d3ee;
      --pink:#ec4899;
      --yellow:#facc15;
      --green:#22c55e;
      --red:#fb7185;
      --border:rgba(244,114,182,.26);
      --border-cyan:rgba(34,211,238,.32);
      --shadow:0 24px 80px rgba(0,0,0,.42);
      --shadow-neon:0 0 26px rgba(236,72,153,.35),0 0 36px rgba(34,211,238,.18);
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:14px;
      --container:1180px;
      --nav-h:78px;
      --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Helvetica Neue", sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(236,72,153,.24), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(34,211,238,.20), transparent 34%),
        linear-gradient(180deg, var(--bg) 0%, #17042f 34%, #090116 100%);
      line-height:1.62;
      overflow-x:hidden;
      min-width:320px;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:46px 46px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 82%);
    }
    a{color:inherit;text-decoration:none;transition:color .2s ease, opacity .2s ease, transform .2s ease}
    a:hover,a:focus{color:var(--cyan)}
    img{max-width:100%;display:block;height:auto}
    button,input,select,textarea{font-family:inherit}
    button{cursor:pointer}
    input,select,textarea{
      width:100%;
      border:1px solid rgba(244,114,182,.24);
      background:rgba(255,255,255,.06);
      color:#fff;
      border-radius:16px;
      padding:14px 15px;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    input::placeholder,textarea::placeholder{color:rgba(255,255,255,.55)}
    select{appearance:none}
    input:focus,select:focus,textarea:focus{
      border-color:rgba(34,211,238,.75);
      box-shadow:0 0 0 4px rgba(34,211,238,.13);
      background:rgba(255,255,255,.085);
    }
    .container{width:min(var(--container), calc(100% - 32px));margin:0 auto}
    .section{padding:84px 0;position:relative}
    .section.tight{padding:56px 0}
    .section.alt{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .section-title{max-width:780px;margin-bottom:34px}
    .section-title.center{text-align:center;margin-left:auto;margin-right:auto}
    .section-title h2{
      margin:0 0 12px;
      font-size:clamp(1.9rem, 3.3vw, 3.05rem);
      line-height:1.08;
      letter-spacing:-.045em;
      font-weight:950;
    }
    .section-title p{margin:0;color:#f4dbff;font-size:1.04rem}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border:1px solid var(--border-cyan);
      border-radius:999px;
      color:#bff6ff;
      background:rgba(34,211,238,.08);
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
      box-shadow:0 0 18px rgba(34,211,238,.12);
      margin-bottom:14px;
    }
    .lead{font-size:clamp(1.04rem, 1.45vw, 1.25rem);color:#f4dbff;max-width:880px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:46px;
      padding:13px 20px;
      border-radius:999px;
      font-weight:850;
      font-size:.96rem;
      border:1px solid transparent;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(1px) scale(.98)}
    .btn-primary{
      color:#16051f;
      background:linear-gradient(135deg, var(--pink), var(--yellow));
      box-shadow:0 0 22px rgba(236,72,153,.42),0 8px 22px rgba(250,204,21,.18);
    }
    .btn-primary:hover{color:#16051f;box-shadow:0 0 35px rgba(236,72,153,.55),0 12px 28px rgba(250,204,21,.25)}
    .btn-secondary{
      color:#fff;
      border-color:rgba(34,211,238,.45);
      background:rgba(34,211,238,.08);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .btn-secondary:hover{background:rgba(34,211,238,.16);color:#fff}
    .btn-text{
      color:#fdf2ff;
      border:1px solid rgba(244,114,182,.38);
      background:rgba(255,255,255,.03);
    }
    .btn-text:hover{color:#fff;border-color:rgba(34,211,238,.6)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.8rem;
      font-weight:850;
      color:#fff;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
    }
    .badge.hot{background:rgba(236,72,153,.16);border-color:rgba(236,72,153,.42);color:#ffd8ef}
    .badge.safe{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.38);color:#c9f7ff}
    .badge.gold{background:rgba(250,204,21,.12);border-color:rgba(250,204,21,.42);color:#fff0a8}
    .site-header{
      position:fixed;
      top:0;left:0;right:0;
      z-index:1000;
      height:var(--nav-h);
      background:rgba(18,3,36,.78);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(244,114,182,.18);
      box-shadow:0 14px 50px rgba(0,0,0,.24);
    }
    .nav-wrap{
      height:var(--nav-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      position:relative;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      font-weight:950;
      letter-spacing:-.03em;
      color:#fff;
    }
    .brand:hover{color:#fff}
    .brand-mark{
      width:42px;height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(236,72,153,.95), rgba(34,211,238,.95));
      box-shadow:var(--shadow-neon);
      flex:0 0 auto;
    }
    .brand-text{
      max-width:350px;
      line-height:1.05;
      font-size:.98rem;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:4px;
      flex:1;
      justify-content:center;
      min-width:0;
    }
    .desktop-nav a{
      padding:10px 12px;
      border-radius:999px;
      color:#ead5ff;
      font-weight:780;
      font-size:.91rem;
      white-space:nowrap;
    }
    .desktop-nav a:hover,.desktop-nav a.active{
      color:#fff;
      background:rgba(255,255,255,.08);
      box-shadow:inset 0 0 0 1px rgba(244,114,182,.14);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
    }
    .nav-actions .btn{min-height:40px;padding:10px 15px;font-size:.88rem}
    .menu-toggle{
      display:none;
      width:42px;height:42px;
      border-radius:14px;
      border:1px solid rgba(244,114,182,.32);
      background:rgba(255,255,255,.06);
      color:#fff;
      align-items:center;
      justify-content:center;
      transition:background .2s ease, transform .2s ease, border-color .2s ease;
    }
    .menu-toggle:hover{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.5)}
    .mobile-panel{
      display:none;
      position:absolute;
      left:0;right:0;top:calc(var(--nav-h) - 2px);
      padding:12px;
      border:1px solid rgba(244,114,182,.22);
      border-radius:0 0 22px 22px;
      background:rgba(24,5,47,.96);
      backdrop-filter:blur(18px);
      box-shadow:0 24px 60px rgba(0,0,0,.42);
    }
    .mobile-panel a{
      display:block;
      padding:13px 14px;
      border-radius:14px;
      color:#f3d7ff;
      font-weight:800;
    }
    .mobile-panel a.active,.mobile-panel a:hover{background:rgba(255,255,255,.08);color:#fff}
    .category-hero{
      padding:calc(var(--nav-h) + 70px) 0 78px;
      min-height:760px;
      display:flex;
      align-items:center;
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(90deg, rgba(18,3,36,.96) 0%, rgba(18,3,36,.72) 48%, rgba(28,7,56,.82) 100%),
        url('/assets/images/d37d682e068bc58c.jpg') center/cover no-repeat;
      border-bottom:1px solid rgba(244,114,182,.16);
    }
    .category-hero:after{
      content:"";
      position:absolute;
      inset:auto -8% -22% -8%;
      height:260px;
      background:radial-gradient(circle, rgba(236,72,153,.35), transparent 62%);
      filter:blur(14px);
      pointer-events:none;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0, 1.08fr) minmax(340px, .92fr);
      gap:38px;
      align-items:center;
      position:relative;
      z-index:2;
    }
    .hero-copy h1{
      margin:0 0 18px;
      font-size:clamp(2.35rem, 5.4vw, 5.3rem);
      line-height:.96;
      letter-spacing:-.07em;
      font-weight:1000;
      max-width:820px;
    }
    .hero-copy .lead{margin-bottom:24px}
    .hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0}
    .hero-points{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:12px;
      margin-top:24px;
      max-width:780px;
    }
    .point{
      padding:14px;
      border:1px solid rgba(255,255,255,.11);
      background:rgba(255,255,255,.055);
      border-radius:18px;
      color:#f7e8ff;
    }
    .point i{color:var(--cyan);margin-right:8px}
    .point strong{display:block;color:#fff;font-size:.96rem;margin-bottom:4px}
    .point span{font-size:.88rem;color:#ddb8ff}
    .launch-panel{
      border:1px solid rgba(244,114,182,.3);
      background:linear-gradient(180deg, rgba(48,16,93,.84), rgba(18,3,36,.78));
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow), var(--shadow-neon);
      padding:24px;
      overflow:hidden;
      position:relative;
    }
    .launch-panel:before{
      content:"";
      position:absolute;
      top:-80px;right:-60px;
      width:210px;height:210px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(250,204,21,.22), transparent 62%);
    }
    .panel-image{
      border-radius:22px;
      overflow:hidden;
      border:1px solid rgba(34,211,238,.26);
      margin-bottom:18px;
      position:relative;
    }
    .panel-image img{width:100%;height:210px;object-fit:cover}
    .panel-image:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent, rgba(18,3,36,.52));
    }
    .countdown{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:12px;
      margin:18px 0;
    }
    .time-ring{
      aspect-ratio:1;
      border-radius:50%;
      display:grid;
      place-items:center;
      text-align:center;
      border:1px solid rgba(34,211,238,.32);
      background:
        radial-gradient(circle at center, rgba(18,3,36,.78) 52%, transparent 54%),
        conic-gradient(from 20deg, var(--pink), var(--cyan), var(--yellow), var(--pink));
      box-shadow:0 0 24px rgba(34,211,238,.14);
    }
    .time-ring b{font-size:1.75rem;display:block;line-height:1;color:#fff}
    .time-ring span{font-size:.78rem;color:#f4c9ff;font-weight:800}
    .reservation{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      margin-top:16px;
    }
    .metrics-board{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:24px;
      align-items:stretch;
    }
    .metric-main{
      padding:30px;
      border-radius:var(--radius-xl);
      border:1px solid rgba(34,211,238,.28);
      background:
        linear-gradient(135deg, rgba(34,211,238,.12), transparent 38%),
        rgba(255,255,255,.055);
      box-shadow:0 22px 70px rgba(0,0,0,.28);
    }
    .metric-main h2,.service-copy h2,.comparison-copy h2,.timeline-copy h2,.guard-copy h2,.quick-copy h2,.faq-copy h2,.form-copy h2{
      margin:0 0 14px;
      font-size:clamp(1.85rem, 3vw, 3rem);
      line-height:1.08;
      letter-spacing:-.045em;
      font-weight:950;
    }
    .metric-main p,.service-copy p,.comparison-copy p,.timeline-copy p,.guard-copy p,.quick-copy p,.faq-copy p,.form-copy p{color:#f4dbff;margin:0}
    .metric-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:14px;
      margin-top:26px;
    }
    .metric-tile{
      padding:18px;
      border-radius:20px;
      background:rgba(18,3,36,.52);
      border:1px solid rgba(244,114,182,.2);
    }
    .metric-tile b{
      display:block;
      font-size:clamp(1.65rem, 3vw, 2.55rem);
      line-height:1;
      color:#fff;
      letter-spacing:-.04em;
    }
    .metric-tile span{display:block;color:#d9b6ff;font-size:.92rem;margin-top:8px}
    .live-stack{
      padding:26px;
      border-radius:var(--radius-xl);
      background:rgba(255,255,255,.045);
      border:1px solid rgba(244,114,182,.22);
    }
    .signal{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .signal:last-child{border-bottom:0}
    .signal strong{font-size:.98rem}
    .signal span{color:#f7ccff;font-weight:800}
    .dot{
      width:10px;height:10px;border-radius:50%;
      background:var(--green);
      box-shadow:0 0 14px rgba(34,197,94,.75);
      display:inline-block;
      margin-right:8px;
    }
    .channel-matrix{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
      margin-top:32px;
    }
    .channel-card{
      min-height:150px;
      padding:20px;
      border-radius:22px;
      border:1px solid rgba(244,114,182,.23);
      background:
        linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.032));
      position:relative;
      overflow:hidden;
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .channel-card:hover{
      transform:translateY(-5px);
      border-color:rgba(34,211,238,.58);
      box-shadow:0 0 28px rgba(34,211,238,.14);
      color:#fff;
    }
    .channel-card.active-channel{
      border-color:rgba(250,204,21,.55);
      box-shadow:0 0 30px rgba(250,204,21,.12);
    }
    .channel-card i{font-size:1.6rem;color:var(--cyan);margin-bottom:16px}
    .channel-card h3{font-size:1.08rem;line-height:1.2;margin:0 0 8px;font-weight:950}
    .channel-card p{font-size:.92rem;color:#dcbcff;margin:0}
    .service-layout{
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:30px;
      align-items:start;
    }
    .provider-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:16px;
    }
    .game-card{
      border-radius:24px;
      overflow:hidden;
      border:1px solid rgba(34,211,238,.25);
      background:rgba(255,255,255,.055);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      min-height:265px;
    }
    .game-card:hover{
      transform:translateY(-7px) scale(1.015);
      border-color:rgba(236,72,153,.56);
      box-shadow:0 0 34px rgba(236,72,153,.18), 0 20px 58px rgba(0,0,0,.32);
    }
    .game-art{height:142px;position:relative;overflow:hidden}
    .game-art img{width:100%;height:100%;object-fit:cover;filter:saturate(1.16) contrast(1.06)}
    .game-art .badge{position:absolute;top:12px;left:12px}
    .game-body{padding:18px}
    .game-body h3{font-size:1.1rem;margin:0 0 8px;font-weight:950}
    .game-body p{margin:0;color:#dec1ff;font-size:.94rem}
    .comparison-wrap{
      display:grid;
      grid-template-columns:.88fr 1.12fr;
      gap:28px;
      align-items:center;
    }
    .compare-table{
      border:1px solid rgba(244,114,182,.22);
      border-radius:var(--radius-xl);
      overflow:hidden;
      background:rgba(255,255,255,.045);
      box-shadow:0 22px 72px rgba(0,0,0,.24);
    }
    .compare-row{
      display:grid;
      grid-template-columns:1.1fr .9fr .9fr;
      gap:0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .compare-row:last-child{border-bottom:0}
    .compare-row div{padding:16px 18px}
    .compare-row.header{
      background:linear-gradient(135deg, rgba(236,72,153,.22), rgba(34,211,238,.13));
      font-weight:950;
      color:#fff;
    }
    .compare-row div:not(:first-child){border-left:1px solid rgba(255,255,255,.08)}
    .positive{color:#a7f3d0;font-weight:900}
    .neutral{color:#fde68a;font-weight:900}
    .timeline-layout{
      display:grid;
      grid-template-columns:1fr 1.25fr;
      gap:32px;
      align-items:start;
    }
    .timeline-card{
      border-radius:var(--radius-xl);
      overflow:hidden;
      border:1px solid rgba(244,114,182,.22);
      box-shadow:0 22px 72px rgba(0,0,0,.26);
    }
    .timeline-card img{width:100%;height:420px;object-fit:cover}
    .milestones{display:grid;gap:14px}
    .milestone{
      display:grid;
      grid-template-columns:58px 1fr;
      gap:16px;
      padding:18px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.045);
    }
    .mile-index{
      width:54px;height:54px;border-radius:18px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, rgba(236,72,153,.9), rgba(34,211,238,.75));
      font-weight:1000;
      box-shadow:var(--shadow-neon);
    }
    .milestone h3{margin:0 0 6px;font-size:1.05rem;font-weight:950}
    .milestone p{margin:0;color:#dcbcff;font-size:.95rem}
    .news-head{
      display:flex;
      justify-content:space-between;
      gap:20px;
      align-items:end;
      margin-bottom:28px;
    }
    .news-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:18px;
    }
    .post-card{
      display:flex;
      flex-direction:column;
      min-height:245px;
      padding:22px;
      border-radius:24px;
      background:rgba(255,255,255,.052);
      border:1px solid rgba(244,114,182,.22);
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .post-card:hover{
      transform:translateY(-6px);
      border-color:rgba(34,211,238,.5);
      box-shadow:0 0 28px rgba(34,211,238,.13);
      color:#fff;
    }
    .post-card .meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:16px;
      color:#ffe1fb;
      font-size:.82rem;
      font-weight:800;
    }
    .post-card h3{font-size:1.18rem;line-height:1.28;margin:0 0 10px;font-weight:950}
    .post-card p{margin:0;color:#dcbcff;font-size:.95rem}
    .post-card .read{
      margin-top:auto;
      padding-top:18px;
      color:#bff6ff;
      font-weight:900;
    }
    .empty-state{
      grid-column:1/-1;
      padding:26px;
      border:1px dashed rgba(34,211,238,.36);
      border-radius:22px;
      color:#f4dbff;
      background:rgba(34,211,238,.06);
    }
    .guard-layout{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:28px;
      align-items:start;
    }
    .guard-badges{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:14px;
    }
    .guard-item{
      padding:18px;
      border-radius:22px;
      border:1px solid rgba(34,211,238,.25);
      background:rgba(255,255,255,.05);
    }
    .guard-item i{font-size:1.45rem;color:var(--yellow);margin-bottom:14px}
    .guard-item h3{margin:0 0 8px;font-weight:950;font-size:1.05rem}
    .guard-item p{margin:0;color:#dcbcff;font-size:.94rem}
    .quick-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
      margin-top:26px;
    }
    .quick-item{
      padding:20px;
      min-height:170px;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(48,16,93,.7), rgba(255,255,255,.045));
      border:1px solid rgba(244,114,182,.22);
    }
    .quick-item strong{display:block;font-size:1rem;line-height:1.25;margin-bottom:10px}
    .quick-item span{display:block;color:#dcbcff;font-size:.94rem}
    .faq-layout{
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:34px;
      align-items:start;
    }
    .faq-list{display:grid;gap:14px}
    .faq-item{
      border:1px solid rgba(244,114,182,.22);
      background:rgba(255,255,255,.05);
      border-radius:22px;
      overflow:hidden;
    }
    .faq-item summary{
      list-style:none;
      padding:18px 20px;
      font-weight:950;
      color:#fff;
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      gap:16px;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{
      content:"+";
      color:var(--cyan);
      font-size:1.3rem;
      line-height:1;
    }
    .faq-item[open] summary:after{content:"−"}
    .faq-item p{padding:0 20px 20px;margin:0;color:#dcbcff}
    .conversion{
      padding:38px;
      border-radius:34px;
      background:
        linear-gradient(135deg, rgba(236,72,153,.22), rgba(34,211,238,.12)),
        rgba(255,255,255,.055);
      border:1px solid rgba(244,114,182,.28);
      box-shadow:var(--shadow);
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:30px;
      align-items:center;
    }
    .conversion-form{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    .conversion-form .full{grid-column:1/-1}
    .form-note{
      grid-column:1/-1;
      color:#ffd6ef;
      font-size:.9rem;
      margin:0;
    }
    .site-footer{
      padding:64px 0 28px;
      background:linear-gradient(180deg, rgba(9,1,22,.45), rgba(6,0,15,.96));
      border-top:1px solid rgba(244,114,182,.18);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.35fr .75fr .9fr;
      gap:34px;
      align-items:start;
    }
    .footer-brand{
      font-size:1.08rem;
      line-height:1.2;
      font-weight:1000;
      letter-spacing:-.03em;
      margin-bottom:14px;
      color:#fff;
    }
    .site-footer p{color:#d5b8ef;margin:0}
    .site-footer h3{font-size:1rem;margin:0 0 14px;font-weight:950;color:#fff}
    .footer-links{display:grid;gap:10px}
    .footer-links a{color:#e7ccff;font-weight:780}
    .footer-links a:hover{color:var(--cyan)}
    .license-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:18px;
    }
    .license-row span{
      border:1px solid rgba(250,204,21,.34);
      color:#fff2b8;
      background:rgba(250,204,21,.08);
      border-radius:999px;
      padding:6px 10px;
      font-size:.8rem;
      font-weight:850;
    }
    .copyright{
      margin-top:38px;
      padding-top:22px;
      border-top:1px solid rgba(255,255,255,.08);
      display:flex;
      justify-content:space-between;
      gap:18px;
      color:#bda2d8;
      font-size:.88rem;
    }
    .fab{
      position:fixed;
      left:16px;
      bottom:96px;
      z-index:50;
      width:64px;
      height:56px;
      border-radius:22px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg, rgba(18,3,36,.86), rgba(28,7,56,.82)) padding-box,
                 linear-gradient(135deg, var(--pink), var(--cyan), var(--yellow)) border-box;
      border:2px solid transparent;
      box-shadow:0 0 20px rgba(34,211,238,.45), 0 12px 32px rgba(0,0,0,.38);
      opacity:.78;
      transition:transform .22s ease, opacity .22s ease, box-shadow .22s ease;
      animation:fabspark 2.4s infinite ease-in-out;
    }
    .fab:hover{opacity:1;transform:translateY(-4px) scale(1.06);color:#fff;box-shadow:0 0 34px rgba(236,72,153,.5),0 0 24px rgba(34,211,238,.45)}
    .fab:active{transform:translateY(1px) scale(.96)}
    .fab i{font-size:1.35rem;text-shadow:0 0 12px rgba(34,211,238,.9)}
    .fab .notify{
      position:absolute;
      top:-5px;
      right:-5px;
      width:16px;height:16px;
      border-radius:50%;
      background:var(--pink);
      box-shadow:0 0 14px rgba(236,72,153,.9);
      border:2px solid #fff;
    }
    @keyframes fabspark{
      0%,100%{filter:hue-rotate(0deg);transform:translateY(0)}
      50%{filter:hue-rotate(35deg);transform:translateY(-3px)}
    }
    @media (max-width:1100px){
      .desktop-nav{display:none}
      .menu-toggle{display:flex}
      .mobile-panel.open{display:block}
      .brand-text{max-width:290px}
      .hero-grid,.metrics-board,.service-layout,.comparison-wrap,.timeline-layout,.guard-layout,.faq-layout,.conversion{grid-template-columns:1fr}
      .quick-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
    }
    @media (max-width:768px){
      :root{--nav-h:72px}
      .container{width:min(100% - 24px, var(--container))}
      .section{padding:62px 0}
      .site-header{height:var(--nav-h)}
      .nav-wrap{gap:8px}
      .brand-mark{width:38px;height:38px;border-radius:13px}
      .brand-text{max-width:180px;font-size:.82rem}
      .nav-actions{gap:6px}
      .nav-actions .btn{padding:9px 11px;font-size:.78rem;min-height:38px}
      .nav-actions .btn-text{display:inline-flex}
      .menu-toggle{width:38px;height:38px}
      .category-hero{padding:calc(var(--nav-h) + 42px) 0 58px;min-height:auto}
      .hero-grid{gap:26px}
      .hero-copy h1{font-size:clamp(2.05rem, 12vw, 3.25rem)}
      .hero-points,.metric-grid,.channel-matrix,.provider-grid,.guard-badges,.news-grid{grid-template-columns:1fr}
      .countdown{grid-template-columns:repeat(3,1fr)}
      .time-ring b{font-size:1.35rem}
      .compare-row{grid-template-columns:1fr}
      .compare-row div:not(:first-child){border-left:0;border-top:1px solid rgba(255,255,255,.08)}
      .timeline-card img{height:280px}
      .conversion{padding:24px;border-radius:26px}
      .conversion-form{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .copyright{flex-direction:column}
    }
    @media (max-width:520px){
      .hero-actions{align-items:stretch}
      .hero-actions .btn{width:100%}
      .countdown{gap:8px}
      .time-ring span{font-size:.68rem}
      .quick-grid{grid-template-columns:1fr}
      .news-head{display:block}
      .news-head .btn{margin-top:16px}
      .fab{left:12px;bottom:88px;width:58px;height:52px}
    }

/* roulang page: category4 */
:root{
      --bg:#120324;
      --bg-2:#1C0738;
      --panel:#241047;
      --panel-2:#30105d;
      --text:#ffffff;
      --muted:#d9b6ff;
      --soft:#f472b6;
      --cyan:#22d3ee;
      --pink:#ec4899;
      --yellow:#facc15;
      --green:#22c55e;
      --red:#fb7185;
      --border:rgba(244,114,182,.26);
      --border-cyan:rgba(34,211,238,.32);
      --shadow:0 24px 80px rgba(0,0,0,.42);
      --shadow-neon:0 0 26px rgba(236,72,153,.35),0 0 36px rgba(34,211,238,.18);
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:14px;
      --container:1180px;
      --nav-h:78px;
      --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Helvetica Neue", sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(236,72,153,.24), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(34,211,238,.20), transparent 34%),
        linear-gradient(180deg, var(--bg) 0%, #17042f 34%, #090116 100%);
      line-height:1.62;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:46px 46px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 82%);
    }
    a{color:inherit;text-decoration:none;transition:color .2s ease, opacity .2s ease, transform .2s ease}
    a:hover,a:focus{color:var(--cyan)}
    img{max-width:100%;display:block;height:auto}
    button,input,select,textarea{font-family:inherit}
    button{cursor:pointer}
    input,select,textarea{
      width:100%;
      border:1px solid rgba(244,114,182,.24);
      background:rgba(255,255,255,.06);
      color:#fff;
      border-radius:16px;
      padding:14px 15px;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    input:focus,select:focus,textarea:focus{
      border-color:rgba(34,211,238,.72);
      box-shadow:0 0 0 4px rgba(34,211,238,.12);
      background:rgba(255,255,255,.08);
    }
    label{font-weight:800;color:#f8eaff;margin-bottom:8px;display:block}
    .container{width:min(var(--container), calc(100% - 32px));margin:0 auto}
    .section{padding:84px 0;position:relative}
    .section.tight{padding:56px 0}
    .section.alt{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .section-title{max-width:820px;margin-bottom:34px}
    .section-title.center{text-align:center;margin-left:auto;margin-right:auto}
    .section-title h2{
      font-size:clamp(2rem, 3.5vw, 3.25rem);
      line-height:1.08;
      letter-spacing:-.045em;
      margin:0 0 16px;
      color:#fff;
    }
    .section-title p{margin:0;color:#ead5ff;font-size:1.08rem}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border:1px solid var(--border-cyan);
      border-radius:999px;
      color:#bff6ff;
      background:rgba(34,211,238,.08);
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
      box-shadow:0 0 18px rgba(34,211,238,.12);
      margin-bottom:14px;
    }
    .lead{font-size:clamp(1.04rem, 1.45vw, 1.25rem);color:#f4dbff;max-width:880px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:46px;
      padding:13px 20px;
      border-radius:999px;
      font-weight:850;
      font-size:.96rem;
      border:1px solid transparent;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(1px) scale(.98)}
    .btn-primary{
      color:#16051f;
      background:linear-gradient(135deg, var(--pink), var(--yellow));
      box-shadow:0 0 22px rgba(236,72,153,.42),0 8px 22px rgba(250,204,21,.18);
    }
    .btn-primary:hover{color:#16051f;box-shadow:0 0 35px rgba(236,72,153,.55),0 12px 28px rgba(250,204,21,.25)}
    .btn-secondary{
      color:#fff;
      border-color:rgba(34,211,238,.45);
      background:rgba(34,211,238,.08);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .btn-secondary:hover{background:rgba(34,211,238,.16);color:#fff}
    .btn-text{
      color:#fdf2ff;
      border:1px solid rgba(244,114,182,.38);
      background:rgba(255,255,255,.03);
    }
    .btn-text:hover{color:#fff;border-color:rgba(34,211,238,.6)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.8rem;
      font-weight:850;
      color:#fff;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
    }
    .badge.hot{background:rgba(236,72,153,.16);border-color:rgba(236,72,153,.42);color:#ffd8ef}
    .badge.safe{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.38);color:#c9f7ff}
    .badge.gold{background:rgba(250,204,21,.12);border-color:rgba(250,204,21,.42);color:#fff0a8}

    .site-header{
      position:fixed;
      top:0;left:0;right:0;
      z-index:1000;
      height:var(--nav-h);
      background:rgba(18,3,36,.78);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(244,114,182,.18);
      box-shadow:0 14px 50px rgba(0,0,0,.24);
    }
    .nav-wrap{
      height:var(--nav-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      position:relative;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      font-weight:950;
      letter-spacing:-.03em;
      color:#fff;
    }
    .brand-mark{
      width:42px;height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(236,72,153,.95), rgba(34,211,238,.95));
      box-shadow:var(--shadow-neon);
      flex:0 0 auto;
    }
    .brand-text{
      max-width:350px;
      line-height:1.05;
      font-size:.98rem;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:4px;
      flex:1;
      justify-content:center;
      min-width:0;
    }
    .desktop-nav a{
      padding:10px 12px;
      border-radius:999px;
      color:#ead5ff;
      font-weight:780;
      font-size:.91rem;
      white-space:nowrap;
    }
    .desktop-nav a:hover,.desktop-nav a.active{
      color:#fff;
      background:rgba(255,255,255,.08);
      box-shadow:inset 0 0 0 1px rgba(244,114,182,.14);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
    }
    .nav-actions .btn{min-height:40px;padding:10px 15px;font-size:.88rem}
    .menu-toggle{
      display:none;
      width:42px;height:42px;
      border-radius:13px;
      border:1px solid rgba(244,114,182,.32);
      color:#fff;
      background:rgba(255,255,255,.05);
    }
    .mobile-panel{
      display:none;
      position:absolute;
      top:calc(var(--nav-h) - 4px);
      right:0;
      width:min(360px, calc(100vw - 32px));
      padding:14px;
      border:1px solid rgba(244,114,182,.24);
      border-radius:0 0 22px 22px;
      background:rgba(24,5,48,.96);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
    }
    .mobile-panel a{
      display:block;
      padding:13px 14px;
      border-radius:14px;
      color:#f7e8ff;
      font-weight:800;
    }
    .mobile-panel a:hover,.mobile-panel a.active{background:rgba(255,255,255,.08);color:#fff}

    main{padding-top:var(--nav-h)}
    .hero{
      position:relative;
      min-height:720px;
      display:flex;
      align-items:center;
      overflow:hidden;
      background:
        linear-gradient(90deg, rgba(18,3,36,.92), rgba(28,7,56,.74) 52%, rgba(18,3,36,.92)),
        url('/assets/images/d37d682e068bc58c.jpg') center/cover no-repeat;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .hero:after{
      content:"";
      position:absolute;
      inset:auto -10% -1px -10%;
      height:150px;
      background:linear-gradient(0deg, #120324, transparent);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:minmax(0, 1.08fr) minmax(340px, .92fr);
      gap:42px;
      align-items:center;
      padding:72px 0;
    }
    .hero h1{
      font-size:clamp(2.45rem, 5.4vw, 5.85rem);
      line-height:.98;
      letter-spacing:-.07em;
      margin:0 0 22px;
      text-wrap:balance;
    }
    .hero h1 span{
      background:linear-gradient(135deg, #fff, #f472b6 48%, #22d3ee 72%, #facc15);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
    .hero-points{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
      margin-top:28px;
      max-width:760px;
    }
    .point{
      padding:14px;
      border:1px solid rgba(255,255,255,.1);
      border-radius:18px;
      background:rgba(255,255,255,.055);
    }
    .point strong{display:block;color:#fff;font-size:.96rem}
    .point span{color:#e7caff;font-size:.86rem}
    .launch-card{
      position:relative;
      padding:24px;
      border-radius:var(--radius-xl);
      background:linear-gradient(145deg, rgba(36,16,71,.88), rgba(48,16,93,.72));
      border:1px solid rgba(244,114,182,.3);
      box-shadow:var(--shadow), var(--shadow-neon);
      overflow:hidden;
    }
    .launch-card:before{
      content:"";
      position:absolute;
      width:210px;height:210px;
      right:-80px;top:-70px;
      background:radial-gradient(circle, rgba(34,211,238,.36), transparent 66%);
    }
    .countdown-shell{
      display:grid;
      grid-template-columns:150px 1fr;
      gap:18px;
      align-items:center;
      position:relative;
      z-index:1;
    }
    .count-ring{
      width:150px;height:150px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:
        radial-gradient(circle at center, rgba(18,3,36,.98) 0 55%, transparent 56%),
        conic-gradient(from -90deg, var(--pink) 0 74%, rgba(255,255,255,.12) 74% 100%);
      box-shadow:0 0 35px rgba(236,72,153,.32), inset 0 0 22px rgba(34,211,238,.16);
    }
    .count-ring strong{font-size:1.55rem;line-height:1;color:#fff}
    .count-ring small{display:block;text-align:center;color:#facc15;font-weight:900;font-size:.7rem;margin-top:5px}
    .launch-card h2{font-size:1.65rem;line-height:1.18;margin:0 0 10px}
    .launch-card p{color:#ead5ff;margin:0}
    .release-list{margin:22px 0 0;padding:0;list-style:none;position:relative;z-index:1}
    .release-list li{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:14px 0;
      border-top:1px solid rgba(255,255,255,.09);
      color:#f6e8ff;
    }
    .release-list i{color:var(--cyan);margin-top:4px}
    .mini-kpi{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      margin-top:22px;
      position:relative;
      z-index:1;
    }
    .mini-kpi div{
      padding:13px 10px;
      border-radius:16px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.09);
    }
    .mini-kpi strong{display:block;color:#fff;font-size:1.1rem}
    .mini-kpi span{font-size:.76rem;color:#d9b6ff}

    .metric-board{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:22px;
      align-items:stretch;
    }
    .metric-primary{
      padding:30px;
      border-radius:var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(236,72,153,.16), rgba(34,211,238,.10)),
        rgba(255,255,255,.05);
      border:1px solid rgba(244,114,182,.24);
      box-shadow:var(--shadow);
      min-height:100%;
    }
    .metric-primary h2{
      font-size:clamp(2rem,4vw,4.15rem);
      line-height:1;
      letter-spacing:-.06em;
      margin:0 0 16px;
    }
    .metric-primary p{color:#ead5ff;max-width:650px;margin:0}
    .metric-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    .metric-tile{
      padding:20px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.055);
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    }
    .metric-tile:hover{
      transform:translateY(-4px);
      border-color:rgba(34,211,238,.38);
      box-shadow:0 0 24px rgba(34,211,238,.12);
    }
    .metric-tile i{color:var(--cyan);font-size:1.25rem;margin-bottom:12px}
    .metric-tile strong{display:block;font-size:1.55rem;line-height:1;color:#fff}
    .metric-tile span{color:#d9b6ff;font-size:.91rem}

    .matrix-layout{
      display:grid;
      grid-template-columns:.78fr 1.22fr;
      gap:34px;
      align-items:start;
    }
    .service-list{
      display:grid;
      gap:16px;
    }
    .service-card{
      display:grid;
      grid-template-columns:54px 1fr;
      gap:16px;
      padding:20px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.1);
      background:linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.032));
      transition:transform .22s ease,border-color .22s ease,background .22s ease;
    }
    .service-card:hover{
      transform:translateX(6px);
      border-color:rgba(244,114,182,.4);
      background:linear-gradient(145deg, rgba(236,72,153,.11), rgba(34,211,238,.055));
    }
    .service-icon{
      width:54px;height:54px;border-radius:18px;
      display:grid;place-items:center;
      background:linear-gradient(135deg, rgba(236,72,153,.88), rgba(34,211,238,.76));
      box-shadow:0 0 22px rgba(236,72,153,.22);
    }
    .service-card h3{margin:0 0 6px;font-size:1.14rem;color:#fff}
    .service-card p{margin:0;color:#dac2ff}
    .visual-card{
      border-radius:var(--radius-xl);
      overflow:hidden;
      border:1px solid rgba(34,211,238,.26);
      background:rgba(255,255,255,.05);
      box-shadow:var(--shadow);
    }
    .visual-card img{width:100%;height:330px;object-fit:cover}
    .visual-card .caption{padding:22px}
    .caption h3{font-size:1.5rem;margin:0 0 8px}
    .caption p{margin:0;color:#ead5ff}

    .compare-wrap{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:22px;
      align-items:stretch;
    }
    .compare-card{
      padding:26px;
      border-radius:var(--radius-xl);
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.05);
    }
    .compare-card.highlight{
      border-color:rgba(34,211,238,.34);
      background:linear-gradient(135deg, rgba(34,211,238,.11), rgba(236,72,153,.09));
      box-shadow:0 0 28px rgba(34,211,238,.14);
    }
    .compare-card h3{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:1.45rem}
    .check-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
    .check-list li{display:flex;gap:11px;color:#ead5ff}
    .check-list i{margin-top:5px;color:var(--green)}
    .compare-card:not(.highlight) .check-list i{color:var(--red)}

    .timeline{
      position:relative;
      display:grid;
      gap:18px;
      margin-top:26px;
    }
    .timeline:before{
      content:"";
      position:absolute;
      left:25px;top:12px;bottom:12px;
      width:2px;
      background:linear-gradient(var(--pink), var(--cyan));
      opacity:.55;
    }
    .mile{
      position:relative;
      display:grid;
      grid-template-columns:52px 1fr auto;
      gap:16px;
      align-items:center;
      padding:18px 20px;
      border:1px solid rgba(255,255,255,.1);
      border-radius:22px;
      background:rgba(255,255,255,.05);
    }
    .mile-num{
      width:52px;height:52px;border-radius:17px;
      display:grid;place-items:center;
      font-weight:950;
      color:#190423;
      background:linear-gradient(135deg,var(--pink),var(--yellow));
      z-index:1;
    }
    .mile h3{font-size:1.12rem;margin:0 0 5px}
    .mile p{margin:0;color:#d9b6ff}
    .mile .tag{color:#facc15;font-weight:900}

    .content-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:20px;
      margin-bottom:28px;
    }
    .content-list{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }
    .post-card{
      min-height:230px;
      display:flex;
      flex-direction:column;
      padding:22px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.1);
      background:linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.032));
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    }
    .post-card:hover{
      transform:translateY(-5px);
      border-color:rgba(34,211,238,.4);
      box-shadow:0 0 28px rgba(34,211,238,.13);
      color:#fff;
    }
    .post-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
    .post-card h3{font-size:1.2rem;line-height:1.28;margin:0 0 12px}
    .post-card p{color:#dac2ff;margin:0 0 18px}
    .post-card .read-more{margin-top:auto;color:#bff6ff;font-weight:900}
    .empty-state{
      padding:28px;
      border-radius:22px;
      border:1px dashed rgba(244,114,182,.34);
      color:#ead5ff;
      background:rgba(255,255,255,.04);
    }

    .assurance-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
    }
    .assurance{
      padding:22px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.052);
    }
    .assurance i{font-size:1.45rem;color:var(--yellow);margin-bottom:12px}
    .assurance h3{font-size:1.1rem;margin:0 0 8px}
    .assurance p{margin:0;color:#dbc6ff;font-size:.95rem}

    .quick-grid{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:18px;
    }
    .quick-box{
      padding:24px;
      border-radius:24px;
      border:1px solid rgba(244,114,182,.18);
      background:linear-gradient(145deg, rgba(48,16,93,.66), rgba(36,16,71,.44));
    }
    .quick-box strong{
      display:inline-flex;
      margin-bottom:12px;
      color:#22d3ee;
      font-size:.92rem;
    }
    .quick-box h3{font-size:1.22rem;margin:0 0 8px}
    .quick-box p{margin:0;color:#ead5ff}

    .faq-wrap{
      display:grid;
      grid-template-columns:.72fr 1.28fr;
      gap:34px;
      align-items:start;
    }
    .faq-list{display:grid;gap:14px}
    .faq-item{
      border:1px solid rgba(255,255,255,.1);
      border-radius:22px;
      background:rgba(255,255,255,.05);
      overflow:hidden;
    }
    .faq-q{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:20px 22px;
      border:0;
      background:transparent;
      color:#fff;
      text-align:left;
      font-weight:900;
      font-size:1rem;
    }
    .faq-q i{color:var(--cyan);transition:transform .2s ease}
    .faq-a{
      display:none;
      padding:0 22px 20px;
      color:#dac2ff;
    }
    .faq-item.open .faq-a{display:block}
    .faq-item.open .faq-q i{transform:rotate(180deg)}

    .conversion{
      padding:34px;
      border-radius:var(--radius-xl);
      border:1px solid rgba(244,114,182,.32);
      background:
        linear-gradient(135deg, rgba(236,72,153,.16), rgba(34,211,238,.12)),
        rgba(255,255,255,.055);
      box-shadow:var(--shadow);
    }
    .conversion-grid{
      display:grid;
      grid-template-columns:.88fr 1.12fr;
      gap:30px;
      align-items:start;
    }
    .form-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }
    .form-grid .full{grid-column:1/-1}
    .form-note{
      margin-top:14px;
      color:#d9b6ff;
      font-size:.92rem;
    }

    .fab{
      position:fixed;
      left:1rem;
      bottom:6rem;
      z-index:50;
      width:62px;
      height:62px;
      border-radius:20px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg, rgba(7,7,13,.88), rgba(28,7,56,.86)) padding-box,
                 linear-gradient(135deg, var(--pink), var(--cyan), var(--yellow)) border-box;
      border:2px solid transparent;
      box-shadow:0 0 20px rgba(236,72,153,.42), 0 0 26px rgba(34,211,238,.22);
      opacity:.86;
      transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease;
      animation:floating 3.4s ease-in-out infinite;
    }
    .fab:hover{
      opacity:1;
      transform:scale(1.1);
      color:#fff;
      box-shadow:0 0 30px rgba(236,72,153,.56), 0 0 42px rgba(34,211,238,.34);
    }
    .fab:active{transform:scale(.95) translateY(4px)}
    .fab i{font-size:1.35rem;text-shadow:0 0 12px rgba(34,211,238,.9)}
    .fab .dot{
      position:absolute;
      top:8px;right:8px;
      width:12px;height:12px;
      border-radius:50%;
      background:#facc15;
      box-shadow:0 0 0 4px rgba(250,204,21,.16),0 0 12px rgba(250,204,21,.8);
      animation:pulseDot 1.15s ease-in-out infinite;
    }
    @keyframes floating{
      0%,100%{translate:0 0}
      50%{translate:0 -8px}
    }
    @keyframes pulseDot{
      0%,100%{transform:scale(.8)}
      50%{transform:scale(1.2)}
    }

    .site-footer{
      padding:64px 0 28px;
      background:linear-gradient(180deg, rgba(9,1,22,.4), rgba(5,0,12,.96));
      border-top:1px solid rgba(244,114,182,.18);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.25fr .75fr .9fr;
      gap:34px;
      align-items:start;
    }
    .footer-brand{
      font-size:1.15rem;
      font-weight:950;
      line-height:1.25;
      margin-bottom:12px;
      color:#fff;
    }
    .site-footer p{color:#d9b6ff;margin:0}
    .site-footer h3{font-size:1rem;margin:0 0 14px;color:#fff}
    .footer-links{display:grid;gap:10px}
    .footer-links a{color:#ead5ff;font-weight:760}
    .footer-links a:hover{color:#22d3ee}
    .license-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:18px;
    }
    .license-row span{
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.055);
      color:#f6e8ff;
      font-size:.82rem;
      font-weight:850;
    }
    .copyright{
      margin-top:34px;
      padding-top:20px;
      border-top:1px solid rgba(255,255,255,.08);
      display:flex;
      justify-content:space-between;
      gap:20px;
      color:#b99cdb;
      font-size:.88rem;
    }

    @media (max-width:1080px){
      .brand-text{max-width:250px}
      .desktop-nav a{font-size:.86rem;padding:9px 9px}
      .hero-grid,.metric-board,.matrix-layout,.faq-wrap,.conversion-grid{grid-template-columns:1fr}
      .hero{min-height:auto}
      .launch-card{max-width:720px}
      .assurance-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:860px){
      :root{--nav-h:72px}
      .desktop-nav{display:none}
      .menu-toggle{display:grid;place-items:center}
      .mobile-panel.open{display:block}
      .brand-text{max-width:260px;font-size:.9rem}
      .nav-actions .btn-text{display:inline-flex}
      .nav-actions .btn-primary{padding:10px 13px}
      .hero-points,.mini-kpi,.content-list,.quick-grid{grid-template-columns:1fr}
      .compare-wrap,.form-grid{grid-template-columns:1fr}
      .form-grid .full{grid-column:auto}
      .metric-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .copyright{flex-direction:column}
      .content-head{display:block}
      .content-head .btn{margin-top:18px}
    }
    @media (max-width:560px){
      .container{width:min(100% - 24px, var(--container))}
      .section{padding:64px 0}
      .hero-grid{padding:50px 0;gap:28px}
      .hero h1{font-size:2.45rem}
      .lead{font-size:1rem}
      .hero-actions{flex-direction:column}
      .hero-actions .btn{width:100%}
      .countdown-shell{grid-template-columns:1fr;text-align:left}
      .count-ring{width:132px;height:132px}
      .brand-mark{width:38px;height:38px;border-radius:13px}
      .brand-text{max-width:168px;font-size:.82rem}
      .nav-actions{gap:6px}
      .nav-actions .btn{font-size:.78rem;min-height:38px;padding:9px 10px}
      .menu-toggle{width:38px;height:38px}
      .assurance-grid{grid-template-columns:1fr}
      .mile{grid-template-columns:52px 1fr}
      .mile .tag{grid-column:2}
      .conversion{padding:24px}
      .fab{width:56px;height:56px;bottom:5.4rem}
    }