:root{

  --cyan:#22d3ee;--neon:#00f0ff;--blue:#3b82f6;--indigo:#6366f1;--violet:#a78bfa;

  --purple:#a855f7;--gold:#f0b429;--amber:#fbbf24;--green:#34d399;--pink:#f472b6;--rose:#fb7185;

  --text:#eaf2fa;--muted:#a8bdd4;--dim:#7d94ad;

  --line:rgba(120,190,255,.22);--line2:rgba(120,200,255,.45);

  --glass:rgba(255,255,255,.075);

  --r:14px;--rlg:22px;

  --sans:"Microsoft YaHei","PingFang SC","Source Han Sans SC",Arial,sans-serif;

  --mono:Consolas,Menlo,"Courier New",monospace;

  --maxw:1280px;

}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{font-family:var(--sans);color:var(--text);line-height:1.75;overflow-x:hidden;

background:linear-gradient(165deg,#0A1730 0%,#0E2246 28%,#16305A 52%,#0F2044 76%,#0A1730 100%);

background-attachment:fixed;-webkit-font-smoothing:antialiased}

.w{max-width:var(--maxw);margin:0 auto;padding:0 32px}

.wide{max-width:1560px;margin:0 auto;padding:0 32px}

a{text-decoration:none;color:inherit}

img{max-width:100%;display:block}

.mono{font-family:var(--mono)}



/* ---------- 背景动效 ---------- */

.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.orb{position:absolute;border-radius:50%;filter:blur(95px);opacity:.5;will-change:transform}

.o1{width:720px;height:720px;left:-170px;top:-140px;background:radial-gradient(circle,rgba(34,211,238,.42),transparent 66%);animation:fl1 23s ease-in-out infinite}

.o2{width:640px;height:640px;right:-150px;top:14%;background:radial-gradient(circle,rgba(168,85,247,.40),transparent 66%);animation:fl2 29s ease-in-out infinite}

.o3{width:560px;height:560px;left:22%;top:56%;background:radial-gradient(circle,rgba(59,130,246,.30),transparent 68%);animation:fl1 33s ease-in-out infinite reverse}

.o4{width:460px;height:460px;right:6%;bottom:6%;background:radial-gradient(circle,rgba(251,191,36,.18),transparent 68%);animation:fl2 27s ease-in-out infinite}

@keyframes fl1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-70px) scale(1.13)}}

@keyframes fl2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,70px) scale(1.10)}}

.grid{position:absolute;inset:0;opacity:.26;

background-image:linear-gradient(rgba(120,190,255,.07) 1px,transparent 1px),

linear-gradient(90deg,rgba(120,190,255,.07) 1px,transparent 1px);background-size:62px 62px;

animation:gm 36s linear infinite}

@keyframes gm{to{background-position:62px 62px}}

.beam{position:absolute;left:-30%;top:40%;width:160%;height:2px;

background:linear-gradient(90deg,transparent,rgba(0,240,255,.26),transparent);filter:blur(1px);

animation:bm 15s linear infinite}

@keyframes bm{0%{transform:translateY(-520px);opacity:0}12%{opacity:.85}88%{opacity:.85}100%{transform:translateY(560px);opacity:0}}

.pt{position:absolute;width:3px;height:3px;border-radius:50%;background:#8fe6ff;

box-shadow:0 0 12px var(--cyan);opacity:0;animation:rs 12s linear infinite}

@keyframes rs{0%{transform:translateY(0);opacity:0}10%{opacity:.85}90%{opacity:.5}100%{transform:translateY(-92vh);opacity:0}}

main,nav,footer{position:relative;z-index:2}



/* ---------- 导航 ---------- */

nav{position:fixed;top:0;left:0;right:0;z-index:99;background:rgba(255,255,255,.92);

backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);

border-bottom:1px solid #E6EDF5;box-shadow:0 2px 14px rgba(15,37,71,.05)}

nav .lgimg{filter:none}

/* 深色页面用的导航（加 class="dknav" 到 body） */

body.dknav nav{background:rgba(10,23,48,.80);border-bottom-color:rgba(120,190,255,.22);box-shadow:none}

