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

html{
scroll-behavior:smooth;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
background:#020617;
color:#fff;
overflow-x:hidden;
}

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

/* 背景光效 */

body::before{
content:"";
position:fixed;
width:900px;
height:900px;
right:-250px;
top:-250px;
background:
radial-gradient(circle,
rgba(37,99,235,.35),
transparent 70%);
z-index:-2;
}

.cursor-glow{
position:fixed;
width:450px;
height:450px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(56,189,248,.12),
transparent 70%);
pointer-events:none;
transform:translate(-50%,-50%);
z-index:-1;
}

/* 导航 */

.nav{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
width:min(1500px,92%);
z-index:100;
background:rgba(7,12,28,.78);
backdrop-filter:blur(24px);
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
}

.nav-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 26px;
}

.logo{
display:flex;
align-items:center;
gap:12px;
}

.logo-icon{
width:44px;
height:44px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:22px;
color:white;
background:
linear-gradient(
135deg,
#2563eb,
#38bdf8
);
box-shadow:
0 0 30px rgba(37,99,235,.5);
}

.logo-main{
font-size:18px;
font-weight:700;
letter-spacing:1px;
}

.logo-sub{
font-size:11px;
color:#64748b;
}

.menu{
display:flex;
gap:30px;
}

.menu a{
font-size:14px;
color:#cbd5e1;
transition:.3s;
}

.menu a:hover{
color:#fff;
}

/* Hero */

.hero{
min-height:100vh;
padding:150px 7% 100px;
display:flex;
align-items:center;
}

.hero-inner{
max-width:1500px;
margin:auto;
width:100%;
display:grid;
grid-template-columns:1.1fr 1fr;
gap:80px;
align-items:center;
}

.badge{
display:inline-block;
padding:10px 18px;
border-radius:999px;
background:rgba(56,189,248,.08);
border:1px solid rgba(56,189,248,.2);
color:#7dd3fc;
font-size:13px;
margin-bottom:24px;
}

.hero h1{
font-size:clamp(58px,7vw,96px);
line-height:.95;
letter-spacing:-4px;
margin-bottom:25px;
background:
linear-gradient(
180deg,
#fff,
#93c5fd
);
-webkit-background-clip:text;
color:transparent;
}

.hero p{
font-size:20px;
line-height:1.9;
color:#b6c5da;
max-width:720px;
}

.btns{
display:flex;
gap:14px;
margin-top:36px;
flex-wrap:wrap;
}

.btn{
padding:15px 28px;
border-radius:999px;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
transition:.3s;
}

.btn:hover{
transform:translateY(-3px);
}

.primary{
background:
linear-gradient(
135deg,
#2563eb,
#06b6d4
);
border:none;
box-shadow:
0 20px 50px rgba(37,99,235,.4);
}

.hero-metrics{
margin-top:50px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}

/* Dashboard */

.dashboard{
padding:26px;
border-radius:32px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.08),
rgba(255,255,255,.02)
);
border:1px solid rgba(255,255,255,.1);
box-shadow:
0 40px 120px rgba(0,0,0,.45);
}

.dash-top{
display:flex;
justify-content:space-between;
margin-bottom:20px;
color:#bfdbfe;
}

.status{
color:#22c55e;
}

.dash-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.panel{
padding:22px;
border-radius:20px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
}

.panel h3{
margin-bottom:15px;
}

.agent{
display:flex;
justify-content:space-between;
padding:10px 0;
color:#cbd5e1;
}

.bar{
height:8px;
border-radius:99px;
background:#172033;
overflow:hidden;
margin-bottom:12px;
}

.bar span{
display:block;
height:100%;
background:
linear-gradient(
90deg,
#2563eb,
#22d3ee
);
width:0;
transition:1.2s;
}

.metrics{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.metric{
padding:18px;
border-radius:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
}

.metric strong{
display:block;
font-size:28px;
color:#7dd3fc;
margin-bottom:6px;
}

/* Sections */

.section{
max-width:1500px;
margin:auto;
padding:120px 7%;
}

.section h2{
font-size:clamp(40px,5vw,68px);
line-height:1.05;
letter-spacing:-2px;
margin-bottom:20px;
}

.desc{
max-width:850px;
font-size:18px;
line-height:1.9;
color:#94a3b8;
margin-bottom:50px;
}

/* 行业 */

.industry-title{
text-align:center;
color:#64748b;
margin-bottom:40px;
letter-spacing:2px;
font-size:14px;
}

.industry-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:18px;
}

.industry{
padding:24px;
text-align:center;
border-radius:18px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
color:#cbd5e1;
}

/* 产品图 */

.product-image{
width:100%;
border-radius:30px;
border:1px solid rgba(255,255,255,.08);
box-shadow:
0 50px 150px rgba(0,0,0,.55);
transition:.4s;
}

.product-image:hover{
transform:translateY(-6px);
}

/* 卡片 */

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

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

.card{
padding:30px;
border-radius:26px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.06),
rgba(255,255,255,.02)
);
border:1px solid rgba(255,255,255,.08);
transition:.3s;
}

.card:hover{
transform:translateY(-8px);
border-color:rgba(56,189,248,.4);
}

.card h3{
margin-bottom:15px;
font-size:22px;
}

.card p{
line-height:1.8;
color:#a5b4c8;
}

/* About */

.about-card{
padding:40px;
border-radius:26px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.06),
rgba(255,255,255,.02)
);
border:1px solid rgba(255,255,255,.08);
}

.about-card p{
font-size:18px;
line-height:2;
color:#cbd5e1;
}

/* Contact */

.contact{
width:min(1500px,92%);
margin:80px auto;
padding:100px 40px;
border-radius:40px;
text-align:center;
background:
radial-gradient(circle at center,
rgba(37,99,235,.25),
transparent 60%);
border:1px solid rgba(255,255,255,.08);
}

.contact h2{
font-size:clamp(40px,5vw,72px);
margin-bottom:20px;
}

.contact p{
color:#cbd5e1;
margin:8px 0;
}

.contact-btns{
justify-content:center;
}

/* Footer */

.footer{
padding:40px;
text-align:center;
color:#64748b;
}

/* Reveal */

.reveal{
opacity:0;
transform:translateY(40px);
transition:.8s;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* Mobile */

@media(max-width:1000px){

.menu{
display:none;
}

.hero-inner,
.dash-grid,
.cards,
.success-grid,
.industry-grid,
.hero-metrics{
grid-template-columns:1fr;
}

.hero{
padding-top:130px;
}

.section{
padding:80px 6%;
}

.hero h1{
font-size:52px;
}

}