/* Yuanqi Global - Cloudflare Pages landing
   Blue-green premium consultant style (WeChat friendly)
*/
:root{
  /* 更亮：宝蓝 + 松石绿 + 大留白 + 金色点缀（Apple 简洁 + 阿里健康卡片感） */
  --bg: #F6F8FB;
  --card: rgba(255,255,255,.86);
  --card2: rgba(255,255,255,.94);
  --text: #101828;
  --muted: #475467;
  --muted2: #667085;
  --line: rgba(16,24,40,.10);

  --blue: #0B3D91;   /* 宝蓝（主） */
  --blue2: #1E4F7A;  /* 次宝蓝 */
  --teal: #12B7A6;   /* 松石绿（辅） */
  --teal2: #0F8D86;

  --gold: #C9A86A; /* 呼应金色logo */
  --warm: #FFB24A; /* 仅作小点缀（更有温度） */
  --warm2: #FF6A5B;

  --shadow: 0 18px 60px rgba(16,24,40,.10);
  --shadow2: 0 10px 30px rgba(16,24,40,.10);

  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(14,165,233,.14), transparent 60%),
    radial-gradient(820px 520px at 80% 10%, rgba(16,185,129,.12), transparent 58%),
    radial-gradient(820px 520px at 50% 120%, rgba(59,130,246,.10), transparent 58%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}

/* 防止中文关键词被拆开换行 */
.nowrap{ white-space: nowrap; }

.skip{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:16px; top:16px; width:auto; height:auto;
  padding:10px 12px; border-radius:12px;
  background:rgba(0,0,0,.75); border:1px solid var(--line);
  z-index:9999;
}

.site-header{
  position:sticky; top:0;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--line);
  z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}

.brand{display:flex; align-items:center; gap:12px; min-width:220px}
.brand-logo{height:34px; width:auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.10))}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-title{font-weight:700; letter-spacing:.4px}
.brand-sub{font-size:12px; color:var(--muted2); margin-top:2px}

.nav{display:flex; align-items:center; gap:16px}
.nav-link{
  font-size:14px; color:var(--muted);
  padding:8px 10px; border-radius:12px;
  transition: background .2s ease, color .2s ease;
}
.nav-link:hover{background:rgba(16,24,40,.06); color:var(--text)}
.nav-cta{
  font-weight:700; font-size:14px;
  padding:10px 14px; border-radius:14px;
  background: linear-gradient(135deg, rgba(11,61,145,.95), rgba(22,193,179,.95));
  box-shadow: 0 14px 30px rgba(11,61,145,.18);
  border:1px solid rgba(201,168,106,.35);
}

.menu-btn{
  display:none;
  width:42px; height:38px; border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.90);
  align-items:center; justify-content:center;
  gap:5px; flex-direction:column;
}
.menu-btn span{
  width:18px; height:2px; border-radius:4px;
  background: rgba(16,24,40,.72);
}

.mobile-drawer{
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
}
.drawer-inner{width:min(var(--max), calc(100% - 40px)); margin:0 auto; padding:14px 0; display:grid; gap:10px}
.drawer-link{
  padding:12px 12px; border-radius:14px;
  background: rgba(16,24,40,.04); border:1px solid var(--line);
  color: var(--muted);
}
.drawer-cta{
  text-align:center;
  padding:12px 12px; border-radius:14px;
  background: linear-gradient(135deg, rgba(255,178,74,.95), rgba(22,193,179,.95));
  font-weight:800;
}

.hero{
  position:relative;
  padding:56px 0 30px;
  color: #FFF;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(46,226,209,.35), transparent 60%),
    radial-gradient(900px 420px at 90% 10%, rgba(58,123,255,.28), transparent 60%),
    linear-gradient(135deg, #0B3D91 0%, #05305E 45%, #0B6E8E 100%);
}
.hero-inner{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:26px; align-items:center;
}
.hero-copy{padding:12px 0}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color: var(--muted);
  font-size:13px;
}
.h1{
  margin:14px 0 10px;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height:1.05;
  letter-spacing: -.5px;
}

