/* ===========================================================
   CMC Markets外汇中文站  ·  全站样式
   配色模仿 CMC Markets 主站：深海军蓝主色 + azure 点缀
   字体：本土系统字体栈，无外部依赖，适配国内访问与加载速度
   =========================================================== */

:root{
  --navy:        #002A4E;
  --navy-900:    #001A31;
  --navy-700:    #073C68;
  --azure:       #0094D9;
  --azure-600:   #0078B2;
  --ink:         #10212F;
  --muted:       #57697A;
  --muted-soft:  #8696A5;
  --line:        #E3E9EF;
  --bg:          #FFFFFF;
  --bg-soft:     #F4F7FA;
  --bg-blue:     #EAF1F8;
  --white:       #FFFFFF;
  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 18px 48px -28px rgba(0,42,78,.40);
  --shadow-sm:   0 8px 24px -16px rgba(0,42,78,.35);
  --maxw:        1180px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
          "WenQuanYi Micro Hei", "Heiti SC", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.75;
  font-size:16px;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- 通用排版 ---------- */
h1,h2,h3,h4{ line-height:1.3; color:var(--navy); font-weight:700; letter-spacing:0; }
.brandtext{ letter-spacing:.02em; }

.section{ padding:78px 0; }
.section--soft{ background:var(--bg-soft); }
.section--blue{ background:var(--bg-blue); }

.eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--azure-600);
  margin-bottom:16px;
  text-transform:uppercase;
}
.section-head{ max-width:680px; margin-bottom:46px; }
.section-head h2{ font-size:30px; margin-bottom:14px; }
.section-head p{ color:var(--muted); font-size:16.5px; }

