/* ============================================
   GuanTech 官网样式系统
   主色: #00d9ff (cyan) / #7c3aed (purple) / #0a0e1a (deep)
   ============================================ */
:root{
  --bg-0:#070b14;
  --bg-1:#0a0e1a;
  --bg-2:#0f1428;
  --bg-3:#141a30;
  --line:rgba(0,217,255,.12);
  --line-2:rgba(124,58,237,.18);
  --txt:#dbe5f5;
  --txt-dim:#8a94ad;
  --txt-soft:#aab3c8;
  --c1:#00d9ff;
  --c2:#7c3aed;
  --c3:#22d3ee;
  --c4:#f472b6;
  --grad: linear-gradient(135deg,#00d9ff 0%,#7c3aed 100%);
  --grad-2: linear-gradient(135deg,#22d3ee 0%,#3b82f6 50%,#7c3aed 100%);
  --grad-soft: linear-gradient(135deg,rgba(0,217,255,.12),rgba(124,58,237,.12));
  --shadow-glow: 0 0 0 1px rgba(0,217,255,.18), 0 8px 30px rgba(0,217,255,.18);
  --radius:14px;
  --radius-sm:10px;
  --max:1240px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg-1); color:var(--txt); }
html{ scroll-behavior:smooth; }
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,217,255,.08), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(124,58,237,.10), transparent 55%),
    var(--bg-1);
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--txt); text-decoration:none; transition:color .2s; }
a:hover{ color:var(--c1); }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul{ list-style:none; }
input,textarea,select{ font-family:inherit; font-size:inherit; color:inherit; }

.container{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* 全局粒子背景 */
#bg-particles{
  position:fixed; inset:0; z-index:-2;
  width:100%; height:100%;
  pointer-events:none;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,217,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,217,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
}

