*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#05070f;--card:rgba(255,255,255,.04);--bd:rgba(255,255,255,.09);--tx:#e6e9f5;--mu:#8a93b2;--c1:#22d3ee;--c2:#3b82f6;--c3:#8b5cf6;--gr:linear-gradient(120deg,#22d3ee,#3b82f6 45%,#8b5cf6)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.bgfx{position:fixed;inset:0;z-index:-1;background:radial-gradient(600px 400px at 15% 10%,rgba(59,130,246,.18),transparent 70%),radial-gradient(600px 500px at 85% 30%,rgba(139,92,246,.16),transparent 70%),radial-gradient(500px 400px at 50% 100%,rgba(34,211,238,.10),transparent 70%)}
.bgfx:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 20%,#000 30%,transparent 75%)}
canvas#stars{position:fixed;inset:0;z-index:-1;pointer-events:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(5,7,15,.6);border-bottom:1px solid var(--bd)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px}
.brand img{width:34px;height:34px}
.nav ul{display:flex;gap:30px;list-style:none;font-size:15px;color:var(--mu)}
.nav ul a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;font-weight:600;font-size:15px;transition:.25s}
.btn-p{background:var(--gr);color:#fff;box-shadow:0 8px 30px rgba(59,130,246,.35)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(139,92,246,.45)}
.btn-g{border:1px solid var(--bd);background:var(--card)}
.btn-g:hover{border-color:rgba(34,211,238,.5)}
.nav .btn{padding:9px 18px;font-size:14px}
.hero{padding:120px 0 90px;text-align:center}
.pill{display:inline-flex;gap:8px;align-items:center;padding:6px 16px;border:1px solid var(--bd);border-radius:999px;background:var(--card);font-size:13px;color:var(--mu);margin-bottom:28px}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--c1);box-shadow:0 0 12px var(--c1)}
h1{font-size:clamp(38px,6.4vw,76px);line-height:1.12;font-weight:800;letter-spacing:-.02em}
.gt{background:var(--gr);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{max-width:720px;margin:26px auto 40px;color:var(--mu);font-size:clamp(16px,1.6vw,19px)}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}




