/* roulang page: index */
:root{
      --bg:#100b18;
      --bg-2:#171126;
      --surface:#21172f;
      --surface-2:#2a1d3d;
      --card:#241932;
      --card-soft:#2c2040;
      --primary:#ff4d7d;
      --primary-2:#ff7a45;
      --secondary:#8d5cff;
      --accent:#28e6c7;
      --warning:#ffd166;
      --text:#fff8fb;
      --muted:#b8aeca;
      --muted-2:#8d819d;
      --line:rgba(255,255,255,.12);
      --line-strong:rgba(255,255,255,.2);
      --shadow:0 24px 70px rgba(0,0,0,.34);
      --shadow-soft:0 16px 42px rgba(0,0,0,.22);
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --container:1180px;
      --nav-h:76px;
      --ease:all .24s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 8% 0%, rgba(255,77,125,.26), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(141,92,255,.22), transparent 34%),
        radial-gradient(circle at 50% 92%, rgba(40,230,199,.10), transparent 36%),
        var(--bg);
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover{color:var(--primary)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    ::selection{background:rgba(255,77,125,.35);color:#fff}
    :focus-visible{outline:3px solid rgba(40,230,199,.55);outline-offset:3px;border-radius:10px}

    .container-narrow{
      width:min(100% - 32px, var(--container));
      margin-inline:auto;
    }
    .section{
      padding:86px 0;
      position:relative;
    }
    .section-tight{padding:64px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:999px;
      color:#ffe1eb;
      background:rgba(255,255,255,.06);
      font-size:14px;
      letter-spacing:.02em;
    }
    .eyebrow i{color:var(--accent)}
    .section-title{
      margin:16px 0 12px;
      font-size:clamp(28px,4vw,46px);
      line-height:1.15;
      letter-spacing:-.04em;
      font-weight:850;
    }
    .section-desc{
      color:var(--muted);
      max-width:760px;
      font-size:17px;
      margin:0;
    }
    .text-gradient{
      background:linear-gradient(100deg,#fff 0%,#ffd4df 36%,#ffc19b 74%,#adfff2 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      height:var(--nav-h);
      border-bottom:1px solid rgba(255,255,255,.1);
      background:rgba(16,11,24,.76);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }
    .navbar-custom{
      min-height:var(--nav-h);
      padding:0;
    }
    .brand-logo{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:900;
      letter-spacing:-.04em;
      color:#fff;
      font-size:20px;
      white-space:nowrap;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:
        linear-gradient(135deg,rgba(255,77,125,.95),rgba(141,92,255,.9)),
        radial-gradient(circle at 70% 30%,rgba(255,255,255,.4),transparent 26%);
      box-shadow:0 12px 26px rgba(255,77,125,.24);
      color:#fff;
    }
    .navbar-toggler{
      border:1px solid rgba(255,255,255,.16);
      border-radius:14px;
      padding:8px 10px;
      color:#fff;
      background:rgba(255,255,255,.06);
    }
    .navbar-toggler:focus{box-shadow:0 0 0 4px rgba(255,77,125,.18)}
    .nav-menu{
      gap:10px;
      align-items:center;
    }
    .nav-link-custom{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px!important;
      border-radius:999px;
      color:var(--muted)!important;
      font-weight:700;
      font-size:15px;
    }
    .nav-link-custom:hover,
    .nav-link-custom.active{
      color:#fff!important;
      background:rgba(255,255,255,.08);
    }
    .header-search{
      position:relative;
      width:250px;
      margin-left:10px;
    }
    .header-search input{
      width:100%;
      height:42px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:999px;
      padding:0 44px 0 16px;
      color:#fff;
      background:rgba(255,255,255,.07);
      outline:none;
      transition:var(--ease);
    }
    .header-search input::placeholder{color:rgba(255,255,255,.48)}
    .header-search input:focus{
      border-color:rgba(40,230,199,.55);
      background:rgba(255,255,255,.1);
    }
    .header-search button{
      position:absolute;
      right:4px;
      top:4px;
      width:34px;
      height:34px;
      border:0;
      border-radius:50%;
      color:#180f22;
      background:var(--accent);
      display:grid;
      place-items:center;
      transition:var(--ease);
    }
    .header-search button:hover{transform:scale(1.04);background:#78ffe9}
    .nav-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:42px;
      padding:0 18px;
      border-radius:999px;
      color:#fff;
      font-weight:800;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      box-shadow:0 14px 30px rgba(255,77,125,.24);
      border:1px solid rgba(255,255,255,.12);
      white-space:nowrap;
    }
    .nav-cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 38px rgba(255,77,125,.34)}

    .hero{
      padding:54px 0 74px;
      min-height:calc(100vh - var(--nav-h));
      display:flex;
      align-items:center;
    }
    .promo-stage{
      position:relative;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
      border-radius:36px;
      background:
        linear-gradient(135deg,rgba(255,77,125,.22),rgba(141,92,255,.16) 40%,rgba(40,230,199,.08)),
        rgba(255,255,255,.055);
      box-shadow:var(--shadow);
      padding:clamp(28px,5vw,58px);
      isolation:isolate;
    }
    .promo-stage:before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(circle at 18% 20%,rgba(255,77,125,.44),transparent 25%),
        radial-gradient(circle at 80% 28%,rgba(255,122,69,.32),transparent 23%),
        radial-gradient(circle at 66% 86%,rgba(40,230,199,.18),transparent 28%);
      z-index:-2;
    }
    .promo-stage:after{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.05) 1px, transparent 1px);
      background-size:36px 36px;
      mask-image:linear-gradient(90deg,rgba(0,0,0,.75),transparent 72%);
      z-index:-1;
    }
    .promo-grid{
      display:grid;
      grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
      gap:34px;
      align-items:stretch;
    }
    .hero-copy{position:relative;z-index:2}
    .sale-strip{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-bottom:22px;
    }
    .sale-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 13px;
      border-radius:999px;
      color:#281116;
      background:linear-gradient(135deg,#fff0a8,#ffd166);
      font-size:14px;
      font-weight:900;
      box-shadow:0 12px 26px rgba(255,209,102,.22);
    }
    .time-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 13px;
      border-radius:999px;
      color:#fff;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.14);
      font-size:14px;
      font-weight:700;
    }
    h1{
      margin:0;
      font-size:clamp(40px,7vw,78px);
      line-height:.98;
      letter-spacing:-.075em;
      font-weight:950;
      max-width:820px;
    }
    .hero-lead{
      color:#eadfec;
      margin:24px 0 0;
      max-width:760px;
      font-size:clamp(17px,2vw,20px);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-top:32px;
    }
    .btn-main,.btn-ghost,.btn-lightline{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:52px;
      padding:0 22px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:900;
      transition:var(--ease);
      cursor:pointer;
    }
    .btn-main{
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      box-shadow:0 18px 40px rgba(255,77,125,.31);
    }
    .btn-main:hover{color:#fff;transform:translateY(-3px);box-shadow:0 24px 52px rgba(255,77,125,.4)}
    .btn-ghost{
      color:#fff;
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.14);
    }
    .btn-ghost:hover{color:#fff;background:rgba(255,255,255,.14);transform:translateY(-3px)}
    .btn-lightline{
      color:#201427;
      background:#fff;
      border-color:rgba(255,255,255,.6);
    }
    .btn-lightline:hover{color:#201427;transform:translateY(-3px);box-shadow:0 18px 38px rgba(255,255,255,.16)}
    .hero-stats{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      margin-top:34px;
      max-width:720px;
    }
    .stat-pill{
      padding:16px;
      border:1px solid rgba(255,255,255,.13);
      border-radius:18px;
      background:rgba(255,255,255,.07);
    }
    .stat-pill strong{
      display:block;
      font-size:25px;
      line-height:1.1;
      color:#fff;
      letter-spacing:-.04em;
    }
    .stat-pill span{display:block;margin-top:5px;color:var(--muted);font-size:13px}
    .burst{
      position:absolute;
      right:clamp(18px,4vw,44px);
      top:clamp(18px,4vw,38px);
      width:116px;
      height:116px;
      display:grid;
      place-items:center;
      text-align:center;
      color:#2b1200;
      font-weight:950;
      line-height:1.1;
      background:#ffd166;
      clip-path:polygon(50% 0%,60% 22%,82% 12%,78% 36%,100% 44%,78% 56%,92% 78%,66% 74%,50% 100%,38% 76%,14% 88%,22% 62%,0% 50%,22% 38%,10% 14%,36% 24%);
      transform:rotate(10deg);
      box-shadow:0 18px 40px rgba(255,209,102,.24);
      z-index:5;
      font-size:15px;
    }
    .visual-board{
      position:relative;
      min-height:430px;
      border-radius:30px;
      background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
      border:1px solid rgba(255,255,255,.14);
      padding:20px;
      overflow:hidden;
    }
    .visual-board:before{
      content:"";
      position:absolute;
      width:300px;
      height:300px;
      right:-96px;
      top:-80px;
      background:radial-gradient(circle,rgba(255,77,125,.52),transparent 67%);
    }
    .access-card{
      position:relative;
      background:rgba(16,11,24,.68);
      border:1px solid rgba(255,255,255,.14);
      border-radius:24px;
      padding:22px;
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(14px);
    }
    .access-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;
      margin-bottom:18px;
    }
    .access-title{font-size:18px;font-weight:900}
    .status-dot{
      display:inline-flex;
      align-items:center;
      gap:7px;
      color:#bafff4;
      font-size:13px;
      font-weight:800;
    }
    .status-dot:before{
      content:"";
      width:9px;height:9px;border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 6px rgba(40,230,199,.12);
    }
    .region-matrix{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .region-item{
      min-height:94px;
      border-radius:18px;
      padding:16px;
      background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.055));
      border:1px solid rgba(255,255,255,.13);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:var(--ease);
    }
    .region-item:hover{transform:translateY(-4px);background:rgba(255,255,255,.13)}
    .region-item i{color:var(--warning);font-size:20px}
    .region-item b{font-size:15px}
    .board-list{
      margin-top:14px;
      display:grid;
      gap:10px;
    }
    .board-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:13px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.1);
      color:var(--muted);
      font-size:14px;
    }
    .board-row strong{color:#fff}
    .floating-note{
      position:absolute;
      right:18px;
      bottom:18px;
      width:min(310px,calc(100% - 36px));
      padding:16px;
      border-radius:22px;
      background:linear-gradient(135deg,rgba(40,230,199,.17),rgba(141,92,255,.16));
      border:1px solid rgba(40,230,199,.2);
      color:#eafffb;
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(12px);
    }

    .about-wrap{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:28px;
      align-items:stretch;
    }
    .glass-card{
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .about-card{
      padding:34px;
      min-height:100%;
    }
    .about-card p{color:var(--muted);margin:16px 0 0}
    .kpi-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
      height:100%;
    }
    .kpi-card{
      padding:24px;
      border-radius:24px;
      background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
      border:1px solid rgba(255,255,255,.12);
      transition:var(--ease);
    }
    .kpi-card:hover{transform:translateY(-5px);border-color:rgba(255,77,125,.28)}
    .kpi-card strong{
      display:block;
      color:#fff;
      font-size:32px;
      line-height:1;
      letter-spacing:-.04em;
    }
    .kpi-card span{display:block;margin-top:10px;color:var(--muted);font-size:14px}
    .progress-panel{
      margin-top:24px;
      padding:22px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(16,11,24,.35);
    }
    .progress-label{
      display:flex;
      justify-content:space-between;
      gap:15px;
      color:#fff;
      font-weight:850;
      margin-bottom:10px;
    }
    .progress{
      height:13px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      overflow:visible;
    }
    .progress-bar{
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--warning),var(--accent));
      box-shadow:0 0 22px rgba(255,77,125,.32);
    }
    .tier-row{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      margin-top:16px;
    }
    .tier{
      padding:15px;
      border-radius:18px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.1);
    }
    .tier b{display:block;color:#fff}
    .tier span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
    .supporters{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:16px;
    }
    .supporters span{
      display:inline-flex;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      color:#eadff0;
      font-size:13px;
      border:1px solid rgba(255,255,255,.1);
    }

    .news-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 360px;
      gap:24px;
      margin-top:32px;
    }
    .news-list{
      padding:10px;
      border-radius:var(--radius-xl);
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.12);
    }
    .news-item{
      display:grid;
      grid-template-columns:120px 1fr auto;
      gap:18px;
      align-items:center;
      padding:18px;
      border-radius:22px;
      border:1px solid transparent;
      transition:var(--ease);
    }
    .news-item + .news-item{border-top:1px solid rgba(255,255,255,.08)}
    .news-item:hover{
      background:rgba(255,255,255,.075);
      border-color:rgba(255,255,255,.12);
      transform:translateX(4px);
    }
    .news-date{
      color:#ffd5df;
      font-weight:900;
      font-size:14px;
      letter-spacing:.02em;
    }
    .news-item h3{
      margin:0 0 6px;
      font-size:18px;
      font-weight:900;
      line-height:1.35;
    }
    .news-item p{
      color:var(--muted);
      margin:0;
      font-size:14px;
      line-height:1.65;
    }
    .news-arrow{
      width:40px;
      height:40px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.08);
      color:#fff;
    }
    .recommend-panel{
      padding:24px;
      border-radius:var(--radius-xl);
      background:linear-gradient(180deg,rgba(255,77,125,.14),rgba(255,255,255,.055));
      border:1px solid rgba(255,255,255,.12);
      position:relative;
      overflow:hidden;
    }
    .recommend-panel:after{
      content:"";
      position:absolute;
      right:-70px;
      bottom:-80px;
      width:210px;
      height:210px;
      background:radial-gradient(circle,rgba(40,230,199,.22),transparent 70%);
    }
    .recommend-panel h3{font-size:22px;font-weight:950;margin:0 0 12px}
    .recommend-panel p{color:var(--muted);margin:0 0 18px}
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      position:relative;
      z-index:2;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:9px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      color:#fff;
      font-size:14px;
      font-weight:750;
    }
    .tag:hover{background:rgba(255,77,125,.15);border-color:rgba(255,77,125,.28);color:#fff;transform:translateY(-2px)}

    .service-shell{
      margin-top:32px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:22px;
      align-items:stretch;
    }
    .service-card{
      padding:28px;
      border-radius:var(--radius-xl);
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      transition:var(--ease);
      min-height:260px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);border-color:rgba(40,230,199,.24)}
    .service-card.featured{
      background:
        linear-gradient(135deg,rgba(255,77,125,.20),rgba(141,92,255,.13)),
        rgba(255,255,255,.065);
    }
    .service-icon{
      width:54px;
      height:54px;
      border-radius:18px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      box-shadow:0 14px 30px rgba(141,92,255,.25);
      margin-bottom:18px;
      font-size:22px;
    }
    .service-card h3{margin:0 0 10px;font-size:24px;font-weight:950}
    .service-card p{margin:0;color:var(--muted)}
    .service-list{
      list-style:none;
      padding:0;
      margin:20px 0 0;
      display:grid;
      gap:10px;
    }
    .service-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#e8deef;
      font-size:15px;
    }
    .service-list i{color:var(--accent);margin-top:5px}

    .security-zone{
      border-radius:36px;
      background:
        linear-gradient(135deg,rgba(40,230,199,.12),rgba(255,77,125,.09)),
        rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.12);
      padding:34px;
      box-shadow:var(--shadow-soft);
    }
    .security-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
      margin-top:28px;
    }
    .security-card{
      padding:22px;
      border-radius:24px;
      background:rgba(16,11,24,.43);
      border:1px solid rgba(255,255,255,.12);
      transition:var(--ease);
    }
    .security-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.075)}
    .security-card i{
      width:46px;height:46px;border-radius:16px;
      display:grid;place-items:center;
      color:#160d20;background:var(--accent);
      margin-bottom:16px;font-size:20px;
    }
    .security-card h3{font-size:18px;font-weight:950;margin:0 0 8px}
    .security-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.65}

    .app-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(320px,450px);
      gap:26px;
      align-items:center;
    }
    .app-panel{
      padding:36px;
      border-radius:36px;
      background:
        linear-gradient(135deg,rgba(141,92,255,.16),rgba(255,77,125,.10)),
        rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.12);
      overflow:hidden;
      position:relative;
    }
    .app-panel:after{
      content:"";
      position:absolute;
      right:-120px;
      top:-120px;
      width:300px;height:300px;
      background:radial-gradient(circle,rgba(255,209,102,.16),transparent 70%);
    }
    .device-card{
      border-radius:34px;
      padding:20px;
      background:#0e0916;
      border:1px solid rgba(255,255,255,.14);
      box-shadow:var(--shadow);
      position:relative;
      z-index:2;
    }
    .device-top{
      height:18px;
      width:84px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      margin:0 auto 18px;
    }
    .device-screen{
      border-radius:26px;
      min-height:350px;
      padding:20px;
      background:
        radial-gradient(circle at 30% 10%,rgba(255,77,125,.3),transparent 36%),
        linear-gradient(180deg,#241730,#15101f);
      border:1px solid rgba(255,255,255,.1);
    }
    .mini-row{
      display:flex;align-items:center;justify-content:space-between;
      padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);
      color:#f8ecff;
    }
    .mini-row span{color:var(--muted);font-size:13px}
    .app-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
    .qr-card{
      padding:18px;
      border-radius:24px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.12);
      margin-top:22px;
      display:flex;
      gap:16px;
      align-items:center;
      max-width:520px;
    }
    .qr{
      width:86px;height:86px;border-radius:18px;
      background:
        linear-gradient(90deg,#fff 8px,transparent 8px) 0 0/16px 16px,
        linear-gradient(#fff 8px,transparent 8px) 0 0/16px 16px,
        #201427;
      border:8px solid #fff;
      flex:0 0 auto;
    }
    .qr-card p{margin:0;color:var(--muted);font-size:14px}

    .faq-wrap{
      display:grid;
      grid-template-columns:360px 1fr;
      gap:28px;
      align-items:start;
    }
    .faq-note{
      position:sticky;
      top:calc(var(--nav-h) + 24px);
      padding:28px;
      border-radius:var(--radius-xl);
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
    }
    .faq-note p{color:var(--muted);margin:12px 0 0}
    .accordion{
      display:grid;
      gap:14px;
    }
    .accordion-item{
      color:#fff;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12)!important;
      border-radius:22px!important;
      overflow:hidden;
    }
    .accordion-button{
      background:transparent!important;
      color:#fff!important;
      box-shadow:none!important;
      padding:20px 22px;
      font-weight:950;
      line-height:1.45;
    }
    .accordion-button:not(.collapsed){
      background:rgba(255,255,255,.055)!important;
    }
    .accordion-button:after{
      filter:invert(1);
      opacity:.8;
    }
    .accordion-body{
      padding:0 22px 22px;
      color:var(--muted);
      line-height:1.85;
    }

    .final-cta{
      padding:0 0 86px;
    }
    .cta-box{
      position:relative;
      overflow:hidden;
      border-radius:36px;
      padding:42px;
      border:1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(135deg,rgba(255,77,125,.24),rgba(255,122,69,.12),rgba(40,230,199,.10)),
        rgba(255,255,255,.06);
      box-shadow:var(--shadow);
    }
    .cta-box:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:radial-gradient(circle at 12% 24%,rgba(255,255,255,.18),transparent 1px);
      background-size:26px 26px;
      opacity:.32;
    }
    .cta-inner{
      position:relative;
      z-index:2;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:26px;
    }
    .cta-inner h2{margin:0;font-size:clamp(28px,4vw,46px);font-weight:950;letter-spacing:-.05em}
    .cta-inner p{margin:12px 0 0;color:#f1e6f6;max-width:720px}

    .site-footer{
      border-top:1px solid rgba(255,255,255,.1);
      background:rgba(8,5,13,.56);
      padding:42px 0 28px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr .8fr;
      gap:28px;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-size:20px;
      font-weight:950;
      margin-bottom:14px;
    }
    .footer-text{color:var(--muted);max-width:620px;margin:0}
    .footer-title{font-weight:950;margin-bottom:12px}
    .footer-links{
      list-style:none;padding:0;margin:0;display:grid;gap:8px;
    }
    .footer-links a{color:var(--muted)}
    .footer-links a:hover{color:#fff;transform:translateX(3px)}
    .footer-bottom{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding-top:26px;
      margin-top:30px;
      border-top:1px solid rgba(255,255,255,.08);
      color:var(--muted-2);
      font-size:14px;
    }
    .adult-warning{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,209,102,.11);
      border:1px solid rgba(255,209,102,.22);
      color:#ffe6a3;
      font-weight:800;
    }

    #searchHint{
      display:none;
      position:fixed;
      right:20px;
      bottom:20px;
      z-index:1200;
      max-width:340px;
      padding:14px 16px;
      border-radius:18px;
      color:#fff;
      background:rgba(32,22,45,.94);
      border:1px solid rgba(255,255,255,.14);
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(14px);
    }

    @media (max-width: 1024px){
      .promo-grid,.about-wrap,.news-layout,.app-layout,.faq-wrap{
        grid-template-columns:1fr;
      }
      .visual-board{min-height:390px}
      .security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .faq-note{position:relative;top:auto}
      .header-search{width:210px}
      .footer-grid{grid-template-columns:1fr 1fr}
    }

    @media (max-width: 991.98px){
      .site-header{height:auto;min-height:var(--nav-h)}
      .navbar-collapse{
        padding:14px 0 18px;
        border-top:1px solid rgba(255,255,255,.08);
        margin-top:12px;
      }
      .nav-menu{align-items:stretch;gap:8px}
      .nav-link-custom{width:100%;justify-content:flex-start}
      .header-search{width:100%;margin:8px 0 0}
      .nav-cta{width:100%;margin-top:8px}
    }

    @media (max-width: 768px){
      .section{padding:66px 0}
      .hero{padding:28px 0 58px;min-height:auto}
      .promo-stage{border-radius:28px;padding:24px}
      .burst{position:static;margin:0 0 18px auto;width:96px;height:96px;font-size:13px}
      .hero-stats{grid-template-columns:1fr}
      .region-matrix{grid-template-columns:1fr}
      .tier-row{grid-template-columns:1fr}
      .service-shell{grid-template-columns:1fr}
      .news-item{grid-template-columns:1fr;gap:8px}
      .news-arrow{display:none}
      .security-grid{grid-template-columns:1fr}
      .qr-card{align-items:flex-start}
      .cta-inner{flex-direction:column;align-items:flex-start}
      .footer-grid{grid-template-columns:1fr}
    }

    @media (max-width: 520px){
      .container-narrow{width:min(100% - 22px,var(--container))}
      .brand-logo{font-size:17px}
      .brand-mark{width:38px;height:38px;border-radius:13px}
      h1{font-size:38px;letter-spacing:-.06em}
      .hero-actions .btn-main,
      .hero-actions .btn-ghost,
      .app-actions .btn-main,
      .app-actions .btn-ghost,
      .btn-lightline{
        width:100%;
      }
      .kpi-grid{grid-template-columns:1fr}
      .about-card,.security-zone,.app-panel,.cta-box{padding:24px}
      .device-screen{min-height:300px}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-top:10px}
    }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}