@charset "UTF-8";
/* ==========================================================================
   serviceTariff.css
   35FAX 官网 —— 服务资费页（serviceTariff.html）专用样式表
   --------------------------------------------------------------------------
   来源：由 serviceTariff.html 内联 <style> 原样抽离，规则未做任何改动，仅补充分区注释。
   加载顺序：必须在 css/style.css（站点公共样式）之后引入，
             因为本文件的基础重置与 :root 变量需要对公共样式做覆盖。
   依赖：本文件使用的 CSS 变量（--blue / --ink / --line 等）均在本文件 :root 内定义，
         不依赖公共样式表，可独立工作。
   命名约定：全部类名以 .fax- 前缀，避免与站点公共样式冲突。
   ========================================================================== */


/* ==========================================================================
   一、基础变量与全局重置（base）
   ========================================================================== */

/* 本页配色与尺寸变量（仅作用于 serviceTariff.html） */
:root{
  --blue:#155EEF;          /* 品牌主蓝 */
  --blue-dark:#0B3FA8;     /* 主蓝深态（hover） */
  --blue-deep:#0A2B75;     /* 深蓝（渐变起点） */
  --blue-soft:#EEF4FF;     /* 浅蓝底（hover 背景） */
  --ink:#1A2B4A;           /* 主文字色 */
  --ink-2:#5A6A85;         /* 次要文字色 */
  --ink-3:#8896AC;         /* 弱化文字色 */
  --line:#E2E8F0;          /* 分隔线 */
  --bg:#F8FAFC;            /* 页面浅灰底 */
  --green:#16A34A;         /* 成功/勾选色 */
  --radius:12px;           /* 卡片圆角 */
  --shadow:0 4px 24px rgba(18,52,143,.08); /* 卡片阴影 */
}

/* 全局盒模型重置 */
*{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(--ink);background:#fff;line-height:1.7;-webkit-font-smoothing:antialiased;}

/* 图片自适应，消除 inline 元素底部间隙 */
img{max-width:100%;display:block;}

/* 链接去下划线并继承文字色 */
a{text-decoration:none;color:inherit;}

/* 页面内容容器：最大 1100px 居中 */
.fax-container{max-width:1100px;margin:0 auto;padding:0 24px;}

/* 章节统一上下留白 */
section{padding:30px 0;}


/* ==========================================================================
   二、滚动入场动画（reveal）
   配合 JS 中的 IntersectionObserver：元素进入视口后加 .visible 触发过渡
   ========================================================================== */

.fax-reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease;}
.fax-reveal.visible{opacity:1;transform:none;}


/* ==========================================================================
   三、按钮（buttons）
   基础类 .fax-btn + 配色修饰类组合使用
   ========================================================================== */

.fax-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border-radius:8px;cursor:pointer;border:none;transition:all .2s ease;font-size:15px;}

/* 主按钮：实心蓝 */
.fax-btn-primary{background:var(--blue);color:#fff;padding:13px 32px;}
.fax-btn-primary:hover{background:var(--blue-dark);}

/* 描边按钮：透明底 + 蓝色描边 */
.fax-btn-outline{background:transparent;color:var(--blue);border:1.5px solid var(--blue);padding:12px 30px;}
.fax-btn-outline:hover{background:var(--blue-soft);}

/* 白底按钮：用于深色/渐变背景上 */
.fax-btn-white{background:#fff;color:var(--blue);padding:13px 32px;box-shadow:0 4px 16px rgba(0,0,0,.12);}
.fax-btn-white:hover{background:#F0F6FF;}

/* 白色描边按钮：用于深色/渐变背景上 */
.fax-btn-ghost-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);padding:12px 30px;}
.fax-btn-ghost-w:hover{background:rgba(255,255,255,.12);}


/* ==========================================================================
   四、顶部导航栏（navbar）
   ========================================================================== */

/* 吸顶导航 */
header#faxHeader{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);}
.fax-nav{display:flex;align-items:center;justify-content:space-between;height:64px;}

/* 站点 Logo（含图标方块 + 文字 + 英文小字） */
.fax-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--blue);}
.fax-logo .mark{width:34px;height:34px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800;}
.fax-logo small{font-size:11px;font-weight:500;color:var(--ink-3);letter-spacing:.15em;display:block;line-height:1;}

/* 主导航链接 */
.fax-nav-links{display:flex;gap:30px;align-items:center;}
.fax-nav-links a{color:var(--ink-2);font-size:14.5px;font-weight:500;transition:color .2s;}
.fax-nav-links a:hover{color:var(--blue);}