body.dknav nav .nav ul li a{color:#a8bdd4}

body.dknav nav .nav ul li a:hover{color:#0F2547}

body.dknav nav .nav ul li a.on{color:#fff}

body.dknav nav .tel{color:#7d94ad}

body.dknav nav .bg2{background:var(--glass);color:#fff;border-color:rgba(255,255,255,.22)}

body.dknav nav .lgimg{filter:none}

.ni{display:flex;align-items:center;height:72px;gap:28px}

.lgimg{height:38px;width:auto;display:block}

@media(max-width:1024px){.lgimg{height:32px}}

.lg{font-weight:800;font-size:19px;color:#fff;white-space:nowrap;letter-spacing:-.01em}

.lg i{font-style:normal;background:linear-gradient(100deg,#22d3ee,#a855f7,#22d3ee);

background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;

animation:gf 5s linear infinite}

@keyframes gf{to{background-position:200% center}}

.nav ul{display:flex;gap:19px;list-style:none;font-size:14px;color:#41506B;font-weight:500;

white-space:nowrap}

@media(max-width:1400px){.nav ul{gap:15px;font-size:13.5px}}

@media(max-width:1240px){.nav ul{gap:12px;font-size:13px}}

@media(max-width:1560px){nav .tel{display:none}}

@media(max-width:1300px){nav .bt.bp{padding:11px 16px;font-size:13.5px}}

nav .ni{gap:16px}

.nav ul li a{cursor:pointer;transition:.22s;position:relative;display:block;padding:4px 0}

.nav ul li a:hover{color:#0F2547}

.nav ul li a:after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;

background:linear-gradient(90deg,var(--cyan),var(--purple));transition:.28s;border-radius:2px}

.nav ul li a:hover:after,.nav ul li a.on:after{width:100%}

.nav ul li a.on{color:#1E88C7;font-weight:700}

.ni .r{margin-left:auto;display:flex;align-items:center;gap:16px}

.ni .tel{font-size:13.5px;color:#7C8CA3;font-family:var(--mono)}

.bt{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:10px;

font-weight:700;font-size:14.5px;border:0;cursor:pointer;white-space:nowrap;transition:.26s;

position:relative;overflow:hidden}

.bp{background:linear-gradient(135deg,#1E88C7,#1E3C8C);color:#fff;

box-shadow:0 6px 18px rgba(30,136,199,.28)}

.bp:hover{box-shadow:0 10px 30px rgba(30,136,199,.45);transform:translateY(-2px)}

.bp:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;

background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:sw 3.4s ease-in-out infinite}

@keyframes sw{0%{left:-120%}55%,100%{left:160%}}

.bg2{background:#fff;color:#1E3C8C;border:1px solid #D5E3F0;backdrop-filter:blur(10px)}

.bg2:hover{border-color:#1E88C7;background:#F2F8FD;transform:translateY(-2px)}

.burger{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}

@media(max-width:1024px){

  .nav{display:none}.burger{display:block;margin-left:auto}

  .ni .tel{display:none}

}



/* ---------- 通用 section ---------- */

section{padding:96px 0}

.sh{margin-bottom:52px;max-width:920px}

.sh .kk{font-family:var(--mono);font-size:12px;letter-spacing:.26em;color:#7dd3f0}

.sh h2{font-size:clamp(27px,3.2vw,44px);font-weight:800;letter-spacing:-.025em;line-height:1.2;margin:14px 0 16px;

background:linear-gradient(100deg,#fff,#a9cdf0 60%,#fff);background-size:220% auto;

-webkit-background-clip:text;background-clip:text;color:transparent;animation:gf 10s linear infinite}

.sh p{color:var(--muted);font-size:15.5px;line-height:1.95;max-width:840px}

.sh.ctr{margin-left:auto;margin-right:auto;text-align:center}

.hero{min-height:min(100vh,820px);display:flex;align-items:center;padding:140px 0 88px}

.kick{font-family:var(--mono);font-size:12px;letter-spacing:.26em;color:var(--cyan);

border:1px solid var(--line2);background:rgba(34,211,238,.09);padding:8px 18px;border-radius:999px;

display:inline-block;backdrop-filter:blur(8px)}

.hero h1{font-size:clamp(30px,4.1vw,56px);font-weight:800;line-height:1.2;letter-spacing:-.03em;margin:26px 0 8px;max-width:1100px}

.g1{background:linear-gradient(100deg,#f0b429,#fbbf24 32%,#fff7db 55%,#fbbf24 78%,#f0b429);

background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gf 7s linear infinite}

.g2{background:linear-gradient(100deg,#22d3ee,#a855f7 48%,#60a5fa 78%,#22d3ee);

background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gf 9s linear infinite reverse}

.hero .sub{font-size:17px;color:#bed3e8;max-width:860px;line-height:2;margin-top:20px}

.hero .sub b{color:#fff}

.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

.tags span{font-size:13px;color:#cfe0f0;background:rgba(255,255,255,.07);

border:1px solid rgba(255,255,255,.16);padding:7px 15px;border-radius:10px}

.cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

.cta .bt{padding:15px 30px;font-size:16px}



/* ---------- 数据条 ---------- */

.dbar{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);

border-radius:20px;overflow:hidden;backdrop-filter:blur(14px)}

.db{background:rgba(16,38,72,.68);padding:26px 20px;text-align:center;position:relative;transition:.3s}

.db:hover{background:rgba(30,62,110,.8)}

.db .v{font-size:clamp(26px,3vw,40px);font-weight:800;line-height:1;

background:linear-gradient(180deg,#fff,#9ec8ec);-webkit-background-clip:text;background-clip:text;color:transparent}

.db .v em{font-size:13px;font-style:normal;margin-left:3px;-webkit-text-fill-color:var(--cyan)}

.db .l{font-size:12.5px;color:#9db4cd;margin-top:9px}

.db:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;

background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:pl 3.4s ease-in-out infinite}

.db:nth-child(2n):after{animation-delay:1.2s}

@keyframes pl{0%,100%{opacity:.25}}100%{opacity:1}

@keyframes pl{0%,100%{opacity:.25}50%{opacity:1}}



/* ---------- 卡片 ---------- */

.cards{display:grid;gap:18px}

.c3{grid-template-columns:repeat(3,1fr)}

.c4{grid-template-columns:repeat(4,1fr)}

.c2{grid-template-columns:repeat(2,1fr)}

@media(max-width:1080px){.c4{grid-template-columns:repeat(3,1fr)}}

@media(max-width:980px){.c3{grid-template-columns:1fr 1fr}}

@media(max-width:900px){.c2{grid-template-columns:1fr}}

@media(max-width:760px){.c4,.c3{grid-template-columns:1fr 1fr}}

@media(max-width:560px){.c4,.c3{grid-template-columns:1fr}}



.card{position:relative;background:linear-gradient(150deg,rgba(30,62,110,.58),rgba(16,38,72,.50));

border:1px solid var(--line);border-radius:18px;padding:26px 28px;backdrop-filter:blur(14px);

transition:.3s;overflow:hidden;display:flex;flex-direction:column}

.card:hover{border-color:var(--line2);transform:translateY(-5px);box-shadow:0 24px 62px rgba(0,0,0,.52)}

.card .cb{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--cyan));

box-shadow:0 0 24px var(--c,var(--cyan))}

.card .pt2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--c,var(--cyan));margin-bottom:10px}

.card h3{font-size:19px;font-weight:800;color:#fff;line-height:1.4;margin-bottom:8px}

.card h4{font-size:17.5px;font-weight:800;color:#fff;margin-bottom:10px}

.card .sub{font-size:13px;color:#9db4cd;margin-bottom:12px}

.card p{font-size:13.8px;color:#b6cbe0;line-height:1.9;flex:1}

.card .pk{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}

.card .pk span{font-family:var(--mono);font-size:10.5px;color:#cfe0f0;background:rgba(255,255,255,.075);

border:1px solid rgba(255,255,255,.14);padding:3px 10px;border-radius:7px}

.card .pd{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;color:var(--amber);

border:1px solid rgba(251,191,36,.38);background:rgba(251,191,36,.11);padding:3px 10px;

border-radius:7px;font-family:var(--mono);align-self:flex-start}

.card .go{margin-top:16px;font-size:13px;font-weight:700;color:var(--cyan);font-family:var(--mono)}



/* 产品图卡 */

.pcard{background:linear-gradient(150deg,rgba(30,62,110,.55),rgba(16,38,72,.48));

border:1px solid var(--line);border-radius:var(--r);overflow:hidden;backdrop-filter:blur(12px);transition:.3s;

display:flex;flex-direction:column}

.pcard:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:0 20px 56px rgba(0,0,0,.55)}

.pcard .th{aspect-ratio:4/3;overflow:hidden;background:#0e2140;position:relative}

.pcard .th img{width:100%;height:100%;object-fit:cover;transition:.5s;filter:saturate(1.02) brightness(1.02)}

.pcard:hover .th img{transform:scale(1.06);filter:saturate(1.1) brightness(1.1)}

.pcard .th:after{content:"";position:absolute;inset:0;

background:linear-gradient(180deg,transparent 58%,rgba(10,23,48,.72));pointer-events:none}

.pcard .pb{padding:15px 17px 19px;flex:1;display:flex;flex-direction:column}

.pcard h4{font-size:14.5px;font-weight:700;color:#eef5fc;line-height:1.55;flex:1}

.pcard .cat{display:inline-block;margin-top:10px;font-size:11.5px;font-weight:700;color:#8fe6ff;

border:1px solid var(--line);background:rgba(34,211,238,.10);padding:3px 11px;border-radius:7px;align-self:flex-start}



/* 列表分组 */

.grp{background:linear-gradient(150deg,rgba(30,62,110,.55),rgba(16,38,72,.48));

border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;transition:.26s}

.grp:hover{border-color:var(--line2);box-shadow:0 18px 46px rgba(0,0,0,.45)}

.grp h4{font-size:15px;font-weight:800;color:#fff;margin-bottom:14px;padding-bottom:12px;

border-bottom:1px solid var(--line)}

.grp ul{list-style:none}

.grp li{font-size:13.5px;color:#b6cbe0;padding:5px 0 5px 17px;position:relative;line-height:1.7}

.grp li:before{content:"";position:absolute;left:0;top:13px;width:5px;height:5px;border-radius:50%;

background:var(--cyan);box-shadow:0 0 8px var(--cyan)}



/* 表格 */

table.tb{width:100%;border-collapse:collapse;background:rgba(255,255,255,.04);

border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14px}

table.tb th{background:rgba(34,211,238,.12);color:#8fe6ff;font-family:var(--mono);font-size:12.5px;

padding:14px 18px;text-align:left;font-weight:700}

table.tb td{padding:13px 18px;border-top:1px solid rgba(120,190,255,.12);color:#b6cbe0}

table.tb tr:hover td{background:rgba(34,211,238,.05)}



/* 筛选 */

.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}

.filters span{font-size:13.5px;font-weight:600;color:#cfe0f0;background:var(--glass);

border:1px solid rgba(255,255,255,.15);padding:8px 17px;border-radius:10px;cursor:pointer;transition:.22s}

.filters span:hover{border-color:var(--line2);color:#fff;background:rgba(34,211,238,.12)}

.filters span.on{background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(59,130,246,.18));

border-color:var(--line2);color:#fff;font-weight:700}



/* 面包屑 */

.crumb{display:flex;gap:9px;align-items:center;font-family:var(--mono);font-size:12.5px;

color:var(--dim);margin-bottom:26px;padding-top:112px}

.crumb a:hover{color:var(--cyan)}

.crumb b{color:var(--cyan)}



/* 页头（内页） */

.phead{padding:0 0 56px}

.phead h1{font-size:clamp(28px,3.6vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.22;

background:linear-gradient(100deg,#fff,#a9cdf0 60%,#fff);background-size:220% auto;

-webkit-background-clip:text;background-clip:text;color:transparent;animation:gf 10s linear infinite}

.phead .sub{color:var(--muted);font-size:16px;margin-top:16px;max-width:860px;line-height:1.95}

.mt,.phead .mt{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.mt span,.phead .mt span{font-family:var(--mono);font-size:11.5px;color:#8fe6ff;border:1px solid var(--line);padding:5px 11px;border-radius:8px;background:rgba(30,60,140,.28);white-space:nowrap}
.lt .mt span{color:#1E3C8C;background:#EEF3FA;border-color:#DCE6F2}

.phead .mt span{font-family:var(--mono);font-size:11.5px;color:#8fe6ff;border:1px solid var(--line);

background:rgba(34,211,238,.08);padding:4px 12px;border-radius:999px}



/* ---------- 产品详情 ---------- */

.pdwrap{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:start}

@media(max-width:1000px){.pdwrap{grid-template-columns:1fr}}

.pdimgs{position:sticky;top:96px}

.mainimg{aspect-ratio:4/3;border-radius:var(--rlg);overflow:hidden;background:#0e2140;

border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.45)}

.mainimg img{width:100%;height:100%;object-fit:cover;display:block}

.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}

.thumbs img{aspect-ratio:4/3;object-fit:cover;border-radius:10px;cursor:pointer;

border:1.5px solid transparent;opacity:.7;transition:.22s;width:100%}

.thumbs img:hover,.thumbs img.on{opacity:1;border-color:var(--cyan);box-shadow:0 0 18px rgba(34,211,238,.4)}

.pdinfo{display:flex;flex-direction:column;gap:18px}

.seg{background:linear-gradient(150deg,rgba(30,62,110,.55),rgba(16,38,72,.48));

border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;position:relative;overflow:hidden}

.seg:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);

box-shadow:0 0 20px var(--c)}

.segt{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--c);letter-spacing:.08em;margin-bottom:9px}

.seg p{font-size:14.5px;color:#c3d5e6;line-height:1.95}

.pdcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}

.pdcta .bt{padding:14px 26px;font-size:15px}



/* ---------- 页脚 ---------- */

footer{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:60px;background:rgba(8,18,38,.6)}

.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}

@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}

footer h5{font-size:14px;font-weight:800;color:#fff;margin-bottom:14px;font-family:var(--mono);

letter-spacing:.08em}

footer ul{list-style:none}

footer li{font-size:13px;color:#8ba3bd;padding:4px 0}

footer li a:hover{color:var(--cyan)}

.fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;

border-top:1px solid var(--line);padding-top:22px;color:#6d85a0;font-size:12.5px;font-family:var(--mono)}

.flogo{font-size:18px;font-weight:800;color:#fff;margin-bottom:10px}

.flogo i{font-style:normal;color:var(--cyan)}

.fdesc{font-size:13px;color:#8ba3bd;line-height:1.8;max-width:330px}



.mis{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}

.mi{font-size:14px;font-weight:600;color:#cfe0f0;background:var(--glass);

border:1px solid rgba(255,255,255,.15);padding:11px 20px;border-radius:11px;transition:.24s}

.mi:hover{border-color:var(--line2);color:#fff;background:rgba(34,211,238,.13);transform:translateY(-3px)}



/* ============================================================

   浅色模式（港府风：亲和 · 清晰 · 大图标）

   ============================================================ */

.ic{display:block}

.lt{color:#0F2547;position:relative;overflow:hidden;

background:

  /* 光晕 */

  radial-gradient(1100px 620px at 88% -8%,rgba(30,136,199,.16),transparent 62%),

  radial-gradient(900px 560px at -6% 106%,rgba(124,92,214,.13),transparent 62%),

  radial-gradient(700px 500px at 50% 48%,rgba(34,211,238,.07),transparent 66%),

  /* 基底 */

  linear-gradient(178deg,#F4F8FC 0%,#F8FAFD 34%,#F2F7FC 68%,#F6F9FD 100%)}

/* 科技网格（细） */

.lt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;

background-image:

  linear-gradient(rgba(30,136,199,.085) 1px,transparent 1px),

  linear-gradient(90deg,rgba(30,136,199,.085) 1px,transparent 1px),

  linear-gradient(rgba(30,136,199,.045) 1px,transparent 1px),

  linear-gradient(90deg,rgba(30,136,199,.045) 1px,transparent 1px);

background-size:96px 96px,96px 96px,24px 24px,24px 24px;

background-position:0 0,0 0,0 0,0 0;

mask-image:radial-gradient(ellipse 92% 78% at 50% 34%,#000 34%,transparent 88%);

-webkit-mask-image:radial-gradient(ellipse 92% 78% at 50% 34%,#000 34%,transparent 88%)}

/* 斜向光带 + 点阵 */

.lt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;

background-image:

  repeating-linear-gradient(115deg,transparent 0 132px,rgba(34,211,238,.09) 132px 133px,transparent 133px 264px),

  radial-gradient(rgba(30,60,140,.16) 1.1px,transparent 1.2px);

background-size:auto,30px 30px;

mask-image:radial-gradient(ellipse 80% 70% at 72% 12%,#000 10%,transparent 76%);

-webkit-mask-image:radial-gradient(ellipse 80% 70% at 72% 12%,#000 10%,transparent 76%)}

.lt > .w{position:relative;z-index:3}



/* 浮动科技粒子（浅色区） */

.lt .ltfx{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}

.lt .ltfx i{position:absolute;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#7C5CD6);

opacity:.20;filter:blur(.4px);animation:ltfloat 15s ease-in-out infinite}

.lt .ltfx i:nth-child(1){width:9px;height:9px;left:7%;top:18%;animation-delay:0s}

.lt .ltfx i:nth-child(2){width:6px;height:6px;left:22%;top:64%;animation-delay:2.1s}

.lt .ltfx i:nth-child(3){width:12px;height:12px;left:48%;top:11%;animation-delay:4.4s}

.lt .ltfx i:nth-child(4){width:7px;height:7px;left:63%;top:72%;animation-delay:1.3s}

.lt .ltfx i:nth-child(5){width:10px;height:10px;left:82%;top:28%;animation-delay:3.6s}

.lt .ltfx i:nth-child(6){width:5px;height:5px;left:93%;top:58%;animation-delay:5.5s}

.lt .ltfx i:nth-child(7){width:8px;height:8px;left:35%;top:86%;animation-delay:2.9s}

.lt .ltfx i:nth-child(8){width:6px;height:6px;left:74%;top:48%;animation-delay:6.2s}

@keyframes ltfloat{

  0%,100%{transform:translate(0,0) scale(1);opacity:.16}

  25%{transform:translate(16px,-26px) scale(1.35);opacity:.34}

  50%{transform:translate(-12px,-46px) scale(.85);opacity:.22}

  75%{transform:translate(22px,-20px) scale(1.15);opacity:.30}}



/* 卡片加发光边（浅色区科技感） */

.lt .bigcard::after,.lt .mini::after,.lt .card::after,.lt .pcard::after{

content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:.32s;

background:linear-gradient(135deg,rgba(34,211,238,.16),transparent 42%,rgba(124,92,214,.14));

box-shadow:inset 0 0 0 1px rgba(34,211,238,.34)}

.lt .bigcard:hover::after,.lt .mini:hover::after,.lt .card:hover::after,.lt .pcard:hover::after{opacity:1}

.lt .bigcard,.lt .mini,.lt .card,.lt .pcard{position:relative;overflow:hidden}

/* 顶部渐变高光线 */

.lt .bigcard::before,.lt .mini::before{content:"";position:absolute;top:0;left:14%;right:14%;height:2px;

background:linear-gradient(90deg,transparent,var(--c1,#1E88C7),var(--c2,#1E3C8C),transparent);

opacity:.55;transition:.3s;border-radius:2px}

.lt .bigcard:hover::before,.lt .mini:hover::before{opacity:1;left:6%;right:6%}



/* 浅色区标题加渐变光 */

.lt h2{background:linear-gradient(100deg,#0F2547 12%,#1E88C7 52%,#5B3FA8 88%);

background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;

-webkit-text-fill-color:transparent;animation:ltsheen 9s linear infinite}

@keyframes ltsheen{to{background-position:220% center}}

.lt .kk{position:relative;padding-left:26px}

.lt .kk::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);

width:17px;height:1.5px;background:linear-gradient(90deg,#22d3ee,#7C5CD6)}

.lt .sh.ctr .kk{display:inline-block;padding-left:0;padding-top:18px}

.lt .sh.ctr .kk::before{left:50%;transform:translateX(-50%);top:0;width:30px;height:2px}



/* 数据条玻璃化 */

.lt .dbar{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);

background:linear-gradient(180deg,rgba(228,234,242,.9),rgba(228,234,242,.7))}

.lt .db .v{filter:drop-shadow(0 4px 14px rgba(30,136,199,.22))}



.lt > .w{position:relative;z-index:2}

.lt .kk{font-family:var(--mono);font-size:12px;letter-spacing:.26em;color:#1E88C7}

.lt h2{font-size:clamp(26px,3.1vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1.22;

margin:14px 0 16px;color:#0F2547;background:none;-webkit-text-fill-color:#0F2547}

.lt .sh p{color:#5B6B82}

.lt .sh.ctr{margin-left:auto;margin-right:auto;text-align:center}



/* 大图标入口卡 */

.big{display:grid;gap:20px}

.bg4{grid-template-columns:repeat(4,1fr)}

.bg3{grid-template-columns:repeat(3,1fr)}

.bg6{grid-template-columns:repeat(6,1fr)}

@media(max-width:1080px){.bg4,.bg6{grid-template-columns:repeat(3,1fr)}}

@media(max-width:820px){.bg4,.bg3,.bg6{grid-template-columns:1fr 1fr}}

@media(max-width:520px){.bg4,.bg3,.bg6{grid-template-columns:1fr}}



.bigcard{display:block;background:#fff;border:1px solid #E4EAF2;border-radius:20px;

padding:30px 26px;transition:.28s;position:relative;overflow:hidden;

box-shadow:0 2px 10px rgba(15,37,71,.05)}

.bigcard:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(15,37,71,.14);border-color:#C9DCF0}

.bigcard .icw{width:66px;height:66px;border-radius:20px;display:flex;align-items:center;justify-content:center;

margin-bottom:20px;color:#fff;background:linear-gradient(140deg,var(--c1,#1E88C7),var(--c2,#1E3C8C));

box-shadow:0 8px 22px rgba(30,136,199,.28)}

.bigcard .icw svg{width:32px;height:32px}

.bigcard h3{font-size:19px;font-weight:800;color:#0F2547;margin-bottom:8px;letter-spacing:-.01em}

.bigcard .sub{font-size:13.5px;color:#6B7C93;line-height:1.75;margin-bottom:14px}

.bigcard p{font-size:13.5px;color:#5B6B82;line-height:1.85}

.bigcard .go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;

color:#1E88C7;margin-top:10px}

.bigcard .go svg{width:15px;height:15px;transition:.22s}

.bigcard:hover .go svg{transform:translateX(4px)}

.bigcard .tagp{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:12px}

.bigcard .tagp span{font-size:11.5px;color:#41598F;background:#EEF3FA;border:1px solid #DCE6F2;

padding:3px 10px;border-radius:7px;font-family:var(--mono)}



/* 小图标入口网格 */

.mini{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 12px;

background:#fff;border:1px solid #E4EAF2;border-radius:16px;transition:.24s;

box-shadow:0 2px 8px rgba(15,37,71,.04);text-align:center}

.mini:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(15,37,71,.12);border-color:#C9DCF0}

.mini .icw{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;

color:#fff;background:linear-gradient(140deg,var(--c1,#1E88C7),var(--c2,#1E3C8C))}

.mini .icw svg{width:26px;height:26px}

.mini span{font-size:14px;font-weight:700;color:#0F2547;line-height:1.4}



/* 搜索框 */

.searchbar{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #DCE6F2;

border-radius:16px;padding:6px 6px 6px 20px;max-width:680px;

box-shadow:0 10px 34px rgba(15,37,71,.10)}

.searchbar .si{color:#1E88C7;flex:0 0 22px}

.searchbar .si svg{width:22px;height:22px}

.searchbar input{flex:1;border:0;outline:0;background:transparent;font-size:16px;color:#0F2547;

padding:14px 0;font-family:var(--sans);min-width:0}

.searchbar input::placeholder{color:#93A3B8}

.searchbar button{flex:0 0 auto;border:0;cursor:pointer;padding:14px 26px;border-radius:12px;

font-weight:800;font-size:15px;color:#fff;font-family:var(--sans);

background:linear-gradient(135deg,#1E88C7,#1E3C8C);transition:.24s}

.searchbar button:hover{box-shadow:0 8px 24px rgba(30,136,199,.4);transform:translateY(-1px)}

.hotwords{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;align-items:center}

.hotwords em{font-size:12.5px;color:#8A9AAE;font-style:normal;font-family:var(--mono)}

.hotwords a{font-size:12.5px;color:#41598F;background:#fff;border:1px solid #E0E8F3;

padding:5px 13px;border-radius:999px;transition:.2s}

.hotwords a:hover{border-color:#1E88C7;color:#1E88C7;background:#F2F8FD}



/* 浅色区数据条 */

.lt .dbar{background:#E4EAF2;border-color:#E4EAF2;box-shadow:0 12px 36px rgba(15,37,71,.08)}

.lt .db{background:#fff}

.lt .db:hover{background:#FBFDFF}

.lt .db .v{background:linear-gradient(180deg,#0F2547,#2A4A7A);-webkit-background-clip:text;

background-clip:text;color:transparent}

.lt .db .v em{-webkit-text-fill-color:#1E88C7}

.lt .db .l{color:#6B7C93}



/* 浅色区通用卡 */

.lt .card{background:#fff;border-color:#E4EAF2;box-shadow:0 2px 10px rgba(15,37,71,.05)}

.lt .card:hover{box-shadow:0 20px 48px rgba(15,37,71,.13);border-color:#C9DCF0}

.lt .card h3,.lt .card h4{color:#0F2547}

.lt .card .sub{color:#6B7C93}

.lt .card p{color:#5B6B82}

.lt .card .pk span{color:#41598F;background:#EEF3FA;border-color:#DCE6F2}

.lt .card .go{color:#1E88C7}



/* 浅色区产品卡 */

.lt .pcard{background:#fff;border-color:#E4EAF2;box-shadow:0 2px 10px rgba(15,37,71,.05)}
/* 浅色版块里缩略图占位底色也用浅色，避免图片未淡入完成时透出深色像「黑图」 */
.lt .pcard .th{background:#eef3f9}

.lt .pcard:hover{box-shadow:0 18px 44px rgba(15,37,71,.14);border-color:#C9DCF0}

.lt .pcard h4{color:#0F2547}

.lt .pcard .cat{color:#1E88C7;background:#EEF6FC;border-color:#D5E7F6}



/* 浅色区表格 / 列表 / 筛选 */

.lt .grp{background:#fff;border-color:#E4EAF2;box-shadow:0 2px 10px rgba(15,37,71,.05)}

.lt .grp h4{color:#0F2547;border-bottom-color:#E4EAF2}

.lt .grp li{color:#5B6B82}

.lt table.tb{background:#fff;border-color:#E4EAF2}

.lt table.tb th{background:#EEF3FA;color:#1E3C8C}

.lt table.tb td{color:#5B6B82;border-top-color:#EDF1F7}

.lt .filters span{color:#41598F;background:#fff;border-color:#E0E8F3}

.lt .filters span.on{background:linear-gradient(135deg,#1E88C7,#1E3C8C);color:#fff;border-color:transparent}



/* 深色区块（浅色页里的科技段） */

.dk{background:linear-gradient(165deg,#0A1730,#0E2246 40%,#16305A 70%,#0A1730);position:relative;overflow:hidden}

.dk::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;

background-image:

  linear-gradient(rgba(120,190,255,.075) 1px,transparent 1px),

  linear-gradient(90deg,rgba(120,190,255,.075) 1px,transparent 1px),

  radial-gradient(rgba(120,190,255,.22) 1px,transparent 1.1px);

background-size:72px 72px,72px 72px,26px 26px;

mask-image:radial-gradient(ellipse 90% 76% at 50% 40%,#000 30%,transparent 86%);

-webkit-mask-image:radial-gradient(ellipse 90% 76% at 50% 40%,#000 30%,transparent 86%)}

.dk::before{content:"";position:absolute;inset:0;pointer-events:none;

background:radial-gradient(700px 420px at 80% 0%,rgba(34,211,238,.16),transparent 62%),

radial-gradient(600px 400px at 10% 100%,rgba(168,85,247,.14),transparent 62%)}

.dk > .w{position:relative;z-index:2}

.dk h2{background:linear-gradient(100deg,#fff,#a9cdf0 60%,#fff);background-size:220% auto;

-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.dk .kk{color:#7dd3f0}

.dk .sh p{color:#a8bdd4}

.dk .card{background:linear-gradient(150deg,rgba(30,62,110,.58),rgba(16,38,72,.50));

border-color:rgba(120,190,255,.22)}

.dk .card h3,.dk .card h4{color:#fff}

.dk .card .sub{color:#9db4cd}

.dk .card p{color:#b6cbe0}

.dk .card .pk span{color:#cfe0f0;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.14)}



/* 语言切换 */

.lsw{display:flex;gap:3px;font-family:var(--mono);font-size:11px;margin-right:4px;flex:0 0 auto}

.lsw a{padding:4px 8px;border-radius:7px;border:1px solid #E0E8F3;color:#41598F;transition:.2s}

.lsw a:hover{border-color:#1E88C7;color:#1E88C7;background:#F2F8FD}

.lsw a.on{background:linear-gradient(135deg,#1E88C7,#1E3C8C);color:#fff;border-color:transparent;font-weight:700}

@media(max-width:1024px){.lsw{display:none}}

/* 产品编号角标 */
.pcard .th{position:relative}
.pcode{position:absolute;left:9px;top:9px;font-family:var(--mono);font-size:10.5px;
background:rgba(15,37,71,.80);color:#fff;padding:3px 8px;border-radius:6px;backdrop-filter:blur(6px);
letter-spacing:.02em;z-index:2}
.lt .pcode{background:rgba(255,255,255,.92);color:#1E3C8C;border:1px solid #DCE6F2}
/* ---------- 页脚平台跳转 ---------- */

.fplat{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}

.pf{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#b6cbe0;

background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);

padding:5px 11px;border-radius:8px;transition:.22s}

.pf span{font-size:13px}

.pf:hover{border-color:var(--line2);background:rgba(34,211,238,.12);color:#fff;transform:translateY(-2px)}

.pf.off{opacity:.62;border-style:dashed}

.pf.off:hover{opacity:1}



/* ---------- 推广客服 ---------- */

.cs{position:fixed;right:26px;bottom:26px;z-index:98;font-size:14px}

.csbtns{display:flex;flex-direction:column;gap:10px;align-items:flex-end}

.csbtn{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;

font-size:20px;background:rgba(16,38,72,.85);border:1px solid var(--line2);color:#fff;

backdrop-filter:blur(14px);cursor:pointer;transition:.26s;position:relative;text-decoration:none}

.csbtn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 30px rgba(34,211,238,.4);

border-color:var(--cyan)}

.csbtn.main{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#04121f;font-size:22px;

box-shadow:0 8px 28px rgba(34,211,238,.5)}

.csbtn.main:hover{box-shadow:0 12px 40px rgba(34,211,238,.8)}

.csbtn .dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;

background:#ff4d4f;box-shadow:0 0 10px #ff4d4f;animation:pl 1.6s ease-in-out infinite}

.cspanel{position:absolute;right:66px;bottom:0;width:296px;padding:22px;

background:linear-gradient(160deg,rgba(16,38,72,.97),rgba(10,23,48,.97));

border:1px solid var(--line2);border-radius:20px;backdrop-filter:blur(20px);

box-shadow:0 24px 70px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateX(14px) scale(.97);

transition:.28s cubic-bezier(.22,.8,.3,1)}

.cspanel.on{opacity:1;visibility:visible;transform:none}

.csh{font-size:17px;font-weight:800;color:#fff;margin-bottom:8px}

.csd{font-size:13px;color:#9db4cd;line-height:1.75;margin-bottom:16px}

.csb{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;

border-radius:11px;font-size:14px;font-weight:700;margin-bottom:10px;transition:.24s;

background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff}

.csb:hover{background:rgba(34,211,238,.14);border-color:var(--line2);transform:translateY(-2px)}

.csb.pri{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#04121f;border:0;

box-shadow:0 6px 22px rgba(34,211,238,.42)}

.csqr{display:flex;gap:12px;align-items:center;padding:12px;margin-bottom:10px;

background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px}

.qrbox{width:72px;height:72px;flex:0 0 72px;border-radius:10px;background:rgba(255,255,255,.08);

border:1px dashed var(--line2);display:flex;flex-direction:column;align-items:center;

justify-content:center;font-size:11px;color:#7d94ad;line-height:1.4;text-align:center}

.qrbox span{font-size:10px;color:#55708E}

.qrtx{font-size:12.5px;color:#b6cbe0;line-height:1.6}

.cst{font-size:12px;color:#7d94ad;text-align:center;padding-top:8px;border-top:1px solid var(--line)}

@media(max-width:640px){

  .cs{right:16px;bottom:16px}

  .cspanel{right:0;bottom:70px;width:calc(100vw - 32px);max-width:340px}

}



/* reveal */

.reveal{opacity:0;transform:translateY(18px);

transition:opacity .42s cubic-bezier(.22,.8,.3,1),transform .42s cubic-bezier(.22,.8,.3,1)}

.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}

.reveal{opacity:1;transform:none}}