/* 鹿奕电竞 · 官网首页 / APP 页 扩展样式
 * 载入顺序在 style.css 之后；只新增类，不覆盖站点既有组件，避免影响其它页面。
 * 设计语言沿用官网蓝（#0f66d4  #1890ff  #5cb8ff）+ 主色橙（--primary）。
 */
:root {
  --o-blue-1: #0f66d4;
  --o-blue-2: #1890ff;
  --o-blue-3: #5cb8ff;
  --o-gold: #ffd94d;
  --o-ink: #0d1b2a;
  --o-line: #e8eef6;
}

/* ---------- 进场动画（尊重系统减弱动效设置） ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ================= 首页首屏 ================= */
.hero-official.hx { padding: 66px 0 74px; }
.hero-official.hx::before,
.hero-official.hx::after { opacity: .75; }
/* 细网格纹理，增强科技感 */
.hero-official.hx > .hx-grid::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 78%);
}
.hx-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 48px;
  align-items: center;
}
.hero-official.hx h1 { font-size: 52px; margin-top: 18px; }
.hero-official.hx .hero-sub { max-width: 600px; }
.hx-note { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.hx-note i {
  font-style: normal; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
}

/* 首屏右侧：下一场赛事卡（纯 CSS 合成，不使用假截图） */
.match-card {
  position: relative;
  background: rgba(9, 30, 60, .44);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 26px 60px rgba(3, 18, 40, .38);
  backdrop-filter: blur(8px);
  animation: fadeUp .7s ease .2s both;
}
.match-card .mc-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; letter-spacing: 1px; color: rgba(255,255,255,.82);
}
.mc-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 217, 77, .16); color: var(--o-gold);
  border: 1px solid rgba(255, 217, 77, .38); font-weight: 700;
}
.mc-live s { width: 6px; height: 6px; border-radius: 50%; background: var(--o-gold); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.mc-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 20px; }
.mc-team { text-align: center; }
.mc-team .tk {
  width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.34);
}
.mc-team b { display: block; font-size: 14px; font-weight: 700; }
.mc-team span { font-size: 12px; opacity: .78; }
.mc-vs { font-size: 15px; font-weight: 800; color: var(--o-gold); letter-spacing: 1px; }
.mc-foot {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: rgba(255,255,255,.82);
}
.mc-foot a { color: #fff; font-weight: 600; }
.mc-bar { margin-top: 14px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.mc-bar i { display: block; height: 100%; width: 68%; border-radius: 999px; background: linear-gradient(90deg, var(--o-gold), #ffe89b); }

/* ================= 通用区块标题（官网风） ================= */
.hx-sec { padding: 62px 0; }
.hx-sec.alt { background: var(--bg); }
.hx-head { margin-bottom: 30px; }
.hx-head .en {
  display: inline-block; font-size: 12px; letter-spacing: 3px; font-weight: 700;
  color: var(--o-blue-2); background: #eaf3ff; border-radius: 999px; padding: 4px 12px;
}
.hx-head h2 { font-size: 30px; margin-top: 12px; letter-spacing: -.4px; }
.hx-head p { color: var(--text-3); margin-top: 8px; max-width: 720px; }
.hx-head.center { text-align: center; }
.hx-head.center p { margin-left: auto; margin-right: auto; }

/* ================= 项目阵容 ================= */
.gs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gs-card {
  position: relative; overflow: hidden; border-radius: 16px; background: #fff;
  border: 1px solid var(--o-line); box-shadow: 0 4px 16px rgba(15, 40, 80, .05);
  transition: transform .28s, box-shadow .28s, border-color .28s;
  display: flex; flex-direction: column;
}
.gs-card:hover { transform: translateY(-6px); box-shadow: 0 20px 46px rgba(24,144,255,.18); border-color: rgba(24,144,255,.35); }
.gs-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #0f66d4, #5cb8ff); }
.gs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gs-card:hover .gs-thumb img { transform: scale(1.06); }
.gs-thumb .gs-tag {
  position: absolute; left: 14px; top: 14px;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(9, 30, 60, .55); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(4px);
}
.gs-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.gs-body h3 { font-size: 19px; }
.gs-body p { color: var(--text-3); font-size: 13.5px; margin-top: 8px; line-height: 1.75; flex: 1; }
.gs-meta { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.gs-meta span {
  font-size: 12px; color: var(--o-blue-1); background: #eef5ff; border-radius: 6px; padding: 3px 9px;
}
.gs-body .btn { margin-top: 16px; align-self: flex-start; }

/* ================= 能力矩阵 ================= */
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cap-card {
  background: #fff; border: 1px solid var(--o-line); border-radius: 16px; padding: 26px 24px;
  transition: transform .25s, box-shadow .25s;
}
.cap-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15, 40, 80, .10); }
.cap-card .ic {
  width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; margin-bottom: 15px; box-shadow: 0 8px 18px rgba(15, 40, 80, .16);
}
.cap-card h3 { font-size: 16.5px; }
.cap-card p { color: var(--text-3); font-size: 13.5px; margin-top: 8px; line-height: 1.75; }

/* ================= 数据条 ================= */
.stat-band {
  background: linear-gradient(120deg, #0f66d4 0%, #1890ff 52%, #5cb8ff 100%);
  color: #fff; border-radius: 20px; padding: 40px 44px; position: relative; overflow: hidden;
}
.stat-band::after {
  content: ""; position: absolute; right: -90px; top: -110px; width: 320px; height: 320px; border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.stat-grid-o { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }
.stat-grid-o b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.5px; }
.stat-grid-o span { font-size: 13px; opacity: .9; }

/* ================= 客户端推广条（衔接 APP 页） ================= */
.app-band {
  display: grid; grid-template-columns: 1.35fr .65fr; gap: 34px; align-items: center;
  background: #0d1b2a; color: #fff; border-radius: 20px; padding: 42px 46px; position: relative; overflow: hidden;
}
.app-band::after {
  content: ""; position: absolute; left: -80px; bottom: -140px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,44,.34), transparent 68%);
}
.app-band .ab-in { position: relative; z-index: 1; }
.app-band .en { font-size: 12px; letter-spacing: 3px; color: var(--o-gold); font-weight: 700; }
.app-band h2 { font-size: 28px; margin-top: 10px; }
.app-band p { color: rgba(255,255,255,.76); margin-top: 10px; max-width: 620px; font-size: 14.5px; }
.ab-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.ab-tags span { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); }
.ab-acts { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }

/* ================= CTA 收尾 ================= */
.cta-o {
  text-align: center; background: var(--bg); border: 1px solid var(--o-line);
  border-radius: 20px; padding: 52px 30px;
}
.cta-o h2 { font-size: 28px; }
.cta-o p { color: var(--text-3); margin-top: 10px; }
.cta-o .acts { margin-top: 24px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-o2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 28px; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-o2.primary { background: linear-gradient(135deg, var(--o-blue-2), var(--o-blue-1)); color: #fff; box-shadow: 0 12px 26px rgba(24,144,255,.28); }
.btn-o2.ghost { background: #fff; color: var(--o-blue-1); border-color: #cfe3ff; }
.btn-o2:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(24,144,255,.26); }

/* ================= APP 介绍页 ================= */
.pg-app .page-hero { padding: 46px 0 40px; }
.pg-app .page-hero .slogan {
  font-size: 13px; letter-spacing: 3px; opacity: .92; display: inline-block;
  padding: 5px 14px; border-radius: 20px; background: rgba(255,255,255,.16);
}
.app-top { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.app-top h1 { font-size: 38px; font-weight: 800; letter-spacing: 1px; }
.app-top .sub { margin-top: 12px; opacity: .95; font-size: 16px; max-width: 560px; line-height: 1.85; }
.app-top .verline { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.app-top .verline i { font-style: normal; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26); }
.app-top .acts { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

/* 手机外框（纯 CSS 合成 UI 预览） */
.phones { display: flex; gap: 18px; justify-content: center; }
.phone {
  width: 172px; aspect-ratio: 9 / 18.5; border-radius: 24px; padding: 10px;
  background: linear-gradient(160deg, #1b2b40, #0d1b2a);
  box-shadow: 0 24px 50px rgba(3, 18, 40, .35);
  border: 1px solid rgba(255,255,255,.16);
}
.phone .scr { width: 100%; height: 100%; border-radius: 16px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.phone .bar { height: 26px; background: linear-gradient(135deg, #0f66d4, #1890ff); }
.phone .pad { padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.phone .ln { height: 7px; border-radius: 4px; background: #eef2f7; }
.phone .ln.s { width: 56%; }
.phone .blk { height: 46px; border-radius: 9px; background: linear-gradient(135deg, #eaf3ff, #d7e9ff); }
.phone .row { display: flex; gap: 7px; }
.phone .row .tag { flex: 1; height: 26px; border-radius: 7px; background: #fff2e8; }
.phone .row .tag.b { background: #eaf3ff; }
.phone .msg { height: 20px; border-radius: 10px; background: #f1f4f8; }
.phone .msg.mine { background: #ffe4d4; width: 72%; align-self: flex-end; }

/* 下载卡 */
.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.dl-card {
  background: #fff; border: 1px solid var(--o-line); border-radius: 18px; padding: 28px 26px;
  display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s;
}
.dl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15, 40, 80, .10); }
.dl-card .dh { display: flex; align-items: center; gap: 14px; }
.dl-card .dh .ic {
  width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; background: linear-gradient(135deg, var(--o-blue-2), var(--o-blue-1));
}
.dl-card.win .dh .ic { background: linear-gradient(135deg, #0f66d4, #12a5a0); }
.dl-card h3 { font-size: 19px; }
.dl-card .meta { color: var(--text-3); font-size: 13px; margin-top: 3px; }
.dl-list { margin-top: 18px; border-top: 1px dashed var(--o-line); padding-top: 16px; }
.dl-list div { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; padding: 5px 0; color: var(--text-2); }
.dl-list div b { font-weight: 600; color: var(--text); text-align: right; word-break: break-all; }
.dl-list .sha { align-items: flex-start; }
.dl-list .sha > span:first-child { white-space: nowrap; }
.dl-list .sha b { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.dl-card .acts { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* 功能特性 */
.feat-grid-o { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feat-o { background: #fff; border: 1px solid var(--o-line); border-radius: 16px; padding: 24px 22px; transition: transform .25s, box-shadow .25s; }
.feat-o:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15, 40, 80, .10); }
.feat-o .ic {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 21px; margin-bottom: 14px; background: #eaf3ff;
}
.feat-o h3 { font-size: 16px; }
.feat-o p { color: var(--text-3); font-size: 13.5px; margin-top: 7px; line-height: 1.75; }

/* 步骤 */
.steps-o { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step-o { position: relative; background: #fff; border: 1px solid var(--o-line); border-radius: 16px; padding: 26px 22px; }
.step-o .no {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--o-blue-2), var(--o-blue-1));
}
.step-o h3 { font-size: 16px; margin-top: 14px; }
.step-o p { color: var(--text-3); font-size: 13.5px; margin-top: 7px; line-height: 1.75; }

/* FAQ */
.faq { max-width: 900px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--o-line); border-radius: 14px; padding: 4px 20px; margin-bottom: 12px;
}
.faq summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 15.5px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--o-blue-2); font-weight: 800; font-size: 18px; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--text-2); font-size: 14px; padding-bottom: 18px; line-height: 1.9; }

/* ================= 响应式 ================= */
@media (max-width: 1180px) {
  .cap-grid, .feat-grid-o, .steps-o { grid-template-columns: repeat(2, 1fr); }
  .hx-grid { gap: 30px; }
}
@media (max-width: 1040px) {
  .hx-grid, .app-top { grid-template-columns: 1fr; }
  .match-card { max-width: 460px; }
  .gs-grid { grid-template-columns: repeat(2, 1fr); }
  .app-band { grid-template-columns: 1fr; padding: 34px 28px; }
  .ab-acts { flex-direction: row; flex-wrap: wrap; }
  .dl-grid { grid-template-columns: 1fr; }
  .stat-grid-o { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 720px) {
  .hero-official.hx { padding: 48px 0 54px; }
  .hero-official.hx h1 { font-size: 34px; }
  .hx-sec { padding: 44px 0; }
  .hx-head h2 { font-size: 24px; }
  .gs-grid, .cap-grid, .feat-grid-o, .steps-o { grid-template-columns: 1fr; }
  .stat-band { padding: 30px 22px; }
  .phones { flex-wrap: wrap; }
  .cta-o { padding: 38px 20px; }
  .cta-o h2 { font-size: 23px; }
}