/* 黔空翻体育 官网 — 克莱因蓝 + 白，未来科技感 */
:root{
  --kb:#002FA7;          /* 克莱因蓝 */
  --kb-deep:#001B63;
  --kb-soft:#4B6BFF;
  --cyan:#00E0FF;
  --ink:#0A0F1E;
  --muted:#6B7280;
  --line:#E6EAF2;
  --panel:#F6F8FC;
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1160px;margin:auto;padding:0 20px}

/* ---------- 导航 ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav-in{height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:16px;letter-spacing:.02em}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--kb);color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:900;box-shadow:0 6px 16px rgba(0,47,167,.32)}
.brand-mark.sm{width:24px;height:24px;font-size:12px;border-radius:7px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600}
.nav-links a{opacity:.72;transition:.16s}
.nav-links a:hover{opacity:1;color:var(--kb)}
.nav-cta{padding:7px 16px;border-radius:999px;background:var(--kb);color:#fff !important;opacity:1 !important}
.nav-cta:hover{background:var(--kb-deep)}
@media(max-width:720px){.nav-links{gap:14px;font-size:13px}.nav-links a:nth-child(-n+2){display:none}}

/* ---------- 头图 ---------- */
.hero{position:relative;overflow:hidden;background:var(--kb);color:#fff;padding:74px 0 68px}
.hero-bg{position:absolute;inset:0;
  background:
    radial-gradient(900px 460px at 78% -10%, rgba(0,224,255,.30), transparent 60%),
    radial-gradient(700px 420px at 8% 110%, rgba(75,107,255,.55), transparent 62%),
    linear-gradient(160deg,#0036BF,#001B63)}
.hero-grid{position:absolute;inset:0;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 30% 20%, #000 40%, transparent 78%)}
.hero-in{position:relative;z-index:2}
.hero-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.32em;
  border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:6px 14px;opacity:.92}
.hero-title{margin:22px 0 0;font-size:clamp(34px,6.2vw,64px);line-height:1.12;font-weight:900;letter-spacing:-.01em}
.hero-sub{margin:16px 0 0;font-size:clamp(15px,2vw,18px);opacity:.82;max-width:660px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;
  font-size:15px;font-weight:800;transition:.18s}
.btn.solid{background:#fff;color:var(--kb)}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.btn.line{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn.line:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.hero-corner{position:absolute;right:34px;bottom:26px;z-index:2;display:flex;align-items:flex-end;gap:6px;opacity:.5}
.hero-corner span{font-size:12px;font-weight:900;letter-spacing:.3em;margin-right:6px}
.hero-corner i{display:block;width:5px;background:#fff;border-radius:3px}
.hero-corner i:nth-child(2){height:22px}.hero-corner i:nth-child(3){height:34px}.hero-corner i:nth-child(4){height:14px}
@media(max-width:720px){.hero{padding:52px 0 46px}.hero-corner{display:none}}

/* ---------- 区块 ---------- */
.sec{padding:74px 0}
.sec-head{margin-bottom:34px}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.3em;color:var(--kb)}
.eyebrow.light{color:var(--cyan)}
.sec-head h2{margin:8px 0 0;font-size:clamp(26px,3.4vw,38px);font-weight:900;letter-spacing:-.01em}
.sec-head p{margin:8px 0 0;color:var(--muted);font-size:15px}

/* ---------- 服务卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;min-height:196px;padding:24px 22px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:linear-gradient(140deg,rgba(0,47,167,.06),transparent 55%);opacity:0;transition:.18s}
.card:hover{transform:translateY(-5px);border-color:var(--kb);box-shadow:0 18px 42px rgba(0,47,167,.14)}
.card:hover::after{opacity:1}
.card.wide{grid-column:span 2}
@media(max-width:640px){.card.wide{grid-column:span 1}}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-ico{width:44px;height:44px;border-radius:13px;background:var(--kb);color:#fff;
  display:grid;place-items:center;font-size:20px;font-weight:900;
  box-shadow:0 8px 20px rgba(0,47,167,.26)}
.card-no{font-size:12px;font-weight:900;letter-spacing:.18em;color:#C3CBDB}
.card h3{margin:16px 0 0;font-size:19px;font-weight:900}
.card p{margin:8px 0 0;font-size:13.5px;color:var(--muted);line-height:1.75;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.chip{display:inline-block;font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;
  background:#EDF2FF;color:var(--kb)}
.chip.off{background:#F1F3F7;color:#98A1B2}
.card-go{font-size:13px;font-weight:800;color:var(--kb);opacity:0;transform:translateX(-6px);transition:.18s}
.card:hover .card-go{opacity:1;transform:none}
.card.static{cursor:default}

/* ---------- 数据 ---------- */
.stats{background:var(--kb);color:#fff;padding:44px 0}
.stats-in{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:center}
@media(max-width:640px){.stats-in{grid-template-columns:1fr;gap:26px}}
.stat b{display:block;font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:-.02em}
.stat span{font-size:13px;opacity:.78}

/* ---------- 关于 ---------- */
.about{position:relative;overflow:hidden;background:var(--kb-deep);color:#fff;padding:78px 0}
.about-grid{position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(0,224,255,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,224,255,.6) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(100% 100% at 80% 0%, #000, transparent 70%)}
.about-in{position:relative;z-index:2;max-width:760px}
.about h2{margin:8px 0 0;font-size:clamp(26px,3.6vw,40px);font-weight:900}
.about p{margin:16px 0 0;font-size:16px;line-height:1.9;opacity:.86}

/* ---------- 联系 ---------- */
.contact{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:880px){.contact{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.contact{grid-template-columns:1fr}}
.c-item{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.c-item b{display:block;font-size:11px;font-weight:900;letter-spacing:.2em;color:var(--kb);margin-bottom:8px}
.c-item span{font-size:15px;font-weight:700;word-break:break-all}

/* ---------- 页脚 ---------- */
.foot{border-top:1px solid var(--line);padding:26px 0 34px;color:var(--muted);font-size:12.5px}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:9px;font-weight:900;color:var(--ink);font-size:14px}
.foot-meta{display:flex;gap:14px;flex-wrap:wrap}
.foot-meta a{text-decoration:none}
.foot-meta a:hover{color:var(--kb);text-decoration:underline}

/* ---------- 入场动画 ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}