/* ============================================================
   AOLV EpicView Windows — Shared site styles (Design A · Civic Modern)
   被所有内页引用：导航 / 页脚 / 按钮 / 配色 / 动效
   ============================================================ */
/* 只把 & 渲染成经典衬线斜体，其余字母仍用 Space Grotesk */
@font-face{font-family:'AmpFix';src:local('Baskerville Italic'),local('Georgia Italic'),local('Georgia'),local('Times New Roman');unicode-range:U+0026;font-style:italic}
:root{
  --ink:#16191D; --ink-soft:#3A4048; --mute:#6B7280;
  --line:#E5E7EB; --line-soft:#EEF0F2; --bg:#FFFFFF; --bg-alt:#F6F8FA;
  --blue:#15506E; --blue-deep:#0E3950; --blue-tint:#E8F0F4;
  --bronze:#B07B3C; --alu:#9AA3AC;
  --r-sm:4px; --r:8px; --r-lg:14px;
  --sh-1:0 1px 2px rgba(16,25,40,.06);
  --sh-2:0 6px 20px rgba(16,25,40,.08);
  --sh-3:0 18px 50px rgba(14,57,80,.14);
  --max:1240px;
  --head:'AmpFix','Space Grotesk',sans-serif;
  --body:'AmpFix','Hanken Grotesk',sans-serif;
  --zh:'Noto Sans SC',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
body.zh{font-family:var(--zh)}
body.zh h1,body.zh h2,body.zh h3,body.zh h4{font-family:var(--zh)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
/* 站点为纯英文：始终隐藏中文配对文本（数据库 _zh 字段保留备用） */
.lang-only-zh{display:none!important}
.lang-en{display:inline}
[style*="background-image"]{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ---------- buttons ---------- */
.btn{font-family:var(--body);font-size:15px;font-weight:600;padding:14px 26px;border-radius:var(--r-sm);cursor:pointer;border:0;transition:.2s;display:inline-flex;align-items:center;gap:9px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- Top utility bar ---------- */
.util{background:var(--blue-deep);color:#CFE0E9;font-size:12.5px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:18px}
.util a:hover{color:#fff}
.util .util-r{display:flex;gap:20px;align-items:center}
.util .dot{width:5px;height:5px;border-radius:50%;background:var(--bronze);display:inline-block;margin-right:7px}
.langbtn{border:1px solid rgba(255,255,255,.25);color:#EAF2F6;background:none;font:inherit;font-size:12px;padding:3px 11px;border-radius:30px;cursor:pointer;letter-spacing:.04em;transition:.2s}
.langbtn:hover{background:rgba(255,255,255,.12)}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line-soft);transition:box-shadow .25s}
header.site.scrolled{box-shadow:var(--sh-2)}
.nav{display:flex;align-items:center;justify-content:space-between;height:128px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.logo .brand-logo{width:80px;height:80px;border-radius:12px;object-fit:cover;flex:none;box-shadow:var(--sh-1)}
/* 页眉 logo 更大，公司名靠下对齐 */
header.site .logo{align-items:flex-end}
header.site .logo .brand-logo{width:100px;height:100px;border-radius:14px}
header.site .logo span{padding-bottom:16px}
.logo .mark{width:30px;height:30px;border-radius:6px;background:linear-gradient(135deg,var(--blue),var(--blue-deep));position:relative;align-self:center;box-shadow:var(--sh-1)}
.logo .mark::before,.logo .mark::after{content:"";position:absolute;background:rgba(255,255,255,.85)}
.logo .mark::before{left:50%;top:5px;bottom:5px;width:1.5px;transform:translateX(-.75px)}
.logo .mark::after{top:50%;left:5px;right:5px;height:1.5px;transform:translateY(-.75px)}
.logo small{font-size:11px;color:var(--mute);font-weight:500;letter-spacing:.02em}
nav ul{list-style:none;display:flex;gap:4px;align-items:center}
nav .lnk{display:flex;align-items:center;gap:5px;padding:10px 16px;font-size:16.5px;font-weight:600;color:var(--ink-soft);border-radius:var(--r-sm);transition:.18s;cursor:pointer}
nav .lnk:hover,nav .lnk.active{color:var(--blue);background:var(--blue-tint)}
nav .lnk svg{width:11px;height:11px;opacity:.6;transition:transform .2s}
nav li.has-mega:hover .lnk svg{transform:rotate(180deg)}
.cta-head{background:var(--blue);color:#fff!important;padding:12px 22px!important;border-radius:var(--r-sm);font-size:16px;font-weight:600;box-shadow:var(--sh-1);transition:.2s}
.cta-head:hover{background:var(--blue-deep)!important}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px}
/* Mega menu */
li.has-mega{position:static}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line-soft);box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;z-index:50}
li.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{max-width:var(--max);margin:0 auto;padding:30px 28px;display:grid;grid-template-columns:repeat(4,1fr) 1.1fr;gap:26px}
.mega-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.2s;cursor:pointer}
.mega-card:hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-2px)}
.mega-card .pic{height:104px;position:relative}
.mega-card .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,57,80,.25),transparent 60%)}
.mega-card .body{padding:12px 14px}
.mega-card h4{font-family:var(--head);font-size:15px;font-weight:600;margin-bottom:3px}
.mega-card p{font-size:12.5px;color:var(--mute);line-height:1.4}
.mega-promo{background:var(--blue-deep);border-radius:var(--r);padding:22px;color:#EAF2F6;display:flex;flex-direction:column;justify-content:space-between}
.mega-promo .eyebrow{color:var(--bronze)}
.mega-promo h4{font-family:var(--head);font-size:19px;color:#fff;margin:8px 0 6px}
.mega-promo p{font-size:13px;color:#B9CCD6}
.mega-promo a{margin-top:14px;font-weight:600;font-size:13.5px;color:#fff;display:inline-flex;gap:7px;align-items:center}

/* ---------- Page hero / breadcrumb (内页通用页头) ---------- */
.page-hero{position:relative;background:var(--blue-deep);color:#fff;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(14,57,80,.92),rgba(11,46,64,.78)),radial-gradient(700px 300px at 85% -20%,rgba(176,123,60,.35),transparent)}
.page-hero.photo::before{background:linear-gradient(115deg,rgba(14,57,80,.86),rgba(11,46,64,.6))}
.page-hero .wrap{position:relative;z-index:2;padding:64px 28px 60px}
.crumb{font-family:var(--head);font-size:12.5px;letter-spacing:.04em;color:#9FC0D0;display:flex;gap:9px;align-items:center;margin-bottom:18px}
.crumb a:hover{color:#fff}
.crumb span{opacity:.5}
.page-hero h1{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.02em}
.page-hero p{font-size:17px;color:#C7D7DF;max-width:60ch;margin-top:16px}

/* ---------- section head ---------- */
.sec-head{max-width:680px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(28px,3.4vw,42px);margin:14px 0 14px}
.sec-head p{font-size:16.5px;color:var(--ink-soft)}
section.pad{padding:88px 0}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:#9AA6B0;padding:64px 0 26px;font-size:14px}
footer.site .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
footer.site .logo{color:#fff;margin-bottom:16px}
footer.site .logo small{color:#7B8896}
footer.site p.about{max-width:34ch;line-height:1.6}
footer.site h5{font-family:var(--head);color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:11px}
footer.site ul a:hover{color:#fff}
.fcontact b{color:#fff;font-family:var(--head);font-size:18px;display:block;margin-bottom:4px}
.fbottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:12.5px;color:#6B7886;flex-wrap:wrap;gap:12px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive (header/footer) ---------- */
@media(max-width:980px){
  nav ul.menu{display:none}
  .burger{display:flex}
  .mega{display:none}
  footer.site .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  footer.site .fgrid{grid-template-columns:1fr}
  .util .util-r .hide-sm{display:none}
}