/* =========================
   承亿机电官网样式表（水务蓝主题）
   ========================= */

:root {
  --primary: #1565c0;
  --primary-2: #1e88e5;
  --primary-dark: #0d47a1;
  --primary-light: #e3f2fd;
  --primary-gradient: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
  --dark: #0a2540;
  --dark-2: #102f54;
  --gray-50: #f6f9fc;
  --gray-100: #eef2f7;
  --gray-200: #e2e8f0;
  --gray-400: #94a3b8;
  --gray-600: #5b6b7c;
  --gray-800: #1e293b;
  --text: #1f2d3d;
  --text-muted: #6b7c8d;
  --white: #ffffff;
  --shadow: 0 4px 20px rgba(21, 101, 192, 0.08);
  --shadow-lg: 0 12px 40px rgba(10, 37, 64, 0.14);
  --radius: 12px;
  --radius-lg: 20px;
  --max-width: 1200px;
  --header-height: 72px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img, video { max-width: 100%; display: block; }

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

.section-title { font-size: 32px; font-weight: 700; text-align: center; margin-bottom: 16px; color: var(--text); }
.section-subtitle { font-size: 16px; color: var(--text-muted); text-align: center; max-width: 600px; margin: 0 auto 56px; }
.section-subtitle--light { color: rgba(255, 255, 255, .75); }
.section-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 13px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
  color: var(--primary-2); margin-bottom: 14px;
}
.section-eyebrow::before, .section-eyebrow::after {
  content: ""; width: 42px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(30, 136, 229, .6));
}
.section-eyebrow::after { background: linear-gradient(90deg, rgba(30, 136, 229, .6), transparent); }
.products .section-eyebrow, .contact .section-eyebrow { color: #58a6ff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; border-radius: 50px; font-size: 15px; font-weight: 500;
  transition: all .3s ease; cursor: pointer; border: none; outline: none;
}
.btn-primary { background: var(--primary-gradient); color: var(--white); box-shadow: 0 6px 18px rgba(21, 101, 192, .35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(21, 101, 192, .45); }
.btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--white); }

