/*
Theme Name: ePac Flex Pro
...
*/

:root{--brand:#0a6cff;--ink:#0a0a0a;--muted:#5a5f6a;--bg:#fff;--soft:#f2f5f9;--accent:#111827}
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--accent);background:#fff}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:var(--brand);color:#fff;font-weight:600;text-decoration:none}
.btn:hover{opacity:.95;transform:translateY(-1px)}
.btn.full{width:100%;text-align:center}
.btn-quote{box-shadow:0 6px 20px rgba(10,108,255,.25)}
/* Header */
.epac-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb}
.header-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:68px}
.brand{font-weight:800;color:var(--ink);text-decoration:none}
/* Menu */
.menu{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.menu li{position:relative}
.menu a{text-decoration:none;color:#111827;padding:8px 10px;border-radius:10px;display:block}
.menu .menu-item-has-children > a::after{content:"▾";margin-left:6px;font-size:12px}
.menu .sub-menu{position:absolute;left:0;top:calc(100% + 10px);background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 12px 32px rgba(16,24,40,.12);padding:8px;display:none;min-width:220px}
.menu .sub-menu a{padding:8px 10px;border-radius:10px}
.menu li:hover > .sub-menu{display:block}
/* Mobile */
.hamburger{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:0}
.hamburger span{width:22px;height:2px;background:#111;border-radius:2px}
.nav-desktop{display:none}
.nav-drawer[hidden]{display:none}
.nav-drawer{position:fixed;inset:0;background:rgba(15,23,42,.4);backdrop-filter:saturate(120%) blur(2px)}
.drawer-inner{position:absolute;right:0;top:0;height:100%;width:86%;max-width:360px;background:#fff;border-left:1px solid #e5e7eb;border-top-left-radius:14px;border-bottom-left-radius:14px;padding:18px 16px 24px;display:flex;flex-direction:column;gap:10px}
.drawer-close{align-self:flex-end;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:10px;font-size:24px;line-height:1;padding:4px 10px}
.drawer-inner .menu{flex-direction:column;gap:0}
.drawer-inner .menu a{padding:10px 6px}
/* Footer */
.epac-footer{background:#0b1220;color:#cbd5e1;padding:48px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:22px}
.f-title{font-weight:800;color:#fff;margin-bottom:10px}
.f-col a{display:block;color:#cbd5e1;text-decoration:none;margin:6px 0}
.f-col a:hover{color:#fff}
.f-brand .brand{color:#fff;font-size:20px}
.f-tag{color:#9ca3af;margin:8px 0 14px}
.footer-bottom{margin-top:22px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #1f2937;padding-top:14px}
.legal{display:flex;gap:12px;align-items:center}
.legal a{color:#94a3b8;text-decoration:none}
.legal a:hover{color:#fff}
.social a{margin-left:12px;color:#cbd5e1;text-decoration:none}
.social a:hover{color:#fff}
/* Sections */
.section{padding:64px 0}
.section.soft{background:var(--soft)}
.h1{font-size:clamp(40px,6vw,84px);line-height:1.02;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.h2{font-size:32px;line-height:1.15;font-weight:800;color:var(--ink);margin-bottom:14px}
.p{font-size:18px;line-height:1.6;color:#374151}
.hero{padding:60px 0 40px;background:linear-gradient(180deg,#f8fbff 0%, #ffffff 40%)}
.hero .two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.figure{border-radius:24px;overflow:hidden;border:1px solid #e5e7eb;background:#fff;min-height:280px}
.figure img{display:block;width:100%;height:auto}
.quote{background:#0f172a;color:#e5e7eb;border-radius:18px;padding:26px}
.quote strong{color:#fff}
.list{margin:0;padding-left:18px;color:#374151}
.list li{margin:6px 0}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:22px;box-shadow:0 2px 8px rgba(16,24,40,.04)}
.card.kpi{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product{background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.product .txt{padding:18px}
.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.margrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.maritem{border:1px solid #e5e7eb;border-radius:14px;padding:14px;text-align:center;background:#fff;font-weight:700}
.footer-cta{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#0b1220;color:#cbd5e1;border-radius:20px;padding:28px}
.footer-cta .btn{background:#38bdf8}
/* Content article */
.epac-article img{max-width:100%;height:auto;border-radius:12px}
/* Responsive */
@media (min-width:1025px){.nav-desktop{display:block}.hamburger{display:none}}
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .products{grid-template-columns:repeat(2,1fr)}
  .resource-grid{grid-template-columns:repeat(2,1fr)}
  .margrid{grid-template-columns:repeat(3,1fr)}
  .hero .two-col{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .products{grid-template-columns:1fr}
  .resource-grid{grid-template-columns:1fr}
  .margrid{grid-template-columns:repeat(2,1fr)}
}

/* ===== Quick Beauty Pack ===== */

/* 字体与基础排版 */
:root{
  --brand:#0a66ff;          /* 主色 */
  --brand-dark:#084dcc;
  --ink:#0f172a;            /* 正文色 */
  --muted:#6b7280;          /* 次要文字 */
  --bg-soft:#f6f9ff;        /* 柔和背景 */
  --radius:14px;
  --shadow:0 8px 18px rgba(2,6,23,.06);
}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  letter-spacing:.1px;
}
.h1,.h2,.h3, h1,h2,h3{
  font-family:"Poppins","Inter",system-ui;
  letter-spacing:.2px;
}
.h1, h1{ font-weight:800; line-height:1.06; }
.h2, h2{ font-weight:700; line-height:1.12; }
.h3, h3{ font-weight:700; line-height:1.18; }

/* 容器宽度 & 区块间距 */
.container{ max-width:1200px; margin-inline:auto; padding:0 20px; }
.section{ padding:64px 0; }
.section.soft{ background:var(--bg-soft); }

/* 顶部导航 */
.epac-header{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid rgba(15,23,42,.06);
  backdrop-filter:saturate(180%) blur(6px);
}
.header-wrap{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{
  display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:18px; color:var(--ink);
}
.nav-desktop .menu{ display:flex; gap:26px; }
.nav-desktop a{
  position:relative; color:#334155; font-weight:600; padding:6px 2px; display:inline-block;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--brand);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-desktop a:hover{ color:var(--ink) }
.nav-desktop a:hover::after{ transform:scaleX(1) }

/* 按钮 */
.btn{
  --btn-pad:12px 18px;
  display:inline-flex; align-items:center; gap:8px;
  padding:var(--btn-pad); border-radius:12px;
  background:var(--brand); color:#fff; font-weight:700;
  box-shadow:0 6px 14px rgba(10,102,255,.18);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{ background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 10px 22px rgba(10,102,255,.22) }
.btn:active{ transform:translateY(0) }

/* Hero 区块 */
.hero .two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; }
.hero .badge{ color:var(--muted); font-size:12px; }
.hero .figure{
  width:100%; aspect-ratio:4/3; border-radius:var(--radius);
  background:linear-gradient(180deg,#f3f7ff, #e8efff);
  box-shadow:var(--shadow); overflow:hidden;
}
.hero .figure img{ width:100%; height:100%; object-fit:cover; display:block }

/* 引言卡片 */
.quote{
  background:#0b1a37; color:#dbe7ff; border-radius:16px; padding:18px 20px;
  box-shadow:var(--shadow);
}

/* 5 卡优势 */
.cards{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.card{
  border:1px solid rgba(2,6,23,.06); border-radius:16px; padding:16px; background:#fff;
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease;
}
.card.kpi .h3{ font-size:20px; }
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(2,6,23,.10) }

/* Markets/Products 网格空态也不难看 */
.products,.margrid,.resource-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.products:empty::before,
.margrid:empty::before{
  content:"Coming soon"; display:block; padding:26px; text-align:center;
  border:1px dashed rgba(2,6,23,.15); border-radius:14px; color:#64748b; background:#fff;
}

/* 底部 CTA */
.footer-cta{
  border-radius:18px; background:linear-gradient(135deg,#0a66ff 0%,#6aa1ff 100%);
  color:#e8f1ff; padding:26px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 12px 30px rgba(10,102,255,.26);
}
.footer-cta .btn{ background:#fff; color:#0a66ff; box-shadow:none }
.footer-cta .btn:hover{ background:#eef4ff }

/* 页脚 */
.epac-footer{ background:#0b1220; color:#d1d5db; padding:56px 0 28px }
.epac-footer a{ color:#c7d2fe }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:22px }
.f-title{ color:#fff; font-weight:700; margin-bottom:10px }

/* 响应式 */
@media (max-width: 1024px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .products,.margrid,.resource-grid{ grid-template-columns:repeat(2,1fr); }
  .hero .two-col{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .cards{ grid-template-columns:1fr; }
  .products,.margrid,.resource-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-cta{ flex-direction:column; gap:12px; align-items:flex-start }
}

.nav-desktop .menu > li:last-child > a{
  background:var(--brand); color:#fff; padding:10px 14px; border-radius:12px;
  box-shadow:0 6px 14px rgba(10,102,255,.18);
}
.nav-desktop .menu > li:last-child > a:hover{ background:var(--brand-dark) }