/* ==========================================================================
   火柴头官网 · 全站设计系统（C1 科技蓝渐变风格）
   仅用于官网前台页面（WEB-INF/jsp），不影响后台管理
   ========================================================================== */

:root {
  --blue:#1D6FF2; --blue2:#0EA5E9; --cyan:#22D3EE; --indigo:#4F46E5;
  --ink:#1B2A41; --gray:#64748B; --bg:#F4F8FF; --navy:#152238;
  --line:#E2ECFA;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:"Microsoft YaHei","PingFang SC",sans-serif; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }
::selection { background:rgba(29,111,242,.2); }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#EAF1FB; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--blue),var(--blue2)); border-radius:4px; }

.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ---------- 按钮 ---------- */
.btn { display:inline-block; padding:13px 30px; border-radius:999px; font-size:15px; font-weight:700;
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s; cursor:pointer; border:none; }
.btn:active { transform:scale(.97); }
.btn-white { background:#fff; color:var(--blue); box-shadow:0 8px 24px rgba(0,30,80,.25); }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,30,80,.32); }
.btn-outline { border:2px solid rgba(255,255,255,.7); color:#fff; background:transparent; margin-left:14px; }
.btn-outline:hover { background:rgba(255,255,255,.15); }
.btn-grad { background:linear-gradient(90deg,var(--blue),var(--blue2)); color:#fff; box-shadow:0 10px 26px rgba(29,111,242,.35); }
.btn-grad:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(29,111,242,.45); }

/* ==========================================================================
   头部导航
   ========================================================================== */
.site-header { position:fixed; top:0; left:0; right:0; z-index:100; transition:background .25s, box-shadow .25s; }
.site-header .nav { max-width:1200px; margin:0 auto; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; transition:height .25s var(--ease-out); }
.site-header.scrolled { background:rgba(21,34,56,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(255,255,255,.08), 0 8px 30px rgba(10,30,70,.15); }
.site-header.scrolled .nav { height:60px; }
.logo { display:flex; align-items:center; }
/* Logo：无衬底（E版），白色版 Logo 仅靠文字投影保证在渐变/深色背景上的可读性 */
.logo .logo-badge { display:flex; align-items:center; padding:4px 2px;
  transition:transform .3s var(--ease-out); }
.logo:hover .logo-badge { transform:rotate(-2deg) scale(1.05); }
.logo .logo-badge img { height:34px; width:auto; display:block;
  filter:drop-shadow(0 2px 6px rgba(2,32,71,.45));
  transition:filter .3s; }
/* 滚动/菜单展开后深色导航上：投影略加强，抵消深色底的吞噬感 */
.site-header.scrolled .logo-badge img, .site-header.menu-open .logo-badge img {
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55)); }
.nav-links { display:flex; gap:8px; font-size:15px; color:#fff; position:relative; height:100%; align-items:center; }
.nav-links > .nav-item { position:relative; height:100%; display:flex; align-items:center; }
.nav-links > .nav-item > a { opacity:.85; transition:opacity .2s; padding:8px 14px; display:block; }
.nav-links > .nav-item > a:hover { opacity:1; }
.nav-links > .nav-item.active > a { opacity:1; font-weight:600; }
.nav-links > .nav-item.active > a::after { content:""; position:absolute; left:14px; right:14px; bottom:14px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--cyan),#fff); }
/* 二级下拉 */
.nav-sub { position:absolute; top:100%; left:50%; transform:translate(-50%,8px); min-width:130px; background:#fff; border-radius:14px; box-shadow:0 18px 44px rgba(10,40,100,.18); padding:8px; opacity:0; visibility:hidden; transition:.22s var(--ease-out); z-index:20; }
.nav-sub a { display:block; padding:10px 16px; border-radius:9px; color:#33455F; font-size:14px; white-space:nowrap; transition:.18s; }
.nav-sub a:hover { background:#EEF4FE; color:var(--blue); }
.nav-item:hover .nav-sub { opacity:1; visibility:visible; transform:translate(-50%,0); }
.nav-cta { padding:10px 24px; font-size:14px; }
/* 汉堡菜单 */
.hamburger { display:none; width:40px; height:40px; background:none; border:none; cursor:pointer; position:relative; z-index:102; }
.hamburger span { display:block; width:24px; height:2px; background:#fff; margin:5px auto; border-radius:2px; transition:.3s var(--ease-out); }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { display:none; }
/* 无渐变 Hero 的浅底页面（404/提交成功）：头部直接呈现深色玻璃态，保证白色导航可读 */
body.plain .site-header { background:rgba(21,34,56,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(255,255,255,.08), 0 8px 30px rgba(10,30,70,.15); }
body.plain .site-header .nav { height:60px; }

/* ==========================================================================
   首页 Hero
   ========================================================================== */
.hero-wrap { background:linear-gradient(160deg,#1D6FF2 0%, #0EA5E9 55%, #22D3EE 130%); position:relative; overflow:hidden; }
.hero-glow { position:absolute; border-radius:50%; pointer-events:none; }
.hg1 { width:620px; height:620px; background:rgba(255,255,255,.12); top:-260px; right:-160px; animation:drift1 22s ease-in-out infinite alternate; }
.hg2 { width:340px; height:340px; border:60px solid rgba(255,255,255,.08); background:transparent; bottom:-140px; left:-120px; animation:drift2 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform:translate(-60px, 50px) scale(1.08); } }
@keyframes drift2 { to { transform:translate(70px, -40px); } }
.hero { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:150px 24px 150px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; color:#fff; }
.hero .crumb { display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); padding:8px 20px; border-radius:999px; font-size:13.5px; margin-bottom:26px; backdrop-filter:blur(6px); }
.hero h1 { font-size:50px; font-weight:900; line-height:1.3; text-shadow:0 4px 24px rgba(10,60,160,.3); }
.hero p.sub { margin:22px 0 36px; font-size:17px; line-height:1.9; max-width:560px; opacity:.94; }

/* 进场动画初始态 */
.anim { opacity:0; transform:translateY(26px); }
.anim.played { animation:riseIn .7s var(--ease-out) forwards; }
@keyframes riseIn { to { opacity:1; transform:translateY(0); } }

/* 系统界面预览 + 视差倾斜 */
.mock-wrap { perspective:1200px; }
.mock { background:#fff; border-radius:18px; box-shadow:0 30px 80px rgba(8,40,110,.35); overflow:hidden;
  transform:rotateY(-4deg); transition:transform .35s var(--ease-out); will-change:transform; color:var(--ink); }
.mock-bar { display:flex; gap:7px; padding:13px 16px; background:#F2F7FE; border-bottom:1px solid #E6EEF9; }
.mock-bar i { width:11px; height:11px; border-radius:50%; }
.mock-bar i:nth-child(1){background:#FF5F57} .mock-bar i:nth-child(2){background:#FEBC2E} .mock-bar i:nth-child(3){background:#28C840}
.mock-body { display:grid; grid-template-columns:120px 1fr; min-height:300px; }
.mock-side { background:linear-gradient(180deg,#1D3A6E,#15294F); padding:16px 10px; }
.mock-side i { display:block; height:10px; border-radius:5px; background:rgba(255,255,255,.16); margin-bottom:14px; }
.mock-side i.on { background:linear-gradient(90deg,var(--cyan),#7DD3FC); width:80%; }
.mock-main { padding:20px; }
.mock-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.mock-cards div { background:#F0F6FF; border-radius:10px; padding:12px; font-size:11px; color:#7C93B8; }
.mock-cards b { display:block; font-size:18px; color:var(--ink); margin-top:6px; }
.mock-chart { background:#F0F6FF; border-radius:10px; height:120px; display:flex; align-items:flex-end; gap:10px; padding:14px; }
.mock-chart i { flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--blue2),var(--blue)); opacity:.9; transform-origin:bottom; animation:barGrow 1s var(--ease-out) both; }
@keyframes barGrow { from { transform:scaleY(0); } }

.wave { display:block; width:100%; height:90px; margin-top:-1px; position:relative; z-index:2; }

/* ---------- 滚动渐入 ---------- */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity:1; transform:translateY(0); }

/* ---------- 浮动卖点卡 ---------- */
.float-cards { max-width:980px; margin:-96px auto 0; position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:0 24px; }
.fc { background:#fff; border-radius:20px; padding:28px 24px; box-shadow:0 20px 50px rgba(20,80,190,.14);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.fc:hover { transform:translateY(-8px); box-shadow:0 28px 60px rgba(20,80,190,.2); }
.fc .ico { width:50px; height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:16px; transition:transform .3s var(--ease-out); }
.fc:hover .ico { transform:scale(1.1) rotate(-6deg); }
.fc h3 { font-size:16.5px; margin-bottom:8px; }
.fc p { font-size:13px; color:var(--gray); line-height:1.8; }

/* ---------- 通用区块 ---------- */
section.block { max-width:1200px; margin:0 auto; padding:88px 24px; }
.sec-head { text-align:center; margin-bottom:52px; }
.sec-head .en { font-size:13px; letter-spacing:4px; font-weight:800; background:linear-gradient(90deg,var(--blue),var(--blue2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sec-head h2 { font-size:34px; margin-top:12px; font-weight:900; }
.sec-head p { color:var(--gray); margin-top:12px; }

/* ---------- 优势卡片 ---------- */
.adv { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.adv .card { border-radius:22px; padding:34px 26px; color:#fff; min-height:210px; position:relative; overflow:hidden;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.adv .card:hover { transform:translateY(-6px) scale(1.02); box-shadow:0 24px 50px rgba(20,80,190,.28); }
.adv .card::after { content:""; position:absolute; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.14); right:-46px; bottom:-46px; transition:transform .4s var(--ease-out); }
.adv .card:hover::after { transform:scale(1.35); }
.adv .c1 { background:linear-gradient(150deg,#3B82F6,#1D6FF2); }
.adv .c2 { background:linear-gradient(150deg,#0EA5E9,#0284C7); }
.adv .c3 { background:linear-gradient(150deg,#22D3EE,#06B6D4); }
.adv .c4 { background:linear-gradient(150deg,#6366F1,#4F46E5); }
.adv .ico { font-size:30px; margin-bottom:18px; display:inline-block; transition:transform .3s var(--ease-out); }
.adv .card:hover .ico { transform:translateY(-4px) scale(1.12); }
.adv h3 { font-size:17px; margin-bottom:10px; }
.adv p { font-size:13.5px; opacity:.92; line-height:1.8; }

/* ---------- 产品区 ---------- */
.product { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.pvisual { position:relative; }
.pvisual .screen { background:#fff; border-radius:22px; box-shadow:0 24px 60px rgba(20,80,190,.16); overflow:hidden; transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.pvisual:hover .screen { transform:scale(1.02); box-shadow:0 30px 70px rgba(20,80,190,.2); }
.screen .bar { height:46px; background:linear-gradient(90deg,var(--blue),var(--blue2)); display:flex; align-items:center; padding:0 18px; gap:8px; }
.screen .bar i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.75); }
.screen .bd { padding:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.screen .bd > div { background:#EBF3FF; border-radius:12px; min-height:76px; padding:14px; font-size:12px; color:#7C93B8; }
.screen .bd b { display:block; font-size:19px; color:var(--ink); margin-top:6px; }
.sticker { position:absolute; background:#fff; border-radius:999px; padding:10px 20px; font-size:13.5px; font-weight:700; box-shadow:0 12px 30px rgba(20,80,190,.18); z-index:2; }
.st1 { top:-18px; right:8px; color:var(--blue); transform:rotate(4deg); animation:floatY 4s ease-in-out infinite; }
/* 资质徽章（较长文字）：不旋转、允许两行、 narrower 字号 */
.st1.cred { right:0; top:-26px; max-width:330px; border-radius:16px; padding:10px 16px; font-size:12px; font-weight:600; line-height:1.7; text-align:center; transform:none; animation:none; color:#33455F; }
@keyframes floatY { 0%,100% { margin-top:0; } 50% { margin-top:-8px; } }
.pinfo h3 { font-size:32px; font-weight:900; margin-bottom:6px; }
.pinfo .tag { font-size:13px; font-weight:800; letter-spacing:2px; color:var(--blue); }
.pinfo p { color:var(--gray); line-height:1.95; margin:18px 0 22px; font-size:15px; }
.pinfo ul { list-style:none; margin-bottom:30px; }
.pinfo ul li { padding:9px 0 9px 30px; position:relative; font-size:14.5px; color:#334155; }
.pinfo ul li::before { content:"✓"; position:absolute; left:0; top:9px; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; }

/* ---------- 数字统计带 ---------- */
.band { background:linear-gradient(135deg,var(--navy),#1D3A6E); border-radius:24px; padding:60px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; color:#fff; }
.band .num { font-size:42px; font-weight:900; background:linear-gradient(90deg,#7DD3FC,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.band .lab { margin-top:8px; font-size:14px; opacity:.75; }

/* ---------- 新闻 Tab（首页） ---------- */
.news-tabs { display:flex; justify-content:center; gap:12px; margin-bottom:36px; }
.news-tabs .tab { padding:11px 28px; border-radius:999px; font-size:15px; font-weight:600; color:var(--gray); background:#fff; border:1px solid var(--line); cursor:pointer; transition:.2s; }
.news-tabs .tab:hover { color:var(--blue); border-color:#BBD6FA; }
.news-tabs .tab.active { background:linear-gradient(90deg,var(--blue),var(--blue2)); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(29,111,242,.3); }
.news-panels { position:relative; min-height:230px; }
.news-panel { position:absolute; inset:0; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s var(--ease-out), transform .25s var(--ease-out); display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-content:start; }
.news-panel.active { opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }
.news-card { background:#fff; border-radius:16px; padding:24px; border:1px solid #E8F0FB; transition:.25s var(--ease-out); display:block; }
.news-card:hover { transform:translateY(-5px); box-shadow:0 18px 44px rgba(20,80,190,.14); border-color:#C4DDFC; }
.news-card .date { font-size:12.5px; color:#93A8C8; margin-bottom:10px; }
.news-card h4 { font-size:15.5px; line-height:1.6; margin-bottom:10px; color:var(--ink); transition:color .2s; }
.news-card:hover h4 { color:var(--blue); }
.news-card p { font-size:13px; color:var(--gray); line-height:1.75; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-card .cover { width:100%; height:120px; object-fit:cover; border-radius:10px; margin-bottom:14px; background:#EBF3FF; }
.news-empty { grid-column:1/-1; text-align:center; color:#93A8C8; padding:44px 0; font-size:14px; }
.news-more { text-align:center; margin-top:36px; }

/* ==========================================================================
   内页通用：页头横幅 + 侧栏布局
   ========================================================================== */
.page-hero { background:linear-gradient(160deg,#1D6FF2 0%, #0EA5E9 55%, #22D3EE 130%); position:relative; overflow:hidden; padding:130px 24px 80px; text-align:center; color:#fff; }
.page-hero::before { content:""; position:absolute; width:480px; height:480px; border-radius:50%; background:rgba(255,255,255,.1); top:-220px; right:-120px; }
.page-hero::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; border:46px solid rgba(255,255,255,.07); bottom:-120px; left:-100px; }
.page-hero .crumb { display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); padding:6px 18px; border-radius:999px; font-size:13px; margin-bottom:20px; backdrop-filter:blur(6px); position:relative; z-index:2; }
.page-hero h1 { font-size:40px; font-weight:900; position:relative; z-index:2; text-shadow:0 4px 20px rgba(10,60,160,.3); }
.page-hero .sub { margin-top:14px; font-size:15px; opacity:.9; position:relative; z-index:2; }
.page-hero svg.wave { position:absolute; left:0; right:0; bottom:-1px; height:60px; z-index:1; }

.sub-layout { max-width:1200px; margin:0 auto; padding:64px 24px 88px; display:grid; grid-template-columns:250px 1fr; gap:32px; align-items:start; }
.side-nav { background:#fff; border-radius:18px; border:1px solid #E8F0FB; box-shadow:0 12px 34px rgba(20,80,190,.08); overflow:hidden; position:sticky; top:92px; }
.side-nav h2 { background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; font-size:17px; padding:18px 22px; font-weight:700; }
.side-nav a { display:flex; align-items:center; justify-content:space-between; padding:15px 22px; font-size:14.5px; color:#47648C; border-bottom:1px solid #F0F6FD; transition:.2s; }
.side-nav a:last-child { border-bottom:none; }
.side-nav a::after { content:"›"; color:#B9CBE4; transition:.2s; }
.side-nav a:hover { color:var(--blue); background:#F6FAFF; padding-left:26px; }
.side-nav a.active { color:var(--blue); font-weight:700; background:linear-gradient(90deg,rgba(29,111,242,.08),transparent); border-left:3px solid var(--blue); padding-left:19px; }
.side-nav a.active::after { color:var(--blue); }
.main-panel { background:#fff; border-radius:18px; border:1px solid #E8F0FB; box-shadow:0 12px 34px rgba(20,80,190,.08); padding:36px 40px; min-height:420px; }
.main-panel > .panel-title { font-size:22px; font-weight:800; padding-bottom:18px; margin-bottom:24px; border-bottom:1px solid #EEF3FB; display:flex; align-items:center; gap:12px; }
.main-panel > .panel-title::before { content:""; width:5px; height:22px; border-radius:3px; background:linear-gradient(180deg,var(--blue),var(--cyan)); }
.breadcrumb { font-size:13px; color:#93A8C8; margin-bottom:22px; }
.breadcrumb a { color:#7C93B8; transition:.2s; }
.breadcrumb a:hover { color:var(--blue); }

/* ---------- 新闻列表 ---------- */
.news-list { list-style:none; }
.news-list li { border-bottom:1px dashed #E3EDFA; }
.news-list li:last-child { border-bottom:none; }
.news-list a.row { display:flex; align-items:baseline; gap:16px; padding:18px 10px; border-radius:12px; transition:.2s var(--ease-out); }
.news-list a.row:hover { background:#F6FAFF; transform:translateX(6px); }
.news-list .t { flex:1; font-size:15.5px; color:#33455F; transition:.2s; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.news-list a.row:hover .t { color:var(--blue); }
.news-list .top-badge { color:#fff; background:linear-gradient(90deg,#F59E0B,#F97316); font-size:11px; padding:2px 8px; border-radius:6px; flex-shrink:0; }
.news-list .time { color:#93A8C8; font-size:13px; flex-shrink:0; }

/* ---------- 分页 ---------- */
.page_div { display:flex; justify-content:center; gap:8px; margin:44px auto 0; max-width:1200px; padding:0 24px 88px; }
.page_div a { min-width:38px; height:38px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#fff; border:1px solid var(--line); color:#47648C; font-size:14px; transition:.2s; }
.page_div a:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.page_div a.current { background:linear-gradient(90deg,var(--blue),var(--blue2)); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(29,111,242,.3); }

/* ---------- 新闻详情 ---------- */
.article-head { text-align:center; padding-bottom:24px; border-bottom:1px solid #EEF3FB; margin-bottom:30px; }
.article-head h1 { font-size:26px; font-weight:800; line-height:1.6; }
.article-head .met_infos { margin-top:12px; color:#93A8C8; font-size:13px; }
.news_details { font-size:15.5px; line-height:2; color:#3B4C66; }
.news_details img { max-width:100% !important; height:auto !important; border-radius:12px; margin:12px 0; }
.news_details p { margin-bottom:14px; }

/* ---------- 招聘 ---------- */
.job-card { border:1px solid #E8F0FB; border-radius:16px; padding:26px 28px; margin-bottom:20px; transition:.25s var(--ease-out); }
.job-card:hover { box-shadow:0 16px 40px rgba(20,80,190,.12); border-color:#C4DDFC; transform:translateY(-3px); }
.job-card .job-head { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.job-card .job-head b { font-size:18px; }
.job-card .job-head .pill { font-size:12px; background:#EEF4FE; color:var(--blue); padding:4px 12px; border-radius:999px; }
.job-card .job-head .desc { width:100%; color:var(--gray); font-size:13.5px; }
.job-card h4 { font-size:14.5px; color:var(--blue); margin:14px 0 8px; }
.job-card ol { padding-left:20px; color:#47648C; font-size:14px; line-height:2; }

/* ---------- 联系我们 ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-item { display:flex; gap:16px; align-items:flex-start; background:#F8FBFF; border:1px solid #E8F0FB; border-radius:14px; padding:20px; transition:.22s var(--ease-out); }
.contact-item:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(20,80,190,.1); }
.contact-item .ci { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.contact-item .ct { font-size:13px; color:#93A8C8; margin-bottom:4px; }
.contact-item .cv { font-size:15px; color:#33455F; font-weight:600; line-height:1.6; }

/* ==========================================================================
   表单组件（在线申请 / 渠道代理）
   ========================================================================== */
.apply-wrap { background:linear-gradient(160deg,#1D6FF2,#0EA5E9); border-radius:28px; padding:64px 24px; position:relative; overflow:hidden; }
.apply-wrap::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:rgba(255,255,255,.1); top:-180px; right:-120px; }
.apply-inner { max-width:640px; margin:0 auto; position:relative; z-index:2; }
.apply-inner .head { text-align:center; color:#fff; margin-bottom:36px; }
.apply-inner .head h2 { font-size:32px; font-weight:900; margin-bottom:10px; }
.apply-inner .head p { opacity:.9; font-size:15px; }
.form-card { background:#fff; border-radius:20px; padding:36px; box-shadow:0 30px 70px rgba(8,40,110,.3); }
.form-card.plain { box-shadow:none; border:1px solid #E8F0FB; }
.field { position:relative; margin-bottom:22px; }
.field input[type=text], .field textarea { width:100%; padding:16px; border:1.5px solid #DCE7F5; border-radius:12px; font-size:15px; outline:none; background:#FBFDFF; transition:border-color .2s, box-shadow .2s, background .2s; font-family:inherit; }
.field input:focus, .field textarea:focus { border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(29,111,242,.12); }
.field label { position:absolute; left:14px; top:15px; font-size:15px; color:#93A8C8; pointer-events:none; transition:.2s var(--ease-out); padding:0 4px; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top:-9px; font-size:12px; color:var(--blue); background:#fff; border-radius:4px; }
.field .ok-ico { position:absolute; right:14px; top:15px; color:#10B981; font-weight:700; opacity:0; transform:scale(.5); transition:.25s var(--ease-out); }
.field.valid .ok-ico { opacity:1; transform:scale(1); }
.field.error input, .field.error textarea { border-color:#EF4444; background:#FFF8F8; }
.field .err-msg { max-height:0; overflow:hidden; color:#EF4444; font-size:12.5px; transition:max-height .25s var(--ease-out), margin .25s; margin-left:4px; }
.field.error .err-msg { max-height:30px; margin-top:6px; }
.field.error input { animation:shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-4px)} }
.check-group { margin-bottom:22px; }
.check-group .tit { font-size:14px; color:var(--gray); margin-bottom:12px; }
.checks { display:flex; flex-wrap:wrap; gap:10px; }
.chip { position:relative; }
.chip input { position:absolute; opacity:0; }
.chip span { display:inline-block; padding:9px 18px; border-radius:999px; border:1.5px solid #DCE7F5; font-size:13.5px; color:#47648C; cursor:pointer; transition:.2s var(--ease-out); user-select:none; }
.chip span:hover { border-color:var(--blue2); color:var(--blue); }
.chip input:checked + span { background:linear-gradient(90deg,var(--blue),var(--blue2)); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(29,111,242,.3); transform:scale(1.04); }
.slider-verify { position:relative; height:48px; background:#F0F5FC; border-radius:12px; margin-bottom:24px; overflow:hidden; user-select:none; border:1.5px solid #DCE7F5; }
.slider-verify .fill { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,rgba(29,111,242,.25),rgba(14,165,233,.35)); }
.slider-verify .txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13.5px; color:#7C93B8; pointer-events:none; }
.slider-verify .handle { position:absolute; left:0; top:0; width:52px; height:100%; background:linear-gradient(90deg,var(--blue),var(--blue2)); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; cursor:grab; touch-action:none; }
.slider-verify .handle:active { cursor:grabbing; }
.slider-verify.done { border-color:#10B981; }
.slider-verify.done .fill { background:linear-gradient(90deg,rgba(16,185,129,.25),rgba(16,185,129,.35)); }
.slider-verify.done .handle { background:#10B981; cursor:default; }
.slider-verify.shake-it { animation:shake .3s; }
.submit-btn { width:100%; padding:15px; font-size:16px; }
.submit-btn.loading { pointer-events:none; opacity:.85; }
.submit-btn .spin { display:none; }
.submit-btn.loading .spin { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-3px; margin-right:8px; }
@keyframes spin { to { transform:rotate(360deg); } }
.submit-btn.success { background:linear-gradient(90deg,#10B981,#0D9488); pointer-events:none; }
.form-success { text-align:center; padding:20px 0 4px; color:#10B981; font-weight:700; font-size:15px; opacity:0; transform:translateY(8px); transition:.3s var(--ease-out); }
.form-success.show { opacity:1; transform:translateY(0); }
.form-error-tip { text-align:center; padding:16px 0 4px; color:#EF4444; font-weight:600; font-size:14px; opacity:0; transition:.3s; }
.form-error-tip.show { opacity:1; }

/* ==========================================================================
   公司介绍 · 时间轴
   ========================================================================== */
.timeline { position:relative; max-width:860px; margin:0 auto; padding:20px 0; }
.timeline::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:3px; transform:translateX(-50%); background:linear-gradient(180deg,var(--blue),var(--cyan)); border-radius:3px; }
.tl-item { position:relative; width:50%; padding:0 44px 44px 0; }
.tl-item:nth-child(even) { margin-left:50%; padding:0 0 44px 44px; }
.tl-item .dot { position:absolute; top:4px; right:-9px; width:15px; height:15px; border-radius:50%; background:#fff; border:4px solid var(--blue); box-shadow:0 0 0 5px rgba(29,111,242,.15); }
.tl-item:nth-child(even) .dot { right:auto; left:-9px; }
.tl-item .tl-card { background:#fff; border:1px solid #E8F0FB; border-radius:16px; padding:22px 24px; box-shadow:0 10px 28px rgba(20,80,190,.08); transition:.25s var(--ease-out); }
.tl-item .tl-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,80,190,.14); border-color:#C4DDFC; }
.tl-item .year { font-size:13px; font-weight:800; letter-spacing:1px; color:var(--blue); margin-bottom:6px; }
.tl-item h4 { font-size:17px; margin-bottom:8px; }
.tl-item p { font-size:13.5px; color:var(--gray); line-height:1.8; }

/* ---------- 关于产品 · 产品矩阵 ---------- */
.prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.prod-card { background:#fff; border:1px solid #E8F0FB; border-radius:20px; padding:32px 26px; transition:.25s var(--ease-out); position:relative; overflow:hidden; }
.prod-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--blue),var(--cyan)); transform:scaleX(0); transform-origin:left; transition:.3s var(--ease-out); }
.prod-card:hover { transform:translateY(-6px); box-shadow:0 22px 48px rgba(20,80,190,.14); border-color:#C4DDFC; }
.prod-card:hover::before { transform:scaleX(1); }
.prod-card .ico { width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:25px; margin-bottom:18px; }
.prod-card h3 { font-size:17.5px; margin-bottom:10px; }
.prod-card p { font-size:13.5px; color:var(--gray); line-height:1.85; }
.prod-card .go { display:inline-block; margin-top:16px; font-size:13.5px; font-weight:700; color:var(--blue); }
.prod-card .go::after { content:"→"; margin-left:6px; display:inline-block; transition:transform .2s; }
.prod-card:hover .go::after { transform:translateX(4px); }

/* ---------- 地接版详情 ---------- */
.drp-hero-points { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px; }
.drp-hero-points .dp { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(8px); border-radius:16px; padding:22px 18px; text-align:center; transition:.25s var(--ease-out); }
.drp-hero-points .dp:hover { background:rgba(255,255,255,.22); transform:translateY(-4px); }
.drp-hero-points .dp .ico { font-size:26px; margin-bottom:10px; }
.drp-hero-points .dp b { font-size:15.5px; }
.drp-feat { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.drp-feat .df { background:#fff; border:1px solid #E8F0FB; border-radius:20px; padding:32px 30px; transition:.25s var(--ease-out); }
.drp-feat .df:hover { transform:translateY(-5px); box-shadow:0 20px 46px rgba(20,80,190,.14); border-color:#C4DDFC; }
.drp-feat .df .df-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.drp-feat .df .df-head .ico { width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:21px; }
.drp-feat .df h3 { font-size:17.5px; }
.drp-feat .df ul { list-style:none; }
.drp-feat .df ul li { position:relative; padding:7px 0 7px 24px; font-size:14px; color:#47648C; line-height:1.8; }
.drp-feat .df ul li::before { content:""; position:absolute; left:2px; top:15px; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--cyan)); }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; max-width:980px; margin:0 auto; }
.steps .step { text-align:center; position:relative; padding:0 12px; }
.steps .step .circle { width:76px; height:76px; margin:0 auto 16px; border-radius:50%; background:#fff; border:2px solid #DCE9FA; display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 10px 26px rgba(20,80,190,.1); transition:.25s var(--ease-out); position:relative; z-index:2; }
.steps .step:hover .circle { transform:scale(1.1); border-color:var(--blue); }
.steps .step::before { content:""; position:absolute; top:38px; left:calc(-50% + 44px); right:calc(50% + 44px); height:2px; background:repeating-linear-gradient(90deg,#BBD6FA 0 8px, transparent 8px 16px); z-index:1; }
.steps .step:first-child::before { display:none; }
.steps .step b { display:block; font-size:15.5px; margin-bottom:6px; }
.steps .step span { font-size:13px; color:var(--gray); }

/* ---------- 关于产品 · 客户墙 ---------- */
.cust-wall { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.cust-wall .cust { background:#fff; border:1px solid #E8F0FB; border-radius:16px; padding:26px 16px; text-align:center; transition:.25s var(--ease-out); }
.cust-wall .cust:hover { transform:translateY(-4px); box-shadow:0 16px 38px rgba(20,80,190,.12); border-color:#C4DDFC; }
.cust-wall .cust img { height:46px; width:auto; max-width:100%; object-fit:contain; filter:grayscale(1); opacity:.65; transition:.25s; }
.cust-wall .cust:hover img { filter:none; opacity:1; }
.cust-wall .cust p { font-size:12.5px; color:var(--gray); margin-top:14px; line-height:1.6; }

/* ---------- 系统架构图（关于产品页，原 about_07.png 代码化重绘） ---------- */
.arch { max-width:980px; margin:0 auto; }
.arch-row { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.arch-top span { background:#E9F3FF; color:var(--blue); border:1px solid #D6E7FF; padding:9px 22px; border-radius:999px; font-size:13.5px; font-weight:600; }
.arch-mid { display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:22px; margin:28px 0; align-items:start; }
.arch-col { background:#fff; border:1px solid #E8F0FB; border-radius:18px; padding:20px; box-shadow:0 12px 34px rgba(20,80,190,.08); display:flex; flex-direction:column; gap:10px; }
.arch-core { border-color:rgba(29,111,242,.35); box-shadow:0 18px 44px rgba(20,80,190,.16); transform:scale(1.03); }
.arch-head { text-align:center; font-weight:800; font-size:15.5px; padding:11px; border-radius:12px; margin-bottom:6px; }
.ah-l { background:#EBF3FF; color:var(--blue); }
.ah-c { background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; }
.ah-r { background:#E6FAFD; color:#0891B2; }
.arch-item { background:#F8FBFF; border:1px solid #EEF3FB; border-radius:10px; text-align:center; padding:9px 8px; font-size:13.5px; color:#47648C; transition:.2s; }
.arch-item:hover { border-color:#C4DDFC; color:var(--blue); }
.arch-bottom span { background:linear-gradient(90deg,var(--blue),var(--cyan)); color:#fff; padding:11px 44px; border-radius:999px; font-size:14px; font-weight:700; box-shadow:0 10px 26px rgba(29,111,242,.3); }

/* ---------- 我们Team（公司介绍页） ---------- */
.team-panel { max-width:860px; margin:0 auto; position:relative; background:linear-gradient(135deg,#EFF6FF,#F5FBFF); border:1px solid #E0EDFF; border-radius:22px; padding:42px 46px; font-size:15px; line-height:2.15; color:#47648C; }
.team-panel::before { content:"“"; position:absolute; top:6px; left:26px; font-size:80px; line-height:1; color:rgba(29,111,242,.14); font-family:Georgia,serif; }
.team-panel p { margin-bottom:14px; position:relative; }
.team-panel p:last-child { margin-bottom:0; }

/* ---------- 渠道代理 ---------- */
.channel-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.channel-info { background:#fff; border:1px solid #E8F0FB; border-radius:20px; padding:36px; }
.channel-info .lead { font-size:15px; line-height:2; color:#47648C; margin-bottom:24px; }
.channel-info h3 { font-size:17px; margin:22px 0 14px; display:flex; align-items:center; gap:10px; }
.channel-info h3::before { content:""; width:5px; height:18px; border-radius:3px; background:linear-gradient(180deg,var(--blue),var(--cyan)); }
.channel-info ol { list-style:none; }
.channel-info ol li { position:relative; padding:9px 0 9px 26px; font-size:14px; color:#47648C; line-height:1.8; }
.channel-info ol li::before { content:"✓"; position:absolute; left:0; top:10px; width:18px; height:18px; border-radius:50%; background:#E3EFFE; color:var(--blue); font-size:11px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.channel-info ol li b { color:var(--ink); }
.channel-info .hotline { margin-top:26px; background:linear-gradient(135deg,#EEF4FE,#E6F7FE); border-radius:14px; padding:18px 22px; font-size:14.5px; color:#33455F; line-height:2; }
.channel-info .hotline b { color:var(--blue); }

/* ==========================================================================
   404 / 成功页
   ========================================================================== */
.state-page { min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:140px 24px 90px; }
.state-page .big { font-size:110px; font-weight:900; line-height:1; background:linear-gradient(135deg,var(--blue),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.state-page .state-ico { font-size:72px; margin-bottom:10px; }
.state-page h2 { font-size:24px; margin:18px 0 10px; }
.state-page p { color:var(--gray); margin-bottom:30px; }

/* ==========================================================================
   页脚
   ========================================================================== */
footer.site-footer { background:var(--navy); color:#7C8DA8; padding:52px 24px 0; font-size:13.5px; position:relative; overflow:hidden; }
footer.site-footer::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:rgba(34,211,238,.05); top:-200px; right:-120px; }
.foot-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.08); position:relative; z-index:2; }
.foot-inner h5 { color:#C7D5EA; font-size:15px; margin-bottom:16px; }
.foot-col a { display:inline-block; margin:0 16px 10px 0; transition:color .2s, transform .2s; }
.foot-col a:hover { color:var(--cyan); transform:translateX(3px); }
.foot-col p { line-height:2.2; }
.foot-col .f-ico { margin-right:8px; opacity:.8; }
.foot-qrs { display:flex; gap:20px; }
.foot-qrs .qr { text-align:center; }
.foot-qrs .qr img { width:92px; height:92px; border-radius:12px; background:#fff; padding:5px; transition:transform .25s var(--ease-out); }
.foot-qrs .qr:hover img { transform:scale(1.06); }
.foot-qrs .qr p { margin-top:8px; font-size:12.5px; }
.copyright { text-align:center; padding:22px 0; font-size:12.5px; color:#5A6C8C; position:relative; z-index:2; }
.copyright a { color:#5A6C8C; }
.copyright a:hover { color:var(--cyan); }

/* ---------- 回到顶部 ---------- */
.back-top { position:fixed; right:26px; bottom:26px; width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; border:none; font-size:20px; cursor:pointer; box-shadow:0 10px 26px rgba(29,111,242,.4); opacity:0; transform:translateY(16px); pointer-events:none; transition:.3s var(--ease-out); z-index:90; }
.back-top.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.back-top:hover { transform:translateY(-3px); }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:960px) {
  .hero > *, .page-hero > * { min-width:0; }
  .hero { grid-template-columns:1fr; padding:130px 24px 120px; text-align:center; }
  .hero h1 { font-size:32px; }
  .hero p.sub { margin-left:auto; margin-right:auto; }
  .mock-wrap { max-width:520px; margin:0 auto; }
  .mock { transform:none; }
  .mock-body { grid-template-columns:88px 1fr; }
  .mock-cards div b { font-size:15px; }
  .float-cards, .adv, .news-panel, .prod-grid, .cust-wall { grid-template-columns:1fr; }
  .product { grid-template-columns:1fr; }
  .band { grid-template-columns:1fr 1fr; padding:44px 20px; }
  .band .num { font-size:30px; }
  .page-hero h1 { font-size:28px; }
  .sub-layout { grid-template-columns:1fr; padding:44px 20px 64px; }
  .side-nav { position:static; }
  .main-panel { padding:26px 22px; }
  .contact-grid, .channel-grid { grid-template-columns:1fr; }
  .drp-hero-points { grid-template-columns:1fr 1fr; }
  .drp-feat { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr 1fr; gap:24px; }
  .steps .step::before { display:none; }
  .timeline::before { left:10px; }
  .tl-item, .tl-item:nth-child(even) { width:100%; margin-left:0; padding:0 0 32px 36px; }
  .tl-item .dot, .tl-item:nth-child(even) .dot { left:3px; right:auto; }
  .foot-inner { grid-template-columns:1fr; gap:28px; }
  .sec-head h2 { font-size:28px; }
  .apply-inner .head h2 { font-size:26px; }
  .form-card { padding:26px 20px; }
  .team-panel { padding:30px 24px; }
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:block; }
  /* Hero 双按钮窄屏自动换行居中，避免小屏错位 */
  .hero-btns { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
  .hero-btns .btn-outline { margin-left:0; }
  /* 系统架构图：移动端单列 */
  .arch-mid { grid-template-columns:1fr; }
  .arch-core { transform:none; }
  /* 菜单展开态盖住整屏时，头部需在其上层，否则 Logo 和关闭按钮被遮挡 */
  .site-header { z-index:102; }
  /* 移动端菜单：分组层级（一级栏目 + 缩进二级项 + 当前页高亮） */
  .mobile-menu { display:block; position:fixed; top:0; left:0; right:0; bottom:0; z-index:101; background:rgba(21,34,56,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:92px 30px 34px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s; }
  .mobile-menu.open { opacity:1; visibility:visible; transform:translateY(0); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); }
  .mobile-menu a { color:#fff; text-decoration:none; }
  .m-group { border-bottom:1px solid rgba(255,255,255,.08); padding:7px 0; opacity:0; transform:translateX(-14px); transition:opacity .35s var(--ease-out), transform .35s var(--ease-out); }
  .mobile-menu.open .m-group, .mobile-menu.open .m-cta { opacity:1; transform:translateX(0); }
  .mobile-menu.open .m-group:nth-of-type(1){transition-delay:.04s} .mobile-menu.open .m-group:nth-of-type(2){transition-delay:.09s}
  .mobile-menu.open .m-group:nth-of-type(3){transition-delay:.14s} .mobile-menu.open .m-group:nth-of-type(4){transition-delay:.19s}
  .mobile-menu.open .m-group:nth-of-type(5){transition-delay:.24s} .mobile-menu.open .m-cta{transition-delay:.29s}
  .m-parent { display:flex; align-items:center; justify-content:space-between; padding:11px 4px; font-size:17px; font-weight:600; }
  .m-parent.active { color:var(--cyan); }
  .m-parent.active::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); margin-right:10px; box-shadow:0 0 10px rgba(34,211,238,.8); }
  .m-parent.active { justify-content:flex-start; }
  .m-sub { margin:2px 0 8px 10px; padding-left:14px; border-left:2px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:2px; }
  .m-sub a { padding:9px 12px; font-size:14.5px; color:rgba(255,255,255,.66); border-radius:8px; transition:.2s; }
  .m-sub a:active { background:rgba(255,255,255,.06); }
  .m-sub a.active { color:var(--cyan); background:rgba(34,211,238,.12); font-weight:600; }
  .m-cta { display:block; margin-top:24px; text-align:center; padding:15px; border-radius:14px; background:linear-gradient(135deg,var(--blue),var(--blue2)); font-weight:700; font-size:16px; box-shadow:0 10px 26px rgba(14,90,220,.4); opacity:0; transform:translateX(-14px); transition:opacity .35s var(--ease-out), transform .35s var(--ease-out); }
}

/* ---------- 减少动画偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; }
  .reveal, .anim { opacity:1 !important; transform:none !important; }
}