/* ---------- 导航 ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-height);
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06); z-index: 1000; transition: all .3s ease;
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; max-width: 68%; font-size: 22px; font-weight: 700; color: var(--dark); }
.logo img { height: 44px; width: auto; max-width: 260px; display: block; object-fit: contain; }
/* Logo 旁边的文字（后台「Logo 文字」设置，留空则不显示） */
.logo-text { min-width: 0; font-size: 22px; font-weight: 700; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) {
  .logo { max-width: 85%; }
  .logo img { max-width: 160px; }
  .logo-text { font-size: 17px; }
}
.logo-icon {
  width: 36px; height: 36px; background: var(--primary-gradient); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav-link { padding: 8px 16px; font-size: 15px; color: var(--gray-600); border-radius: 6px; transition: all .2s ease; display: inline-flex; align-items: center; gap: 4px; }
.nav-link:hover, .nav-link.active { color: var(--primary); background: var(--primary-light); }
.nav-item.dropdown { position: relative; }
.nav-item.dropdown .caret { opacity: .55; transition: transform .2s ease; }
.nav-item.dropdown:hover .nav-link, .nav-item.dropdown.open .nav-link { color: var(--primary); background: var(--primary-light); }
.nav-item.dropdown:hover .caret, .nav-item.dropdown.open .caret { transform: rotate(180deg); }
.dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 180px; list-style: none; margin: 6px 0 0; padding: 8px; background: var(--white); border-radius: 10px; box-shadow: 0 14px 36px rgba(0,0,0,.14); border: 1px solid #eef2f7; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s ease; z-index: 1001; }
.nav-item.dropdown:hover > .dropdown-menu, .nav-item.dropdown.open > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu li { margin: 0; }
.dropdown-menu a { display: block; padding: 10px 14px; font-size: 14px; color: var(--gray-600); border-radius: 6px; transition: all .2s ease; }
.dropdown-menu a:hover, .dropdown-menu a.active { color: var(--primary); background: var(--primary-light); }
.nav-cta { margin-left: 12px; }
.nav-login { margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 14px; color: var(--gray-600); border-radius: 6px; transition: all .2s ease; }
.nav-login:hover { color: var(--primary); background: var(--primary-light); }
.nav-login svg { flex-shrink: 0; }
.nav-user { margin-left: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 50px; }
.nav-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nav-user-name { font-size: 14px; color: var(--text); font-weight: 500; }
.nav-user-logout { font-size: 13px; color: var(--text-muted); padding: 0 6px; transition: color .2s ease; }
.nav-user-logout:hover { color: var(--primary); }
.mobile-menu-btn { display: none; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.mobile-menu-btn span { display: block; width: 24px; height: 2px; background: var(--text); transition: all .3s ease; }

/* ---------- 首屏 Hero ---------- */
/* 首屏上方通栏媒体（后台可上传图片或视频；设计宽度 1920，高度按宽度自适应） */
.top-media { width: 100%; line-height: 0; padding-top: var(--header-height); }
.top-media-inner { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; }
.top-media img, .top-media video { display: block; width: 100%; height: auto; }
.top-media-unmute {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #fff; border: 1px solid rgba(255,255,255,.35);
  font-size: 14px; font-weight: 600; letter-spacing: .5px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  transition: background .2s, transform .2s, box-shadow .2s, padding .2s, font-size .2s, left .2s, top .2s;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.top-media-unmute svg { flex-shrink: 0; }
.top-media-unmute:hover { background: rgba(0,0,0,.82); transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.top-media-unmute:active { transform: translate(-50%, -50%) scale(1.0); }
/* 有声状态：移到右上角缩小，不挡画面 */
.top-media-unmute.is-unmuted {
  left: auto; right: 16px; top: 16px;
  transform: none;
  padding: 8px 14px;
  font-size: 13px;
  gap: 6px;
}
.top-media-unmute.is-unmuted:hover { transform: scale(1.05); }
.top-media-unmute.is-unmuted:active { transform: scale(1.0); }
@media (max-width: 480px) {
  .top-media-unmute { padding: 8px 14px; font-size: 13px; gap: 6px; }
  .top-media-unmute.is-unmuted { right: 10px; top: 10px; padding: 7px 12px; font-size: 12px; }
}

.hero {
  padding-top: var(--header-height); min-height: 720px;
  background: radial-gradient(1200px 500px at 75% 10%, #e3f2fd 0%, transparent 60%), linear-gradient(135deg, #f6f9fc 0%, #e8f1fb 100%);
  display: flex; align-items: center; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -8%; bottom: -20%; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(30, 136, 229, .12) 0%, transparent 70%); border-radius: 50%; pointer-events: none;
}
/* ---------- Hero 底部水波纹动画 ---------- */
.hero .hero-waves { position: absolute; left: 0; right: 0; bottom: -1px; height: 110px; z-index: 2; pointer-events: none; overflow: hidden; }
.hero-waves .wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; animation: hero-wave-drift linear infinite; }
.hero-waves .wave-1 { fill: rgba(30, 136, 229, .28); animation-duration: 16s; }
.hero-waves .wave-2 { fill: rgba(88, 166, 255, .2); animation-duration: 11s; animation-direction: reverse; }
.hero-waves .wave-3 { fill: #ffffff; animation-duration: 22s; }
@keyframes hero-wave-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-waves .wave { animation: none; } }

.hero .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 3; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #cfe9ff; margin-bottom: 20px; padding: 8px 18px; border: 1px solid rgba(140, 200, 255, .55); border-radius: 50px; background: rgba(13, 71, 161, .5); box-shadow: 0 0 22px rgba(30, 136, 229, .28), inset 0 0 14px rgba(88, 166, 255, .18); backdrop-filter: blur(8px); text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.hero-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6bb8ff; box-shadow: 0 0 10px #6bb8ff; flex-shrink: 0; }
.hero-content h1 { font-size: 40px; font-weight: 800; line-height: 1.25; margin-bottom: 16px; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.hero-content h1 span { color: #58a6ff; }
.hero-content .lead { font-size: 19px; color: rgba(255, 255, 255, .88); margin-bottom: 32px; }
.hero-btns { display: flex; gap: 16px; }
.hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); }
.hero .btn-outline:hover { background: #fff; color: var(--dark); border-color: #fff; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 46px; }
.hero-stat { display: flex; flex-direction: column; gap: 4px; }
.hero-stat + .hero-stat { padding-left: 36px; border-left: 1px solid rgba(255, 255, 255, .18); }
.hero-stat .num { font-size: 30px; font-weight: 800; color: #fff; }
.hero-stat .label { font-size: 13px; color: rgba(255, 255, 255, .65); }
.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-visual svg { max-width: 100%; filter: drop-shadow(0 20px 40px rgba(10, 37, 64, .12)); }
/* 首页装修图片（后台首页装修上传后替换默认 SVG） */
.hero-img { width: 100%; max-width: 560px; height: auto; border-radius: 20px; box-shadow: 0 24px 60px rgba(10, 37, 64, .22); }
.cap-icon img { width: 40px; height: 40px; object-fit: contain; }
.sol-card .thumb img { width: 100%; height: 100%; max-width: 200px; max-height: 140px; object-fit: contain; }
.prod-showcase img { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; }

/* ---------- 区块通用 ---------- */
.capabilities { background: var(--white); }
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cap-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 32px 24px; text-align: center; transition: all .3s ease; }
.cap-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.cap-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: var(--primary-light); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--primary); }
.cap-card h3 { font-size: 18px; margin-bottom: 10px; }
.cap-card p { font-size: 14px; color: var(--text-muted); }

/* ---------- 解决方案 ---------- */
.solutions { background: var(--gray-50); }
.sol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sol-card { background: var(--white); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); transition: all .3s ease; border: 1px solid var(--gray-100); }
.sol-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
/* 后台设置了跳转的卡片用 <a> 渲染，需抹掉链接默认样式以保持原外观 */
a.sol-card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.sol-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.sol-card .thumb { height: 160px; background: var(--gray-100); border-radius: var(--radius); margin-bottom: 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sol-card h3 { font-size: 20px; margin-bottom: 10px; }
.sol-card p { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
.sol-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sol-tags span { font-size: 12px; padding: 4px 12px; background: var(--primary-light); color: var(--primary-dark); border-radius: 50px; }

/* ---------- 产品深色区块 ---------- */
.products { background: var(--dark); color: var(--white); }
.products .section-title, .products .section-subtitle { color: var(--white); }
.products .section-subtitle { opacity: .7; }
.prod-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.prod-showcase { background: linear-gradient(135deg, #103a63 0%, #0a2540 100%); border-radius: var(--radius-lg); padding: 48px; display: flex; align-items: center; justify-content: center; min-height: 400px; border: 1px solid rgba(255, 255, 255, .08); }
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prod-item { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius); padding: 24px 12px; text-align: center; transition: all .3s ease; }
.prod-item:hover { background: rgba(255, 255, 255, .1); transform: translateY(-4px); }
.prod-item .icon { width: 48px; height: 48px; margin: 0 auto 12px; color: #58a6ff; }
.prod-item h4 { font-size: 14px; font-weight: 500; color: var(--white); }

/* ---------- 案例 ---------- */
.cases { background: var(--white); }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.case-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-100); box-shadow: var(--shadow); transition: all .3s ease; }
.case-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.case-card .cover { height: 220px; background: var(--gray-100); position: relative; overflow: hidden; }
.case-card .cover img, .case-card .cover video { width: 100%; height: 100%; object-fit: cover; }
.case-card .info { padding: 24px; }
.case-card h3 { font-size: 18px; margin-bottom: 10px; }
.case-card p { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }

/* ---------- 优势 ---------- */
.why { background: var(--gray-50); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-card { background: var(--white); border-radius: var(--radius); padding: 32px 24px; text-align: center; box-shadow: var(--shadow); transition: all .3s ease; }
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.why-card .num { width: 56px; height: 56px; margin: 0 auto 20px; background: var(--primary-light); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.why-card h3 { font-size: 18px; margin-bottom: 8px; }
.why-card p { font-size: 14px; color: var(--text-muted); }

/* ---------- Why 子板块（历程/资质） ---------- */
.why-block { margin-top: 56px; }
.why-block > h3 { font-size: 22px; font-weight: 700; color: var(--dark); margin-bottom: 24px; position: relative; padding-left: 16px; }
.why-block > h3::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; background: linear-gradient(180deg, var(--primary) 0%, #58a6ff 100%); border-radius: 2px; }

/* 企业历程时间线 */
.why-timeline h3 { text-align: center; padding-left: 0; }
.why-timeline h3::before { display: none; }
.timeline { position: relative; padding: 20px 0; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--primary) 0%, #58a6ff 50%, var(--primary-light) 100%); transform: translateX(-50%); }
.timeline-item { position: relative; margin-bottom: 36px; display: flex; width: 100%; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot { position: absolute; left: 50%; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--primary-light); transform: translateX(-50%); z-index: 2; }
.timeline-content { width: calc(50% - 32px); background: var(--white); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); transition: all .3s ease; }
.timeline-content:hover { box-shadow: var(--shadow-lg); }
.timeline-content .timeline-year { display: block; font-size: 20px; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.timeline-content p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.timeline-left { justify-content: flex-start; }
.timeline-left .timeline-content { text-align: right; }
.timeline-right { justify-content: flex-end; }
.timeline-right .timeline-content { text-align: left; }

/* 企业资质跑马灯 */
.why-certs h3.certs-title-hidden { display: none; }
.why-certs { margin-top: 20px; }
.certs-marquee { position: relative; overflow: hidden; padding: 150px 0; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.certs-track { display: flex; gap: 24px; animation: certs-scroll 30s linear infinite; width: max-content; }
.certs-marquee:hover .certs-track { animation-play-state: paused; }
.cert-item { position: relative; flex-shrink: 0; width: 220px; background: var(--white); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); text-align: center; }
.cert-item img { display: block; width: 100%; height: 180px; object-fit: contain; border-radius: 6px; background: #f4f7fb; transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease; }
/* 桌面端：鼠标悬停图片自身直接放大（不依赖父元素级联，兼容性最稳） */
@media (hover: hover) and (pointer: fine) {
  .cert-item img:hover { transform: scale(2.4); box-shadow: 0 22px 56px rgba(10, 37, 64, .32); position: relative; z-index: 20; }
}
@keyframes certs-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 优势板块底部统计数据（由首屏迁移而来，浅色背景适配） */
.why-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line, #e3eaf2); }
.why-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 180px; min-width: 160px; }
.why-stat + .why-stat { border-left: 1px solid var(--line, #e3eaf2); }
.why-stat .num { font-size: 40px; font-weight: 800; line-height: 1; color: var(--primary, #1976d2); letter-spacing: -.5px; }
.why-stat .label { font-size: 15px; color: var(--muted, #5a6b7d); }

/* Why 子板块响应式 */
@media (max-width: 900px) {
  .why-timeline::before { left: 20px; }
  .timeline-item { margin-bottom: 28px; }
  .timeline-dot { left: 20px; top: 16px; }
  .timeline-content { width: calc(100% - 50px); margin-left: 50px; text-align: left !important; }
  .cert-item { width: 180px; }
  .certs-marquee { padding: 32px 0; }
}
@media (max-width: 480px) {
  .cert-item { width: 150px; }
  .cert-item img { height: 140px; }
  .why-block { margin-top: 40px; }
  .why-block > h3 { font-size: 20px; }
  .certs-marquee { padding: 20px 0; }
  .why-stats { flex-direction: column; gap: 0; margin-top: 44px; }
  .why-stat { padding: 18px 0; }
  .why-stat + .why-stat { border-left: none; border-top: 1px solid var(--line, #e3eaf2); }
  .why-stat .num { font-size: 32px; }
}

/* ---------- 新闻 ---------- */
.news { background: var(--white); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.news-card { background: var(--white); border-radius: var(--radius); padding: 28px; border: 1px solid var(--gray-100); transition: all .3s ease; }
.news-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.news-card .date { font-size: 13px; color: var(--primary); font-weight: 500; margin-bottom: 10px; }
.news-card h3 { font-size: 17px; margin-bottom: 12px; line-height: 1.5; }
.news-card p { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
/* ---------- 卡片 CTA 胶囊按钮（阅读更多/查看详情/查看案例/了解服务） ---------- */
.read-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; padding: 7px 16px;
  font-size: 13px; font-weight: 500; color: var(--primary);
  background: var(--primary-light);
  border: 1px solid rgba(21, 101, 192, .18);
  border-radius: 50px;
  transition: all .25s ease;
}
.read-more::after { content: "→"; font-size: 14px; line-height: 1; transition: transform .25s ease; }
.news-card:hover .read-more, .card:hover .read-more {
  background: var(--primary-gradient); color: var(--white);
  border-color: transparent; box-shadow: 0 6px 16px rgba(21, 101, 192, .35);
}
.news-card:hover .read-more::after, .card:hover .read-more::after { transform: translateX(4px); }

/* ---------- 关于 ---------- */
.about { background: var(--gray-50); }
.about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-content h2 { font-size: 32px; margin-bottom: 20px; }
.about-content p { color: var(--text-muted); margin-bottom: 16px; line-height: 1.8; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.about-stats .stat h4 { font-size: 32px; color: var(--primary); font-weight: 700; }
.about-stats .stat span { font-size: 14px; color: var(--text-muted); }
.about-visual { background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%); border-radius: var(--radius-lg); min-height: 360px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray-200); position: relative; overflow: hidden; }
.about-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 联系 ---------- */
.contact { background: var(--dark); color: var(--white); padding-bottom: 0; }
.contact .section-title { color: var(--white); }
.contact .section-subtitle { color: rgba(255, 255, 255, .75); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-info h3 { font-size: 22px; margin-bottom: 24px; }
.contact-info ul li { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; color: rgba(255, 255, 255, .82); }
.contact-info .icon { width: 40px; height: 40px; background: rgba(255, 255, 255, .08); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #58a6ff; flex-shrink: 0; }
.contact-form { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-lg); padding: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; color: var(--white); font-size: 14px; outline: none; transition: all .2s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255, 255, 255, .4); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--primary-2); background: rgba(255, 255, 255, .1); }
.contact-form textarea { min-height: 120px; resize: vertical; margin-bottom: 16px; }
.contact-map { margin-top: 40px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.map-canvas { width: 100%; height: 360px; background: #e8eef5; }
a[href^="tel:"] { color: inherit; text-decoration: none; }
a[href^="tel:"]:hover { color: #58a6ff; }

/* ---------- 子页面通用 Banner ---------- */
.page-hero {
  padding-top: calc(var(--header-height) + 60px);
  padding-bottom: 60px;
  background: linear-gradient(135deg, #072f56 0%, #0c4f8a 48%, #1a8fe0 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 3; }
/* 水纹波浪层（下层，浅蓝） */
.page-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 120' preserveAspectRatio='none'%3E%3Cpath fill='rgba(88,166,255,0.20)' d='M0,60 C120,90 240,20 360,60 C480,100 600,20 720,60 L720,120 L0,120 Z'/%3E%3C/svg%3E") repeat-x;
  background-size: 720px 90px;
  animation: pagehero-wave 16s linear infinite;
  pointer-events: none;
  z-index: 1;
}
/* 水纹波浪层（上层，白色半透明） */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 120' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255,255,255,0.10)' d='M0,75 C120,45 240,95 360,75 C480,55 600,95 720,75 L720,120 L0,120 Z'/%3E%3C/svg%3E") repeat-x;
  background-size: 720px 60px;
  animation: pagehero-wave 11s linear infinite reverse;
  pointer-events: none;
  z-index: 2;
}
@keyframes pagehero-wave {
  from { background-position: 0 0; }
  to { background-position: -720px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::before, .page-hero::after { animation: none; }
}
.page-hero h1 { font-size: 38px; font-weight: 800; margin-bottom: 12px; }
.page-hero p { font-size: 16px; opacity: .9; max-width: 640px; }
.breadcrumb { font-size: 14px; margin-bottom: 12px; opacity: .85; }
.breadcrumb a { text-decoration: underline; }

/* ---------- 列表/详情 ---------- */
.list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: all .3s ease; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card .cover { height: 200px; background: var(--gray-100); overflow: hidden; }
.card .cover img, .card .cover video { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 22px; }
.card .body h3 { font-size: 18px; margin-bottom: 8px; }
.card .body p { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.card .tag { display: inline-block; font-size: 12px; padding: 3px 10px; background: var(--primary-light); color: var(--primary-dark); border-radius: 50px; margin-bottom: 10px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-foot .doc-count { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); background: var(--gray-50); border: 1px solid var(--gray-100); padding: 4px 10px; border-radius: 50px; }
.card-foot .doc-count svg { color: var(--primary); flex-shrink: 0; }

.detail-hero { padding-top: calc(var(--header-height) + 50px); background: var(--gray-50); padding-bottom: 40px; }
.detail-hero h1 { font-size: 32px; margin-bottom: 10px; }
.detail-meta { color: var(--text-muted); font-size: 14px; margin-bottom: 12px; }
.detail-body { max-width: 860px; margin: 0 auto; padding: 48px 0 80px; line-height: 1.9; font-size: 16px; color: #33414f; }
.detail-body img, .detail-body video { max-width: 100%; border-radius: 12px; margin: 20px 0; }
.detail-body h2, .detail-body h3 { margin: 28px 0 12px; color: var(--dark); }
.detail-cover { max-height: 420px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 28px; width: 100%; }
.detail-video { display: block; width: 100%; max-width: 860px; margin: 0 auto; border-radius: var(--radius); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
/* 完整展示图片：统一卡片高度，不裁剪，长图等比缩放并留白 */
.gallery img, .gallery video {
  display: block; width: 100%; height: 320px;
  object-fit: contain; border-radius: 10px; background: #eef3f9; cursor: zoom-in;
}

/* 图片灯箱：点击图集查看完整大图 */
.img-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 56px 40px; background: rgba(4, 18, 33, .92);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.img-lightbox.is-open { display: flex; animation: lightboxIn .22s ease; }
.img-lightbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 8px; background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.img-lightbox-close {
  position: absolute; top: 18px; right: 26px;
  width: 42px; height: 42px; line-height: 38px; text-align: center;
  font-size: 30px; color: #fff; cursor: pointer; border-radius: 50%;
  background: rgba(255, 255, 255, .16); transition: background .2s ease;
}
.img-lightbox-close:hover { background: rgba(255, 255, 255, .32); }
@keyframes lightboxIn { from { opacity: 0 } to { opacity: 1 } }

.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 30px; padding: 9px 20px;
  font-size: 14px; font-weight: 500; color: var(--primary);
  background: var(--white);
  border: 1px solid rgba(21, 101, 192, .3);
  border-radius: 50px;
  transition: all .25s ease;
}
.back-link::before { content: "←"; font-size: 15px; line-height: 1; transition: transform .25s ease; }
.back-link:hover {
  background: var(--primary-gradient); color: var(--white);
  border-color: transparent; box-shadow: 0 8px 20px rgba(21, 101, 192, .4);
  transform: translateY(-2px); text-decoration: none;
}
.back-link:hover::before { transform: translateX(-4px); }

/* ---------- 服务文档下载 ---------- */
.doc-download { margin-top: 36px; padding: 26px 28px; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--radius); }
.doc-download-title { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--dark); margin-bottom: 18px; }
.doc-download-title svg { color: var(--primary); flex-shrink: 0; }
.doc-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.doc-list li { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--gray-100); border-radius: 10px; padding: 12px 16px; transition: box-shadow .2s ease, border-color .2s ease; }
.doc-list li:hover { border-color: var(--primary-2); box-shadow: var(--shadow); }
.doc-badge { flex-shrink: 0; min-width: 48px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; background: var(--gray-100); color: var(--gray-600); }
.doc-badge-pdf { background: #fdeaea; color: #c0392b; }
.doc-badge-doc, .doc-badge-docx { background: #e7f0fb; color: #1565c0; }
.doc-badge-xls, .doc-badge-xlsx, .doc-badge-csv { background: #e6f6ed; color: #1a8a4f; }
.doc-badge-ppt, .doc-badge-pptx { background: #fdf0e3; color: #d2691e; }
.doc-badge-zip, .doc-badge-rar, .doc-badge-7z { background: #f0ebfa; color: #6a4cbf; }
.doc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.doc-name { color: var(--text); font-weight: 500; font-size: 15px; word-break: break-all; }
.doc-name:hover { color: var(--primary); }
.doc-size { font-size: 12px; color: var(--text-muted); }
.doc-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; font-size: 14px; font-weight: 500; color: var(--primary); background: var(--primary-light); border-radius: 50px; transition: all .2s ease; }
.doc-btn:hover { color: var(--white); background: var(--primary); }

@media (max-width: 640px) {
  .doc-download { padding: 20px 16px; }
  .doc-list li { flex-wrap: wrap; gap: 10px; }
  .doc-btn { width: 100%; justify-content: center; }
}

.sidebar { background: var(--gray-50); border-radius: var(--radius); padding: 24px; }
.sidebar h4 { font-size: 16px; margin-bottom: 16px; color: var(--dark); }
.sidebar ul li { padding: 8px 0; border-bottom: 1px solid var(--gray-200); }
.sidebar ul li a { color: var(--text-muted); }
.sidebar ul li a:hover, .sidebar ul li a.active { color: var(--primary); }

.layout-2col { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }

/* ---------- 页脚 ---------- */
.site-footer { background: var(--dark); color: #cdd9e5; margin-top: 0; padding-top: 60px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-inner.has-qr { grid-template-columns: 2fr 1fr 1fr auto; }
.footer-brand .logo { color: #fff; }
.footer-brand .logo img { height: 40px; max-width: 220px; }
.footer-slogan { margin-top: 14px; font-size: 14px; opacity: .8; max-width: 320px; }
.footer-about { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.75; max-width: 360px; }
.footer-col h4 { color: #fff; font-size: 16px; margin-bottom: 16px; }
.footer-col ul li { padding: 6px 0; font-size: 14px; }
.footer-col ul li a:hover { color: #58a6ff; }
.footer-qr img { display: block; width: 110px; height: 110px; object-fit: contain; background: #fff; padding: 6px; border-radius: 8px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 20px 0; text-align: center; color: rgba(255, 255, 255, .5); font-size: 14px; }
.footer-bottom a { color: rgba(255, 255, 255, .5); }
.footer-bottom a:hover { color: #58a6ff; text-decoration: underline; }

/* ---------- 滚动动画 ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: all .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .cap-grid, .why-grid, .sol-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-layout { grid-template-columns: 1fr; }
  .layout-2col { grid-template-columns: 1fr; }
  .footer-inner.has-qr { grid-template-columns: 1.5fr 1fr; }
}
@media (max-width: 768px) {
  .nav { position: fixed; top: var(--header-height); left: 0; right: 0; background: var(--white); flex-direction: column; align-items: stretch; padding: 16px 24px; box-shadow: var(--shadow-lg); transform: translateY(-120%); opacity: 0; pointer-events: none; transition: all .3s ease; }
  .nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-link { padding: 12px 0; border-radius: 0; justify-content: space-between; }
  .nav-item.dropdown { flex-direction: column; align-items: stretch; }
  .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 0 16px; margin: 0; border-radius: 0; display: none; }
  .nav-item.dropdown.open > .dropdown-menu { display: block; }
  .dropdown-menu a { padding: 12px 0; }
  .nav-cta { margin: 12px 0 0; }
  .nav-login { margin: 8px 0 0; justify-content: center; padding: 12px; border: 1px solid var(--gray-100); }
  .nav-user { margin: 12px 0 0; justify-content: center; }
  .mobile-menu-btn { display: flex; }
  .hero .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 32px; }
  .hero-stats { justify-content: center; }
  .hero-waves { height: 64px; }
  .hero-stat + .hero-stat { padding-left: 24px; }
  .hero-eyebrow { margin-left: auto; margin-right: auto; }
  .hero-content h1 { font-size: 30px; }
  .hero-btns { justify-content: center; flex-wrap: wrap; }
  .hero-visual { order: -1; }
  .cap-grid, .why-grid, .sol-grid, .case-grid, .news-grid, .prod-grid, .about-inner, .contact-grid, .list-grid, .gallery { grid-template-columns: 1fr; }
  .gallery img, .gallery video { height: auto; }
  .img-lightbox { padding: 48px 14px 20px; }
  .img-lightbox-close { top: 10px; right: 12px; width: 36px; height: 36px; line-height: 32px; font-size: 26px; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .about-stats { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner, .footer-inner.has-qr { grid-template-columns: 1fr; }
  .section { padding: 72px 0; }
  .map-canvas { height: 260px; }
}

/* =========================
   图片增强（集中放在文件末尾，避免被上方样式覆盖）
   A. 后台上传图片后：通栏出血 + cover 裁剪，填满卡片不留白
   B. 悬停：轻微放大 + 蓝色光晕
   ========================= */
/* ---------- A. 通栏铺满 ---------- */
/* 核心业务能力卡片 */
.cap-card.has-img { padding: 0 0 30px; overflow: hidden; }
.cap-card.has-img .cap-icon { width: 100%; height: 180px; margin-bottom: 22px; border-radius: 0; overflow: hidden; background: var(--gray-100); }
.cap-card.has-img .cap-icon img { width: 100%; height: 100%; object-fit: cover; }
.cap-card.has-img h3, .cap-card.has-img p { padding: 0 24px; }

/* 解决方案卡片 */
.sol-card.has-img { padding: 0 0 32px; overflow: hidden; }
.sol-card.has-img .thumb { height: 200px; border-radius: 0; margin-bottom: 24px; }
.sol-card.has-img .thumb img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.sol-card.has-img h3, .sol-card.has-img p, .sol-card.has-img .sol-tags { padding: 0 32px; }

/* 产品展示大图（容器保持原 min-height:400px，图片绝对定位铺满，避免竖版图把高度撑爆） */
.prod-showcase.has-img { padding: 0; overflow: hidden; position: relative; }
.prod-showcase.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0; }

/* ---------- B. 悬停放大 + 光晕 ---------- */
/* 仅在带指针的桌面设备生效（避免手机点击后卡在放大状态） */
.hero-img { transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease; will-change: transform; }

@media (hover: hover) and (pointer: fine) {
  /* Hero 主图（保留原上浮动效） */
  .hero-img:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 36px 78px rgba(10, 37, 64, .3), 0 0 0 1px rgba(88, 166, 255, .45), 0 0 46px rgba(30, 136, 229, .5);
  }

  /* 独立图片：不被容器裁剪，光晕直接作用于图片本身 */
  .detail-cover,
  .detail-body img,
  .gallery img { transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease; will-change: transform; }
  .detail-cover:hover,
  .detail-body img:hover,
  .gallery img:hover {
    transform: scale(1.04);
    box-shadow: 0 0 0 1px rgba(88, 166, 255, .5), 0 0 26px rgba(30, 136, 229, .45), 0 0 60px rgba(30, 136, 229, .22);
  }
  .gallery img:hover { position: relative; z-index: 3; }

  /* 卡片内图片：图片放大被容器裁剪，光晕用覆盖层画在图片之上（否则会被 overflow:hidden 裁掉） */
  .sol-card .thumb,
  .case-card .cover,
  .card .cover,
  .cap-card.has-img .cap-icon,
  .prod-showcase.has-img { position: relative; }

  .sol-card .thumb img,
  .case-card .cover img,
  .card .cover img,
  .cap-card.has-img .cap-icon img,
  .prod-showcase.has-img img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
  .sol-card:hover .thumb img,
  .case-card:hover .cover img,
  .card:hover .cover img,
  .cap-card.has-img:hover .cap-icon img,
  .prod-showcase:hover img { transform: scale(1.06); }

  .sol-card .thumb::after,
  .case-card .cover::after,
  .card .cover::after,
  .cap-card.has-img .cap-icon::after,
  .prod-showcase.has-img::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    box-shadow: inset 0 0 0 1.5px rgba(88, 166, 255, .6), inset 0 0 34px rgba(30, 136, 229, .45);
    opacity: 0; transition: opacity .45s ease;
  }
  .sol-card:hover .thumb::after,
  .case-card:hover .cover::after,
  .card:hover .cover::after,
  .cap-card.has-img:hover .cap-icon::after,
  .prod-showcase:hover::after { opacity: 1; }

  /* 卡片外发光，让光晕更完整 */
  .cap-card.has-img:hover,
  .sol-card:hover,
  .case-card:hover,
  .card:hover { box-shadow: 0 0 0 1px rgba(88, 166, 255, .35), 0 0 30px rgba(30, 136, 229, .32), var(--shadow-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img, .detail-cover, .detail-body img, .gallery img,
  .sol-card .thumb img, .case-card .cover img, .card .cover img,
  .cap-card.has-img .cap-icon img, .prod-showcase.has-img img { transition: none; }
  .hero-img:hover, .detail-cover:hover, .detail-body img:hover, .gallery img:hover,
  .sol-card:hover .thumb img, .case-card:hover .cover img, .card:hover .cover img,
  .cap-card.has-img:hover .cap-icon img, .prod-showcase:hover img { transform: none; }
}

/* ---------- C. 页脚友情链接 ---------- */
.footer-links { border-top: 1px solid rgba(255, 255, 255, .08); padding: 22px 0; }
.footer-links .container { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.footer-links-title { flex-shrink: 0; font-size: 14px; font-weight: 600; color: #fff; }
.footer-links ul { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer-links li a { font-size: 14px; color: rgba(255, 255, 255, .6); transition: color .2s ease; }
.footer-links li a:hover { color: #58a6ff; }
@media (max-width: 768px) {
  .footer-links .container { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ==========================================================
   Chengyi Electromechanical - UI Visual Enhancement Patch
   Pure style layer only: no business logic, no HTML structure change.
   Appended after original style.css, overrides by cascade order.
   ========================================================== */

/* ---------- 1. Web Fonts (fallback to system font if CDN fails) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.16/files/inter-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.16/files/inter-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc@5.0.0/files/noto-sans-sc-chinese-simplified-400-normal.woff2) format('woff2');}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:700;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc@5.0.0/files/noto-sans-sc-chinese-simplified-700-normal.woff2) format('woff2');}

:root{
  --font-sans:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;
  --shadow-soft:0 2px 8px rgba(10,37,64,.04), 0 12px 32px rgba(10,37,64,.06);
  --shadow-hover:0 10px 24px rgba(10,37,64,.10), 0 28px 60px rgba(10,37,64,.14);
  --shadow-glow:0 8px 24px rgba(21,101,192,.28);
}

/* ---------- 2. Base typography & global polish ---------- */
body{font-family:var(--font-sans);letter-spacing:.2px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
h1,h2,h3,h4,h5{font-family:var(--font-sans);font-weight:700;letter-spacing:-.2px;line-height:1.32;color:var(--text);}
p{line-height:1.85;}
a{transition:color .25s ease;}
::selection{background:var(--primary);color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--gray-50);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary),var(--primary-dark));border-radius:10px;border:2px solid var(--gray-50);}
::-webkit-scrollbar-thumb:hover{background:var(--primary-dark);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px;}

/* ---------- 3. Header / navigation ---------- */
.header{box-shadow:0 2px 24px rgba(10,37,64,.06);}
.nav-link{position:relative;}
.nav-link::after{content:'';position:absolute;left:16px;right:16px;bottom:2px;height:2px;border-radius:2px;background:var(--primary-gradient);transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
.nav-link.active{color:var(--primary);font-weight:600;}
.nav-cta{border-radius:50px;box-shadow:var(--shadow-glow);}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(21,101,192,.38);}
.dropdown-menu{border-color:rgba(21,101,192,.10);box-shadow:0 20px 50px rgba(10,37,64,.16);animation:ddIn .22s ease;}
@keyframes ddIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ---------- 4. Hero atmosphere ---------- */
.hero{position:relative;overflow:hidden;}
@keyframes heroFloat{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(5%,4%,0) scale(1.08);}}
.hero h1{font-weight:800;letter-spacing:-.5px;text-shadow:0 2px 20px rgba(0,0,0,.28);}
.hero h1 span{background:linear-gradient(120deg,#8fd0ff,#4facfe 55%,#ffffff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-visual svg{animation:heroFloat2 8s ease-in-out infinite alternate;filter:drop-shadow(0 24px 50px rgba(10,37,64,.28));}
@keyframes heroFloat2{from{transform:translateY(0);}to{transform:translateY(-14px);}}
.hero-img{box-shadow:0 30px 70px rgba(10,37,64,.32);transition:transform .6s cubic-bezier(.22,.61,.36,1),box-shadow .6s ease;}
.hero-img:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 40px 90px rgba(10,37,64,.40);}
.hero-stat .num{background:linear-gradient(120deg,#ffffff,#a6d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
@keyframes waveDrift{from{transform:translateX(0);}to{transform:translateX(-3%);}}

/* ---------- 5. Section headings ---------- */
.section{position:relative;}
.section-eyebrow{display:inline-block;font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:13px;color:var(--primary);background:var(--primary-light);padding:6px 16px;border-radius:50px;margin-bottom:14px;}
.section-title{font-size:34px;letter-spacing:-.3px;}
.section-title::after{content:'';display:block;width:56px;height:4px;margin:16px auto 0;border-radius:4px;background:var(--primary-gradient);}
.section-subtitle{max-width:760px;margin-left:auto;margin-right:auto;line-height:1.8;color:var(--text-muted);}

/* ---------- 6. Cards: soft depth + hover lift ---------- */
.cap-card,.sol-card,.case-card,.why-card{position:relative;border-color:transparent;box-shadow:var(--shadow-soft);border-radius:18px;transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;}
.cap-card:hover,.sol-card:hover,.case-card:hover,.why-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);}
.cap-card::after,.sol-card::after,.why-card::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--primary-gradient);opacity:0;transition:opacity .35s ease;border-radius:18px 18px 0 0;pointer-events:none;}
.cap-card:hover::after,.sol-card:hover::after,.why-card:hover::after{opacity:1;}

/* icons & badges */
.cap-icon{background:linear-gradient(135deg,var(--primary-light),#dbeafe);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(21,101,192,.14);transition:transform .4s ease;}
.cap-card:hover .cap-icon{transform:translateY(-2px) scale(1.06);}
.sol-card .thumb{background:linear-gradient(135deg,#f2f7ff,#e3f2fd);}
.sol-card .thumb img{transition:transform .5s ease;}
.sol-card:hover .thumb img{transform:scale(1.06);}
.why-card .num{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 10px 24px rgba(21,101,192,.30);}
.sol-tags span{background:linear-gradient(135deg,var(--primary-light),#dbeafe);box-shadow:0 2px 8px rgba(21,101,192,.12);transition:transform .25s ease,box-shadow .25s ease;}
.sol-tags span:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(21,101,192,.20);}

/* case cards */
.case-card .cover{background:linear-gradient(135deg,#eef2f7,#e3f2fd);}
.case-card .cover img,.case-card .cover video{transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.case-card:hover .cover img,.case-card:hover .cover video{transform:scale(1.07);}

/* dark product showcase */
.prod-showcase{background:radial-gradient(900px 380px at 50% -10%, rgba(30,136,229,.22), transparent 60%),linear-gradient(135deg,#103a63 0%,#0a2540 100%);}
.prod-item{backdrop-filter:blur(8px);transition:transform .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;}
.prod-item:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.28);}

/* ---------- 7. Timeline ---------- */
.timeline-dot{box-shadow:0 0 0 3px var(--primary-light),0 0 18px rgba(30,136,229,.50);}
.timeline-content{transition:transform .35s ease,box-shadow .35s ease;}
.timeline-content:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}

/* ---------- 8. Buttons ---------- */
.btn{transition:all .3s cubic-bezier(.22,.61,.36,1);}
.btn-primary{background:var(--primary-gradient);box-shadow:var(--shadow-glow);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(21,101,192,.42);}
.btn-outline:hover{background:#fff;color:var(--dark);border-color:#fff;transform:translateY(-2px);}

/* ---------- 9. Staggered reveal for grids ---------- */
.cap-grid>*:nth-child(2),.sol-grid>*:nth-child(2){transition-delay:.08s;}
.cap-grid>*:nth-child(3),.sol-grid>*:nth-child(3){transition-delay:.16s;}
.cap-grid>*:nth-child(4),.sol-grid>*:nth-child(4){transition-delay:.24s;}

/* ---------- 10. Responsive polish ---------- */
@media (max-width:768px){
  .section-title{font-size:26px;}
  .cap-grid,.sol-grid{grid-template-columns:1fr;gap:18px;}
  .hero-stats{gap:20px;}
  .hero-stat+.hero-stat{padding-left:20px;}
  .prod-showcase{padding:28px 18px;min-height:300px;}
}

/* ==========================================================
   Footer visual enhancement (dark base, safe text contrast)
   ========================================================== */
.site-footer{position:relative;}
.footer-inner{position:relative;z-index:1;}
.footer-col h4{position:relative;padding-left:14px;}
.footer-col h4::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:15px;border-radius:2px;background:var(--primary-gradient);}
.site-footer a{transition:color .25s ease;}
.site-footer a:hover{color:#ffffff;}
.footer-about{color:rgba(255,255,255,.66);line-height:1.9;}
.footer-col ul li{padding:6px 0;line-height:1.8;}
.footer-qr img{width:118px;height:118px;object-fit:cover;border-radius:14px;background:#fff;padding:6px;box-shadow:0 12px 28px rgba(0,0,0,.32);transition:transform .35s ease;}
.footer-qr img:hover{transform:translateY(-4px) scale(1.03);}
.footer-links{border-top:1px solid rgba(255,255,255,.09);}
.footer-links a{color:rgba(255,255,255,.62);}
.footer-links a:hover{color:#ffffff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);}

/* fix: keep section eyebrow centered */
.section-eyebrow{display:block;width:-moz-fit-content;width:fit-content;margin-left:auto;margin-right:auto;}

/* ==========================================================
   Unified image hover: strong zoom (1.6x) + brand-blue glow
   Triggered by hovering anywhere on the parent card
   ========================================================== */

/* Hero main image */
.hero-img{transform-origin:center center;transition:transform .55s cubic-bezier(.22,.61,.36,1),box-shadow .55s ease,filter .55s ease;}
.hero-img:hover{
  transform:translateY(-6px) scale(1.6);
  filter:brightness(1.08);
  box-shadow:0 0 0 1px rgba(140,200,255,.45),
             0 0 40px rgba(80,160,255,.55),
             0 0 90px rgba(30,136,229,.45);
}

/* Card covers: zoom inside clipped containers */
.sol-card .thumb img,
.case-card .cover img,
.prod-showcase img{transform-origin:center center;transition:transform .6s cubic-bezier(.22,.61,.36,1);}

.sol-card:hover .thumb img,
.case-card:hover .cover img,
.prod-item:hover img{transform:scale(1.6);}

/* Glow sits on the container so it is not clipped by overflow:hidden */
.sol-card .thumb,
.case-card .cover{transition:box-shadow .5s ease;}
.sol-card:hover .thumb,
.case-card:hover .cover{
  box-shadow:inset 0 0 0 1px rgba(140,200,255,.40),
             0 0 30px rgba(80,160,255,.45);
}

/* fix: headings inside dark sections keep light color */
.page-hero h1{color:#ffffff;}
.contact-info h3{color:#ffffff;}

/* ==========================================================
   News card cover image (rendered only when admin uploaded one)
   Full-bleed top image + unified hover zoom & brand-blue glow
   ========================================================== */
.news-card .cover{height:190px;margin:-28px -28px 20px;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(135deg,#eef2f7,#e3f2fd);}
.news-card .cover img{width:100%;height:100%;object-fit:cover;transform-origin:center center;transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.news-card:hover .cover img{transform:scale(1.6);}
.news-card:hover .cover{box-shadow:inset 0 0 0 1px rgba(140,200,255,.40),0 0 30px rgba(80,160,255,.45);}