/* ===== SUBPAGE SHARED STYLES ===== */
/* Matches homepage design: white/gray bg, modern industrial feel */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;color:#333;background:#f5f7fa;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}

:root{
  --primary:#f5f7fa;
  --primary-light:#eef1f6;
  --accent:#0088ff;
  --accent2:#1a9e9c;
  --accent-glow:rgba(0,136,255,0.3);
  --text:#333;
  --text-muted:#6b7a8f;
  --card-bg:#fff;
  --card-border:#e2e8f0;
  --max-w:1200px;
  --nav-h:70px;
  --radius:12px;
}

/* ===== HEADER (same as homepage) ===== */
header{
  position:fixed;top:0;left:0;width:100%;height:var(--nav-h);
  background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--card-border);
  z-index:1000;display:flex;align-items:center;
  padding:0 24px;transition:background .3s;
}
header.scrolled{background:#fff}
.header-inner{
  max-width:var(--max-w);width:100%;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:10px;height:50px}
.logo img{height:44px;width:auto}
nav{display:flex;align-items:center;gap:32px}
nav a{
  font-size:15px;font-weight:500;color:var(--text-muted);
  position:relative;transition:color .25s;padding:4px 0;
}
nav a::after{
  content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;
  background:var(--accent);transition:width .3s;
}
nav a:hover,nav a.active{color:#1a2980}
nav a:hover::after,nav a.active::after{width:100%}
.phone-link{
  display:flex;align-items:center;gap:6px;
  color:var(--accent2) !important;font-weight:600;
  border:1px solid var(--accent2);border-radius:6px;
  padding:6px 14px;font-size:14px;
}
.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.menu-toggle span{display:block;width:24px;height:2px;background:#333;border-radius:2px;transition:.3s}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== PAGE HERO ===== */
.page-hero{
  margin-top:var(--nav-h);
  padding:80px 24px;
  background:linear-gradient(135deg,#0a1628 0%,#0f1f3a 30%,#132244 60%,#1a2980 100%);
  position:relative;overflow:hidden;
}
/* 科技网格背景 */
.page-hero::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;
  background-image:
    linear-gradient(rgba(0,136,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,136,255,.03) 1px, transparent 1px);
  background-size:40px 40px;
  z-index:0;
}
/* 激光线 - 动效 */
.page-hero::after{
  content:'';position:absolute;top:40%;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,136,255,.4),rgba(38,208,206,.6),rgba(0,136,255,.4),transparent);
  box-shadow:0 0 12px rgba(0,136,255,.3),0 0 30px rgba(38,208,206,.15);
  animation:laserScan 4s ease-in-out infinite;
  z-index:0;
}
@keyframes laserScan{
  0%,100%{top:30%;opacity:.6}
  50%{top:60%;opacity:1}
}
/* 科技光晕 */
.page-hero .tech-glow{
  position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,136,255,.08),transparent 70%);
  z-index:0;pointer-events:none;
}
.page-hero .tech-glow.g1{top:-10%;left:-5%;animation:glowPulse 6s ease-in-out infinite}
.page-hero .tech-glow.g2{bottom:-10%;right:-5%;animation:glowPulse 6s ease-in-out infinite 3s}
@keyframes glowPulse{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.3);opacity:1}
}
/* 科技角标装饰 */
.page-hero .tech-corner{
  position:absolute;width:50px;height:50px;z-index:1;
}
.page-hero .tech-corner.tc1{top:20px;left:20px;border-top:2px solid rgba(0,136,255,.3);border-left:2px solid rgba(0,136,255,.3)}
.page-hero .tech-corner.tc2{top:20px;right:20px;border-top:2px solid rgba(0,136,255,.3);border-right:2px solid rgba(0,136,255,.3)}
.page-hero .tech-corner.tc3{bottom:20px;left:20px;border-bottom:2px solid rgba(0,136,255,.3);border-left:2px solid rgba(0,136,255,.3)}
.page-hero .tech-corner.tc4{bottom:20px;right:20px;border-bottom:2px solid rgba(0,136,255,.3);border-right:2px solid rgba(0,136,255,.3)}
/* 科技圆点 */
.page-hero .tech-dot{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--accent2);z-index:0;opacity:.5;
  box-shadow:0 0 6px var(--accent2);
}
.page-hero .tech-dot.d1{top:15%;left:20%;animation:dotFloat 5s ease-in-out infinite}
.page-hero .tech-dot.d2{top:70%;left:80%;animation:dotFloat 5s ease-in-out infinite 2s}
.page-hero .tech-dot.d3{top:25%;left:75%;animation:dotFloat 5s ease-in-out infinite 4s}
.page-hero .tech-dot.d4{top:80%;left:15%;animation:dotFloat 5s ease-in-out infinite 1s}
@keyframes dotFloat{
  0%,100%{transform:translateY(0);opacity:.3}
  50%{transform:translateY(-15px);opacity:.8}
}
.page-hero-inner{max-width:var(--max-w);margin:0 auto;position:relative;z-index:2}
.page-hero h1{
  font-size:clamp(28px,4vw,44px);font-weight:800;color:#fff;
  margin-bottom:12px;letter-spacing:1px;
}
.page-hero p,.page-hero .hero-desc{
  font-size:clamp(15px,1.5vw,18px);color:rgba(255,255,255,.9);
  max-width:680px;line-height:1.7;
}