/* ============== 通用组件 ============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:12px 26px; border-radius:999px;
  font-weight:600; font-size:14px; letter-spacing:.05em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn-primary{
  background:var(--grad); color:#04111d;
  box-shadow:0 8px 30px rgba(0,217,255,.35);
}
.btn-primary:hover{ transform:translateY(-2px); color:#04111d;
  box-shadow:0 12px 40px rgba(0,217,255,.55);}
.btn-ghost{
  border:1px solid rgba(0,217,255,.4);
  color:var(--c1);
  background:rgba(0,217,255,.06);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(0,217,255,.14); color:#fff; }
.btn-lg{ padding:16px 34px; font-size:15px; }

.tag{
  display:inline-flex; align-items:center; gap:.4em;
  padding:6px 14px; border-radius:999px;
  font-size:12px; letter-spacing:.12em;
  background:rgba(0,217,255,.08);
  border:1px solid var(--line);
  color:var(--c1);
  text-transform:uppercase;
}
.tag::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--c1); box-shadow:0 0 8px var(--c1);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{ 50%{ opacity:.4; transform:scale(.85);} }

.grad-text{
  background:var(--grad-2);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.section{ padding:110px 0; position:relative; }
.section-title{ text-align:center; margin-bottom:60px; }
.section-title .tag{ margin-bottom:18px; }
.section-title h2{
  font-size:42px; font-weight:800; letter-spacing:-.02em;
  line-height:1.2;
}
.section-title p{
  margin-top:14px; color:var(--txt-dim); font-size:16px;
  max-width:680px; margin-left:auto; margin-right:auto;
}

/* ============== 头部导航 ============== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:14px 0;
  background:rgba(10,14,26,.55);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition: padding .3s var(--ease), background .3s, border-color .3s;
}
.site-header.scrolled{
  padding:8px 0;
  background:rgba(7,11,20,.85);
  border-color:var(--line);
}
.nav-wrap{ display:flex; align-items:center; gap:32px; min-width:0; }
.brand{
  display:flex; align-items:center; gap:12px;
  min-width:0; flex:1 1 auto;
}
.brand-text{ min-width:0; }
.brand-logo{ display:inline-flex; flex-shrink:0; filter:drop-shadow(0 0 8px rgba(0,217,255,.5)); }
.brand-text strong{ display:block; font-size:18px; font-weight:800; letter-spacing:.04em; color:#fff;}
.brand-text em{ font-style:normal; font-size:11px; letter-spacing:.32em; color:var(--c1);}

.main-nav{ display:flex; gap:6px; margin-left:auto; }
.main-nav a{
  position:relative; padding:10px 16px; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--txt-soft);
  transition:color .2s, background .2s;
}
.main-nav a:hover{ color:#fff; background:rgba(0,217,255,.06); }
.main-nav a.active{ color:#fff; }
.main-nav a.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px;
  height:2px; background:var(--grad); border-radius:2px;
  box-shadow:0 0 10px var(--c1);
}
.nav-cta{ padding:9px 20px; font-size:13px; }

.nav-toggle{
  display:none; position:relative; z-index:120;
  flex-shrink:0;
  width:44px; height:44px;
  flex-direction:column; gap:5px;
  align-items:center; justify-content:center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.nav-toggle span{
  width:22px; height:2px; background:var(--c1); border-radius:2px;
  transition:transform .3s, opacity .2s;
  transform-origin:center;
}
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){ opacity:0;}
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg);}

/* 菜单遮罩 */
.nav-mask{
  position:fixed; inset:0; z-index:90;
  background:rgba(0,0,0,.5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s, visibility .3s;
}
.nav-mask.show{ opacity:1; visibility:visible; pointer-events:auto;}

/* ============== Hero ============== */
.hero{
  position:relative; padding:170px 0 130px;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(800px 400px at 80% 20%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(600px 400px at 10% 80%, rgba(0,217,255,.18), transparent 60%);
}
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr 1fr; gap:60px; align-items:center; }
.hero-title{
  font-size:64px; line-height:1.08; font-weight:900;
  letter-spacing:-.03em; margin:18px 0 24px;
}
.hero-title .grad-text{ display:block; }
.hero-sub{
  color:var(--txt-soft); font-size:18px; max-width:560px;
  margin-bottom:36px;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:60px; padding-top:36px; border-top:1px solid var(--line);
  max-width:560px;
}
.hero-stats .num{
  font-size:34px; font-weight:800; letter-spacing:-.02em;
  background:var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-stats .lbl{ color:var(--txt-dim); font-size:13px; margin-top:4px; }

/* hero 视觉：旋转环 + 代码框 */
.hero-visual{
  position:relative; aspect-ratio:1/1; max-width:520px; margin-left:auto;
}
.orbit{
  position:absolute; inset:0; border-radius:50%;
  border:1px dashed rgba(0,217,255,.3);
  animation: spin 30s linear infinite;
}
.orbit::before, .orbit::after{
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  background:var(--c1); box-shadow:0 0 14px var(--c1);
  top:-7px; left:50%; transform:translateX(-50%);
}
.orbit::after{ background:var(--c2); box-shadow:0 0 14px var(--c2); top:auto; bottom:-7px; }
.orbit-2{ inset:8%; animation-duration:22s; animation-direction:reverse; border-color:rgba(124,58,237,.3); }
.orbit-3{ inset:18%; animation-duration:18s; border-color:rgba(244,114,182,.25);}
.hero-core{
  position:absolute; inset:28%; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(0,217,255,.4), rgba(124,58,237,.2) 50%, transparent 80%);
  filter:blur(2px);
}
.hero-core::after{
  content:""; position:absolute; inset:20%; border-radius:50%;
  background:var(--grad);
  filter:blur(30px); opacity:.7;
  animation:breath 3s ease-in-out infinite;
}
@keyframes breath{ 50%{ opacity:.4; transform:scale(.92);} }
@keyframes spin{ to{ transform:rotate(360deg);} }

.code-card{
  position:absolute; right:-40px; bottom:8%; width:300px;
  padding:18px; border-radius:14px;
  background:rgba(15,20,40,.85); backdrop-filter:blur(10px);
  border:1px solid var(--line);
  font-family:"JetBrains Mono",Consolas,Menlo,monospace; font-size:12.5px; line-height:1.7;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.code-card .dots{ display:flex; gap:6px; margin-bottom:12px;}
.code-card .dots span{ width:10px; height:10px; border-radius:50%; background:#ff5f56;}
.code-card .dots span:nth-child(2){background:#ffbd2e;}
.code-card .dots span:nth-child(3){background:#27c93f;}
.code-card .kw{ color:#7c3aed; }
.code-card .str{ color:#22d3ee; }
.code-card .fn{ color:#f472b6; }
.code-card .cm{ color:var(--txt-dim);}

.float-card{
  position:absolute; left:-30px; top:10%;
  padding:14px 18px; border-radius:12px;
  background:rgba(15,20,40,.85); backdrop-filter:blur(10px);
  border:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
  animation:float 4s ease-in-out infinite;
}
.float-card .ico{
  width:36px; height:36px; border-radius:8px; background:var(--grad);
  display:flex; align-items:center; justify-content:center; color:#04111d; font-weight:800;
}
.float-card .lbl{ font-size:12px; color:var(--txt-dim);}
.float-card .val{ font-size:15px; font-weight:700; color:#fff; }
@keyframes float{ 50%{ transform:translateY(-12px);} }

/* ============== 服务卡片 ============== */
.grid-services{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.svc-card{
  position:relative; padding:32px 28px; border-radius:18px;
  background:linear-gradient(160deg, rgba(15,20,40,.7), rgba(10,14,26,.7));
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .3s, box-shadow .3s;
}
.svc-card::before{
  content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px;
  background:linear-gradient(135deg, transparent, var(--c1), var(--c2), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s;
}
.svc-card:hover{ transform:translateY(-6px); border-color:transparent;}
.svc-card:hover::before{ opacity:1; }
.svc-icon{
  width:54px; height:54px; border-radius:14px;
  background:rgba(0,217,255,.08);
  border:1px solid rgba(0,217,255,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--c1); margin-bottom:20px;
  transition:transform .3s var(--ease);
}
.svc-card:hover .svc-icon{ transform:rotate(-8deg) scale(1.05); }
.svc-card h3{ font-size:20px; font-weight:700; margin-bottom:6px; }
.svc-card .sub{ color:var(--c1); font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px;}
.svc-card p{ color:var(--txt-soft); font-size:14px; }
.svc-card .more{ display:inline-flex; align-items:center; gap:6px; margin-top:20px; color:var(--c1); font-size:13px; font-weight:600;}
.svc-card .more::after{ content:"→"; transition:transform .25s;}
.svc-card:hover .more::after{ transform:translateX(4px);}

/* ============== 通用卡片 / 数据 ============== */
.feature-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:30px;
}
.feature-item{
  padding:28px 22px; border-radius:14px; text-align:center;
  background:rgba(15,20,40,.6); border:1px solid var(--line);
}
.feature-item .num{
  font-size:38px; font-weight:800; letter-spacing:-.02em;
  background:var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.feature-item .lbl{ color:var(--txt-dim); font-size:13px; margin-top:6px;}

/* ============== 流程 ============== */
.process{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px; counter-reset:step;
}
.process-step{
  position:relative; padding:24px 18px; border-radius:14px;
  background:rgba(15,20,40,.6); border:1px solid var(--line);
  text-align:center; counter-increment:step;
}
.process-step::before{
  content: counter(step,decimal-leading-zero);
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%;
  background:var(--grad); color:#04111d; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,217,255,.4);
}
.process-step h4{ margin-top:18px; font-size:15px; }
.process-step p{ color:var(--txt-dim); font-size:13px; margin-top:6px;}

/* ============== 案例 ============== */
.grid-cases{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.case-card{
  border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg, rgba(15,20,40,.8), rgba(10,14,26,.7));
  border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .3s, border-color .3s;
}
.case-card:hover{ transform:translateY(-6px); border-color:rgba(0,217,255,.35); box-shadow:var(--shadow-glow);}
.case-thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--grad-soft);
  display:flex; align-items:center; justify-content:center;
}
.case-thumb svg{ width:64%; opacity:.85; }
.case-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 50%, rgba(7,11,20,.85));
}
.case-cat{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:5px 12px; border-radius:999px; font-size:11px;
  background:rgba(0,217,255,.18); color:var(--c1);
  border:1px solid rgba(0,217,255,.3);
  letter-spacing:.08em;
}
.case-body{ padding:22px 24px; }
.case-body h3{ font-size:17px; font-weight:700; margin-bottom:8px; }
.case-body p{ color:var(--txt-soft); font-size:13.5px; min-height:42px; }
.case-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); font-size:12px; color:var(--txt-dim);}
.case-meta strong{ color:var(--c1); font-weight:600;}

/* ============== 新闻 ============== */
.grid-news{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px;}
.news-card{
  display:block; padding:24px; border-radius:16px;
  background:rgba(15,20,40,.6); border:1px solid var(--line);
  transition:.3s;
}
.news-card:hover{ background:rgba(0,217,255,.05); border-color:rgba(0,217,255,.3); transform:translateY(-3px);}
.news-card .date{ color:var(--c1); font-size:12px; letter-spacing:.12em;}
.news-card h3{ font-size:18px; margin:10px 0; line-height:1.45;}
.news-card p{ color:var(--txt-soft); font-size:13.5px; }

/* ============== 团队 ============== */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.team-card{
  padding:32px 22px; border-radius:18px; text-align:center;
  background:rgba(15,20,40,.6); border:1px solid var(--line); transition:.3s;
}
.team-card:hover{ transform:translateY(-4px); border-color:rgba(0,217,255,.3);}
.team-avatar{
  width:90px; height:90px; border-radius:50%; margin:0 auto 18px;
  background:var(--grad); padding:3px;
}
.team-avatar > div{
  width:100%; height:100%; border-radius:50%;
  background:linear-gradient(135deg,#1a233b,#0a0e1a);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800;
}
.team-card h4{ font-size:18px; margin-bottom:4px;}
.team-card .pos{ color:var(--c1); font-size:12px; letter-spacing:.12em; margin-bottom:12px;}
.team-card p{ color:var(--txt-dim); font-size:13px; }

/* ============== 合作伙伴 ============== */
.partners{
  display:grid; grid-template-columns:repeat(8,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.partner{
  padding:30px 14px; background:var(--bg-2); text-align:center;
  color:var(--txt-soft); font-weight:600; letter-spacing:.05em; font-size:14px;
  transition:.3s;
}
.partner:hover{ background:rgba(0,217,255,.06); color:var(--c1);}

/* ============== 内页 banner ============== */
.page-banner{
  position:relative; padding:170px 0 80px; text-align:center; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-banner::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 400px at 50% 0%, rgba(0,217,255,.18), transparent 60%),
    radial-gradient(500px 350px at 50% 100%, rgba(124,58,237,.15), transparent 60%);
}
.page-banner h1{
  position:relative; font-size:48px; font-weight:800; letter-spacing:-.02em;
}
.page-banner p{
  position:relative; margin-top:14px; color:var(--txt-soft); font-size:16px;
  max-width:720px; margin-left:auto; margin-right:auto;
}
.breadcrumb{
  position:relative; margin-top:22px; color:var(--txt-dim); font-size:13px;
}
.breadcrumb a{ color:var(--txt-soft);}
.breadcrumb a:hover{ color:var(--c1);}

/* ============== 留言表单 ============== */
.contact-grid{
  display:grid; grid-template-columns:1fr 1.3fr; gap:40px;
  align-items:start;
}
.contact-info{
  padding:36px; border-radius:18px;
  background:linear-gradient(160deg, rgba(0,217,255,.08), rgba(124,58,237,.08));
  border:1px solid var(--line);
}
.contact-info h3{ font-size:24px; margin-bottom:8px;}
.contact-info > p{ color:var(--txt-soft); margin-bottom:30px;}
.info-row{ display:flex; gap:14px; padding:16px 0; border-bottom:1px dashed var(--line);}
.info-row:last-child{ border-bottom:0;}
.info-row .ico{
  flex:none; width:42px; height:42px; border-radius:12px; background:var(--grad);
  display:flex; align-items:center; justify-content:center; color:#04111d;
}
.info-row .lbl{ color:var(--txt-dim); font-size:12px; letter-spacing:.1em;}
.info-row .val{ color:#fff; font-weight:600; margin-top:4px;}

.contact-form{
  padding:36px; border-radius:18px;
  background:rgba(15,20,40,.7); border:1px solid var(--line);
}
.contact-qr{
  display:flex; gap:16px; align-items:center;
  margin-top:24px; padding:16px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
}
.contact-qr .qr-img{
  flex:none; width:120px; height:120px; padding:6px;
  border-radius:10px; background:#fff;
}
.contact-qr-info{ display:flex; flex-direction:column; gap:6px; min-width:0;}
.contact-qr-info strong{ color:#fff; font-size:15px;}
.contact-qr-info span{ color:var(--txt-soft); font-size:13px; line-height:1.55;}
.contact-qr-info em{ font-style:normal; color:var(--c1); font-size:12.5px; font-weight:600;}

/* 页脚二维码 */
.footer-qr{ display:flex; align-items:center; gap:12px; margin-top:18px;}
.footer-qr-img{
  flex:none; width:88px; height:88px; padding:5px;
  border-radius:8px; background:#fff;
}
.footer-qr-img img, .footer-qr-img svg{ width:100%; height:100%; display:block;}
.footer-qr span{ color:var(--c1); font-size:12.5px; letter-spacing:.04em;}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-group{ margin-bottom:16px; position:relative;}
.form-group label{
  display:block; font-size:12px; color:var(--txt-dim); margin-bottom:6px; letter-spacing:.08em;
}
.form-group input,
.form-group textarea,
.form-group select{
  width:100%; padding:13px 16px; border-radius:10px;
  background:rgba(7,11,20,.6); border:1px solid var(--line); color:#fff;
  transition:.2s; font-size:14px;
}
.form-group textarea{ min-height:130px; resize:vertical; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  outline:0; border-color:var(--c1); background:rgba(0,217,255,.05);
  box-shadow:0 0 0 3px rgba(0,217,255,.15);
}
.form-msg{ padding:12px 14px; border-radius:10px; margin-bottom:16px; font-size:14px; display:none;}
.form-msg.ok{ display:block; background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.4); color:#22d3ee;}
.form-msg.err{ display:block; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.4); color:#fca5a5;}

/* ============== 时间线（关于） ============== */
.timeline{ position:relative; padding-left:40px;}
.timeline::before{
  content:""; position:absolute; left:14px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--c1), var(--c2));
}
.timeline-item{ position:relative; margin-bottom:36px;}
.timeline-item::before{
  content:""; position:absolute; left:-33px; top:6px;
  width:14px; height:14px; border-radius:50%;
  background:var(--c1); box-shadow:0 0 0 4px rgba(0,217,255,.18), 0 0 12px var(--c1);
}
.timeline-item .yr{ color:var(--c1); font-weight:700; font-size:18px; letter-spacing:.05em;}
.timeline-item h4{ font-size:17px; margin:6px 0;}
.timeline-item p{ color:var(--txt-soft); font-size:14px;}

/* ============== Footer ============== */
.site-footer{
  margin-top:80px; padding:80px 0 0;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(7,11,20,.8));
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;
  padding-bottom:50px;
}
.footer-about .footer-desc{ color:var(--txt-dim); font-size:13.5px; margin-top:18px; max-width:340px;}
.footer-col h4{ color:#fff; font-size:15px; margin-bottom:18px;}
.footer-col ul li{ margin-bottom:10px;}
.footer-col ul li a{ color:var(--txt-soft); font-size:13.5px;}
.footer-col ul li a:hover{ color:var(--c1);}
.contact-list li{ display:flex; align-items:center; gap:8px; color:var(--txt-soft); font-size:13.5px;}
.contact-list .ico{ color:var(--c1); }
.footer-bottom{
  border-top:1px solid var(--line); padding:22px 0;
}
.footer-bottom .container{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color:var(--txt-dim); font-size:13px;
}

/* ============== 浮动联系组件 ============== */
.floating-contact{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:80; display:flex; flex-direction:column; gap:8px;
}
.fc-item{
  position:relative;
  width:54px; min-height:54px; padding:8px 4px;
  border-radius:14px; cursor:pointer;
  background:rgba(15,20,40,.85); backdrop-filter:blur(12px);
  border:1px solid var(--line); color:var(--c1);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:inherit; transition:transform .2s var(--ease), background .2s, border-color .2s;
  text-decoration:none;
}
.fc-item .lbl{ font-size:11px; color:var(--txt-soft); letter-spacing:.04em;}
.fc-item:hover{
  background:rgba(0,217,255,.12); border-color:rgba(0,217,255,.4);
  transform:translateX(-3px);
}
.fc-item:hover .lbl{ color:#fff;}
.fc-top{ opacity:0; transform:translateX(20px); pointer-events:none;}
.fc-top.show{ opacity:1; transform:none; pointer-events:auto;}
.fc-wechat{ color:#22d3ee;}
.fc-wechat::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(34,211,238,.18), transparent 70%);
}

/* 弹出层（桌面端 hover 显示） */
.fc-popup{
  position:absolute; right:calc(100% + 14px); top:50%; transform:translateY(-50%) translateX(8px);
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.fc-item:hover .fc-popup{ opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0);}
.fc-popup::after{
  content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:12px; height:12px;
  background:#fff; border-right:1px solid #e5e7eb; border-top:1px solid #e5e7eb;
}
.qr-card{
  display:flex; gap:14px; align-items:center;
  padding:14px; border-radius:14px;
  background:#fff; color:#0a0e1a;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  width:300px;
}
.qr-img{
  flex:none; width:130px; height:130px; padding:6px;
  border-radius:10px; background:#fff; border:1px solid #e5e7eb;
}
.qr-img img, .qr-img svg{ width:100%; height:100%; display:block;}
.qr-meta{ display:flex; flex-direction:column; gap:4px; min-width:0;}
.qr-meta strong{ font-size:15px; color:#0a0e1a;}
.qr-meta span{ font-size:12.5px; color:#525a6b; line-height:1.55;}
.qr-meta em{ font-style:normal; font-size:12px; color:var(--c2); font-weight:600;}

.fc-popup-text .qr-card{ width:240px;}
.fc-popup-text .qr-img{ display:none;}

/* ============== 移动端底部联系栏 ============== */
.mobile-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(7,11,20,.95); backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  grid-template-columns:1fr 1fr 1.4fr; gap:8px;
}
.mb-item{
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:46px; border-radius:10px;
  background:rgba(0,217,255,.08); border:1px solid var(--line);
  color:var(--c1); font-size:13px; font-weight:600;
  cursor:pointer; font-family:inherit;
  text-decoration:none; transition:.2s;
}
.mb-item:active{ transform:scale(.97); background:rgba(0,217,255,.14);}
.mb-cta{
  background:var(--grad); border:0; color:#04111d;
  box-shadow:0 6px 18px rgba(0,217,255,.3);
}
.mb-cta:active{ color:#04111d;}

/* ============== 二维码弹窗（移动端用） ============== */
.qr-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .25s, visibility .25s;
}
.qr-modal.open{ visibility:visible; opacity:1; pointer-events:auto;}
.qr-modal-mask{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);}
.qr-modal-box{
  position:relative; z-index:1;
  width:300px; max-width:88vw;
  padding:28px 22px; border-radius:18px;
  background:#fff; color:#0a0e1a; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:scale(.92); transition:transform .25s var(--ease);
}
.qr-modal.open .qr-modal-box{ transform:scale(1);}
.qr-modal-box .qr-img{ width:200px; height:200px; margin:0 auto 16px;}
.qr-modal-box .qr-meta{ align-items:center;}
.qr-modal-box .qr-meta strong{ font-size:16px;}
.qr-modal-close{
  position:absolute; top:8px; right:10px;
  width:34px; height:34px; border-radius:50%;
  background:transparent; border:0; cursor:pointer;
  font-size:24px; color:#aab3c8; line-height:1;
}
.qr-modal-close:hover{ color:#0a0e1a;}
.qr-tip{ margin-top:14px; padding:8px 14px; border-radius:8px;
  background:#f5f7fb; color:#525a6b; font-size:12px;}

/* ============== 滚动出现动画（仅在 JS 启用时隐藏） ============== */
.js .reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal.in{ opacity:1; transform:none;}
.js .reveal[data-delay="1"]{ transition-delay:.08s;}
.js .reveal[data-delay="2"]{ transition-delay:.16s;}
.js .reveal[data-delay="3"]{ transition-delay:.24s;}
.js .reveal[data-delay="4"]{ transition-delay:.32s;}
.js .reveal[data-delay="5"]{ transition-delay:.4s;}
.js .reveal[data-delay="6"]{ transition-delay:.48s;}

/* ============== 列表（新闻/案例） ============== */
.list-news{ display:grid; gap:18px;}
.list-news .item{
  display:grid; grid-template-columns:140px 1fr auto; gap:24px; align-items:center;
  padding:24px 28px; border-radius:14px;
  background:rgba(15,20,40,.6); border:1px solid var(--line); transition:.3s;
}
.list-news .item:hover{ border-color:rgba(0,217,255,.35); transform:translateX(4px);}
.list-news .date{
  color:var(--c1); font-family:"JetBrains Mono",monospace; font-size:14px;
  border-right:1px solid var(--line); padding-right:24px;
}
.list-news h3{ font-size:18px; margin-bottom:6px;}
.list-news p{ color:var(--txt-soft); font-size:13.5px;}
.list-news .arrow{ color:var(--c1); font-size:22px;}

/* ============== 响应式 ============== */

/* 平板：≤ 1080px */
@media (max-width: 1080px){
  :root{ --max:960px; }
  .hero-title{ font-size:50px;}
  .hero-sub{ font-size:16px;}
  .grid-services, .grid-cases{ grid-template-columns:repeat(2,1fr);}
  .feature-grid{ grid-template-columns:repeat(2,1fr);}
  .process{ grid-template-columns:repeat(3,1fr);}
  .partners{ grid-template-columns:repeat(4,1fr);}
  .team-grid{ grid-template-columns:repeat(2,1fr);}
  .footer-grid{ grid-template-columns:1fr 1fr;}
  .grid-news{ grid-template-columns:1fr 1fr;}
  .grid-news .news-card:first-child{ grid-column:1/-1;}
}

/* 手机：≤ 760px */
@media (max-width: 760px){
  body{ font-size:14.5px;}
  .container{ padding:0 18px;}
  .section{ padding:60px 0;}
  .section-title{ margin-bottom:36px;}
  .section-title h2{ font-size:26px;}
  .section-title p{ font-size:14px; padding:0 8px;}
  .section-title .tag{ font-size:11px; padding:5px 12px;}

  /* 头部 */
  .site-header{ padding:10px 0;}
  .site-header.scrolled{ padding:6px 0;}
  .nav-wrap{ gap:10px; }
  .brand{ flex:1 1 auto; min-width:0; overflow:hidden; }
  .brand-text{ flex:1 1 auto; min-width:0; }
  .brand-text strong{
    font-size:16px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100%;
  }
  .brand-text em{
    font-size:9.5px; letter-spacing:.24em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100%;
    display:block;
  }
  .main-nav{
    position:fixed; top:56px; right:0; bottom:0; width:78%; max-width:320px;
    z-index:110;
    flex-direction:column; gap:0; padding:18px;
    background:rgba(7,11,20,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .3s var(--ease);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    pointer-events:none;
  }
  .main-nav.open{ transform:none; pointer-events:auto;}
  .main-nav a{
    width:100%; padding:14px 16px; font-size:15px; border-radius:10px;
    min-height:48px; display:flex; align-items:center;
  }
  .main-nav a.active::after{ display:none;}
  .main-nav a.active{ background:rgba(0,217,255,.08); }
  .nav-cta{ display:none;}
  .nav-toggle{ display:flex; margin-left:auto;}

  /* Hero */
  .hero{ padding:110px 0 60px;}
  .hero-inner{ grid-template-columns:1fr; gap:30px;}
  .hero-text{ text-align:center;}
  .hero-title{ font-size:34px; line-height:1.15;}
  .hero-sub{ font-size:14.5px; margin:0 auto 24px;}
  .hero-cta{ justify-content:center;}
  .hero-cta .btn{ flex:1; min-width:0;}
  .hero-stats{ margin:36px auto 0; padding-top:24px; gap:6px; max-width:100%;}
  .hero-stats .num{ font-size:22px;}
  .hero-stats .lbl{ font-size:11.5px;}
  .hero-visual{ max-width:280px; margin:0 auto;}
  .float-card, .code-card{ display:none;}

  /* 按钮触控区 ≥ 44px */
  .btn{ padding:12px 22px; min-height:44px;}
  .btn-lg{ padding:14px 24px; font-size:14px;}

  /* 网格 */
  .grid-services, .grid-cases, .grid-news,
  .feature-grid, .team-grid{ grid-template-columns:1fr; gap:14px;}
  .process{ grid-template-columns:repeat(2,1fr); gap:18px 10px;}
  .partners{ grid-template-columns:repeat(3,1fr);}
  .partner{ padding:22px 8px; font-size:12.5px;}
  .feature-item{ padding:22px 16px;}
  .feature-item .num{ font-size:30px;}

  /* 卡片 */
  .svc-card{ padding:24px 22px;}
  .svc-card h3{ font-size:18px;}
  .case-body{ padding:18px 20px;}
  .case-body h3{ font-size:16px;}
  .case-meta{ flex-direction:column; align-items:flex-start; gap:4px;}

  /* 服务页技术栈 */
  .reveal[style*="grid-template-columns:repeat(6,1fr)"]{ grid-template-columns:1fr 1fr !important; }

  /* 内页 banner */
  .page-banner{ padding:100px 0 50px;}
  .page-banner h1{ font-size:26px; line-height:1.25; padding:0 12px;}
  .page-banner p{ font-size:13.5px; padding:0 12px;}

  /* 表单 */
  .form-row{ grid-template-columns:1fr;}
  .contact-grid{ grid-template-columns:1fr; gap:24px;}
  .contact-info, .contact-form{ padding:24px 20px;}
  .contact-info h3, .contact-form h3{ font-size:20px;}
  .form-group input,
  .form-group textarea,
  .form-group select{ padding:14px 14px; font-size:15px; }
  .contact-qr{ flex-direction:column; text-align:center;}
  .contact-qr-info{ align-items:center;}

  /* 新闻列表 */
  .list-news .item{ grid-template-columns:1fr; gap:10px; padding:18px 20px;}
  .list-news .date{ border-right:0; padding-right:0; padding-bottom:8px; border-bottom:1px dashed var(--line);}
  .list-news .arrow{ display:none;}
  .list-news h3{ font-size:16px;}

  /* 时间线 */
  .timeline{ padding-left:30px;}
  .timeline-item .yr{ font-size:16px;}
  .timeline-item h4{ font-size:15px;}

  /* footer */
  .site-footer{ padding-top:60px; padding-bottom:74px;} /* 给底部联系栏留位置 */
  .footer-grid{ grid-template-columns:1fr; gap:30px;}
  .footer-col h4{ font-size:14px;}
  .footer-bottom .container{ flex-direction:column; align-items:flex-start; font-size:12px;}
  .back-top{ display:none;}

  /* 浮动联系组件：桌面版隐藏，启用移动栏 */
  .floating-contact{ display:none;}
  .mobile-bar{ display:grid;}

  /* CTA 大块 */
  .reveal[style*="padding:60px 50px"]{ padding:36px 22px !important;}
  .reveal[style*="padding:60px 50px"] h2{ font-size:24px !important;}
}

/* 小屏：≤ 380px */
@media (max-width: 380px){
  .hero-title{ font-size:28px;}
  .section-title h2{ font-size:22px;}
  .hero-stats .num{ font-size:20px;}
  .hero-cta{ flex-direction:column;}
  .hero-cta .btn{ width:100%;}
  .partners{ grid-template-columns:repeat(2,1fr);}
  .mb-item span{ display:none;} /* 极窄屏只留图标 */
  .mb-item{ gap:0;}
  .mobile-bar{ grid-template-columns:1fr 1fr 1fr;}
}

/* 横屏 + 矮屏（避免 Hero 太高） */
@media (max-height: 640px) and (orientation: landscape){
  .hero{ padding:90px 0 50px;}
  .hero-stats{ margin-top:24px; padding-top:16px;}
}