/* ============================================================
   骏马科技 · 心理网页  ——  全站公共样式
   设计令牌 / 基础元素 / 顶部导航 / 横幅骨架 / 页脚 / 悬浮组件
   （首页 index.html 与产品中心页 products.html 共用）
   ============================================================ */
:root{
  --cyan:#36bb8c;      --cyan-d:#2f9e77;   --cyan-l:#8fdcb8;
  --orange:#fb8a2e;    --green:#00ad45;    --red:#e04646;
  --red-d:#c73a40;     --amber:#ffc107;    --leaf:#8bc34a;  --orange-t:#ff9800;
  --ink:#333;          --ink-2:#4a4a4a;    --ink-3:#777;   --ink-4:#999;
  --line:#dcdcdc;      --line-2:#e8e8e8;   --bg:#f3f3f3;   --dark:#111;
  --card-sh:10px 10px 11px #d7d7d7;
  --container:1371px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.42857;-webkit-font-smoothing:antialiased;
}
img{vertical-align:middle;max-width:100%}
a{text-decoration:none;color:inherit;transition:.35s all}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p{margin:0}
h1,h2,h3,h4,h5,h6{line-height:1.15}
button{font-family:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 15px;width:100%}

/* 区块通用 */
.sec{padding:5em 0}
.sec.white{background:#fff}
.sec.dots{background-color:#f3f3f3;background-image:radial-gradient(rgba(0,0,0,.045) 1px,transparent 1px);background-size:3px 3px}
h3.heading{
  font-size:45px;font-weight:400;text-align:center;margin-bottom:1em;
  color:var(--ink);letter-spacing:0;
}
h3.heading span{font-weight:400;color:var(--cyan);border-bottom:2px solid var(--cyan);margin-left:14px}

/* ============================================================
   顶部导航 + 横幅（首页轮播 / 内页静态横幅共用骨架）
   ============================================================ */
.banner{position:relative;background:#0d1f24}
.header{position:absolute;top:0;left:0;width:100%;z-index:120;padding:24px 0 22px}
.header::before{
  content:"";position:absolute;inset:0 0 auto 0;height:210px;
  background:linear-gradient(to bottom,rgba(6,26,33,.58),rgba(6,26,33,.26) 52%,rgba(6,26,33,0));
  pointer-events:none;z-index:-1;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

/* logo */
.logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.logo-tile{
  width:54px;height:54px;border-radius:15px;flex:0 0 54px;
  background:linear-gradient(140deg,#4cc98f 0%,#2f9e77 62%,#1f7d58 100%);
  color:#fff;font-size:30px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(47,158,119,.42),inset 0 0 0 1px rgba(255,255,255,.22);
}
.logo-text b{display:block;font-size:24px;font-weight:700;color:#fff;letter-spacing:1.5px;line-height:1.15;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.logo-text i{display:block;font-style:normal;font-size:10px;letter-spacing:2.6px;color:#bdeaf3;text-transform:uppercase;margin-top:2px;text-shadow:0 1px 6px rgba(0,0,0,.35)}
/* 页脚深色底上的 logo */
.footer .logo-text b{color:#fff;font-size:22px;text-shadow:none}
.footer .logo-text i{color:#8fd9e6;text-shadow:none}

/* nav */
.nav{display:flex;align-items:center;gap:1em;flex-wrap:nowrap}
.nav a{
  display:block;color:#fff;font-size:17px;padding:8px 20px;white-space:nowrap;
  letter-spacing:1px;text-shadow:0 1px 8px rgba(0,0,0,.42);
}
.nav a:hover,.nav a.on{background:var(--cyan);text-shadow:none}
/* 导航右侧咨询热线（参考站样式：电话图标 + 号码，固定在导航条最右端，与菜单拉开距离） */
.nav .nav-hotline{
  display:inline-flex;align-items:center;gap:7px;padding:7px 16px;
  border:1.5px solid rgba(255,255,255,.6);border-radius:999px;color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.4px;white-space:nowrap;text-shadow:none;
  position:absolute;right:26px;top:50%;transform:translateY(-50%);z-index:2;
}
.nav .nav-hotline svg{width:16px;height:16px}
.nav .nav-hotline:hover{background:rgba(255,255,255,.2);text-shadow:none}
.sticky-nav .nav .nav-hotline{padding:5px 13px;font-size:14px}
/* 菜单为热线预留右侧空间，避免窄屏时重叠 */
.header .nav,.page-nav .nav,.sticky-nav .nav{padding-right:180px}
@media (max-width:1366px){
  .header .nav,.page-nav .nav,.sticky-nav .nav{padding-right:200px}
}
.nav-toggle{
  display:none;width:46px;height:40px;border:1px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.18);border-radius:6px;color:#fff;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle svg{width:22px;height:22px}

/* 滚动后出现的固定导航 */
.sticky-nav{
  position:fixed;top:0;left:0;width:100%;z-index:300;background:rgba(9,32,40,.94);
  backdrop-filter:blur(8px);transform:translateY(-100%);transition:transform .4s;
  box-shadow:0 6px 26px rgba(0,0,0,.22);
}
.sticky-nav.show{transform:translateY(0)}
.sticky-nav .container{display:flex;align-items:center;justify-content:space-between;height:70px}
.sticky-nav .logo-tile{width:42px;height:42px;flex:0 0 42px;font-size:23px;border-radius:12px}
.sticky-nav .logo-text b{font-size:19px;text-shadow:none}
.sticky-nav .logo-text i{font-size:9px;text-shadow:none}
.sticky-nav .nav a{padding:6px 15px;font-size:15px;text-shadow:none}

/* 首页轮播 */
.slider{position:relative;height:770px;overflow:hidden}
.slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  transition:opacity .9s ease,visibility .9s;
}
.slide.on{opacity:1;visibility:visible}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,24,30,.14),rgba(5,24,30,0) 32%)}
.slider-dots{position:absolute;left:8%;bottom:7%;display:flex;z-index:20}
.slider-dots button{
  width:67px;height:6px;border:none;padding:0;cursor:pointer;
  background:#8a8b88;opacity:.85;transition:.3s;margin-right:6px;
}
.slider-dots button.on{background:#f3b907;opacity:1}

/* ============================================================
   页脚
   ============================================================ */
.footer{background:var(--dark);padding:3em 0 0}
.footer-nav{display:flex;align-items:flex-start;padding-top:15px}
.footer-cols{display:flex;width:77%}
.footer-cols ul{width:25%;padding:0;margin:0}
.footer-cols li{height:35px;line-height:35px;overflow:hidden}
.footer-cols a{display:inline-block;padding:0 10px;color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.footer-cols a:hover{color:var(--cyan)}
.footer-cols .head a{font-size:18px;font-weight:600}
.footer-qr{display:flex;gap:20px;margin-left:auto}
.footer-qr div{width:125px;text-align:center;color:#fff;font-size:13px}
.footer-qr img{width:125px;display:block;margin-bottom:6px;border-radius:4px;background:#fff;padding:4px}
.footer-meta{margin-top:18px;border-top:1px solid #323232;padding:22px 0 2em;display:flex;align-items:center}
.footer-meta .fm-brand{width:50%;padding-left:140px}
.footer-meta .fm-text{flex:1;color:#fff;font-size:14px;line-height:36px}
.footer-meta .fm-text a{color:#fff}
.footer-meta .fm-text a:hover{color:var(--cyan)}
.copyright{background:#363636;color:#fff;text-align:center;padding:13px 15px 1em;font-size:15px;letter-spacing:2px}
.copyright a{color:#fff}
.copyright a:hover{color:var(--cyan)}

/* ============================================================
   悬浮客服条 / 回到顶部 / 灯箱
   ============================================================ */
.float-bar{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:260}
.fb-toggle{
  width:50px;padding:16px 6px;background:var(--cyan);color:#fff;cursor:pointer;
  border:none;border-radius:0 8px 8px 0;font-size:14px;letter-spacing:3px;
  writing-mode:vertical-rl;text-orientation:upright;box-shadow:4px 4px 16px rgba(0,0,0,.16);
}
.fb-toggle:hover{background:var(--cyan-d)}
.fb-panel{
  position:absolute;left:58px;top:50%;transform:translateY(-50%) scale(.94);
  width:250px;background:#fff;border-radius:10px;padding:8px 0;
  box-shadow:0 16px 50px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:.28s all;
}
.fb-panel.show{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}
.fb-panel::before{
  content:"";position:absolute;left:-7px;top:50%;margin-top:-7px;
  border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #fff;
}
.fb-panel li{display:flex;align-items:center;gap:12px;padding:12px 18px}
.fb-panel li + li{border-top:1px dashed #eee}
.fb-panel .ic{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:rgba(54,187,140,.12);color:var(--cyan);display:flex;align-items:center;justify-content:center}
.fb-panel .ic svg{width:17px;height:17px}
.fb-panel small{display:block;color:#999;font-size:11px;line-height:1.4}
.fb-panel b{font-size:14px;color:#222;font-weight:600}

.to-top{
  position:fixed;right:20px;bottom:28px;width:48px;height:48px;border-radius:50%;
  background:var(--cyan);color:#fff;border:none;cursor:pointer;z-index:260;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(54,187,140,.45);transition:.3s all;
}
.to-top:hover{background:var(--cyan-d);transform:translateY(-3px)}
.to-top.show{display:flex}
.to-top svg{width:22px;height:22px}

.lightbox{position:fixed;inset:0;background:rgba(8,12,14,.93);z-index:600;display:none;align-items:center;justify-content:center;padding:50px 60px}
.lightbox.on{display:flex}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.6);background:#fff}
.lb-close{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-close:hover{background:var(--cyan)}
.lb-close svg{width:22px;height:22px}

/* 加载/错误提示 */
.notice{max-width:640px;margin:70px auto;padding:26px 30px;background:#fff;border:1px solid var(--line);border-radius:8px;text-align:center;color:#555;line-height:2}
.notice b{color:#222}

/* 表单（留言 / 咨询通用） */
.form input[type="text"],.form input[type="email"],.form textarea{
  width:100%;padding:.9em 1em;font-size:14px;color:#555;background:none;
  border:1px solid #c9c9c9;outline:none;transition:.3s all;font-family:inherit;
}
.form input[type="text"]:focus,.form input[type="email"]:focus,.form textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(54,187,140,.1)}
.form input[type="email"],.form textarea{margin:1.5em 0}
.form textarea{min-height:120px;resize:none}
.form input[type="submit"]{
  padding:.8em 3em;font-size:15px;color:#fff;background:var(--cyan);
  border:none;cursor:pointer;transition:.5s all;
}
.form input[type="submit"]:hover{background:#333}
.form-msg{margin-top:14px;font-size:13px;color:var(--green);display:none}

/* ============================================================
   响应式（公共部分）
   ============================================================ */
@media (max-width:1440px){ .slider{height:720px} }
@media (max-width:1366px){ .slider{height:680px} }
@media (max-width:1280px){
  .slider{height:650px}
  .nav a{font-size:15px;padding:8px 14px}
  h3.heading{font-size:40px}
}
@media (max-width:1080px){
  .slider{height:630px}
  .logo-tile{width:46px;height:46px;flex:0 0 46px;font-size:26px;border-radius:13px}
  .logo-text b{font-size:20px}
  .nav a{font-size:14px;padding:7px 11px}
  h3.heading{font-size:38px}
  .footer-cols a{font-size:13px}
}
@media (max-width:991px){
  .sec{padding:4em 0}
  .slider{height:580px}
  .nav-toggle{display:flex}
  .nav{
    position:absolute;top:100%;left:15px;right:15px;flex-direction:column;gap:0;
    background:rgba(6,26,33,.97);border-radius:10px;padding:10px;display:none;
    box-shadow:0 18px 44px rgba(0,0,0,.34);
  }
  .nav.show{display:flex}
  .nav a{width:100%;text-align:center;padding:12px;font-size:16px;text-shadow:none}
  .header .nav,.page-nav .nav,.sticky-nav .nav{padding-right:10px}
  .nav .nav-hotline{position:static;transform:none;width:100%;justify-content:center;border:0;padding:12px;font-size:16px;border-radius:0;margin-left:0}
  .header{padding:18px 0 16px}
  .header::before{height:170px}
  .footer-nav{flex-direction:column;gap:24px}
  .footer-cols{width:100%;flex-wrap:wrap}
  .footer-cols ul{width:33.33%;margin-bottom:16px}
  .footer-qr{margin-left:0;justify-content:flex-start}
  .footer-meta{flex-direction:column;align-items:flex-start;gap:14px}
  .footer-meta .fm-brand{padding-left:0;width:auto}
  .footer-meta .fm-text{line-height:1.9}
}
@media (max-width:768px){
  .slider{height:500px}
  h3.heading{font-size:32px;margin-bottom:.7em}
  h3.heading span{margin-left:10px}
  .sec{padding:3em 0}
  .footer-cols ul{width:50%}
  .float-bar{display:none}
  .to-top{right:12px;bottom:16px;width:42px;height:42px}
  .copyright{font-size:13px;letter-spacing:1px}
}
@media (max-width:480px){
  .slider{height:420px}
  .slider-dots{left:6%;bottom:5%}
  .slider-dots button{width:44px;height:5px}
  h3.heading{font-size:27px}
  .footer-cols ul{width:100%}
  .footer-qr{flex-direction:column}
}