/* ===== SECTIONS ===== */
.page-section{padding:64px 24px}
.page-section.gray{background:var(--primary)}
.page-section.white{background:#fff}
.section-inner{max-width:var(--max-w);margin:0 auto}
.section-title{
  font-size:28px;font-weight:700;color:#1a2980;
  margin-bottom:8px;text-align:center;letter-spacing:.5px;
}
.section-subtitle{
  text-align:center;font-size:15px;color:var(--text-muted);
  margin-bottom:36px;
}
.divider{
  width:50px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));
  margin:0 auto 36px;border-radius:2px;
}

/* ===== SOLUTION ITEMS ===== */
.solution-list{display:flex;flex-direction:column;gap:0}
.solution-item{
  display:flex;gap:20px;padding:24px 0;
  border-bottom:1px solid var(--card-border);
}
.solution-item:last-child{border-bottom:none}
.solution-num{
  flex-shrink:0;width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:20px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.solution-body{flex:1}
.solution-body h3{font-size:18px;color:#1a2980;margin-bottom:6px}
.solution-body p{font-size:15px;color:var(--text-muted);line-height:1.7}

/* ===== VALUE GRID ===== */
.value-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;
}
.value-card{
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:28px 20px;text-align:center;transition:all .3s;
}
.value-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 24px rgba(0,136,255,.1)}
.value-card .icon{font-size:32px;margin-bottom:10px}
.value-card h3{font-size:17px;color:#1a2980;margin-bottom:6px}
.value-card p{font-size:14px;color:var(--text-muted)}

/* ===== SCENE IMAGE ===== */
.scene-img{
  width:100%;margin:24px auto;border-radius:var(--radius);
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}

/* ===== FOOTER ===== */
footer{
  background:#eef1f6;border-top:1px solid var(--card-border);
  padding:48px 24px 24px;
}
.footer-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.footer-info h3{font-size:18px;color:#1a2980;margin-bottom:16px;position:relative;padding-bottom:8px}
.footer-info h3::after{content:'';position:absolute;bottom:0;left:0;width:40px;height:2px;background:var(--accent)}
.footer-info p{font-size:14px;color:var(--text-muted);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.footer-info p i{width:16px;color:var(--accent)}
.footer-qr{text-align:center}
.footer-qr .qr-box{display:inline-block;background:#fff;padding:8px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.footer-qr img{width:120px;height:120px}
.footer-bottom{text-align:center;margin-top:32px;padding-top:16px;border-top:1px solid var(--card-border)}
.footer-bottom p{font-size:13px;color:var(--text-muted)}

/* ===== BACK TO TOP ===== */
.back-top{
  position:fixed;bottom:30px;right:30px;width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;font-size:20px;cursor:pointer;
  z-index:999;opacity:0;transform:translateY(20px);transition:all .3s;
  box-shadow:0 4px 16px var(--accent-glow);
}
.back-top.show{opacity:1;transform:translateY(0)}
.back-top:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--accent-glow)}

/* ===== PRODUCT NAV BAR ===== */
.product-nav{
  background:#fff;border-bottom:1px solid var(--card-border);
  padding:0 24px;position:sticky;top:var(--nav-h);z-index:100;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.product-nav-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;gap:0;white-space:nowrap;
}
.product-nav a{
  display:inline-block;padding:12px 16px;font-size:14px;
  color:var(--text-muted);transition:all .2s;border-bottom:2px solid transparent;
}
.product-nav a:hover,.product-nav a.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  nav{position:fixed;top:var(--nav-h);left:0;width:100%;flex-direction:column;
    background:rgba(255,255,255,.98);padding:24px;gap:16px;
    transform:translateY(-100%);opacity:0;transition:.35s;pointer-events:none;
  }
  nav.open{transform:translateY(0);opacity:1;pointer-events:all}
  .menu-toggle{display:flex}
  .phone-link{margin-top:8px}
  .page-hero{padding:60px 20px}
  .section-inner{padding:0}
  .solution-item{flex-direction:column}
  .solution-num{width:36px;height:36px;font-size:16px}
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .footer-info h3::after{left:50%;transform:translateX(-50%)}
  .footer-info p{justify-content:center}
  .product-nav{display:none}
}