/* ============================================================
   湖南荣诚熙贸易有限公司 — 官网样式表
   ============================================================ */
:root{
  --ink:#0B2137;
  --ink2:#123350;
  --ink3:#1B4A6E;
  --accent:#1B5FA8;
  --accent-d:#14497F;
  --accent-l:#E9F2FB;
  --bg:#FFFFFF;
  --bg2:#F2F7FC;
  --line:#E2E8EF;
  --line2:#CBD6E2;
  --text:#152535;
  --muted:#61748A;
  --radius:12px;
  --shadow:0 6px 24px rgba(11,33,55,.07);
  --shadow-lg:0 16px 44px rgba(11,33,55,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Segoe UI",sans-serif;
  color:var(--text);background:var(--bg);line-height:1.75;font-size:15.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:76px 0}
.bg-alt{background:var(--bg2)}

/* ---------- 通用标题 ---------- */
.kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:2.5px;color:var(--accent);background:var(--accent-l);padding:4px 12px;border-radius:20px;margin-bottom:14px}
.sec-title{font-size:31px;font-weight:800;letter-spacing:.5px;color:var(--ink);line-height:1.35}
.sec-sub{color:var(--muted);max-width:680px;margin-top:12px;font-size:15.5px}
.sec-head{margin-bottom:44px}
.sec-head.center{text-align:center}
.sec-head.center .sec-sub{margin-left:auto;margin-right:auto}

/* ---------- 按钮 ---------- */
.btn{display:inline-block;padding:13px 30px;border-radius:8px;font-weight:700;font-size:15px;cursor:pointer;border:1.5px solid transparent;transition:.22s;text-align:center}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-d);transform:translateY(-1px);box-shadow:0 8px 20px rgba(27,95,168,.28)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink2);transform:translateY(-1px)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-outline{border-color:var(--line2);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:9px 20px;font-size:14px}
.btn-block{display:block;width:100%}

