/* ============================================================
   佛山博皓国际物流 官网样式
   设计：A 稳重底色（藏蓝/白/橙，对标瑞卡）× B 科技高光（深色数据墙/查单浮窗）
   一套 CSS 同时服务 PC 网页版与手机 H5 版（h5 页 body 加 .h5-mode）
   ============================================================ */

:root{
  --navy:#0A2540;        /* 深藏蓝 */
  --blue:#123A5F;        /* 主蓝 */
  --blue-l:#1D4E7A;
  --orange:#F5A623;      /* 强调橙 */
  --orange-d:#E08C0B;
  --light:#F4F7FA;
  --line:#E3E9F0;
  --text:#1F2937;
  --muted:#6B7280;
  --white:#fff;
  --radius:10px;
  --shadow:0 2px 12px rgba(10,37,64,.08);
  --maxw:1200px;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--text);background:var(--white);line-height:1.7;
  font-size:16px;-webkit-font-smoothing:antialiased;
}
body.h5-mode{font-size:15px;padding-bottom:64px;} /* H5 底部固定栏留白 */
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.btn{
  display:inline-block;padding:12px 26px;border-radius:6px;font-weight:600;
  font-size:15px;cursor:pointer;border:none;transition:.2s;text-align:center;
}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:var(--orange-d);}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7);}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-navy{background:var(--blue);color:#fff;}
.btn-navy:hover{background:var(--blue-l);}

/* ---------- 顶部 ---------- */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:72px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--navy);letter-spacing:.5px;}
.logo-mark{
  width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,var(--navy),var(--blue-l));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
}
.logo small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:1px;}
.nav{display:flex;align-items:center;gap:28px;}
.nav a{font-size:15px;color:var(--text);position:relative;padding:6px 0;}
.nav a:hover,.nav a.on{color:var(--blue);}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);}
.hdr-act{display:flex;align-items:center;gap:14px;}
.lang{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:5px 12px;}
.lang a{color:var(--muted);}
.lang a.on{color:var(--blue);font-weight:700;}
.burger{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--navy);}

/* ---------- 首屏 ---------- */
.hero{
  /* 港口集装箱码头背景图 + 左深右浅的品牌深蓝遮罩，保证白色文案对比度 */
  background-color:var(--navy);
  background-image:
    linear-gradient(100deg,rgba(7,27,46,.94) 0%,rgba(10,37,64,.82) 34%,rgba(10,37,64,.52) 62%,rgba(10,37,64,.30) 100%),
    url("../img/hero-1.jpg");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:#fff;padding:78px 0 70px;position:relative;overflow:hidden;
}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  .hero{background-image:
    linear-gradient(100deg,rgba(7,27,46,.94) 0%,rgba(10,37,64,.82) 34%,rgba(10,37,64,.52) 62%,rgba(10,37,64,.30) 100%),
    image-set(url("../img/hero-1.webp") type("image/webp"),url("../img/hero-1.jpg") type("image/jpeg"));}
}
.hero::after{
  content:"";position:absolute;right:-80px;top:-40px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(245,166,35,.22),transparent 65%);
}
.hero-txt{position:relative;z-index:2;max-width:660px;}
.hero .tag{
  display:inline-block;background:rgba(245,166,35,.18);color:var(--orange);
  font-size:13px;padding:6px 14px;border-radius:20px;margin-bottom:18px;border:1px solid rgba(245,166,35,.35);
}
.hero h1{font-size:40px;line-height:1.28;font-weight:800;margin-bottom:16px;text-shadow:0 1px 14px rgba(7,27,46,.5);}
.hero h1 em{font-style:normal;color:var(--orange);}
.hero p{font-size:17px;color:rgba(255,255,255,.88);margin-bottom:28px;text-shadow:0 1px 10px rgba(7,27,46,.45);}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- 数据墙（B派科技高光） ---------- */
.stats{position:relative;background:var(--navy);padding:0;overflow:hidden;}
.stats::before{content:"";position:absolute;inset:0;background:url("../img/band-containers.jpg") center/cover no-repeat;opacity:.3;}
.stats-in{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:34px 20px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;text-align:center;color:#fff;
}
.stat b{display:block;font-size:30px;color:var(--orange);font-weight:800;line-height:1.2;}
.stat span{font-size:13px;color:rgba(255,255,255,.72);}

