/* ============================================================
   铁牛自动化营销联盟 - 首页专属样式 (tn- 前缀) v2
   仅首页引用，不影响其他页面
   主色: 深藏青 #0E2A47 | 点缀: logo紫 #7B5FC0
   v2: 去灰度显真实图 / 字号整体+2 / 多彩渐变增强冲击力
   ============================================================ */

:root{
  --tn-navy:#0E2A47;
  --tn-navy2:#16395E;
  --tn-navy3:#1E4A78;
  --tn-purple:#7B5FC0;
  --tn-purple2:#9D85D6;
  --tn-cyan:#1FA2A6;
  --tn-gold:#E8A23D;
  --tn-bg:#F7F9FC;
  --tn-border:#E8EDF4;
  --tn-text:#445268;
  --tn-title:#0E2A47;
}

/* ---------- 通用 ---------- */
.tn-section{padding:76px 0;}
.tn-section.alt{background-color:var(--tn-bg);}
.tn-section.dark{background:linear-gradient(135deg,#0B2240 0%,#0E2A47 50%,#1B4470 100%);position:relative;overflow:hidden;}
.tn-section.dark::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;pointer-events:none;}
.tn-head{text-align:center;margin-bottom:48px;position:relative;z-index:2;}
.tn-head h2{font-size:36px;color:var(--tn-title);font-weight:700;letter-spacing:3px;}
.tn-head p{color:var(--tn-text);font-size:17px;margin-top:14px;letter-spacing:1px;}
.tn-head .tn-line{display:inline-block;width:52px;height:4px;border-radius:2px;margin-top:18px;
  background:linear-gradient(90deg,#7B5FC0,#1FA2A6);}
.tn-section.dark .tn-head h2{color:#fff;}
.tn-section.dark .tn-head p{color:#9FB2CC;}

/* ---------- 1. Hero ---------- */
.tn-hero{position:relative;background:linear-gradient(135deg,#081B36 0%,#0E2A47 42%,#1B4470 78%,#3A2E63 100%);overflow:hidden;}
.tn-hero::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;}
.tn-hero::after{content:'';position:absolute;width:760px;height:760px;right:-200px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,95,192,.5) 0%,rgba(123,95,192,0) 65%);}
.tn-hero .glow2{position:absolute;width:520px;height:520px;left:-180px;bottom:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,162,166,.35) 0%,rgba(31,162,166,0) 65%);}
.tn-hero .inner{position:relative;z-index:2;padding:76px 0 84px;}
.tn-hero h1{color:#fff;font-size:52px;font-weight:700;letter-spacing:5px;line-height:1.4;}
.tn-hero h1 em{font-style:normal;
  background:linear-gradient(90deg,#B9A5EE 0%,#7CC7E8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.tn-hero p{color:#B9C6DA;font-size:19px;letter-spacing:2px;margin-top:20px;}
.tn-hero-btns{margin-top:40px;}
.tn-btn{display:inline-block;padding:15px 48px;font-size:18px;letter-spacing:2px;border-radius:6px;transition:.25s;}
.tn-btn.primary{background:linear-gradient(135deg,#8A6BD0 0%,#6A4FAD 100%);color:#fff;font-weight:bold;box-shadow:0 8px 22px rgba(123,95,192,.42);}
.tn-btn.primary:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(123,95,192,.55);color:#fff;}
.tn-btn.ghost{border:1px solid rgba(255,255,255,.5);color:#fff;margin-left:18px;}
.tn-btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff;}
.tn-btn.cyan{background:linear-gradient(135deg,#25B8BC 0%,#1A8F93 100%);color:#fff;font-weight:bold;}
.tn-btn.cyan:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(31,162,166,.45);color:#fff;}

/* ---------- 2. 痛点（彩色编号） ---------- */
.tn-pain-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;}
.tn-pain{background:#fff;border:1px solid var(--tn-border);border-radius:12px;padding:38px 24px;text-align:center;transition:.25s;position:relative;overflow:hidden;}
.tn-pain::before{content:'';position:absolute;left:0;top:0;right:0;height:4px;background:var(--pc,#7B5FC0);}
.tn-pain:hover{transform:translateY(-8px);box-shadow:0 16px 38px rgba(14,42,71,.13);border-color:var(--pc,#7B5FC0);}
.tn-pain .no{font-size:44px;font-weight:700;line-height:1;
  background:linear-gradient(135deg,var(--pc,#7B5FC0),var(--pc2,#9D85D6));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.9;}
.tn-pain h3{font-size:22px;color:var(--tn-title);margin-top:16px;letter-spacing:2px;}
.tn-pain p{font-size:15px;color:var(--tn-text);line-height:1.9;margin-top:14px;text-align:justify;}
.tn-pain.c1{--pc:#7B5FC0;--pc2:#9D85D6;}
.tn-pain.c2{--pc:#1E5AA8;--pc2:#4E8AD8;}
.tn-pain.c3{--pc:#1FA2A6;--pc2:#4EC5C8;}
.tn-pain.c4{--pc:#E8A23D;--pc2:#F2C277;}
.tn-pain.c5{--pc:#D4567A;--pc2:#E88AA6;}

/* ---------- 3. 三类企业（三色卡） ---------- */
.tn-role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.tn-role{background:#fff;border-radius:12px;padding:44px 34px;box-shadow:0 6px 22px rgba(14,42,71,.07);transition:.25s;position:relative;overflow:hidden;}
.tn-role::before{content:'';position:absolute;left:0;top:0;right:0;height:5px;background:linear-gradient(90deg,var(--rc1),var(--rc2));}
.tn-role:hover{transform:translateY(-8px);box-shadow:0 18px 42px rgba(14,42,71,.14);}
.tn-role .ico{width:62px;height:62px;border-radius:16px;background:linear-gradient(135deg,var(--rc1),var(--rc2));color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px var(--rsh);}
.tn-role h3{font-size:23px;color:var(--tn-title);margin-top:22px;letter-spacing:2px;}
.tn-role h4{font-size:14px;color:var(--rc1);font-weight:normal;letter-spacing:3px;margin-top:8px;}
.tn-role p{font-size:16px;color:var(--tn-text);line-height:1.9;margin-top:18px;text-align:justify;}
.tn-role ul{margin-top:18px;}
.tn-role ul li{font-size:15px;color:var(--tn-text);line-height:2.1;padding-left:20px;position:relative;}
.tn-role ul li::before{content:'';position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--rc1),var(--rc2));}
.tn-role.c1{--rc1:#1E5AA8;--rc2:#4E8AD8;--rsh:rgba(30,90,168,.3);}
.tn-role.c2{--rc1:#7B5FC0;--rc2:#9D85D6;--rsh:rgba(123,95,192,.3);}
.tn-role.c3{--rc1:#1FA2A6;--rc2:#4EC5C8;--rsh:rgba(31,162,166,.3);}

/* ---------- 4. 资源库（深色区+六彩卡） ---------- */
.tn-res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:2;}
.tn-res{display:flex;align-items:center;background:#fff;border-radius:12px;padding:28px 30px;transition:.25s;}
.tn-res:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,.28);}
.tn-res .ico{flex:0 0 58px;width:58px;height:58px;border-radius:14px;background:linear-gradient(135deg,var(--ic1),var(--ic2));color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-right:22px;box-shadow:0 6px 16px var(--ic3);transition:.25s;}
.tn-res:hover .ico{transform:scale(1.08) rotate(-4deg);}
.tn-res h3{font-size:19px;color:var(--tn-title);letter-spacing:1px;}
.tn-res h3::after{content:'→';color:var(--ic1);margin-left:8px;font-size:15px;opacity:0;transition:.25s;}
.tn-res:hover h3::after{opacity:1;}
.tn-res p{font-size:14px;color:#8B98A9;margin-top:7px;letter-spacing:1px;}
.tn-res.c1{--ic1:#1E5AA8;--ic2:#4E8AD8;--ic3:rgba(30,90,168,.35);}
.tn-res.c2{--ic1:#7B5FC0;--ic2:#9D85D6;--ic3:rgba(123,95,192,.35);}
.tn-res.c3{--ic1:#1FA2A6;--ic2:#4EC5C8;--ic3:rgba(31,162,166,.35);}
.tn-res.c4{--ic1:#E8A23D;--ic2:#F2C277;--ic3:rgba(232,162,61,.35);}
.tn-res.c5{--ic1:#D4567A;--ic2:#E88AA6;--ic3:rgba(212,86,122,.35);}
.tn-res.c6{--ic1:#0E2A47;--ic2:#1E4A78;--ic3:rgba(14,42,71,.35);}

/* ---------- 5. 成员企业（真实彩色图） ---------- */
.tn-logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.tn-logo{background:#fff;border:1px solid var(--tn-border);border-radius:12px;overflow:hidden;transition:.25s;}
.tn-logo:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(14,42,71,.14);border-color:rgba(123,95,192,.45);}
.tn-logo .pic{padding-bottom:72%;position:relative;display:block;overflow:hidden;}
.tn-logo .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.35s;}
.tn-logo:hover .pic img{transform:scale(1.06);}
.tn-logo h4{font-size:14px;color:var(--tn-text);text-align:center;padding:11px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid var(--tn-border);}
.tn-logo h4 a{color:inherit;}
.tn-logo h4 a:hover{color:var(--tn-purple);}

/* ---------- 6. 团队成员（多成员卡） ---------- */
.tn-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.tn-team{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--tn-border);transition:.25s;text-align:center;}
.tn-team:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(14,42,71,.15);border-color:rgba(123,95,192,.4);}
.tn-team .photo{padding-bottom:108%;position:relative;overflow:hidden;display:block;}
.tn-team .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:.35s;}
.tn-team:hover .photo img{transform:scale(1.05);}
.tn-team .txt{padding:20px 20px 26px;}
.tn-team .txt h3{font-size:21px;color:var(--tn-title);letter-spacing:2px;}
.tn-team .txt .role{display:inline-block;font-size:13px;color:#fff;padding:4px 14px;border-radius:14px;margin-top:10px;
  background:linear-gradient(90deg,#7B5FC0,#9D85D6);letter-spacing:2px;}
.tn-team .txt p{font-size:14px;color:var(--tn-text);line-height:1.9;margin-top:14px;text-align:justify;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- 7. 动态 ---------- */
.tn-news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.tn-news{background:#fff;border:1px solid var(--tn-border);border-radius:12px;overflow:hidden;transition:.25s;display:block;}
.tn-news:hover{transform:translateY(-8px);box-shadow:0 16px 38px rgba(14,42,71,.13);border-color:rgba(123,95,192,.4);}
.tn-news .pic{padding-bottom:62%;position:relative;overflow:hidden;display:block;}
.tn-news .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s;}
.tn-news:hover .pic img{transform:scale(1.07);}
.tn-news .txt{padding:20px 22px 24px;}
.tn-news .txt h3{font-size:17px;color:var(--tn-title);line-height:1.6;height:3.2em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.tn-news .txt h3 a{color:inherit;}
.tn-news .txt h3 a:hover{color:var(--tn-purple);}
.tn-news .txt p{font-size:14px;color:#8B98A9;margin-top:12px;line-height:1.8;height:3.6em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.tn-news .txt .date{display:inline-block;font-size:13px;color:#7B5FC0;background:#F4F0FC;border-radius:4px;padding:3px 12px;margin-top:14px;letter-spacing:1px;}

/* ---------- 8. CTA ---------- */
.tn-cta{background:linear-gradient(120deg,#081B36 0%,#0E2A47 40%,#3A2E63 75%,#5A3E8E 100%);position:relative;overflow:hidden;}
.tn-cta::before{content:'';position:absolute;width:480px;height:480px;left:-140px;bottom:-240px;border-radius:50%;background:radial-gradient(circle,rgba(123,95,192,.5) 0%,rgba(123,95,192,0) 65%);}
.tn-cta::after{content:'';position:absolute;width:380px;height:380px;right:-100px;top:-190px;border-radius:50%;background:radial-gradient(circle,rgba(31,162,166,.35) 0%,rgba(31,162,166,0) 65%);}
.tn-cta .inner{position:relative;z-index:2;padding:66px 0;display:flex;align-items:center;justify-content:space-between;}
.tn-cta h2{color:#fff;font-size:32px;letter-spacing:4px;font-weight:700;}
.tn-cta p{color:#AEBDD4;font-size:17px;margin-top:12px;letter-spacing:2px;}

/* ---------- 9. 页脚样式已迁移至 global-top.css（全站统一） ---------- */

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .tn-pain-grid{grid-template-columns:repeat(3,1fr);}
  .tn-logo-grid{grid-template-columns:repeat(2,1fr);}
  .tn-hero h1{font-size:40px;}
  .tn-team-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .tn-section{padding:52px 0;}
  .tn-role-grid,.tn-res-grid,.tn-news-grid{grid-template-columns:1fr 1fr;}
  .tn-hero .inner{padding:72px 0 80px;}
  .tn-cta .inner{flex-direction:column;text-align:center;gap:26px;}
}
@media (max-width:640px){
  .tn-hero h1{font-size:28px;letter-spacing:2px;}
  .tn-pain-grid{grid-template-columns:1fr 1fr;}
  .tn-role-grid,.tn-res-grid,.tn-news-grid{grid-template-columns:1fr;}
  .tn-logo-grid{grid-template-columns:repeat(2,1fr);}
  .tn-team-grid{grid-template-columns:1fr;}
  .tn-head h2{font-size:26px;}
  .tn-cta h2{font-size:24px;}
}