/* 麦腾信息科技 · 统一样式表
   设计语言：深色底、霓虹渐变、玻璃拟态、流体卡片
   作者：ChatGPT
------------------------------------------------------------------ */
:root{
  --bg: #0b0f1a;
  --bg-2: #0f1424;
  --card: #131a2b;
  --text: #e8eefc;
  --muted: #aab4d4;
  --primary: #7C5CFF;     /* 葡萄紫 */
  --accent: #00D4FF;      /* 霓虹蓝 */
  --success:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.2);
}

* { box-sizing: border-box; }
html,body { height:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial, "Noto Sans CJK SC", sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #1a1f35 0%, rgba(26,31,53,0) 65%),
              radial-gradient(800px 600px at 100% 0%, rgba(0,212,255,.15) 0%, rgba(0,212,255,0) 60%),
              linear-gradient(180deg, var(--bg), var(--bg-2));
  letter-spacing:.2px;
}

/* 布局基础 */
.container{ max-width: 1180px; margin:0 auto; padding: 0 20px; }
.section{ padding: 88px 0; position: relative; }
.section .section-title{
  font-size: 36px; font-weight: 800; margin: 0 0 18px;
  background: linear-gradient(135deg, #fff, #bcd4ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section .section-sub{ color:var(--muted); margin-top: 8px; font-size: 15px; }

/* 导航 */
.nav{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(15,20,36,.82), rgba(15,20,36,.45));
  border-bottom: 1px solid rgba(124,92,255,.15);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-logo{ width:34px; height:34px; }
.brand-name{ font-weight:900; letter-spacing:1px; }
.nav-links{ display:flex; gap: 14px; align-items:center; }
.nav-links a{
  color:#dfe7ff; text-decoration:none; padding:10px 14px; border-radius: 12px; font-size:14px;
}
.nav-links a:hover{ background: rgba(124,92,255,.12); }
.nav-links a.active{ background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(0,212,255,.18)); border: 1px solid rgba(124,92,255,.25); }

.mobile-toggle{ display:none; }

/* 按钮 */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius: 14px; text-decoration:none;
  color:#101319; font-weight:700; border: 0; cursor:pointer;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  box-shadow: 0 10px 20px rgba(0,212,255,.18), inset 0 0 0 1px rgba(255,255,255,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,212,255,.25); }
.btn-outline{
  background: transparent; color:#dfe7ff; border:1px solid rgba(124,92,255,.45);
}

/* Hero */
.hero{ padding: 80px 0 60px; position:relative; overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items:center;
}
.hero h1{ font-size: 52px; line-height:1.1; margin:0 0 14px; font-weight:900; }
.hero p{ color: var(--muted); font-size:16px; }
.badges{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 26px; }
.badge{ font-size:12px; color:#b9c6ff; padding:6px 10px; border-radius:999px; border:1px solid rgba(124,92,255,.35); background:rgba(124,92,255,.08) }
.hero-art{
  position: relative; height: 360px; border-radius: var(--radius);
  background: radial-gradient(120px 120px at 25% 30%, rgba(124,92,255,.6), rgba(124,92,255,0) 60%),
              radial-gradient(160px 160px at 60% 55%, rgba(0,212,255,.6), rgba(0,212,255,0) 60%),
              linear-gradient(180deg, #0f1424, #0b0f1a);
  border: 1px solid rgba(124,92,255,.25);
  box-shadow: var(--shadow);
}
.hero-orbs .orb{
  position:absolute; border-radius: 50%; filter: blur(10px); opacity:.9; mix-blend-mode: screen;
  animation: float 6s ease-in-out infinite;
}
.hero-orbs .o1{ width:140px; height:140px; left:20px; top:30px; background: radial-gradient(#7c5cff, rgba(124,92,255,0) 70%); }
.hero-orbs .o2{ width:120px; height:120px; right:20px; top:80px; background: radial-gradient(#00d4ff, rgba(0,212,255,0) 70%); animation-delay:1.2s; }
.hero-orbs .o3{ width:90px; height:90px; left:40%; bottom:30px; background: radial-gradient(#9effa9, rgba(158,255,169,0) 70%); animation-delay:.6s; }
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-8px) }
}

/* 卡片与网格 */
.grid{ display:grid; gap: 18px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } .grid-3{ grid-template-columns: 1fr 1fr } .grid-4{ grid-template-columns: 1fr 1fr } }
@media (max-width: 640px){ .grid-3, .grid-4{ grid-template-columns: 1fr } }

.card{
  background: linear-gradient(180deg, rgba(124,92,255,.06), rgba(0,0,0,.08)),
              linear-gradient(180deg, #12182a, #0f1424);
  border: 1px solid rgba(124,92,255,.25);
  border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
  position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.45); border-color: rgba(124,92,255,.45) }
.card h3{ margin: 4px 0 8px; font-size:18px; }
.card p{ margin:0; color: var(--muted); font-size:14px; }
.card .tag{
  position:absolute; right:12px; top:12px; font-size:12px; padding:6px 10px; border-radius:999px; color:#cbd5ff;
  background: rgba(0,212,255,.15); border:1px solid rgba(0,212,255,.35);
}

/* 表格（用于产品售价等） */
.table{ width:100%; border-collapse: collapse; font-size:14px; }
.table th, .table td{ padding: 12px 10px; border-bottom:1px solid rgba(124,92,255,.15); }
.table th{ text-align:left; color:#cbd5ff; font-weight:700; }
.table td{ color:#dbe5ff; }
.table .tright{ text-align:right; }

/* 页脚 */
.footer{
  background: linear-gradient(180deg, #0b0f1a, #080b14);
  border-top: 1px solid rgba(124,92,255,.2);
  padding: 28px 0;
  color: var(--muted);
  font-size: 13px;
}
.footer a{ color:#b7c7ff; text-decoration: none; }

/* Reveal 动画 */
.reveal{ opacity:0; transform: translateY(12px); transition: all .5s ease; }
.reveal.in{ opacity:1; transform: none; }

/* 响应式导航 */
@media (max-width: 880px){
  .mobile-toggle{ display:block; background:transparent; border:1px solid rgba(124,92,255,.4); color:#dfe7ff; padding:8px 12px; border-radius:12px; }
  .nav-links{ display:none; position:absolute; top:68px; left:0; right:0; background:#0f1424; border-bottom:1px solid rgba(124,92,255,.2); padding:12px 16px; }
  .nav-links.show{ display:flex; flex-direction:column; }
  .hero{ padding-top: 50px; }
}

/* 轻量徽章列表 */
.kpis{ display:flex; gap:14px; flex-wrap:wrap; }
.kpi{
  background: rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.3);
  padding: 10px 14px; border-radius: 12px; color:#dfe7ff; font-weight:700; font-size:13px;
}

hr.sep{ border:0; height:1px; background: linear-gradient(90deg, rgba(124,92,255,.0), rgba(124,92,255,.35), rgba(124,92,255,.0)); margin: 24px 0; }
.small{ font-size:12px; color:var(--muted); }