/* ===========================================================
   猎讯网 · 媒体资源矩阵
   配色基准：猎讯官网 liecent.com（蓝 #2563eb + 橙 #f97316 渐变）
   =========================================================== */
:root{
  /* —— 沿用猎讯官网色板 —— */
  --blue:#2563eb;
  --blue-deep:#1e3a8a;
  --orange:#f97316;
  --orange-light:#fb923c;
  --grad:linear-gradient(118deg,#1d4ed8 0%,#2563eb 48%,#f97316 100%);
  --grad-soft:linear-gradient(118deg,#3b82f6 0%,#f97316 100%);

  --bg:#f4f6fb;
  --card:#ffffff;
  --border:#e4e9f2;
  --text:#0f172a;
  --text-2:#5b6572;
  --accent:#2563eb;
  --radius:18px;
  --radius-sm:12px;
  --maxw:1200px;
  --shadow:0 18px 50px -20px rgba(30,58,138,.28);
  --shadow-sm:0 8px 24px -12px rgba(15,23,42,.18);
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---- 头部：猎讯橙蓝渐变 ---- */
.site-header{
  position:relative;
  overflow:hidden;
  background:var(--grad);
  color:#fff;
  padding:54px 0 44px;
  text-align:center;
}
/* 渐变光晕装饰 */
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(680px 320px at 12% -10%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(560px 300px at 88% 110%, rgba(249,115,22,.30), transparent 62%);
  pointer-events:none;
}
.site-header .container{ position:relative; z-index:1; }

.title{
  font-size:40px; font-weight:800; letter-spacing:2px; margin-bottom:14px;
}
.title .grad-text{
  background:var(--grad-soft);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-logo{
  max-width:300px; max-height:72px;
  margin:0 auto 12px;
  display:block;
  object-fit:contain;
}
.subtitle{
  font-size:15px; opacity:.88; letter-spacing:.5px;
}
.header-stats{
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
  margin-top:24px;
}
.header-stats .hs{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:7px 18px;
  font-size:13px; letter-spacing:.3px;
  backdrop-filter:blur(6px);
}
.header-stats .hs b{ font-size:16px; margin-right:5px; }

/* ---- 切换导航栏 ---- */
.tab-nav{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 8px rgba(20,30,60,.04);
}
.tabs{
  display:flex; gap:8px;
  padding:10px 24px;
  overflow-x:auto;
}
.tab{
  flex:0 0 auto;
  padding:10px 28px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#f7f9fc;
  color:var(--text-2);
  font-size:15px; font-weight:600;
  font-family:var(--font);
  cursor:pointer;
  transition:all .18s ease;
  white-space:nowrap;
}
.tab:hover{
  color:var(--blue);
  border-color:var(--blue);
}
.tab.active{
  background:var(--grad);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 20px -8px rgba(249,115,22,.55);
}

/* ---- 面板切换 ---- */
.panel{ display:none; }
.panel.active{ display:block; animation:fade .3s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* ---- 板块 ---- */
.block{ margin:42px 0; }
.block-head{
  display:flex; align-items:center; gap:12px;
  padding-bottom:14px; margin-bottom:22px;
  border-bottom:1px solid var(--border);
}
.block-head .dot{
  width:12px; height:12px; border-radius:50%; flex:0 0 auto;
}
.block-head h2{
  font-size:21px; font-weight:700;
}

/* ---- 网格 ---- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:18px;
}
.item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:18px 14px;
  display:flex; flex-direction:column; align-items:center;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-sm);
  border-color:#c9d4e6;
}
.item .logo{
  width:100%; height:64px;
  display:flex; align-items:center; justify-content:center;
}
.item .logo img{
  max-width:100%; max-height:100%;
  object-fit:contain;
}
.item .logo img.sm{ max-height:44px; }

/* ---- 更多媒体卡片 ---- */
.item.more{
  background:#fbfcfe;
  border:1.5px dashed #c5cedd;
  cursor:pointer;
}
.item.more .more-logo{
  flex-direction:column;
  gap:2px;
}
.item.more .more-logo span{
  font-size:30px; line-height:1; letter-spacing:4px;
  color:#a9b4c6; font-weight:700;
  transform:translateX(4px);
}
.item.more .more-logo em{
  font-style:normal; font-size:13px; color:#8794a8;
  letter-spacing:2px;
}
.item.more:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(20,30,60,.08);
  border-color:var(--orange);
}
.item.more:hover .more-logo span{ color:var(--orange); }
.item.more:hover .more-logo em{ color:var(--orange-light); }

/* ---- 底部 CTA ---- */
.cta{
  margin:56px 0 60px;
  border-radius:var(--radius);
  background:var(--grad);
  color:#fff;
  padding:44px 32px;
  text-align:center;
  box-shadow:var(--shadow);
}
.cta h3{ font-size:26px; font-weight:800; margin-bottom:10px; }
.cta p{ opacity:.9; font-size:15px; margin-bottom:22px; }
.cta-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 26px; border-radius:999px;
  font-weight:600; font-size:15px; cursor:pointer;
  border:1px solid transparent; transition:.25s;
}
.btn-primary{ background:#fff; color:var(--blue-deep); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(0,0,0,.35); }
.btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35); }
.btn-ghost:hover{ background:rgba(255,255,255,.22); }

/* ---- 页脚 ---- */
.site-footer{
  background:#0a0f1e;
  color:#94a3b8;
  padding:34px 0;
  font-size:13.5px;
}
.foot-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.foot-inner a{ color:#cbd5e1; }
.foot-inner a:hover{ color:var(--orange-light); }

/* ---- 响应式 ---- */
@media (max-width:768px){
  .title{ font-size:30px; }
  .site-header{ padding:42px 0 34px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; }
  .block-head h2{ font-size:18px; }
  .tab{ padding:9px 20px; font-size:14px; }
  .cta h3{ font-size:21px; }
}
@media (max-width:480px){
  .grid{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; }
  .item{ padding:12px 8px; }
  .item .logo{ height:54px; }
  .title{ font-size:24px; letter-spacing:1px; }
  .item.more .more-logo span{ font-size:24px; }
  .tab{ padding:8px 16px; font-size:13px; }
  .cta{ padding:32px 18px; }
}