/* ===========================================================
   劲爆体育官网 style.css
   Sports Simulation Lab + AI Manager Console + Living Sports World
   =========================================================== */

:root{
  --navy-950:#060b16;
  --navy-900:#0a1428;
  --navy-800:#0f1d38;
  --navy-700:#152848;
  --navy-600:#1c3560;
  --teal-500:#1fb6b0;
  --teal-400:#3fd6cf;
  --teal-300:#7ee9e3;
  --orange-500:#ff7a3d;
  --orange-400:#ff9a63;
  --cool-white:#eef3f8;
  --cool-white-dim:#c4d0e0;
  --line:#233457;
  --line-soft:#1a2744;
  --card-bg:#0d1830;
  --card-bg-2:#101e3a;
  --success:#3fd6cf;
  --radius-md:10px;
  --radius-lg:16px;
  --maxw:1180px;
  --font-sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--navy-950);
  color:var(--cool-white);
  font-family:var(--font-sans);
  line-height:1.75;
  font-size:16px;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--teal-400);text-decoration:none;}
a:hover{color:var(--orange-400);}
h1,h2,h3,h4{
  font-weight:700;
  line-height:1.35;
  color:#fff;
  margin:0 0 .6em;
  letter-spacing:.2px;
}
h1{font-size:2.05rem;}
h2{font-size:1.55rem;}
h3{font-size:1.2rem;}
p{margin:0 0 1em;color:var(--cool-white-dim);}
ul,ol{color:var(--cool-white-dim);padding-left:1.3em;}
li{margin-bottom:.4em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.section{padding:56px 0;}
.section-tight{padding:36px 0;}
.section-alt{background:linear-gradient(180deg,var(--navy-900),var(--navy-950));}
.section-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
  margin:0;
}

/* ---------- Eyebrow / tag / badges ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--teal-300);
  background:rgba(31,182,176,.08);
  border:1px solid rgba(31,182,176,.35);
  padding:5px 12px;border-radius:999px;
  margin-bottom:14px;
}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;}
.tag{
  font-size:.76rem;color:var(--cool-white-dim);
  border:1px solid var(--line);
  padding:3px 10px;border-radius:999px;
  background:var(--navy-800);
}
.badge-note{
  font-size:.78rem;color:#8fa1bd;
  border-left:3px solid var(--orange-500);
  padding:4px 10px;
  background:rgba(255,122,61,.06);
  display:inline-block;
  margin:6px 0 14px;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(6,11,22,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  height:68px;
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.05rem;}
.brand img{width:34px;height:34px;}
.brand small{display:block;font-weight:400;font-size:.68rem;color:var(--cool-white-dim);letter-spacing:.5px;}
.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav a{
  color:var(--cool-white-dim);
  font-size:.92rem;
  padding:10px 14px;
  border-radius:8px;
  white-space:nowrap;
}
.main-nav a:hover,.main-nav a.active{
  color:#fff;background:var(--navy-700);
}
.nav-toggle{
  display:none;
  background:none;border:1px solid var(--line);border-radius:8px;
  color:#fff;width:40px;height:40px;cursor:pointer;
}
@media (max-width:980px){
  .nav-toggle{display:block;}
  .main-nav{
    position:absolute;top:68px;left:0;right:0;
    background:var(--navy-900);
    border-bottom:1px solid var(--line-soft);
    flex-direction:column;align-items:stretch;
    padding:8px;gap:0;
    display:none;
  }
  .main-nav.open{display:flex;}
  .main-nav a{padding:12px 14px;border-radius:6px;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:64px 0 48px;
  background:
    radial-gradient(1200px 480px at 15% -10%, rgba(31,182,176,.18), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(255,122,61,.10), transparent 55%),
    var(--navy-950);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-size:2.3rem;margin-bottom:.5em;}
.hero .lead{font-size:1.05rem;color:var(--cool-white-dim);max-width:56ch;}
.hero-stats{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;}
.hero-stat{min-width:110px;}
.hero-stat b{display:block;font-size:1.35rem;color:var(--teal-300);}
.hero-stat span{font-size:.78rem;color:#8fa1bd;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}
.hero-figure{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--navy-900);
  padding:14px;
}
.hero-figure figcaption{
  font-size:.78rem;color:#8fa1bd;padding-top:8px;text-align:center;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:999px;
  font-size:.92rem;font-weight:600;cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{background:var(--teal-500);color:#04241f;}
.btn-primary:hover{background:var(--teal-400);color:#04241f;}
.btn-outline{border-color:var(--line);color:#fff;}
.btn-outline:hover{border-color:var(--teal-400);color:var(--teal-300);}
.btn-orange{background:var(--orange-500);color:#2a1002;}
.btn-orange:hover{background:var(--orange-400);color:#2a1002;}

/* ---------- Section headers ---------- */
.section-head{max-width:74ch;margin-bottom:30px;}
.section-head h2{margin-bottom:.4em;}
.section-head p{color:var(--cool-white-dim);}

