:root{--bg:#050a0f;--text:#eafcff;--muted:#9fb2c6;--border:#0f1b2d;--card:#08121f;--primary:#00e5ff;--accent:#7cff4c;--primary-glow:rgba(0,229,255,.6);--primary-soft-glow:rgba(0,229,255,.35);--primary-faint:rgba(0,229,255,.25);--accent-faint:rgba(124,255,76,.25)}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.progress{position:fixed;left:0;top:0;width:100%;height:3px;background:transparent;z-index:9999}
.progress .bar{width:0;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));box-shadow:0 0 12px var(--primary-glow)}
.tech-hero{position:relative;padding:64px 0 48px;background:radial-gradient(1200px 400px at 10% -10%, var(--primary-faint), transparent 60%),radial-gradient(900px 300px at 90% -20%, var(--accent-faint), transparent 60%)}
.tech-hero .brand img{height:44px;filter:drop-shadow(0 0 10px var(--primary-soft-glow))}
.hero-wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.hero-nav{margin:12px 0 24px;display:flex;gap:16px;flex-wrap:wrap}
.hero-nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border:1px solid var(--border);border-radius:999px;transition:.2s}
.hero-nav a:hover{color:var(--text);border-color:var(--primary);box-shadow:0 0 12px var(--primary-soft-glow)}
.hero-nav .emph{color:#0b1020;background:linear-gradient(90deg,var(--primary),var(--accent));border-color:transparent}
.hero-main h1{font-size:40px;line-height:1.2;margin:8px 0 10px}
.hero-main p{color:var(--muted);max-width:760px}
.hero-actions{margin-top:18px;display:flex;gap:12px}
.btn-primary,.btn-secondary{display:inline-block;padding:10px 16px;border-radius:12px;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--accent));color:#0b1020}
.btn-secondary{border:1px solid var(--border);color:var(--text)}
.btn-secondary:hover{border-color:var(--primary)}
.hero-track{margin-top:20px;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03)}
.hero-track .track{display:inline-flex;gap:16px;white-space:nowrap;padding:10px 16px;animation:track 28s linear infinite}
.hero-track .track a{color:var(--muted);text-decoration:none}
.hero-side{display:flex;flex-direction:column;gap:16px;align-items:flex-end}
.hero-qr{width:120px;height:auto;border-radius:12px;border:1px solid var(--border)}
.hero-contact a{display:block;color:var(--muted);text-decoration:none}
@keyframes track{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.section{padding:64px 0}
.section .container h2{font-size:28px;margin:0 0 16px}
.chapter{opacity:.001;transform:translateY(24px);transition:transform .6s ease,opacity .6s ease}
.chapter.enter{opacity:1;transform:none}
.matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:var(--primary);box-shadow:0 0 20px var(--primary-faint)}
.card .thumb{display:block;border-radius:10px;overflow:hidden}
.card .thumb img{width:100%;height:160px;object-fit:cover;display:block}
.card h3{margin:10px 0;font-size:18px}
.card p{color:var(--muted)}
.more{color:var(--primary);text-decoration:none}
.timeline{position:relative;margin-top:8px}
.timeline::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:linear-gradient(var(--primary),var(--accent))}
.tl-item{position:relative;padding-left:36px;margin:18px 0}
.tl-item::before{content:"";position:absolute;left:6px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary-glow)}
.tl-item h4{margin:0 0 6px}
.tl-item p{margin:0;color:var(--muted)}
.cta{background:linear-gradient(90deg,var(--primary-faint),var(--accent-faint));border:1px solid var(--border);border-radius:12px;padding:20px}
.cta h3{margin:0 0 10px}
.brands{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-items:center}
.brands a{display:flex;align-items:center;gap:10px;justify-content:center;border:1px solid var(--border);border-radius:12px;padding:10px;text-decoration:none;color:var(--muted);transition:.2s}
.brands a img{height:28px}
.brands a:hover{border-color:var(--primary);color:var(--text)}
@media (max-width:1199px){.hero-wrap{grid-template-columns:minmax(0,1fr)}.hero-side{align-items:flex-start}}
@media (max-width:992px){.matrix{grid-template-columns:repeat(2,minmax(0,1fr))}.brands{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.hero-main h1{font-size:30px}.matrix{grid-template-columns:1fr}.brands{grid-template-columns:repeat(2,minmax(0,1fr))}.section{padding:40px 0}}

@media (max-width:992px){.foottop .box{grid-template-columns:minmax(0,1fr)}}

.foottop .container{padding-top:24px}
.foottop .lj{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;color:var(--muted);margin:0 0 12px}
.foottop .lj span{margin-right:6px}
.lj>a{display:inline-block;margin:6px 12px 6px 0;color:var(--primary);text-decoration:none}
.foottop .box{display:grid;grid-template-columns:160px minmax(0,1fr) 280px;gap:24px;align-items:center}
.foottop .box-left img{width:100%;max-width:150px;height:auto;display:block}
.foottop .box-zx{border:1px solid var(--border);border-radius:12px;padding:12px;background:rgba(255,255,255,.03)}
.foottop .box-zx_top{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.foottop .box-zx_top img{width:36px;height:36px}
.foottop .box-zx_top .rig p{margin:0;color:var(--muted)}
.foottop .box-zx p{margin:6px 0;padding-left:28px;line-height:1.6;color:var(--muted)}
.foot-cta{padding:24px 0}
.foot-cta h3{margin:0 0 10px}
.foot-cta a{display:inline-block;padding:10px 16px;border-radius:12px;text-decoration:none;background:linear-gradient(90deg,var(--primary),var(--accent));color:#0b1020}
.foottop .box-right h3{margin:0 0 8px}
.foottop .box-right ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.box-right ul li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px}
.foottop .box-right ul li img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.footbottom{padding:18px 0;border-top:1px solid var(--border);text-align:center}
.footbottom p{margin:0;color:var(--muted)}
.footbottom p a{color:#cbcbcb;text-decoration:none}