/* 导航右侧操作区（登录 + 注册/试用按钮） */
.fax-nav-cta{display:flex;gap:10px;align-items:center;}
.fax-nav-cta .fax-login{color:var(--ink-2);font-weight:600;font-size:14.5px;margin-right:6px;}
.fax-nav-cta .fax-login:hover{color:var(--blue);}
.fax-nav-cta .fax-btn-primary{padding:9px 20px;font-size:13.5px;}

/* 汉堡按钮：默认隐藏，768px 以下显示（见响应式区） */
.fax-menu-btn{display:none;background:none;border:none;cursor:pointer;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.fax-menu-btn span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;}

/* 移动端下拉菜单：默认隐藏，768px 以下由 .open 控制展开（见响应式区） */
.fax-mobile-menu{display:none;}


/* ==========================================================================
   五、首屏 Hero
   ========================================================================== */

.fax-hero{background:linear-gradient(180deg,#F0F6FF 0%,#fff 100%);padding:80px 0 60px;text-align:center;}
.fax-hero h1{font-size:clamp(28px,4.2vw,44px);font-weight:800;color:var(--ink);line-height:1.3;margin-bottom:16px;}
.fax-hero h1 em{font-style:normal;color:var(--blue);}          /* 标题内高亮词 */
.fax-hero .fax-sub{color:var(--ink-2);font-size:clamp(15px,1.6vw,18px);max-width:560px;margin:0 auto 32px;}
.fax-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}


/* ==========================================================================
   六、套餐价格卡（pricing）
   三列网格；中间卡可用 .is-featured 标为推荐（蓝色实心）
   ========================================================================== */

.fax-pricing{background:#fff;padding-top:20px;}
.fax-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}

.fax-price-card{border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;text-align:center;transition:all .25s ease;background:#fff;position:relative;}
.fax-price-card:hover{box-shadow:var(--shadow);border-color:#C7D6F0;}
.fax-price-card h3{font-size:30px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.fax-price-card .who{color:var(--ink-3);font-size:13.5px;margin-bottom:20px;}
.fax-price-card .amount{margin-bottom:20px;}
.fax-price-card .amount b{font-size:36px;font-weight:800;color:var(--blue);}
.fax-price-card .amount span{color:var(--ink-2);font-size:14px;}

/* 功能清单：用 ::before 打勾；.li-cross 表示「不支持」显示红叉 */
.fax-price-card ul{list-style:none;text-align:left;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;}
.fax-price-card li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:14px;line-height:1.6;}
.fax-price-card li::before{content:"✓";color:var(--green);font-weight:800;flex-shrink:0;}
.fax-price-card li.li-cross::before{content:"✕";color:#DC2626;}

.fax-price-card .fax-btn{width:100%;margin-bottom:16px;}
.fax-price-card .note{color:var(--ink-3);font-size:12.5px;}

/* 推荐套餐：整卡反白为品牌蓝 */
.fax-price-card.is-featured{background:#377dff;border-color:#377dff;}
.fax-price-card.is-featured:hover{box-shadow:0 8px 32px rgba(55,125,255,.25);border-color:#377dff;}
.fax-price-card.is-featured h3,.fax-price-card.is-featured .who,.fax-price-card.is-featured .amount b,.fax-price-card.is-featured .amount span,.fax-price-card.is-featured .note,.fax-price-card.is-featured li{color:#fff;}
.fax-price-card.is-featured li::before{color:rgba(255,255,255,.95);}
.fax-price-card.is-featured .fax-btn-primary{background:#fff;color:#377dff;}
.fax-price-card.is-featured .fax-btn-primary:hover{background:#F0F6FF;}

/* 价格区底部补充说明 */
.fax-price-bottom{text-align:center;margin-top:36px;color:var(--ink-2);font-size:14.5px;line-height:1.8;}
.fax-price-bottom a{color:var(--blue);font-weight:600;}
.fax-price-bottom a:hover{text-decoration:underline;}


/* ==========================================================================
   七、支付 / 汇款账户（payment account）
   微信、支付宝、对公转账三张卡
   ========================================================================== */

.fax-payment-account{margin-top:64px;}
.fax-payment-account h3{font-size:34px;font-weight:700;color:var(--ink);margin-bottom:12px;text-align:center;}
.fax-payment-account .fax-payment-subtitle{color:var(--ink-2);font-size:15px;text-align:center;margin-bottom:36px;}
.fax-payment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

.fax-payment-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:all .25s ease;}
.fax-payment-card:hover{box-shadow:var(--shadow);border-color:#C7D6F0;transform:translateY(-4px);}

/* 卡片头部：图标 + 标题 + 说明 */
.fax-payment-card .pay-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.fax-payment-card .pay-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.fax-payment-card .pay-icon.wechat{background:#07C160;color:#fff;}   /* 微信绿 */
.fax-payment-card .pay-icon.alipay{background:#1677FF;color:#fff;}   /* 支付宝蓝 */
.fax-payment-card .pay-icon.bank{background:#FF6B35;color:#fff;}     /* 对公转账橙 */
.fax-payment-card .pay-title{font-size:18px;font-weight:700;color:var(--ink);}
.fax-payment-card .pay-desc{color:var(--ink-3);font-size:13px;margin-top:2px;}

/* 账户信息行：左标签 + 右值 */
.fax-payment-card .pay-info{display:flex;flex-direction:column;gap:2px;}
.fax-payment-card .pay-row{display:flex;gap:12px;font-size:14px;line-height:1.6;}
.fax-payment-card .pay-label{color:var(--ink-3);min-width:70px;flex-shrink:0;}
.fax-payment-card .pay-value{color:var(--ink);font-weight:500;word-break:break-all;}

/* 二维码行：整行居中显示二维码图 */
.fax-payment-card .pay-row.qr-row{flex-direction:column;align-items:center;justify-content:center;padding:6px 0;}
.fax-payment-card .pay-row.qr-row img{width:100%;max-width:220px;height:auto;display:block;border-radius:8px;}


/* ==========================================================================
   八、服务保障（trust）
   四列图标卡
   ========================================================================== */

.fax-trust{background:var(--bg);text-align:center;}
.fax-trust .fax-section-head{margin-bottom:48px;}
.fax-trust .fax-section-head h2{font-size:clamp(22px,2.8vw,34px);font-weight:800;color:var(--ink);}
.fax-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}

.fax-trust-card{background:#fff;border-radius:var(--radius);padding:36px 28px;text-align:center;border:1px solid var(--line);transition:all .25s ease;}
.fax-trust-card:hover{box-shadow:var(--shadow);border-color:transparent;}
.fax-trust-card .ic{width:56px;height:56px;border-radius:14px;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 20px;}
.fax-trust-card h3{font-size:18px;font-weight:700;margin-bottom:4px;color:var(--ink);}
.fax-trust-card .sub-title{color:var(--blue);font-size:14px;font-weight:600;margin-bottom:12px;}
.fax-trust-card p{color:var(--ink-2);font-size:14px;line-height:1.7; text-align: left;}


/* ==========================================================================
   九、中部 CTA 条（cta band）
   深蓝渐变通栏
   ========================================================================== */

.fax-cta-band{background:linear-gradient(120deg,#0A2B75,#155EEF 60%,#2F7BFF);text-align:center;color:#fff;padding:60px 0;}
.fax-cta-band h2{font-size:clamp(22px,3vw,32px);font-weight:800;margin-bottom:10px;}
.fax-cta-band p{color:rgba(255,255,255,.82);margin-bottom:28px;font-size:15.5px;}
.fax-cta-band .fax-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}


/* ==========================================================================
   十、常见问题 FAQ（手风琴）
   --------------------------------------------------------------------------
   【重要】展开/收起图标（.arr）的实现原则：
   1) .arr 容器本身**不参与任何 transform**，保证其布局盒与位置恒定；
   2) 图标由 ::before / ::after 两条横杠绘制，各自绕「自身中心」旋转，
      而横杠中心与 .arr 中心严格重合（left/top:50% + margin:-1px 0 0 -7px）；
   3) 因此展开时只有旋转、没有任何左右位移（实测 centerX 前后一致）。
   ⚠ 请勿改回「在 .arr 上直接 rotate(45deg)」的写法，那会导致图标横向甩动。
   ========================================================================== */

.fax-faq{background:#fff;margin-top: 30px;margin-bottom: 30px;}
.fax-faq .fax-section-head{text-align:center;margin-bottom:44px;}
.fax-faq .fax-section-head h2{font-size:clamp(22px,2.8vw,34px);font-weight:800;}

/* 双列布局；行间距 0、列间距 32px，靠 item 的 border 形成分隔线 */
.fax-faq-list{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;}
.fax-faq-item{border-bottom:1px solid var(--line);}
.fax-faq-item:first-child{border-top:1px solid var(--line);}

/* 问题按钮：文字左、图标右（space-between） */
.fax-faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:transparent;border:none;cursor:pointer;padding:20px 4px;font-size:16px;font-weight:600;color:var(--ink);text-align:left;font-family:inherit;transition:color .2s;}
.fax-faq-q:hover{color:var(--blue);}

/* 加号 → 叉号 图标（原地旋转，零位移）
   .arr 固定 24×24；font-size/line-height 归零以隐藏 HTML 里的 ＋ 字符，
   图标完全由伪元素绘制。 */
.fax-faq-q .arr{width:24px;height:24px;display:block;position:relative;flex-shrink:0;color:var(--ink-3);font-size:0;line-height:0;}

/* 两条横杠：14×2，中心与 .arr 中心重合，绕自身中心旋转（丝滑缓慢 0.4s） */
.fax-faq-q .arr::before,.fax-faq-q .arr::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:currentColor;border-radius:1px;transform-origin:50% 50%;transition:transform .4s cubic-bezier(.4,0,.2,1);}
.fax-faq-q .arr::before{transform:rotate(0deg);}    /* 横杠：＋ 的「一」 */
.fax-faq-q .arr::after{transform:rotate(90deg);}    /* 竖杠：＋ 的「丨」 */
.fax-faq-item.open .arr::before{transform:rotate(45deg);}   /* 展开：＋ → × */
.fax-faq-item.open .arr::after{transform:rotate(135deg);}   /* 同向旋转 45°，合成 × */

/* 答案区：max-height 由 JS 动态设为 scrollHeight，实现展开过渡 */
.fax-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.fax-faq-a p{padding:0 4px 20px;color:var(--ink-2);font-size:14.5px;line-height:1.8;}


/* ==========================================================================
   十一、底部 CTA（bottom cta）
   ========================================================================== */

.fax-bottom-cta{background:var(--bg);text-align:center;padding:64px 0;}
.fax-bottom-cta h2{font-size:clamp(22px,3vw,30px);font-weight:800;margin-bottom:10px;}
.fax-bottom-cta p{color:var(--ink-2);margin-bottom:28px;font-size:15px;}


/* ==========================================================================
   十二、页脚（footer）
   ========================================================================== */

footer#faxFooter{background:#0F1D3A;color:rgba(255,255,255,.7);padding:48px 0 0;}
.fax-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;}
.fax-foot-grid h4{color:#fff;font-size:15px;margin-bottom:16px;font-weight:700;}
.fax-foot-grid a,.fax-foot-grid p{display:block;font-size:13.5px;margin-bottom:8px;color:rgba(255,255,255,.6);}
.fax-foot-grid a:hover{color:#7FD1FF;}
.fax-foot-brand .fax-logo{color:#fff;margin-bottom:14px;}
.fax-foot-brand p{max-width:260px;}
.fax-foot-bar{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;text-align:center;font-size:12.5px;color:rgba(255,255,255,.4);}


/* ==========================================================================
   十三、响应式适配（responsive）
   断点：900px（平板） / 768px（手机） / 560px（小屏手机）
   ========================================================================== */

/* ---------- ≤900px：多列网格降为单列 ---------- */
@media (max-width:900px){
  .fax-price-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
  .fax-trust-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
  .fax-payment-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
  .fax-foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
}

/* ---------- ≤768px：切换为移动端导航 ---------- */
@media (max-width:768px){
  /* 隐藏桌面导航，显示汉堡按钮 */
  .fax-nav-links,.fax-nav-cta .fax-login{display:none;}
  .fax-menu-btn{display:flex;}

  /* 移动端下拉菜单：.open 时展开为纵向列表，固定在导航条下方 */
  .fax-mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;background:#fff;box-shadow:0 12px 32px rgba(18,52,143,.12);padding:10px 24px 20px;flex-direction:column;gap:2px;z-index:99;}
  .fax-mobile-menu.open{display:flex;}
  .fax-mobile-menu a{padding:12px 4px;border-bottom:1px solid var(--line);color:var(--ink-2);font-weight:500;font-size:14.5px;}
  .fax-mobile-menu .fax-btn-primary{margin-top:10px;border-bottom:none;color:#fff;justify-content:center;}

  /* 手机端重排留白 */
  section{padding:52px 0;}
  .fax-hero{padding:56px 0 40px;}
}

/* ---------- ≤560px：小屏手机 ---------- */
@media (max-width:560px){
  .fax-foot-grid{grid-template-columns:1fr;}
  .fax-hero h1{font-size:26px;}
}