/* roulang page: index */
:root{
      --brand:#16A79A;
      --brand-2:#18A999;
      --brand-soft:#DDF8F2;
      --coral:#FF8A5B;
      --coral-soft:#FFF1E8;
      --ink:#193833;
      --muted:#647B76;
      --bg:#FBFCF8;
      --bg-2:#F7FAF5;
      --card:#FFFFFF;
      --card-tint:#F8FFFC;
      --border:#DCE9E5;
      --shadow:0 18px 50px rgba(25,56,51,.08);
      --shadow-hover:0 24px 70px rgba(22,167,154,.16);
      --radius-xl:36px;
      --radius-lg:28px;
      --radius-md:20px;
      --radius-sm:14px;
      --gradient:linear-gradient(135deg,#16A79A 0%,#7ADCCB 52%,#FFB088 100%);
      --gradient-soft:linear-gradient(135deg,rgba(221,248,242,.92),rgba(255,241,232,.78));
      --nav-height:76px;
      --container:1220px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 8%,rgba(122,220,203,.28),transparent 32%),
        radial-gradient(circle at 88% 16%,rgba(255,176,136,.22),transparent 28%),
        linear-gradient(180deg,var(--bg) 0%,#fff 48%,var(--bg-2) 100%);
      line-height:1.8;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:.22s ease}
    a:hover{color:var(--brand)}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(22,167,154,.18);color:var(--ink)}
    .site-wrap{position:relative;min-height:100vh}
    .container-xl{max-width:var(--container)}
    .section{padding:96px 0;position:relative}
    .section-tight{padding:72px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(221,248,242,.9);
      color:#117d73;
      font-size:14px;
      font-weight:700;
      border:1px solid rgba(22,167,154,.16);
    }
    .eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--coral);
      box-shadow:0 0 0 5px rgba(255,138,91,.13);
    }
    .section-title{
      margin:16px 0 12px;
      font-size:clamp(30px,3.6vw,42px);
      line-height:1.22;
      font-weight:800;
      letter-spacing:-.02em;
      color:var(--ink);
    }
    .section-desc{
      max-width:760px;
      color:var(--muted);
      font-size:17px;
      margin:0;
    }
    .text-muted-green{color:var(--muted)}
    .site-header{
      position:sticky;
      top:18px;
      z-index:1040;
      padding:0 18px;
      pointer-events:none;
    }
    .dock-nav{
      max-width:1180px;
      margin:0 auto;
      pointer-events:auto;
      background:rgba(251,252,248,.92);
      border:1px solid rgba(220,233,229,.86);
      border-radius:999px;
      box-shadow:0 16px 44px rgba(25,56,51,.1);
      backdrop-filter:blur(12px);
      padding:10px 12px;
    }
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--ink);
      font-weight:800;
      letter-spacing:-.02em;
      white-space:nowrap;
      margin-right:14px;
    }
    .logo-mark{
      width:38px;height:38px;border-radius:16px;
      background:var(--gradient);
      display:grid;place-items:center;
      color:#fff;
      box-shadow:0 12px 26px rgba(22,167,154,.24);
      position:relative;
      flex:0 0 auto;
    }
    .logo-mark::before,.logo-mark::after{content:"";position:absolute;background:#fff;border-radius:3px}
    .logo-mark::before{width:18px;height:5px}
    .logo-mark::after{width:5px;height:18px}
    .logo-text{font-size:16px}
    .navbar-toggler{
      border:0;
      border-radius:16px;
      padding:9px 11px;
      background:var(--brand-soft);
      color:var(--ink);
    }
    .navbar-toggler:focus{box-shadow:0 0 0 4px rgba(22,167,154,.18)}
    .nav-link{
      border-radius:999px;
      padding:9px 13px!important;
      color:var(--ink);
      font-size:14.5px;
      font-weight:700;
    }
    .nav-link:hover,.nav-link:focus{
      background:var(--brand-soft);
      color:#0e8177;
    }
    .nav-link.active{
      background:linear-gradient(135deg,rgba(22,167,154,.14),rgba(255,138,91,.12));
      color:#0d766d!important;
    }
    .nav-search{
      min-width:176px;
      position:relative;
      margin-left:auto;
    }
    .nav-search input{
      width:100%;
      border:1px solid var(--border);
      border-radius:999px;
      background:#fff;
      padding:9px 14px 9px 34px;
      outline:none;
      font-size:14px;
      color:var(--ink);
      transition:.22s ease;
    }
    .nav-search span{
      position:absolute;left:12px;top:50%;transform:translateY(-50%);
      color:var(--muted);
      font-size:14px;
    }
    .nav-search input:focus{
      border-color:var(--brand);
      box-shadow:0 0 0 4px rgba(22,167,154,.14);
    }
    .btn-brand,.btn-outline-brand{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:999px;
      padding:13px 22px;
      font-weight:800;
      border:1px solid transparent;
      transition:.22s ease;
      line-height:1.2;
      white-space:nowrap;
    }
    .btn-brand{
      background:linear-gradient(135deg,var(--coral),#FFB088 38%,var(--brand) 100%);
      color:#fff;
      box-shadow:0 14px 30px rgba(255,138,91,.22);
    }
    .btn-brand:hover,.btn-brand:focus{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 20px 42px rgba(22,167,154,.22);
    }
    .btn-outline-brand{
      background:rgba(255,255,255,.82);
      color:var(--ink);
      border-color:rgba(22,167,154,.34);
    }
    .btn-outline-brand:hover,.btn-outline-brand:focus{
      background:var(--brand-soft);
      border-color:var(--brand);
      color:#0d766d;
      transform:translateY(-2px);
    }
    .btn-brand:focus-visible,.btn-outline-brand:focus-visible{
      outline:4px solid rgba(22,167,154,.22);
      outline-offset:3px;
    }
    .hero{
      padding:112px 0 76px;
      position:relative;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(22,167,154,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(22,167,154,.06) 1px,transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(180deg,rgba(0,0,0,.65),transparent 78%);
      pointer-events:none;
    }
    .hero-content{position:relative;z-index:1}
    .hero h1{
      font-size:clamp(34px,5.1vw,58px);
      line-height:1.12;
      font-weight:850;
      letter-spacing:-.035em;
      margin:18px 0 18px;
      color:var(--ink);
    }
    .hero .lead{
      max-width:680px;
      font-size:18px;
      color:var(--muted);
      line-height:1.9;
      margin-bottom:26px;
    }
    .trust-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:0 0 28px;
      padding:0;
      list-style:none;
    }
    .trust-row li{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.82);
      border:1px solid var(--border);
      color:var(--ink);
      font-size:14px;
      font-weight:700;
    }
    .trust-row li i{
      width:9px;height:9px;border-radius:50%;
      background:var(--brand);
      display:inline-block;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:14px}
    .dashboard-shell{
      background:linear-gradient(180deg,#fff,rgba(248,255,252,.92));
      border:1px solid var(--border);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
      padding:22px;
      position:relative;
      overflow:hidden;
    }
    .dashboard-shell::before{
      content:"";
      position:absolute;
      top:0;left:0;right:0;height:6px;
      background:var(--gradient);
    }
    .dash-head{
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-start;
      margin-bottom:18px;
    }
    .dash-title{font-weight:850;font-size:20px;margin:0}
    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 10px;
      border-radius:999px;
      background:var(--coral-soft);
      color:#b85535;
      font-size:13px;
      font-weight:800;
      white-space:nowrap;
    }
    .status-pill::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--coral);
    }
    .metric-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    .metric-card{
      padding:18px;
      border:1px solid var(--border);
      border-radius:24px;
      background:linear-gradient(135deg,#fff 0%,#F8FFFC 100%);
      transition:.22s ease;
    }
    .metric-card:hover{
      border-color:rgba(22,167,154,.45);
      transform:translateY(-3px);
      box-shadow:var(--shadow-hover);
    }
    .metric-num{
      font-size:32px;
      line-height:1;
      font-weight:850;
      color:var(--brand);
      letter-spacing:-.03em;
    }
    .metric-label{font-weight:800;margin-top:8px}
    .metric-note{font-size:13.5px;color:var(--muted);line-height:1.55;margin-top:4px}
    .mini-trend{
      margin-top:18px;
      padding:18px;
      border-radius:24px;
      background:var(--gradient-soft);
      border:1px solid rgba(22,167,154,.15);
    }
    .trend-bars{
      display:flex;
      align-items:end;
      gap:8px;
      height:74px;
      margin-top:12px;
    }
    .trend-bars span{
      flex:1;
      border-radius:999px 999px 8px 8px;
      background:linear-gradient(180deg,var(--brand),#7ADCCB);
      min-height:22px;
      opacity:.9;
    }
    .trend-bars span:nth-child(2){height:42px}
    .trend-bars span:nth-child(3){height:54px;background:linear-gradient(180deg,#FFB088,var(--coral))}
    .trend-bars span:nth-child(4){height:48px}
    .trend-bars span:nth-child(5){height:66px}
    .trend-bars span:nth-child(6){height:58px;background:linear-gradient(180deg,#FFB088,var(--coral))}
    .capability-card{
      height:100%;
      padding:26px;
      border-radius:var(--radius-lg);
      border:1px solid var(--border);
      background:#fff;
      box-shadow:0 10px 34px rgba(25,56,51,.05);
      position:relative;
      overflow:hidden;
      transition:.22s ease;
    }
    .capability-card::before{
      content:"";
      position:absolute;
      left:0;top:0;width:100%;height:5px;
      background:linear-gradient(90deg,var(--brand),rgba(255,138,91,.72));
      opacity:.85;
    }
    .capability-card:hover{
      transform:translateY(-5px);
      border-color:rgba(22,167,154,.45);
      box-shadow:var(--shadow-hover);
    }
    .capability-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:14px;
      margin-bottom:16px;
    }
    .capability-icon{
      width:48px;height:48px;border-radius:18px;
      display:grid;place-items:center;
      background:var(--brand-soft);
      color:var(--brand);
      font-weight:900;
      font-size:20px;
    }
    .data-badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 10px;
      border-radius:999px;
      background:#F8FFFC;
      border:1px solid var(--border);
      color:var(--muted);
      font-size:13px;
      font-weight:750;
    }
    .data-badge::before{
      content:"";
      width:7px;height:7px;border-radius:50%;
      background:var(--brand);
    }
    .capability-card h3{font-size:22px;font-weight:850;margin:0 0 8px}
    .capability-card p{color:var(--muted);margin:0}
    .service-zone{
      border-radius:var(--radius-xl);
      background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(248,255,252,.92));
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      padding:26px;
    }
    .solution-tall{
      min-height:100%;
      border-radius:32px;
      padding:30px;
      color:#fff;
      background:
        radial-gradient(circle at 24% 18%,rgba(255,255,255,.24),transparent 26%),
        linear-gradient(135deg,#138d83 0%,#16A79A 54%,#FF9B70 100%);
      box-shadow:0 20px 50px rgba(22,167,154,.2);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
      position:relative;
    }
    .solution-tall::after{
      content:"";
      position:absolute;
      right:-56px;bottom:-56px;
      width:180px;height:180px;border-radius:50%;
      border:32px solid rgba(255,255,255,.14);
    }
    .solution-tall h3{font-size:28px;font-weight:850;margin:16px 0 10px}
    .solution-tall p{color:rgba(255,255,255,.86);margin:0}
    .solution-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
    .solution-list li{
      display:flex;gap:10px;align-items:flex-start;
      padding:12px 14px;
      border-radius:18px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter:blur(4px);
    }
    .mini-card{
      height:100%;
      padding:22px;
      border-radius:26px;
      background:#fff;
      border:1px solid var(--border);
      transition:.22s ease;
    }
    .mini-card:hover{
      transform:translateY(-4px);
      border-color:rgba(22,167,154,.48);
      background:linear-gradient(135deg,#fff,#F8FFFC);
      box-shadow:var(--shadow-hover);
    }
    .mini-card .tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
    .soft-tag{
      padding:6px 9px;
      border-radius:999px;
      font-size:12.5px;
      font-weight:750;
      background:var(--coral-soft);
      color:#ad5437;
      border:1px solid rgba(255,138,91,.14);
    }
    .compare-wrap{
      border-radius:var(--radius-xl);
      background:linear-gradient(135deg,rgba(255,241,232,.72),rgba(221,248,242,.72));
      padding:24px;
      border:1px solid rgba(220,233,229,.88);
    }
    .compare-panel{
      height:100%;
      border-radius:30px;
      padding:28px;
      border:1px solid var(--border);
      background:#fff;
      box-shadow:0 12px 38px rgba(25,56,51,.05);
    }
    .compare-panel.featured{
      background:linear-gradient(135deg,#F8FFFC 0%,#FFFFFF 55%,#FFF7F1 100%);
      border-color:rgba(22,167,154,.32);
      box-shadow:var(--shadow);
    }
    .compare-panel h3{font-size:24px;font-weight:850;margin-bottom:18px}
    .compare-items{display:grid;gap:13px}
    .compare-item{
      display:grid;
      grid-template-columns:36px 1fr;
      gap:12px;
      align-items:start;
      padding:13px;
      border-radius:18px;
      background:rgba(247,250,245,.76);
      border:1px solid rgba(220,233,229,.8);
    }
    .compare-item .mark{
      width:36px;height:36px;border-radius:14px;
      display:grid;place-items:center;
      background:#f0f3ee;
      color:var(--muted);
      font-weight:900;
    }
    .featured .compare-item .mark{
      background:var(--brand-soft);
      color:var(--brand);
    }
    .compare-item strong{display:block;font-weight:820;line-height:1.35}
    .compare-item span{display:block;color:var(--muted);font-size:14px;line-height:1.55;margin-top:3px}
    .scene-card{
      height:100%;
      padding:26px;
      border-radius:30px;
      background:#fff;
      border:1px solid var(--border);
      box-shadow:0 10px 30px rgba(25,56,51,.045);
      transition:.22s ease;
    }
    .scene-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(22,167,154,.42);
    }
    .scene-index{
      width:42px;height:42px;border-radius:16px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,var(--brand-soft),var(--coral-soft));
      color:var(--ink);
      font-weight:900;
      margin-bottom:16px;
    }
    .scene-card h3{font-size:21px;font-weight:850;margin-bottom:9px}
    .scene-card p{color:var(--muted);margin-bottom:16px}
    .check-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
    .check-list li{
      display:flex;align-items:flex-start;gap:9px;
      color:var(--muted);
      font-size:14.5px;
    }
    .check-list li::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--brand);
      margin-top:9px;
      flex:0 0 auto;
    }
    .process-panel{
      border-radius:var(--radius-xl);
      background:#173b35;
      color:#fff;
      padding:34px;
      overflow:hidden;
      position:relative;
    }
    .process-panel::before{
      content:"";
      position:absolute;
      inset:auto -80px -110px auto;
      width:300px;height:300px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,138,91,.32),transparent 70%);
    }
    .process-panel .section-title,.process-panel .section-desc{color:#fff}
    .process-panel .section-desc{opacity:.78}
    .process-track{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
      margin-top:26px;
      position:relative;
      z-index:1;
    }
    .process-step{
      padding:20px;
      border-radius:24px;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.16);
    }
    .process-step b{
      display:inline-grid;
      place-items:center;
      width:38px;height:38px;
      border-radius:14px;
      background:rgba(221,248,242,.16);
      color:#A9F0E5;
      margin-bottom:12px;
    }
    .process-step h3{font-size:18px;font-weight:850;margin-bottom:7px;color:#fff}
    .process-step p{font-size:14.5px;color:rgba(255,255,255,.72);margin:0;line-height:1.65}
    .accordion{display:grid;gap:14px}
    .accordion-item{
      border:1px solid var(--border)!important;
      border-radius:24px!important;
      overflow:hidden;
      background:#fff;
      box-shadow:0 8px 26px rgba(25,56,51,.04);
    }
    .accordion-button{
      padding:20px 22px;
      font-weight:850;
      color:var(--ink);
      background:#fff;
      border-radius:24px!important;
      box-shadow:none!important;
    }
    .accordion-button:not(.collapsed){
      color:#0d766d;
      background:linear-gradient(135deg,rgba(221,248,242,.72),rgba(255,241,232,.44));
    }
    .accordion-button:focus{
      border-color:transparent;
      box-shadow:0 0 0 4px rgba(22,167,154,.15)!important;
    }
    .accordion-button::after{
      border-radius:50%;
      background-color:var(--brand-soft);
      background-position:center;
      padding:12px;
    }
    .accordion-body{
      padding:0 22px 22px;
      color:var(--muted);
      line-height:1.85;
      background:linear-gradient(135deg,rgba(221,248,242,.4),rgba(255,255,255,.9));
    }
    .contact-section{
      padding:98px 0;
    }
    .contact-wrap{
      border-radius:var(--radius-xl);
      background:
        radial-gradient(circle at 8% 12%,rgba(122,220,203,.34),transparent 28%),
        linear-gradient(135deg,#FFFFFF 0%,#F8FFFC 58%,#FFF1E8 100%);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      padding:32px;
    }
    .benefit-panel{
      padding:22px;
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .benefit-panel h2{
      font-size:clamp(30px,3.6vw,42px);
      font-weight:850;
      line-height:1.22;
      margin:16px 0 14px;
    }
    .benefit-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin-top:22px;
    }
    .benefit-item{
      padding:16px;
      border-radius:22px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(220,233,229,.88);
    }
    .benefit-item strong{display:block;font-weight:850;margin-bottom:4px}
    .benefit-item span{font-size:14px;color:var(--muted);line-height:1.6}
    .form-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:32px;
      box-shadow:0 18px 50px rgba(25,56,51,.08);
      padding:28px;
    }
    .form-label{
      color:var(--ink);
      font-weight:780;
      font-size:14.5px;
      margin-bottom:7px;
    }
    .form-control,.form-select{
      border:1px solid var(--border);
      border-radius:16px;
      padding:13px 14px;
      background:#F8FFFC;
      color:var(--ink);
      transition:.2s ease;
      box-shadow:none!important;
    }
    .form-control:focus,.form-select:focus{
      border-color:var(--brand);
      background:#fff;
      box-shadow:0 0 0 4px rgba(22,167,154,.14)!important;
    }
    textarea.form-control{min-height:118px;resize:vertical}
    .form-hint{font-size:13px;color:var(--muted);line-height:1.6;margin-top:12px}
    .footer-cta{
      padding:28px;
      border-radius:32px;
      background:linear-gradient(135deg,#173b35,#16A79A);
      color:#fff;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      margin-bottom:44px;
      overflow:hidden;
      position:relative;
    }
    .footer-cta::after{
      content:"";
      position:absolute;
      width:190px;height:190px;border-radius:50%;
      right:-60px;top:-82px;
      background:rgba(255,176,136,.32);
    }
    .footer-cta h2{font-size:26px;font-weight:850;margin:0 0 4px;position:relative;z-index:1}
    .footer-cta p{margin:0;color:rgba(255,255,255,.78);position:relative;z-index:1}
    .site-footer{
      background:linear-gradient(180deg,rgba(247,250,245,.9),rgba(221,248,242,.5));
      border-top:1px solid var(--border);
      padding:70px 0 30px;
    }
    .footer-brand{
      display:flex;align-items:center;gap:12px;
      font-weight:850;font-size:18px;
      margin-bottom:14px;
    }
    .footer-text{color:var(--muted);max-width:420px;margin:0}
    .footer-title{font-size:16px;font-weight:850;margin-bottom:14px}
    .footer-links{list-style:none;padding:0;margin:0;display:grid;gap:9px}
    .footer-links a{
      color:var(--muted);
      font-weight:650;
      font-size:14.5px;
    }
    .footer-links a:hover{color:var(--brand);padding-left:3px}
    .compliance{
      padding:14px 16px;
      border-radius:20px;
      background:rgba(255,255,255,.72);
      border:1px solid var(--border);
      color:var(--muted);
      font-size:14px;
      line-height:1.7;
    }
    .copyright{
      border-top:1px solid rgba(220,233,229,.9);
      margin-top:34px;
      padding-top:22px;
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:14px;
    }
    @media (max-width: 991.98px){
      .site-header{top:12px;padding:0 12px}
      .dock-nav{border-radius:28px}
      .navbar-collapse{
        margin-top:12px;
        padding:12px;
        border-radius:24px;
        background:#fff;
        border:1px solid var(--border);
      }
      .navbar-nav{gap:4px}
      .nav-search{margin:10px 0 0;min-width:100%}
      .dock-nav .btn-brand{width:100%;margin-top:10px}
      .hero{padding-top:88px}
      .process-track{grid-template-columns:1fr 1fr}
      .section{padding:76px 0}
    }
    @media (max-width: 767.98px){
      .hero{padding:76px 0 52px}
      .hero .lead{font-size:16px}
      .hero-actions .btn-brand,.hero-actions .btn-outline-brand{flex:1 1 100%}
      .metric-grid{grid-template-columns:1fr 1fr;gap:10px}
      .metric-card{padding:15px;border-radius:20px}
      .metric-num{font-size:26px}
      .service-zone,.compare-wrap,.contact-wrap{padding:18px;border-radius:28px}
      .benefit-grid{grid-template-columns:1fr}
      .process-panel{padding:24px;border-radius:28px}
      .process-track{grid-template-columns:1fr}
      .footer-cta{align-items:flex-start;flex-direction:column}
      .footer-cta .btn-brand{width:100%}
      .section{padding:64px 0}
      .contact-section{padding:70px 0}
    }
    @media (max-width: 575.98px){
      .site-header{padding:0 12px}
      .dock-nav{width:calc(100vw - 24px);padding:9px;border-radius:24px}
      .logo-text{font-size:15px;max-width:168px;overflow:hidden;text-overflow:ellipsis}
      .section-title{font-size:29px}
      .metric-grid{grid-template-columns:1fr}
      .dash-head{flex-direction:column}
      .capability-card,.scene-card,.mini-card{border-radius:22px;padding:20px}
      .form-card{padding:20px;border-radius:26px}
      .copyright{flex-direction:column}
    }

/* roulang page: category1 */
:root{
      --primary:#16A79A;
      --primary-2:#18A999;
      --primary-soft:#DDF8F2;
      --coral:#FF8A5B;
      --coral-soft:#FFF1E8;
      --ink:#193833;
      --muted:#647B76;
      --bg:#FBFCF8;
      --bg-2:#F7FAF5;
      --card:#FFFFFF;
      --card-soft:#F8FFFC;
      --border:#DCE9E5;
      --line:rgba(22,167,154,.18);
      --shadow:0 18px 50px rgba(25,56,51,.08);
      --shadow-hover:0 24px 70px rgba(22,167,154,.16);
      --radius-xl:34px;
      --radius-lg:26px;
      --radius-md:18px;
      --radius-sm:14px;
      --gradient:linear-gradient(135deg,#16A79A 0%,#7ADCCB 52%,#FFB088 100%);
      --gradient-soft:linear-gradient(135deg,rgba(221,248,242,.92) 0%,rgba(255,241,232,.72) 100%);
      --font:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 8%,rgba(122,220,203,.22),transparent 28%),
        radial-gradient(circle at 94% 22%,rgba(255,176,136,.22),transparent 26%),
        linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
      line-height:1.8;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:all .22s ease}
    img{max-width:100%;height:auto}
    button,input,textarea,select{font-family:inherit}
    ::selection{background:rgba(22,167,154,.18);color:var(--ink)}
    .container-xl{max-width:1220px}
    .section{padding:92px 0}
    .section-tight{padding:72px 0}
    .section-head{
      max-width:780px;
      margin:0 auto 42px;
      text-align:center;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 13px;
      border-radius:999px;
      color:var(--primary);
      background:rgba(221,248,242,.75);
      border:1px solid rgba(22,167,154,.18);
      font-size:14px;
      font-weight:700;
      line-height:1.2;
    }
    .eyebrow::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--coral);
      box-shadow:0 0 0 5px rgba(255,138,91,.12);
    }
    h1,h2,h3,h4{letter-spacing:-.02em;color:var(--ink)}
    h1{
      font-size:clamp(32px,5vw,54px);
      line-height:1.15;
      font-weight:800;
      margin:18px 0 18px;
    }
    h2{
      font-size:clamp(28px,3.4vw,38px);
      line-height:1.25;
      font-weight:780;
      margin:14px 0;
    }
    h3{font-size:22px;line-height:1.35;font-weight:760}
    p{margin:0;color:var(--muted)}
    .lead-text{font-size:18px;line-height:1.85;color:#4e6862}
    .site-header{
      position:sticky;
      top:18px;
      z-index:1050;
      padding:0 18px;
      margin-top:18px;
    }
    .dock-nav{
      max-width:1188px;
      margin:0 auto;
      padding:10px 12px;
      border:1px solid rgba(220,233,229,.88);
      border-radius:999px;
      background:rgba(251,252,248,.92);
      box-shadow:0 16px 44px rgba(25,56,51,.10);
      backdrop-filter:blur(12px);
    }
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:10px;
      padding:5px 10px 5px 4px;
      margin-right:18px;
      color:var(--ink);
      font-weight:800;
      white-space:nowrap;
    }
    .logo-mark{
      display:inline-block;
      width:38px;
      height:38px;
      border-radius:14px;
      background:
        linear-gradient(90deg,transparent 42%,rgba(255,255,255,.85) 42%,rgba(255,255,255,.85) 58%,transparent 58%),
        linear-gradient(0deg,transparent 42%,rgba(255,255,255,.85) 42%,rgba(255,255,255,.85) 58%,transparent 58%),
        var(--gradient);
      box-shadow:0 12px 26px rgba(22,167,154,.22);
      flex:0 0 auto;
    }
    .logo-text{font-size:17px;letter-spacing:-.01em}
    .navbar-toggler{
      border:0;
      width:42px;
      height:42px;
      border-radius:50%;
      color:var(--ink);
      background:var(--primary-soft);
      box-shadow:none;
    }
    .navbar-toggler:focus{box-shadow:0 0 0 4px rgba(22,167,154,.18)}
    .nav-link{
      color:#34554f;
      font-size:15px;
      font-weight:700;
      padding:10px 14px!important;
      border-radius:999px;
    }
    .nav-link:hover,.nav-link:focus{
      color:var(--primary);
      background:rgba(221,248,242,.78);
    }
    .nav-link.active{
      color:var(--primary);
      background:#fff;
      box-shadow:inset 0 0 0 1px rgba(22,167,154,.18),0 8px 22px rgba(22,167,154,.08);
    }
    .nav-search{
      display:flex;
      align-items:center;
      gap:7px;
      min-width:190px;
      padding:8px 12px;
      margin-left:auto;
      border-radius:999px;
      background:#F8FFFC;
      border:1px solid var(--border);
      color:var(--primary);
    }
    .nav-search input{
      width:120px;
      border:0;
      outline:0;
      background:transparent;
      color:var(--ink);
      font-size:14px;
    }
    .nav-search input::placeholder{color:#87A09B}
    .btn-brand,.btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:999px;
      padding:14px 24px;
      font-size:15px;
      font-weight:800;
      line-height:1.2;
      border:1px solid transparent;
      transition:all .24s ease;
      white-space:nowrap;
    }
    .btn-brand{
      color:#fff;
      background:linear-gradient(135deg,var(--coral),var(--primary));
      box-shadow:0 14px 32px rgba(255,138,91,.20);
    }
    .btn-brand:hover{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 20px 44px rgba(22,167,154,.22);
    }
    .btn-ghost{
      color:var(--ink);
      background:#fff;
      border-color:rgba(22,167,154,.30);
      box-shadow:0 10px 24px rgba(25,56,51,.05);
    }
    .btn-ghost:hover{
      color:var(--primary);
      background:var(--primary-soft);
      border-color:rgba(22,167,154,.55);
      transform:translateY(-2px);
    }
    .btn-brand:focus-visible,.btn-ghost:focus-visible,.form-control:focus,.form-select:focus{
      outline:4px solid rgba(22,167,154,.18);
      outline-offset:2px;
    }
    .hero{
      position:relative;
      padding:92px 0 70px;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:26px 4% auto;
      height:420px;
      border-radius:48px;
      background:
        linear-gradient(rgba(22,167,154,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(22,167,154,.055) 1px,transparent 1px);
      background-size:34px 34px;
      mask-image:linear-gradient(180deg,#000,transparent 88%);
      pointer-events:none;
    }
    .hero-content{position:relative;z-index:1}
    .trust-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:22px 0 30px;
    }
    .trust-badge,.data-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.84);
      border:1px solid var(--border);
      color:#34554f;
      font-size:14px;
      font-weight:700;
      box-shadow:0 8px 22px rgba(25,56,51,.04);
    }
    .trust-badge i,.data-badge i{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--primary);
      display:inline-block;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:14px}
    .scene-board{
      position:relative;
      padding:22px;
      border-radius:var(--radius-xl);
      border:1px solid rgba(220,233,229,.92);
      background:linear-gradient(145deg,#fff 0%,#F8FFFC 62%,#FFF6F0 100%);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .scene-board::after{
      content:"";
      position:absolute;
      width:180px;
      height:180px;
      right:-54px;
      top:-54px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(255,138,91,.22),transparent 68%);
    }
    .board-top{
      position:relative;
      z-index:1;
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:flex-start;
      margin-bottom:20px;
    }
    .board-title{font-size:20px;font-weight:800;color:var(--ink)}
    .board-note{font-size:14px;color:var(--muted)}
    .status-pill{
      padding:8px 12px;
      border-radius:999px;
      background:rgba(221,248,242,.86);
      color:var(--primary);
      font-weight:800;
      font-size:13px;
      white-space:nowrap;
    }
    .scene-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
    }
    .scene-mini{
      padding:18px;
      min-height:132px;
      border-radius:22px;
      background:#fff;
      border:1px solid rgba(220,233,229,.92);
      transition:all .24s ease;
    }
    .scene-mini:hover{
      transform:translateY(-4px);
      border-color:rgba(22,167,154,.45);
      box-shadow:var(--shadow-hover);
    }
    .scene-mini .icon{
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:13px;
      background:var(--gradient-soft);
      margin-bottom:12px;
      color:var(--primary);
      font-weight:900;
    }
    .scene-mini strong{display:block;font-size:17px;margin-bottom:4px;color:var(--ink)}
    .scene-mini span{display:block;font-size:14px;color:var(--muted);line-height:1.65}
    .overview-strip{
      border-radius:var(--radius-xl);
      padding:22px;
      background:#fff;
      border:1px solid var(--border);
      box-shadow:var(--shadow);
    }
    .overview-item{
      height:100%;
      padding:18px;
      border-radius:22px;
      background:linear-gradient(180deg,#F8FFFC,#fff);
      border:1px solid rgba(220,233,229,.9);
    }
    .overview-item .num{
      font-size:34px;
      line-height:1;
      font-weight:850;
      color:var(--primary);
      margin-bottom:8px;
    }
    .overview-item .label{
      font-weight:800;
      color:var(--ink);
      margin-bottom:6px;
    }
    .overview-item .desc{font-size:14px;color:var(--muted);line-height:1.65}
    .category-list{
      display:grid;
      gap:18px;
    }
    .category-row{
      position:relative;
      padding:24px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid var(--border);
      box-shadow:0 12px 34px rgba(25,56,51,.055);
      overflow:hidden;
      transition:all .24s ease;
    }
    .category-row::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:6px;
      background:var(--gradient);
    }
    .category-row:hover{
      transform:translateY(-3px);
      border-color:rgba(22,167,154,.45);
      box-shadow:var(--shadow-hover);
    }
    .row-icon{
      width:46px;
      height:46px;
      border-radius:18px;
      display:grid;
      place-items:center;
      background:var(--primary-soft);
      color:var(--primary);
      font-size:20px;
      font-weight:900;
      flex:0 0 auto;
    }
    .tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
    .soft-tag{
      display:inline-flex;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      background:#F8FFFC;
      border:1px solid var(--border);
      color:#45615b;
      font-size:13px;
      font-weight:700;
    }
    .combo-panel{
      border-radius:var(--radius-xl);
      background:linear-gradient(135deg,#193833 0%,#23564f 58%,#16A79A 100%);
      color:#fff;
      padding:34px;
      box-shadow:0 22px 70px rgba(25,56,51,.18);
      overflow:hidden;
      position:relative;
    }
    .combo-panel::before{
      content:"";
      position:absolute;
      inset:auto -80px -110px auto;
      width:280px;
      height:280px;
      border-radius:50%;
      background:rgba(255,176,136,.24);
    }
    .combo-panel h2,.combo-panel h3{color:#fff}
    .combo-panel p{color:rgba(255,255,255,.78)}
    .combo-card{
      height:100%;
      border-radius:24px;
      padding:22px;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter:blur(4px);
    }
    .combo-card .data-badge{
      background:rgba(255,255,255,.14);
      border-color:rgba(255,255,255,.20);
      color:#fff;
      box-shadow:none;
      margin-bottom:14px;
    }
    .process-track{
      position:relative;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    .process-track::before{
      content:"";
      position:absolute;
      left:8%;
      right:8%;
      top:34px;
      height:2px;
      background:linear-gradient(90deg,rgba(22,167,154,.18),rgba(255,138,91,.42),rgba(22,167,154,.18));
      z-index:0;
    }
    .process-step{
      position:relative;
      z-index:1;
      padding:20px;
      border-radius:24px;
      background:#fff;
      border:1px solid var(--border);
      box-shadow:0 12px 34px rgba(25,56,51,.055);
    }
    .step-num{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:50%;
      margin-bottom:18px;
      color:#fff;
      font-weight:900;
      background:linear-gradient(135deg,var(--primary),var(--coral));
      box-shadow:0 12px 26px rgba(22,167,154,.20);
    }
    .compare-card{
      height:100%;
      padding:28px;
      border-radius:var(--radius-xl);
      border:1px solid var(--border);
      background:#fff;
      box-shadow:var(--shadow);
    }
    .compare-card.weak{
      background:linear-gradient(180deg,#fff,#F4F7F3);
    }
    .compare-card.strong{
      background:linear-gradient(145deg,#F8FFFC,#DDF8F2 72%,#FFF1E8);
      border-color:rgba(22,167,154,.28);
    }
    .compare-item{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px 0;
      border-top:1px dashed rgba(100,123,118,.22);
    }
    .compare-item:first-of-type{border-top:0}
    .check-dot,.minus-dot{
      width:24px;
      height:24px;
      border-radius:50%;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      font-size:14px;
      font-weight:900;
      margin-top:3px;
    }
    .check-dot{background:var(--primary);color:#fff}
    .minus-dot{background:#E8EFEC;color:#78908A}
    .accordion{display:grid;gap:12px}
    .accordion-item{
      border:1px solid var(--border)!important;
      border-radius:22px!important;
      overflow:hidden;
      background:#fff;
      box-shadow:0 10px 28px rgba(25,56,51,.045);
    }
    .accordion-button{
      padding:20px 22px;
      color:var(--ink);
      font-weight:800;
      background:#fff;
      box-shadow:none!important;
      border:0;
      line-height:1.55;
    }
    .accordion-button:not(.collapsed){
      color:var(--primary);
      background:linear-gradient(135deg,#F8FFFC,#DDF8F2);
    }
    .accordion-button:focus{box-shadow:0 0 0 4px rgba(22,167,154,.16)!important}
    .accordion-button::after{
      border-radius:50%;
      background-color:rgba(22,167,154,.12);
      background-position:center;
      padding:12px;
    }
    .accordion-body{
      padding:0 22px 22px;
      color:var(--muted);
      line-height:1.85;
      background:linear-gradient(135deg,#F8FFFC,#fff);
    }
    .contact-wrap{
      border-radius:var(--radius-xl);
      background:var(--gradient-soft);
      border:1px solid rgba(22,167,154,.18);
      padding:34px;
      box-shadow:var(--shadow);
    }
    .benefit-list{
      display:grid;
      gap:14px;
      margin-top:26px;
    }
    .benefit-item{
      display:flex;
      gap:12px;
      padding:14px;
      border-radius:20px;
      background:rgba(255,255,255,.70);
      border:1px solid rgba(220,233,229,.72);
    }
    .benefit-item span{
      width:28px;
      height:28px;
      border-radius:50%;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      color:#fff;
      background:var(--primary);
      font-weight:900;
    }
    .form-card{
      padding:26px;
      border-radius:32px;
      background:#fff;
      border:1px solid var(--border);
      box-shadow:0 18px 50px rgba(25,56,51,.09);
    }
    .form-label{
      color:var(--ink);
      font-weight:800;
      font-size:14px;
      margin-bottom:7px;
    }
    .form-control,.form-select{
      min-height:48px;
      border-radius:16px;
      background:#F8FFFC;
      border:1px solid var(--border);
      color:var(--ink);
      box-shadow:none!important;
    }
    textarea.form-control{min-height:118px}
    .form-control:focus,.form-select:focus{
      border-color:var(--primary);
      background:#fff;
    }
    .privacy-note{
      margin-top:12px;
      color:#78908A;
      font-size:13px;
      line-height:1.7;
    }
    .site-footer{
      padding:34px 0 30px;
      background:
        radial-gradient(circle at 15% 15%,rgba(221,248,242,.72),transparent 32%),
        linear-gradient(180deg,#F8FFFC 0%,#F3F8F5 100%);
      border-top:1px solid var(--border);
    }
    .footer-cta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
      padding:28px;
      border-radius:30px;
      background:#fff;
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      margin-bottom:34px;
    }
    .footer-cta h2{
      font-size:26px;
      margin:0 0 6px;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--ink);
      font-size:20px;
      font-weight:850;
      margin-bottom:14px;
    }
    .footer-text{max-width:520px}
    .footer-title{
      font-size:16px;
      margin:0 0 12px;
      color:var(--ink);
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:8px;
    }
    .footer-links a{
      color:var(--muted);
      font-weight:650;
      font-size:14px;
    }
    .footer-links a:hover{color:var(--primary);padding-left:3px}
    .compliance{
      padding:14px;
      border-radius:18px;
      background:#fff;
      border:1px solid var(--border);
      color:var(--muted);
      font-size:14px;
      line-height:1.75;
    }
    .copyright{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:12px;
      margin-top:30px;
      padding-top:20px;
      border-top:1px solid var(--border);
      color:#78908A;
      font-size:13px;
    }
    @media (max-width: 991.98px){
      .site-header{top:12px;margin-top:12px}
      .dock-nav{border-radius:28px;padding:10px 12px}
      .navbar-collapse{
        margin-top:12px;
        padding:12px;
        border-radius:24px;
        background:rgba(255,255,255,.92);
        border:1px solid var(--border);
      }
      .navbar-nav{align-items:stretch!important}
      .nav-link{margin:3px 0}
      .nav-search{
        margin:10px 0;
        width:100%;
      }
      .nav-search input{width:100%}
      .btn-brand.ms-lg-2{width:100%}
      .hero{padding:76px 0 52px}
      .section{padding:74px 0}
      .process-track{grid-template-columns:repeat(2,1fr)}
      .process-track::before{display:none}
    }
    @media (max-width: 767.98px){
      h1{font-size:34px}
      .lead-text{font-size:16px}
      .hero-actions .btn-brand,.hero-actions .btn-ghost{flex:1 1 100%}
      .scene-grid{grid-template-columns:1fr}
      .category-row{padding:20px}
      .combo-panel{padding:24px}
      .contact-wrap{padding:22px}
      .footer-cta{align-items:flex-start;flex-direction:column}
      .footer-cta .btn-brand{width:100%}
      .copyright{flex-direction:column}
    }
    @media (max-width: 575.98px){
      .site-header{padding:0 12px}
      .dock-nav{width:100%;border-radius:24px}
      .logo-mark{width:34px;height:34px;border-radius:13px}
      .logo-text{font-size:15px}
      .section,.section-tight{padding:58px 0}
      .overview-strip{padding:16px;border-radius:26px}
      .process-track{grid-template-columns:1fr}
      .compare-card,.scene-board,.form-card{border-radius:24px}
    }

/* roulang page: category2 */
:root{
      --primary:#16A79A;
      --primary-2:#18A999;
      --primary-soft:#DDF8F2;
      --accent:#FF8A5B;
      --accent-soft:#FFF1E8;
      --ink:#193833;
      --muted:#647B76;
      --bg:#FBFCF8;
      --bg-2:#F7FAF5;
      --card:#FFFFFF;
      --card-tint:#F8FFFC;
      --border:#DCE9E5;
      --shadow:0 18px 50px rgba(25,56,51,.08);
      --shadow-hover:0 24px 70px rgba(22,167,154,.16);
      --radius-xl:36px;
      --radius-lg:28px;
      --radius-md:20px;
      --radius-sm:14px;
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 12%,rgba(221,248,242,.85),transparent 30%),
        radial-gradient(circle at 92% 8%,rgba(255,241,232,.85),transparent 28%),
        linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
      line-height:1.8;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:.22s ease}
    a:hover{color:var(--primary)}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(22,167,154,.18);color:var(--ink)}
    .container-xl{max-width:var(--container)}
    .site-header{
      position:sticky;
      top:18px;
      z-index:1000;
      padding:0 18px;
      margin-top:18px;
    }
    .dock-nav{
      max-width:1180px;
      margin:0 auto;
      padding:10px 14px;
      border:1px solid rgba(220,233,229,.92);
      border-radius:999px;
      background:rgba(251,252,248,.94);
      box-shadow:0 16px 45px rgba(25,56,51,.10);
      backdrop-filter:blur(14px);
    }
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      color:var(--ink);
      letter-spacing:-.02em;
      margin-right:18px;
      min-width:max-content;
    }
    .logo-mark{
      width:34px;
      height:34px;
      border-radius:13px;
      display:inline-flex;
      position:relative;
      background:linear-gradient(135deg,#16A79A 0%,#7ADCCB 52%,#FFB088 100%);
      box-shadow:0 12px 24px rgba(22,167,154,.22);
      flex:0 0 auto;
    }
    .logo-mark:before,.logo-mark:after{
      content:"";
      position:absolute;
      background:#fff;
      border-radius:999px;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
    }
    .logo-mark:before{width:16px;height:5px}
    .logo-mark:after{width:5px;height:16px}
    .logo-text{font-size:16px;white-space:nowrap}
    .navbar-toggler{
      border:0;
      border-radius:999px;
      background:var(--primary-soft);
      color:var(--ink);
      padding:8px 12px;
      box-shadow:none;
    }
    .navbar-toggler:focus{box-shadow:0 0 0 4px rgba(22,167,154,.16)}
    .nav-link{
      color:var(--ink);
      font-size:14.5px;
      font-weight:700;
      border-radius:999px;
      padding:9px 14px!important;
      white-space:nowrap;
    }
    .nav-link:hover,.nav-link:focus{
      background:var(--primary-soft);
      color:var(--primary);
    }
    .nav-link.active{
      background:linear-gradient(135deg,rgba(22,167,154,.13),rgba(255,138,91,.12));
      color:var(--primary);
    }
    .nav-search{
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      margin-left:auto;
      border-radius:999px;
      border:1px solid var(--border);
      background:#fff;
      min-width:190px;
      color:var(--muted);
    }
    .nav-search input{
      border:0;
      outline:0;
      width:100%;
      min-width:0;
      background:transparent;
      color:var(--ink);
      font-size:14px;
    }
    .btn-brand,.btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:999px;
      padding:14px 24px;
      font-weight:800;
      line-height:1.2;
      transition:.22s ease;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .btn-brand{
      background:linear-gradient(135deg,var(--accent) 0%,#FFB088 35%,var(--primary) 100%);
      color:#fff!important;
      box-shadow:0 14px 30px rgba(255,138,91,.20);
    }
    .btn-brand:hover{
      transform:translateY(-2px);
      box-shadow:0 20px 46px rgba(22,167,154,.22);
      color:#fff;
    }
    .btn-ghost{
      background:rgba(255,255,255,.72);
      color:var(--ink);
      border-color:rgba(22,167,154,.28);
    }
    .btn-ghost:hover{
      background:var(--primary-soft);
      border-color:var(--primary);
      transform:translateY(-2px);
    }
    .btn-brand:focus,.btn-ghost:focus,.form-control:focus,.form-select:focus{
      outline:0;
      box-shadow:0 0 0 4px rgba(22,167,154,.18);
      border-color:var(--primary);
    }
    main{position:relative}
    .section{
      padding:96px 0;
      position:relative;
    }
    .section-tight{padding:72px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:8px 13px;
      color:var(--primary);
      background:rgba(221,248,242,.74);
      border:1px solid rgba(22,167,154,.16);
      font-size:14px;
      font-weight:800;
      margin-bottom:18px;
    }
    .eyebrow:before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 5px rgba(255,138,91,.13);
    }
    h1,h2,h3{letter-spacing:-.035em;color:var(--ink)}
    h1{
      font-size:clamp(32px,5vw,56px);
      line-height:1.12;
      font-weight:850;
      margin:0 0 22px;
    }
    h2{
      font-size:clamp(28px,3.2vw,38px);
      line-height:1.24;
      font-weight:820;
      margin:0 0 14px;
    }
    h3{font-size:22px;line-height:1.35;font-weight:800}
    .lead-text{
      font-size:17px;
      color:var(--muted);
      max-width:720px;
      margin:0;
    }
    .hero{
      padding:92px 0 78px;
      margin-top:-70px;
      min-height:720px;
      display:flex;
      align-items:center;
      background:
        linear-gradient(90deg,rgba(22,167,154,.05) 1px,transparent 1px),
        linear-gradient(180deg,rgba(22,167,154,.05) 1px,transparent 1px);
      background-size:42px 42px;
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 78% 34%,rgba(122,220,203,.38),transparent 20%),
        radial-gradient(circle at 68% 70%,rgba(255,176,136,.28),transparent 22%);
      z-index:-1;
    }
    .trust-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:26px 0 32px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:7px;
      border-radius:999px;
      padding:8px 12px;
      background:#fff;
      border:1px solid var(--border);
      color:var(--muted);
      font-weight:700;
      font-size:14px;
      box-shadow:0 8px 22px rgba(25,56,51,.05);
    }
    .tag-dot{
      width:7px;height:7px;border-radius:50%;
      background:var(--primary);
      flex:0 0 auto;
    }
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
    .dashboard-shell{
      position:relative;
      border-radius:var(--radius-xl);
      padding:16px;
      background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(248,255,252,.78));
      border:1px solid rgba(220,233,229,.88);
      box-shadow:var(--shadow);
    }
    .dashboard-shell:before{
      content:"";
      position:absolute;
      inset:14px;
      border-radius:28px;
      border:1px dashed rgba(22,167,154,.18);
      pointer-events:none;
    }
    .dash-head{
      position:relative;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      padding:18px 18px 8px;
      z-index:1;
    }
    .dash-title{font-weight:850;font-size:18px}
    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:7px;
      border-radius:999px;
      padding:7px 11px;
      background:var(--accent-soft);
      color:#A7502D;
      font-size:13px;
      font-weight:800;
    }
    .metric-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:14px;
      padding:14px;
    }
    .metric-card,.spec-card,.compare-card,.flow-card,.form-card,.type-panel,.mini-card{
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      background:linear-gradient(180deg,#fff 0%,var(--card-tint) 100%);
      box-shadow:var(--shadow);
      transition:.24s ease;
    }
    .metric-card:hover,.spec-card:hover,.flow-card:hover,.type-panel:hover,.mini-card:hover{
      transform:translateY(-4px);
      border-color:rgba(22,167,154,.45);
      box-shadow:var(--shadow-hover);
    }
    .metric-card{padding:22px}
    .metric-card.wide{grid-row:span 2;background:linear-gradient(135deg,#fff 0%,#F1FFFB 72%,#FFF1E8 100%)}
    .metric-label{color:var(--muted);font-weight:750;font-size:14px}
    .metric-value{
      display:block;
      margin:8px 0 10px;
      font-size:38px;
      line-height:1;
      font-weight:900;
      color:var(--primary);
      letter-spacing:-.04em;
    }
    .metric-note{color:var(--muted);font-size:14px;margin:0}
    .progress-track{
      margin-top:20px;
      height:10px;
      border-radius:999px;
      background:rgba(220,233,229,.9);
      overflow:hidden;
    }
    .progress-fill{
      height:100%;
      width:76%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary),#7ADCCB,var(--accent));
    }
    .mini-trend{
      display:flex;
      align-items:end;
      gap:6px;
      height:42px;
      margin-top:18px;
    }
    .mini-trend span{
      flex:1;
      border-radius:999px 999px 4px 4px;
      background:linear-gradient(180deg,#7ADCCB,var(--primary));
      min-height:12px;
    }
    .mini-trend span:nth-child(2){height:55%}
    .mini-trend span:nth-child(3){height:72%;background:linear-gradient(180deg,#FFB088,var(--accent))}
    .mini-trend span:nth-child(4){height:48%}
    .mini-trend span:nth-child(5){height:86%}
    .mini-trend span:nth-child(6){height:64%;background:linear-gradient(180deg,#FFB088,var(--accent))}
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:24px;
      margin-bottom:34px;
    }
    .section-head .lead-text{max-width:560px}
    .kpi-strip{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    .mini-card{
      padding:22px;
      position:relative;
      overflow:hidden;
    }
    .mini-card:before{
      content:"";
      position:absolute;
      left:0;right:0;top:0;
      height:5px;
      background:linear-gradient(90deg,var(--primary),#7ADCCB,var(--accent));
    }
    .mini-num{
      font-size:34px;
      line-height:1;
      font-weight:900;
      color:var(--ink);
      margin-bottom:10px;
    }
    .mini-card p{margin:0;color:var(--muted);font-size:14px}
    .type-layout{
      display:grid;
      grid-template-columns:.95fr 1.45fr;
      gap:24px;
      align-items:start;
    }
    .type-panel{
      padding:28px;
      position:sticky;
      top:112px;
      background:linear-gradient(145deg,#193833 0%,#22554E 100%);
      color:#fff;
      overflow:hidden;
    }
    .type-panel h2,.type-panel h3{color:#fff}
    .type-panel p{color:rgba(255,255,255,.78)}
    .type-panel:after{
      content:"";
      position:absolute;
      width:190px;height:190px;
      border-radius:50%;
      right:-80px;bottom:-70px;
      background:radial-gradient(circle,rgba(255,176,136,.42),transparent 70%);
    }
    .check-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
    .check-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding:12px 14px;
      border-radius:18px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.10);
    }
    .check-list li:before{
      content:"✓";
      width:22px;height:22px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(221,248,242,.18);
      color:#BFFAF0;
      font-weight:900;
      flex:0 0 auto;
    }
    .spec-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:18px;
    }
    .spec-card{
      padding:24px;
      min-height:240px;
      position:relative;
      overflow:hidden;
    }
    .spec-card:before{
      content:"";
      position:absolute;
      width:90px;height:90px;
      border-radius:28px;
      right:-30px;top:-30px;
      background:linear-gradient(135deg,rgba(22,167,154,.12),rgba(255,138,91,.12));
      transform:rotate(18deg);
    }
    .icon-box{
      width:48px;height:48px;
      border-radius:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,var(--primary-soft),var(--accent-soft));
      color:var(--primary);
      font-weight:900;
      margin-bottom:16px;
      font-size:20px;
    }
    .spec-card p{color:var(--muted);margin:0 0 14px}
    .spec-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
    .spec-tags span{
      padding:6px 10px;
      border-radius:999px;
      background:rgba(221,248,242,.75);
      color:var(--primary);
      font-weight:800;
      font-size:13px;
    }
    .flow-wrap{
      border-radius:var(--radius-xl);
      border:1px solid var(--border);
      background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(221,248,242,.36));
      box-shadow:var(--shadow);
      padding:24px;
      overflow:hidden;
    }
    .flow-track{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
      position:relative;
    }
    .flow-track:before{
      content:"";
      position:absolute;
      top:34px;
      left:9%;
      right:9%;
      height:2px;
      background:linear-gradient(90deg,var(--primary),#7ADCCB,var(--accent));
      opacity:.45;
    }
    .flow-card{
      position:relative;
      z-index:1;
      padding:22px;
      background:#fff;
    }
    .flow-step{
      width:68px;height:68px;
      border-radius:24px;
      background:linear-gradient(135deg,var(--primary),#7ADCCB);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      font-size:22px;
      margin-bottom:18px;
      box-shadow:0 14px 32px rgba(22,167,154,.22);
    }
    .flow-card:nth-child(even) .flow-step{
      background:linear-gradient(135deg,var(--accent),#FFB088);
      box-shadow:0 14px 32px rgba(255,138,91,.20);
    }
    .flow-card p{color:var(--muted);font-size:15px;margin:0}
    .compare-wrap{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:24px;
    }
    .compare-card{
      padding:28px;
      box-shadow:none;
    }
    .compare-card.weak{
      background:linear-gradient(180deg,#fff,#F4F6F3);
    }
    .compare-card.strong{
      background:linear-gradient(135deg,#F8FFFC,#DDF8F2 72%,#FFF1E8);
      border-color:rgba(22,167,154,.28);
      box-shadow:var(--shadow);
    }
    .compare-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:18px;
    }
    .compare-title h3{margin:0}
    .badge-soft{
      border-radius:999px;
      padding:7px 11px;
      background:#fff;
      border:1px solid var(--border);
      color:var(--muted);
      font-weight:850;
      font-size:13px;
    }
    .compare-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
    .compare-list li{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(220,233,229,.75);
      color:var(--muted);
    }
    .compare-list li strong{color:var(--ink)}
    .mark{
      width:24px;height:24px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
      font-weight:900;
      background:rgba(100,123,118,.12);
      color:var(--muted);
    }
    .strong .mark{background:rgba(22,167,154,.14);color:var(--primary)}
    .accordion{
      display:grid;
      gap:12px;
    }
    .accordion-item{
      border:1px solid var(--border)!important;
      border-radius:22px!important;
      background:#fff;
      overflow:hidden;
      box-shadow:0 10px 28px rgba(25,56,51,.05);
    }
    .accordion-button{
      border:0;
      padding:20px 22px;
      font-weight:850;
      color:var(--ink);
      background:#fff;
      box-shadow:none!important;
      border-radius:22px!important;
    }
    .accordion-button:not(.collapsed){
      color:var(--primary);
      background:linear-gradient(135deg,rgba(221,248,242,.72),rgba(255,241,232,.55));
    }
    .accordion-button:focus{
      box-shadow:inset 0 0 0 3px rgba(22,167,154,.14)!important;
    }
    .accordion-button::after{
      filter:hue-rotate(130deg) saturate(1.2);
    }
    .accordion-body{
      color:var(--muted);
      padding:0 22px 22px;
      background:linear-gradient(180deg,rgba(221,248,242,.22),#fff);
    }
    .contact-section{
      padding-bottom:110px;
    }
    .contact-card{
      border-radius:var(--radius-xl);
      background:
        radial-gradient(circle at 10% 20%,rgba(221,248,242,.75),transparent 26%),
        radial-gradient(circle at 90% 80%,rgba(255,241,232,.88),transparent 28%),
        #fff;
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      padding:34px;
    }
    .benefit-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
      margin-top:26px;
    }
    .benefit{
      border-radius:20px;
      padding:16px;
      background:rgba(255,255,255,.74);
      border:1px solid rgba(220,233,229,.8);
    }
    .benefit strong{display:block;margin-bottom:4px}
    .benefit span{color:var(--muted);font-size:14px}
    .form-card{
      padding:24px;
      background:#fff;
      box-shadow:0 18px 55px rgba(25,56,51,.10);
    }
    .form-label{
      color:var(--ink);
      font-weight:800;
      font-size:14px;
      margin-bottom:8px;
    }
    .form-control,.form-select{
      border-radius:16px;
      border:1px solid var(--border);
      background:var(--card-tint);
      color:var(--ink);
      min-height:48px;
      padding:11px 14px;
    }
    textarea.form-control{min-height:118px;resize:vertical}
    .form-hint{
      color:var(--muted);
      font-size:13px;
      margin:12px 0 0;
    }
    .site-footer{
      padding:0 0 34px;
      background:linear-gradient(180deg,rgba(251,252,248,0),rgba(221,248,242,.48));
    }
    .footer-cta{
      transform:translateY(-42px);
      border-radius:var(--radius-xl);
      background:linear-gradient(135deg,var(--ink),#235A53);
      color:#fff;
      padding:30px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
      box-shadow:0 22px 60px rgba(25,56,51,.18);
      overflow:hidden;
      position:relative;
    }
    .footer-cta:after{
      content:"";
      width:240px;height:240px;
      border-radius:50%;
      position:absolute;
      right:-90px;top:-120px;
      background:radial-gradient(circle,rgba(255,176,136,.45),transparent 70%);
    }
    .footer-cta h2{
      color:#fff;
      font-size:26px;
      margin:0 0 8px;
    }
    .footer-cta p{color:rgba(255,255,255,.76);margin:0}
    .footer-brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:18px;
      font-weight:900;
      margin-bottom:16px;
    }
    .footer-text{color:var(--muted);max-width:520px;margin:0}
    .footer-title{
      font-size:16px;
      margin-bottom:14px;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:9px;
    }
    .footer-links a{
      color:var(--muted);
      font-weight:650;
    }
    .footer-links a:hover{color:var(--primary);padding-left:4px}
    .compliance{
      padding:16px;
      border-radius:20px;
      background:rgba(255,255,255,.72);
      border:1px solid var(--border);
      color:var(--muted);
      font-size:14px;
    }
    .copyright{
      margin-top:32px;
      padding-top:20px;
      border-top:1px solid rgba(220,233,229,.9);
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:13px;
    }
    @media (max-width: 991.98px){
      .site-header{top:12px;margin-top:12px;padding:0 12px}
      .dock-nav{border-radius:28px;padding:10px 12px}
      .navbar-collapse{
        padding-top:14px;
      }
      .navbar-nav{
        align-items:stretch!important;
        gap:6px!important;
      }
      .nav-link{padding:10px 12px!important}
      .nav-search{
        margin:10px 0 0;
        width:100%;
      }
      .btn-brand.ms-lg-2{margin-top:10px;width:100%}
      .hero{margin-top:-82px;padding-top:136px;min-height:auto}
      .metric-grid,.type-layout,.compare-wrap{grid-template-columns:1fr}
      .type-panel{position:relative;top:auto}
      .flow-track{grid-template-columns:repeat(2,1fr)}
      .flow-track:before{display:none}
      .kpi-strip{grid-template-columns:repeat(2,1fr)}
      .section-head{align-items:flex-start;flex-direction:column}
      .footer-cta{align-items:flex-start;flex-direction:column}
    }
    @media (max-width: 767.98px){
      .section{padding:64px 0}
      .section-tight{padding:56px 0}
      .hero{padding-bottom:56px}
      .logo-text{font-size:15px}
      .hero-actions .btn-brand,.hero-actions .btn-ghost{width:100%}
      .spec-grid,.flow-track,.benefit-grid{grid-template-columns:1fr}
      .dashboard-shell{border-radius:28px;padding:10px}
      .dash-head{flex-direction:column;align-items:flex-start}
      .metric-card.wide{grid-row:auto}
      .contact-card{padding:22px;border-radius:28px}
      .form-card{padding:20px;border-radius:24px}
      .footer-cta{padding:24px;border-radius:28px}
    }
    @media (max-width: 575.98px){
      .dock-nav{width:calc(100vw - 24px)}
      .navbar-brand{margin-right:8px}
      .logo-mark{width:31px;height:31px;border-radius:12px}
      .metric-grid{grid-template-columns:1fr}
      .kpi-strip{display:flex;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
      .mini-card{min-width:230px;scroll-snap-align:start}
      .compare-card,.type-panel,.spec-card,.flow-card{border-radius:22px;padding:20px}
      .copyright{display:grid}
    }