/* ============================================================
   禾誉盛官网 · 设计系统 V1.0
   依据：《site-plan/01-视觉方向.md》——深蓝为骨、金线为魂、宋体为气
   ============================================================ */
:root{
  /* 品牌标准色（VI 定稿，不得改动） */
  --navy:#0A284C; --navy-d:#041B3C; --navy-l:#123A66;
  --gold:#E3BC86; --gold-d:#AD7A5B; --red:#B51111; --ink:#1A1629;
  /* 中性色 */
  --ink-700:#3E4655; --ink-500:#6B6F7B; --muted:#8A8578;
  --line:#E3DFD4; --line-soft:#EFEBE2;
  --bg:#F5F3EE; --bg-soft:#F6F7F9; --white:#FFFFFF;
  /* 功能色 */
  --success:#2F7D57; --warning:#C08A2B; --error:#C1352B; --info:#1E5A96;
  /* 渐变 */
  --grad-navy:linear-gradient(135deg,#041B3C 0%,#0A284C 58%,#123A66 100%);
  --grad-gold:linear-gradient(90deg,#E3BC86 0%,#AD7A5B 100%);
  --grad-gold-fade:linear-gradient(90deg,#E3BC86 0%,rgba(227,188,134,0) 78%);
  /* 字体 */
  --font-heading:"Source Serif 4","Noto Serif","Source Han Serif SC","Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --font-body:"Inter","-apple-system","BlinkMacSystemFont","Segoe UI","Helvetica Neue",Arial,"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --shadow-card:0 4px 16px rgba(10,40,76,.08);
  --shadow-card-h:0 10px 28px rgba(10,40,76,.14);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:16px;line-height:1.8;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;word-break:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.num{font-variant-numeric:tabular-nums}

/* ---------- 排印 ---------- */
h1,h2,h3,.serif{font-family:var(--font-heading)}
h1{font-size:44px;line-height:1.2;font-weight:700;letter-spacing:.04em}
h2{font-size:36px;line-height:1.3;font-weight:700;letter-spacing:.05em}
h3{font-size:24px;line-height:1.4;font-weight:600;letter-spacing:.03em}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d)}
.lead{font-size:18px;line-height:1.75;color:var(--ink-700)}
.note{font-size:14px;line-height:1.7;color:var(--ink-500)}
.caption{font-size:12px;line-height:1.6;letter-spacing:.06em;color:var(--muted)}
@media(max-width:767px){
  h1{font-size:28px}h2{font-size:24px}h3{font-size:20px}
  .lead{font-size:16px}
}

/* ---------- 布局 ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 40px}
@media(max-width:1023px){.container{padding:0 32px}}
@media(max-width:767px){.container{padding:0 20px}}
.section{padding:104px 0}
.section-sm{padding:64px 0}
@media(max-width:767px){.section{padding:60px 0}.section-sm{padding:44px 0}}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .eyebrow{display:block;margin-bottom:12px}
.sec-head p{margin-top:16px;color:var(--ink-500)}
.bg-navy{background:var(--grad-navy);color:#fff}
.bg-navy .sec-head p{color:#AFC0D6}
.bg-navy h2,.bg-navy h3{color:#fff}
.bg-navy .eyebrow{color:var(--gold)}
.bg-cream{background:var(--bg)}
.gold-seam{height:2px;background:var(--grad-gold-fade)}

/* ---------- 顶部导航 ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;height:84px;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),height .3s var(--ease)}
.site-header .container{height:84px;display:flex;align-items:center;gap:32px}
.nav-logo{display:flex;align-items:center;flex:0 0 auto}
.nav-logo img{height:56px;width:auto;display:block}
.site-header.scrolled{height:72px}
.site-header.scrolled .container{height:72px}
.site-header.scrolled .nav-logo img{height:46px}
.nav-logo img.on-dark{display:block}
.nav-logo img.on-light{display:none}
.nav-links{display:flex;align-items:center;gap:32px;margin-left:auto}
.nav-links a{font-size:15px;font-weight:500;position:relative;padding:6px 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad-gold);transition:width .2s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{margin-left:8px}
.lang-switch{display:flex;align-items:center;height:32px;border:1px solid currentColor;border-radius:4px;overflow:hidden;font-size:13px}
.lang-switch a{padding:0 10px;line-height:30px;opacity:.55}
.lang-switch a.current{opacity:1;font-weight:600;color:var(--gold)}
.lang-switch span{opacity:.3}
/* 深色（Hero 上）状态 */
.site-header.dark{color:#fff}
.site-header.dark .lang-switch a.current{color:var(--gold)}
/* 滚动后浅色状态 */
.site-header.scrolled{background:#fff;box-shadow:0 2px 12px rgba(10,40,76,.08);color:var(--ink)}
.site-header.scrolled .nav-logo img.on-dark{display:none}
.site-header.scrolled .nav-logo img.on-light{display:block}
.site-header.scrolled .lang-switch a.current{color:var(--gold-d)}
/* 普通页面（非 Hero 压顶）直接用浅色 */
.site-header.plain{background:#fff;box-shadow:0 2px 12px rgba(10,40,76,.08);color:var(--ink)}
.site-header.plain .nav-logo img.on-dark{display:none}
.site-header.plain .nav-logo img.on-light{display:block}
.site-header.plain .lang-switch a.current{color:var(--gold-d)}
.nav-burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;position:relative;z-index:130}
.nav-burger svg{width:26px;height:26px;stroke:currentColor}
/* 移动抽屉 */
.nav-drawer{position:fixed;top:0;bottom:0;left:0;z-index:120;width:66.666%;max-width:420px;
  background:var(--grad-navy);color:#fff;display:flex;flex-direction:column;
  padding:18px 24px 32px;overflow-y:auto;
  transform:translateX(-100%);visibility:hidden;pointer-events:none;
  box-shadow:8px 0 32px rgba(4,27,60,.45);
  transition:transform .32s var(--ease),visibility 0s linear .32s}
.nav-drawer.open{transform:translateX(0);visibility:visible;pointer-events:auto;
  transition:transform .32s var(--ease),visibility 0s linear 0s}
/* 右侧遮罩 */
.drawer-scrim{position:fixed;inset:0;z-index:119;background:rgba(4,27,60,.55);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s var(--ease),visibility 0s linear .32s}
.drawer-scrim.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .32s var(--ease),visibility 0s linear 0s}
.nav-drawer .drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1);flex:none}
.nav-drawer .drawer-logo{height:64px;width:auto;display:block}
.nav-drawer nav{display:flex;flex-direction:column;margin-top:22px;flex:none}
.nav-drawer nav a{display:block;font-family:var(--font-heading);font-size:22px;letter-spacing:.06em;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-drawer nav a.active{color:var(--gold)}
.nav-drawer .drawer-close{width:40px;height:40px;padding:0;flex:none;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);border-radius:50%;color:#fff;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.nav-drawer .drawer-close svg{width:20px;height:20px;stroke:currentColor}
.nav-drawer .drawer-close:active{background:rgba(255,255,255,.22)}
.nav-drawer .drawer-foot{margin-top:auto;padding-top:26px;flex:none;display:flex;flex-direction:column;gap:16px}
.nav-drawer .drawer-foot .btn{width:100%;height:44px;font-size:14px;padding:0}
.nav-drawer .drawer-meta{display:flex;flex-direction:column;gap:8px}
.nav-drawer .drawer-lang{font-size:13px;letter-spacing:.1em;color:#AFC0D6}
.nav-drawer .drawer-lang .d-sep{margin:0 8px;opacity:.4}
.nav-drawer .drawer-lang a{color:var(--gold);font-weight:600}
.nav-drawer .d-tel{font-size:14px;color:#AFC0D6}
.nav-drawer .d-tel:hover{color:var(--gold)}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-burger{display:block}
  .site-header .container{gap:16px}
}
/* 桌面端强制隐藏抽屉（兜底，防止任何移动端残影遮挡） */
@media(min-width:901px){
  .nav-drawer{display:none!important}
}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;
  border-radius:4px;font-size:15px;font-weight:600;letter-spacing:.04em;cursor:pointer;border:0;
  transition:all .2s var(--ease);font-family:var(--font-body)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-l)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-d);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-ghost:hover{background:rgba(10,40,76,.06)}
.btn-ghost-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.9)}
.btn-ghost-w:hover{background:rgba(255,255,255,.12)}
.btn-sm{height:40px;padding:0 20px;font-size:14px}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.text-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--gold-d)}
.text-link svg{width:18px;height:18px;transition:transform .2s var(--ease)}
.text-link:hover svg{transform:translateX(4px)}
.text-link:hover{color:#8f6346}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;
  background:var(--grad-navy);color:#fff;padding:150px 0 110px}
.hero-wm{position:absolute;right:-4%;bottom:-12%;width:min(56vw,640px);opacity:.1;pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:820px}
.hero .eyebrow{color:var(--gold);margin-bottom:22px;display:block}
.hero h1{font-size:56px;color:#fff;margin-bottom:22px}
.hero .hero-sub{font-size:19px;line-height:1.75;color:rgba(255,255,255,.82);max-width:640px;margin-bottom:44px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-goldline{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad-gold-fade)}
@media(max-width:767px){
  .hero{min-height:auto;padding:120px 0 72px}
  .hero h1{font-size:32px}
  .hero .hero-sub{font-size:16px}
  .hero-wm{opacity:.08}
}
/* 页首横幅（内页） */
.page-hero{background:var(--grad-navy);color:#fff;padding:150px 0 72px;position:relative;overflow:hidden}
.page-hero h1{font-size:44px;color:#fff;margin:14px 0 12px}
.page-hero .lead{color:rgba(255,255,255,.82);max-width:680px}
.page-hero .hero-wm{opacity:.09}
.page-hero .eyebrow{color:var(--gold)}
@media(max-width:767px){.page-hero h1{font-size:28px}}

/* ---------- 标语条 ---------- */
.motto-band{text-align:center}
.motto-band .motto{font-family:var(--font-heading);font-size:22px;letter-spacing:.18em;color:var(--navy)}
.motto-band .m-line{width:120px;height:2px;background:var(--grad-gold);margin:0 auto 22px}
@media(max-width:767px){.motto-band .motto{font-size:16px;letter-spacing:.1em}}

/* ---------- 数据条 ---------- */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{text-align:center;padding:8px 16px;border-left:1px solid rgba(255,255,255,.16)}
.stat:first-child{border-left:0}
.stat .stat-n{font-family:var(--font-num),"Inter",sans-serif;font-size:56px;line-height:1.1;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.stat .stat-n small{font-size:22px;font-weight:600;margin-left:2px}
.stat .stat-t{font-size:14px;color:#AFC0D6;margin-top:8px;letter-spacing:.06em}
@media(max-width:900px){
  .stats-band{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .stat:nth-child(3){border-left:0}
  .stat .stat-n{font-size:40px}
}

/* ---------- 业务板块 ---------- */
.biz-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.biz-row+.biz-row{margin-top:96px}
.biz-row.flip .biz-media{order:2}
.biz-media{position:relative;border-radius:8px;overflow:hidden;background:var(--grad-navy);min-height:340px}
.biz-media svg{position:absolute;inset:0;width:100%;height:100%}
.biz-media .biz-no{position:absolute;top:18px;left:24px;font-family:var(--font-heading);font-size:64px;font-weight:700;color:rgba(255,255,255,.28);line-height:1}
.biz-tag{position:absolute;left:24px;bottom:20px;display:inline-block;padding:6px 14px;border-radius:4px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:13px;letter-spacing:.08em;backdrop-filter:blur(4px)}
.biz-copy .eyebrow{display:block;margin-bottom:12px}
.biz-copy h3{margin-bottom:16px}
.biz-copy p{color:var(--ink-700);margin-bottom:20px}
.biz-kws{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.biz-kws span{font-size:13px;color:var(--ink-500);border:1px solid var(--line);border-radius:4px;padding:4px 12px;letter-spacing:.04em}
/* 业务板块强调色 */
.biz-logistics{--accent:var(--navy)}
.biz-materials{--accent:var(--gold-d)}
.biz-fragrance{--accent:var(--gold-d)}
.biz-copy .eyebrow{color:var(--accent)}
.biz-copy h3 em{font-style:normal;border-left:3px solid var(--accent);padding-left:14px}
/* 业务卡片（优势页等） */
/* 优势航线 · 资源结构注记（2026-10-23 加：区分自有仓储与合作舱位） */
.route-note{margin-top:26px;padding:16px 22px;background:var(--bg);border-left:2px solid var(--gold-d);border-radius:0 4px 4px 0;font-size:13.5px;line-height:1.75;color:var(--ink-500)}
.route-note b{color:var(--navy);font-weight:600}
.biz-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.biz-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-card);
  padding:32px;transition:transform .24s var(--ease),box-shadow .24s var(--ease);overflow:hidden}
.biz-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--navy));transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}
.biz-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-h)}
.biz-card:hover::before{transform:scaleX(1)}
.biz-card .ico{width:48px;height:48px;margin-bottom:18px}
.biz-card .ico svg{width:100%;height:100%;stroke:var(--accent,var(--navy));fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.biz-card h3{font-size:20px;margin-bottom:10px}
.biz-card p{font-size:15px;color:var(--ink-700)}
.biz-card .card-no{font-family:var(--font-heading);font-size:40px;font-weight:700;color:var(--accent,var(--navy));opacity:.32;line-height:1;margin-bottom:6px}
@media(max-width:1023px){
  .biz-row{grid-template-columns:1fr;gap:32px}
  .biz-row.flip .biz-media{order:0}
  .biz-cards{grid-template-columns:1fr}
}
@media(max-width:767px){.biz-row+.biz-row{margin-top:64px}}

/* ---------- 优势四宫格（深底） ---------- */
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.adv .ico{width:34px;height:34px;margin-bottom:18px}
.adv .ico svg{width:100%;height:100%;stroke:var(--gold);fill:none;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.adv h3{font-size:19px;color:#fff;margin-bottom:10px}
.adv p{font-size:14px;color:#AFC0D6}
@media(max-width:1023px){.adv-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.adv-grid{grid-template-columns:1fr}}

/* ---------- 全球网络（抽象航线，不做地理地图） ---------- */
.net-wrap{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-card);overflow:hidden}
.net-ports{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.net-port{padding:22px 24px;border-left:1px solid var(--line-soft)}
.net-port:first-child{border-left:0}
.net-port .p-name{font-family:var(--font-heading);font-weight:700;font-size:17px;color:var(--navy)}
.net-port .p-en{font-size:12px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
@media(max-width:767px){.net-ports{grid-template-columns:repeat(2,1fr)}.net-port:nth-child(3){border-left:0}}

/* ---------- 禾誉盛理念 ---------- */
.concept{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.concept-card{background:var(--grad-navy);color:#fff;border-radius:8px;padding:36px 32px;position:relative;overflow:hidden}
.concept-card .zi{font-family:var(--font-heading);font-size:52px;font-weight:700;color:var(--gold);line-height:1;margin-bottom:16px}
.concept-card h3{color:#fff;font-size:19px;margin-bottom:10px}
.concept-card p{font-size:14px;color:#AFC0D6}
@media(max-width:900px){.concept{grid-template-columns:1fr}}

/* ---------- 联系信息行 ---------- */
.contact-rows{display:grid;gap:18px;margin-top:32px}
.c-row{display:flex;align-items:flex-start;gap:14px;font-size:15px;color:var(--ink-700)}
.c-row svg{width:20px;height:20px;flex:none;margin-top:4px;stroke:var(--gold-d);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-row b{color:var(--navy);font-weight:600}

/* ---------- CTA 区 ---------- */
.cta-band{text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:#AFC0D6;max-width:620px;margin:0 auto 36px}
.cta-band .hero-wm{opacity:.07}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--navy-d);color:#fff;position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-gold-fade)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.35fr;gap:48px;padding:72px 0 56px}
.footer-grid .f-logo{height:96px;width:auto;margin-bottom:22px;display:block}
.footer-grid .f-en{font-size:12px;letter-spacing:.08em;color:#AFC0D6;text-transform:uppercase;line-height:1.7}
.footer-grid h4{font-family:var(--font-heading);font-size:15px;letter-spacing:.12em;margin-bottom:18px;color:#fff;font-weight:600}
.footer-grid ul li{margin-bottom:10px}
.footer-grid ul a{font-size:14px;color:#AFC0D6;transition:color .2s}
.footer-grid ul a:hover{color:var(--gold)}
.footer-grid .c-row{color:#AFC0D6;font-size:14px}
.footer-grid .c-row b{color:#fff}
.footer-grid .c-row svg{stroke:var(--gold);margin-top:3px}
.copyright{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:rgba(175,192,214,.75);letter-spacing:.04em}
.copyright .beian{color:rgba(175,192,214,.9);text-decoration:none;border-bottom:1px solid rgba(227,188,134,.35);transition:color .2s,border-color .2s}
.copyright .beian:hover{color:var(--gold);border-color:var(--gold)}
.copyright .beian-pending{opacity:.62}
.footer-brands{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:center;align-items:center;gap:8px 22px;flex-wrap:wrap;font-size:12px;letter-spacing:.05em;color:rgba(175,192,214,.55)}
.footer-brands .fb-label{letter-spacing:.14em}
.footer-brands a{color:rgba(175,192,214,.88);text-decoration:none;border-bottom:1px solid rgba(227,188,134,.25);padding-bottom:2px;transition:color .2s,border-color .2s}
.footer-brands a:hover{color:var(--gold);border-color:var(--gold)}
.footer-brands .fb-cur{opacity:.55}
@media(max-width:1023px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------- 能力清单（业务页） ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cap-item{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 28px;box-shadow:var(--shadow-card)}
.cap-item svg{width:34px;height:34px;flex:none;stroke:var(--gold-d);fill:none;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.cap-item h3{font-size:18px;margin-bottom:6px}
.cap-item p{font-size:14.5px;color:var(--ink-700)}
@media(max-width:767px){.cap-grid{grid-template-columns:1fr}}

/* ---------- 流程步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
.step{position:relative;padding:28px 24px;background:#fff;border:1px solid var(--line);border-radius:8px}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-heading);font-size:34px;font-weight:700;color:var(--gold-d);opacity:.45;display:block;margin-bottom:10px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:14px;color:var(--ink-500)}
@media(max-width:1023px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- 表单 ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1/-1}
.field label{font-size:14px;color:var(--ink-700);margin-bottom:8px}
.field label .req{color:var(--red);margin-left:2px}
.field input,.field select,.field textarea{height:48px;border:1px solid #D8D2C4;border-radius:4px;padding:0 14px;
  font-size:15px;font-family:var(--font-body);color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s;width:100%}
.field textarea{height:132px;padding:12px 14px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(227,188,134,.35)}
.field .err{font-size:12px;color:var(--error);margin-top:6px;display:none}
.field.invalid input,.field.invalid textarea{border-color:var(--error)}
.field.invalid .err{display:block}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-note{font-size:13px;color:var(--muted);margin-top:16px}
.form-ok{display:none;background:rgba(47,125,87,.08);border:1px solid rgba(47,125,87,.4);color:var(--success);
  border-radius:8px;padding:18px 22px;font-size:15px;margin-bottom:24px}
.form-ok.show{display:block}
@media(max-width:767px){.form-grid{grid-template-columns:1fr}}

/* ---------- 语言提示条 ---------- */
.lang-hint{position:fixed;left:20px;right:20px;bottom:20px;z-index:90;background:var(--navy);color:#fff;
  border:1px solid rgba(227,188,134,.5);border-radius:8px;padding:14px 20px;display:none;align-items:center;gap:16px;
  box-shadow:0 10px 30px rgba(4,27,60,.35);font-size:14px}
.lang-hint.show{display:flex}
.lang-hint a{color:var(--gold);font-weight:600;white-space:nowrap}
.lang-hint button{background:none;border:0;color:#AFC0D6;cursor:pointer;font-size:18px;line-height:1}

/* ---------- 滚动浮现 ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- 创始人介绍 ---------- */
.founder{display:grid;grid-template-columns:1fr;gap:0}
.founder-body{max-width:820px}
.founder-name{font-family:var(--font-heading);font-size:30px;font-weight:700;letter-spacing:.06em;color:var(--navy)}
.founder-title{font-size:14px;letter-spacing:.14em;color:var(--gold-d);margin:6px 0 24px;text-transform:uppercase}
.founder-quote{font-family:var(--font-heading);font-size:20px;line-height:1.95;color:var(--navy);letter-spacing:.02em;
  border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin-bottom:26px}
.founder-bio p{color:var(--ink-700);margin-bottom:16px;font-size:16px}
.founder-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.founder-points span{font-size:13px;color:var(--navy);background:rgba(227,188,134,.16);border:1px solid rgba(173,122,91,.35);
  border-radius:4px;padding:6px 14px;letter-spacing:.04em}
/* 预留：将来补上创始人照片时，用 .founder.has-photo 切两栏 */
.founder.has-photo{grid-template-columns:240px 1fr;gap:52px;align-items:start}
.founder.has-photo .founder-photo{position:relative;width:220px;height:220px;border-radius:50%;overflow:hidden;
  box-shadow:0 10px 28px rgba(10,40,76,.18);margin:8px 0 0 10px}
.founder.has-photo .founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* 金色圆环 */
.founder.has-photo .founder-photo::before{content:"";position:absolute;inset:-8px;border-radius:50%;
  border:2px solid var(--gold);opacity:.85;z-index:0}
.founder-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad-gold)}
.founder.has-photo .founder-photo::after{display:none}
@media(max-width:900px){
  .founder.has-photo{grid-template-columns:1fr;gap:24px}
  .founder.has-photo .founder-photo{width:168px;height:168px;margin:0 0 8px}
  .founder-name{font-size:26px}
  .founder-quote{font-size:17px}
  .founder-bio p{font-size:15px}
}

/* ---------- WhatsApp 悬浮 ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:80;width:52px;height:52px;border-radius:50%;
  background:#25D366;display:none;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(4,27,60,.3)}
.wa-float svg{width:26px;height:26px;fill:#fff}
html.wa .wa-float{display:flex}

/* ---------- 面包屑 ---------- */
.crumbs{font-size:13px;color:rgba(255,255,255,.6);letter-spacing:.04em}
.crumbs a{color:rgba(255,255,255,.75)}
.crumbs a:hover{color:var(--gold)}

/* QA 模式（?qa）：禁用视口高度与动效，便于整页截图质检 */
.qa .hero,.qa .page-hero{min-height:auto!important}
.qa .reveal{opacity:1!important;transform:none!important}
.qa [data-count]{-webkit-text-size-adjust:none}

/* ============================================================
   响应式增强层 —— PC(≥1024) / 平板(768–1023) / 手机(≤767) 三档
   ============================================================ */
html,body{overflow-x:hidden}

/* ---------- 平板 768–1023 ---------- */
@media(max-width:1023px){
  h1{font-size:38px}
  h2{font-size:30px}
  .section{padding:84px 0}
  .sec-head{margin-bottom:44px}
  .hero h1{font-size:46px}
  .hero .hero-sub{font-size:17px}
  .hero-wm{width:min(64vw,560px)}
  .page-hero{padding:140px 0 60px}
  .page-hero h1{font-size:36px}
  .stat .stat-n{font-size:44px}
  .net-port{padding:18px 20px}
  .site-header .container{gap:20px}
  .footer-grid{gap:36px;padding:56px 0 44px}
  .footer-grid .f-logo{height:80px}
  .cap-grid{gap:16px}
  .cap-item{padding:22px}
  .biz-cards{gap:16px}
  .steps{gap:16px}
  .adv-grid{gap:28px}
  .concept-card{padding:30px 26px}
  .lang-hint{left:16px;right:16px;bottom:16px;flex-wrap:wrap;gap:10px}
}
@media(min-width:768px) and (max-width:1023px){
  .nav-cta{display:inline-flex}
  /* 平板横排页脚：品牌列占整行 */
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:1/-1}
}

/* ---------- 手机 ≤767 ---------- */
@media(max-width:767px){
  /* 页头 */
  .site-header{height:64px}
  .site-header .container{height:64px;gap:12px}
  .site-header.scrolled{height:58px}
  .site-header.scrolled .container{height:58px}
  .nav-logo img{height:42px}
  .site-header.scrolled .nav-logo img{height:36px}
  .nav-cta{display:none}
  .lang-switch{height:28px;font-size:12px}
  .lang-switch a{padding:0 8px;line-height:26px}
  .nav-drawer{padding:40px 28px}
  .nav-drawer a{font-size:21px;padding:12px 0}
  .nav-drawer .drawer-foot{margin-top:32px;flex-wrap:wrap}

  /* Hero 与内页横幅 */
  .hero{padding:108px 0 60px}
  .hero h1{font-size:29px;margin-bottom:16px}
  .hero .eyebrow{margin-bottom:14px;font-size:11px;letter-spacing:.12em}
  .hero .hero-sub{font-size:15px;margin-bottom:32px}
  .hero-wm{width:88vw;opacity:.07}
  .hero-actions .btn{flex:1 1 auto;min-width:0;padding:0 18px}
  .page-hero{padding:116px 0 48px}
  .page-hero h1{font-size:26px}
  .page-hero .lead{font-size:15px}
  .crumbs{font-size:12px}

  /* 排印与节奏 */
  h1{font-size:26px}
  h2{font-size:22px}
  h3{font-size:18px}
  .section{padding:52px 0}
  .section-sm{padding:40px 0}
  .sec-head{margin-bottom:32px}
  .sec-head p{margin-top:10px;font-size:14.5px}
  .eyebrow{letter-spacing:.14em}
  .motto-band .motto{font-size:14px;letter-spacing:.06em;padding:0 8px}
  .motto-band .m-line{width:72px;margin-bottom:16px}

  /* 数据条 */
  .stats-band{grid-template-columns:1fr 1fr;row-gap:26px}
  .stat{padding:4px 8px}
  .stat .stat-n{font-size:34px}
  .stat .stat-n small{font-size:16px}
  .stat .stat-t{font-size:12px;letter-spacing:.02em}

  /* 业务板块 */
  .biz-row{gap:24px}
  .biz-row+.biz-row{margin-top:52px}
  .biz-media{min-height:230px;border-radius:6px}
  .biz-media .biz-no{font-size:44px;top:12px;left:16px}
  .biz-tag{left:16px;bottom:14px;font-size:12px;padding:5px 10px}
  .biz-copy h3{margin-bottom:10px}
  .biz-copy p{font-size:14.5px;margin-bottom:16px}
  .biz-kws span{font-size:12px;padding:3px 10px}
  .biz-cards{gap:14px}
  .biz-card{padding:24px 20px}

  /* 优势 / 网络 / 理念 */
  .adv-grid{gap:26px}
  .adv h3{font-size:17px}
  .net-ports{grid-template-columns:1fr 1fr}
  .net-port{padding:14px 16px}
  .net-port .p-name{font-size:15px}
  .concept{gap:14px}
  .concept-card{padding:26px 22px}
  .concept-card .zi{font-size:42px;margin-bottom:10px}

  /* 能力 / 流程 / 表单 */
  .cap-grid{gap:14px}
  .cap-item{padding:20px 18px;gap:14px}
  .cap-item svg{width:32px;height:32px}
  .cap-item h3{font-size:16.5px}
  .steps{gap:14px}
  .step{padding:22px 18px}
  .field input,.field select{height:44px;font-size:16px}
  .field textarea{height:110px}
  .form-grid{gap:14px}

  /* 页脚 */
  .footer-grid{grid-template-columns:1fr;gap:32px;padding:48px 0 40px}
  .footer-grid .f-logo{height:64px;margin-bottom:14px}
  .copyright{flex-direction:column;align-items:center;text-align:center;gap:6px}

  /* 悬浮件 */
  .wa-float{right:16px;bottom:16px;width:48px;height:48px}
  .lang-hint{left:14px;right:14px;bottom:14px;padding:12px 16px;flex-wrap:wrap;gap:10px}
}

/* ---------- 小屏手机 ≤400 ---------- */
@media(max-width:400px){
  .nav-logo img{height:38px}
  .site-header.scrolled .nav-logo img{height:32px}
  .lang-switch{display:none}
  .hero h1{font-size:26px}
  .stat .stat-n{font-size:30px}
}

/* ================= 建材页 · 图库精选九宫格 ================= */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gal-item{position:relative;margin:0;border-radius:10px;overflow:hidden;background:#0B1C33;
  box-shadow:0 6px 20px rgba(10,40,76,.10);aspect-ratio:1/1}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease, cubic-bezier(.2,.7,.3,1))}
.gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;
  font-size:12.5px;line-height:1.5;letter-spacing:.04em;color:#fff;
  background:linear-gradient(to top,rgba(4,27,60,.88),rgba(4,27,60,.42) 58%,rgba(4,27,60,0));
  transform:translateY(4px);opacity:.96;transition:transform .35s var(--ease, cubic-bezier(.2,.7,.3,1)),opacity .35s}
.gal-item:hover img{transform:scale(1.06)}
.gal-item:hover figcaption{transform:translateY(0);opacity:1}
.gal-item::after{content:"";position:absolute;inset:0;border:1px solid rgba(227,188,134,0);
  border-radius:10px;pointer-events:none;transition:border-color .35s}
.gal-item:hover::after{border-color:rgba(227,188,134,.75)}

/* 平板：两列 */
@media(max-width:1023px){
  .gal-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
/* 手机：两列，说明文字缩小 */
@media(max-width:767px){
  .gal-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .gal-item{border-radius:8px}
  .gal-item figcaption{padding:18px 10px 9px;font-size:11px;letter-spacing:.02em}
}

/* ================= 建材页 · 图注编号（产品 / 案例九宫格） ================= */
.gal-item figcaption .gal-no{display:inline-block;font-family:var(--font-heading);
  font-weight:700;font-size:11.5px;letter-spacing:.12em;color:var(--gold-l,#E3BC86);
  margin-right:8px;vertical-align:1px}
.gal-item figcaption .gal-no::after{content:"·";margin-left:8px;opacity:.55;color:#fff}

/* 案例九宫格：图注稍长，字号微收 */
.gal-case .gal-item figcaption{font-size:12px;line-height:1.45}

@media(max-width:767px){
  .gal-item figcaption .gal-no{font-size:10px;margin-right:6px}
  .gal-item figcaption .gal-no::after{margin-left:6px}
  .gal-case .gal-item figcaption{font-size:10.5px}
}

/* ================= 首页 · 业务板块实拍图 ================= */
.biz-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.biz-media svg.biz-overlay{position:absolute;inset:0;width:100%;height:100%}
.biz-media .biz-cap{fill:rgba(175,192,214,.75);font-size:11px;letter-spacing:6px;font-family:var(--font-heading)}

/* ================= 首页 · 业务板块实拍图 ================= */
.biz-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.biz-media svg.biz-overlay{position:absolute;inset:0;width:100%;height:100%}
.biz-media .biz-cap{fill:rgba(175,192,214,.75);font-size:11px;letter-spacing:6px;font-family:var(--font-heading)}

/* ================= 首页 · 航线板块横幅 ================= */
.net-banner{position:relative;min-height:230px;max-height:300px;overflow:hidden}
.net-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.net-banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(4,27,60,.25),rgba(4,27,60,.55) 70%,rgba(4,27,60,.8))}
.net-banner-cap{position:absolute;left:0;right:0;bottom:22px;z-index:2;text-align:center;color:#fff}
.net-banner-cap .eyebrow{color:var(--gold,#E3BC86)}
.net-banner-cap p{margin:6px 0 0;font-size:15px;letter-spacing:.12em;color:rgba(255,255,255,.88)}
@media(max-width:767px){
  .net-banner{min-height:170px;max-height:200px}
  .net-banner-cap p{font-size:13px}
}

/* ================= 首页 · 航线板块横幅 ================= */
.net-banner{position:relative;min-height:230px;max-height:300px;overflow:hidden}
.net-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.net-banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(4,27,60,.25),rgba(4,27,60,.55) 70%,rgba(4,27,60,.8))}
.net-banner-cap{position:absolute;left:0;right:0;bottom:22px;z-index:2;text-align:center;color:#fff}
.net-banner-cap .eyebrow{color:var(--gold,#E3BC86)}
.net-banner-cap p{margin:6px 0 0;font-size:15px;letter-spacing:.12em;color:rgba(255,255,255,.88)}
@media(max-width:767px){
  .net-banner{min-height:170px;max-height:200px}
  .net-banner-cap p{font-size:13px}
}

/* 航线横幅加高（删 SVG 后独立撑场） */
.net-banner{min-height:280px;max-height:360px}
@media(max-width:767px){.net-banner{min-height:200px;max-height:240px}}

/* 航线横幅加高（删 SVG 后独立撑场） */
.net-banner{min-height:280px;max-height:360px}
@media(max-width:767px){.net-banner{min-height:200px;max-height:240px}}

/* ================= 业务页 · 图文混排 split-row ================= */
.split-row{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.split-row+.split-row{margin-top:88px}
.split-row.flip .split-media{order:2}
.split-media{position:relative;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-card);background:var(--grad-navy);aspect-ratio:4/3}
.split-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.split-media:hover img{transform:scale(1.04)}
.split-media .m-no{position:absolute;top:14px;left:20px;z-index:2;font-family:var(--font-heading);font-size:52px;font-weight:700;color:rgba(255,255,255,.32);line-height:1}
.split-media .split-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 20px 14px;color:#fff;font-size:12.5px;letter-spacing:.04em;
  background:linear-gradient(to top,rgba(4,27,60,.85),rgba(4,27,60,0))}
.split-copy .eyebrow{display:block;margin-bottom:12px}
.split-copy h2{margin-bottom:16px}
.split-copy p{color:var(--ink-700);margin-bottom:16px}
.split-copy p:last-child{margin-bottom:0}
.split-copy .biz-kws{margin-top:6px}
@media(max-width:1023px){
  .split-row{grid-template-columns:1fr;gap:30px}
  .split-row.flip .split-media{order:0}
  .split-row+.split-row{margin-top:60px}
  .split-media{aspect-ratio:16/10}
}
@media(max-width:767px){
  .split-media{aspect-ratio:4/3;border-radius:8px}
  .split-media .m-no{font-size:40px;top:10px;left:14px}
}
/* 大图 banner 取景居中（竖图横用不裁头） */
.net-banner img{object-position:center}


/* INZL·MANUKAU 竖图左右图文：4:5 容器完整呈现品牌主视觉，避免竖图被横幅裁切 */
.split-media.tall{aspect-ratio:4/5}
@media(max-width:1023px){.split-media.tall{aspect-ratio:1/1}}
@media(max-width:767px){.split-media.tall{aspect-ratio:4/5}}

/* ============================================================
   图片适配加固层（2026-11-07）—— PC / 平板 / 手机 三端图片比例保险
   原则：填充型图片一律 object-fit:cover（裁切而非拉伸），裸图 height:auto 保比例
   ============================================================ */
/* 1) 全局兜底：任何带 width/height 属性的图片在窄屏按原始比例缩放，绝不拉伸变形 */
img{max-width:100%;height:auto}
/* 2) 填充型图片统一「覆盖 + 居中取景」，避免任何一端出现形变 */
.biz-media img,
.split-media img,
.gal-item img,
.net-banner img,
.founder.has-photo .founder-photo img{object-fit:cover;object-position:center}
/* 3) 兼容不支持 aspect-ratio 的旧版移动浏览器（用 padding 占位 + 绝对定位锁定比例） */
@supports not (aspect-ratio: 1 / 1){
  .gal-item{height:0;padding-bottom:100%}
  .gal-item img{position:absolute;inset:0;width:100%;height:100%}
  .split-media{height:0;padding-bottom:75%}
  .split-media img{position:absolute;inset:0;width:100%;height:100%}
  .split-media.tall{height:0;padding-bottom:125%}
}
