/* roulang page: index */
:root{
  --primary:#3b9eff;
  --primary-deep:#1f6fd4;
  --accent:#58e0ff;
  --amber:#ffc25e;
  --bg:#070d19;
  --bg-soft:#0b1424;
  --surface:#0e1626;
  --surface-2:#111e33;
  --glass:rgba(255,255,255,.05);
  --glass-border:rgba(140,175,220,.18);
  --text:#e6edf7;
  --muted:#9cabbe;
  --faint:#5f7189;
  --line:rgba(140,175,220,.14);
  --success:#34d399;
  --warn:#fbbf24;
  --danger:#f87171;
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --shadow:0 8px 24px rgba(0,0,0,.22);
  --shadow-lg:0 18px 52px rgba(0,0,0,.32);
  --container:1200px;
  --sidebar-width:260px;
  --font:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei UI","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{
  font-family:var(--font);
  background:
    radial-gradient(900px 420px at 88% -5%, rgba(59,158,255,.13), transparent 62%),
    radial-gradient(700px 380px at -10% 18%, rgba(88,224,255,.08), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.75;
  font-size:15.5px;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
.main-content{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));min-height:100vh;overflow:clip}

/* ====== sidebar ====== */
.site-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);z-index:50;
  background:#050b14;
  border-right:1px solid rgba(90,130,180,.16);
  display:flex;flex-direction:column;
  transition:transform .3s ease;
}
.sidebar-inner{display:flex;flex-direction:column;height:100%;padding:26px 19px 20px;overflow-y:auto}
.brandbox{display:flex;align-items:center;gap:12px;padding:2px 6px 24px;border-bottom:1px solid rgba(140,175,220,.1);margin-bottom:12px}
.brandmark{
  width:46px;height:46px;border-radius:14px;flex:0 0 46px;position:relative;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:20px;
  background:linear-gradient(145deg,#13233f,#182f56 52%,#1e4d8e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px rgba(0,0,0,.22);
}
.brandmark::after{content:"";position:absolute;width:7px;height:7px;border-radius:99px;right:7px;top:7px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.brand-copy strong{display:block;font-size:17px;letter-spacing:.4px;color:#f2f7ff;line-height:1.35}
.brand-copy small{font-size:11px;color:var(--faint);letter-spacing:.5px}
.side-head{font-size:11px;color:var(--faint);padding:12px 10px 8px;letter-spacing:1px}
.sidenav{display:flex;flex-direction:column;gap:6px}
.nav-link{
  display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:11px;position:relative;
  color:#bccbe0;font-weight:500;transition:.2s;
}
.nav-link i{width:23px;text-align:center;color:var(--faint);font-size:16px;transition:.2s}
.nav-link:hover{background:rgba(255,255,255,.045);color:#e6f1ff}
.nav-link.active{background:linear-gradient(90deg,rgba(59,158,255,.14),rgba(59,158,255,.03));color:#fff;font-weight:600}
.nav-link.active::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--primary),var(--accent))}
.nav-link.active i{color:var(--primary)}
.side-help{margin-top:auto;background:linear-gradient(155deg,rgba(59,158,255,.13),rgba(88,224,255,.05));border:1px solid var(--glass-border);border-radius:16px;padding:17px 15px;margin-top:28px}
.side-help p{font-size:13.5px;color:#cdddf3;line-height:1.65}
.side-help .help-btn{margin-top:18px;display:flex;width:100%;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(59,158,255,.5);padding:10px 12px;border-radius:9px;font-size:14px;color:#dff0ff;background:rgba(59,158,255,.08);transition:.22s}
.side-help .help-btn:hover{background:rgba(59,158,255,.16);transform:translateY(-1px)}
.side-copy{margin-top:10px;font-size:11px;color:#3e4c63;text-align:center}

/* mobile topbar */
.mobile-topbar{
  position:fixed;top:0;left:0;right:0;height:64px;z-index:90;display:none;
  align-items:center;gap:12px;padding:0 17px;
  background:rgba(5,13,24,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(140,175,220,.12);
}
.topbar-txt{font-size:16px;color:#fff;margin:0;font-weight:650;letter-spacing:.3px}
.topbar-cta{margin-left:auto;font-size:13.5px;color:#d8ecff;background:rgba(59,158,255,.14);border-radius:99px;padding:7px 13px;border:1px solid rgba(59,158,255,.24)}
.icon-btn{background:transparent;border:0;color:#c9dbef;font-size:19px;width:42px;height:42px;border-radius:10px;cursor:pointer;display:grid;place-items:center;transition:.2s}
.icon-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.shade{position:fixed;inset:0;background:rgba(3,7,14,.62);backdrop-filter:blur(2px);z-index:48;opacity:0;pointer-events:none;transition:.3s}
body.sidebar-open .shade{opacity:1;pointer-events:auto}
body.sidebar-open .site-sidebar{transform:none}
body.sidebar-open .topbar-cta{opacity:.4;pointer-events:none}

/* ===== hero ===== */
.hero-section{
  position:relative;overflow:hidden;min-height:670px;padding:54px 0 40px;
  display:flex;align-items:center;
  background:
    linear-gradient(180deg,rgba(7,13,25,.48),rgba(7,13,25,.92) 76%),
    url('/assets/images/backpic/back-1.png') center 28%/cover no-repeat;
}
.hero-section::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(140,175,220,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(140,175,220,.04) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(circle at 52% 42%,#000,transparent 75%);
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding-top:32px;padding-bottom:32px}
.overline{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(88,224,255,.3);background:rgba(88,224,255,.09);padding:6px 13px;border-radius:99px;font-size:12.5px;color:#b4ecff;font-weight:500}
.overline i{color:var(--accent)}
.hero-copy h1{font-size:44px;line-height:1.28;font-weight:700;letter-spacing:.2px;margin:20px 0 21px;color:#f3f8ff;max-width:17em}
.hero-copy h1 span{color:var(--accent)}
.hero-desc{font-size:17.5px;color:#bdcde2;line-height:1.95;max-width:36em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;align-items:center}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid transparent;font-weight:600;cursor:pointer;transition:.22s;text-align:center;white-space:nowrap}
.btn--primary{background:var(--primary);color:#020712;padding:13px 25px;font-size:15px;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 7px 20px rgba(59,158,255,.22)}
.btn--primary:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 12px 28px rgba(59,158,255,.3)}
.btn--primary i{margin-right:7px}
.btn--glow{background:#091832;border-color:rgba(59,158,255,.5);color:#c7e5ff;box-shadow:0 0 24px rgba(59,158,255,.12)}
.btn--glow:hover{border-color:var(--primary);color:#fff;background:#0d213f;transform:translateY(-2px)}
.btn--amber{background:var(--amber);color:#17130a;padding:12px 22px;font-size:14px;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.btn--amber:hover{filter:brightness(1.07);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.06);border:1px solid rgba(140,175,220,.22);color:#d7e8fb;padding:12px 21px}
.btn--ghost:hover{border-color:rgba(59,158,255,.7);background:rgba(59,158,255,.08)}
.btn-lg{padding:15px 28px;font-size:16px}
.hero-note{display:flex;flex-wrap:wrap;gap:17px;margin-top:24px;font-size:13px;color:var(--muted)}
.hero-note i{color:var(--accent);margin-right:4px}

.hero-visual{position:relative;height:560px}
.visual-frame{
  position:absolute;inset:20px 8px 8px 28px;border-radius:24px;overflow:hidden;
  background:var(--surface);
  border:1px solid rgba(120,170,230,.22);
  box-shadow:0 38px 70px -25px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06) inset;
}
.visual-frame img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.08)}
.glass-bottom{
  position:absolute;left:1px;right:1px;bottom:1px;padding:15px;
  background:linear-gradient(180deg,transparent,rgba(5,11,22,.74) 60%);
  display:flex;align-items:center;justify-content:space-between;gap:12px;color:#dbe9fa;font-size:13px;
}
.glass-bottom strong{display:block;font-size:15px}
.specorbs{position:absolute;top:-8px;left:-12px;display:grid;gap:11px;z-index:3}
.orb{
  background:rgba(12,23,45,.9);border:1px solid rgba(59,158,255,.36);
  border-radius:13px;backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:9px;padding:8px 12px;font-size:12px;color:#d2e5ff;
  width:max-content;box-shadow:var(--shadow);
}
.orb i{color:var(--amber)}
.orb + .orb{background:rgba(255,194,94,.09);border-color:rgba(255,194,94,.33)}
.orb + .orb i{color:var(--amber)}
.hero-pulse{position:absolute;bottom:44px;right:-22px;background:rgba(15,29,58,.9);border:1px solid rgba(88,224,255,.3);border-radius:13px;padding:11px 14px;color:#bdecff;box-shadow:var(--shadow);max-width:220px;font-size:12.5px}
.hero-pulse i{color:var(--accent);margin-right:5px}

/* info strip */
.info-strip{border-top:1px solid rgba(140,175,220,.13);border-bottom:1px solid rgba(140,175,220,.13);background:rgba(10,20,36,.75)}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.strip-item{display:flex;gap:13px;align-items:center;padding:26px 22px;border-left:1px solid rgba(140,175,220,.12)}
.strip-item:first-child{border-left:0}
.strip-item .strip-icon{flex:0 0 38px;background:rgba(59,158,255,.08);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--accent);font-size:16px;border:1px solid rgba(59,158,255,.2)}
.strip-text strong{display:block;font-size:17px;color:#e8f0fb;line-height:1.4}
.strip-text span{font-size:13px;color:var(--muted)}

/* Section UI */
.section{display:block;padding:88px 0 20px}
.section--tight{padding:54px 0 20px}
.section .container{}
.eyebrow-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(59,158,255,.1);border:1px solid rgba(59,158,255,.2);color:#afd8ff;border-radius:999px;font-size:12px;padding:4px 13px;margin-bottom:12px;letter-spacing:.6px}
.eyebrow-chip::before{content:"";width:6px;height:6px;background:var(--accent);border-radius:99px;box-shadow:0 0 7px var(--accent)}
.section-head h2{font-size:31px;font-weight:700;color:#fff;letter-spacing:.5px;line-height:1.35}
.section-head .lead{font-size:15.5px;color:var(--muted);margin-top:11px;max-width:760px}

/* Buttons & ghosts more */
.btn--goback{display:inline-flex;align-items:center;gap:9px}
.mini-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--glass-border);background:rgba(255,255,255,.04);color:#a5b9d4;padding:4px 10px;border-radius:999px}
.chip{display:inline-flex;font-size:12px;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(140,175,220,.2);color:#b4c6df}
.chip--amber{background:rgba(255,194,94,.14);border-color:rgba(255,194,94,.28);color:#ffcf7a}
.chip--cyan{background:rgba(88,224,255,.12);border-color:rgba(88,224,255,.24);color:#a7ecff}
.chip--blue{background:rgba(59,158,255,.12);border-color:rgba(59,158,255,.26);color:#a9d2ff}

/* product bento */
.product-top{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin-bottom:32px}
.product-top .preamble{max-width:700px}
.preamble p{color:var(--muted);margin-top:12px}
.bento-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;}
.p-card{
  position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(16,25,45,.75),rgba(10,17,33,.85));
  border:1px solid rgba(140,175,220,.18);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .3s;box-shadow:0 5px 18px rgba(0,0,0,.17);
}
.p-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(82,166,255,.45)}
.p-card-media{position:relative;overflow:hidden;aspect-ratio:16/9;background:#0b1422}
.p-card-lg .p-card-media{aspect-ratio:16/8.6}
.p-card-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:.5s}
.p-card:hover .p-card-media img{transform:scale(1.035)}
.p-card-media .tag-top{position:absolute;left:16px;top:16px;z-index:2}
.p-corner{position:absolute;right:14px;bottom:14px;backdrop-filter:blur(7px);background:rgba(3,8,15,.55);border:1px solid rgba(255,255,255,.18);color:#cde4fb;border-radius:9px;padding:7px 12px;font-size:12px}
.p-card-body{display:flex;flex-direction:column;flex:1;padding:21px 23px 18px;gap:12px}
.p-card-body h3{font-size:20px;color:#fff;font-weight:600}
.p-card-lg .p-card-body h3{font-size:23px}
.p-card-body p{font-size:14px;color:#91a8c3;line-height:1.72;flex:1}
.spec-list{display:flex;flex-wrap:wrap;gap:7px 9px;margin-top:6px}
.spec-list li{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:#b6c7ed;padding:5px 10px;border-radius:8px}
.spec-list i{color:var(--accent);font-size:10px}
.product-actions{display:flex;align-items:center;gap:12px;margin-top:14px}
.product-actions .btn{font-size:14px}
.btn--sm{padding:8px 18px}
.btn--line{border:1px solid rgba(140,175,220,.35);background:transparent;color:#b8d3f5;border-radius:9px;font-weight:500;padding:8px 18px}
.btn--line:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(88,224,255,.4)}
.p-row2{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.p-card-wide .p-card-media{aspect-ratio:3/2}
.price-hint{font-size:13px;color:var(--amber);font-weight:500}

.p-card--compact{flex-direction:row;gap:0;min-height:242px}
.p-card--compact .p-card-media{aspect-ratio:auto;width:44%;min-height:100%}
.p-card--compact .p-card-media img{width:100%;height:100%;object-fit:cover}
.p-card--compact .p-card-body{padding:18px 20px;padding-right:15px}
.p-card--compact h3{font-size:17px}
.p-card--compact p{font-size:13.5px}
.row4-pair{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:24px}
.row4-pair .p-card-media{aspect-ratio:3/2.3}
.p-card-mini h3{font-size:17.5px}
@media(min-width:1100px){
  .row4-pair{margin-bottom:0}
}

/* about asymmetric */
.about-block{background:rgba(12,20,38,.32)}
.about-grid{display:grid;grid-template-columns:1fr 1.13fr;gap:30px;align-items:stretch}
.about-art{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:426px;border-right:1px solid rgba(140,175,220,.16)}
.about-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-art::after{content:"";position:absolute;inset:0;background:linear-gradient(10deg,rgba(5,10,20,.88),transparent 70%)}
.about-art .art-quote{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;background:rgba(7,15,29,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:13px 16px;font-size:13.5px;color:#c9ddef;display:flex;gap:9px;align-items:center}
.about-art .art-quote i{color:var(--amber)}
.about-copy{padding:28px 18px 28px 14px;display:flex;flex-direction:column;justify-content:center}
.about-copy h3{font-size:28px;line-height:1.38;color:#fff;letter-spacing:.3px}
.about-copy > p{color:#a9bdd7;font-size:15.5px;margin-top:15px;max-width:60em}
.about-list{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px;margin-top:19px}
.about-list li{display:flex;gap:9px;align-items:flex-start;background:rgba(140,175,220,.05);border:1px solid rgba(140,175,220,.09);padding:13px 14px;border-radius:11px;color:#c8dcf3;font-size:14.5px}
.about-list li i{color:var(--accent);margin-top:3px}
.seo-word{padding:20px 0 0 14px;color:#7a91ac;font-size:13.5px;line-height:1.95}
.seo-word strong{color:#aec8ec;font-weight:600}

/* CMS news section */
.news-zone{padding:84px 0 10px}
.news-board{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;margin-top:28px;align-items:start}
.news-spot{display:grid;grid-template-columns:.9fr 1.1fr;background:linear-gradient(180deg,rgba(16,26,45,.8),rgba(9,16,30,.88));border:1px solid rgba(140,175,220,.15);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.news-spot__media{aspect-ratio:4/3;overflow:hidden;background:#0d1b2d}
.news-spot__media img{width:100%;height:100%;object-fit:cover;transition:.5s}
.news-spot__media:hover img{transform:scale(1.05)}
.news-spot__body{padding:20px 20px 16px;display:flex;flex-direction:column}
.spot-meta{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.spot-meta i{font-size:10px;color:var(--accent)}
.news-spot__body h3{margin-top:13px;font-size:19px;line-height:1.5;color:#fff;font-weight:650}
.news-spot__body h3 a:hover{color:var(--accent)}
.news-abstract{color:#8da6c5;font-size:14px;margin-top:9px;flex:1}
.news-more{color:#7ac2ff;font-size:13.5px;font-weight:600;margin-top:12px;display:inline-flex;gap:6px}
.news-more:hover{color:var(--accent);gap:11px}
.news-list{display:flex;flex-direction:column;background:rgba(11,20,37,.3);border:1px solid rgba(140,175,220,.13);border-radius:var(--radius-lg);padding:5px 15px;min-height:100%}
.news-row{display:flex;gap:12px;align-items:center;padding:14px 7px;border-bottom:1px solid rgba(140,175,220,.12);transition:.22s}
.news-row:last-child{border-bottom:0}
.news-row:hover{background:rgba(59,158,255,.04)}
.row-thumb{flex:0 0 66px;height:50px;border-radius:8px;overflow:hidden;background:#18253d}
.row-thumb img{width:100%;height:100%;object-fit:cover}
.row-main{flex:1;min-width:0}
.row-title{display:block;font-size:14px;color:#d4e2f5;font-weight:600;line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news-row:hover .row-title{color:var(--accent)}
.row-sub{font-size:12.5px;color:#8399ba;margin-top:3px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-extra{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.mini-tag{font-size:11px;background:rgba(88,224,255,.1);border:1px solid rgba(88,224,255,.2);color:#93d8f5;border-radius:7px;padding:3px 9px}
.narrow-date{font-size:11.5px;color:#657f9e}
.news-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:60px 20px;color:var(--faint);min-height:190px}
.news-empty i{font-size:28px;color:#3d5676}
.news-empty p{font-size:14px}

/* talk */
.talk-section{padding:30px 0;}
.talk-list{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.talk-card{border:1px solid rgba(140,175,220,.13);background:linear-gradient(150deg,rgba(14,26,45,.56),rgba(10,16,30,.72));border-radius:13px;padding:20px 22px;margin-top:10px;position:relative}
.talk-card h4{margin:16px 0 8px;color:#d9edff;font-size:18px;line-height:1.5}
.talk-card p{color:#94aac5;font-size:14px}
.talk-foot{display:flex;align-items:center;gap:9px;margin-top:13px;color:#697c98;font-size:13px}
.talk-foot i{color:var(--amber)}
.talk-card .t-avatar{background:linear-gradient(135deg,#0d1d3b,#183259);border-radius:10px;width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center;color:#cfe8ff;font-size:12px;border:1px solid rgba(140,175,220,.25)}
.talk-feature-grid{display:grid;grid-template-columns:1.45fr .9fr;gap:20px;align-items:stretch}
.talk-main-card{background:linear-gradient(135deg,rgba(13,25,47,.8),rgba(7,13,25,.9));border:1px solid rgba(59,158,255,.18);border-radius:15px;padding:24px}
.quote-mark{font-size:40px;line-height:.8;color:var(--primary);font-family:Georgia,serif;}

/* benefit strip */
.benefit{padding:40px 0 16px}
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(140,175,220,.15);border-bottom:1px solid rgba(140,175,220,.15)}
.benefit-cell{position:relative;padding:30px 16px 22px 0}
.benefit-cell + .benefit-cell{padding-left:26px;border-left:1px solid rgba(140,175,220,.13)}
.benefit-cell i{color:var(--accent);font-size:18px;width:38px;height:38px;background:rgba(88,224,255,.08);border:1px solid rgba(88,224,255,.18);border-radius:10px;display:grid;place-items:center;margin-bottom:12px}
.benefit-cell h3{font-size:16px;color:#dcebfc;margin-bottom:5px;font-weight:600}
.benefit-cell p{font-size:13px;color:var(--muted);line-height:1.7}

/* faq */
.faq-block{padding:35px 0 15px}
.faq-head{text-align:center;margin-bottom:26px;background:rgba(255,255,255,.02);border:1px solid rgba(140,175,220,.14);border-radius:var(--radius-lg);padding:28px 24px}
.faq-head h2{font-size:28px;color:#fff}
.faq-head p{margin-top:7px;color:var(--muted);font-size:14px}
.faq-detail{border:1px solid rgba(140,175,220,.14);background:rgba(14,24,44,.25);border-radius:13px;margin-bottom:10px;overflow:hidden}
.faq-detail summary{display:flex;align-items:center;gap:10px;cursor:pointer;padding:16px 20px;list-style:none;font-size:15.5px;font-weight:550;color:#d3eaff;transition:.2s}
.faq-detail summary::-webkit-details-marker{display:none}
.faq-detail summary .qno{width:25px;height:25px;flex:0 0 25px;border-radius:8px;display:grid;place-items:center;font-size:12px;color:#86d6ff;background:rgba(59,158,255,.12);border:1px solid rgba(59,158,255,.2)}
.faq-detail summary .chev{margin-left:auto;transition:.3s;color:var(--faint)}
.faq-detail[open] summary .chev{transform:rotate(180deg)}
.faq-detail .faq-body{padding:3px 34px 19px 55px;color:#b8cae1;font-size:14px;line-height:2}

/* cta zone */
.cta-panel{margin:30px 0 65px;border-radius:22px;overflow:hidden;position:relative;padding:50px 48px;border:1px solid rgba(140,175,220,.2)}
.cta-panel::before{content:"";position:absolute;inset:0;background:url('/assets/images/backpic/back-3.png') center/cover no-repeat;filter:brightness(.42) saturate(.8);z-index:-1}
.cta-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,16,32,.74),rgba(6,13,27,.9));z-index:-1}
.cta-panel h2{font-size:29px;color:#fff;line-height:1.4}
.cta-panel .cta-sub{color:#c7daf1;margin-top:10px;font-size:15px;max-width:700px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:31px}
.cta-smalllink{display:inline-flex;align-items:center;gap:8px;color:#c2d6f2;font-weight:600;margin-left:9px}
.cta-points{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:38px;margin-left:0}
.cta-points span{display:flex;align-items:center;gap:8px;font-size:13px;color:#a8bed9;background:rgba(255,255,255,.035);border-radius:10px;padding:7px 10px}
.cta-points i{color:var(--success)}

/* footer */
.site-footer{background:#050a13;border-top:1px solid rgba(140,175,220,.12);padding-top:26px;position:relative}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px;padding:36px 0 20px}
.footer-brand .footer-txt{display:flex;align-items:center;gap:9px}
.footer-brand .footer-txt strong{font-size:17px;color:#ebf3ff;margin-top:1px}
.fbot-desc{color:#7185a5;font-size:13.5px;margin-top:13px;max-width:300px;line-height:1.9}
.footer-col h4{color:#d3e5fb;font-size:14px;margin-bottom:14px}
.footer-col a{display:block;color:#758cb1;font-size:13.5px;line-height:2.35;font-weight:400}
.footer-col a:hover{color:#d8ebff}
.footer-col .contact-txt{font-size:13.5px;color:#7991b4;line-height:2}
.footer-bottom{border-top:1px solid rgba(90,130,180,.12);padding:15px 0;text-align:center;color:#59667b;font-size:12px;}
.footer-bottom a{color:#7d94b7}
@media(max-width:900px){ .cta-panel{padding:35px 18px} }

/* ===== media ===== */
@media (max-width:1179px){
  .site-sidebar{width:80px}
  .sidebar-inner{padding:20px 10px;align-items:center}
  .brandbox{border-bottom:1px solid rgba(140,175,220,.12);justify-content:center;padding:2px 0 16px}
  .brand-copy,.side-help .help-btn span,.side-help p,.side-head{display:none}
  .side-help{width:56px;height:56px;padding:0;display:grid;place-items:center;border-radius:15px}
  .side-help .help-btn{width:44px;height:44px;padding:0;border:none;background:rgba(59,158,255,.14);border-radius:12px}
  .side-help .help-btn span{display:none}
  .side-help .help-btn::before{content:"\f095";font-family:"Font Awesome 6 Free";font-weight:900}
  .sidenav{gap:7px}
  .nav-link{justify-content:center;padding:10px 8px;gap:0}
  .nav-link .nav-text,.side-copy{display:none}
  .nav-link.active::before{left:auto;right:3px;width:3px;height:17px;top:13px}
  .site-sidebar + .main-content,.main-content{margin-left:80px;width:calc(100% - 80px)}
  .hero-grid{grid-template-columns:1fr .86fr;gap:30px}
  .hero-copy h1{font-size:36px}
  .hero-section{min-height:600px}
  .news-board{grid-template-columns:1fr}
  .product-ctas{font-size:13px}
  .strip-grid,.benefit-grid{grid-template-columns:1fr 1fr}
  .strip-item{border-left:0;border-top:1px solid rgba(140,175,220,.12)}
  .benefit-cell{text-align:left}
  .benefit-cell + .benefit-cell{border-left:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:15px}
}

@media (max-width:1023px){
  .hero-grid{grid-template-columns:1fr;max-width:760px;margin:0 auto}
  .hero-visual{width:min(620px,100%);margin:0 auto}
  .hero-visual{height:520px}
  .hero-copy h1{font-size:38px}
  .spec-orbs{left:0}
  .about-grid{grid-template-columns:1fr}
  .about-art{min-height:300px}
  .about-copy{padding-left:2px}
  .news-spot{grid-template-columns:1fr}
  .news-spot__media{aspect-ratio:16/9}
  .p-card--compact{flex-direction:column}
  .p-card--compact .p-card-media{width:100%;aspect-ratio:16/8}
  .talk-feature-grid{grid-template-columns:1fr}
  .cta-points{grid-template-columns:1fr 1fr}
}

@media (max-width:767px){
  body.sidebar-open .mobile-topbar{box-shadow:none}
  .mobile-topbar{display:flex}
  .site-sidebar,.sidebar-inner{width:290px}
  .site-sidebar{width:290px;transform:translateX(-111%);background:#070e1c;box-shadow:10px 0 40px rgba(0,0,0,.4);border-right:1px solid rgba(140,175,220,.1)}
  .sidebar-inner{align-items:stretch;padding:20px 16px}
  .brandbox{align-items:center;justify-content:flex-start;padding-left:4px}
  .brand-copy{display:block}
  .side-head{display:block}
  .sidenav{display:block}
  .nav-link{justify-content:flex-start;gap:13px;padding:13px 15px}
  .nav-link .nav-text{display:inline}
  .nav-link.active::before{right:auto;left:0;width:4px;height:20px;top:12px}
  .side-help{display:block;width:auto;height:auto;padding:15px}
  .side-help p{display:block}
  .side-help .help-btn{width:100%;height:auto;padding:10px}
  .side-help .help-btn::before{content:"";display:none}
  .side-help .help-btn span{display:inline}
  .side-copy{display:block}
  .main-content{margin-left:0;width:100%;padding-top:64px}
  .container{padding:0 18px}
  .hero-section{padding:40px 0 20px;min-height:auto}
  .hero-grid{gap:25px;padding-top:8px}
  .hero-copy h1{font-size:30px;line-height:1.42}
  .hero-copy .overline{font-size:11px}
  .hero-desc{font-size:15.5px}
  .hero-desc br{display:none}
  .hero-visual{height:390px;margin-top:6px}
  .visual-frame{left:6px;right:6px;top:0}
  .specorbs{left:-4px}
  .hero-ctas .btn{width:100%;padding:14px}
  .hero-note{justify-content:center}
  .strip-grid{grid-template-columns:1fr 1fr;margin-top:5px}
  .preamble-title h2{text-align:center;font-size:25px}
  .bento-grid{grid-template-columns:1fr;gap:17px}
  .p-row2{grid-template-columns:1fr}
  .row4-pair{grid-template-columns:1fr 1fr;gap:16px}
  .section-head h2{font-size:25px}
  .section{padding-top:58px}
  .news-zone{padding-top:50px}
  .about-list{grid-template-columns:1fr}
  .news-board{gap:17px}
  .news-list{padding:0 5px}
  .row-extra{display:none}
  .news-row{padding:12px 2px}
  .talk-card{padding:17px}
  .benefit-grid{grid-template-columns:1fr}
  .benefit-cell{padding:18px 0}
  .benefit-cell+.benefit-cell{padding-left:0}
  .footer-grid{grid-template-columns:1fr;gap:22px;padding-top:31px}
  .cta-panel{padding:24px 17px;border-radius:16px;margin:20px 0 40px}
  .cta-panel h2{font-size:22px}
  .cta-row{flex-direction:column;align-items:stretch}
  .faq-detail summary{padding:12px 14px;align-items:flex-start}
  .faq-detail summary .faq-title{line-height:1.6}
  .faq-detail .faq-body{padding:8px 16px 18px 30px}
  .cta-points{grid-template-columns:1fr}
  .btn--line{width:100%}
}
@media (max-width:520px){
  .hero-visual{height:340px}
  .news-spot__body{padding:17px}
  .news-spot__body h3{font-size:17px}
  .row4-pair{grid-template-columns:1fr;margin-top:0}
}
.no-scroll{overflow:hidden}

/* roulang page: article */
:root{
  --bg:#070D19;
  --bg-elev:#0E1626;
  --bg-deep:#050A12;
  --panel:rgba(255,255,255,.04);
  --line:rgba(140,175,220,.16);
  --primary:#3B9EFF;
  --accent:#58E0FF;
  --amber:#FFC25E;
  --text:#E6EDF7;
  --text2:#9CABBE;
  --text3:#5A6A80;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 8px 24px rgba(0,0,0,.22);
  --badge-bg:rgba(59,158,255,.14);
  --font:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei UI","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;transition:color .2s ease,border-color .2s ease,background .2s ease}
img{max-width:100%;display:block}
ul,ol{list-style:none}
button,input,textarea{font:inherit;border:0;background:none;color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:8px;
  font-weight:600;
  padding:12px 22px;
  border:1px solid transparent;
  transition:all .24s ease;
  cursor:pointer;
  font-size:15px;
}
.btn-primary{
  background:var(--primary);
  color:#081B2C;
  box-shadow:0 0 0 2px rgba(59,158,255,.12),0 8px 24px rgba(59,158,255,.24);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(88,224,255,.18),0 14px 34px rgba(59,158,255,.28);
}
.btn-outline{
  border-color:rgba(140,175,220,.32);
  color:var(--text);
  background:rgba(255,255,255,.03);
}
.btn-outline:hover{
  border-color:var(--primary);
  color:var(--accent);
  background:rgba(59,158,255,.08);
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text2);
  font-weight:500;
}
.text-link:hover{color:var(--accent)}

/* ===== Mobile topbar ===== */
.topbar-mobile{
  position:fixed;
  top:0;left:0;right:0;
  z-index:3200;
  height:64px;
  padding:0 14px;
  background:rgba(7,13,25,.96);
  border-bottom:1px solid var(--line);
  display:none;
  align-items:center;
  gap:12px;
  backdrop-filter:blur(16px);
}
.topbar-mobile .menu-btn{
  width:40px;height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:var(--text);
  border:1px solid rgba(140,175,220,.20);
  font-size:17px;
}
.topbar-mobile .topbar-brand{
  flex:1;
  font-weight:800;
  color:var(--text);
  letter-spacing:.02em;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topbar-mobile .topbar-cta{
  width:40px;height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:var(--accent);
  border:1px solid rgba(88,224,255,.30);
  font-size:16px;
}

/* ===== Sidenav ===== */
.sidenav{
  position:fixed;
  top:0;left:0;
  width:260px;
  height:100vh;
  z-index:3000;
  background:linear-gradient(180deg,#0A1322,#0B1322);
  border-right:1px solid var(--line);
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  scrollbar-width:none;
}
.sidenav::-webkit-scrollbar{width:0}
.nav-brand{
  min-height:70px;
  border-bottom:1px solid rgba(140,175,220,.12);
  margin-bottom:18px;
  padding-bottom:18px;
}
.brand-logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-logo-mark{
  flex:0 0 46px;
  width:46px;
  height:46px;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(59,158,255,.18),rgba(88,224,255,.10));
  border:1px solid rgba(88,224,255,.32);
  color:var(--accent);
  font-weight:800;
  font-size:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 26px rgba(59,158,255,.16);
}
.brand-logo-text{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.brand-logo-text strong{
  color:var(--text);
  font-weight:800;
  font-size:16px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.brand-logo-text small{
  color:var(--text3);
  font-size:11px;
  letter-spacing:.04em;
}
.nav-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nav-link{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:48px;
  padding:0 15px;
  border-radius:11px;
  color:var(--text2);
  font-weight:500;
  font-size:15px;
  border-left:3px solid transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.nav-link i{
  width:22px;
  text-align:center;
  font-size:15px;
}
.nav-link:hover{
  color:var(--text);
  background:rgba(255,255,255,.045);
}
.nav-link.active{
  color:#FFFFFF;
  background:linear-gradient(90deg,rgba(59,158,255,.16),rgba(59,158,255,.04));
  border-left-color:var(--accent);
}
.nav-link.active i{color:var(--accent)}
.nav-link.active:hover{background:linear-gradient(90deg,rgba(59,158,255,.20),rgba(59,158,255,.07))}
.sidenav-info{
  margin-top:auto;
  padding:20px 8px 4px;
  border-top:1px solid rgba(140,175,220,.12);
}
.sidenav-info p{
  font-size:12px;
  color:var(--text3);
  line-height:1.7;
  margin-top:10px;
}
.sidenav-info .btn{
  width:100%;
  padding:11px 14px;
  font-size:13px;
  border-radius:9px;
  justify-content:center;
}

/* ===== Site main ===== */
.site-main{
  margin-left:260px;
  min-height:100vh;
  width:auto;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ===== Banner ===== */
.article-banner{
  position:relative;
  min-height:220px;
  display:flex;
  align-items:center;
  background:var(--bg-elev) center/cover no-repeat;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.article-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,13,25,.96) 10%,rgba(7,13,25,.76) 60%,rgba(7,13,25,.68));
  z-index:1;
}
.article-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:46px 46px;
  z-index:1;
}
.banner-content{
  position:relative;
  z-index:2;
  padding-top:54px;
  padding-bottom:52px;
}
.breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  color:var(--text2);
  margin-bottom:26px;
}
.breadcrumb a{color:var(--text2)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--text3)}
.banner-content h2{
  font-size:32px;
  line-height:1.3;
  color:#FFFFFF;
  font-weight:700;
  max-width:760px;
}
.banner-description{
  margin-top:12px;
  color:var(--text2);
  font-size:15px;
  max-width:760px;
}

/* ===== Article layout ===== */
.post-area{
  width:100%;
  max-width:920px;
  margin:-40px auto 0;
  padding:0 32px;
  position:relative;
  z-index:5;
}
.post-shell{
  background:rgba(14,22,38,.92);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:40px 46px 48px;
}
.post-header h1{
  font-size:34px;
  line-height:1.35;
  font-weight:800;
  color:#F2F6FC;
  letter-spacing:.01em;
}
.post-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-top:18px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(140,175,220,.14);
}
.meta-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text2);
  font-size:13px;
}
.meta-item i{color:var(--text3);font-size:13px}
.meta-item span{color:var(--text)}
.post-category{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  background:var(--badge-bg);
  border:1px solid rgba(59,158,255,.25);
  color:var(--accent);
  font-size:12px;
  font-weight:600;
  margin-top:6px;
}
.post-cover{
  margin:28px 0 12px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.post-cover img{
  width:100%;
  aspect-ratio:16/8;
  object-fit:cover;
}
.post-content{
  margin-top:30px;
  font-size:16px;
  line-height:2;
  color:var(--text);
}
.post-content p{
  margin:0 0 1.3em;
}
.post-content p:last-of-type{
  margin-bottom:0;
}
.post-content h2{
  font-size:26px;
  color:#FFFFFF;
  margin:42px 0 16px;
  padding-left:14px;
  border-left:4px solid var(--accent);
  line-height:1.4;
  font-weight:700;
}
.post-content h3{
  font-size:21px;
  color:#FFFFFF;
  margin:34px 0 12px;
  font-weight:700;
  line-height:1.5;
}
.post-content h4{
  font-size:18px;
  color:var(--text);
  font-weight:700;
  margin:26px 0 10px;
}
.post-content strong{color:#FFFFFF;font-weight:700}
.post-content a{
  color:var(--accent);
  border-bottom:1px solid rgba(88,224,255,.34);
}
.post-content a:hover{border-bottom-color:var(--accent)}
.post-content ul,
.post-content ol{
  margin:0 0 1.3em;
  padding-left:1.35em;
}
.post-content ul{list-style:disc}
.post-content ol{list-style:decimal}
.post-content li{
  margin-bottom:.45em;
  color:var(--text);
}
.post-content blockquote{
  margin:1.8em 0;
  border-left:4px solid var(--primary);
  background:rgba(59,158,255,.08);
  padding:18px 22px;
  border-radius:0 12px 12px 0;
  color:var(--text2);
  font-size:15px;
}
.post-content blockquote p{color:var(--text2);margin:0}
.post-content img{
  border-radius:12px;
  border:1px solid var(--line);
  margin:1.4em 0;
}
.post-content table{
  width:100%;
  border-collapse:collapse;
  margin:1.6em 0;
  font-size:14px;
  overflow:hidden;
  display:block;
  overflow-x:auto;
}
.post-content th,
.post-content td{
  border:1px solid var(--line);
  padding:10px 14px;
  text-align:left;
  vertical-align:top;
  white-space:nowrap;
}
.post-content th{
  background:rgba(59,158,255,.10);
  color:#FFFFFF;
  font-weight:600;
}
.post-content pre{
  background:#0A101E;
  border:1px solid var(--line);
  padding:18px;
  border-radius:12px;
  overflow-x:auto;
  color:var(--accent);
  font-size:14px;
  line-height:1.8;
  margin:1.6em 0;
}
.post-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  border-top:1px solid rgba(140,175,220,.14);
  margin-top:38px;
  padding-top:22px;
}
.post-tags-label{
  color:var(--text3);
  font-size:13px;
  margin-right:4px;
}
.tag{
  display:inline-flex;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(140,175,220,.18);
  color:var(--text2);
  font-size:12px;
  transition:all .2s ease;
}
.tag:hover{
  border-color:rgba(59,158,255,.42);
  color:var(--accent);
  background:rgba(59,158,255,.09);
}
.post-pagination{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid rgba(140,175,220,.14);
}
.post-pagination a{
  font-size:14px;
  color:var(--text2);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 0;
}
.post-pagination a:hover{color:var(--accent)}
.post-pagination .prev-link{order:0}
.post-pagination .next-link{order:1}
.post-pagination .center-gap{flex:1;order:2}

/* ===== Not found ===== */
.notfound-card{
  background:rgba(14,22,38,.90);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:64px 40px 72px;
  text-align:center;
  max-width:760px;
  margin:60px auto 90px;
}
.notfound-card i{
  font-size:44px;
  color:var(--text3);
  display:block;
  margin-bottom:22px;
}
.notfound-card h1{
  font-size:32px;
  color:#FFFFFF;
  margin-bottom:14px;
  font-weight:800;
}
.notfound-card p{
  color:var(--text2);
  max-width:560px;
  margin:0 auto 28px;
  font-size:15px;
  line-height:1.8;
}

/* ===== Related section ===== */
.related-section{
  max-width:1200px;
  margin:78px auto 52px;
  padding:0 32px;
  width:100%;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.section-head h2{
  font-size:28px;
  color:#FFFFFF;
  font-weight:800;
  line-height:1.4;
}
.section-head p{
  color:var(--text2);
  font-size:14px;
  max-width:520px;
}
.related-grid{
  display:grid;
  grid-template-columns:1.25fr .85fr;
  grid-auto-rows:minmax(0,1fr);
  gap:20px;
}
.related-card{
  display:flex;
  flex-direction:column;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  color:var(--text);
}
.related-card:hover{
  border-color:rgba(59,158,255,.38);
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(0,0,0,.28);
}
.related-card.featured{
  grid-row:span 2;
}
.related-pic{
  overflow:hidden;
  background:var(--bg-deep);
  position:relative;
}
.featured .related-pic{
  min-height:220px;
  flex:1;
}
.related-pic img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.related-card:hover .related-pic img{transform:scale(1.04)}
.related-body{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:22px 24px 24px;
}
.related-eyebrow{
  font-size:12px;
  color:var(--accent);
  letter-spacing:.05em;
  font-weight:600;
}
.related-body h3{
  font-size:18px;
  color:#FFFFFF;
  font-weight:700;
  line-height:1.45;
}
.featured .related-body h3{
  font-size:24px;
}
.related-body p{
  color:var(--text2);
  font-size:14px;
  line-height:1.8;
}
.more-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  color:var(--accent);
  font-size:14px;
  font-weight:600;
}
.more-link i{
  transition:transform .2s ease;
}
.more-link:hover i{
  transform:translateX(5px);
}
.related-mini{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:24px;
}
.related-mini .related-card{
  grid-template-columns:1fr;
}
@media(min-width:768px) and (max-width:1023px){
  .related-mini{
    grid-template-columns:1fr;
  }
}

/* ===== Article CTA ===== */
.article-cta{
  background:rgba(14,22,38,.72);
  border:1px solid var(--line);
  border-radius:18px;
  padding:30px;
  margin:16px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.article-cta h3{
  color:#FFFFFF;
  font-size:19px;
  font-weight:700;
  margin-bottom:6px;
}
.article-cta p{
  color:var(--text2);
  font-size:14px;
  line-height:1.7;
}
.article-cta .cta-buttons{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.article-cta .btn{
  padding:11px 18px;
  font-size:14px;
}

/* ===== Footer ===== */
.site-footer{
  margin-top:auto;
  background:var(--bg-deep);
  border-top:1px solid var(--line);
  padding-top:60px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr .7fr 1fr;
  gap:34px;
  padding-bottom:44px;
}
.footer-brand .footer-txt{
  display:flex;
  align-items:center;
  gap:10px;
}
.brandmark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(59,158,255,.14);
  border:1px solid rgba(88,224,255,.28);
  color:var(--accent);
  font-weight:800;
}
.footer-brand strong{
  color:var(--text);
  font-size:16px;
  font-weight:800;
}
.fbot-desc{
  margin-top:14px;
  color:var(--text3);
  font-size:13px;
  line-height:1.9;
  max-width:340px;
}
.footer-col h4{
  color:var(--text);
  font-size:14px;
  font-weight:700;
  margin-bottom:14px;
}
.footer-col a{
  display:block;
  color:var(--text2);
  font-size:13px;
  padding:6px 0;
  line-height:1.6;
}
.footer-col a:hover{
  color:var(--accent);
  padding-left:3px;
}
.contact-txt{
  color:var(--text3);
  font-size:13px;
  line-height:1.9;
}
.footer-bottom{
  border-top:1px solid rgba(140,175,220,.10);
  padding:18px 0;
  color:var(--text3);
  font-size:12px;
}
.footer-bottom span{
  display:block;
  padding:0 32px;
}

/* ===== Responsive ===== */
@media(max-width:1179px){
  .sidenav{
    width:238px;
  }
  .site-main{
    margin-left:238px;
  }
  .container{
    padding:0 26px;
  }
  .post-area{
    padding:0 26px;
  }
  .related-section{
    padding:0 26px;
  }
  .footer-bottom span{
    padding:0 26px;
  }
}
@media(max-width:1023px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
  .footer-brand{
    grid-column:1 / -1;
  }
}
@media(max-width:767px){
  .topbar-mobile{
    display:flex;
  }
  .sidenav{
    width:284px;
    max-width:86vw;
    top:64px;
    height:calc(100vh - 64px);
    transform:translateX(-106%);
    transition:transform .28s ease;
    box-shadow:12px 0 36px rgba(0,0,0,.34);
  }
  body.nav-open .sidenav{
    transform:translateX(0);
  }
  .nav-overlay{
    display:block!important;
    position:fixed;
    top:64px;left:0;right:0;bottom:0;
    z-index:2990;
    background:rgba(3,7,14,.66);
    backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    transition:opacity .24s ease,visibility .24s ease;
  }
  body.nav-open .nav-overlay{
    opacity:1;
    visibility:visible;
  }
  .site-main{
    margin-left:0;
    padding-top:64px;
  }
  .article-banner{
    min-height:174px;
  }
  .banner-content{
    padding-top:40px;
    padding-bottom:36px;
  }
  .banner-content h2{
    font-size:24px;
  }
  .banner-description{
    font-size:13px;
  }
  .post-area{
    margin-top:0;
    padding:0 0 0;
  }
  .post-shell{
    padding:26px 20px 30px;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .post-header h1{
    font-size:24px;
  }
  .post-content{
    font-size:15px;
    line-height:1.9;
  }
  .post-content h2{
    font-size:21px;
  }
  .post-content h3{
    font-size:18px;
  }
  .related-section{
    margin-top:46px;
    padding:0 16px;
  }
  .section-head h2{
    font-size:22px;
  }
  .related-grid{
    grid-template-columns:1fr;
  }
  .related-card.featured{
    grid-row:auto;
  }
  .featured .related-pic{
    min-height:180px;
  }
  .related-mini{
    grid-template-columns:1fr;
  }
  .article-cta{
    flex-direction:column;
    align-items:flex-start;
    padding:22px;
  }
  .article-cta .cta-buttons{
    width:100%;
  }
  .article-cta .btn,
  .article-cta .text-link{
    width:100%;
    justify-content:center;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:24px;
    padding-bottom:20px;
  }
  .site-footer{
    padding-top:40px;
  }
  .container{
    padding:0 18px;
  }
  .footer-bottom span{
    padding:0 18px;
  }
  .post-pagination{
    flex-direction:column;
    align-items:stretch;
  }
  .post-pagination a{
    justify-content:center;
    padding:12px;
    background:rgba(255,255,255,.035);
    border:1px solid var(--line);
    border-radius:10px;
  }
  .notfound-card{
    margin:30px 14px 50px;
    padding:42px 20px;
  }
  .notfound-card h1{
    font-size:26px;
  }
}
@media(max-width:480px){
  .footer-grid{
    grid-template-columns:1fr;
  }
  .related-section{
    padding:0 12px;
  }
  .banner-content h2{
    font-size:21px;
  }
}

/* roulang page: category1 */
:root {
  --primary: #3B9EFF;
  --primary-strong: #58E0FF;
  --amber: #FFC25E;
  --bg: #070D19;
  --panel: #0E1626;
  --panel-2: #101826;
  --glass-base: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.08);
  --text: #E6EDF7;
  --muted: #9CABBE;
  --weak: #5A6A80;
  --border: rgba(140, 175, 220, 0.16);
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.32);
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --sidebar-w: 260px;
  --sidebar-w-sm: 228px;
  --sidebar-w-icon: 80px;
  --mobile-header-h: 62px;
  --ease: cubic-bezier(0.22, 0.72, 0.28, 1);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 56px 56px;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
button,
input,
textarea {
  font-family: inherit;
}
ul,
ol {
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.main-area {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.section {
  padding: 76px 0;
  position: relative;
}
.section-tight {
  padding: 48px 0;
}
.brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(59, 158, 255, 0.34), rgba(88, 224, 255, 0.10));
  border: 1px solid rgba(88, 224, 255, 0.5);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0;
  font-size: 16px;
  box-shadow: 0 0 24px rgba(59, 158, 255, 0.16);
}
.brandmark span {
  font-size: 17px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 16px;
  min-height: 76px;
}
.brand-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-txt strong {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #f5f9ff;
}
.brand-txt small {
  color: var(--weak);
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.sidenav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  background-color: rgba(10, 16, 29, 0.96);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 300;
  backdrop-filter: blur(12px);
  transition: transform 0.28s var(--ease);
}
.nav-area {
  padding: 20px 12px 12px;
  border-top: 1px solid rgba(140, 175, 220, 0.12);
}
.nav-group-label {
  font-size: 12px;
  color: var(--weak);
  letter-spacing: 0.12em;
  padding: 0 10px 10px;
}
.sidenav .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 15px;
  border-radius: 8px;
  position: relative;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.sidenav .nav-link i {
  width: 20px;
  text-align: center;
  font-size: 16px;
  color: var(--weak);
  transition: color 0.2s, filter 0.2s;
}
.sidenav .nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #eef6ff;
}
.sidenav .nav-link:hover i {
  color: var(--primary);
}
.sidenav .nav-link.active {
  background: rgba(59, 158, 255, 0.12);
  color: #f0f7ff;
  font-weight: 600;
}
.sidenav .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--primary);
  box-shadow: 0 0 14px rgba(59, 158, 255, 0.72);
}
.sidenav .nav-link.active i {
  color: var(--primary-strong);
}
.side-info {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid rgba(140, 175, 220, 0.12);
}
.side-info small {
  display: block;
  color: var(--weak);
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 8px;
}
.side-info .support-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 12px;
}
.mobile-topbar,
.drawer-shade {
  display: none;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s, border-color 0.2s;
}
.btn:active {
  transform: translateY(1px);
}
a.btn,
button.btn {
  color: inherit;
}
.btn-primary {
  background: var(--primary);
  color: #0a1b2e;
  font-weight: 600;
}
.btn-primary:hover {
  background: #51aaff;
  box-shadow: 0 10px 28px rgba(59, 158, 255, 0.32);
  transform: translateY(-1px);
}
.btn-amber {
  background: var(--amber);
  color: #2b2112;
  font-weight: 600;
}
.btn-amber:hover {
  background: #ffd17a;
  box-shadow: 0 10px 26px rgba(255, 194, 94, 0.3);
  transform: translateY(-1px);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text);
}
.btn-ghost:hover {
  background: rgba(59, 158, 255, 0.09);
  border-color: rgba(88, 224, 255, 0.54);
  color: #dff4ff;
}
.btn-glow {
  box-shadow: 0 0 0 1px rgba(88, 224, 255, 0.25), 0 0 24px rgba(59, 158, 255, 0.26);
}
.btn-sm {
  height: 38px;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 7px;
}
.btn-block {
  width: 100%;
}
.hero {
  position: relative;
  padding: 92px 0 72px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 75% 20%, rgba(59, 158, 255, 0.18), transparent 32%),
    #081020;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/assets/images/backpic/back-1.png');
  background-size: cover;
  background-position: center;
  opacity: 0.32;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 13, 25, 0.4), rgba(7, 13, 25, 0.94));
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 52px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--primary-strong);
  text-transform: uppercase;
  border: 1px solid rgba(88, 224, 255, 0.24);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  background: rgba(88, 224, 255, 0.08);
}
.hero-copy h1 {
  font-size: 48px;
  line-height: 1.18;
  margin: 22px 0 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f4f8fe;
}
.h1-sub {
  display: block;
  font-size: 31px;
  line-height: 1.3;
  color: #dce9fa;
  margin-top: 12px;
  font-weight: 500;
}
.hero-lead {
  font-size: 17px;
  color: #b7c7db;
  max-width: 610px;
  line-height: 2;
  margin-bottom: 34px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-panel {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid rgba(140, 175, 220, 0.16);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.panel-imgbox {
  height: 240px;
  overflow: hidden;
  position: relative;
  background: var(--panel-2);
}
.panel-imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.4s;
}
.hero-panel:hover .panel-imgbox img {
  transform: scale(1.03);
}
.panel-caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  background: rgba(6, 12, 22, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  font-size: 13px;
  padding: 6px 13px;
  color: #d5e5f8;
}
.panel-list {
  padding: 20px 20px 22px;
}
.panel-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(140, 175, 220, 0.1);
  color: var(--muted);
}
.panel-list li:last-child {
  border-bottom: 0;
}
.panel-list i {
  color: var(--primary-strong);
  width: 18px;
  text-align: center;
  font-size: 13px;
}
.bridge-strip {
  border-bottom: 1px solid var(--border);
  background: #081020;
}
.bridge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.bridge-item {
  padding: 28px 22px;
  border-right: 1px solid rgba(140, 175, 220, 0.13);
  transition: background 0.2s;
}
.bridge-item:last-child {
  border-right: 0;
}
.bridge-item:hover {
  background: rgba(255, 255, 255, 0.02);
}
.bridge-item i {
  color: var(--primary);
  font-size: 20px;
  display: block;
  margin-bottom: 14px;
}
.bridge-item h3 {
  font-size: 15px;
  font-weight: 600;
  color: #d9e6f6;
  margin-bottom: 6px;
}
.bridge-item p {
  font-size: 13px;
  color: var(--weak);
  line-height: 1.8;
}
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}
.sec-index {
  color: var(--primary);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sec-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-strong);
  font-size: 14px;
  margin-bottom: 8px;
}
.sec-title {
  font-size: 32px;
  line-height: 1.28;
  font-weight: 700;
  color: #f3f8fe;
  margin: 0 0 15px;
  letter-spacing: -0.01em;
}
.sec-intro {
  color: var(--muted);
  max-width: 780px;
  font-size: 15px;
  line-height: 1.95;
}
.title-mb {
  margin-bottom: 44px;
}
.split-brand {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 58px;
  align-items: center;
}
.split-copy p {
  color: #bbc9da;
  font-size: 15px;
  line-height: 2;
  margin-bottom: 18px;
}
.split-copy p:first-child {
  color: #d7e4f3;
}
.brand-key-list {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 13px;
}
.brand-key-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  color: var(--muted);
}
.brand-key-list li i {
  color: var(--amber);
  font-size: 15px;
  margin-top: 7px;
  width: 16px;
}
.brand-key-list strong {
  color: #dbe7f5;
  font-weight: 500;
  display: block;
}
.media-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 18px;
}
.media-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
  min-height: 410px;
  box-shadow: var(--shadow-card);
}
.media-main img {
  width: 100%;
  height: 100%;
  min-height: 410px;
  object-fit: cover;
}
.media-main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(7, 13, 25, 0.7));
}
.media-tag {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  font-size: 13px;
  color: #dfeaf9;
  line-height: 1.7;
}
.media-mini {
  display: grid;
  gap: 18px;
}
.media-mini .mini-card {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 22px 20px;
  position: relative;
}
.mini-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--primary-strong);
  display: block;
  line-height: 1.1;
}
.media-mini h4 {
  font-size: 16px;
  color: #d9e8f8;
  margin-top: 9px;
  margin-bottom: 7px;
}
.media-mini p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.mini-chip {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 11px;
  color: var(--amber);
  border: 1px solid rgba(255, 194, 94, 0.4);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
.section-alt {
  background: #0a1321;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.process-wrap {
  display: flex;
  gap: 76px;
  align-items: flex-start;
}
.process-sticky {
  flex: 0 0 270px;
  position: sticky;
  top: 30px;
}
.process-list {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
}
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  padding-bottom: 42px;
}
.process-step::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 64px;
  bottom: 0;
  width: 1px;
  background: rgba(140, 175, 220, 0.22);
}
.process-step:last-child::before {
  display: none;
}
.step-icon {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0d1b30;
  border: 1px solid rgba(88, 224, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  font-size: 18px;
  box-shadow: 0 0 0 5px rgba(59, 158, 255, 0.06);
}
.step-body {
  padding-top: 4px;
}
.step-body h3 {
  font-size: 18px;
  color: #e3eefc;
  margin-bottom: 8px;
  font-weight: 600;
}
.step-body p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.95;
}
.step-tag {
  font-size: 12px;
  color: var(--amber);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 7px;
}
.quality-section {
  position: relative;
  overflow: hidden;
}
.quality-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/backpic/back-2.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.quality-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 13, 25, 0.72);
}
.quality-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 52px;
  align-items: center;
}
.quality-copy h2 {
  font-size: 29px;
  line-height: 1.35;
  margin: 10px 0 14px;
}
.quality-copy p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.95;
}
.highlight-card {
  background: rgba(9, 18, 33, 0.8);
  border: 1px solid rgba(140, 175, 220, 0.22);
  border-radius: var(--radius-lg);
  padding: 30px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
}
.highlight-card h3 {
  font-size: 18px;
  margin-bottom: 6px;
  color: #e3f0ff;
}
.highlight-card > p {
  margin-bottom: 22px;
  font-size: 14px;
}
.qc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.qc-item {
  background: rgba(7, 13, 25, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 17px 16px;
  transition: background 0.2s, border-color 0.2s;
}
.qc-item:hover {
  background: rgba(7, 13, 25, 0.8);
  border-color: rgba(59, 158, 255, 0.4);
}
.qc-item .icon-lg {
  font-size: 17px;
  color: var(--primary-strong);
  display: block;
  margin-bottom: 9px;
}
.qc-item h4 {
  font-size: 15px;
  margin-bottom: 5px;
  color: #d9e8f8;
  font-weight: 600;
}
.qc-item p {
  font-size: 13px;
  color: var(--weak);
  line-height: 1.75;
}
.scene-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 54px;
  align-items: center;
}
.scene-list {
  margin-top: 24px;
}
.scene-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 18px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  color: var(--muted);
}
.scene-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.scene-row strong {
  color: #dce7f4;
  font-weight: 600;
  font-size: 15px;
}
.scene-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 440px;
}
.scene-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.scene-visual:hover img {
  transform: scale(1.045);
}
.scene-visual .scene-note {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  background: rgba(7, 13, 25, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 20px;
  border-radius: 12px;
  color: #d4e5fa;
  font-size: 14px;
}
.faq-wrap {
  max-width: 880px;
}
.faq-item {
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(140, 175, 220, 0.12);
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 20px 22px;
  list-style: none;
  color: #dbeaf8;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  transition: background 0.2s;
}
.faq-item summary:hover {
  background: rgba(59, 158, 255, 0.06);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary i {
  margin-left: auto;
  color: var(--primary-strong);
  font-size: 15px;
  transition: transform 0.22s var(--ease);
}
.faq-item[open] summary i {
  transform: rotate(45deg);
}
.faq-item[open] {
  background: rgba(59, 158, 255, 0.06);
}
.faq-answer {
  padding: 0 22px 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.95;
  max-width: 95%;
}
.faq-answer p + p {
  margin-top: 10px;
}
.cta-zone {
  background: #0a1a2e;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.cta-zone::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88, 224, 255, 0.4), transparent);
}
.cta-copy {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.cta-copy h2 {
  font-size: 30px;
  line-height: 1.35;
  margin-bottom: 14px;
  color: #eaf4ff;
}
.cta-copy p {
  color: var(--muted);
  margin-bottom: 28px;
  line-height: 2;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cta-mini-tip {
  font-size: 13px;
  color: var(--weak);
  text-align: center;
  margin-top: 22px;
}
.site-footer {
  background: #050a12;
  border-top: 1px solid rgba(140, 175, 220, 0.14);
  padding-top: 62px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.9fr 1.1fr;
  gap: 52px;
  padding-bottom: 52px;
}
.footer-txt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.footer-txt strong {
  font-size: 17px;
  color: #e9f3ff;
  font-weight: 600;
}
.fbot-desc {
  font-size: 14px;
  color: var(--weak);
  line-height: 1.9;
  max-width: 380px;
}
.footer-brand .brandmark {
  background: #0c1b2f;
  box-shadow: none;
}
.footer-col h4 {
  color: #c3d6ee;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.footer-col a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: var(--weak);
  line-height: 1.7;
  transition: color 0.2s, padding-left 0.2s;
}
.footer-col a:hover {
  color: var(--primary-strong);
  padding-left: 4px;
}
.contact-txt {
  color: var(--weak);
  font-size: 13px;
  line-height: 1.95;
}
.footer-bottom {
  border-top: 1px solid rgba(140, 175, 220, 0.12);
  padding: 22px 0;
  font-size: 13px;
  color: #46566a;
}
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-bottom a {
  color: var(--weak);
}
.footer-bottom a:hover {
  color: var(--primary);
}
@media (max-width: 1179px) {
  .main-area {
    margin-left: var(--sidebar-w-sm);
  }
  .sidenav {
    width: var(--sidebar-w-sm);
  }
  .brand {
    padding: 20px 18px 14px;
  }
  .brand-txt strong {
    font-size: 16px;
  }
  .side-info {
    padding: 16px;
  }
  .split-brand,
  .process-wrap,
  .quality-inner,
  .scene-split {
    gap: 38px;
  }
  .footer-grid {
    gap: 28px;
    grid-template-columns: 1.2fr 0.8fr 0.9fr 1.2fr;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sidenav {
    width: var(--sidebar-w-icon);
  }
  .main-area {
    margin-left: var(--sidebar-w-icon);
  }
  .sidenav .brand {
    justify-content: center;
    padding: 16px 0 16px;
  }
  .sidenav .brand-txt,
  .sidenav .nav-text,
  .sidenav .nav-group-label,
  .sidenav .side-info span,
  .sidenav .support-chip {
    display: none;
  }
  .sidenav .nav-area {
    padding: 12px 10px;
  }
  .sidenav .nav-link {
    justify-content: center;
    padding: 0;
    height: 48px;
  }
  .sidenav .nav-link.active::before {
    left: -4px;
  }
  .side-info {
    padding: 12px 10px;
  }
  .side-info small {
    font-size: 0;
  }
  .hero-grid,
  .split-brand,
  .scene-split {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 64px 0;
  }
  .hero-panel {
    max-width: 520px;
  }
  .scene-visual {
    min-height: 340px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
}
@media (max-width: 767px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 250;
    height: var(--mobile-header-h);
    padding: 0 14px;
    background: rgba(7, 13, 25, 0.88);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
  }
  .mobile-menu-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(140, 175, 220, 0.18);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    color: #dceafd;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .mobile-brandname {
    font-size: 16px;
    font-weight: 600;
    color: #e7f1ff;
    letter-spacing: 0.01em;
  }
  .mobile-service {
    border: 1px solid rgba(88, 224, 255, 0.34);
    background: rgba(59, 158, 255, 0.14);
    color: #dff5ff;
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  .drawer-shade {
    position: fixed;
    inset: 0;
    z-index: 310;
    background: rgba(3, 7, 14, 0.66);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s;
  }
  .drawer-check {
    position: fixed;
    opacity: 0;
    pointer-events: none;
  }
  .sidenav {
    width: 302px;
    transform: translateX(-104%);
    box-shadow: 18px 0 44px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s var(--ease);
  }
  .drawer-check:checked ~ .sidenav {
    transform: translateX(0);
  }
  .drawer-check:checked ~ .drawer-shade {
    opacity: 1;
    pointer-events: auto;
  }
  .main-area {
    margin-left: 0;
  }
  .mobile-brandname {
    white-space: nowrap;
  }
  .hero-copy h1 {
    font-size: 34px;
  }
  .h1-sub {
    font-size: 23px;
    margin-top: 10px;
  }
  .hero {
    padding: 48px 0 44px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .hero-panel {
    max-width: none;
  }
  .panel-imgbox {
    height: 200px;
  }
  .bridge-grid {
    grid-template-columns: 1fr;
  }
  .bridge-item {
    border-right: 0;
    border-bottom: 1px solid rgba(140, 175, 220, 0.12);
    padding: 22px 12px;
  }
  .bridge-item:last-child {
    border-bottom: 0;
  }
  .section {
    padding: 52px 0;
  }
  .sec-title {
    font-size: 25px;
    line-height: 1.4;
  }
  .split-brand {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .media-panel,
  .qc-list {
    grid-template-columns: 1fr;
  }
  .quality-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .process-sticky {
    position: static;
    flex: 0 0 auto;
    margin-bottom: 22px;
  }
  .process-wrap {
    flex-direction: column;
    gap: 30px;
  }
  .process-step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
  }
  .process-step::before {
    left: 24px;
  }
  .step-icon {
    width: 46px;
    height: 46px;
    font-size: 15px;
  }
  .scene-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .scene-visual {
    min-height: 280px;
  }
  .scene-visual .scene-note {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    border-radius: 0;
    background: #081226;
    border-top: 1px solid var(--border);
  }
  .faq-item summary {
    font-size: 15px;
    padding: 16px;
  }
  .faq-answer {
    padding: 0 18px 18px;
    font-size: 14px;
  }
  .cta-copy h2 {
    font-size: 24px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 36px;
  }
  .footer-brand {
    text-align: left;
  }
  .footer-bottom .container {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 479px) {
  .container {
    padding: 0 20px;
  }
  .hero-copy h1 {
    font-size: 29px;
  }
  .hero-copy .h1-sub {
    font-size: 20px;
  }
  .hero-lead {
    font-size: 15px;
  }
  .process-step {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: 28px;
  }
  .process-step::before {
    display: none;
  }
  .step-icon {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
  .step-body h3 {
    font-size: 16px;
  }
}

/* roulang page: category2 */
:root {
  --primary: #3B9EFF;
  --accent: #58E0FF;
  --cta: #FFC25E;
  --bg: #070D19;
  --panel: #0E1626;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --border: rgba(140, 175, 220, 0.16);
  --text-main: #E6EDF7;
  --text-sub: #9CABBE;
  --text-mute: #5A6A80;
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow: 0 8px 24px rgba(0,0,0,0.22);
  --shadow-hover: 0 14px 32px rgba(0,0,0,0.32);
  --sidebar-w: 260px;
  --sidebar-w-icon: 80px;
  --content-pad: 40px;
  --section-gap: 84px;
  --trans: all .25s ease;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; background: var(--bg); color: var(--text-main); line-height: 1.8; font-size: 15px; min-height: 100vh; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.app-shell { display: flex; min-height: 100vh; }
.sidenav {
  width: var(--sidebar-w); height: 100vh; position: sticky; top: 0; flex: 0 0 var(--sidebar-w);
  background: var(--panel); border-right: 1px solid var(--border); padding: 0 16px; display: flex; flex-direction: column; z-index: 100;
}
.brand { display: flex; align-items: center; gap: 12px; height: 76px; padding: 0 8px; border-bottom: 1px solid rgba(140,175,220,.1); }
.brandmark { width: 40px; height: 40px; flex: 0 0 40px; background: linear-gradient(135deg, rgba(59,158,255,.25), rgba(88,224,255,.1)); border: 1px solid rgba(59,158,255,.4); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.brand-info { display: flex; flex-direction: column; min-width: 0; }
.brand-info strong { font-size: 16px; font-weight: 700; color: var(--text-main); letter-spacing: .5px; white-space: nowrap; }
.brand-info span { font-size: 11px; color: var(--text-mute); letter-spacing: .5px; }
.sidenav-inner { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 20px 0 16px; }
.sidenav-label { font-size: 12px; color: var(--text-mute); padding: 0 12px 12px; text-transform: uppercase; letter-spacing: 1px; }
.sidenav-links { display: flex; flex-direction: column; gap: 6px; }
.nav-link { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 8px; color: var(--text-sub); font-size: 15px; transition: var(--trans); border-left: 3px solid transparent; border-radius: 8px; }
.nav-link:hover { background: rgba(255,255,255,.04); color: var(--text-main); }
.nav-link.active { background: rgba(59,158,255,.1); color: var(--primary); border-left-color: var(--primary); font-weight: 500; }
.nav-link i { width: 22px; text-align: center; color: inherit; font-size: 16px; }
.nav-text { display: inline; }
.sidenav-cta { margin-top: auto; padding: 16px 4px 8px; border-top: 1px solid rgba(140,175,220,.1); }
.help-card { padding: 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--border); }
.help-card p { font-size: 12px; line-height: 1.7; color: var(--text-sub); margin-bottom: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; font-weight: 500; line-height: 1.2; transition: var(--trans); font-size: 15px; }
.btn-primary { background: var(--primary); color: #fff; padding: 12px 22px; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(59,158,255,.3); }
.btn-ghost { border: 1px solid rgba(140,175,220,.4); padding: 11px 18px; color: var(--text-main); }
.btn-ghost:hover { border-color: var(--primary); background: rgba(59,158,255,.08); color: var(--primary); }
.btn-cta { background: var(--cta); color: #1a1105; padding: 14px 28px; font-weight: 600; box-shadow: 0 4px 22px rgba(255,194,94,.25); }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,194,94,.35); }
.btn-outline-cta { border: 1px solid rgba(255,194,94,.5); color: var(--cta); padding: 13px 24px; }
.btn-outline-cta:hover { background: rgba(255,194,94,.08); border-color: var(--cta); }

.main { flex: 1; min-width: 0; }
.page-header { background: linear-gradient(to bottom, rgba(7,13,25,.8) 0%, rgba(7,13,25,0) 100%), url('/assets/images/backpic/back-2.png') center/cover no-repeat; border-bottom: 1px solid var(--border); padding: 64px 0 40px; position: relative; }
.page-header .container { position: relative; z-index: 2; }
.page-header h1 { font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 12px; color: var(--text-main); }
.page-header h1 em { color: var(--accent); font-style: normal; }
.page-header p { max-width: 660px; color: var(--text-sub); font-size: 16px; line-height: 1.9; }

/* hero product */
.product-strip { background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; overflow-x: auto; white-space: nowrap; }
.product-strip .container { display: flex; gap: 32px; align-items: center; height: 56px; }
.anchor-link { color: var(--text-sub); font-size: 14px; padding: 4px 0; border-bottom: 2px solid transparent; transition: var(--trans); }
.anchor-link:hover { color: var(--accent); border-bottom-color: rgba(88,224,255,.4); }
.anchor-link.active { color: var(--accent); border-bottom-color: var(--accent); }
.product-strip::-webkit-scrollbar { display: none; }
.product-strip { scrollbar-width: none; }

.section-block { padding: 80px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.section-head .label-line { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.label-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(59,158,255,.12); border: 1px solid rgba(59,158,255,.3); padding: 4px 14px; border-radius: 999px; color: var(--accent); font-size: 12px; font-weight: 500; }
.section-head h2 { font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: .5px; }
.section-head .lead { font-size: 15px; color: var(--text-sub); max-width: 520px; margin-top: 12px; }
.section-foot { margin-top: 36px; }

/* feature product card */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feature-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1px 8fr 4fr 1fr; }
.feature-card { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--trans); padding: 24px; }
.feature-card:hover { transform: translateY(-3px); border-color: rgba(59,158,255,.4); box-shadow: var(--shadow-hover); }
.market-panel { grid-column: span 2; display: grid; grid-template-columns: 1px 850px 1fr; }
.product-layout { display: grid; grid-template-columns: 1px minmax(0, 1fr) 1fr; }
.product-visual { position: relative; border-radius: 12px; overflow: hidden; background: #0b121f; min-height: 260px; width: 54%; }
.product-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; padding: 28px; }
.product-panel .variant { display: grid; grid-template-columns: 1px 7fr 5fr 5fr; }

.pg-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; background: transparent; }
.choose-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 24px; position: relative; overflow: hidden; }
.choose-card .step-number { font-size: 13px; color: var(--accent); font-weight: 600; letter-spacing: 1px; margin-bottom: 14px; }
.choose-card h3 { font-size: 20px; font-weight: 600; margin: 12px 0 10px; }
.choose-card p { color: var(--text-sub); font-size: 14px; }

.scene-block { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--panel); }
.scene-copy { padding: 40px; display: flex; flex-direction: column; align-items: flex-start; }
.scene-copy h3 { font-size: 24px; line-height: 1.4; margin-bottom: 14px; }
.scene-copy p { color: var(--text-sub); font-size: 14px; line-height: 1.8; margin-bottom: 16px; }
.scene-points { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 6px 0 16px; }
.scene-point { display: inline-flex; align-items: center; gap: 7px; color: var(--text-main); font-size: 13px; }
.scene-point i { color: var(--success); }
.scene-img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.scene-visual-placeholder { background: linear-gradient(145deg, rgba(59,158,255,.14), rgba(88,224,255,0.05)); border-radius: 12px; min-height: 300px; padding: 28px; display: flex; align-items: center; justify-content: center; }
.scene-visual img { width: 100%; object-fit: cover; }

.spec-compare { background: var(--panel); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: auto; }
.spec-compare table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 900px; }
.spec-compare th { background: rgba(59,158,255,.08); color: var(--text-main); font-weight: 600; text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.spec-compare td { padding: 13px 16px; border-bottom: 1px solid rgba(140,175,220,.08); color: var(--text-sub); }
.spec-compare tr:last-child td { border-bottom: none; }

.cta-band { background: linear-gradient(to right bottom, rgba(59,158,255,.12), rgba(88,224,255,.04)); }
.cta-block { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(14,22,38,.72); border-radius: var(--radius-lg); padding: 32px; margin: 80px 0 0; }
.cta-block h2 { font-size: 28px; margin-bottom: 8px; }
.cta-block p { color: var(--text-sub); font-size: 14px; margin-bottom: 14px; }
.cta-actions { flex: 0 0 auto; display: flex; gap: 12px; flex-wrap: wrap; }

.news-head:not(:has(two-card)):has(no-card) { background: transparent; }
.two-card { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.two-intro { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; display: flex; align-items: flex-start; gap: 20px; }

.product-filter-tabs { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.filter-tab { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-sub); font-size: 13px; background: rgba(255,255,255,.02); transition: var(--trans); display: inline-flex; align-items: center; gap: 8px; }
.filter-tab:hover { border-color: rgba(59,158,255,.5); color: var(--primary); }
.filter-tab.on { background: rgba(59,158,255,.12); border-color: rgba(59,158,255,.5); color: var(--accent); }
.filter-tab i { font-size: 12px; }

.mega-split { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; align-items: center; background: var(--panel); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; }
.mega-left { display: flex; align-items: center; gap: 26px; padding: 20px 20px 20px 30px; min-width: 0; }

.pre-chip { display: inline-flex; align-items: center; background: rgba(88,224,255,.12); border: 1px solid rgba(88,224,255,.3); color: var(--accent); border-radius: 999px; padding: 5px 14px; font-size: 12px; letter-spacing: .5px; margin-bottom: 14px; }

blockquote.callout { border-left: 4px solid var(--accent); background: rgba(88,224,255,.06); padding: 18px 20px; border-radius: 0 12px 12px 0; color: var(--text-main); font-size: 15px; margin: 24px 0; }

/* footer & shared */
.site-footer { background: #050A12; border-top: 1px solid var(--border); padding-top: 48px; margin-left: 0; }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1.4fr 1.6fr 1.8fr; gap: 40px; padding-bottom: 36px; }
.footer-brand .footer-txt { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand .footer-txt .brandmark { width: 38px; height: 38px; flex: 0 0 38px; font-size: 15px; }
.footer-brand .footer-txt strong { font-size: 17px; color: var(--text-main); }
.fbot-desc { font-size: 14px; color: var(--text-sub); line-height: 1.8; max-width: 340px; }
.footer-col h4 { color: #CBD7E6; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.footer-col a { display: block; color: var(--text-sub); font-size: 13px; padding: 6px 0; transition: var(--trans); line-height: 1.5; }
.footer-col a:hover { color: var(--primary); }
.footer-col p.contact-txt { font-size: 13px; color: var(--text-mute); line-height: 1.8; }
.footer-bottom { border-top: 1px solid rgba(140,175,220,.1); padding: 18px 0; color: var(--text-mute); font-size: 13px; }

/* mobile nav */
.nav-top { display: none; }
.drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(5,8,15,.6); backdrop-filter: blur(2px); z-index: 998; }
.mobile-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; background: var(--panel); z-index: 999; padding: 22px 18px 30px; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; }
.mobile-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(140,175,220,.12); }
.drawer-head .brand { border: none; height: auto; padding: 0; gap: 12px; }
.drawer-head .brand .brandmark { width: 38px; height: 38px; flex: 0 0 38px; font-size: 14px; }
.drawer-head .brand-info strong { font-size: 14px; }
.drawer-close { color: var(--text-sub); font-size: 20px; padding: 6px; cursor: pointer; }
.drawer-links { flex: 1; display: flex; flex-direction: column; gap: 4px; margin: 10px 0 20px; }

.mobile-side-toggle { display: none; }

/* gating */
@keyframes subtle-glow { 0% { box-shadow: 0 0 0 rgba(58,235,255,.3); } 50% { box-shadow: 0 0 18px rgba(58,235,255,.2); } 100% { box-shadow: 0 0 0 rgba(58,235,255,.3); } }
.glow-card { animation: none; }

/* Image / hero placeholder */
.img-wrap-ph { overflow: hidden; border-radius: 12px; background: #0f1926; position: relative; }
.img-wrap-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-panel:hover .img-wrap-ph img { transform: scale(1.04); }

.long-banner { position: relative; overflow: hidden; background: url('/assets/images/backpic/back-1.png') center/cover no-repeat; }
.long-banner .overlay-layer { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7, 13, 25, 1) 20%, rgba(14, 22, 38, .35) 55%, rgba(7, 13, 25, .7)); border-radius: inherit; }
.long-banner .container { position: relative; z-index: 3; }

/* timeline: product-dev */
.vendor-shelf { border-left: 2px solid rgba(59, 158, 255, .25); margin-left: 8px; padding-left: 28px; }
.vendor-item { position: relative; padding: 0 0 34px; }
.vendor-item::before { content: ""; width: 10px; height: 10px; background: var(--primary); border-radius: 50%; position: absolute; left: -34px; border: 2px solid var(--bg); }
.vendor-item .vendor-date { color: var(--accent); font-size: 13px; font-weight: 600; }
.vendor-item .vendor-title { font-size: 17px; margin: 4px 0 6px; font-weight: 600; }
.vendor-item .vendor-desc { color: var(--text-sub); font-size: 14px; max-width: 600px; }

/* radius on gallery */
.mini-promo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.promo-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; transition: var(--trans); }
.promo-card:hover { border-color: rgba(59,158,255,.3); box-shadow: var(--shadow-hover); }
.promo-media { overflow: hidden; height: 180px; }
.promo-media img { width: 100%; height: 100%; object-fit: cover; }
.promo-info { padding: 24px; }
.promo-tag { color: var(--accent); font-size: 12px; letter-spacing: .4px; }
.promo-info h3 { margin: 8px 0 8px; font-size: 18px; line-height: 1.4; }
.promo-info p { color: var(--text-sub); font-size: 14px; margin-bottom: 10px; }
.promo-more { color: var(--primary); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* buttons on product cards */
.btn-ghost-sm { border: 1px solid var(--border); color: var(--primary); padding: 8px 16px; border-radius: 8px; font-size: 13px; }
.btn-ghost-sm:hover { background: rgba(59,158,255,.08); border-color: var(--primary); }
.btn-primary-sm { background: var(--primary); padding: 8px 20px; border-radius: 8px; color: #fff; font-size: 13px; }
.btn-primary-sm:hover { box-shadow: 0 4px 16px rgba(59,158,255,.4); filter: brightness(1.1); }
.btn-cta-sm { background: var(--cta); color: #171009; padding: 8px 18px; border-radius: 8px; font-weight: 600; font-size: 13px; transition: var(--trans); }
.btn-cta-sm:hover { box-shadow: 0 4px 14px rgba(255,194,94,.3); }

.divider-glow { height: 1px; background: linear-gradient(to right, transparent, rgba(59, 158, 255, .3), transparent); margin: 0; border: 0; }

/* responsive start */
@media (max-width: 1180px) {
  :root { --content-pad: 28px; }
  .sidenav { width: 230px; flex-basis: 230px; }
  .mega-split { grid-template-columns: 2fr 2fr; }
}
@media (max-width: 1023px) {
  .sidenav { width: var(--sidebar-w-icon); flex-basis: var(--sidebar-w-icon); }
  .nav-text, .brand-info, .sidenav-label { display: none; }
  .brand { justify-content: center; }
  .nav-link { justify-content: center; }
  .nav-link.active { border-left: 3px solid var(--primary); }
  .help-card { display: none; }
  .container { padding-left: 24px; padding-right: 24px; }
  .page-header h1 { font-size: 32px; }
  .pg-cat-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .scene-block { grid-template-columns: 1fr; }
  .mega-split { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .app-shell { flex-direction: column; }
  .sidenav { display: none; }
  .nav-top { display: flex; position: sticky; top: 0; z-index: 200; background: var(--panel); border-bottom: 1px solid var(--border); padding: 0 16px; align-items: center; justify-content: space-between; height: 60px; }
  .nav-top .mobileLogo { display: flex; align-items: center; gap: 10px; }
  .nav-top .mobileLogo .brandmark { width: 38px; height: 38px; font-size: 16px; flex-basis: 38px; }
  .nav-top .mobileLogo .brand-info strong { display: block; font-size: 15px; }
  .nav-top .mobileLogo .brand-info span { display: block; font-size: 10px; }
  .nav-toggle { background: transparent; border: none; font-size: 22px; color: var(--text-main); width: 40px; height: 40px; }
  .main { width: 100%; flex: 1; }
  .container { padding-left: 18px; padding-right: 18px; }
  .page-header { padding: 44px 0 28px; }
  .page-header h1 { font-size: 28px; }
  .page-header p { font-size: 14px; }
  .section-block { padding: 54px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .pg-cat-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .mini-promo { grid-template-columns: 1fr; }
  .cta-block { flex-direction: column; align-items: flex-start; }
  .product-strip .container { gap: 20px; }
  .mega-left { flex-direction: column; text-align: left; }
  .mega-left .product-panel .btn, .product-actions .btn { flex: 1; }
}
@media (max-width: 480px) {
  .page-header h1 { font-size: 24px; }
  .section-head h2 { font-size: 24px; }
}

/* roulang page: category3 */
/* ===== CSS Variables ===== */
:root{
  --primary:#3B9EFF;
  --accent:#58E0FF;
  --price:#FFC25E;
  --bg:#070D19;
  --panel:#0E1626;
  --panel2:#111D33;
  --glass:rgba(255,255,255,0.05);
  --glass-border:rgba(255,255,255,0.08);
  --text:#E6EDF7;
  --text-sub:#9CABBE;
  --text-mute:#5A6A80;
  --line:rgba(140,175,220,0.16);
  --success:#34D399;
  --warning:#FBBF24;
  --danger:#F87171;
  --radius-card:12px;
  --radius-panel:18px;
  --radius-btn:8px;
  --shadow:0 8px 24px rgba(0,0,0,0.22);
  --shadow-hover:0 16px 36px rgba(0,0,0,0.32);
  --font:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei UI","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  --sidebar-w:260px;
}

/* ===== Reset/Base ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.8;
  min-height:100vh;
}
img{display:block;max-width:100%;border:0}
a{color:var(--text);text-decoration:none;transition:color .25s ease,border-color .25s ease,background .25s ease}
button{font-family:inherit;cursor:pointer;border:none;outline:none}
input,textarea{font-family:inherit;outline:none}
ul,ol{list-style:none}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
::selection{background:rgba(59,158,255,.32);color:#fff}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#253247;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#31415b}

/* ===== Accessibility ===== */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== Layout Shell ===== */
.shell{display:flex;min-height:100vh}

/* ===== Sidebar / Desktop Fixed Nav ===== */
.sidenav{
  position:fixed;inset:0 auto 0 0;
  width:var(--sidebar-w);
  background:linear-gradient(160deg,#0C1322 0%,#0A111F 60%,#080E19 100%);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:0 18px 20px;
  z-index:200;
}
.brandline{
  height:76px;
  display:flex;align-items:center;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.brandmark{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 42px;
  background:linear-gradient(135deg,#1D4E89,#0E2A4d);
  border-radius:14px;
  font-size:16px;font-weight:600;color:#EAF3FF;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.brand-txt{display:flex;flex-direction:column;gap:2px;margin-left:12px;line-height:1.35}
.brand-name{font-size:17px;font-weight:600;letter-spacing:.2px}
.brand-sub{font-size:11px;color:var(--text-mute);letter-spacing:.6px}
.nav-link{
  display:flex;align-items:center;gap:14px;
  height:46px;padding:0 14px;
  margin:2px 0;
  border-left:3px solid transparent;
  border-radius:0 8px 8px 0;
  font-size:15px;color:var(--text-sub);
  transition:all .25s ease;
}
.nav-link i{width:20px;text-align:center;font-size:17px;color:var(--text-mute);transition:all .2s ease}
.nav-link:hover{background:rgba(255,255,255,.05);color:var(--text)}
.nav-link:hover i{color:var(--primary)}
.nav-link.active{
  border-left-color:var(--primary);
  background:rgba(59,158,255,.10);
  color:var(--text);
  font-weight:500;
}
.nav-link.active i{color:var(--primary)}
.side-aux{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--text-mute)}
.side-hotline{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}
.side-hotline span{color:var(--text-sub)}
.side-city{color:var(--text-mute);letter-spacing:.4px;line-height:1.6}

/* ===== Main Content ===== */
.main{
  flex:1;
  margin-left:var(--sidebar-w);
  min-width:0;
  display:flex;flex-direction:column;
}

/* ===== Mobile Header ===== */
.mobile-topbar{
  display:none;
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:62px;
  align-items:center;
  justify-content:space-between;
  background:rgba(7,13,25,.88);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:0 18px;
  transition:transform .3s ease;
}
.mobile-topbar .mobile-start{display:flex;align-items:center;gap:12px}
.mbt-burger{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:18px;color:var(--text);
}
.mbt-burger i{
  color:var(--text);
  transition:all .2s ease;
}
.mobile-brand{
  display:flex;align-items:center;gap:8px;
  font-size:17px;font-weight:600;
}
.mobile-brand .brandmark{width:32px;height:32px;flex:0 0 32px;font-size:12px;border-radius:10px}
.mobile-topbar .btn-mobile{font-size:13px}

.drawer-overlay{
  display:none;
  position:fixed;inset:0;background:rgba(3,6,12,.62);
  z-index:350;
  opacity:0;
  transition:opacity .3s ease;
}
.drawer-overlay.show{display:block;opacity:1}
.drawer-panel{
  position:fixed;top:0;left:0;bottom:0;width:280px;
  background:#0B1220;
  z-index:400;
  transform:translateX(-105%);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column;
  padding:22px 20px;
  overflow-y:auto;
}
.drawer-panel.open{transform:translateX(0)}
.drawer-panel .drawer-close{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass);
  border-radius:10px;
  color:var(--text);
  font-size:18px;
  align-self:flex-end;
  margin-bottom:12px;
}
.drawer-panel .drawer-brand{
  display:flex;align-items:center;gap:12px;padding:10px 4px 18px;
  border-bottom:1px solid var(--line);
  font-size:18px;font-weight:600;
}
.drawer-panel .drawer-brand .brandmark{
  width:36px;height:36px;flex:0 0 36px;font-size:13px;
  border-radius:10px;
}
.drawer-panel .nav-list-drawer{flex:1;display:flex;flex-direction:column;gap:4px;margin-top:18px}
.drawer-panel .nav-link{
  height:48px;
  border-left:none;
  border-radius:10px;
  background:transparent;
}
.drawer-panel .nav-link.active{
  background:rgba(59,158,255,.15);
  border-left:3px solid var(--primary);
  border-radius:0 10px 10px 0;
}
.drawer-info{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:13px;color:var(--text-mute);line-height:1.8
}

/* ===== Hero Banners (通用内页头部) ===== */
.page-hero{
  position:relative;
  padding:92px 0 72px;
  background:linear-gradient(120deg, rgba(3,8,18,.72) 30%, rgba(12,30,60,.55) 100%), url('/assets/images/backpic/back-2.png') no-repeat center/cover;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(7,13,25,.36);
  z-index:1;
}
.page-hero .container{position:relative;z-index:2}
.crumb{
  font-size:13px;color:var(--text-mute);
  margin-bottom:15px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.crumb a{color:var(--text-sub)}
.crumb a:hover{color:var(--primary)}
.crumb i{font-size:10px;color:var(--text-mute)}
.page-hero h1{
  font-size:44px;line-height:1.22;
  font-weight:700;
  max-width:800px;
  letter-spacing:.5px;
}
.page-hero h1 .grad{
  background:linear-gradient(90deg,var(--primary),var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.page-hero .lead{
  font-size:17px;
  color:var(--text-sub);
  max-width:680px;
  margin-top:16px;
  line-height:1.9;
}
.hero-badge{
  display:flex;align-items:center;gap:8px;
  margin-bottom:23px;
  font-size:13px;color:var(--widget,#6EA8FF);
  background:rgba(59,158,255,.12);
  border:1px solid rgba(59,158,255,.2);
  padding:6px 14px;
  border-radius:999px;
  width:max-content;
}

/* ===== General Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  height:48px;
  padding:0 28px;
  border-radius:var(--radius-btn);
  font-size:15px;font-weight:500;
  transition:all .25s ease;
  white-space:nowrap;
  justify-content:center;
  font-family:inherit;
}
.btn-primary{
  background:var(--primary);
  color:#062033;
}
.btn-primary:hover{
  background:#55A7FF;
  transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(59,158,255,.45);
}
.btn-outline{
  background:transparent;
  border:1px solid rgba(140,175,220,.4);
  color:var(--text);
}
.btn-outline:hover{
  border-color:var(--primary);
  background:rgba(59,158,255,.08);
  transform:translateY(-2px);
}
.btn-price{
  background:var(--price);
  color:#312413;
}
.btn-price:hover{
  background:#FFD084;
  box-shadow:0 10px 30px rgba(255,194,94,.35);
  transform:translateY(-2px);
}
.btn-block{width:100%}

/* ===== Common section style ===== */
.section{
  padding:82px 0;
}
.section-head{
  margin-bottom:46px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--primary);
  background:rgba(59,158,255,.08);
  border:1px solid rgba(59,158,255,.18);
  padding:5px 14px;
  border-radius:999px;
  width:max-content;
}
.section-head h2{
  font-size:34px;
  line-height:1.35;
  font-weight:650;
}
.section-head h2 em{font-style:normal;color:var(--accent)}
.section-head p{
  font-size:16px;color:var(--text-sub);
  max-width:620px;
  line-height:1.9;
}

/* ===== Card / Panel ===== */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{
  border-color:rgba(59,158,255,.36);
  box-shadow:var(--shadow-hover);
  transform:translateY(-4px);
}

/* ===== Solution Pain / Value split ===== */
.scene-block{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
  margin-bottom:28px;
}
.scene-main{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  overflow:hidden;
  min-height:260px;
  display:flex;
  flex-direction:column;
}
.scene-main .scene-bg{
  position:relative;
  height:240px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.scene-main .scene-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(7,13,25,.18) 0%, rgba(7,13,25,.92) 100%);
}
.scene-main .scene-bg img{
  width:100%;height:100%;object-fit:cover;
}
.scene-content{padding:28px 30px;position:relative;flex:1;display:flex;flex-direction:column;gap:14px;justify-content:center}
.scene-content h3{font-size:23px;font-weight:600}
.scene-content p{color:var(--text-sub);line-height:1.9;font-size:15px}
.scene-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.tag-pill{
  display:inline-flex;
  font-size:13px;
  padding:3px 14px;
  border-radius:999px;
  background:rgba(59,158,255,.1);
  border:1px solid rgba(59,158,255,.16);
  color:#9CC9FF;
}
.pain-aside{
  background:linear-gradient(165deg,#0F1E38 0%,#0B1727 100%);
  border:1px solid rgba(59,158,255,.25);
  border-radius:var(--radius-panel);
  padding:28px;
  display:flex;
  flex-direction:column;
}
.pain-aside h4{
  font-size:17px;
  font-weight:600;
  margin-bottom:20px;
  display:flex;align-items:center;gap:10px;
}
.pain-aside h4 i{color:var(--price);opacity:.85}
.pain-list{display:flex;flex-direction:column;gap:14px}
.pain-list li{
  display:flex;gap:10px;
  font-size:15px;color:var(--text-sub);
  line-height:1.6;
  padding:9px 12px;
  background:rgba(255,255,255,.03);
  border-radius:10px;
}
.pain-list li i{
  color:var(--price);
  font-size:14px;
  margin-top:4px;
  opacity:.85;
}
.pain-aside .pain-cta{
	margin-top:22px;
	color:var(--text-sub);
	font-size:14.5px;
	line-height:1.7;
	background:rgba(255,255,255,.035);
	border-left:2px solid var(--primary);
	padding:12px 16px;
	border-radius:0 8px 8px 0;
}

/* ===== Scene/应用 Grid ===== */
.scene-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:20px;
  margin-top:36px;
}
.scene-item{
  grid-column:span 2;
  display:flex;
  border-radius:var(--radius-panel);
  background:var(--panel);
  border:1px solid var(--line);
  padding:24px;
  gap:18px;
  align-items:flex-start;
  transition:all .25s ease;
}
.scene-item:first-child,
.scene-item:nth-child(5){
  grid-column:span 3;
}
.scene-item:nth-child(2),
.scene-item:nth-child(3){
  grid-column:span 3;
}
.scene-item:hover{
  border-color:var(--primary);
  background:var(--panel2);
  transform:translateY(-3px);
}
.scene-icon{
  width:48px;height:48px;flex:0 0 48px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  color:var(--primary);
  background:rgba(59,158,255,.12);
  border:1px solid rgba(59,158,255,.22);
}
.scene-item .si-content h4{font-size:17px;font-weight:600;margin-bottom:7px}
.scene-item .si-content p{font-size:14px;color:var(--text-sub);line-height:1.75}
.scene-item .img-card{
  width:110px;height:110px;flex:0 0 110px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  margin-top:-36px;
}
.scene-item .img-card img{
  width:100%;height:100%;object-fit:cover;
}

/* ===== Flow / Process Steps ===== */
.flow-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  position:relative;
  max-width:900px;
}
.flow-wrap::before{
  content:"";
  position:absolute;
  left:24px;top:24px;bottom:24px;
  width:1px;
  background:linear-gradient(180deg, rgba(59,158,255,.7), rgba(59,158,255,.15));
}
.flow-step{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding-left:0;
}
.flow-step .step-num{
  position:relative;
  z-index:1;
  width:48px;height:48px;flex:0 0 48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary),#0F5CAA);
  color:#fff;font-weight:600;font-size:17px;
  box-shadow:0 4px 14px rgba(59,158,255,.3);
}
.flow-step .step-body{
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 24px;
  margin-bottom:8px;
  flex:1;
  transition:all .25s linear;
}
.flow-step .step-body:hover{
  background:rgba(59,158,255,.06);
  border-color:rgba(59,158,255,.2);
}
.flow-step .step-body h4{font-size:18px;font-weight:600;margin-bottom:8px}
.flow-step .step-body p{font-size:15px;color:var(--text-sub);line-height:1.8}
.flow-note{
  margin-top:45px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(140,175,220,.2);
  border-radius:var(--radius-panel);
  padding:22px 30px;
  display:flex;
  align-items:flex-start;
  gap:18px;
  max-width:900px;
}
.flow-note i{font-size:24px;color:var(--price);margin-top:3px}
.flow-note p{color:var(--text-sub);font-size:15px;line-height:1.8}
.flow-note a{color:var(--primary);font-weight:500}
.flow-note a:hover{border-bottom:1px solid var(--primary)}

/* ===== FAQ ===== */
.faq-wrap{
  max-width:920px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
details.faq-item{
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(14,22,38,.72);
  overflow:hidden;
  transition:border-color .25s ease,background .25s ease;
}
details.faq-item[open]{
  border-color:rgba(59,158,255,.45);
  background:rgba(16,29,54,.9);
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:17px;
  padding:22px 26px;
  font-weight:500;
  transition:color .2s ease;
  user-select:none;
  position:relative;
}
.faq-item summary:hover{color:#BFD9FB}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .fi-icon{
  color:var(--primary);
  font-size:20px;
  flex:0 0 20px;
  transition:transform .3s ease;
}
details[open] .faq-item summary .fi-icon{
  transform:rotate(45deg);
}
.faq-item .faq-body{
  padding:0 26px 24px;
  color:var(--text-sub);
  line-height:1.85;
  font-size:15.5px;
}

/* ===== Lead / CTA block ===== */
.cta-section{
  background:
    linear-gradient(115deg, rgba(3,10,20,.94) 0%, rgba(15,36,70,.78) 100%),
    url('/assets/images/backpic/back-1.png') center/cover;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cta-inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:32px;
  align-items:center;
}
.cta-inner h3{font-size:30px;font-weight:600;line-height:1.3}
.cta-inner .cta-desc{margin-top:14px;color:var(--text-sub);font-size:16px;line-height:1.8}
.cta-btns{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}
.cta-contact{
  padding:26px;
  border-radius:var(--radius-panel);
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.cta-contact p{color:var(--text-sub);line-height:1.75;font-size:15px}
.cta-contact .contact-line{
  display:flex;
  gap:12px;
  margin-top:18px;
  align-items:center;
}
.contact-line i{
  color:var(--primary);
  font-size:17px;
}

/* ===== Footer ===== */
.site-footer{
  background:#050A12;
  border-top:1px solid var(--line);
  padding-top:52px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.3fr;
  gap:48px 36px;
  padding-bottom:42px;
}
.footer-brand .footer-txt{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  font-weight:600;
  color:#E2ECFA;
  letter-spacing:.2px;
}
.footer-brand .fbot-desc{
  font-size:14px;
  color:var(--text-mute);
  line-height:1.75;
  margin-top:16px;
}
.footer-col h4{
  font-size:15px;
  font-weight:600;
  color:#D3DFEF;
  margin-bottom:16px;
}
.footer-col{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.footer-col a{
  color:var(--text-mute);
  font-size:14px;
  transition:color .2s ease,padding-left .2s ease;
  width:max-content;
}
.footer-col a:hover{
  color:#DCEBFF;
  padding-left:2px;
}
.footer-col .contact-txt{
  font-size:13.5px;
  color:var(--text-mute);
  line-height:1.8;
  margin-top:2px;
}
.footer-bottom{
  border-top:1px solid var(--line);
  padding:20px 0;
  color:#3C4C5E;
  font-size:14px;
}
.footer-bottom .container{
  display:flex;
  justify-content:space-between;
}
.footer-bottom a{color:#4B5C72}
.footer-bottom a:hover{color:var(--primary)}

/* ===== Scroll Top ===== */
.scrolltop{
  position:fixed;
  right:24px;
  bottom:30px;
  width:46px;height:46px;
  border-radius:50%;
  background:var(--panel2);
  border:1px solid var(--line);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
  z-index:150;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:all .35s ease;
}
.scrolltop.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.scrolltop:hover{
  background:var(--primary);
  color:#041a2b;
  border-color:var(--primary);
}

/* ===== Static/优势 stats 简版 ===== */
.stat-band{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	border:1px solid var(--line);
	border-radius:var(--radius-panel);
	overflow:hidden;
	background:rgba(14,22,38,.42);
	margin-bottom:32px;
}
.stat-cell{
	padding:28px 18px;
	text-align:center;
	position:relative;
}
.stat-cell + .stat-cell{border-left:1px solid var(--line)}
.stat-cell .num{
	font-size:32px;
	font-weight:700;
	line-height:1.25;
	color:#D6E4FF;
}
.stat-cell .num sup{
	font-size:18px;
	color:var(--accent);
	margin-left:2px;
}
.stat-cell .txt{
	font-size:13px;
	color:var(--text-sub);
	margin-top:7px;
}

/* ===== /responsive: i-pad & mobile ===== */
@media (max-width:1180px){
  :root{--sidebar-w:230px}
  .container{padding:0 28px}
  .scene-item{grid-column:span 3 !important}
  .scene-item:nth-child(n){grid-column:span 3}
  .scene-grid{grid-template-columns:repeat(6,1fr)}

}
@media (max-width:1023px){
  .section{padding:68px 0}
}
@media (max-width:920px){
  .stat-cell .num{font-size:26px}

}
@media (max-width:767px){
  :root{--sidebar-w:0px}
  .sidenav{display:none}
  .main{margin-left:0}
  .mobile-topbar{display:flex}
  .page-hero{margin-top:62px;padding:55px 0 50px}
  .mobile-topbar.hidden{transform:translateY(-110%)}
  .container,.footer-bottom .container{max-width:100%;padding:0 22px}
  .page-hero h1{font-size:30px}
  .page-hero .lead{font-size:15.5px}
  .hero-badge{font-size:12px}
  .section-head h2{font-size:26px}
  .section-head p{font-size:15px}
  .section{padding:56px 0}
  .footer-grid{grid-template-columns:1fr;gap:26px;padding-bottom:28px}
  .footer-bottom .container{flex-wrap:wrap;gap:8px;font-size:12px}
  .cta-inner{grid-template-columns:1fr;gap:22px}
  .cta-btns .btn{flex:1}
  .btn{white-space:normal;text-align:center}
  .stat-cell .num{font-size:24px}
  .scene-item .img-card{display:block;margin-top:10px;width:100%;flex:auto}
  .faq-item summary,
  .flow-step .step-body{padding:18px}
  .footer-grid{row-gap:30px}
  .footer-brand,.footer-col{padding:0 4px}
  .pain-list li{font-size:14px}
  .page-hero .lead{margin-top:14px}
}

/* ipad icon sidebar */
@media (min-width:768px) and (max-width:1179px){
  .sidenav{width:82px;padding:0 12px}
  .sidenav .brandline{justify-content:center;padding-bottom:8px;margin-bottom:16px}
  .sidenav .nav-text{display:none}
  .sidenav .nav-link{justify-content:center;padding:0;margin:2px 0;border-left:none;border-radius:12px}
  .sidenav .nav-link i{font-size:20px}
  .sidenav .brand-txt{display:none}
  .sidenav .side-aux{display:none}
  .main{margin-left:82px}
}
.content-scene-strip{
	display:flex;
	flex-direction:column;
	gap:14px;
	margin-top:22px;
}
.img-strip-row {
	display:flex;
	gap:18px;
	align-items:flex-end;
	justify-content:space-between;
	flex-wrap:wrap;
}
.img-strip-row .x-more{
	color:var(--text-sub);
	font-size:14px;
}

/* roulang page: category4 */
:root {
  --primary: #3B9EFF;
  --glow-cyan: #58E0FF;
  --amber: #FFC25E;
  --bg-deep: #070D19;
  --bg-panel: #0E1626;
  --bg-deeper: #050A12;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.08);
  --text-main: #E6EDF7;
  --text-sub: #9CABBE;
  --text-dim: #5A6A80;
  --divider: rgba(140, 175, 220, 0.16);
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --radius-btn: 8px;
  --radius-input: 10px;
  --radius-card: 12px;
  --radius-panel: 18px;
  --radius-tag: 999px;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.32);
  --glow-btn: 0 0 22px rgba(59, 158, 255, 0.42);
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  background: var(--bg-deep);
  color: var(--text-main);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  display: flex;
  min-height: 100vh;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
input, textarea, select {
  font-family: inherit;
}
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
/* ======= SIDENAV DESKTOP ======= */
.sidenav {
  position: fixed;
  left: 0;
  top: 0;
  width: 260px;
  height: 100vh;
  background: var(--bg-panel);
  border-right: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  padding: 0 14px;
}
.sidenav .logo-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 10px 18px;
  border-bottom: 1px solid var(--divider);
  min-height: 72px;
}
.brandmark {
  background: linear-gradient(135deg, var(--primary), var(--glow-cyan));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
}
.logo-word .logo-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.2px;
  color: #fff;
}
.logo-word .logo-sub {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.8px;
  margin-top: 2px;
}
.sidenav nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 16px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--radius-btn);
  color: var(--text-sub);
  font-size: 15px;
  transition: all 0.2s ease;
  position: relative;
}
.nav-link i {
  width: 16px;
  text-align: center;
  font-size: 15px;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
}
.nav-link.active {
  background: rgba(59, 158, 255, 0.1);
  color: var(--primary);
  font-weight: 600;
}
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}
.sidenav .nav-side-bottom {
  border-top: 1px solid var(--divider);
  padding: 18px 12px 20px;
}
.side-tel {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-sub);
  font-size: 13px;
  margin-bottom: 10px;
}
.side-ver {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.5px;
}
/* ======= MAIN LAYOUT ======= */
.main-wrap {
  margin-left: 260px;
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* ======= HERO AREA ======= */
.svc-hero {
  position: relative;
  padding: 60px 32px 50px;
  overflow: hidden;
  background: linear-gradient(180deg, #0A1222 0%, #070D19 100%);
}
.svc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/backpic/back-3.png') center / cover no-repeat;
  opacity: 0.14;
}
.svc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 74% 30%, rgba(59, 158, 255, 0.12), transparent 58%);
}
.svc-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.svc-hero-left {
  flex: 1 1 420px;
}
.svc-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(59, 158, 255, 0.12);
  border: 1px solid rgba(59, 158, 255, 0.2);
  color: var(--glow-cyan);
  border-radius: var(--radius-tag);
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 22px;
}
.svc-hero h1 {
  font-size: 44px;
  line-height: 1.25;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.svc-hero h1 span {
  color: var(--glow-cyan);
  border-bottom: 2px solid rgba(88, 224, 255, 0.4);
  padding-bottom: 4px;
}
.svc-hero p.sub {
  color: var(--text-sub);
  max-width: 580px;
  font-size: 16px;
  margin-bottom: 28px;
}
.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 28px;
  font-size: 15px;
  border-radius: var(--radius-btn);
  font-weight: 500;
  transition: all 0.22s ease;
  outline: none;
}
.btn:focus-visible {
  outline: 2px solid var(--glow-cyan);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--glow-btn);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(59, 158, 255, 0.6);
}
.btn-outline {
  border: 1px solid rgba(88, 224, 255, 0.45);
  color: var(--glow-cyan);
  background: rgba(88, 224, 255, 0.06);
}
.btn-outline:hover {
  background: rgba(88, 224, 255, 0.1);
  border-color: var(--glow-cyan);
}
.svc-hero-right {
  flex: 0 1 360px;
  display: flex;
  justify-content: center;
}
.hero-support-card {
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-panel);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.fs-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59,158,255,.2), rgba(88,224,255,.08));
  border: 1px solid rgba(88, 224, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--glow-cyan);
  margin-bottom: 18px;
}
.hero-support-card h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
}
.hero-support-card p {
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 16px;
}
.support-tel {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.8px;
  margin-top: 6px;
  display: block;
}
/* ======= GENERAL SECTION ======= */
.section {
  padding: 72px 32px;
}
.section-alt {
  background: var(--bg-deeper);
}
.section-label {
  display: inline-block;
  font-size: 13px;
  color: var(--primary);
  letter-spacing: 1.2px;
  font-weight: 500;
  margin-bottom: 8px;
}
.section h2 {
  font-size: 30px;
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}
.section-desc {
  color: var(--text-sub);
  font-size: 15px;
  max-width: 680px;
  margin-bottom: 44px;
  line-height: 1.8;
}
/* ======= SERVICE APPROACH / LEFT RIGHT ======= */
.svc-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 44px;
  align-items: start;
}
.svc-left-col {
  position: sticky;
  top: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.svc-info-card {
  background: var(--bg-panel);
  border: 1px solid var(--divider);
  border-radius: var(--radius-panel);
  padding: 26px;
  transition: box-shadow 0.25s ease;
}
.svc-info-card:hover {
  box-shadow: var(--shadow-card);
}
.svc-info-card h4 {
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.svc-info-card h4 i {
  color: var(--primary);
}
.svc-card-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.svc-card-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.svc-item-ic {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: rgba(59, 158, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--primary);
}
.svc-item-txt .t1 {
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.svc-item-txt .t2 {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
}
.svc-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--divider);
  padding-top: 16px;
  margin-top: 6px;
}
.svc-time-row span:first-child {
  color: var(--text-dim);
  font-size: 13px;
}
.svc-time-row span:last-child {
  color: var(--success);
  font-size: 14px;
  font-weight: 500;
}
/* ======= PROCESS ======= */
.process-section {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-panel) 100%);
  position: relative;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  position: relative;
}
.process-grid::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88,224,255,.5), transparent);
  z-index: 0;
}
.process-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-card);
  padding: 28px 20px 22px;
  position: relative;
  z-index: 1;
  transition: all 0.25s ease;
}
.process-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.proc-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 18px;
  box-shadow: 0 0 0 4px rgba(59, 158, 255, 0.15);
}
.process-card h4 {
  font-size: 16px;
  color: #fff;
  margin-bottom: 8px;
}
.process-card p {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.65;
}
/* ======= FAQ ======= */
.faq-section {
  background: var(--bg-deep);
}
.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 48px;
  align-items: start;
}
.faq-left-side {
  position: sticky;
  top: 28px;
}
.faq-guide-card {
  background: var(--bg-panel);
  border: 1px solid var(--divider);
  border-radius: var(--radius-panel);
  padding: 30px;
  margin-top: 28px;
}
.faq-guide-card h4 {
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.faq-guide-card p {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.8;
  margin-bottom: 18px;
}
.tag-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-chip {
  display: inline-block;
  background: rgba(59,158,255,0.1);
  border: 1px solid rgba(59,158,255,.2);
  color: var(--glow-cyan);
  padding: 4px 12px;
  border-radius: var(--radius-tag);
  font-size: 12px;
  transition: all .2s;
}
.tag-chip:hover {
  background: rgba(59,158,255,0.2);
}
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: var(--bg-panel);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.2s ease;
}
.faq-item.active {
  border-color: rgba(88, 224, 255, 0.3);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}
.faq-opener {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 20px 22px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-main);
  background: transparent;
  gap: 16px;
}
.faq-opener:hover {
  color: var(--glow-cyan);
}
.faq-opener .faq-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-sub);
  transition: all 0.3s ease;
}
.faq-item.active .faq-icon {
  background: var(--primary);
  color: #fff;
  transform: rotate(180deg);
  border-color: var(--primary);
}
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-inner {
  padding: 0 22px 22px;
}
.faq-inner p {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.85;
}
.faq-inner p + p {
  margin-top: 10px;
}
/* ======= CTA FORM ======= */
.cta-form-section {
  position: relative;
  background: var(--bg-panel);
  overflow: hidden;
}
.cta-form-section::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(59,158,255,0.14), transparent 70%);
  pointer-events: none;
}
.cta-wrap {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.cta-wrap h2 {
  font-size: 32px;
  color: #fff;
  margin-bottom: 14px;
}
.cta-wrap > p {
  color: var(--text-sub);
  margin-bottom: 40px;
  font-size: 15px;
}
.svc-form-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-panel);
  padding: 34px;
  text-align: left;
  box-shadow: var(--shadow-card);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.fgroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fgroup label {
  font-size: 13px;
  color: var(--text-main);
  font-weight: 500;
}
.fgroup input, .fgroup select, .fgroup textarea {
  background: rgba(7, 13, 25, 0.6);
  border: 1px solid rgba(140, 175, 220, 0.2);
  border-radius: var(--radius-input);
  height: 44px;
  padding: 0 14px;
  color: var(--text-main);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fgroup textarea {
  height: 110px;
  padding: 12px 14px;
  resize: vertical;
}
.fgroup input:focus, .fgroup select:focus, .fgroup textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.15);
}
.fgroup input::placeholder, .fgroup textarea::placeholder {
  color: var(--text-dim);
}
.form-full {
  grid-column: 1 / -1;
}
.form-submit-row {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
/* ======= FOOTER ======= */
.site-footer {
  background: var(--bg-deeper);
  border-top: 1px solid var(--divider);
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 1fr 1.2fr;
  gap: 42px;
  padding: 60px 0 46px;
}
.footer-brand .footer-txt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.footer-brand .footer-txt strong {
  font-size: 18px;
  color: #fff;
}
.footer-brand .footer-txt .brandmark {
  border-radius: 10px;
  font-size: 16px;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fbot-desc {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.8;
  max-width: 340px;
}
.footer-col h4 {
  font-size: 15px;
  color: var(--text-main);
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-col a {
  display: block;
  color: var(--text-sub);
  font-size: 14px;
  padding: 5px 0;
  transition: color 0.2s, padding-left 0.2s;
  position: relative;
  padding-left: 0;
}
.footer-col a:hover {
  color: var(--primary);
  padding-left: 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-col a[data-slug]:hover::before {
  content: '';
  position: absolute;
  left: 0;
}
.footer-col .contact-txt {
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1.7;
}
.footer-bottom {
  border-top: 1px solid var(--divider);
  padding: 20px 32px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  background: #04080F;
}
/* ======= RESPONSIVE ======= */
@media (max-width: 1180px) {
  .sidenav {
    width: 230px;
  }
  .main-wrap {
    margin-left: 230px;
  }
  .process-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .process-grid::before {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}
@media (max-width: 1023px) {
  .sidenav {
    width: 80px;
    padding: 0 10px;
  }
  .sidenav .logo-block {
    padding: 20px 0 18px;
    justify-content: center;
  }
  .logo-word {
    display: none;
  }
  .nav-link {
    justify-content: center;
    padding: 0;
    gap: 0;
  }
  .nav-link.active::before {
    left: -10px;
  }
  .nav-text {
    display: none;
  }
  .sidenav .nav-side-bottom {
    padding: 16px 6px;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .side-tel {
    display: none;
  }
  .side-ver {
    font-size: 10px;
    text-align: center;
    line-height: 1.5;
  }
  .main-wrap {
    margin-left: 80px;
  }
  .section {
    padding: 60px 24px;
  }
  .svc-hero {
    padding: 44px 24px;
  }
  .svc-layout {
    grid-template-columns: 1fr;
  }
  .svc-left-col {
    position: static;
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .faq-left-side {
    position: static;
  }
}
@media (max-width: 767px) {
  body {
    display: block;
  }
  .sidenav {
    display: none;
  }
  .main-wrap {
    margin-left: 0;
  }
  .svc-hero {
    padding: 50px 16px 40px;
    border-radius: 0;
  }
  .svc-hero h1 {
    font-size: 30px;
  }
  .svc-hero-inner {
    gap: 30px;
  }
  .svc-hero-right {
    flex: 1 1 100%;
  }
  .section {
    padding: 48px 16px;
  }
  .section h2 {
    font-size: 24px;
  }
  .process-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .process-card {
    padding: 20px;
  }
  .cta-wrap h2 {
    font-size: 24px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-full {
    grid-column: 1;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 16px 30px;
  }
  .footer-bottom {
    padding: 16px;
  }
  .hero-btns .btn {
    width: 100%;
  }
  .svc-form-card {
    padding: 22px 18px;
  }
  .brandmark {
    font-size: 13px;
    width: 28px;
    height: 28px;
  }
}

/* Mobile Floating Navigation */
.mnav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgba(7, 13, 25, 0.96);
  border-bottom: 1px solid var(--divider);
  z-index: 1500;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mnav .m-menu-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  font-size: 18px;
  background: transparent;
  border: 1px solid var(--divider);
}
.mnav .m-logo {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.mnav .m-res {
  height: 34px;
  font-size: 13px;
  padding: 0 14px;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.mask-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  z-index: 1600;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.mask-overlay.show {
  opacity: 1;
  visibility: visible;
}
.mob-drawer {
  position: fixed;
  top: 0;
  left: -300px;
  width: 280px;
  height: 100dvh;
  background: var(--bg-panel);
  z-index: 1700;
  transition: left 0.3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  padding: 0 18px;
}
.mob-drawer.open {
  left: 0;
}
.mob-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 12px;
}
.mob-drawer-header .drawer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #fff;
  font-size: 15px;
}
.mob-drawer-header .drawer-close {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-sub);
  border: 1px solid var(--divider);
}
.mob-drawer nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
}
.mob-drawer nav .nav-link {
  justify-content: flex-start;
  gap: 12px;
  padding: 0 12px;
}
.mob-drawer .drawer-contact {
  padding: 18px 0;
  border-top: 1px solid var(--divider);
}
@media (max-width: 767px) {
  .mnav {
    display: flex;
  }
  .main-wrap {
    padding-top: 60px;
  }
  .svc-hero {
    padding-top: 40px;
  }
}