/* 主口号（要更大、更像招牌句） */
.hero-slogan{
  margin:0 0 8px;
  font-size: clamp(38px, 6.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -.6px;
  text-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.grad{
  background: linear-gradient(135deg, var(--warm), var(--teal));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.lead{
  margin:0;
  font-size: clamp(16px, 2.0vw, 19px);
  color: var(--muted);
  max-width: 46ch;
}
.cta-row{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.14);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
}
.btn:active{transform: translateY(1px)}
.btn.primary{
  background: linear-gradient(135deg, rgba(255,178,74,.95), rgba(22,193,179,.95));
  box-shadow: var(--shadow2);
}
.btn.ghost{
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.btn.ghost:hover{background: rgba(255,255,255,.09)}
.btn.big{padding:14px 18px; border-radius:18px; font-size:16px}

.meta{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:8px; margin-top:14px;
  color: var(--muted2); font-size:13px;
}
.dot{opacity:.7}

.hero-card{
  position:relative;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding:16px;
  min-height: 320px;
}
.card-top{display:flex; gap:10px}
.badge{
  font-size:12px; font-weight:800;
  padding:8px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--muted);
}
.card-body{padding:16px 0 8px}
.line{
  height:12px; border-radius:10px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  margin:10px 0;
}
.w80{width:82%}
.w65{width:66%}
.w55{width:54%}
.divider{height:1px; background: rgba(255,255,255,.12); margin:14px 0}
.kpi{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.kpi-item{
  border-radius:16px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  padding:12px 10px;
}
.kpi-num{font-weight:900; font-size:18px}
.kpi-text{color: var(--muted2); font-size:12px; margin-top:4px}
.card-glow{
  position:absolute; inset:-80px;
  background: radial-gradient(400px 260px at 25% 30%, rgba(22,193,179,.28), transparent 60%),
              radial-gradient(360px 260px at 75% 55%, rgba(42,98,255,.22), transparent 60%);
  pointer-events:none;
  filter: blur(10px);
}

.hero-bg{
  position:absolute; left:0; right:0; bottom:-1px;
  height:60px;
  background: linear-gradient(180deg, transparent, var(--bg));
}

.hero .lead{ color: rgba(255,255,255,.82); }
.hero .hero-meta{ color: rgba(255,255,255,.70); }

.section{padding:40px 0}
.section.alt{
  background: #FFFFFF;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-head{margin-bottom:18px}
.section-head h2{margin:0 0 6px; font-size:28px}
.section-head p{margin:0; color: var(--muted)}

.grid-3{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
}
.feature{
  border-radius: var(--radius);
  background: var(--card);
  border:1px solid var(--line);
  padding:16px 16px;
}
.feature h3{margin:0 0 6px; font-size:16px}
.feature p{margin:0; color: var(--muted); font-size:14px}

.steps{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
  margin-top:14px;
}
.step{
  border-radius: var(--radius);
  background: var(--card);
  border:1px solid var(--line);
  padding:16px;
  display:flex; gap:12px;
}
.step-n{
  font-weight:900;
  color: rgba(22,193,179,.95);
  font-size:18px;
  min-width:44px;
}
.step h3{margin:0 0 6px}
.step p{margin:0; color: var(--muted); font-size:14px}

.center{display:flex; justify-content:center; margin-top:16px}

.quote{
  border-radius: var(--radius2);
  background: linear-gradient(135deg, rgba(22,193,179,.12), rgba(42,98,255,.10));
  border:1px solid rgba(255,255,255,.12);
  padding:20px 18px;
  display:flex; gap:14px;
}
.quote-mark{font-size:40px; line-height:1; opacity:.8}
.quote-text .q1{font-size:20px; font-weight:900}
.quote-text .q2{font-size:20px; font-weight:900; margin-top:6px}
.quote-text .q3{margin-top:10px; color: var(--muted)}

.trust{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
  margin-top:16px;
}
.trust-item{
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  padding:16px;
}
.trust-item h3{margin:0 0 6px; font-size:16px}
.trust-item p{margin:0; color: var(--muted); font-size:14px}

/* 产品与活动 */
.promo-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  margin-top:18px;
}
.promo-card{
  padding:18px;
  border-radius: 18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.promo-card h3{margin:0 0 8px; font-size:18px}
.promo-card p{margin:0 0 12px; color: var(--muted)}
.promo-tag{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); font-size:13px}

.qr-wrap{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.qr-img{
  width: 160px;
  max-width: 60vw;
  border-radius: 16px;
  border:1px solid var(--border);
  background:#fff;
}
.qr-caption{font-size:13px; color: var(--muted)}

.section.cta{
  padding:34px 0;
  background: radial-gradient(900px 280px at 30% 50%, rgba(255,178,74,.18), transparent 60%),
              radial-gradient(900px 280px at 70% 50%, rgba(22,193,179,.16), transparent 60%),
              rgba(255,255,255,.02);
  border-top:1px solid rgba(255,255,255,.08);
}
.cta-inner{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  padding:18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.cta-inner h2{margin:0 0 6px; font-size:24px}
.cta-inner p{margin:0; color: var(--muted)}

.site-footer{
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(7,19,26,.70);
  padding:18px 0;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.footer-brand{font-weight:800}
.footer-note{color: var(--muted2); font-size:12px; margin-top:4px}
.footer-link{color: var(--muted); font-weight:700}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; gap:18px}
  .hero-card{min-height: 280px}
  .grid-3, .steps, .trust{grid-template-columns:1fr}
}
@media (max-width: 780px){
  .nav{display:none}
  .menu-btn{display:flex}
  .container{width: min(var(--max), calc(100% - 28px))}
  .cta-inner{flex-direction:column; align-items:flex-start}
}


/* --------- 视觉升级：更亮、更有温度（宝蓝+青绿+白+金） --------- */
body{
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(22,193,179,.22), transparent 60%),
    radial-gradient(760px 520px at 82% 18%, rgba(214,178,94,.18), transparent 60%),
    radial-gradient(980px 640px at 60% 86%, rgba(42,98,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(10,38,62,1) 0%, rgba(7,30,53,1) 38%, rgba(4,18,33,1) 100%);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",
    Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.nav{
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.btn.primary{
  background: linear-gradient(135deg, rgba(22,193,179,1), rgba(42,98,255,1));
  box-shadow: 0 12px 30px rgba(22,193,179,.18), 0 12px 30px rgba(42,98,255,.10);
}
.btn.primary:hover{ transform: translateY(-1px); }

.pill{
  border-color: rgba(214,178,94,.45);
  color: rgba(255,255,255,.88);
  background: linear-gradient(180deg, rgba(214,178,94,.16), rgba(255,255,255,.04));
}

/* 主标语（稍微收细，避免“序”掉行） */
.hero h1{
  font-size: clamp(34px, 6.3vw, 56px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.hero h1 .accent{
  color: rgba(22,193,179,1);
  text-shadow: 0 10px 28px rgba(22,193,179,.22);
}

/* “不是缺方法，是一直错顺序。”收细一点 */
.hero .kicker{
  font-size: clamp(16px, 3.6vw, 20px);
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  max-width: 44ch;
}

/* 卡片更亮 */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow1);
}

/* 公告栏（走马灯） */
.announce{
  margin-top: 18px;
  border-radius: var(--radius2);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow1);
}
.announce-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform .45s ease;
  will-change: transform;
}
.announce-slide{
  display: block;
  padding: 14px;
  text-decoration: none;
  color: inherit;
}
.announce-slide img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #f2f4f7;
}
.announce-meta{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.announce-title{
  font-weight: 700;
  letter-spacing: .01em;
}
.announce-tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(214,178,94,.35);
  background: rgba(214,178,94,.12);
  color: #6B4E16;
  white-space: nowrap;
}
.announce-dots{
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 10px 12px 14px;
}
.announce-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #E2E8F0;
  border: 1px solid #CBD5E1;
}
.announce-dot.active{
  background: rgba(22,193,179,1);
  border-color: rgba(22,193,179,.55);
  box-shadow: 0 0 0 6px rgba(22,193,179,.10);
}

/* 手机端：保持首屏更“亮”，减少压抑 */
@media (max-width: 520px){
  .hero{
    padding-top: 18px;
  }
  .nav .brand-sub{ opacity: .88; }
  .card{ background: var(--card); }
}

.brand-slogan{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .01em;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(11,61,145,1), rgba(18,190,164,1));
  color: #FFFFFF;
  border: 1px solid rgba(201,168,106,.75);
  -webkit-text-stroke: .4px rgba(201,168,106,.65);
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}