:root{
  --brand:#4f46e5; /* 品牌主色：靛蓝 */
  --brand-600:#4f46e5; --brand-700:#4338ca; --brand-800:#3730a3;
  --bg:#0b1020; /* 深色背景 */
  --card:#0f172a; /* 卡片背景 */
  --muted:#94a3b8; /* 次要文字 */
  --text:#e5e7eb; /* 主文字 */
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
  --radius:18px; --radius-lg:28px;
  --shadow:0 10px 30px rgba(0,0,0,.2), 0 6px 12px rgba(0,0,0,.12);
  --maxw:1200px;
}
html{color-scheme:dark;}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif; background:radial-gradient(1200px 800px at 80% -10%, rgba(79,70,229,.25), transparent 60%),
radial-gradient(1000px 700px at -10% 20%, rgba(16,185,129,.15), transparent 50%), var(--bg); color:var(--text); line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* 容器 */
.container{max-width:var(--maxw); margin-inline:auto; padding:0 20px}

/* 顶部导航 */
header{position:sticky; top:0; z-index:50; background:rgba(11,16,32,.65); backdrop-filter: blur(10px); border-bottom:1px solid rgba(148,163,184,.1)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:36px; height:36px; border-radius:10px; background:conic-gradient(from 180deg at 50% 50%, var(--brand) 0deg, #22d3ee 90deg, #06b6d4 180deg, #10b981 270deg, var(--brand) 360deg); box-shadow:inset 0 0 18px rgba(255,255,255,.2), 0 6px 16px rgba(79,70,229,.35)}
.brand h1{font-size:18px; letter-spacing:.4px; font-weight:700}
.menu{display:flex; align-items:center; gap:24px}
.menu a{opacity:.85}
.menu a:hover{opacity:1}
.cta{display:flex; align-items:center; gap:10px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; border:1px solid rgba(148,163,184,.18); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{border-color:transparent; background:linear-gradient(180deg, var(--brand-600), var(--brand-700)); box-shadow:0 10px 18px rgba(79,70,229,.35)}

/* 折叠菜单（移动端） */
.hamburger{display:none; width:40px; height:40px; border-radius:12px; align-items:center; justify-content:center; border:1px solid rgba(148,163,184,.18)}
@media (max-width: 900px){
  .menu{display:none}
  .hamburger{display:inline-flex}
}

/* 首屏 */
.hero{position:relative; padding:64px 0 40px}
.hero .container{display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center}
.tag{display:inline-flex; align-items:center; gap:10px; padding:6px 10px; border-radius:999px; border:1px solid rgba(148,163,184,.18); color:var(--muted); font-size:13px}
.title{font-size:clamp(28px, 4vw, 48px); line-height:1.15; margin:14px 0 14px; font-weight:800}
.subtitle{font-size:18px; color:var(--muted)}
.hero-cta{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap}
.hero-art{position:relative; padding:22px; border-radius:var(--radius-lg); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(148,163,184,.18); box-shadow:var(--shadow)}
.hero-art canvas{width:100%; aspect-ratio: 4/3; border-radius:14px; background:radial-gradient(500px 280px at 70% 20%, rgba(79,70,229,.25), transparent 60%), radial-gradient(500px 280px at 30% 70%, rgba(16,185,129,.2), transparent 60%), #0b1226}
.badge-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.pill{font-size:12px; color:#a5b4fc; background:rgba(67,56,202,.2); border:1px solid rgba(165,180,252,.25); padding:6px 10px; border-radius:999px}

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

/* 优势指标 */
.metrics{padding:26px 0}
.metrics .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.metric{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(148,163,184,.18); border-radius:var(--radius); padding:18px 16px; text-align:center}
.metric h3{margin:0; font-size:28px}
.metric p{margin:6px 0 0; color:var(--muted); font-size:14px}
@media (max-width: 900px){.metrics .grid{grid-template-columns:1fr 1fr}}

/* 服务 */
.section{padding:34px 0}
.section .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(148,163,184,.18); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin:6px 0 8px}
.card p{margin:0; color:var(--muted)}
.icon{width:28px; height:28px}
.card ul{margin:12px 0 0; padding-left:18px; color:var(--muted)}
@media (max-width: 900px){.section .grid{grid-template-columns:1fr}}

/* 行业方案 */
.solutions .grid{grid-template-columns:repeat(4,1fr)}
.tagged{display:flex; align-items:center; justify-content:space-between; gap:10px}
@media (max-width: 1100px){.solutions .grid{grid-template-columns:1fr 1fr}}

/* 案例 */
.cases .grid{grid-template-columns:repeat(3,1fr)}
.case-thumb{border-radius:14px; background:linear-gradient(135deg, rgba(79,70,229,.25), rgba(16,185,129,.22)); height:160px; display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.8px; opacity:.9}
.case-meta{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; margin-top:8px}
@media (max-width: 900px){.cases .grid{grid-template-columns:1fr}}

/* 技术栈 */
.stack .chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{border:1px solid rgba(148,163,184,.2); padding:8px 12px; border-radius:999px; background:#0b132a; color:#cbd5e1; font-size:14px}

/* 客户 */
.clients .logos{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; align-items:center}
.logo-box{height:48px; border-radius:12px; border:1px dashed rgba(148,163,184,.25); display:flex; align-items:center; justify-content:center; color:var(--muted)}
@media (max-width: 1100px){.clients .logos{grid-template-columns:repeat(3,1fr)}}

/* 咨询 */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:22px}
.form{display:grid; gap:12px}
.input{padding:12px 14px; border-radius:12px; border:1px solid rgba(148,163,184,.25); background:#0b132a; color:var(--text)}
.textarea{min-height:120px; resize:vertical}
.note{color:var(--muted); font-size:13px}
@media (max-width: 900px){.contact{grid-template-columns:1fr}}

/* 页脚 */
footer{margin-top:40px; border-top:1px solid rgba(148,163,184,.12); padding:24px 0; color:var(--muted)}

/* 小动画 */
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}