/* ---------- 通用区块 ---------- */
.sec{padding:66px 0;}
.sec-alt{background:var(--light);}
.sec-h{text-align:center;margin-bottom:42px;}
.sec-h h2{font-size:29px;color:var(--navy);font-weight:800;margin-bottom:10px;}
.sec-h p{color:var(--muted);font-size:15px;}
.sec-h .line{width:52px;height:3px;background:var(--orange);margin:14px auto 0;}

/* ---------- 服务卡片 ---------- */
.grid{display:grid;gap:22px;}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;transition:.25s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cdd9e6;}
.card .ico{
  width:46px;height:46px;border-radius:10px;background:rgba(18,58,95,.08);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;margin-bottom:14px;
}
/* 卡片内联 SVG 图标统一规格（24 视窗，深蓝 #0A2540 主线条 + 橙 #F5A623 点缀） */
.card .ico svg{width:26px;height:26px;display:block;flex:0 0 auto;}
.card h3{font-size:17px;color:var(--navy);margin-bottom:8px;}
.card p{font-size:14px;color:var(--muted);line-height:1.75;}
.card ul{margin-top:12px;}
.card ul li{font-size:13.5px;color:var(--muted);padding-left:16px;position:relative;margin-bottom:5px;}
.card ul li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--orange);}

