/* ==========================================================================
   中港商联 · 企业官网设计系统
   base.css —— 全局变量 / 重置 / 排版 / 通用工具 / 动画
   风格：研学潮流风 · 天蓝 #1FA8E0 · 浅绿 #67D8A3 · 亮黄 #FFD43B
   说明：本文件为全站基础层，与 style.css(组件) / responsive.css(响应式) 配合
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 品牌色 */
  --c-blue:   #1FA8E0;
  --c-blue-d: #0E7FC0;
  --c-blue-xd:#0A5C8F;
  --c-blue-soft: #E7F6FD;
  --c-green:   #67D8A3;
  --c-green-d: #2FA96F;
  --c-green-soft: #EAFBF3;
  --c-yellow:  #FFD43B;
  --c-yellow-d:#F0B400;
  --c-yellow-soft: #FFF7DE;

  /* 中性色 */
  --c-ink:   #133A5E;   /* 标题深蓝墨色 */
  --c-body:  #4A5B6E;   /* 正文 */
  --c-muted: #8AA0B5;   /* 次要 */
  --c-line:  #E4EEF6;   /* 分割线 */
  --c-bg:    #F6FAFD;   /* 页面浅底 */
  --c-bg-2:  #EFF6FB;
  --c-white: #FFFFFF;

  /* 圆角 / 阴影 / 字体 */
  --r-sm: 8px;   --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;
  --sh-sm: 0 2px 10px rgba(18,58,94,.06);
  --sh-md: 0 10px 30px rgba(18,58,94,.10);
  --sh-lg: 0 22px 50px rgba(18,58,94,.14);
  --sh-blue: 0 12px 26px rgba(31,168,224,.28);
  --font: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;
  --container: 1200px;
  --nav-h: 78px;
}

/* ---------- 2. 重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  color:var(--c-body);
  font-size:15px; line-height:1.85;
  background:var(--c-white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; border:0; }
a{ color:inherit; text-decoration:none; transition:color .25s ease; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
input,textarea,select{ font-family:inherit; }
h1,h2,h3,h4,h5,h6{ color:var(--c-ink); font-weight:700; line-height:1.35; }
::selection{ background:var(--c-blue); color:#fff; }

/* ---------- 3. 容器与栅格 ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.container-wide{ width:100%; max-width:1440px; margin:0 auto; padding:0 28px; }
.row{ display:flex; flex-wrap:wrap; margin:0 -14px; }
.row>*{ padding:0 14px; }
.grid{ display:grid; gap:26px; }
/* 常见栅格 */
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.g-5{ grid-template-columns:repeat(5,1fr); }

/* ---------- 4. 区块间距 ---------- */
.section{ padding:88px 0; position:relative; }
.section-sm{ padding:56px 0; }
.section-tint{ background:var(--c-bg); }
.section-tint2{ background:var(--c-bg-2); }
.section-white{ background:#fff; }
.section-deep{ background:linear-gradient(150deg,#0E3A63 0%,#145080 55%,#0E7FC0 130%); color:#EAF3FB; }

/* ---------- 5. 区块标题 ---------- */
.sec-head{ max-width:760px; margin:0 auto 46px; text-align:center; position:relative; z-index:2; }
.sec-head .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; letter-spacing:3px; color:var(--c-blue-d);
  font-weight:600; margin-bottom:12px; text-transform:uppercase;
}
.sec-head .eyebrow::before,.sec-head .eyebrow::after{ content:""; width:22px; height:2px; background:var(--c-yellow); border-radius:2px; }
.sec-head h2{ font-size:34px; letter-spacing:1px; }
.sec-head h2 em{ font-style:normal; color:var(--c-blue); }
.sec-head p{ margin-top:14px; color:var(--c-muted); font-size:15px; }
.sec-head .rule{ width:56px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--c-blue),var(--c-green)); margin:16px auto 0; }
/* 左对齐标题（用于图文区块） */
.sec-head.left{ text-align:left; margin-left:0; }
.sec-head.left .rule{ margin-left:0; }

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 30px; border-radius:999px; font-size:15px; font-weight:600;
  letter-spacing:.5px; transition:all .3s ease; white-space:nowrap; cursor:pointer;
}
.btn-blue{ background:var(--c-blue); color:#fff; box-shadow:var(--sh-blue); }
.btn-blue:hover{ background:var(--c-blue-d); transform:translateY(-2px); box-shadow:0 16px 34px rgba(31,168,224,.36); }
.btn-green{ background:var(--c-green); color:#0B3D2A; }
.btn-green:hover{ background:var(--c-green-d); color:#fff; transform:translateY(-2px); }
.btn-yellow{ background:var(--c-yellow); color:#5A4300; }
.btn-yellow:hover{ background:var(--c-yellow-d); transform:translateY(-2px); }
.btn-outline{ border:2px solid var(--c-blue); color:var(--c-blue-d); background:transparent; }
.btn-outline:hover{ background:var(--c-blue); color:#fff; transform:translateY(-2px); }
.btn-white{ background:#fff; color:var(--c-blue-d); }
.btn-white:hover{ background:var(--c-blue-soft); transform:translateY(-2px); }
.btn-ghost-light{ border:2px solid rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.06); }
.btn-ghost-light:hover{ background:#fff; color:var(--c-blue-d); }
.btn-lg{ padding:16px 40px; font-size:16px; }
.btn-sm{ padding:8px 18px; font-size:13px; }
.btn .arr{ transition:transform .3s ease; }
.btn:hover .arr{ transform:translateX(4px); }

/* ---------- 7. 标签 / 徽章 ---------- */
.tag{ display:inline-block; padding:4px 13px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.5px; }
.tag-blue{ background:var(--c-blue-soft); color:var(--c-blue-d); }
.tag-green{ background:var(--c-green-soft); color:var(--c-green-d); }
.tag-yellow{ background:var(--c-yellow-soft); color:#8A6500; }
.tag-line{ border:1px solid var(--c-line); color:var(--c-muted); background:#fff; }

/* ---------- 8. 面包屑 ---------- */
.crumbs{ font-size:13px; color:rgba(255,255,255,.82); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.crumbs a{ color:rgba(255,255,255,.88); }
.crumbs a:hover{ color:#fff; }
.crumbs .sep{ opacity:.6; }

/* ---------- 9. 动画：滚动渐入 ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal-left{ opacity:0; transform:translateX(-44px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal-left.in{ opacity:1; transform:none; }
.reveal-right{ opacity:0; transform:translateX(44px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal-right.in{ opacity:1; transform:none; }
.reveal-zoom{ opacity:0; transform:scale(.9); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal-zoom.in{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.08s; } [data-delay="2"]{ transition-delay:.16s; }
[data-delay="3"]{ transition-delay:.24s; } [data-delay="4"]{ transition-delay:.32s; }
[data-delay="5"]{ transition-delay:.40s; } [data-delay="6"]{ transition-delay:.48s; }

/* 漂浮装饰点 */
.dot{ position:absolute; border-radius:50%; pointer-events:none; }

/* ---------- 10. 通用工具 ---------- */
.text-center{ text-align:center; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-48{margin-bottom:48px}
.flex{ display:flex; } .flex-center{ display:flex; align-items:center; justify-content:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-wrap{ flex-wrap:wrap; }
.gap-16{gap:16px}.gap-24{gap:24px}.gap-32{gap:32px}
.hidden{ display:none !important; }
.relative{ position:relative; }