.lead{ font-size:18px; color:var(--muted); }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:15.5px;
  padding:13px 26px; border-radius:8px;
  border:1.5px solid transparent;
  cursor:pointer; transition:.18s ease;
  white-space:nowrap;
}
.btn--gold,
.btn--primary{
  background:var(--azure); color:#fff;
  box-shadow:0 8px 20px -10px rgba(0,148,217,.7);
}
.btn--primary:hover{ background:var(--azure-600); transform:translateY(-1px); }
.btn--ghost{
  border-color:rgba(255,255,255,.55); color:#fff;
}
.btn--ghost:hover{ background:rgba(255,255,255,.10); border-color:#fff; }
.btn--outline{
  border-color:var(--navy); color:var(--navy);
}
.btn--outline:hover{ background:var(--navy); color:#fff; }
.btn--sm{ padding:10px 20px; font-size:14.5px; }

/* ---------- 顶部导航 ---------- */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.logo svg{ width:36px; height:36px; }
.logo b{ font-size:18.5px; color:var(--navy); font-weight:700; letter-spacing:.01em; }
.logo span{ display:block; font-size:11px; color:var(--muted); font-weight:500; letter-spacing:.04em; margin-top:-2px; }

.nav-links{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav-links a{
  padding:8px 15px; font-size:15.5px; color:var(--ink);
  border-radius:6px; font-weight:500; transition:.15s;
}
.nav-links a:hover{ color:var(--azure-600); background:var(--bg-soft); }
.nav-links a.active{ color:var(--azure-600); }

.nav-cta{ margin-left:18px; }

.nav-toggle, .nav-toggle-label{ display:none; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(0,148,217,.20), transparent 60%),
    linear-gradient(160deg, #002A4E 0%, #013D6E 60%, #002A4E 100%);
  color:#fff;
  padding:88px 0 92px;
  overflow:hidden;
  position:relative;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center; }
.hero .eyebrow{ color:#7FC4EC; }
.hero h1{
  color:#fff; font-size:43px; line-height:1.18; margin-bottom:20px; font-weight:700;
}
.hero h1 em{ font-style:normal; color:#54B9EC; }
.hero p{ color:#C6D6E4; font-size:18px; max-width:540px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* hero 图形：上升柱形 */
.hero-art{ position:relative; }
.chart-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:30px 28px 24px;
  backdrop-filter:blur(4px);
}
.chart-card .ct-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; }
.chart-card .ct-top b{ color:#fff; font-size:15px; font-weight:600; }
.chart-card .ct-top span{ color:#54B9EC; font-size:13px; font-weight:600; }
.bars{ display:flex; align-items:flex-end; gap:14px; height:172px; }
.bars i{
  flex:1; border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg, #2E76A8, #0E3F66);
  display:block;
}
.bars i.up{ background:linear-gradient(180deg, #34B7EE, #0a76b4); }
.chart-foot{ display:flex; justify-content:space-between; margin-top:14px; color:#8FB2CC; font-size:12px; }

/* ---------- 统计条 ---------- */
.stats{
  background:var(--navy-900); color:#fff;
}
.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:30px 16px; text-align:center; border-right:1px solid rgba(255,255,255,.09); }
.stat:last-child{ border-right:none; }
.stat b{ display:block; font-size:32px; color:#fff; font-weight:700; line-height:1.1; }
.stat b small{ font-size:17px; color:#54B9EC; font-weight:600; }
.stat span{ display:block; color:#9FB6C8; font-size:13.5px; margin-top:6px; }

/* ---------- 特性网格 ---------- */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.feature{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 26px;
  transition:.2s;
}
.feature:hover{ border-color:#BFD6E8; box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.feature .ic{
  width:46px; height:46px; border-radius:11px;
  background:var(--bg-blue); color:var(--azure-600);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.feature .ic svg{ width:24px; height:24px; }
.feature h3{ font-size:18px; margin-bottom:9px; }
.feature p{ color:var(--muted); font-size:15px; }

/* ---------- 内容卡 / 链接卡 ---------- */
.linkcard{
  display:block; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 28px; transition:.2s; height:100%;
}
.linkcard:hover{ border-color:var(--azure); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.linkcard h3{ font-size:19px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.linkcard h3 .arrow{ color:var(--azure); transition:.2s; }
.linkcard:hover h3 .arrow{ transform:translateX(4px); }
.linkcard p{ color:var(--muted); font-size:15px; }

/* ---------- 双栏图文 ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.split + .split{ margin-top:64px; }
.split .panel{
  background:var(--navy); border-radius:18px; padding:38px;
  color:#fff; box-shadow:var(--shadow);
}
.split .panel h4{ color:#54B9EC; font-size:14px; margin-bottom:18px; letter-spacing:.05em; }
.split .panel ul{ list-style:none; }
.split .panel li{ padding:11px 0; border-bottom:1px solid rgba(255,255,255,.10); color:#D5E2EC; font-size:15px; display:flex; gap:10px; }
.split .panel li:last-child{ border-bottom:none; }
.split .panel li::before{ content:""; flex:0 0 7px; height:7px; margin-top:9px; border-radius:50%; background:var(--azure); }
.split-text h2{ font-size:27px; margin-bottom:16px; }
.split-text p{ color:var(--muted); margin-bottom:14px; }

/* ---------- 富文本内容 ---------- */
.prose{ max-width:780px; }
.prose h2{ font-size:25px; margin:42px 0 16px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:19px; margin:28px 0 10px; }
.prose p{ color:#37485A; margin-bottom:16px; }
.prose ul{ margin:0 0 18px 0; padding-left:0; list-style:none; }
.prose li{ position:relative; padding-left:24px; margin-bottom:10px; color:#37485A; }
.prose li::before{ content:""; position:absolute; left:2px; top:11px; width:8px; height:8px; border-radius:2px; background:var(--azure); }

/* ---------- 产品表格式列表 ---------- */
.market-row{
  display:grid; grid-template-columns:200px 1fr; gap:24px;
  padding:26px 0; border-top:1px solid var(--line); align-items:start;
}
.market-row:last-child{ border-bottom:1px solid var(--line); }
.market-row h3{ font-size:19px; color:var(--navy); }
.market-row .mk-tag{ color:var(--azure-600); font-size:13px; font-weight:600; margin-top:6px; }
.market-row p{ color:var(--muted); font-size:15.5px; }

/* ---------- 页面头部 banner ---------- */
.pagehead{
  background:linear-gradient(150deg, #002A4E, #073C68);
  color:#fff; padding:62px 0 56px;
}
.pagehead .crumbs{ font-size:13.5px; color:#8FB2CC; margin-bottom:14px; }
.pagehead .crumbs a:hover{ color:#fff; }
.pagehead h1{ color:#fff; font-size:36px; margin-bottom:14px; }
.pagehead p{ color:#C6D6E4; max-width:640px; font-size:17px; }

/* ---------- 步骤 ---------- */
.steps{ counter-reset:step; display:grid; gap:20px; }
.step{ display:flex; gap:18px; align-items:flex-start; }
.step .num{
  flex:0 0 42px; height:42px; border-radius:50%;
  background:var(--navy); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.step h3{ font-size:17.5px; margin-bottom:5px; }
.step p{ color:var(--muted); font-size:15px; }

/* ---------- 主页结尾 CTA ---------- */
.cta-band{
  background:
    radial-gradient(700px 360px at 80% 0%, rgba(0,148,217,.22), transparent 60%),
    linear-gradient(150deg, #002A4E, #013D6E);
  color:#fff; text-align:center; padding:72px 0;
}
.cta-band h2{ color:#fff; font-size:31px; margin-bottom:14px; }
.cta-band p{ color:#C6D6E4; max-width:560px; margin:0 auto 30px; font-size:17px; }

/* ---------- 页脚 ---------- */
.footer{ background:var(--navy-900); color:#A9BECE; padding:60px 0 0; font-size:14.5px; }
.footer-cols{ display:grid; grid-template-columns:1.5fr 1fr 1.1fr; gap:46px; padding-bottom:46px; }
.footer .flogo{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer .flogo svg{ width:32px; height:32px; }
.footer .flogo b{ color:#fff; font-size:17px; }
.footer-col h4{ color:#fff; font-size:15px; margin-bottom:16px; font-weight:600; }
.footer-col p{ line-height:1.85; margin-bottom:10px; }
.footer-list{ list-style:none; }
.footer-list li{ padding:5px 0; color:#A9BECE; }
.footer .contact-line{ margin-bottom:8px; }
.footer .contact-line b{ color:#D5E2EC; font-weight:500; }

.risk{
  border-top:1px solid rgba(255,255,255,.10);
  padding:24px 0; color:#7E94A6; font-size:12.5px; line-height:1.8;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding:20px 0; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:10px; color:#7E94A6; font-size:13px;
}

/* ===========================================================
   响应式
   =========================================================== */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-art{ max-width:440px; }
  .split{ grid-template-columns:1fr; gap:28px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-cols{ grid-template-columns:1fr 1fr; gap:32px; }
}

@media (max-width:760px){
  /* 移动端菜单（纯 CSS，无脚本） */
  .nav-toggle-label{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; cursor:pointer; color:var(--navy);
    margin-left:auto; font-size:24px; line-height:1;
  }
  .nav-links{
    position:absolute; top:70px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-sm);
    max-height:0; overflow:hidden; transition:max-height .28s ease;
    margin-left:0;
  }
  .nav-links a{ padding:15px 24px; border-bottom:1px solid var(--line); border-radius:0; }
  .nav-cta{ margin:14px 24px 18px; }
  .nav-cta .btn{ width:100%; justify-content:center; }
  .nav-toggle:checked ~ .nav-links{ max-height:430px; }
}

@media (max-width:620px){
  .section{ padding:54px 0; }
  .hero{ padding:60px 0 64px; }
  .hero h1{ font-size:31px; }
  .hero p{ font-size:16.5px; }
  .stats .wrap{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-right:none; border-bottom:1px solid rgba(255,255,255,.09); }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:1fr; gap:30px; }
  .market-row{ grid-template-columns:1fr; gap:8px; }
  .section-head h2,.cta-band h2,.pagehead h1{ font-size:25px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}