/* ---------- 优势 ---------- */
.why{position:relative;background:var(--navy);color:#fff;overflow:hidden;}
.why::before{content:"";position:absolute;inset:0;background:url("../img/band-ship.jpg") center/cover no-repeat;opacity:.24;}
.why>*{position:relative;z-index:1;}
.why .sec-h h2{color:#fff;}
.why .sec-h p{color:rgba(255,255,255,.7);}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.why-item{display:flex;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:20px;}
.why-item .n{
  flex:0 0 34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
}
.why-item h4{font-size:16px;margin-bottom:5px;}
.why-item p{font-size:13.5px;color:rgba(255,255,255,.72);}

/* ---------- 流程 ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;}
.step{text-align:center;position:relative;}
.step .dot{
  width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;
}
.step h4{font-size:16px;color:var(--navy);margin-bottom:6px;}
.step p{font-size:13.5px;color:var(--muted);}
.step:not(:last-child)::after{
  content:"";position:absolute;top:26px;left:62%;width:76%;height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);
}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto;}
.faq details{border:1px solid var(--line);border-radius:8px;margin-bottom:12px;background:#fff;overflow:hidden;}
.faq summary{
  padding:16px 20px;font-weight:600;color:var(--navy);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;font-size:15.5px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:20px;color:var(--orange);font-weight:700;}
.faq details[open] summary::after{content:"−";}
.faq details .a{padding:0 20px 18px;font-size:14.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;}

/* ---------- 表单 ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.f-row.one{grid-template-columns:1fr;}
.fld label{display:block;font-size:13.5px;color:var(--text);margin-bottom:6px;font-weight:600;}
.fld input,.fld select,.fld textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:6px;font-size:14.5px;
  font-family:inherit;background:#fff;color:var(--text);
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);}
.fld textarea{resize:vertical;min-height:96px;}
.tip{font-size:12.5px;color:var(--muted);margin-top:10px;}

/* ---------- CTA 条 ---------- */
.cta-bar{position:relative;background:linear-gradient(100deg,var(--blue),var(--navy));color:#fff;padding:44px 0;text-align:center;overflow:hidden;}
.cta-bar::before{content:"";position:absolute;inset:0;background:url("../img/band-harbor.jpg") center/cover no-repeat;opacity:.3;}
.cta-bar>*{position:relative;z-index:1;}
.cta-bar h3{font-size:25px;margin-bottom:8px;}
.cta-bar p{color:rgba(255,255,255,.8);margin-bottom:22px;font-size:15px;}

/* ---------- 页脚 ---------- */
.ftr{background:#071B2E;color:rgba(255,255,255,.7);padding:52px 0 0;font-size:14px;}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:30px;padding-bottom:34px;}
.ftr h5{color:#fff;font-size:15px;margin-bottom:14px;font-weight:700;}
.ftr li{margin-bottom:8px;}
.ftr a:hover{color:var(--orange);}
.ftr .co p{margin-bottom:9px;line-height:1.9;}
.ftr-btm{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;text-align:center;font-size:13px;color:rgba(255,255,255,.5);}

/* ---------- PC 右侧固定浮窗（B派核心转化入口） ---------- */
.side{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:2px;
}
.side a,.side button{
  width:52px;padding:12px 0;background:var(--blue);color:#fff;border:none;cursor:pointer;
  font-size:12px;line-height:1.4;display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:.2s;font-family:inherit;
}
.side a:hover,.side button:hover{background:var(--orange);}
.side .i{font-size:17px;}
.side .track{background:var(--navy);}

/* ---------- H5 底部固定栏 ---------- */
.h5-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(0,0,0,.06);
}
body.h5-mode .h5-bar{display:flex;}
.h5-bar a,.h5-bar button{
  flex:1;padding:10px 0 8px;background:none;border:none;font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;color:var(--muted);
}
.h5-bar .i{font-size:19px;}
.h5-bar .hi{background:var(--orange);color:#fff;}
.h5-bar .hi .i,.h5-bar .hi{color:#fff;}

/* ---------- 弹窗（查单/询价） ---------- */
.mask{position:fixed;inset:0;background:rgba(7,27,46,.6);z-index:90;display:none;align-items:center;justify-content:center;padding:20px;}
.mask.on{display:flex;}
.modal{background:#fff;border-radius:12px;max-width:440px;width:100%;padding:26px;position:relative;max-height:88vh;overflow:auto;}
.modal h3{font-size:19px;color:var(--navy);margin-bottom:4px;}
.modal .sub{font-size:13.5px;color:var(--muted);margin-bottom:18px;}
.modal .x{position:absolute;right:16px;top:14px;background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1;}

/* ---------- 内页 ---------- */
.pg-hd{position:relative;background:linear-gradient(120deg,var(--navy),var(--blue));color:#fff;padding:44px 0;overflow:hidden;}
.pg-hd::before{content:"";position:absolute;inset:0;background:url("../img/band-harbor.jpg") center/cover no-repeat;opacity:.32;}
.pg-hd>*{position:relative;z-index:1;}
.pg-hd h1{font-size:31px;font-weight:800;}
.pg-hd .crumb{font-size:13.5px;color:rgba(255,255,255,.65);margin-bottom:8px;}
.pg-hd .crumb a:hover{color:var(--orange);}

/* ---------- 入口选择页（根 index.html） ---------- */
.entry{min-height:100vh;background:linear-gradient(135deg,var(--navy),var(--blue));display:flex;align-items:center;justify-content:center;padding:40px 20px;}
.entry-box{background:#fff;border-radius:14px;padding:38px;max-width:640px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.2);}
.entry-box h1{font-size:25px;color:var(--navy);text-align:center;margin-bottom:6px;}
.entry-box .sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:26px;}
.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.entry-grid a{
  border:1.5px solid var(--line);border-radius:10px;padding:20px 16px;text-align:center;transition:.2s;
}
.entry-grid a:hover{border-color:var(--orange);background:#FFFBF3;}
.entry-grid .t{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.entry-grid .d{font-size:12.5px;color:var(--muted);}
.entry-note{margin-top:22px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.8;}

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .nav{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;flex-direction:column;
       gap:0;padding:10px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);}
  .nav.on{display:flex;}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line);width:100%;}
  .nav a.on::after{display:none;}
  .burger{display:block;}
  .hdr-act .btn{display:none;}
  .g4,.g3{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .step:not(:last-child)::after{display:none;}
  .ftr-grid{grid-template-columns:1fr 1fr;}
  .stats-in{grid-template-columns:repeat(3,1fr);gap:18px 10px;}
  .side{display:none;} /* 窄屏隐藏侧栏，H5 用底栏 */
}
@media (max-width:640px){
  .hero{padding:52px 0 44px;background-position:68% center;} /* 窄屏聚焦码头主体，左侧遮罩保文字 */
  .hero h1{font-size:27px;}
  .hero p{font-size:15px;}
  .hero-btns .btn{flex:1;min-width:140px;}
  .sec{padding:44px 0;}
  .sec-h h2{font-size:23px;}
  .g4,.g3,.g2,.why-grid,.f-row{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .ftr-grid{grid-template-columns:1fr;}
  .stats-in{grid-template-columns:repeat(2,1fr);}
  .pg-hd h1{font-size:24px;}
  .entry-grid{grid-template-columns:1fr;}
  .cta-bar h3{font-size:20px;}
}

/* ---------- 真实 LOGO（2026-09-16 替换临时方块） ---------- */
.logo-img{height:40px;width:auto;display:block;}
.logo-txt{font-size:17px;font-weight:800;color:var(--navy);line-height:1.25;letter-spacing:.3px;}
@media (max-width:640px){.logo-img{height:34px;}.logo-txt{font-size:15px;}}