/* ============================================================
 *  广西专享广电卡 站点样式
 *  主色：#0B5FDA ｜ 配色：白底 + 蓝主 + 红强调（中国广电）
 *  字体：Noto Sans SC（免费可商用 SIL OFL 1.1）
 *  桌面断点 1024px起步
 * ============================================================ */

:root{
  --brand:#0B5FDA;
  --brand-deep:#084BB8;
  --brand-light:#EEF3FF;
  --brand-soft:#F4F8FF;
  --accent:#E60012;
  --accent-deep:#B8000E;
  --accent-soft:#FFEAEA;
  --warn:#D97706;
  --warn-soft:#FEF3C7;
  --ok:#10B981;
  --ok-soft:#D1FAE5;
  --text:#1F2937;
  --text-soft:#4B5563;
  --muted:#6B7280;
  --line:#E5E7EB;
  --line-soft:#EFF1F5;
  --bg:#FFFFFF;
  --bg-soft:#F6F8FC;
  --bg-deep:#F0F4FB;
  --shadow-sm:0 2px 8px rgba(15, 36, 80, .06);
  --shadow-md:0 10px 30px rgba(15, 36, 80, .08);
  --shadow-lg:0 24px 60px rgba(15, 36, 80, .12);
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --gap:16px;
  --pad-section:64px;
}