/* ---------- Cards / grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
}
.card h3{color:var(--teal-300);font-size:1.02rem;}
.card p{font-size:.92rem;margin-bottom:0;}
.icon-chip{
  width:38px;height:38px;border-radius:9px;
  background:rgba(31,182,176,.12);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.icon-chip svg{width:20px;height:20px;}

/* ---------- Feature loop / flow diagram wrapper ---------- */
.diagram-wrap{
  background:var(--navy-900);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px;
  overflow-x:auto;
}
.diagram-wrap svg{display:block;margin:0 auto;min-width:560px;}
.diagram-caption{
  font-size:.82rem;color:#8fa1bd;text-align:center;padding-top:10px;
}

/* ---------- Long-form articles ---------- */
.article-block{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--card-bg);
  padding:28px 28px 24px;
  margin-bottom:26px;
}
.article-block.alt-layout{
  display:grid;grid-template-columns:1.3fr .9fr;gap:26px;align-items:start;
}
@media (max-width:880px){.article-block.alt-layout{grid-template-columns:1fr;}}
.article-block h3{font-size:1.3rem;color:#fff;margin-bottom:.5em;}
.article-meta{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-size:.78rem;color:#8fa1bd;margin-bottom:10px;
}
.article-meta .cat{
  color:var(--orange-400);border:1px solid rgba(255,122,61,.4);
  padding:2px 9px;border-radius:999px;background:rgba(255,122,61,.06);
}
.article-body p{font-size:.96rem;}
.article-body strong{color:#fff;}
.article-aside{
  background:var(--navy-900);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  padding:14px 16px;
  font-size:.85rem;
}
.article-aside h4{font-size:.86rem;color:var(--teal-300);margin-bottom:.5em;}
.related-read{
  margin-top:16px;padding-top:14px;
  border-top:1px dashed var(--line);
  font-size:.88rem;
}
.related-read b{color:#fff;font-weight:600;}

/* ---------- Timeline ---------- */
.timeline{
  position:relative;padding-left:26px;border-left:2px solid var(--line);
}
.timeline-item{position:relative;padding-bottom:22px;}
.timeline-item::before{
  content:"";position:absolute;left:-32px;top:2px;
  width:12px;height:12px;border-radius:50%;
  background:var(--teal-400);border:2px solid var(--navy-950);
}
.timeline-item h4{color:#fff;font-size:.98rem;margin-bottom:.3em;}
.timeline-item span.step{
  font-size:.74rem;color:var(--orange-400);letter-spacing:1px;text-transform:uppercase;
}

/* ---------- Observation posts ---------- */
.observe-card{
  background:var(--card-bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px;
}
.observe-card .num{
  font-size:.76rem;color:var(--teal-300);letter-spacing:1px;
}

/* ---------- Sub-page summary blocks (回流首页) ---------- */
.digest-card{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
  display:flex;flex-direction:column;height:100%;
}
.digest-card h3{font-size:1.02rem;}
.digest-card p{font-size:.88rem;flex:1;}
.digest-card a.more{font-size:.85rem;font-weight:600;}
.digest-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.digest-head a{font-size:.88rem;}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;
  color:#fff;font-size:.98rem;font-weight:600;
  padding:16px 6px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq-q::after{
  content:"+";font-size:1.3rem;color:var(--teal-400);flex-shrink:0;
  transition:transform .2s;
}
.faq-item.open .faq-q::after{transform:rotate(45deg);}
.faq-a{
  max-height:0;overflow:hidden;
  color:var(--cool-white-dim);font-size:.9rem;
  transition:max-height .25s ease;
  padding:0 6px;
}
.faq-item.open .faq-a{padding-bottom:14px;}
.faq-cols{columns:2;column-gap:32px;}
@media (max-width:820px){.faq-cols{columns:1;}}
.faq-cols .faq-item{break-inside:avoid;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.8rem;color:#8fa1bd;padding:14px 0;}
.breadcrumb a{color:#8fa1bd;}
.breadcrumb a:hover{color:var(--teal-300);}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:.88rem;}
th,td{padding:10px 14px;border-bottom:1px solid var(--line-soft);text-align:left;color:var(--cool-white-dim);}
th{color:#fff;background:var(--navy-900);}
tr:last-child td{border-bottom:none;}

/* ---------- Tabs (JS-driven, content pre-rendered) ---------- */
.tabs-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.tab-btn{
  background:var(--navy-800);border:1px solid var(--line);color:var(--cool-white-dim);
  padding:8px 16px;border-radius:999px;font-size:.85rem;cursor:pointer;
}
.tab-btn.active{background:var(--teal-500);color:#04241f;border-color:var(--teal-500);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- Company / footer ---------- */
.about-box{
  background:linear-gradient(135deg,var(--navy-800),var(--navy-900));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;
}
.site-footer{
  background:var(--navy-900);border-top:1px solid var(--line-soft);
  padding:40px 0 26px;font-size:.85rem;color:#8fa1bd;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;margin-bottom:26px;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{color:#fff;font-size:.88rem;margin-bottom:10px;}
.footer-grid a{display:block;color:#8fa1bd;padding:3px 0;font-size:.85rem;}
.footer-grid a:hover{color:var(--teal-300);}
.footer-bottom{border-top:1px solid var(--line-soft);padding-top:18px;font-size:.78rem;line-height:1.9;}

/* ---------- Back to top ---------- */
.back-top{
  position:fixed;right:20px;bottom:24px;
  width:42px;height:42px;border-radius:50%;
  background:var(--teal-500);color:#04241f;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .2s;
  z-index:40;
}
.back-top.show{opacity:1;pointer-events:auto;}

/* ---------- Grid overflow safety net ----------
   Grid items don't shrink below their content's min-content size by
   default; a wide table/diagram nested inside one can force the whole
   page to overflow horizontally on narrow viewports. min-width:0 lets
   the item shrink and defers to its own overflow-x:auto wrappers. */
.hero-grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.article-block.alt-layout > *,
.footer-grid > * {
  min-width:0;
}

/* ---------- Utility ---------- */
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.text-dim{color:#8fa1bd;}
.text-center{text-align:center;}
.small{font-size:.82rem;}
.disclaimer-note{
  font-size:.78rem;color:#8fa1bd;
  border:1px dashed var(--line);
  border-radius:8px;padding:8px 12px;
  margin:10px 0;
}
.kicker-line{
  display:flex;align-items:center;gap:10px;margin-bottom:6px;
}
.kicker-line .dot{width:8px;height:8px;border-radius:50%;background:var(--orange-500);}

/* App feature grid */
.app-feature{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--navy-900);
}
.app-feature .num{
  font-size:.8rem;color:var(--navy-950);background:var(--teal-400);
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;
}

/* Download steps */
.step-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--card-bg);padding:18px;
}
.step-card .step-num{
  font-size:.75rem;color:var(--teal-300);letter-spacing:1px;text-transform:uppercase;
}

/* Simulation mini demo */
.demo-box{
  background:var(--navy-900);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;
}
.demo-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.demo-select{
  background:var(--navy-800);color:#fff;border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font-size:.85rem;
}
.demo-output{
  border:1px solid var(--line-soft);border-radius:10px;padding:14px;
  font-size:.9rem;background:var(--navy-950);min-height:64px;
}
.demo-output .result-line{color:var(--teal-300);font-weight:600;}