/* roulang page: index */
:root{
      --bg:#07111F;
      --bg2:#0B1730;
      --panel:rgba(255,255,255,.065);
      --panel-strong:rgba(255,255,255,.1);
      --text:#EEF7FF;
      --muted:#AFC4D8;
      --weak:#7F95AA;
      --line:rgba(148,210,255,.18);
      --line-strong:rgba(34,211,238,.45);
      --cyan:#22D3EE;
      --teal:#5EEAD4;
      --blue:#38BDF8;
      --radius:28px;
      --shadow:0 24px 80px rgba(8,145,178,.16);
      --shadow-strong:0 28px 100px rgba(34,211,238,.24);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 6%, rgba(34,211,238,.18), transparent 32%),
        radial-gradient(circle at 86% 12%, rgba(94,234,212,.12), transparent 30%),
        linear-gradient(180deg,#07111F 0%,#0B1730 48%,#07111F 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      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:48px 48px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 72%);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    input,textarea,select{outline:none}
    .site-container{width:min(1280px,calc(100% - 40px));margin:0 auto}
    .nav-glass{
      background:rgba(7,17,31,.72);
      border:1px solid rgba(148,210,255,.16);
      box-shadow:0 18px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter:blur(22px);
    }
    .glass-card{
      background:linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
      border:1px solid var(--line);
      box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter:blur(20px);
    }
    .gradient-border{
      position:relative;
      border:1px solid transparent;
      background:
        linear-gradient(145deg, rgba(15,42,77,.82), rgba(7,17,31,.82)) padding-box,
        linear-gradient(135deg, rgba(34,211,238,.65), rgba(94,234,212,.18), rgba(56,189,248,.55)) border-box;
    }
    .glow-button{
      background:linear-gradient(135deg,#1D4ED8 0%,#0891B2 48%,#22D3EE 100%);
      color:white;
      box-shadow:0 12px 32px rgba(34,211,238,.28), inset 0 1px 0 rgba(255,255,255,.24);
      transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
    }
    .glow-button:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 18px 42px rgba(34,211,238,.38)}
    .ghost-button{
      background:rgba(255,255,255,.055);
      border:1px solid rgba(148,210,255,.22);
      color:#E6F7FF;
      transition:all .25s ease;
    }
    .ghost-button:hover{background:rgba(34,211,238,.09);border-color:rgba(34,211,238,.55);transform:translateY(-2px)}
    .nav-link{
      border:1px solid transparent;
      color:#C7D9EA;
      transition:all .22s ease;
    }
    .nav-link:hover,.nav-link.active{
      color:white;
      background:rgba(34,211,238,.1);
      border-color:rgba(34,211,238,.35);
      box-shadow:0 0 24px rgba(34,211,238,.12);
    }
    .section-pad{padding:92px 0}
    .section-kicker{
      display:inline-flex;align-items:center;gap:8px;
      border:1px solid rgba(34,211,238,.26);
      background:rgba(34,211,238,.08);
      color:#A5F3FC;
      padding:7px 13px;
      border-radius:999px;
      font-size:13px;
      margin-bottom:16px;
    }
    .section-title{font-weight:800;line-height:1.18;letter-spacing:-.02em}
    .section-desc{color:var(--muted);line-height:1.9}
    .card-hover{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease}
    .card-hover:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.45);box-shadow:var(--shadow-strong);background:rgba(255,255,255,.085)}
    .badge{
      display:inline-flex;align-items:center;
      border-radius:999px;
      padding:5px 10px;
      font-size:12px;
      color:#BFF7FF;
      border:1px solid rgba(94,234,212,.24);
      background:rgba(94,234,212,.08);
      white-space:nowrap;
    }
    .status-dot{width:9px;height:9px;border-radius:999px;background:var(--teal);box-shadow:0 0 18px rgba(94,234,212,.75)}
    .count-box{
      min-width:70px;
      text-align:center;
      border-radius:18px;
      border:1px solid rgba(34,211,238,.22);
      background:rgba(255,255,255,.07);
      padding:12px 10px;
    }
    .count-box strong{display:block;font-size:24px;line-height:1;color:#EFFFFF}
    .count-box span{font-size:12px;color:#9DB5C9}
    .info-list a{
      display:flex;justify-content:space-between;gap:18px;align-items:flex-start;
      padding:18px 0;
      border-bottom:1px solid rgba(148,210,255,.13);
      transition:color .2s ease,padding-left .2s ease;
    }
    .info-list a:hover{color:#A5F3FC;padding-left:6px}
    .form-field{
      width:100%;
      border:1px solid rgba(148,210,255,.2);
      background:rgba(7,17,31,.58);
      color:#EEF7FF;
      border-radius:18px;
      padding:13px 15px;
      transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
    }
    .form-field:focus{
      border-color:rgba(34,211,238,.75);
      box-shadow:0 0 0 4px rgba(34,211,238,.12);
      background:rgba(7,17,31,.78);
    }
    .faq-panel{overflow:hidden;transition:grid-template-rows .28s ease}
    .faq-answer{color:#B5C9DC}
    .mobile-menu{
      max-height:0;
      overflow:hidden;
      transition:max-height .28s ease, opacity .28s ease;
      opacity:0;
    }
    .mobile-menu.open{max-height:260px;opacity:1}
    .footer-link{color:#9FB5CA;transition:color .2s ease}
    .footer-link:hover{color:#A5F3FC}
    @media (max-width:1024px){
      .section-pad{padding:76px 0}
      .site-container{width:min(100% - 32px,1280px)}
    }
    @media (max-width:768px){
      .section-pad{padding:64px 0}
      .count-box{min-width:62px}
      .count-box strong{font-size:21px}
    }
    @media (max-width:520px){
      .site-container{width:min(100% - 24px,1280px)}
      .section-title{letter-spacing:0}
      .hero-actions{flex-direction:column}
      .hero-actions a{width:100%;justify-content:center}
      .info-list a{display:block}
    }

/* roulang page: category1 */
:root{
      --bg:#07111f;
      --bg-deep:#050d18;
      --panel:rgba(255,255,255,.065);
      --panel-strong:rgba(15,42,77,.58);
      --line:rgba(255,255,255,.12);
      --line-cyan:rgba(34,211,238,.28);
      --text:#eef8ff;
      --muted:#9fb2c7;
      --muted-2:#71839a;
      --cyan:#22d3ee;
      --sky:#38bdf8;
      --teal:#2dd4bf;
      --blue:#2563eb;
      --green:#86efac;
      --radius-xl:1.5rem;
      --radius-2xl:2rem;
      --shadow-glow:0 0 42px rgba(34,211,238,.14),0 22px 80px rgba(2,8,23,.38);
      --shadow-card:0 18px 50px rgba(2,8,23,.34);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,Arial,sans-serif;
      color:var(--text);
      line-height:1.75;
      background:
        radial-gradient(circle at 14% 8%,rgba(34,211,238,.20),transparent 32rem),
        radial-gradient(circle at 86% 18%,rgba(37,99,235,.24),transparent 36rem),
        radial-gradient(circle at 55% 64%,rgba(45,212,191,.10),transparent 34rem),
        linear-gradient(180deg,#07111f 0%,#0b1730 44%,#050d18 100%);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.16;
      background-image:
        linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
      background-size:48px 48px;
      mask-image:linear-gradient(to bottom,black,transparent 84%);
      z-index:-2;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    input,select,textarea{outline:none}
    ::selection{background:rgba(34,211,238,.35);color:white}
    .site-container{width:min(100% - 32px,1200px);margin-inline:auto}
    .nav-glass{
      background:linear-gradient(135deg,rgba(7,17,31,.76),rgba(15,42,77,.46));
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 10px 40px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter:blur(20px);
    }
    .nav-link{
      color:#c7d7e8;
      border:1px solid transparent;
      transition:all .25s ease;
    }
    .nav-link:hover{
      color:#fff;
      background:rgba(255,255,255,.075);
      border-color:rgba(34,211,238,.25);
      box-shadow:0 0 26px rgba(34,211,238,.10);
    }
    .nav-link.active{
      color:#ecfeff;
      background:linear-gradient(135deg,rgba(34,211,238,.20),rgba(37,99,235,.18));
      border-color:rgba(34,211,238,.38);
      box-shadow:inset 0 0 18px rgba(34,211,238,.08),0 0 24px rgba(34,211,238,.13);
    }
    .mobile-menu{
      display:grid;
      grid-template-rows:0fr;
      opacity:0;
      overflow:hidden;
      transition:grid-template-rows .28s ease,opacity .28s ease;
    }
    .mobile-menu.open{grid-template-rows:1fr;opacity:1}
    .mobile-menu>div{min-height:0}
    .glow-button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      color:#03131f;
      background:linear-gradient(135deg,var(--cyan),var(--sky) 52%,var(--teal));
      box-shadow:0 0 28px rgba(34,211,238,.30),0 12px 34px rgba(37,99,235,.20);
      transition:transform .24s ease,filter .24s ease,box-shadow .24s ease;
    }
    .glow-button:hover{
      transform:translateY(-2px);
      filter:brightness(1.08);
      box-shadow:0 0 38px rgba(34,211,238,.42),0 18px 42px rgba(37,99,235,.28);
    }
    .glow-button:active{transform:translateY(0) scale(.99)}
    .ghost-button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.055);
      color:#e7f7ff;
      transition:all .24s ease;
    }
    .ghost-button:hover{
      border-color:rgba(34,211,238,.36);
      background:rgba(34,211,238,.095);
      transform:translateY(-2px);
    }
    .glass-card{
      background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.045));
      border:1px solid var(--line);
      box-shadow:var(--shadow-card);
      backdrop-filter:blur(18px);
      transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease;
    }
    .glass-card:hover{
      transform:translateY(-4px);
      border-color:rgba(34,211,238,.32);
      box-shadow:var(--shadow-glow);
      background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(34,211,238,.055));
    }
    .gradient-border{position:relative}
    .gradient-border:before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(135deg,rgba(34,211,238,.60),rgba(37,99,235,.08),rgba(45,212,191,.42));
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      pointer-events:none;
    }
    .section{padding:92px 0}
    .section-tight{padding:64px 0}
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      border:1px solid rgba(34,211,238,.24);
      background:rgba(34,211,238,.08);
      color:#a7f3ff;
      border-radius:999px;
      padding:.45rem .8rem;
      font-size:.84rem;
      font-weight:700;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:#d8e9f8;
      border-radius:999px;
      padding:.42rem .72rem;
      font-size:.82rem;
      white-space:nowrap;
    }
    .hero-wrap{
      position:relative;
      padding:144px 0 58px;
    }
    .hero-wrap:after{
      content:"";
      position:absolute;
      right:-14rem;
      top:8rem;
      width:34rem;
      height:34rem;
      border-radius:999px;
      background:radial-gradient(circle,rgba(34,211,238,.22),transparent 62%);
      filter:blur(8px);
      pointer-events:none;
      z-index:-1;
    }
    .avatar-ring{
      background:conic-gradient(from 180deg,var(--cyan),var(--blue),var(--teal),var(--cyan));
      padding:2px;
      box-shadow:0 0 38px rgba(34,211,238,.24);
    }
    .data-badge{
      border:1px solid rgba(34,211,238,.20);
      background:rgba(4,19,34,.54);
      backdrop-filter:blur(14px);
    }
    .pill-filter{
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.045);
      color:#cbdcec;
      transition:all .22s ease;
    }
    .pill-filter:hover,.pill-filter.active{
      color:#ecfeff;
      border-color:rgba(34,211,238,.38);
      background:rgba(34,211,238,.12);
      box-shadow:0 0 24px rgba(34,211,238,.10);
    }
    .service-step{position:relative}
    .service-step:before{
      content:"";
      position:absolute;
      left:21px;
      top:48px;
      bottom:-18px;
      width:1px;
      background:linear-gradient(to bottom,rgba(34,211,238,.45),rgba(34,211,238,0));
    }
    .service-step:last-child:before{display:none}
    .icon-dot{
      display:grid;
      place-items:center;
      width:44px;
      height:44px;
      border-radius:16px;
      color:#ccfbff;
      background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(37,99,235,.12));
      border:1px solid rgba(34,211,238,.24);
      box-shadow:inset 0 0 18px rgba(34,211,238,.08),0 0 22px rgba(34,211,238,.12);
      flex:0 0 auto;
    }
    .stat-card .stat-number{
      font-size:clamp(2.1rem,5vw,3.6rem);
      line-height:1;
      font-weight:900;
      letter-spacing:-.05em;
      background:linear-gradient(135deg,#fff,#67e8f9 54%,#5eead4);
      -webkit-background-clip:text;
      color:transparent;
    }
    .progress-line{
      height:7px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
    }
    .progress-line span{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--cyan),var(--teal));
      box-shadow:0 0 18px rgba(34,211,238,.42);
    }
    .case-card{
      min-height:100%;
      position:relative;
      overflow:hidden;
    }
    .case-card:after{
      content:"";
      position:absolute;
      left:12%;
      right:12%;
      bottom:-28px;
      height:58px;
      border-radius:999px;
      background:rgba(34,211,238,.18);
      filter:blur(28px);
    }
    .plan-line{
      position:absolute;
      left:50%;
      top:52px;
      bottom:52px;
      width:1px;
      transform:translateX(-50%);
      background:linear-gradient(to bottom,transparent,rgba(34,211,238,.45),transparent);
    }
    .faq-item{
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.055);
      border-radius:1.25rem;
      overflow:hidden;
      transition:all .24s ease;
    }
    .faq-item:hover{border-color:rgba(34,211,238,.28);box-shadow:0 0 26px rgba(34,211,238,.08)}
    .faq-answer{
      max-height:0;
      overflow:hidden;
      transition:max-height .28s ease;
    }
    .faq-item.open .faq-answer{max-height:220px}
    .faq-icon{transition:transform .24s ease}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .form-field{
      width:100%;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(4,13,24,.55);
      color:#f2fbff;
      border-radius:1rem;
      padding:.88rem 1rem;
      transition:all .22s ease;
    }
    .form-field::placeholder{color:#6f8298}
    .form-field:focus{
      border-color:rgba(34,211,238,.48);
      box-shadow:0 0 0 4px rgba(34,211,238,.10),0 0 22px rgba(34,211,238,.10);
      background:rgba(4,19,34,.74);
    }
    .footer-link{
      color:#9fb2c7;
      transition:color .22s ease,transform .22s ease;
    }
    .footer-link:hover{color:#67e8f9;transform:translateY(-1px)}
    .focusable:focus-visible,
    a:focus-visible,
    button:focus-visible{
      outline:3px solid rgba(34,211,238,.42);
      outline-offset:3px;
    }
    @media (max-width:1024px){
      .section{padding:76px 0}
      .hero-wrap{padding-top:132px}
      .plan-line{display:none}
    }
    @media (max-width:768px){
      .site-container{width:min(100% - 24px,1200px)}
      .section{padding:64px 0}
      .section-tight{padding:50px 0}
      .hero-wrap{padding:118px 0 44px}
      .nav-glass{border-radius:1.6rem!important}
      .service-step:before{left:20px}
    }
    @media (max-width:520px){
      .site-container{width:min(100% - 20px,1200px)}
      .hero-wrap{padding-top:108px}
      .badge{font-size:.78rem;padding:.36rem .6rem}
      .kicker{font-size:.78rem}
    }