/* roulang page: index */
:root{
      --bg-0:#050914;
      --bg-1:#081221;
      --bg-2:#0d1b2f;
      --panel:#101d31;
      --panel-2:#0c1728;
      --glass:rgba(15,31,53,.66);
      --glass-strong:rgba(18,37,64,.82);
      --line:rgba(160,203,255,.16);
      --line-strong:rgba(93,222,255,.38);
      --text:#eef7ff;
      --muted:#9fb3c8;
      --soft:#c7d6e6;
      --cyan:#64e7ff;
      --cyan-2:#1fb7ff;
      --purple:#8f7bff;
      --amber:#ffbf6b;
      --success:#74f0b2;
      --danger:#ff7b92;
      --shadow:0 24px 80px rgba(0,0,0,.36);
      --shadow-soft:0 18px 46px rgba(0,0,0,.25);
      --radius-xl:30px;
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:12px;
      --container:1220px;
      --nav-h:78px;
      --ease:all .22s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      font-family:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      line-height:1.72;
      background:
        radial-gradient(circle at 12% 8%, rgba(31,183,255,.22) 0, transparent 28%),
        radial-gradient(circle at 88% 16%, rgba(143,123,255,.16) 0, transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(100,231,255,.1) 0, transparent 34%),
        linear-gradient(145deg,var(--bg-0),var(--bg-1) 48%,#030711);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-2;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size:44px 44px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,.15));
    }
    body:after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.42;
      background:
        linear-gradient(120deg, transparent 0 20%, rgba(100,231,255,.035) 20% 20.5%, transparent 20.5% 42%, rgba(143,123,255,.035) 42% 42.4%, transparent 42.4%),
        radial-gradient(circle at 70% 38%, rgba(255,255,255,.045), transparent 20%);
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover{color:var(--cyan)}
    img{max-width:100%;height:auto;display:block}
    button,input,textarea{font:inherit}
    ::selection{background:rgba(100,231,255,.28);color:#fff}
    .site-container{width:min(100% - 40px,var(--container));margin-inline:auto}
    .section{padding:92px 0;position:relative}
    .section-tight{padding:66px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      color:var(--cyan);
      font-size:13px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      padding:8px 12px;
      border:1px solid rgba(100,231,255,.2);
      border-radius:999px;
      background:rgba(100,231,255,.06);
      box-shadow:inset 0 0 20px rgba(100,231,255,.04);
    }
    .eyebrow:before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 18px var(--cyan);
    }
    .section-title{
      margin:18px 0 12px;
      font-size:clamp(30px,4vw,48px);
      line-height:1.15;
      font-weight:750;
      letter-spacing:-.03em;
    }
    .section-lead{
      margin:0;
      max-width:760px;
      color:var(--muted);
      font-size:17px;
    }
    .text-gradient{
      background:linear-gradient(90deg,#fff 0%,var(--cyan) 52%,#d9d3ff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1040;
      height:var(--nav-h);
      display:flex;
      align-items:center;
      border-bottom:1px solid rgba(191,221,255,.1);
      background:rgba(5,9,20,.74);
      backdrop-filter:blur(18px);
      transition:var(--ease);
    }
    .site-header.is-scrolled{
      background:rgba(5,9,20,.88);
      box-shadow:0 12px 36px rgba(0,0,0,.28);
    }
    .nav-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:260px;
    }
    .brand-mark{
      width:38px;
      height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:
        linear-gradient(135deg,rgba(100,231,255,.24),rgba(143,123,255,.16)),
        rgba(255,255,255,.04);
      border:1px solid rgba(100,231,255,.28);
      box-shadow:0 0 32px rgba(100,231,255,.15), inset 0 0 18px rgba(255,255,255,.06);
      color:#fff;
      font-weight:800;
      letter-spacing:-.05em;
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.12;
    }
    .brand-name{
      font-size:15px;
      font-weight:760;
      color:#fff;
      white-space:nowrap;
    }
    .brand-sub{
      margin-top:4px;
      font-size:10px;
      color:rgba(199,214,230,.7);
      letter-spacing:.16em;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      flex:1;
    }
    .nav-link-custom{
      position:relative;
      padding:9px 16px;
      border-radius:999px;
      color:var(--soft);
      font-size:14px;
      font-weight:650;
    }
    .nav-link-custom:after{
      content:"";
      position:absolute;
      left:18px;
      right:18px;
      bottom:3px;
      height:2px;
      border-radius:99px;
      background:linear-gradient(90deg,var(--cyan),var(--purple));
      transform:scaleX(0);
      transform-origin:center;
      transition:var(--ease);
    }
    .nav-link-custom:hover{
      color:#fff;
      background:rgba(255,255,255,.045);
    }
    .nav-link-custom:hover:after,
    .nav-link-custom.active:after{transform:scaleX(1)}
    .nav-link-custom.active{color:#fff}
    .nav-actions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:12px;
      min-width:210px;
    }
    .btn{
      border-radius:999px;
      font-weight:720;
      padding:12px 19px;
      border:1px solid transparent;
      transition:var(--ease);
      letter-spacing:.01em;
    }
    .btn-primary-glow{
      color:#02111c;
      background:linear-gradient(135deg,var(--cyan),#8ef4ff 46%,#c3f8ff);
      border-color:rgba(255,255,255,.42);
      box-shadow:0 12px 34px rgba(100,231,255,.24), inset 0 -1px 0 rgba(0,0,0,.12);
    }
    .btn-primary-glow:hover,
    .btn-primary-glow:focus{
      color:#00101a;
      transform:translateY(-2px);
      box-shadow:0 18px 44px rgba(100,231,255,.34),0 0 0 4px rgba(100,231,255,.1);
    }
    .btn-ghost{
      color:var(--text);
      background:rgba(255,255,255,.035);
      border-color:rgba(190,222,255,.18);
    }
    .btn-ghost:hover,
    .btn-ghost:focus{
      color:#fff;
      border-color:rgba(100,231,255,.42);
      background:rgba(100,231,255,.08);
      transform:translateY(-2px);
      box-shadow:0 14px 34px rgba(0,0,0,.22);
    }
    .menu-btn{
      width:44px;
      height:44px;
      border-radius:50%;
      border:1px solid rgba(190,222,255,.18);
      background:rgba(255,255,255,.04);
      color:#fff;
      display:none;
      align-items:center;
      justify-content:center;
    }
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after{
      display:block;
      width:18px;
      height:2px;
      border-radius:99px;
      background:#fff;
      position:relative;
      content:"";
    }
    .menu-btn span:before{position:absolute;top:-6px}
    .menu-btn span:after{position:absolute;top:6px}
    .offcanvas{
      background:linear-gradient(155deg,rgba(8,18,33,.96),rgba(5,9,20,.98));
      color:#fff;
      border-left:1px solid rgba(100,231,255,.16);
    }
    .offcanvas-header{border-bottom:1px solid rgba(190,222,255,.12)}
    .mobile-nav-list{display:grid;gap:10px;margin-top:16px}
    .mobile-nav-list a{
      padding:14px 16px;
      border-radius:16px;
      border:1px solid rgba(190,222,255,.12);
      color:var(--soft);
      background:rgba(255,255,255,.035);
    }
    .mobile-nav-list a.active,
    .mobile-nav-list a:hover{
      color:#fff;
      border-color:rgba(100,231,255,.35);
      background:rgba(100,231,255,.08);
    }
    .hero{
      padding:84px 0 60px;
      min-height:calc(100vh - var(--nav-h));
      display:flex;
      align-items:center;
      position:relative;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
      gap:58px;
      align-items:center;
    }
    .hero h1{
      margin:20px 0 20px;
      font-size:clamp(42px,6vw,72px);
      line-height:1.04;
      font-weight:800;
      letter-spacing:-.055em;
    }
    .hero-lead{
      max-width:690px;
      color:#b7c9dc;
      font-size:18px;
      line-height:1.9;
      margin-bottom:30px;
    }
    .hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:34px;
    }
    .trust-line{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      color:var(--muted);
      font-size:13px;
    }
    .trust-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.035);
      border:1px solid rgba(190,222,255,.12);
    }
    .trust-pill:before{
      content:"";
      width:6px;height:6px;border-radius:50%;
      background:var(--success);
      box-shadow:0 0 14px var(--success);
    }
    .hero-visual{
      position:relative;
      min-height:520px;
      display:grid;
      place-items:center;
    }
    .orbit{
      position:absolute;
      inset:35px;
      border:1px solid rgba(100,231,255,.14);
      border-radius:50%;
      background:radial-gradient(circle,rgba(100,231,255,.08),transparent 55%);
      animation:pulse 5s ease-in-out infinite;
    }
    .orbit:before,.orbit:after{
      content:"";
      position:absolute;
      inset:38px;
      border-radius:50%;
      border:1px dashed rgba(143,123,255,.22);
    }
    .orbit:after{
      inset:94px;
      border-style:solid;
      border-color:rgba(255,255,255,.08);
    }
    @keyframes pulse{
      0%,100%{transform:scale(1);opacity:.9}
      50%{transform:scale(1.03);opacity:.65}
    }
    .dashboard-card{
      position:relative;
      width:min(100%,460px);
      padding:24px;
      border-radius:var(--radius-xl);
      background:
        linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035)),
        rgba(12,23,40,.72);
      border:1px solid rgba(160,203,255,.18);
      box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter:blur(18px);
      overflow:hidden;
    }
    .dashboard-card:before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,transparent,rgba(100,231,255,.13),transparent);
      transform:translateX(-100%);
      animation:scan 5.6s ease-in-out infinite;
    }
    @keyframes scan{
      0%,55%{transform:translateX(-110%)}
      80%,100%{transform:translateX(110%)}
    }
    .dash-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:24px;
      position:relative;
    }
    .dash-title{font-weight:760}
    .dash-status{
      font-size:12px;
      color:var(--success);
      padding:6px 10px;
      border-radius:999px;
      background:rgba(116,240,178,.08);
      border:1px solid rgba(116,240,178,.24);
    }
    .metric-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
      margin-bottom:14px;
      position:relative;
    }
    .metric{
      padding:18px;
      border-radius:20px;
      background:rgba(255,255,255,.045);
      border:1px solid rgba(190,222,255,.12);
    }
    .metric strong{
      display:block;
      font-size:32px;
      line-height:1;
      letter-spacing:-.04em;
      color:#fff;
    }
    .metric span{
      display:block;
      margin-top:9px;
      font-size:13px;
      color:var(--muted);
    }
    .flow-panel{
      position:relative;
      margin-top:16px;
      padding:18px;
      border-radius:22px;
      background:linear-gradient(135deg,rgba(100,231,255,.08),rgba(143,123,255,.06));
      border:1px solid rgba(100,231,255,.16);
    }
    .flow-line{
      display:flex;
      align-items:center;
      gap:10px;
      margin:12px 0;
      color:var(--soft);
      font-size:14px;
    }
    .flow-line i{
      width:28px;height:28px;
      border-radius:10px;
      display:grid;
      place-items:center;
      font-style:normal;
      background:rgba(100,231,255,.12);
      color:var(--cyan);
      border:1px solid rgba(100,231,255,.18);
    }
    .float-badge{
      position:absolute;
      right:-18px;
      bottom:74px;
      padding:13px 16px;
      border-radius:18px;
      background:rgba(5,9,20,.78);
      border:1px solid rgba(255,191,107,.32);
      color:#fff;
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(14px);
      font-size:13px;
    }
    .float-badge strong{display:block;color:var(--amber);font-size:21px;line-height:1.1}
    .pain-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
      margin-top:36px;
    }
    .pain-card,.solid-card,.glass-card,.quote-card,.category-card{
      border-radius:var(--radius-lg);
      border:1px solid var(--line);
      transition:var(--ease);
    }
    .pain-card{
      padding:24px;
      min-height:236px;
      background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.022));
    }
    .pain-card:hover,.solid-card:hover,.glass-card:hover,.category-card:hover{
      transform:translateY(-5px);
      border-color:rgba(100,231,255,.35);
      box-shadow:0 18px 44px rgba(0,0,0,.24),0 0 0 1px rgba(100,231,255,.05);
    }
    .icon-chip{
      width:46px;height:46px;
      border-radius:16px;
      display:grid;
      place-items:center;
      margin-bottom:18px;
      color:var(--cyan);
      font-weight:800;
      background:rgba(100,231,255,.08);
      border:1px solid rgba(100,231,255,.18);
      box-shadow:inset 0 0 18px rgba(100,231,255,.04);
    }
    .pain-card h3,.solid-card h3,.glass-card h3,.category-card h3{
      font-size:19px;
      font-weight:760;
      margin:0 0 10px;
    }
    .pain-card p,.solid-card p,.glass-card p,.category-card p{
      color:var(--muted);
      margin:0;
      font-size:14.5px;
    }
    .tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
    .tag{
      display:inline-flex;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      color:#cfe7f4;
      font-size:12px;
      background:rgba(255,255,255,.045);
      border:1px solid rgba(190,222,255,.12);
    }
    .solution-story{
      margin-top:42px;
      display:grid;
      gap:22px;
    }
    .story-item{
      display:grid;
      grid-template-columns:190px 1fr 280px;
      gap:24px;
      align-items:stretch;
      padding:26px;
      border-radius:var(--radius-xl);
      background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
      border:1px solid var(--line);
      position:relative;
      overflow:hidden;
    }
    .story-item:before{
      content:"";
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--cyan),transparent);
      opacity:.55;
    }
    .story-index{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:var(--muted);
      font-size:13px;
    }
    .story-index strong{
      font-size:44px;
      line-height:1;
      color:rgba(100,231,255,.85);
      letter-spacing:-.06em;
    }
    .story-body h3{
      font-size:25px;
      margin:0 0 12px;
      font-weight:760;
    }
    .story-body p{margin:0;color:var(--muted)}
    .story-result{
      padding:18px;
      border-radius:22px;
      background:rgba(100,231,255,.055);
      border:1px solid rgba(100,231,255,.15);
    }
    .story-result span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
    .story-result strong{font-size:25px;color:#fff}
    .category-entrance{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:22px;
      margin-top:38px;
    }
    .category-card{
      padding:30px;
      background:rgba(12,23,40,.72);
      position:relative;
      overflow:hidden;
      min-height:260px;
    }
    .category-card.large{
      background:
        radial-gradient(circle at 85% 20%,rgba(100,231,255,.17),transparent 36%),
        linear-gradient(135deg,rgba(18,37,64,.9),rgba(11,22,39,.76));
    }
    .category-card:after{
      content:"";
      position:absolute;
      width:190px;
      height:190px;
      right:-70px;
      bottom:-80px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(143,123,255,.22),transparent 66%);
    }
    .category-card h3{
      font-size:clamp(24px,3vw,34px);
      max-width:560px;
    }
    .category-card .btn{margin-top:24px}
    .score-strip{
      margin-top:34px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1px;
      overflow:hidden;
      border-radius:var(--radius-xl);
      border:1px solid var(--line);
      background:var(--line);
    }
    .score{
      padding:26px;
      background:rgba(10,21,37,.84);
    }
    .score strong{
      display:block;
      font-size:38px;
      line-height:1;
      color:#fff;
      letter-spacing:-.05em;
    }
    .score span{
      margin-top:10px;
      display:block;
      color:var(--muted);
      font-size:14px;
    }
    .before-after{
      margin-top:26px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .solid-card{
      padding:28px;
      background:rgba(10,21,37,.78);
    }
    .check-list{
      list-style:none;
      padding:0;
      margin:18px 0 0;
      display:grid;
      gap:12px;
    }
    .check-list li{
      display:flex;
      gap:10px;
      color:var(--soft);
      font-size:15px;
    }
    .check-list li:before{
      content:"";
      flex:0 0 18px;
      width:18px;
      height:18px;
      margin-top:4px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--cyan),var(--purple));
      box-shadow:0 0 16px rgba(100,231,255,.18);
    }
    .quote-grid{
      margin-top:38px;
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:22px;
      align-items:stretch;
    }
    .quote-card{
      padding:30px;
      background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
    }
    .quote-text{
      font-size:21px;
      line-height:1.75;
      margin:0 0 24px;
      color:#fff;
    }
    .quote-author{
      display:flex;
      align-items:center;
      gap:14px;
      color:var(--muted);
    }
    .avatar{
      width:42px;height:42px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--cyan),var(--purple));
      box-shadow:0 0 24px rgba(100,231,255,.18);
    }
    .logo-wall{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .logo-item{
      min-height:82px;
      display:grid;
      place-items:center;
      border-radius:18px;
      color:rgba(238,247,255,.78);
      background:rgba(255,255,255,.04);
      border:1px solid rgba(190,222,255,.12);
      font-weight:760;
    }
    .accordion{
      margin-top:34px;
      display:grid;
      gap:14px;
    }
    .accordion-item{
      color:var(--text);
      background:rgba(12,23,40,.72);
      border:1px solid rgba(190,222,255,.13);
      border-radius:20px!important;
      overflow:hidden;
    }
    .accordion-button{
      padding:22px 24px;
      color:#fff;
      background:rgba(255,255,255,.025);
      border:0;
      box-shadow:none!important;
      font-weight:760;
    }
    .accordion-button:focus{
      box-shadow:0 0 0 4px rgba(100,231,255,.1)!important;
      border-color:rgba(100,231,255,.35);
    }
    .accordion-button:not(.collapsed){
      color:#fff;
      background:rgba(100,231,255,.075);
    }
    .accordion-button::after{
      filter:invert(1) brightness(1.6);
      opacity:.7;
    }
    .accordion-body{
      padding:0 24px 24px;
      color:var(--muted);
      border-top:1px solid rgba(190,222,255,.09);
    }
    .cta-panel{
      display:grid;
      grid-template-columns:1fr 420px;
      gap:34px;
      align-items:center;
      padding:42px;
      border-radius:34px;
      background:
        radial-gradient(circle at 15% 20%,rgba(100,231,255,.18),transparent 32%),
        radial-gradient(circle at 86% 10%,rgba(143,123,255,.16),transparent 30%),
        linear-gradient(135deg,rgba(20,42,72,.9),rgba(8,18,33,.86));
      border:1px solid rgba(100,231,255,.22);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .cta-panel:before{
      content:"";
      position:absolute;
      inset:auto 0 0;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--cyan),transparent);
    }
    .cta-panel h2{
      font-size:clamp(30px,4vw,48px);
      line-height:1.15;
      margin:16px 0 14px;
      letter-spacing:-.035em;
      font-weight:780;
    }
    .cta-panel p{color:var(--muted);margin:0;max-width:720px}
    .consult-form{
      position:relative;
      display:grid;
      gap:12px;
      padding:20px;
      border-radius:24px;
      background:rgba(5,9,20,.42);
      border:1px solid rgba(190,222,255,.14);
    }
    .form-control{
      min-height:48px;
      color:#fff;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(190,222,255,.14);
      border-radius:16px;
      padding:12px 14px;
      box-shadow:none;
    }
    .form-control::placeholder{color:rgba(199,214,230,.54)}
    .form-control:focus{
      color:#fff;
      background:rgba(255,255,255,.07);
      border-color:rgba(100,231,255,.55);
      box-shadow:0 0 0 4px rgba(100,231,255,.1);
    }
    textarea.form-control{min-height:96px;resize:vertical}
    .form-note{font-size:12px;color:var(--muted);margin:0}
    .site-footer{
      padding:52px 0 28px;
      border-top:1px solid rgba(190,222,255,.12);
      background:linear-gradient(180deg,rgba(5,9,20,.35),rgba(3,7,17,.92));
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1fr auto auto;
      gap:48px;
      align-items:start;
    }
    .footer-brand p{
      max-width:520px;
      color:var(--muted);
      margin:16px 0 0;
    }
    .footer-col h3{
      font-size:14px;
      color:#fff;
      margin:0 0 14px;
      font-weight:760;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a,.footer-links span{
      color:var(--muted);
      font-size:14px;
    }
    .footer-links a:hover{color:var(--cyan);transform:translateX(3px)}
    .copyright{
      margin-top:34px;
      padding-top:22px;
      border-top:1px solid rgba(190,222,255,.1);
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      color:rgba(199,214,230,.62);
      font-size:13px;
    }
    @media (max-width:1199.98px){
      .hero-grid{grid-template-columns:1fr;gap:34px}
      .hero-visual{min-height:430px}
      .pain-grid{grid-template-columns:repeat(2,1fr)}
      .story-item{grid-template-columns:140px 1fr}
      .story-result{grid-column:1/-1}
      .cta-panel{grid-template-columns:1fr}
    }
    @media (max-width:991.98px){
      :root{--nav-h:70px}
      .desktop-nav,.nav-actions{display:none}
      .menu-btn{display:flex}
      .brand{min-width:auto}
      .brand-name{max-width:230px;overflow:hidden;text-overflow:ellipsis}
      .section{padding:70px 0}
      .category-entrance,.quote-grid,.before-after{grid-template-columns:1fr}
      .score-strip{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1fr 1fr}
      .footer-brand{grid-column:1/-1}
    }
    @media (max-width:767.98px){
      .site-container{width:min(100% - 28px,var(--container))}
      .hero{padding:54px 0 40px;min-height:auto}
      .hero h1{font-size:42px}
      .hero-lead{font-size:16px}
      .dashboard-card{padding:18px}
      .float-badge{right:8px;bottom:24px}
      .pain-grid,.metric-row{grid-template-columns:1fr}
      .story-item{grid-template-columns:1fr;padding:22px}
      .story-index{gap:12px}
      .score-strip{grid-template-columns:1fr}
      .cta-panel{padding:26px;border-radius:26px}
      .footer-grid{grid-template-columns:1fr}
      .copyright{flex-direction:column}
    }
    @media (max-width:520px){
      .brand-mark{width:34px;height:34px;border-radius:12px}
      .brand-name{font-size:13px;max-width:190px}
      .brand-sub{font-size:9px}
      .hero-actions .btn{width:100%;justify-content:center}
      .section-title{font-size:30px}
      .quote-text{font-size:18px}
      .logo-wall{grid-template-columns:1fr}
      .btn{width:100%;text-align:center}
    }

/* roulang page: category2 */
:root{
      --bg:#07111f;
      --bg-deep:#040913;
      --bg-soft:#0c1829;
      --panel:#0f2035;
      --panel-2:#12263d;
      --text:#eef7ff;
      --muted:#9fb1c8;
      --weak:#6f829b;
      --line:rgba(165,205,255,.16);
      --line-strong:rgba(99,217,255,.38);
      --cyan:#5ee7ff;
      --blue:#6aa7ff;
      --purple:#9b7cff;
      --amber:#ffbf6b;
      --green:#71f5bd;
      --radius-sm:12px;
      --radius:20px;
      --radius-lg:28px;
      --shadow:0 22px 70px rgba(0,0,0,.36);
      --shadow-soft:0 14px 40px rgba(8,23,44,.32);
      --container:1240px;
      --transition:all .22s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      line-height:1.75;
      background:
        radial-gradient(circle at 12% 8%,rgba(94,231,255,.14),transparent 28%),
        radial-gradient(circle at 88% 18%,rgba(155,124,255,.13),transparent 30%),
        radial-gradient(circle at 58% 82%,rgba(106,167,255,.12),transparent 34%),
        linear-gradient(180deg,#06101d 0%,#07111f 42%,#040913 100%);
      min-height:100vh;
      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:52px 52px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 78%);
    }
    body:after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.22;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(/%23n)' opacity='.24'/%3E%3C/svg%3E");
    }
    a{color:inherit;text-decoration:none;transition:var(--transition)}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    ::selection{background:rgba(94,231,255,.28);color:#fff}
    .site-container{
      width:min(calc(100% - 40px),var(--container));
      margin:0 auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(7,17,31,.62);
      backdrop-filter:blur(18px);
      transition:var(--transition);
    }
    .site-header.is-scrolled{
      background:rgba(5,12,22,.86);
      box-shadow:0 10px 34px rgba(0,0,0,.25);
    }
    .nav-wrap{
      height:82px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:13px;
      min-width:max-content;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:16px;
      display:grid;
      place-items:center;
      color:#03111b;
      font-weight:800;
      background:linear-gradient(135deg,var(--cyan),var(--blue) 62%,var(--purple));
      box-shadow:0 0 28px rgba(94,231,255,.3),inset 0 1px 0 rgba(255,255,255,.55);
    }
    .brand-text{display:flex;flex-direction:column;line-height:1.18}
    .brand-name{font-size:16px;font-weight:760;letter-spacing:.02em;color:#fff}
    .brand-sub{font-size:10px;letter-spacing:.24em;color:var(--muted);margin-top:3px}
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:6px;
      padding:6px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:999px;
      background:rgba(255,255,255,.025);
    }
    .nav-link-custom{
      position:relative;
      padding:9px 16px;
      border-radius:999px;
      color:var(--muted);
      font-size:14px;
      white-space:nowrap;
    }
    .nav-link-custom:hover{color:#fff;background:rgba(94,231,255,.07)}
    .nav-link-custom.active{
      color:#fff;
      background:rgba(94,231,255,.11);
      box-shadow:inset 0 0 0 1px rgba(94,231,255,.18);
    }
    .nav-link-custom.active:after{
      content:"";
      position:absolute;
      left:50%;
      bottom:3px;
      width:18px;
      height:2px;
      border-radius:999px;
      transform:translateX(-50%);
      background:var(--cyan);
      box-shadow:0 0 12px rgba(94,231,255,.8);
    }
    .nav-actions{display:flex;align-items:center;gap:10px}
    .btn{
      border-radius:999px;
      padding:11px 18px;
      font-weight:700;
      font-size:14px;
      border:1px solid transparent;
      transition:var(--transition);
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary-glow{
      color:#03111b;
      border-color:rgba(94,231,255,.65);
      background:linear-gradient(135deg,var(--cyan),#87f1ff 44%,var(--blue));
      box-shadow:0 0 24px rgba(94,231,255,.26);
    }
    .btn-primary-glow:hover{
      color:#03111b;
      box-shadow:0 0 36px rgba(94,231,255,.42);
      filter:saturate(1.08);
    }
    .btn-ghost{
      color:#dbe9fb;
      border-color:rgba(255,255,255,.13);
      background:rgba(255,255,255,.04);
    }
    .btn-ghost:hover{
      color:#fff;
      border-color:rgba(94,231,255,.42);
      background:rgba(94,231,255,.08);
    }
    .menu-btn{
      display:none;
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      position:relative;
    }
    .menu-btn span,.menu-btn:before,.menu-btn:after{
      content:"";
      position:absolute;
      left:12px;
      right:12px;
      height:2px;
      border-radius:2px;
      background:#dceeff;
    }
    .menu-btn span{top:21px}
    .menu-btn:before{top:14px}
    .menu-btn:after{top:28px}
    .offcanvas{
      background:rgba(5,12,22,.96);
      color:var(--text);
      border-left:1px solid var(--line);
      backdrop-filter:blur(18px);
    }
    .offcanvas-header{border-bottom:1px solid var(--line);padding:22px}
    .offcanvas-body{padding:22px}
    .mobile-nav{display:grid;gap:10px}
    .mobile-nav a{
      padding:14px 16px;
      border-radius:16px;
      color:var(--muted);
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
    }
    .mobile-nav a.active,.mobile-nav a:hover{
      color:#fff;
      border-color:rgba(94,231,255,.35);
      background:rgba(94,231,255,.08);
    }
    .breadcrumb-wrap{
      padding:34px 0 0;
    }
    .breadcrumb-custom{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
      color:var(--weak);
      font-size:14px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .breadcrumb-custom a:hover{color:var(--cyan)}
    .breadcrumb-custom li:not(:last-child):after{
      content:"/";
      margin-left:10px;
      color:rgba(255,255,255,.25);
    }
    .page-hero{
      padding:56px 0 78px;
      position:relative;
    }
    .hero-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 430px;
      gap:34px;
      align-items:stretch;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      color:#dff9ff;
      font-size:13px;
      border:1px solid rgba(94,231,255,.22);
      background:rgba(94,231,255,.07);
    }
    .eyebrow:before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 15px rgba(94,231,255,.95);
    }
    h1{
      font-size:clamp(36px,5.2vw,66px);
      line-height:1.08;
      letter-spacing:-.04em;
      font-weight:800;
      margin:22px 0 18px;
    }
    .gradient-text{
      background:linear-gradient(135deg,#fff 10%,var(--cyan) 48%,#a8c7ff 82%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero-lead{
      max-width:760px;
      color:#bdd0e7;
      font-size:18px;
      margin:0 0 28px;
    }
    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:30px;
    }
    .meta-chip{
      padding:10px 14px;
      border-radius:999px;
      color:#dcecff;
      font-size:13px;
      border:1px solid rgba(255,255,255,.11);
      background:rgba(255,255,255,.045);
    }
    .featured-card{
      position:relative;
      border:1px solid rgba(94,231,255,.2);
      border-radius:var(--radius-lg);
      padding:24px;
      overflow:hidden;
      min-height:440px;
      background:
        radial-gradient(circle at 15% 0%,rgba(94,231,255,.18),transparent 34%),
        linear-gradient(145deg,rgba(18,38,61,.88),rgba(8,17,31,.88));
      box-shadow:var(--shadow);
    }
    .featured-card:before{
      content:"";
      position:absolute;
      inset:14px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
      pointer-events:none;
    }
    .cover-orbit{
      height:176px;
      border-radius:22px;
      margin-bottom:22px;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 30% 28%,rgba(94,231,255,.7),transparent 9%),
        radial-gradient(circle at 68% 46%,rgba(155,124,255,.58),transparent 10%),
        radial-gradient(circle at 52% 74%,rgba(255,191,107,.42),transparent 8%),
        linear-gradient(135deg,#0d2036,#07111f);
      border:1px solid rgba(255,255,255,.1);
    }
    .cover-orbit:before,.cover-orbit:after{
      content:"";
      position:absolute;
      inset:24px;
      border-radius:50%;
      border:1px solid rgba(94,231,255,.2);
      transform:rotate(-16deg);
    }
    .cover-orbit:after{
      inset:52px;
      border-color:rgba(255,255,255,.18);
      transform:rotate(18deg);
    }
    .featured-card h2{
      position:relative;
      font-size:24px;
      line-height:1.35;
      margin:0 0 12px;
      font-weight:800;
    }
    .featured-card p{position:relative;color:var(--muted);margin:0 0 18px}
    .tag-row{display:flex;gap:8px;flex-wrap:wrap}
    .tag{
      display:inline-flex;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      color:#dff8ff;
      border:1px solid rgba(94,231,255,.18);
      background:rgba(94,231,255,.07);
    }
    .section{
      padding:84px 0;
      position:relative;
    }
    .section-title{
      max-width:760px;
      margin-bottom:34px;
    }
    .section-title.center{text-align:center;margin-left:auto;margin-right:auto}
    .section-kicker{
      color:var(--cyan);
      font-weight:750;
      font-size:14px;
      letter-spacing:.12em;
      margin-bottom:10px;
    }
    h2{
      font-size:clamp(28px,3.2vw,44px);
      line-height:1.18;
      letter-spacing:-.03em;
      font-weight:800;
      margin:0 0 14px;
    }
    .section-title p{color:var(--muted);font-size:16px;margin:0}
    .insight-grid{
      display:grid;
      grid-template-columns:1.12fr .88fr;
      gap:24px;
      align-items:stretch;
    }
    .story-card,.compact-card,.quote-card,.timeline-card,.audience-card,.faq-wrap,.consult-panel{
      border:1px solid rgba(255,255,255,.1);
      border-radius:var(--radius);
      background:linear-gradient(180deg,rgba(16,33,54,.86),rgba(8,18,32,.86));
      box-shadow:var(--shadow-soft);
      transition:var(--transition);
    }
    .story-card:hover,.compact-card:hover,.audience-card:hover{
      transform:translateY(-4px);
      border-color:rgba(94,231,255,.32);
      box-shadow:0 20px 55px rgba(0,0,0,.34);
    }
    .story-card{
      padding:28px;
      display:grid;
      grid-template-columns:180px 1fr;
      gap:24px;
      min-height:260px;
    }
    .story-visual{
      border-radius:22px;
      min-height:200px;
      background:
        linear-gradient(135deg,rgba(94,231,255,.18),rgba(155,124,255,.12)),
        repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 1px,transparent 1px 12px);
      border:1px solid rgba(94,231,255,.16);
      position:relative;
      overflow:hidden;
    }
    .story-visual:after{
      content:"";
      position:absolute;
      width:120px;
      height:120px;
      border-radius:50%;
      right:-24px;
      bottom:-28px;
      background:radial-gradient(circle,rgba(94,231,255,.55),transparent 68%);
    }
    .story-card h3,.compact-card h3,.audience-card h3{
      font-size:22px;
      font-weight:800;
      margin:0 0 10px;
    }
    .story-card p,.compact-card p,.audience-card p,.timeline-card p{color:var(--muted);margin:0}
    .benefit-list{
      display:grid;
      gap:12px;
      margin-top:18px;
    }
    .benefit-item{
      display:flex;
      gap:10px;
      color:#d8e8f7;
      font-size:14px;
    }
    .benefit-item:before{
      content:"";
      flex:0 0 8px;
      width:8px;
      height:8px;
      margin-top:10px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 14px rgba(113,245,189,.75);
    }
    .compact-stack{display:grid;gap:18px}
    .compact-card{padding:24px}
    .metric-line{
      display:flex;
      align-items:flex-end;
      gap:10px;
      margin-top:18px;
      color:#fff;
    }
    .metric-line strong{font-size:36px;line-height:1;color:var(--cyan)}
    .metric-line span{color:var(--muted);font-size:13px}
    .editorial-flow{
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:24px;
      align-items:start;
    }
    .quote-card{
      padding:30px;
      position:sticky;
      top:112px;
      background:
        radial-gradient(circle at 90% 10%,rgba(255,191,107,.12),transparent 34%),
        linear-gradient(180deg,rgba(18,38,61,.88),rgba(8,18,32,.9));
    }
    .quote-mark{
      font-size:54px;
      line-height:1;
      color:var(--amber);
      opacity:.9;
      margin-bottom:8px;
    }
    .quote-card blockquote{
      margin:0 0 18px;
      color:#eaf6ff;
      font-size:20px;
      line-height:1.6;
      font-weight:650;
    }
    .quote-card cite{color:var(--muted);font-style:normal}
    .topic-list{display:grid;gap:18px}
    .topic-row{
      display:grid;
      grid-template-columns:120px 1fr;
      gap:20px;
      padding:22px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.035);
      transition:var(--transition);
    }
    .topic-row:hover{
      background:rgba(94,231,255,.06);
      border-color:rgba(94,231,255,.28);
      transform:translateX(4px);
    }
    .topic-index{
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      border-radius:18px;
      background:rgba(94,231,255,.07);
      border:1px solid rgba(94,231,255,.18);
      color:var(--cyan);
      font-weight:800;
      min-height:110px;
    }
    .topic-index span{font-size:12px;color:var(--muted);font-weight:600}
    .topic-row h3{font-size:21px;font-weight:800;margin:0 0 8px}
    .topic-row p{margin:0;color:var(--muted)}
    .read-gain{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .gain-card{
      padding:22px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.1);
      background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
      min-height:168px;
      transition:var(--transition);
    }
    .gain-card:hover{transform:translateY(-4px);border-color:rgba(94,231,255,.28)}
    .gain-icon{
      width:38px;
      height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      margin-bottom:14px;
      color:#06101d;
      font-weight:900;
      background:linear-gradient(135deg,var(--cyan),var(--blue));
    }
    .gain-card h3{font-size:18px;font-weight:800;margin:0 0 8px}
    .gain-card p{font-size:14px;color:var(--muted);margin:0}
    .timeline-card{
      padding:30px;
      overflow:hidden;
    }
    .timeline{
      display:grid;
      gap:0;
      position:relative;
    }
    .timeline:before{
      content:"";
      position:absolute;
      left:18px;
      top:8px;
      bottom:8px;
      width:1px;
      background:linear-gradient(to bottom,var(--cyan),rgba(94,231,255,.08));
    }
    .timeline-step{
      display:grid;
      grid-template-columns:42px 1fr;
      gap:18px;
      padding:0 0 26px;
      position:relative;
    }
    .timeline-step:last-child{padding-bottom:0}
    .timeline-dot{
      width:36px;
      height:36px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#06101d;
      font-weight:850;
      background:linear-gradient(135deg,var(--cyan),var(--blue));
      box-shadow:0 0 20px rgba(94,231,255,.28);
      z-index:1;
    }
    .timeline-step h3{font-size:19px;font-weight:800;margin:0 0 6px}
    .audience-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .audience-card{padding:24px}
    .audience-card .tag{margin-bottom:16px}
    .faq-wrap{
      padding:10px;
      background:rgba(9,20,35,.74);
    }
    .accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:transparent}
    .accordion-item{
      color:var(--text);
      border:1px solid rgba(255,255,255,.09)!important;
      background:rgba(255,255,255,.035)!important;
      border-radius:18px!important;
      overflow:hidden;
      margin-bottom:12px;
    }
    .accordion-button{
      color:#eef7ff!important;
      background:transparent!important;
      box-shadow:none!important;
      padding:20px 22px;
      font-weight:800;
    }
    .accordion-button:focus{box-shadow:0 0 0 3px rgba(94,231,255,.16)!important}
    .accordion-button:after{
      filter:invert(1) grayscale(1);
      opacity:.75;
    }
    .accordion-body{
      color:var(--muted);
      padding:0 22px 22px;
    }
    .consult-panel{
      padding:34px;
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:28px;
      align-items:center;
      background:
        radial-gradient(circle at 20% 20%,rgba(94,231,255,.16),transparent 34%),
        radial-gradient(circle at 90% 85%,rgba(155,124,255,.14),transparent 34%),
        linear-gradient(145deg,rgba(17,36,58,.92),rgba(6,14,26,.94));
    }
    .consult-panel h2{margin-bottom:14px}
    .consult-panel p{color:var(--muted);margin:0}
    .form-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    .form-control,.form-select{
      border-radius:15px;
      border:1px solid rgba(255,255,255,.12);
      color:#fff;
      background:rgba(3,10,20,.55);
      padding:13px 14px;
      box-shadow:none;
    }
    .form-control::placeholder{color:#71849b}
    .form-control:focus,.form-select:focus{
      color:#fff;
      background:rgba(3,10,20,.76);
      border-color:rgba(94,231,255,.62);
      box-shadow:0 0 0 4px rgba(94,231,255,.12);
    }
    textarea.form-control{min-height:116px;grid-column:1/-1}
    .form-submit{grid-column:1/-1;display:flex;align-items:center;gap:14px}
    .form-note{color:var(--weak);font-size:13px}
    .site-footer{
      border-top:1px solid rgba(255,255,255,.09);
      background:linear-gradient(180deg,rgba(4,9,19,.72),#030711);
      padding:58px 0 28px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.25fr .7fr 1fr;
      gap:36px;
      align-items:start;
    }
    .footer-brand p{
      max-width:480px;
      color:var(--muted);
      margin:18px 0 0;
    }
    .footer-col h3{
      font-size:15px;
      margin:0 0 16px;
      font-weight:800;
      color:#fff;
    }
    .footer-links{display:grid;gap:10px;color:var(--muted);font-size:14px}
    .footer-links a:hover{color:var(--cyan);transform:translateX(3px)}
    .copyright{
      margin-top:36px;
      padding-top:22px;
      border-top:1px solid rgba(255,255,255,.08);
      display:flex;
      justify-content:space-between;
      gap:18px;
      color:var(--weak);
      font-size:13px;
      flex-wrap:wrap;
    }
    @media (max-width:1199px){
      .desktop-nav,.nav-actions{display:none}
      .menu-btn{display:block}
      .hero-layout,.insight-grid,.editorial-flow,.consult-panel{grid-template-columns:1fr}
      .featured-card{min-height:auto}
      .quote-card{position:relative;top:auto}
      .read-gain{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:767px){
      .site-container{width:min(calc(100% - 28px),var(--container))}
      .nav-wrap{height:70px}
      .brand-name{font-size:14px}
      .brand-mark{width:38px;height:38px;border-radius:14px}
      .page-hero{padding:38px 0 56px}
      .hero-lead{font-size:16px}
      .section{padding:58px 0}
      .story-card,.topic-row{grid-template-columns:1fr}
      .story-visual{min-height:150px}
      .audience-grid,.footer-grid{grid-template-columns:1fr}
      .form-grid{grid-template-columns:1fr}
      .form-submit{align-items:stretch;flex-direction:column}
      .form-submit .btn{width:100%}
      .consult-panel{padding:24px}
      .copyright{display:grid}
    }
    @media (max-width:520px){
      h1{font-size:34px}
      .read-gain{grid-template-columns:1fr}
      .hero-meta{display:grid}
      .featured-card,.story-card,.compact-card,.quote-card,.timeline-card,.audience-card{border-radius:18px}
      .topic-index{align-items:flex-start;padding:18px;min-height:auto}
    }

/* roulang page: category1 */
:root{
      --bg-0:#050b14;
      --bg-1:#07111f;
      --bg-2:#0b1729;
      --bg-3:#10203a;
      --card:#0d1727cc;
      --card-solid:#0f1a2b;
      --line:rgba(173, 205, 255, .14);
      --line-strong:rgba(135, 210, 255, .26);
      --text:#ecf4ff;
      --muted:#9fb1cb;
      --subtle:#7688a5;
      --accent:#39d3ff;
      --accent-2:#7aa6ff;
      --accent-3:#9b7bff;
      --warn:#ffb65c;
      --ok:#5ce1b6;
      --shadow:0 18px 40px rgba(0,0,0,.34);
      --shadow-soft:0 10px 24px rgba(0,0,0,.24);
      --radius:22px;
      --radius-sm:16px;
      --radius-lg:28px;
      --container:1320px;
      --header-h:84px;
      --space-1:8px;
      --space-2:12px;
      --space-3:16px;
      --space-4:20px;
      --space-5:28px;
      --space-6:36px;
      --space-7:48px;
      --space-8:64px;
      --space-9:88px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      font-family: "HarmonyOS Sans SC","PingFang SC","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif;
      background:
        radial-gradient(1000px 480px at 12% 8%, rgba(57,211,255,.12), transparent 58%),
        radial-gradient(820px 420px at 88% 4%, rgba(155,123,255,.11), transparent 56%),
        radial-gradient(760px 360px at 50% 100%, rgba(92,225,182,.07), transparent 58%),
        linear-gradient(180deg, #06101d 0%, #07111f 40%, #050b14 100%);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:72px 72px;
      opacity:.09;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,0) 28%, rgba(0,0,0,.06) 74%, rgba(0,0,0,0));
    }
    a{color:inherit;text-decoration:none;transition:all .22s var(--ease)}
    a:hover{color:var(--accent)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(57,211,255,.28);color:#fff}
    .site-container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1030;
      padding:16px 0;
      background:linear-gradient(180deg, rgba(5,11,20,.72), rgba(5,11,20,.36));
      border-bottom:1px solid transparent;
      backdrop-filter: blur(0px);
      transition:all .24s var(--ease);
    }
    .site-header.is-scrolled{
      background:rgba(6,12,22,.72);
      border-bottom-color:rgba(174, 205, 255, .11);
      backdrop-filter: blur(18px);
      box-shadow:0 12px 30px rgba(0,0,0,.18);
    }
    .nav-wrap{
      min-height:52px;
      display:flex;
      align-items:center;
      gap:18px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      flex-shrink:0;
      min-width:0;
      color:var(--text);
    }
    .brand:hover{transform:translateY(-1px)}
    .brand-mark{
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius:16px;
      font-weight:800;
      letter-spacing:.04em;
      color:#08111e;
      background:
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(186,229,255,.92));
      box-shadow:
        0 10px 30px rgba(57,211,255,.16),
        inset 0 1px 0 rgba(255,255,255,.5);
      position:relative;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:16px;
      padding:1px;
      background:linear-gradient(145deg, rgba(57,211,255,.65), rgba(155,123,255,.45), transparent 75%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.08;
      min-width:0;
    }
    .brand-name{
      font-size:16px;
      font-weight:700;
      letter-spacing:.02em;
      white-space:nowrap;
    }
    .brand-sub{
      margin-top:4px;
      font-size:11px;
      letter-spacing:.18em;
      color:var(--muted);
      white-space:nowrap;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:8px;
      margin-left:auto;
      margin-right:auto;
      padding:6px;
      border-radius:999px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(171, 203, 255, .09);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .nav-link-custom{
      position:relative;
      padding:11px 16px;
      color:var(--muted);
      border-radius:999px;
      font-size:14px;
      font-weight:600;
      letter-spacing:.01em;
      white-space:nowrap;
    }
    .nav-link-custom:hover,
    .nav-link-custom.active{
      color:var(--text);
      background:rgba(255,255,255,.04);
    }
    .nav-link-custom::after{
      content:"";
      position:absolute;
      left:18px;
      right:18px;
      bottom:6px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity:0;
      transform:scaleX(.45);
      transition:all .22s var(--ease);
    }
    .nav-link-custom:hover::after,
    .nav-link-custom.active::after{
      opacity:1;
      transform:scaleX(1);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-shrink:0;
    }
    .btn{
      border:0;
      border-radius:999px;
      padding:12px 18px;
      font-weight:700;
      font-size:14px;
      line-height:1;
      transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:focus-visible,
    .nav-link-custom:focus-visible,
    .brand:focus-visible,
    .menu-btn:focus-visible,
    .footer-links a:focus-visible,
    .chip:focus-visible{
      outline:2px solid rgba(57,211,255,.78);
      outline-offset:3px;
      box-shadow:0 0 0 4px rgba(57,211,255,.14);
    }
    .btn-ghost{
      color:var(--text);
      background:rgba(255,255,255,.04);
      border:1px solid rgba(171, 203, 255, .12);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .btn-ghost:hover{
      border-color:rgba(57,211,255,.35);
      background:rgba(57,211,255,.08);
      color:var(--text);
      box-shadow:0 12px 28px rgba(57,211,255,.08);
    }
    .btn-primary-glow{
      color:#031018;
      background:linear-gradient(135deg, #77e6ff 0%, #39d3ff 52%, #88a9ff 100%);
      box-shadow:0 12px 28px rgba(57,211,255,.18), inset 0 1px 0 rgba(255,255,255,.55);
    }
    .btn-primary-glow:hover{
      color:#02131e;
      box-shadow:0 16px 34px rgba(57,211,255,.25), 0 0 0 1px rgba(57,211,255,.18);
    }
    .menu-btn{
      display:none;
      margin-left:auto;
      width:46px;
      height:46px;
      border-radius:14px;
      border:1px solid rgba(171, 203, 255, .12);
      background:rgba(255,255,255,.04);
      color:var(--text);
      align-items:center;
      justify-content:center;
      position:relative;
      flex-shrink:0;
    }
    .menu-btn span,
    .menu-btn span::before,
    .menu-btn span::after{
      display:block;
      width:18px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, #dff6ff, #8bdfff);
      position:relative;
      transition:all .22s var(--ease);
    }
    .menu-btn span::before,
    .menu-btn span::after{
      content:"";
      position:absolute;
      left:0;
    }
    .menu-btn span::before{top:-6px}
    .menu-btn span::after{top:6px}
    .offcanvas{
      background:linear-gradient(180deg, rgba(8,15,27,.98), rgba(5,10,18,.98));
      color:var(--text);
      border-left:1px solid rgba(171, 203, 255, .12);
      width:min(88vw, 360px);
    }
    .offcanvas-header,
    .offcanvas-body{
      padding:22px;
    }
    .offcanvas .btn-close{
      filter:invert(1) grayscale(1);
      opacity:.9;
      box-shadow:none;
    }
    .mobile-nav{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:18px;
    }
    .mobile-nav .nav-link-custom{
      display:flex;
      width:100%;
      padding:14px 16px;
      border-radius:16px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(171, 203, 255, .08);
    }
    .mobile-nav .nav-link-custom.active{
      background:rgba(57,211,255,.09);
      border-color:rgba(57,211,255,.24);
    }
    .mobile-panel{
      margin-top:24px;
      padding:18px;
      border-radius:20px;
      border:1px solid rgba(171, 203, 255, .09);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    }
    .mobile-panel small{color:var(--muted);display:block;line-height:1.7}
    main{position:relative;z-index:1}
    .hero-section{
      padding:34px 0 24px;
    }
    .hero-wrap{
      padding:34px 0 16px;
    }
    .breadcrumb-mini{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:18px;
      color:var(--muted);
      font-size:13px;
    }
    .breadcrumb-mini a{
      color:#cfe7ff;
      opacity:.88;
    }
    .breadcrumb-mini span.sep{
      color:rgba(224,240,255,.28);
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
      gap:28px;
      align-items:stretch;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-bottom:16px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(57,211,255,.08);
      color:#bff2ff;
      border:1px solid rgba(57,211,255,.14);
      font-size:13px;
      font-weight:700;
      letter-spacing:.02em;
    }
    .eyebrow::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 6px rgba(57,211,255,.12);
    }
    h1,h2,h3,p{margin:0}
    .hero-title{
      font-size:clamp(32px, 4.2vw, 58px);
      line-height:1.06;
      letter-spacing:-.02em;
      font-weight:800;
      max-width:12ch;
    }
    .hero-title .accent{
      color:#b6f5ff;
      text-shadow:0 0 26px rgba(57,211,255,.18);
    }
    .hero-desc{
      margin-top:18px;
      font-size:17px;
      line-height:1.86;
      color:var(--muted);
      max-width:62ch;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:28px;
    }
    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:24px;
    }
    .meta-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(171, 203, 255, .12);
      background:rgba(255,255,255,.03);
      color:#dce9f8;
      font-size:13px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .meta-pill i{
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--ok);
      display:inline-block;
      box-shadow:0 0 0 4px rgba(92,225,182,.12);
    }
    .hero-visual{
      position:relative;
      min-height:100%;
      padding:22px;
      border-radius:var(--radius-lg);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
        radial-gradient(420px 220px at 30% 10%, rgba(57,211,255,.16), transparent 62%),
        radial-gradient(320px 180px at 85% 0%, rgba(155,123,255,.14), transparent 58%),
        rgba(9,15,26,.75);
      border:1px solid rgba(172, 205, 255, .14);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .hero-visual::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(circle at 20% 18%, rgba(57,211,255,.15), transparent 18%),
        radial-gradient(circle at 76% 12%, rgba(155,123,255,.16), transparent 16%),
        radial-gradient(circle at 80% 80%, rgba(92,225,182,.11), transparent 18%);
      pointer-events:none;
    }
    .signal-board{
      position:relative;
      display:grid;
      gap:14px;
      grid-template-columns:1fr 1fr;
      z-index:1;
    }
    .signal-card{
      padding:18px;
      border-radius:20px;
      background:linear-gradient(180deg, rgba(13,21,35,.9), rgba(10,17,28,.78));
      border:1px solid rgba(171, 203, 255, .11);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
      min-height:132px;
    }
    .signal-card.big{
      grid-column:1 / -1;
      min-height:188px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background:
        linear-gradient(180deg, rgba(19,30,50,.92), rgba(10,17,28,.82)),
        radial-gradient(220px 120px at 82% 18%, rgba(57,211,255,.14), transparent 60%);
    }
    .signal-card h3{
      font-size:15px;
      font-weight:700;
      margin-bottom:10px;
      color:#eff7ff;
    }
    .signal-card p{
      color:var(--muted);
      font-size:14px;
      line-height:1.75;
    }
    .signal-stat{
      display:flex;
      align-items:end;
      gap:10px;
      margin-top:12px;
    }
    .signal-stat strong{
      font-size:30px;
      line-height:1;
      letter-spacing:-.03em;
      color:#dff8ff;
    }
    .signal-stat span{
      font-size:13px;
      color:var(--subtle);
      padding-bottom:4px;
    }
    .signal-tags{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .signal-tag{
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      color:#d8e8fb;
      font-size:12px;
      border:1px solid rgba(171, 203, 255, .1);
    }
    .section{
      padding:var(--space-9) 0;
      position:relative;
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:20px;
      margin-bottom:28px;
    }
    .section-head .title-wrap{max-width:860px}
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.035);
      border:1px solid rgba(171, 203, 255, .1);
      color:#cfe7ff;
      font-size:13px;
      font-weight:700;
      margin-bottom:14px;
    }
    .section-kicker::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 0 0 5px rgba(57,211,255,.12);
    }
    .section-title{
      font-size:clamp(24px, 3vw, 38px);
      font-weight:800;
      line-height:1.16;
      letter-spacing:-.02em;
    }
    .section-subtitle{
      margin-top:12px;
      color:var(--muted);
      font-size:16px;
      line-height:1.85;
      max-width:72ch;
    }
    .split-layout{
      display:grid;
      grid-template-columns:280px minmax(0,1fr);
      gap:22px;
      align-items:start;
    }
    .anchor-panel{
      position:sticky;
      top:108px;
      padding:20px;
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(171, 203, 255, .12);
      box-shadow:var(--shadow-soft);
    }
    .anchor-panel h3{
      font-size:16px;
      font-weight:750;
      margin-bottom:12px;
    }
    .anchor-panel p{
      color:var(--muted);
      font-size:14px;
      line-height:1.75;
      margin-bottom:16px;
    }
    .anchor-list{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .chip{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.035);
      border:1px solid rgba(171, 203, 255, .08);
      color:#dce9f8;
      font-size:14px;
      font-weight:600;
    }
    .chip:hover{
      border-color:rgba(57,211,255,.26);
      background:rgba(57,211,255,.07);
      color:#fff;
      transform:translateX(2px);
    }
    .chip small{
      color:var(--muted);
      font-weight:500;
    }
    .content-stack{
      display:grid;
      gap:18px;
    }
    .solution-card{
      position:relative;
      padding:24px;
      border-radius:var(--radius);
      background:
        linear-gradient(180deg, rgba(13,21,35,.96), rgba(10,17,28,.82));
      border:1px solid rgba(171, 203, 255, .11);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
    }
    .solution-card::before{
      content:"";
      position:absolute;
      left:0;top:0;right:0;
      height:3px;
      background:linear-gradient(90deg, transparent, rgba(57,211,255,.82), rgba(155,123,255,.65), transparent);
      opacity:.85;
    }
    .solution-card:hover{
      transform:translateY(-2px);
      border-color:rgba(57,211,255,.24);
      box-shadow:0 18px 40px rgba(0,0,0,.34), 0 0 0 1px rgba(57,211,255,.05);
    }
    .solution-card-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      margin-bottom:16px;
    }
    .solution-card h3{
      font-size:20px;
      line-height:1.28;
      font-weight:780;
      letter-spacing:-.01em;
      margin-bottom:6px;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      color:#d8e8fb;
      border:1px solid rgba(171, 203, 255, .1);
      font-size:12px;
      font-weight:600;
    }
    .tag.dot::before{
      content:"";
      width:6px;height:6px;border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(57,211,255,.12);
    }
    .triad{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px;
      margin-top:8px;
    }
    .triad-item{
      padding:16px;
      border-radius:18px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(171, 203, 255, .08);
      min-height:130px;
    }
    .triad-item strong{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      color:#dff8ff;
      margin-bottom:10px;
    }
    .triad-item strong::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
    }
    .triad-item p{
      color:var(--muted);
      font-size:14px;
      line-height:1.8;
    }
    .triad-item ul{
      margin:0;
      padding-left:18px;
      color:var(--muted);
      font-size:14px;
      line-height:1.78;
    }
    .triad-item li + li{margin-top:8px}
    .compare-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:20px;
      align-items:stretch;
    }
    .compare-card{
      padding:24px;
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(13,21,35,.92), rgba(10,17,28,.8));
      border:1px solid rgba(171, 203, 255, .11);
      box-shadow:var(--shadow-soft);
    }
    .compare-card h3{
      font-size:20px;
      font-weight:780;
      margin-bottom:16px;
    }
    .compare-table{
      display:grid;
      gap:10px;
    }
    .compare-row{
      display:grid;
      grid-template-columns:120px 1fr;
      gap:12px;
      padding:14px 16px;
      border-radius:16px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(171, 203, 255, .08);
      align-items:start;
    }
    .compare-row .label{
      font-size:13px;
      color:#cfe7ff;
      font-weight:700;
    }
    .compare-row p{
      color:var(--muted);
      font-size:14px;
      line-height:1.75;
    }
    .step-grid{
      display:grid;
      gap:12px;
    }
    .step-item{
      display:flex;
      gap:14px;
      align-items:flex-start;
      padding:16px;
      border-radius:18px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(171, 203, 255, .08);
    }
    .step-num{
      width:38px;height:38px;
      flex:0 0 38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#07111f;
      font-weight:800;
      background:linear-gradient(135deg, #92eeff, #7aa6ff);
      box-shadow:0 10px 20px rgba(57,211,255,.16);
    }
    .step-item h4{
      font-size:15px;
      margin-bottom:6px;
      font-weight:760;
    }
    .step-item p{
      color:var(--muted);
      font-size:14px;
      line-height:1.75;
    }
    .scenario-layout{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:20px;
      align-items:stretch;
    }
    .scenario-feature{
      position:relative;
      padding:28px;
      border-radius:var(--radius-lg);
      background:
        linear-gradient(160deg, rgba(19,30,50,.95), rgba(10,17,28,.78)),
        radial-gradient(380px 180px at 90% 14%, rgba(57,211,255,.13), transparent 60%);
      border:1px solid rgba(171, 203, 255, .12);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .scenario-feature h3{
      font-size:22px;
      font-weight:800;
      line-height:1.3;
      margin-bottom:12px;
    }
    .scenario-feature p{
      color:var(--muted);
      line-height:1.85;
      font-size:15px;
      max-width:58ch;
    }
    .scenario-badges{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:20px;
    }
    .scenario-side{
      display:grid;
      gap:14px;
    }
    .scenario-mini{
      padding:20px;
      border-radius:20px;
      background:rgba(255,255,255,.035);
      border:1px solid rgba(171, 203, 255, .09);
    }
    .scenario-mini h4{
      font-size:16px;
      margin-bottom:10px;
      font-weight:760;
    }
    .scenario-mini ul{
      margin:0;
      padding-left:18px;
      color:var(--muted);
      line-height:1.82;
      font-size:14px;
    }
    .scenario-mini li + li{margin-top:8px}
    .list-check{
      display:grid;
      gap:10px;
      margin-top:16px;
    }
    .list-check .item{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:var(--muted);
      font-size:14px;
      line-height:1.7;
    }
    .list-check .item::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      margin-top:7px;
      background:linear-gradient(135deg, var(--ok), var(--accent));
      box-shadow:0 0 0 4px rgba(92,225,182,.11);
      flex:0 0 8px;
    }
    .faq-section .accordion{
      display:grid;
      gap:14px;
    }
    .accordion-item{
      border:0;
      border-radius:20px !important;
      overflow:hidden;
      background:rgba(255,255,255,.035);
      border:1px solid rgba(171, 203, 255, .09);
      box-shadow:var(--shadow-soft);
    }
    .accordion-button{
      background:transparent;
      color:var(--text);
      padding:20px 22px;
      font-weight:700;
      font-size:15px;
      border:0;
      box-shadow:none !important;
    }
    .accordion-button:not(.collapsed){
      color:#effbff;
      background:rgba(57,211,255,.06);
    }
    .accordion-button::after{
      filter:invert(1) brightness(1.8);
      opacity:.76;
    }
    .accordion-body{
      padding:0 22px 20px;
      color:var(--muted);
      line-height:1.82;
      font-size:14px;
    }
    .consult-layout{
      display:grid;
      grid-template-columns:1fr 1.02fr;
      gap:20px;
      align-items:stretch;
    }
    .consult-card{
      padding:28px;
      border-radius:var(--radius-lg);
      background:
        linear-gradient(180deg, rgba(19,30,50,.95), rgba(10,17,28,.82));
      border:1px solid rgba(171, 203, 255, .12);
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .consult-card::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(420px 180px at 80% 12%, rgba(57,211,255,.14), transparent 60%),
        radial-gradient(300px 160px at 10% 90%, rgba(155,123,255,.13), transparent 62%);
      pointer-events:none;
    }
    .consult-card > *{position:relative;z-index:1}
    .consult-copy h2{
      font-size:clamp(24px, 2.8vw, 36px);
      line-height:1.22;
      font-weight:800;
      margin-bottom:12px;
    }
    .consult-copy p{
      color:var(--muted);
      line-height:1.9;
      font-size:15px;
      max-width:58ch;
    }
    .consult-points{
      margin-top:18px;
      display:grid;
      gap:10px;
    }
    .consult-points .row-point{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#dce9f8;
      font-size:14px;
      line-height:1.72;
    }
    .consult-points .row-point::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--accent);
      margin-top:7px;
      box-shadow:0 0 0 4px rgba(57,211,255,.11);
      flex:0 0 8px;
    }
    .form-panel{
      padding:24px;
      border-radius:var(--radius-lg);
      background:rgba(7,14,24,.8);
      border:1px solid rgba(171, 203, 255, .12);
      box-shadow:var(--shadow-soft);
    }
    .form-panel .form-label{
      color:#dce9f8;
      font-size:13px;
      font-weight:700;
      margin-bottom:8px;
    }
    .form-control,
    .form-select{
      background:rgba(255,255,255,.035);
      border:1px solid rgba(171, 203, 255, .12);
      color:var(--text);
      border-radius:16px;
      padding:14px 16px;
      box-shadow:none !important;
    }
    .form-control::placeholder{color:rgba(159,177,203,.68)}
    .form-control:focus,
    .form-select:focus{
      background:rgba(255,255,255,.045);
      border-color:rgba(57,211,255,.45);
      color:var(--text);
      box-shadow:0 0 0 4px rgba(57,211,255,.12) !important;
    }
    textarea.form-control{
      min-height:132px;
      resize:vertical;
    }
    .form-note{
      margin-top:12px;
      color:var(--muted);
      font-size:13px;
      line-height:1.7;
    }
    .form-status{
      margin-top:14px;
      display:none;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(92,225,182,.2);
      background:rgba(92,225,182,.08);
      color:#dffdf3;
      font-size:14px;
      line-height:1.7;
    }
    .form-status.show{display:block}
    .site-footer{
      margin-top:var(--space-9);
      padding:34px 0 26px;
      border-top:1px solid rgba(171, 203, 255, .1);
      background:linear-gradient(180deg, rgba(4,9,16,.12), rgba(4,9,16,.42));
      position:relative;
      z-index:1;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.3fr .7fr .9fr;
      gap:24px;
      align-items:start;
    }
    .footer-brand p{
      margin-top:16px;
      color:var(--muted);
      line-height:1.8;
      font-size:14px;
      max-width:44ch;
    }
    .footer-col h3{
      font-size:15px;
      margin-bottom:14px;
      font-weight:760;
    }
    .footer-links{
      display:grid;
      gap:10px;
      color:var(--muted);
      font-size:14px;
      line-height:1.72;
    }
    .footer-links a{
      width:fit-content;
      color:#d8e8fb;
    }
    .footer-links a:hover{color:var(--accent)}
    .copyright{
      margin-top:24px;
      padding-top:18px;
      border-top:1px solid rgba(171, 203, 255, .08);
      display:flex;
      flex-wrap:wrap;
      gap:10px 18px;
      justify-content:space-between;
      color:var(--subtle);
      font-size:13px;
      line-height:1.7;
    }
    .section-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(171, 203, 255, .14), transparent);
      margin:0 auto;
      width:min(var(--container), calc(100% - 32px));
    }
    @media (max-width: 1199.98px){
      .hero-grid,
      .compare-grid,
      .scenario-layout,
      .consult-layout,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .split-layout{
        grid-template-columns:1fr;
      }
      .anchor-panel{
        position:relative;
        top:auto;
      }
      .desktop-nav{display:none}
      .menu-btn{display:inline-flex}
      .nav-actions{display:none}
      .hero-title{max-width:14ch}
    }
    @media (max-width: 991.98px){
      .triad{grid-template-columns:1fr}
      .hero-section{padding-top:18px}
      .hero-wrap{padding-top:22px}
      .section{padding:64px 0}
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .hero-desc{font-size:16px}
      .site-container{width:min(var(--container), calc(100% - 24px))}
    }
    @media (max-width: 767.98px){
      .nav-wrap{gap:12px}
      .brand-mark{width:40px;height:40px;border-radius:14px}
      .brand-name{font-size:15px}
      .brand-sub{letter-spacing:.16em}
      .hero-title{font-size:clamp(30px, 10vw, 42px)}
      .signal-board{grid-template-columns:1fr}
      .signal-card.big{min-height:170px}
      .compare-row{grid-template-columns:1fr}
      .consult-card, .form-panel, .scenario-feature, .solution-card, .compare-card, .anchor-panel{
        padding:20px;
      }
      .section{padding:54px 0}
      .copyright{
        flex-direction:column;
        gap:6px;
      }
    }
    @media (max-width: 575.98px){
      .site-header{padding:12px 0}
      .nav-wrap{min-height:44px}
      .brand-text{display:none}
      .hero-actions .btn,
      .nav-actions .btn{
        width:100%;
      }
      .hero-actions{
        flex-direction:column;
      }
      .hero-meta{gap:8px}
      .meta-pill{width:100%;justify-content:flex-start}
      .signal-card,
      .signal-card.big{
        min-height:auto;
      }
      .accordion-button,
      .accordion-body{padding-left:16px;padding-right:16px}
      .accordion-body{padding-bottom:16px}
      .site-container{width:min(var(--container), calc(100% - 20px))}
    }