/* ---------- 顶部信息条 ---------- */
.topbar{background:var(--ink);color:#B9CBDC;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px;flex-wrap:wrap}
.topbar .tb-left{display:flex;gap:22px;flex-wrap:wrap}
.topbar a:hover{color:#fff}
.topbar .tag{color:#B9CBDC;font-weight:700}

/* ---------- 页头导航 ---------- */
header.site{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 1px 12px rgba(11,33,55,.05)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.logo{display:flex;align-items:center;gap:11px}
.logo .mark{width:42px;height:42px;border-radius:9px;background:linear-gradient(135deg,var(--ink2),var(--ink3));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:15px;letter-spacing:-.5px;position:relative;overflow:hidden}
.logo .mark::after{content:"";position:absolute;right:-14px;bottom:-14px;width:26px;height:26px;background:var(--accent);transform:rotate(45deg)}
.logo .logo-img{width:69px;height:auto;border-radius:8px;display:block;flex-shrink:0;background:#fff}
.logo b{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:.5px;display:block;line-height:1.25}
.logo small{font-size:10.5px;color:var(--muted);letter-spacing:1.4px;text-transform:uppercase;display:block}
nav.main{display:flex;align-items:center;gap:4px}
nav.main a{padding:9px 15px;border-radius:7px;font-size:15px;font-weight:600;color:#33475C;transition:.18s;white-space:nowrap}
nav.main a:hover{color:var(--accent);background:var(--accent-l)}
nav.main a.on{color:var(--accent);background:var(--accent-l)}
.head-actions{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.menu-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}

/* ---------- Hero ---------- */
.hero{position:relative;background:linear-gradient(115deg,#11467D 0%,#1E63AC 52%,#2F7BC9 100%);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;opacity:.58}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,52,94,.88) 0%,rgba(12,52,94,.42) 46%,rgba(12,52,94,.08) 100%)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:52px 52px}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(74,138,209,.32),transparent 66%)}
.hero .wrap{position:relative;z-index:2;padding-top:88px;padding-bottom:84px}
.hero h1{font-size:44px;line-height:1.28;font-weight:800;max-width:820px;letter-spacing:.5px;text-shadow:0 2px 14px rgba(8,32,60,.4)}
.hero h1 em{font-style:normal;color:var(--accent);font-weight:800}
.hero .lead{margin-top:20px;font-size:17px;color:#D8E6F4;max-width:700px;text-shadow:0 1px 10px rgba(8,32,60,.45)}
.hero .cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{background:rgba(10,44,80,.28);border-radius:14px;margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.055);backdrop-filter:blur(4px)}
.hero-stats .st{padding:22px 24px;border-right:1px solid rgba(255,255,255,.13)}
.hero-stats .st:last-child{border-right:none}
.hero-stats .num{font-size:29px;font-weight:900;color:var(--accent);line-height:1.2}
.hero-stats .lbl{font-size:13px;color:#AFC4D6;margin-top:2px}

/* ---------- 板块卡片 ---------- */
.seg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.seg-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.seg-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#D6DFE8}
.seg-top{height:132px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#F0F7FE,#DCE9F6);position:relative}
.seg-top svg{width:112px;height:112px}
.seg-no{position:absolute;left:16px;top:13px;font-size:11px;font-weight:800;letter-spacing:2px;color:#8FA5B8}
.seg-body{padding:22px;display:flex;flex-direction:column;flex:1}
.seg-body h3{font-size:18.5px;font-weight:800;color:var(--ink);margin-bottom:8px}
.seg-body p{font-size:14px;color:var(--muted);flex:1}
.seg-body ul{margin:14px 0 16px}
.seg-body li{font-size:13.5px;color:#41586E;padding:3.5px 0 3.5px 16px;position:relative}
.seg-body li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.75}
.seg-more{font-size:14px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:5px}
.seg-more:hover{gap:9px}

/* ---------- 品类网格 ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat-grid.g3{grid-template-columns:repeat(3,1fr)}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;transition:.22s}
.cat:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.cat .ic{width:56px;height:56px;border-radius:11px;background:var(--accent-l);display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.cat .ic svg{width:34px;height:34px}
.cat h4{font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:7px}
.cat p{font-size:13.5px;color:var(--muted)}
.cat .chip{display:inline-block;font-size:12px;color:var(--ink3);background:#E9F2FB;border-radius:5px;padding:2px 8px;margin:9px 6px 0 0}

/* ---------- 优势 ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;transition:.22s}
.why:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.why .no{font-size:13px;font-weight:800;letter-spacing:2px;color:var(--accent);margin-bottom:10px}
.why h3{font-size:17.5px;font-weight:800;color:var(--ink);margin-bottom:9px}
.why p{font-size:14.5px;color:var(--muted)}

/* ---------- 流程 ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;position:relative}
.step::before{counter-increment:step;content:"0" counter(step);display:block;font-size:30px;font-weight:900;color:#DCE5EE;line-height:1;margin-bottom:10px}
.step h3{font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:6px}
.step p{font-size:13px;color:var(--muted)}

/* ---------- 动态 ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.22s}
.post:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:#D6DFE8}
.post .ph{height:8px;background:linear-gradient(90deg,var(--ink2),var(--ink3))}
.post .pb{padding:24px 22px;display:flex;flex-direction:column;flex:1}
.post .meta{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-size:12.5px;color:var(--muted)}
.post .cate{color:var(--accent);background:var(--accent-l);border-radius:5px;padding:2px 9px;font-weight:700}
.post h3{font-size:17px;font-weight:800;color:var(--ink);line-height:1.5;margin-bottom:9px}
.post h3 a:hover{color:var(--accent)}
.post p{font-size:14px;color:var(--muted);flex:1}
.post .rd{margin-top:16px;font-size:13.5px;font-weight:700;color:var(--accent)}
.post-skel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px}
.post-skel .bar{height:11px;background:#EDF1F5;border-radius:6px;margin-bottom:11px;animation:sk 1.3s infinite}
@keyframes sk{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- 分类筛选 ---------- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.tabs button,.tabs a{padding:9px 22px;border-radius:24px;border:1px solid var(--line2);background:#fff;cursor:pointer;font-size:14px;font-weight:600;color:#41586E;transition:.2s;text-decoration:none;display:inline-block}
.tabs button:hover,.tabs a:hover{border-color:var(--accent);color:var(--accent)}
.tabs button.on,.tabs a.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- CTA 带 ---------- */
.cta-band{background:linear-gradient(115deg,#12477E,#2F7BC9);color:#fff;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-90px;bottom:-120px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(27,95,168,.28),transparent 62%)}
.cta-band .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-top:56px;padding-bottom:56px}
.cta-band h2{font-size:27px;font-weight:800}
.cta-band p{color:#BDD0E1;margin-top:8px;max-width:620px;font-size:15px}
.cta-band .cta{display:flex;gap:13px;flex-wrap:wrap}

/* ---------- 页脚 ---------- */
footer.site{background:#08243F;color:#9FB3C6;font-size:14px;padding:62px 0 0}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:38px;padding-bottom:44px}
footer.site h4{color:#fff;font-size:15.5px;font-weight:800;margin-bottom:17px;letter-spacing:.5px}
footer.site li{padding:5px 0}
footer.site a:hover{color:var(--accent)}
footer.site .fd{color:#7A8FA3;font-size:13.5px;line-height:1.85;margin-top:14px}
footer.site .logo b{color:#fff}
footer.site .logo small{color:#7A8FA3}
.f-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#6E8296}

/* ---------- 内页头图 ---------- */
.page-head{background:linear-gradient(115deg,#0B2137,#14456B);color:#fff;padding:60px 0 56px;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{font-size:34px;font-weight:800;letter-spacing:.5px}
.page-head p{color:#BDD0E1;margin-top:11px;max-width:660px}
.crumb{font-size:13px;color:#8FA8BE;margin-bottom:14px}
.crumb a:hover{color:var(--accent)}

/* ---------- 内容排版 ---------- */
.prose{font-size:16px;color:#31485D;line-height:1.95}
.prose p{margin-bottom:18px}
.prose h3{font-size:20px;font-weight:800;color:var(--ink);margin:32px 0 14px}
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.fact-list{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.fact-list h4{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:14px}
.fact-list .row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line2);font-size:14px}
.fact-list .row:last-child{border-bottom:none}
.fact-list .row span{color:var(--muted)}
.fact-list .row b{color:var(--ink);font-weight:700;text-align:right}

/* ---------- 业务板块详情块 ---------- */
.seg-block{padding:58px 0;border-bottom:1px solid var(--line)}
.seg-block:last-child{border-bottom:none}
.seg-flex{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center}
.seg-visual{background:linear-gradient(160deg,#F0F7FE,#D9E7F5);border-radius:var(--radius);min-height:290px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.seg-visual::after{content:"";position:absolute;left:-60px;bottom:-80px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(27,95,168,.14),transparent 66%)}
.seg-visual svg{width:250px;height:250px;position:relative;z-index:2}
.seg-flex h2{font-size:27px;font-weight:800;color:var(--ink);margin-bottom:6px}
.seg-flex .lead{color:var(--muted);margin:10px 0 20px}
.spec-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.spec-table th{text-align:left;padding:11px 14px;background:var(--bg2);color:var(--ink);font-weight:700;border-bottom:1px solid var(--line)}
.spec-table td{padding:11px 14px;border-bottom:1px solid var(--line);color:#41586E;vertical-align:top}
.spec-table tr:last-child td{border-bottom:none}
.spec-table td:first-child{font-weight:700;color:var(--ink);width:34%;white-space:nowrap}

/* ---------- 询盘表单 ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:700;color:var(--ink)}
.field label .req{color:#D64545;margin-left:3px}
.field input,.field select,.field textarea{
  border:1px solid var(--line2);border-radius:8px;padding:11px 14px;background:#fff;font-size:14.5px;
  transition:.18s;width:100%;outline:none;
}
.field textarea{min-height:118px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(27,95,168,.15)}
.field .hint{font-size:12.5px;color:var(--muted)}
.form-foot{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-note{font-size:13px;color:var(--muted);flex:1;min-width:220px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.alert{border-radius:9px;padding:14px 18px;font-size:14px;margin-top:18px;display:none}
.alert.ok{background:#EAF7EF;border:1px solid #B7E2C6;color:#1E6B3D;display:block}
.alert.err{background:#FDECEC;border:1px solid #F3C0C0;color:#A52020;display:block}
.form-side{background:var(--ink);color:#fff;border-radius:16px;padding:32px;position:relative;overflow:hidden}
.form-side::after{content:"";position:absolute;right:-70px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(27,95,168,.26),transparent 64%)}
.form-side h3{font-size:19px;font-weight:800;margin-bottom:16px;position:relative;z-index:2}
.form-side ul{position:relative;z-index:2}
.form-side li{font-size:14px;color:#C7D8E8;padding:9px 0 9px 22px;position:relative;border-bottom:1px solid rgba(255,255,255,.09)}
.form-side li:last-child{border-bottom:none}
.form-side li::before{content:"";position:absolute;left:0;top:18px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---------- 联系方式 ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:.22s}
.contact-card:hover{box-shadow:var(--shadow);border-color:var(--accent)}
.contact-card .ic{width:50px;height:50px;border-radius:11px;background:var(--accent-l);display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:15px}
.contact-card h4{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:9px}
.contact-card p{font-size:14.5px;color:#41586E;line-height:1.85}
.contact-card a:hover{color:var(--accent)}
.map-box{margin-top:26px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg2);height:290px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;text-align:center;padding:24px}

/* ---------- 详情页 ---------- */
.article{max-width:800px;margin:0 auto}
.article h1{font-size:30px;font-weight:800;color:var(--ink);line-height:1.45}
.article .meta{display:flex;gap:12px;align-items:center;font-size:13.5px;color:var(--muted);margin:16px 0 28px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.article .body{font-size:16.5px;line-height:2;color:#2C4459}
.article .body p{margin-bottom:20px}
.art-nav{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:14.5px}
.art-nav a{color:var(--ink3);font-weight:600}
.art-nav a:hover{color:var(--accent)}

/* ---------- 空状态 ---------- */
.empty{padding:68px 24px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line2);border-radius:var(--radius)}

/* ---------- 响应式 ---------- */
@media(max-width:1080px){
  .seg-grid,.cat-grid,.cat-grid.g3{grid-template-columns:repeat(2,1fr)}
  .news-grid,.why-grid,.contact-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
  nav.main a{padding:9px 11px;font-size:14.5px}
}
@media(max-width:900px){
  nav.main{position:fixed;top:112px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:14px 20px 22px;gap:2px;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(11,33,55,.12);display:none}
  nav.main.open{display:flex}
  nav.main a{padding:13px 12px;font-size:16px}
  .menu-toggle{display:flex}
  .head-actions .btn{display:none}
  .hero h1{font-size:33px}
  .hero-stats{background:rgba(10,44,80,.28);border-radius:14px;grid-template-columns:repeat(2,1fr)}
  .hero-stats .st:nth-child(2){border-right:none}
  .hero-stats .st:nth-child(1),.hero-stats .st:nth-child(2){border-bottom:1px solid rgba(255,255,255,.13)}
  .two-col,.seg-flex,.form-grid{grid-template-columns:1fr}
  .form-side{margin-top:22px}
  section{padding:56px 0}
  .sec-title{font-size:26px}
  .page-head h1{font-size:27px}
}
@media(max-width:620px){
  .seg-grid,.cat-grid,.cat-grid.g3,.news-grid,.why-grid,.contact-grid,.steps,.f-grid{grid-template-columns:1fr}
  .hero h1{font-size:27px}
  .hero .lead{font-size:15.5px}
  .topbar .tb-left{gap:14px;font-size:12.5px}
  .form-card{padding:22px}
  .cta-band .wrap{padding-top:44px;padding-bottom:44px}
}

@media(max-width:620px){
  .seg-card .seg-top img{height:170px !important}
  .cat img{aspect-ratio:4/3 !important}
  .seg-visual img{min-height:220px}
  .hero{min-height:78vh}
  .hero .wrap{padding-top:70px;padding-bottom:64px}
  .logo .logo-img{width:57px}
  .logo b{font-size:16px}
}