/* ============ 基础 ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px}
body{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{overflow:hidden}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-deep)}
img{max-width:100%; height:auto; display:block}
ul,ol{margin:0; padding:0; list-style:none}
button{font-family:inherit; cursor:pointer; border:0; background:transparent}
h1,h2,h3,h4{margin:0 0 .6em; line-height:1.3; color:var(--text); font-weight:700}
.container{max-width:1180px; margin:0 auto; padding:0 20px}
.section{padding:var(--pad-section) 0}
@media (max-width:768px){.section{padding:48px 0}}

/* ============ 顶部导航 ============ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-bar{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  display:flex; align-items:center; gap:8px;
  color:var(--brand); font-weight:700; font-size:18px;
}
.brand-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,#0B5FDA 0%, #2E7BFA 100%);
  color:#fff; font-size:20px;
}
.nav-menu{
  display:flex; align-items:center; gap:6px;
}
.nav-link{
  display:inline-flex; align-items:center;
  padding:8px 14px; border-radius:8px;
  color:var(--text-soft); font-weight:500;
  transition:background .2s, color .2s;
}
.nav-link:hover{background:var(--brand-light); color:var(--brand)}
.nav-cta{
  display:inline-flex; align-items:center;
  margin-left:8px;
  padding:8px 20px; border-radius:999px;
  background:linear-gradient(135deg,#E60012 0%,#FF3D45 100%);
  color:#fff; font-weight:600;
  box-shadow:0 4px 14px rgba(230,0,18,.28);
  transition:transform .2s, box-shadow .2s;
}
.nav-cta:hover{color:#fff; transform:translateY(-1px); box-shadow:0 8px 22px rgba(230,0,18,.36)}
.nav-toggle{
  display:none;
  font-size:24px; color:var(--text);
  padding:6px 8px; border-radius:8px;
}
.nav-toggle:hover{background:var(--brand-light); color:var(--brand)}
@media (max-width:1024px){
  .nav-toggle{display:inline-flex}
  .nav-menu{
    position:absolute; top:64px; left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:#fff; border-bottom:1px solid var(--line-soft);
    padding:12px 20px 20px;
    display:none;
    box-shadow:var(--shadow-md);
  }
  .nav-menu.is-open{display:flex}
  .nav-menu li{width:100%}
  .nav-link,.nav-cta{
    width:auto; padding:12px 14px; font-size:16px; justify-content:flex-start;
  }
  .nav-cta{justify-content:center; margin-top:8px}
}

/* ============ Hero 首屏 ============ */
.hero{
  position:relative;
  padding:80px 0 90px;
  background:
    radial-gradient(1200px 600px at 90% -20%, rgba(11,95,218,.10), transparent 60%),
    radial-gradient(800px 500px at -10% 100%, rgba(230,0,18,.08), transparent 60%),
    linear-gradient(180deg,#FAFCFF 0%,#F2F6FE 100%);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(11,95,218,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,95,218,.05) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.8), transparent 85%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.8), transparent 85%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px; align-items:center;
}
.hero-tag{
  display:inline-block;
  padding:6px 14px; border-radius:999px;
  background:var(--brand-light); color:var(--brand);
  font-size:13px; font-weight:500;
  margin-bottom:18px;
}
.hero-title{
  font-size:42px; line-height:1.18; letter-spacing:-.5px;
  margin-bottom:18px;
}
.hero-title .accent{
  color:var(--accent); display:inline-block;
  font-size:54px; font-weight:900;
}
.hero-subtitle{font-size:17px; color:var(--text-soft); margin-bottom:24px; max-width:540px}
.hero-points{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 18px;
  margin-bottom:32px;
}
.hero-points li{
  display:flex; align-items:center; gap:8px;
  color:var(--text-soft);
}
.hero-points i{color:var(--ok); font-size:18px; flex-shrink:0}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.btn-primary-lg{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 32px; border-radius:999px;
  background:linear-gradient(135deg,#0B5FDA 0%,#2E7BFA 100%);
  color:#fff; font-weight:700; font-size:16px;
  box-shadow:0 8px 22px rgba(11,95,218,.28);
  transition:transform .2s, box-shadow .2s;
}
.btn-primary-lg:hover{color:#fff; transform:translateY(-1px); box-shadow:0 12px 30px rgba(11,95,218,.38)}
.btn-ghost-lg{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 30px; border-radius:999px;
  background:#fff; color:var(--brand);
  border:1.5px solid var(--brand);
  font-weight:600;
  transition:background .2s, color .2s;
}
.btn-ghost-lg:hover{background:var(--brand); color:#fff}
.hero-meta{color:var(--muted); font-size:14px; margin:0}
.hero-media{
  position:relative;
  display:flex; justify-content:center; align-items:center;
}
.hero-media::before{
  content:""; position:absolute;
  width:84%; aspect-ratio:1/1;
  background:radial-gradient(circle, rgba(11,95,218,.18), transparent 70%);
  filter:blur(20px); z-index:0;
}
.hero-media img{
  position:relative; z-index:1;
  width:100%; max-width:520px;
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  transform:rotate(-2deg);
}
@media (max-width:1024px){
  .hero{padding:48px 0 56px}
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .hero-title{font-size:34px}
  .hero-title .accent{font-size:42px}
  .hero-subtitle{font-size:16px}
  .hero-points{grid-template-columns:1fr}
  .hero-media img{max-width:380px}
}

/* ============ 分节标题 ============ */
.sec-head{
  text-align:center;
  max-width:720px; margin:0 auto 40px;
}
.sec-eyebrow{
  display:inline-block;
  font-size:13px; letter-spacing:2px; font-weight:600;
  color:var(--brand);
  padding:4px 12px; border-radius:999px;
  background:var(--brand-light);
  margin-bottom:14px;
}
.sec-title{font-size:32px; margin-bottom:12px}
.sec-desc{color:var(--text-soft); font-size:17px; margin:0}
@media (max-width:768px){
  .sec-title{font-size:24px}
  .sec-desc{font-size:15px}
}

/* ============ 简介 ============ */
.sec-intro{background:#fff}
.intro-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.intro-card{
  background:#fff; border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:28px 24px;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.intro-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--brand-light);
}
.intro-ico{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#EEF3FF,#DAE7FF);
  color:var(--brand); font-size:24px;
  margin-bottom:16px;
}
.intro-card h3{font-size:18px}
.intro-card p{color:var(--text-soft); font-size:15px; margin:0}
@media (max-width:1024px){.intro-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){.intro-grid{grid-template-columns:1fr}}

/* ============ 优势 ============ */
.sec-advantages{background:var(--bg-deep)}
.adv-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.adv-item{
  position:relative;
  background:#fff; border-radius:var(--radius);
  padding:32px 28px;
  border:1px solid var(--line-soft);
  transition:transform .25s, box-shadow .25s;
  overflow:hidden;
}
.adv-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.adv-num{
  font-size:36px; font-weight:900;
  background:linear-gradient(135deg,#0B5FDA,#2E7BFA);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:8px;
}
.adv-item h3{font-size:18px; margin-bottom:8px}
.adv-item p{color:var(--text-soft); font-size:14.5px; margin:0}
@media (max-width:1024px){.adv-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){.adv-grid{grid-template-columns:1fr}}

/* ============ 套餐 ============ */
.sec-package{background:#fff}
.pkg-card{
  background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  border:1px solid var(--line-soft);
  overflow:hidden;
  display:grid; grid-template-columns:1fr 1.6fr;
}
.pkg-table{
  background:linear-gradient(180deg, #FAFCFF 0%, #EEF3FF 100%);
  padding:36px 30px;
}
.pkg-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 0; border-bottom:1px dashed rgba(11,95,218,.18);
}
.pkg-row:last-child{border-bottom:0}
.pkg-head{padding-top:0}
.pkg-cell{color:var(--text-soft); font-size:16px}
.pkg-val{color:var(--brand); font-weight:700; font-size:20px}
.pkg-head .pkg-val{color:var(--accent); font-size:26px; font-weight:900}
.pkg-detail{padding:36px 36px 36px 30px}
.pkg-section-title{
  display:flex; align-items:center; gap:6px;
  color:var(--text); font-weight:700; font-size:17px;
  margin:24px 0 10px;
}
.pkg-section-title:first-child{margin-top:0}
.pkg-section-title i{color:var(--brand)}
.pkg-highlight{color:var(--accent)}
.pkg-detail p{color:var(--text-soft); margin:0 0 12px; font-size:15px}
.pkg-ol{margin:0; padding-left:22px}
.pkg-ol li{color:var(--text-soft); padding:4px 0; font-size:15px; list-style:decimal}
.pkg-ol li::marker{color:var(--brand); font-weight:700}
.pkg-em{
  display:inline-block; padding:4px 10px;
  background:var(--accent-soft); color:var(--accent-deep);
  border-radius:6px; font-weight:700;
}
@media (max-width:1024px){
  .pkg-card{grid-template-columns:1fr}
  .pkg-detail{padding:28px 24px}
  .pkg-table{padding:28px 24px}
}

/* 温馨提示 */
.pkg-tips{
  background:var(--bg-soft); border-radius:var(--radius);
  padding:28px; border:1px solid var(--line-soft);
  margin-top:20px;
}
.pkg-tips-title{
  display:flex; align-items:center; gap:6px;
  font-size:18px; margin:0 0 14px;
  color:var(--text);
}
.pkg-tips-title i{color:var(--warn)}
.pkg-tips-list{padding-left:22px; margin-bottom:14px}
.pkg-tips-list li{color:var(--text-soft); padding:4px 0; font-size:14.5px; list-style:decimal}
.pkg-tips-list li::marker{color:var(--warn); font-weight:700}
.pkg-tips-warn{
  background:var(--warn-soft); color:#7C4A09;
  border-radius:8px; padding:14px 16px;
  font-size:14px; margin-bottom:14px;
  line-height:1.7;
}
.pkg-tips-apply{
  background:var(--accent-soft); color:var(--accent-deep);
  border-radius:8px; padding:14px 16px;
  font-size:14px; margin:0;
  line-height:1.8;
}
.pkg-tips-apply strong{color:var(--accent-deep); display:block; margin-bottom:6px; font-size:15px}

/* 机型适配 */
.pkg-qr{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; margin:20px 0 0;
}
.pkg-qr img{
  width:160px; height:160px;
  padding:8px; background:#fff;
  border-radius:12px; border:1px solid var(--line);
  margin-bottom:8px;
}
.pkg-qr p{color:var(--text-soft); font-size:13px; margin:0; max-width:300px}

/* 套餐基础信息 */
.pkg-facts{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:14px; margin-top:20px;
}
.fact{
  display:flex; gap:12px; align-items:center;
  background:#fff; border-radius:var(--radius);
  padding:16px 18px;
  border:1px solid var(--line-soft);
  transition:border-color .2s, box-shadow .2s;
}
.fact:hover{border-color:var(--brand-light); box-shadow:var(--shadow-sm)}
.fact-ico{
  flex-shrink:0;
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-light); color:var(--brand); font-size:18px;
}
.fact-text{display:flex; flex-direction:column; min-width:0}
.fact-label{font-size:12px; color:var(--muted); margin-bottom:2px}
.fact-text strong{font-size:14px; color:var(--text); font-weight:600}
@media (max-width:1024px){.pkg-facts{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:480px){.pkg-facts{grid-template-columns:1fr}}

/* ============ 常见问题 ============ */
.sec-faq{background:var(--bg-deep)}
.faq-list{max-width:880px; margin:0 auto}
.faq-item{
  background:#fff; border-radius:var(--radius);
  border:1px solid var(--line-soft);
  margin-bottom:12px;
  overflow:hidden;
  transition:box-shadow .2s, border-color .2s;
}
.faq-item[open]{box-shadow:var(--shadow-sm); border-color:var(--brand-light)}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:18px 56px 18px 22px;
  display:flex; align-items:center; justify-content:space-between;
  position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{
  font-size:16px; font-weight:600; color:var(--text);
  flex:1; line-height:1.5;
}
.faq-arrow{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:18px;
  transition:transform .25s, color .2s;
}
.faq-item[open] .faq-arrow{transform:translateY(-50%) rotate(180deg); color:var(--brand)}
.faq-a{padding:0 22px 20px; border-top:1px dashed var(--line)}
.faq-a p{color:var(--text-soft); margin:14px 0 0; font-size:15px}
.faq-a strong{color:var(--accent-deep)}

/* ============ 办卡流程 ============ */
.sec-flow{background:#fff}
.flow-steps{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:20px; position:relative;
}
.flow-step{
  text-align:center; padding:24px 20px;
  background:#fff; border-radius:var(--radius);
  border:1px solid var(--line-soft);
  position:relative;
  transition:transform .25s, box-shadow .25s;
}
.flow-step:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.flow-step::after{
  content:"→"; position:absolute; right:-14px; top:50%;
  transform:translateY(-50%); color:var(--brand); font-size:22px;
  font-weight:700;
}
.flow-step:last-child::after{display:none}
.flow-num{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
  background:linear-gradient(135deg,#0B5FDA,#2E7BFA);
  color:#fff; font-size:22px; font-weight:900;
  box-shadow:0 6px 16px rgba(11,95,218,.3);
}
.flow-title{font-size:18px; margin-bottom:8px}
.flow-desc{color:var(--text-soft); font-size:14.5px; margin:0}
.flow-cta{text-align:center; margin-top:36px}
.flow-cta-note{color:var(--muted); font-size:13px; margin:14px 0 0}
@media (max-width:1024px){
  .flow-steps{grid-template-columns:repeat(2, 1fr); gap:24px}
  .flow-step::after{display:none}
}
@media (max-width:480px){.flow-steps{grid-template-columns:1fr}}

/* ============ 运营商优势 ============ */
.sec-operator{background:var(--bg-deep)}
.op-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px}
.op-card{
  background:#fff; border-radius:var(--radius);
  padding:32px 28px; border:1px solid var(--line-soft);
  display:flex; gap:18px;
  transition:transform .25s, box-shadow .25s;
}
.op-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.op-ico{
  flex-shrink:0; width:60px; height:60px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #E60012 0%, #FF3D45 100%);
  color:#fff; font-size:26px;
}
.op-card h3{font-size:18px; margin-bottom:6px}
.op-card p{color:var(--text-soft); font-size:14.5px; margin:0}
@media (max-width:768px){.op-grid{grid-template-columns:1fr}}

/* ============ 用户评价（左右滑动） ============ */
.sec-reviews{background:#fff}
.review-wrap{position:relative}
.review-viewport{
  overflow:hidden;
  margin:0 -8px;
}
.review-track{
  display:flex; gap:16px;
  padding:8px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.review-card{
  flex:0 0 calc((100% - 48px) / 3);
  background:#fff; border-radius:var(--radius);
  border:1px solid var(--line-soft);
  padding:24px 22px;
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:14px;
}
.review-head{display:flex; align-items:center; gap:12px}
.review-avatar{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, #0B5FDA, #2E7BFA);
  color:#fff; font-size:18px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.review-meta{display:flex; flex-direction:column; min-width:0}
.review-name{font-size:15px; font-weight:700; color:var(--text)}
.review-role{font-size:12px; color:var(--muted)}
.review-stars{color:#F59E0B; font-size:14px; letter-spacing:1px}
.review-text{
  color:var(--text-soft); font-size:14.5px; line-height:1.7;
  margin:0; flex:1;
}
.review-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-md);
  color:var(--brand); font-size:22px;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
  transition:background .2s, color .2s, opacity .2s;
}
.review-arrow:hover{background:var(--brand); color:#fff}
.review-arrow:disabled{opacity:.4; cursor:not-allowed}
.review-prev{left:-8px}
.review-next{right:-8px}
@media (max-width:1024px){.review-card{flex:0 0 calc((100% - 32px) / 2)}}
@media (max-width:640px){
  .review-card{flex:0 0 86%}
  .review-prev{left:0}
  .review-next{right:0}
}
.review-dots{
  display:flex; justify-content:center; gap:8px;
  margin-top:24px;
}
.review-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--line); transition:width .25s, background .25s;
}
.review-dot.is-active{width:24px; background:var(--brand)}

/* ============ 网站底部 ============ */
.site-footer{
  background:#0F1B36; color:#D6DDEA;
  padding-top:60px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:36px;
  padding-bottom:40px;
}
.footer-brand-name{
  color:#fff; font-size:20px; margin-bottom:8px;
}
.footer-brand-desc{font-size:14px; color:#9AA8C2; margin:0; line-height:1.7}
.footer-col h4{color:#fff; font-size:15px; margin-bottom:14px}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{color:#C9D3E5; font-size:14px; transition:color .2s}
.footer-col ul li a:hover{color:#fff}
.footer-declare{
  font-size:13px; line-height:1.7; color:#9AA8C2; margin:0;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:18px 0;
}
.footer-bottom-inner{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  font-size:13px; color:#8FA0C0;
}
.footer-bottom-inner p{margin:0}
@media (max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr; gap:28px}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ============ 桌面端右侧浮动图标 ============ */
.side-fab{
  position:fixed; right:18px; bottom:120px;
  display:flex; flex-direction:column; gap:10px;
  z-index:50;
}
.side-fab-item{
  width:64px; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(255,255,255,.94);
  border-radius:14px;
  padding:8px 4px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line-soft);
  transition:transform .2s, box-shadow .2s;
}
.side-fab-item:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.side-fab-label{
  font-size:12px; color:var(--text-soft);
}
.side-fab-btn{
  width:48px; height:48px; border-radius:14px;
  background:#fff;
  color:var(--brand);
  font-size:22px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
}
.side-fab-btn:hover{transform:translateY(-2px); background:var(--brand); color:#fff; box-shadow:0 10px 26px rgba(11,95,218,.36)}

/* 联系客服悬浮气泡 */
.side-fab-contact{position:relative}
.side-fab-popover{
  position:absolute; right:calc(100% + 12px); bottom:0;
  width:170px; padding:14px 12px;
  background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  text-align:center;
  opacity:0; visibility:hidden;
  transform:translateX(8px);
  transition:opacity .2s, transform .2s, visibility 0s .2s;
}
.side-fab-contact:hover .side-fab-popover,
.side-fab-popover.is-show{
  opacity:1; visibility:visible;
  transform:translateX(0);
  transition:opacity .2s, transform .2s;
}
.side-fab-popover img{
  width:130px; height:130px; margin:0 auto 8px;
  border-radius:8px;
  background:#fff;
}
.side-fab-pop-text{font-size:12px; color:var(--muted); margin:0 0 4px}
.side-fab-pop-wx{
  display:inline-block;
  font-size:14px; font-weight:700; color:var(--brand);
  padding:4px 10px; border-radius:6px;
  background:var(--brand-light);
  cursor:pointer;
}
.side-fab-pop-wx:hover{background:var(--brand); color:#fff}
.side-fab-pop-tip{
  font-size:12px; color:var(--ok);
  background:var(--ok-soft); border-radius:6px;
  padding:6px 8px; margin:8px 0 0;
  opacity:0; max-height:0; overflow:hidden; padding-top:0; padding-bottom:0;
  transition:opacity .2s, max-height .25s, padding .25s;
}
.side-fab-pop-tip.is-show{opacity:1; max-height:60px; padding:6px 8px}
.side-fab-pop-tip::before{content:"✓ "; font-weight:900}

@media (max-width:1024px){.side-fab{display:none}}

/* ============ 移动端底部固定项 ============ */
.mobile-tabbar{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:55;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--line-soft);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
.tab-item{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 0;
  color:var(--text-soft); font-size:11px;
  text-decoration:none;
}
.tab-item i{font-size:22px}
.tab-item:hover{color:var(--brand)}
.tab-apply{
  background:linear-gradient(180deg, transparent 0%, rgba(230,0,18,.06) 100%);
  color:var(--accent-deep);
}
.tab-apply i{color:var(--accent)}
.tab-apply:hover{color:var(--accent)}
.tab-top{color:var(--text-soft)}
.tab-top:hover{color:var(--brand)}
@media (max-width:1024px){.mobile-tabbar{display:flex}}

/* 桌面端隐藏 tabbar / 移动端右侧留出空间 */
@media (min-width:1025px){
  .mobile-tabbar{display:none}
}

/* ============ 联系客服弹层 ============ */
.contact-modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.contact-modal[hidden]{display:none}
.contact-mask{
  position:absolute; inset:0;
  background:rgba(15,27,54,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation:fadeIn .2s ease;
}
.contact-panel{
  position:relative; z-index:1;
  width:100%; max-width:380px;
  background:#fff; border-radius:var(--radius-lg);
  padding:30px 28px 28px;
  box-shadow:var(--shadow-lg);
  animation:popIn .25s cubic-bezier(.22,.61,.36,1);
}
.contact-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%;
  background:var(--bg-soft); color:var(--text-soft);
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.contact-close:hover{background:var(--accent); color:#fff}
.contact-title{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:22px; margin-bottom:8px;
  color:var(--text); text-align:center;
}
.contact-title i{color:var(--brand); font-size:24px}
.contact-desc{
  text-align:center; color:var(--text-soft);
  font-size:14px; margin:0 0 18px;
}
.contact-qr{
  display:flex; justify-content:center; margin-bottom:14px;
}
.contact-qr img{
  width:180px; height:180px;
  border-radius:12px; border:1px solid var(--line); padding:6px;
}
.contact-wx-label{
  text-align:center; color:var(--muted);
  font-size:12px; margin:8px 0 6px;
}
.contact-wx{
  display:block; text-align:center;
  font-size:18px; font-weight:700; color:var(--brand);
  padding:8px 12px; border-radius:10px;
  background:var(--brand-light);
  letter-spacing:1px;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.contact-wx:hover{background:var(--brand); color:#fff}
.contact-tip{
  text-align:center;
  font-size:13px; color:var(--ok);
  background:var(--ok-soft); border-radius:8px;
  padding:0; margin:8px 0 0;
  max-height:0; overflow:hidden;
  opacity:0;
  transition:opacity .2s, padding .25s, max-height .25s;
}
.contact-tip.is-show{opacity:1; padding:8px 12px; max-height:60px}
.contact-tip::before{content:"✓ "; font-weight:900}

@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes popIn{from{opacity:0; transform:scale(.94) translateY(10px)} to{opacity:1; transform:scale(1) translateY(0)}}

/* 增加移动端 Hero 媒体区与侧边浮动区不重叠 */
@media (max-width:1024px){
  body{padding-bottom:64px}
}
@media (min-width:1025px){
  body{padding-bottom:0}
}

/* 无障碍焦点态 */
:focus-visible{
  outline:3px solid rgba(11,95,218,.4);
  outline-offset:2px;
  border-radius:6px;
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}