/* roulang page: index */
:root{
      --brand:#2563eb;
      --brand-dark:#1e40af;
      --brand-soft:#eff6ff;
      --accent:#10b981;
      --ink:#0f172a;
      --muted:#64748b;
      --weak:#94a3b8;
      --line:#e2e8f0;
      --bg:#f8fbff;
      --card:#ffffff;
      --radius-sm:12px;
      --radius:20px;
      --radius-lg:28px;
      --shadow:0 18px 50px rgba(15,23,42,.08);
      --shadow-hover:0 24px 70px rgba(37,99,235,.16);
      --container:1180px;
    }
    *{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(--ink);
      background:
        radial-gradient(circle at 8% 2%, rgba(37,99,235,.12), transparent 28rem),
        radial-gradient(circle at 92% 14%, rgba(16,185,129,.10), transparent 26rem),
        var(--bg);
      line-height:1.7;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(37,99,235,.18)}
    .site-container{width:min(var(--container), calc(100% - 40px));margin-inline:auto}
    .section-pad{padding:76px 0}
    .section-title{letter-spacing:-.03em}
    .glass{
      background:rgba(255,255,255,.84);
      border:1px solid rgba(226,232,240,.9);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
    }
    .card{
      background:var(--card);
      border:1px solid rgba(226,232,240,.92);
      border-radius:var(--radius);
      box-shadow:0 12px 34px rgba(15,23,42,.06);
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .card:hover{
      transform:translateY(-4px);
      border-color:rgba(37,99,235,.35);
      box-shadow:var(--shadow-hover);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      padding:.85rem 1.25rem;
      font-weight:800;
      transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
      outline:none;
      white-space:nowrap;
    }
    .btn:focus-visible,.nav-link:focus-visible,.icon-btn:focus-visible,input:focus-visible{
      outline:3px solid rgba(37,99,235,.22);
      outline-offset:3px;
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg,var(--brand),#1d4ed8);
      box-shadow:0 12px 26px rgba(37,99,235,.28);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(37,99,235,.35)}
    .btn-secondary{
      color:var(--brand-dark);
      background:#fff;
      border:1px solid rgba(37,99,235,.22);
    }
    .btn-secondary:hover{background:var(--brand-soft);transform:translateY(-2px)}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      padding:.38rem .72rem;
      font-size:.82rem;
      font-weight:800;
      color:var(--brand-dark);
      background:rgba(37,99,235,.08);
      border:1px solid rgba(37,99,235,.12);
    }
    .top-strip{
      background:linear-gradient(90deg,#0b1b47,#1e40af,#2563eb);
      color:#eaf2ff;
      font-size:.88rem;
    }
    .main-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(226,232,240,.85);
    }
    .logo-mark{
      width:42px;height:42px;border-radius:14px;
      background:linear-gradient(135deg,#2563eb,#60a5fa);
      color:#fff;display:grid;place-items:center;
      font-weight:900;
      box-shadow:0 12px 26px rgba(37,99,235,.26);
    }
    .nav-link{
      position:relative;
      padding:.7rem .9rem;
      border-radius:999px;
      color:#334155;
      font-weight:800;
      transition:background .22s ease,color .22s ease;
    }
    .nav-link:hover,.nav-link.active{background:var(--brand-soft);color:var(--brand-dark)}
    .search-box{
      display:flex;
      align-items:center;
      gap:.55rem;
      min-width:270px;
      padding:.58rem .75rem;
      border:1px solid var(--line);
      border-radius:999px;
      background:#f8fafc;
      transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .search-box:focus-within{
      border-color:rgba(37,99,235,.55);
      box-shadow:0 0 0 4px rgba(37,99,235,.10);
      background:#fff;
    }
    .search-box input{
      width:100%;
      border:0;
      outline:0;
      background:transparent;
      color:#0f172a;
      font-size:.92rem;
    }
    .icon-btn{
      width:42px;height:42px;border-radius:999px;
      display:grid;place-items:center;
      color:#1e293b;background:#f8fafc;
      border:1px solid var(--line);
      transition:transform .22s ease, background .22s ease, border-color .22s ease;
    }
    .icon-btn:hover{transform:translateY(-2px);background:var(--brand-soft);border-color:rgba(37,99,235,.22)}
    .mobile-panel{
      display:none;
      border-top:1px solid var(--line);
      background:#fff;
    }
    .hero{
      padding:66px 0 54px;
      position:relative;
      overflow:hidden;
    }
    .hero-stage{
      border-radius:34px;
      background:
        linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,246,255,.92)),
        radial-gradient(circle at 78% 18%,rgba(37,99,235,.18),transparent 22rem);
      border:1px solid rgba(226,232,240,.95);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero-stage:before{
      content:"";
      position:absolute;
      inset:auto -8% -28% auto;
      width:360px;height:360px;
      background:radial-gradient(circle,rgba(16,185,129,.15),transparent 65%);
      pointer-events:none;
    }
    .lead-form{
      background:#fff;
      border:1px solid rgba(226,232,240,.92);
      border-radius:24px;
      box-shadow:0 16px 45px rgba(15,23,42,.08);
    }
    .lead-input{
      width:100%;
      border:1px solid var(--line);
      border-radius:16px;
      padding:.88rem 1rem;
      background:#f8fafc;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .lead-input:focus{
      border-color:rgba(37,99,235,.55);
      box-shadow:0 0 0 4px rgba(37,99,235,.10);
      background:#fff;
      outline:none;
    }
    .data-pill{
      border-radius:18px;
      padding:1rem;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(226,232,240,.9);
    }
    .timeline-item{
      position:relative;
      padding-left:1.45rem;
    }
    .timeline-item:before{
      content:"";
      position:absolute;
      left:0;top:.55rem;
      width:.58rem;height:.58rem;border-radius:999px;background:var(--brand);
      box-shadow:0 0 0 5px rgba(37,99,235,.12);
    }
    .answer-row{
      border-radius:18px;
      border:1px solid rgba(226,232,240,.95);
      background:#fff;
      transition:background .22s ease, border-color .22s ease;
    }
    .answer-row:hover{background:#f8fbff;border-color:rgba(37,99,235,.28)}
    .article-link{
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:1rem;
      align-items:center;
      padding:1rem 0;
      border-bottom:1px dashed rgba(148,163,184,.42);
      transition:color .22s ease, transform .22s ease;
    }
    .article-link:hover{color:var(--brand-dark);transform:translateX(3px)}
    .article-index{
      width:34px;height:34px;border-radius:12px;
      display:grid;place-items:center;
      background:var(--brand-soft);
      color:var(--brand-dark);
      font-weight:900;
      font-size:.86rem;
    }
    .security-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:1.25rem;
    }
    .check-list li{
      display:flex;
      gap:.7rem;
      align-items:flex-start;
      padding:.72rem 0;
      color:#334155;
    }
    .check-list li span:first-child{
      flex:0 0 24px;width:24px;height:24px;border-radius:999px;
      display:grid;place-items:center;background:rgba(16,185,129,.12);color:#059669;font-weight:900;
    }
    .app-panel{
      background:linear-gradient(135deg,#0b1b47,#1e40af 58%,#2563eb);
      color:#fff;
      border-radius:32px;
      overflow:hidden;
      position:relative;
      box-shadow:0 30px 80px rgba(30,64,175,.25);
    }
    .app-panel:after{
      content:"";
      position:absolute;
      right:-120px;top:-120px;
      width:320px;height:320px;border-radius:999px;
      background:rgba(255,255,255,.10);
    }
    .phone-card{
      border-radius:28px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter:blur(12px);
    }
    .live-cover{
      min-height:270px;
      border-radius:28px;
      background:
        linear-gradient(135deg,rgba(15,23,42,.72),rgba(37,99,235,.55)),
        radial-gradient(circle at 72% 22%,rgba(255,255,255,.28),transparent 18rem);
      color:#fff;
      overflow:hidden;
      position:relative;
    }
    .live-cover:before{
      content:"";
      position:absolute;
      inset:18px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:22px;
      pointer-events:none;
    }
    .countdown-box{
      border-radius:18px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.18);
      padding:.8rem;
      text-align:center;
      min-width:72px;
    }
    .floating-cta{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      width:min(940px,calc(100% - 28px));
      z-index:45;
      border-radius:999px;
      background:rgba(15,23,42,.92);
      color:#fff;
      box-shadow:0 20px 60px rgba(15,23,42,.30);
      backdrop-filter:blur(16px);
      border:1px solid rgba(255,255,255,.12);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item[open]{border-color:rgba(37,99,235,.28);box-shadow:0 16px 40px rgba(37,99,235,.08)}
    .footer{
      background:#071225;
      color:#cbd5e1;
      padding:58px 0 96px;
      margin-top:30px;
    }
    .footer a{transition:color .2s ease}
    .footer a:hover{color:#fff}
    @media (max-width:1024px){
      .search-box{min-width:220px}
      .security-grid{grid-template-columns:1fr}
      .section-pad{padding:62px 0}
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 28px,var(--container))}
      .desktop-nav,.desktop-actions{display:none!important}
      .mobile-panel.open{display:block}
      .hero{padding:34px 0 38px}
      .hero-stage{border-radius:26px}
      .section-pad{padding:52px 0}
      .article-link{grid-template-columns:auto 1fr}
      .article-link time{grid-column:2}
      .floating-cta{border-radius:24px;bottom:12px}
    }
    @media (max-width:520px){
      .top-strip{font-size:.78rem}
      .logo-mark{width:38px;height:38px;border-radius:12px}
      .btn{width:100%;padding:.82rem 1rem}
      .section-title{font-size:2rem!important}
      .lead-form{border-radius:20px}
      .app-panel{border-radius:24px}
      .countdown-box{min-width:58px;padding:.65rem .45rem}
      .floating-cta .hide-xs{display:none}
    }