section{padding:96px 0}
.sh{text-align:center;max-width:720px;margin:0 auto 56px}
.eyebrow{font-size:13px;letter-spacing:.2em;color:var(--c1);font-weight:600;margin-bottom:12px}
h2{font-size:clamp(28px,3.6vw,44px);line-height:1.25;font-weight:800}
.sh p{color:var(--mu);margin-top:16px}
.glass{background:var(--card);border:1px solid var(--bd);border-radius:20px;backdrop-filter:blur(10px);transition:.3s}
.glass:hover{border-color:rgba(59,130,246,.45);transform:translateY(-3px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0 0 20px}
.stat{padding:28px;text-align:center}
.stat b{display:block;font-size:40px;font-weight:800}
.stat span{color:var(--mu);font-size:14px}
.strip{padding:40px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);overflow:hidden}
.strip p{text-align:center;color:var(--mu);font-size:13px;margin-bottom:20px}
.marq{display:flex;gap:54px;width:max-content;animation:mq 30s linear infinite;color:#5d6688;font-weight:700;font-size:18px;white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.b{padding:30px;position:relative;overflow:hidden}
.b h3{font-size:22px;margin:14px 0 10px}
.b p{color:var(--mu);font-size:15px}
.b ul{margin-top:14px;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.b li{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--bd);color:#b7c0de}
.ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(139,92,246,.25));border:1px solid rgba(255,255,255,.12);font-size:16px;font-weight:800;color:#a5f3fc}
.s4{grid-column:span 4}.s2{grid-column:span 2}.s3{grid-column:span 3}
.b.glow:before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 70%)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.step{padding:28px}
.step:before{counter-increment:st;content:"0" counter(st);font-size:34px;font-weight:800;background:var(--gr);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{margin:8px 0;font-size:19px}.step p{color:var(--mu);font-size:14px}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.case{padding:30px}
.tag{display:inline-block;font-size:12px;padding:3px 10px;border-radius:6px;background:rgba(139,92,246,.18);color:#c4b5fd;border:1px solid rgba(139,92,246,.35);margin-right:8px}
.tag.i{background:rgba(34,211,238,.12);color:#67e8f9;border-color:rgba(34,211,238,.3)}
.case h3{font-size:21px;margin:14px 0 12px}
.case dl{font-size:14px;color:var(--mu)}
.case dt{color:#cdd5ef;font-weight:600;margin-top:10px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.metrics div{padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--bd);text-align:center}
.metrics b{display:block;font-size:22px}.metrics span{font-size:12px;color:var(--mu)}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why .glass{padding:28px}.why h3{font-size:18px;margin:12px 0 8px}.why p{color:var(--mu);font-size:14px}
.cta-box{padding:64px 32px;text-align:center;border-radius:28px;background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(59,130,246,.12),rgba(139,92,246,.2));border:1px solid rgba(255,255,255,.12)}
.cta-box p{color:var(--mu);margin:16px auto 32px;max-width:600px}
footer{border-top:1px solid var(--bd);padding:56px 0 30px;color:var(--mu);font-size:14px}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
footer h4{color:#fff;margin-bottom:12px;font-size:15px}
footer li{list-style:none;margin:6px 0}
.copy{margin-top:40px;padding-top:20px;border-top:1px solid var(--bd);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px}
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.rv.on{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media(max-width:960px){.nav ul{display:none}.bento{grid-template-columns:1fr 1fr}.s4,.s3,.s2{grid-column:span 2}.steps,.stats{grid-template-columns:1fr 1fr}.cases,.why{grid-template-columns:1fr}.fg{grid-template-columns:1fr}}
@media(max-width:560px){section{padding:68px 0}.hero{padding:80px 0 60px}.bento{grid-template-columns:1fr}.s4,.s3,.s2{grid-column:span 1}.steps{grid-template-columns:1fr}.stat b{font-size:24px;white-space:nowrap}.stat{padding:20px 10px}.stat span{font-size:12px}.metrics b{font-size:18px}}
@media(prefers-reduced-motion:reduce){.marq{animation:none}.rv{opacity:1;transform:none}}
.logo-pill{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:4px 10px;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 4px 20px rgba(59,130,246,.25)}
.logo-pill img{height:36px;width:auto;display:block}
.ind{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:18px;margin-top:36px;text-align:left}
.contact-grid .glass{padding:22px}.contact-grid b{display:block;color:#fff;margin-bottom:6px}.contact-grid span{color:var(--mu);font-size:14px;word-break:break-all}
.qr{background:#fff;border-radius:12px;padding:8px;width:122px;height:122px}.qr img{width:106px;height:106px;display:block}
.qrw{text-align:center;font-size:12px;color:var(--mu)}
.slogan{color:#67e8f9;letter-spacing:.3em;font-size:13px;margin-top:22px}
@media(max-width:960px){.contact-grid{grid-template-columns:1fr}.qrw{justify-self:center}}
/* ===== Light theme ===== */
:root{--bg:#f7f9fc;--card:rgba(255,255,255,.78);--bd:rgba(15,23,42,.08);--tx:#0f172a;--mu:#475569;--c1:#0891b2;--c2:#2563eb;--c3:#7c3aed;--gr:linear-gradient(120deg,#2563eb,#06b6d4 50%,#7c3aed);--sh:0 1px 2px rgba(15,23,42,.04),0 10px 30px -12px rgba(37,99,235,.18)}
body{background:var(--bg);color:var(--tx)}
.bgfx{background:radial-gradient(700px 420px at 15% 0%,rgba(37,99,235,.13),transparent 70%),radial-gradient(640px 480px at 88% 12%,rgba(124,58,237,.11),transparent 70%),radial-gradient(600px 420px at 50% 60%,rgba(6,182,212,.08),transparent 70%),#f7f9fc}
.bgfx:after{background-image:radial-gradient(rgba(37,99,235,.16) 1px,transparent 1.2px);background-size:24px 24px;mask-image:radial-gradient(ellipse at 50% 0%,#000 25%,transparent 70%)}
canvas#stars{opacity:.55}
header{background:rgba(255,255,255,.75);border-bottom:1px solid var(--bd)}
.logo{height:40px;width:auto;display:block}
.nav ul a:hover{color:var(--c2)}
.btn-p{color:#fff;box-shadow:0 8px 24px -6px rgba(37,99,235,.5)}
.btn-g{background:#fff;color:var(--tx);border:1px solid rgba(15,23,42,.12);box-shadow:var(--sh)}
.btn-g:hover{border-color:rgba(37,99,235,.45);color:var(--c2)}
.pill{background:#fff;box-shadow:var(--sh);color:var(--mu)}
.pill i{background:#06b6d4;box-shadow:0 0 0 4px rgba(6,182,212,.18)}
.slogan{color:#0e7490}

.glass{background:var(--card);box-shadow:var(--sh);backdrop-filter:blur(12px)}
.glass:hover{border-color:rgba(37,99,235,.35);box-shadow:0 18px 40px -16px rgba(37,99,235,.3)}
.stat b{background:var(--gr);-webkit-background-clip:text;background-clip:text;color:transparent}
.strip{border-color:var(--bd);background:rgba(255,255,255,.5)}
.marq{color:#64748b}
.eyebrow{color:#2563eb}
.b li{border-color:rgba(37,99,235,.18);background:rgba(37,99,235,.05);color:#1e40af}
.ic{background:var(--gr);border:0;color:#fff;box-shadow:0 6px 16px -6px rgba(37,99,235,.55)}
.b.glow:before{background:radial-gradient(circle,rgba(6,182,212,.18),transparent 70%)}
.b b{color:var(--c2)}
.tag{background:rgba(124,58,237,.08);color:#6d28d9;border-color:rgba(124,58,237,.25)}
.tag.i{background:rgba(8,145,178,.08);color:#0e7490;border-color:rgba(8,145,178,.25)}
.case dt{color:var(--tx)}
.metrics div{background:linear-gradient(180deg,#fff,#f1f5ff);border-color:rgba(37,99,235,.12)}
.metrics b{color:#1d4ed8}
.cta-box{background:linear-gradient(135deg,#eff6ff,#ecfeff 50%,#f5f3ff);border:1px solid rgba(37,99,235,.15);box-shadow:0 30px 60px -30px rgba(37,99,235,.35)}
.contact-grid b{color:var(--tx)}.contact-grid a{color:var(--c2)}
.qr{box-shadow:var(--sh);border:1px solid var(--bd)}
footer{background:#fff;border-color:var(--bd)}
footer h4{color:var(--tx)}
footer a:hover{color:var(--c2)}
.copy{border-color:var(--bd)}
.brand img.logo{width:auto;height:40px}@media(max-width:560px){.brand img.logo{height:34px}}
.brand picture{display:block}
.brand-name{font-size:21px;font-weight:800;letter-spacing:1px;color:#0f2a6b;line-height:1}
@media(max-width:640px){.brand-name{font-size:19px}}