/* ===================================================================
   agent.css —— 会员折扣计划页内容区（浅色 Techvia 风）
   hero 用 custom.css 的 .page-hero；本文件负责等级/权益/步骤/加盟/CTA
=================================================================== */
:root{ --ag-primary:#2563eb; --ag-dark:#1d4ed8; --ag-heading:#0b1f4d; --ag-text:#5f6b7e; --ag-muted:#8a98a8; --ag-border:#e6e9ef; --ag-soft:#f5f7fa; }
.agent-page{ background:#fff; }

/* ===== 通用区块 ===== */
.agent-sec{ padding:80px 20px; }
/* hero 紧接的第一块（会员等级）收紧上间距，避免太空 */
.page-hero + .agent-sec{ padding-top:42px; }
.agent-sec.band{ background:var(--ag-soft); }
.agent-sec-inner{ max-width:1200px; margin:0 auto; }
.agent-sec-head{ text-align:center; max-width:680px; margin:0 auto 48px; }
.agent-sec-head h2{ font-size:32px; font-weight:700; color:var(--ag-heading); margin:0 0 12px; }
.agent-sec-head p{ font-size:16px; color:var(--ag-text); margin:0; }

/* ===== 会员等级卡（彩色头部带 + 主体） ===== */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:center; }
.tier-card{ position:relative; background:#fff; border:1px solid var(--ag-border); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.tier-card:hover{ transform:translateY(-6px); box-shadow:0 24px 54px rgba(20,40,80,.16); }
.tier-card.bronze{ --tc1:#cd8a48; --tc2:#a25c27; --tier:#b06a30; }
.tier-card.gold{ --tc1:#f1c64f; --tc2:#d29b27; --tier:#cf9a26; }
.tier-card.platinum{ --tc1:#a06bf2; --tc2:#6028c8; --tier:#7a35e0; }

/* 彩色头部带 */
.tier-head{ position:relative; overflow:hidden; padding:30px 24px 26px; text-align:center; color:#fff; background:linear-gradient(135deg,var(--tc1),var(--tc2)); }
.tier-head::after{ content:''; position:absolute; top:-46px; right:-34px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.13); }
.tier-badge{ position:relative; z-index:1; width:64px; height:64px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.45); }
.tier-badge i{ font-size:27px; color:#fff; }
.tier-name{ position:relative; z-index:1; font-size:20px; font-weight:800; color:#fff; margin:0 0 6px; }
.tier-deposit{ position:relative; z-index:1; font-size:13px; color:rgba(255,255,255,.9); }
.tier-deposit b{ font-size:23px; font-weight:800; }

/* 主体 */
.tier-body{ flex:1; display:flex; flex-direction:column; padding:26px 26px 30px; }
.tier-discount{ text-align:center; padding:18px; background:var(--ag-soft); border:1px dashed var(--tier); margin-bottom:22px; }
.tier-discount-value{ display:block; font-size:42px; font-weight:800; color:var(--tier); line-height:1; }
.tier-discount-value i{ font-size:18px; font-style:normal; font-weight:700; margin-left:3px; }
.tier-discount-label{ display:block; margin-top:9px; font-size:12.5px; color:var(--ag-text); }
.tier-benefits{ list-style:none; padding:0; margin:0 0 24px; text-align:left; }
.tier-benefits li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ag-text); padding:7px 0; }
.tier-benefits li i{ color:var(--tier); font-size:14px; margin-top:2px; flex:0 0 auto; }
.tier-btn{ display:block; margin-top:auto; padding:13px; text-align:center; background:linear-gradient(135deg,var(--tc1),var(--tc2)); color:#fff; font-size:15px; font-weight:700; text-decoration:none; transition:.25s; }
.tier-btn:hover{ color:#fff; filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 12px 26px rgba(20,40,80,.22); }
.tier-status{ display:block; text-align:center; margin-top:14px; font-size:12px; font-weight:600; color:#0f9d6b; }
.tier-status i{ color:#ff6a3d; margin-right:3px; }

/* 推荐（金牌）突出 + 角标 */
.tier-card.featured{ border:none; box-shadow:0 22px 52px rgba(20,40,80,.18); transform:scale(1.045); z-index:2; }
.tier-card.featured:hover{ transform:scale(1.045) translateY(-6px); }
.tier-flag{ position:absolute; top:20px; right:-38px; z-index:3; transform:rotate(45deg); background:#ef3e36; color:#fff; font-size:11px; font-weight:700; letter-spacing:2px; padding:5px 44px; box-shadow:0 4px 10px rgba(0,0,0,.18); }

/* ===== 会员专属权益 ===== */
.benefit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.benefit-card{ background:#fff; border:1px solid var(--ag-border); padding:28px 24px; text-align:center; transition:transform .25s, box-shadow .25s; }
.benefit-card:hover{ transform:translateY(-5px); box-shadow:0 16px 38px rgba(20,40,80,.1); }
.benefit-icon{ width:54px; height:54px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background:#eaf1ff; color:var(--ag-primary); }
.benefit-icon i{ font-size:24px; }
.benefit-card h3{ font-size:16px; font-weight:700; color:var(--ag-heading); margin:0 0 8px; }
.benefit-card p{ font-size:13px; color:var(--ag-text); line-height:1.7; margin:0; }

/* ===== 如何成为会员（步骤） ===== */
.step-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.step-grid::before{ content:''; position:absolute; top:32px; left:12.5%; right:12.5%; height:2px; background:var(--ag-border); z-index:0; }
.step{ position:relative; z-index:1; text-align:center; }
.step-num{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--ag-primary),var(--ag-dark)); color:#fff; font-size:24px; font-weight:800; box-shadow:0 10px 24px rgba(37,99,235,.3); }
.step h3{ font-size:16px; font-weight:700; color:var(--ag-heading); margin:0 0 6px; }
.step p{ font-size:13.5px; color:var(--ag-text); margin:0; }

/* ===== 加盟要求 ===== */
.agent-req-card{ max-width:820px; margin:0 auto; background:#fff; border:1px solid var(--ag-border); padding:42px 46px; }
.agent-req-card h2{ font-size:24px; font-weight:700; color:var(--ag-heading); text-align:center; margin:0 0 26px; }
.agent-req-list{ list-style:none; padding:0; margin:0 0 24px; }
.agent-req-list li{ display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:1px dashed var(--ag-border); font-size:15px; color:var(--ag-text); line-height:1.6; }
.agent-req-list li:last-child{ border-bottom:none; }
.agent-req-list li i{ color:#10b981; font-size:16px; margin-top:3px; flex:0 0 auto; }
.agent-req-note{ display:flex; align-items:flex-start; gap:12px; background:#fff7e6; border:1px solid #fde3b3; padding:16px 20px; font-size:14px; color:#a16207; line-height:1.7; }
.agent-req-note i{ flex:0 0 auto; margin-top:3px; font-size:16px; }

/* ===== CTA 蓝色横幅 ===== */
.agent-cta{ padding:0; }
.agent-cta-band{ position:relative; overflow:hidden; padding:54px 20px; background:linear-gradient(120deg,#0b2a6b 0%,#1457c8 60%,#2563eb 100%); }
.agent-cta-band::before{ content:''; position:absolute; top:-90px; right:-60px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events:none; }
.agent-cta-inner{ position:relative; z-index:1; max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.agent-cta-text h2{ font-size:28px; font-weight:800; color:#fff; margin:0 0 8px; }
.agent-cta-text p{ font-size:15px; color:rgba(255,255,255,.85); margin:0; }
.agent-cta-btn{ display:inline-flex; align-items:center; gap:9px; padding:15px 42px; background:#fff; color:#1457c8; font-size:16px; font-weight:700; text-decoration:none; transition:.25s; white-space:nowrap; flex:0 0 auto; }
.agent-cta-btn:hover{ color:#0b2a6b; transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.25); }
.agent-cta-btn i{ font-size:16px; }

/* ===== 响应式 ===== */
@media (max-width:992px){
  .tier-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .tier-card.featured{ transform:none; }
  .tier-card.featured:hover{ transform:translateY(-6px); }
  .benefit-grid{ grid-template-columns:repeat(2,1fr); }
  .step-grid{ grid-template-columns:repeat(2,1fr); gap:36px 20px; }
  .step-grid::before{ display:none; }
}
@media (max-width:768px){
  .agent-sec{ padding:54px 20px; }
  .agent-sec-head h2{ font-size:26px; }
  .benefit-grid{ grid-template-columns:1fr; }
  .agent-req-card{ padding:30px 24px; }
  .agent-cta-inner{ flex-direction:column; text-align:center; }
}