/* ===== 驿动青春官网 · 主样式表 ===== */

/* ===== Reset & Base ===== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
:root {
  --deep:#0a0e1a; --navy:#0d1b3e; --blue:#1a3a6b;
  --accent:#00b4d8; --accent-glow:rgba(0,180,216,.35);
  --gold:#c9a84c; --gold-glow:rgba(201,168,76,.25);
  --text:#e0e8f0; --text-muted:#8494a8; --text-dim:#5a6880;
  --surface:rgba(255,255,255,.03); --border:rgba(255,255,255,.06);
  --radius-sm:6px; --radius:10px; --radius-lg:16px;
  --shadow:0 4px 24px rgba(0,0,0,.4);
}
html { scroll-behavior:smooth; font-size:16px }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--deep); color:var(--text); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden
}
a { color:var(--accent); text-decoration:none; transition:color .2s }
a:hover { color:#00d4ff }
img { max-width:100%; height:auto }

/* ===== Top Banner（品牌顶部横幅） ===== */
.top-banner {
  width:100%; line-height:0; overflow:hidden;
}
.top-banner img {
  width:100%; height:auto; display:block;
}

/* ===== Header ===== */
.header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(10,14,26,.92); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border); transition:all .3s
}
.header-inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; height:64px
}
.logo { display:flex; align-items:center; gap:8px; text-decoration:none }
.logo-icon { font-size:24px }
.logo-text { font-size:20px; font-weight:700; color:#fff; letter-spacing:1px }
.nav { display:flex; gap:4px }
.nav-link {
  padding:8px 16px; font-size:14px; color:var(--text-muted); border-radius:var(--radius-sm);
  transition:all .2s; white-space:nowrap
}
.nav-link:hover { color:#fff; background:var(--surface) }
.nav-link.active { color:var(--accent); background:rgba(0,180,216,.1) }

/* Mobile menu */
.menu-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--text-muted); transition:all .3s }

/* ===== Hero（标题区 + 圆角轮播卡片，参照小程序首页 banner） ===== */
.hero-banner-section {
  position:relative;
  padding:130px 0 70px;
  background:linear-gradient(135deg, #050914 0%, #0d1b3e 40%, #0a1432 100%);
  text-align:center; overflow:hidden;
}
.hero-banner-inner { max-width:1100px; margin:0 auto; padding:0 24px }
.hero-title { font-size:clamp(32px,6vw,56px); font-weight:800; color:#fff; line-height:1.25; margin-bottom:16px;
  background:linear-gradient(135deg,#fff 0%,#a0d4f0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent }
.hero-subtitle { font-size:clamp(18px,2.5vw,24px); color:var(--accent); margin-bottom:12px; font-weight:300 }
.hero-tag { font-size:14px; color:var(--text-muted); margin-bottom:40px }
.hero-cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap }

.btn-primary {
  display:inline-flex; align-items:center; padding:14px 32px; font-size:16px; font-weight:600;
  background:linear-gradient(135deg,var(--accent),#0077b6);
  color:#fff; border:none; border-radius:var(--radius); cursor:pointer;
  text-decoration:none; transition:all .3s; box-shadow:0 4px 16px var(--accent-glow)
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 24px var(--accent-glow); color:#fff }
.btn-outline {
  display:inline-flex; align-items:center; padding:14px 32px; font-size:16px; font-weight:600;
  background:transparent; color:var(--accent); border:1.5px solid var(--accent);
  border-radius:var(--radius); cursor:pointer; text-decoration:none; transition:all .3s
}
.btn-outline:hover { background:rgba(0,180,216,.1); transform:translateY(-2px) }

/* 圆角轮播展示面（与小程序首页 banner 一致：图片填满卡片 · 5秒切换 · 底部圆点） */
.banner-carousel {
  position:relative; margin:44px auto 0; max-width:1000px;
  height:440px; border-radius:24px; overflow:hidden;
  background:#0a1432; box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.banner-track { display:flex; width:400%; height:100%; }
.banner-slide { width:25%; flex:0 0 25%; height:100%; }
.banner-slide img { width:100%; height:100%; object-fit:cover; display:block }
.banner-dots {
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:3;
}
.banner-dot {
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,0.25); cursor:pointer; transition:all .3s;
}
.banner-dot.active { background:#8b5cf6; transform:scale(1.25); }
@media (max-width:768px){
  .hero-banner-section { padding:100px 0 50px }
  .banner-carousel { height:200px; margin-top:32px; border-radius:16px; }
  .banner-dot { width:8px; height:8px }
}

/* ===== Sections ===== */
.section { padding:100px 24px }
.section-alt { background:rgba(13,27,62,.3) }
.section-dark { background:rgba(5,9,20,.6) }
.container { max-width:1200px; margin:0 auto }

.section-title {
  font-size:clamp(28px,4vw,40px); font-weight:800; color:#fff; text-align:center; margin-bottom:12px;
  background:linear-gradient(135deg,#fff 0%,#a0d4f0 80%); -webkit-background-clip:text; -webkit-text-fill-color:transparent
}
.section-lead { font-size:18px; color:var(--accent); text-align:center; margin-bottom:32px }
.section-desc { font-size:16px; color:var(--text-muted); text-align:center; margin-bottom:48px }

/* ===== Cards ===== */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:24px }
.card {
  background:linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px;
  transition:all .3s; position:relative; overflow:hidden
}
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:0; transition:opacity .3s }
.card:hover { transform:translateY(-4px); border-color:rgba(0,180,216,.2); box-shadow:0 8px 32px rgba(0,0,0,.4) }
.card:hover::before { opacity:1 }
.card-icon { font-size:40px; margin-bottom:16px }
.card-title { font-size:20px; font-weight:700; color:#fff; margin-bottom:12px }
.card-text { font-size:14px; color:var(--text-muted); line-height:1.7; margin-bottom:16px }
.card-link { font-size:14px; font-weight:600; color:var(--accent) }

/* ===== Entity Chain ===== */
.entity-chain { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:20px 0 }
.entity-step {
  flex:1 1 200px; max-width:240px; text-align:center;
  padding:24px 16px; background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--border); border-radius:var(--radius); transition:all .3s
}
.entity-step:hover { border-color:rgba(0,180,216,.25); transform:translateY(-4px) }
.entity-icon { font-size:36px; margin-bottom:12px }
.entity-step h4 { font-size:15px; color:#fff; margin-bottom:8px }
.entity-step p { font-size:13px; color:var(--text-muted); line-height:1.5 }
.entity-arrow { font-size:24px; color:var(--accent); font-weight:300 }

/* ===== Advantages ===== */
.advantage-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:24px }
.advantage-item {
  padding:32px; background:linear-gradient(135deg, rgba(0,180,216,.05), rgba(0,180,216,.01));
  border:1px solid var(--border); border-radius:var(--radius-lg); transition:all .3s
}
.advantage-item:hover { border-color:rgba(0,180,216,.2) }
.advantage-icon { font-size:36px; margin-bottom:16px }
.advantage-item h3 { font-size:18px; color:#fff; margin-bottom:12px }
.advantage-item p { font-size:14px; color:var(--text-muted); line-height:1.7 }

/* ===== Stats ===== */
.stats-section { padding:80px 24px }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:32px; text-align:center }
.stat-number { font-size:clamp(48px,8vw,72px); font-weight:900; color:var(--accent); line-height:1;
  text-shadow:0 0 40px var(--accent-glow); margin-bottom:8px }
.stat-label { font-size:14px; color:var(--text-muted) }

/* ===== Footer ===== */
.footer { background:rgba(5,9,20,.9); border-top:1px solid var(--border); padding:60px 24px 24px }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:40px; margin-bottom:40px }
.footer-brand { max-width:280px }
.footer-logo { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:700; color:#fff; margin-bottom:12px }
.footer-desc { font-size:13px; color:var(--text-muted); line-height:1.6 }
.footer-links h4 { font-size:14px; color:#fff; margin-bottom:16px }
.footer-links a { display:block; font-size:13px; color:var(--text-muted); padding:4px 0; transition:color .2s }
.footer-links a:hover { color:var(--accent) }
.footer-contact h4 { font-size:14px; color:#fff; margin-bottom:12px }
.footer-contact p { font-size:13px; color:var(--text-muted); margin-bottom:4px }
.footer-bottom {
  border-top:1px solid var(--border); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:12px; color:var(--text-dim)
}
.footer-bottom a { color:var(--text-dim) }
.footer-bottom a:hover { color:var(--accent) }

/* ===== Chat Widget ===== */
.chat-widget { position:fixed; bottom:24px; right:24px; z-index:2000 }
.chat-toggle { width:56px; height:56px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--accent),#0077b6);
  color:#fff; font-size:24px; cursor:pointer; box-shadow:0 4px 20px var(--accent-glow); transition:all .3s }
.chat-toggle:hover { transform:scale(1.1); box-shadow:0 6px 28px var(--accent-glow) }
.chat-panel {
  position:absolute; bottom:72px; right:0; width:360px; max-width:90vw; height:480px; max-height:70vh;
  background:rgba(13,27,62,.98); backdrop-filter:blur(20px); border:1px solid var(--border);
  border-radius:var(--radius-lg); display:none; flex-direction:column; overflow:hidden; box-shadow:var(--shadow)
}
.chat-panel.open { display:flex }
.chat-header {
  padding:16px 20px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  font-size:15px; font-weight:600; color:#fff
}
.chat-close { background:none; border:none; color:var(--text-muted); font-size:18px; cursor:pointer }
.chat-messages { flex:1; overflow-y:auto; padding:16px }
.chat-msg { margin-bottom:12px; display:flex }
.chat-msg.user { justify-content:flex-end }
.msg-bubble {
  max-width:80%; padding:10px 14px; border-radius:var(--radius); font-size:14px; line-height:1.6
}
.chat-msg.assistant .msg-bubble { background:var(--surface); color:var(--text) }
.chat-msg.user .msg-bubble { background:rgba(0,180,216,.2); color:#fff }
.chat-quick-asks { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.quick-ask {
  padding:8px 16px; font-size:13px; background:rgba(0,180,216,.08); color:var(--accent);
  border:1px solid rgba(0,180,216,.2); border-radius:20px; cursor:pointer; transition:all .2s
}
.quick-ask:hover { background:rgba(0,180,216,.18); border-color:rgba(0,180,216,.4) }
.chat-input-area { display:flex; padding:12px 16px; border-top:1px solid var(--border); gap:8px }
.chat-input { flex:1; padding:10px 14px; background:var(--surface); border:1px solid var(--border);
  border-radius:20px; color:#fff; font-size:14px; outline:none }
.chat-input::placeholder { color:var(--text-dim) }
.chat-input:focus { border-color:var(--accent) }
.chat-send {
  padding:10px 20px; background:linear-gradient(135deg,var(--accent),#0077b6);
  color:#fff; border:none; border-radius:20px; font-size:14px; cursor:pointer; font-weight:600
}

/* ===== Utility ===== */
.mt-40 { margin-top:40px }
.ml-16 { margin-left:16px }
.text-center { text-align:center }

/* ===== Inner Pages ===== */
.page-hero { padding:120px 24px 60px; text-align:center; background:linear-gradient(135deg,#050914 0%,#0d1b3e 60%,#0a1432 100%) }
.page-hero h1 { font-size:clamp(28px,5vw,44px); font-weight:800; color:#fff; margin-bottom:12px }
.page-hero p { font-size:16px; color:var(--text-muted); max-width:600px; margin:0 auto }
.page-content { padding:80px 24px }
.page-content h2 { font-size:28px; font-weight:700; color:#fff; margin:48px 0 16px }
.page-content h2:first-child { margin-top:0 }
.page-content p { color:var(--text-muted); line-height:1.8; margin-bottom:20px; max-width:800px }
.page-content ul { margin:16px 0 32px 24px }
.page-content li { color:var(--text-muted); margin-bottom:8px; line-height:1.6 }

/* ===== Level Table ===== */
.level-table { width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; overflow-x:auto }
.level-table th,.level-table td {
  padding:12px 16px; text-align:left; border:1px solid var(--border); color:var(--text-muted)
}
.level-table th { background:rgba(0,180,216,.08); color:#fff; font-weight:600; font-size:13px }
.level-table tr:hover td { background:rgba(0,180,216,.03) }
.level-table .l0 td { color:var(--text-dim) }

/* Compliance notice */
.compliance-bar {
  background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.2);
  padding:12px 16px; border-radius:var(--radius); margin:32px 0;
  font-size:13px; color:var(--gold); text-align:center
}

/* ===== Banner ===== */
.brand-banner {
  padding:24px; background:linear-gradient(135deg, rgba(0,180,216,.08), rgba(0,180,216,.02));
  border:1px solid var(--border); border-radius:var(--radius-lg); margin:24px 0
}
.brand-banner h3 { font-size:20px; color:#fff; margin-bottom:8px }
.brand-banner p { font-size:14px; color:var(--text-muted); line-height:1.7 }

/* ===== Responsive ===== */
@media (max-width:768px) {
  .header-inner { padding:0 16px }
  .menu-toggle { display:flex }
  .nav { 
    display:none; position:absolute; top:64px; left:0; right:0;
    background:rgba(10,14,26,.98); backdrop-filter:blur(20px);
    flex-direction:column; padding:8px; border-bottom:1px solid var(--border)
  }
  .nav.open { display:flex }
  .nav-link { padding:12px 16px; border-radius:var(--radius-sm); font-size:15px }
  .section { padding:64px 16px }
  .hero-banner-section { padding-top:96px }
  .hero-cta { flex-direction:column; align-items:center }
  .entity-chain { flex-direction:column }
  .entity-arrow { transform:rotate(90deg) }
  .chat-panel { width:100vw; max-width:100vw; right:-16px; bottom:72px; height:60vh; border-radius:var(--radius-lg) var(--radius-lg) 0 0 }
  .footer-bottom { flex-direction:column; text-align:center }
  .level-table { font-size:12px }
  .level-table th,.level-table td { padding:8px 10px }
}

@media (max-width:480px) {
  .card-grid { grid-template-columns:1fr }
  .advantage-grid { grid-template-columns:1fr }
  .stats-grid { grid-template-columns:1fr 1fr }
}

/* （轮播样式已合并至上方 Hero 区块 .banner-carousel） */

/* ===== 图片展示区 ===== */
.section-showcase { padding:60px 0 20px }
.section-showcase-single { padding:60px 0 }
.showcase-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:1100px; margin:0 auto;
}
.showcase-item {
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); position:relative;
  border:1px solid var(--border);
}
.showcase-item img {
  width:100%; height:auto; display:block;
  transition:transform .4s ease;
}
.showcase-item:hover img { transform:scale(1.03) }
.showcase-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:14px 20px;
  background:linear-gradient(transparent, rgba(0,0,0,.75));
  color:#fff; font-size:15px; font-weight:600; letter-spacing:1px;
}
.showcase-full {
  width:100%; height:auto; display:block; border-radius:var(--radius-lg);
  box-shadow:var(--shadow); border:1px solid var(--border);
}
.showcase-label-center {
  text-align:center; margin-top:16px;
  color:var(--accent); font-size:16px; font-weight:600; letter-spacing:1px;
}
@media (max-width:768px) {
  .showcase-grid { grid-template-columns:1fr; gap:16px; padding:0 16px }
  .showcase-label { font-size:13px; padding:10px 14px }
  .showcase-label-center { font-size:14px }
}


/* ===== 主营业务介绍（广告资质审核用） ===== */
.section-business-intro {
  background: #fff;
  padding: 60px 0 40px;
  border-top: 1px solid #e8eef4;
}
.business-intro-heading {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  text-align: center;
  margin: 0 0 16px;
  letter-spacing: .5px;
}
.business-intro-sub {
  font-size: 16px;
  color: #444;
  text-align: center;
  margin: 0 0 28px;
  font-weight: 500;
}
.business-intro-list {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
  counter-reset: biz;
}
.business-intro-list li {
  counter-increment: biz;
  position: relative;
  padding: 12px 0 12px 48px;
  font-size: 16px;
  line-height: 1.8;
  color: #2d2d3a;
  border-bottom: 1px solid #f0f2f5;
}
.business-intro-list li::before {
  content: counter(biz);
  position: absolute;
  left: 0;
  top: 14px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #00D4AA, #3b82f6);
  border-radius: 50%;
}
.business-intro-list li:last-child {
  border-bottom: none;
}
@media (max-width: 768px) {
  .business-intro-heading { font-size: 18px; }
  .business-intro-sub { font-size: 15px; }
  .business-intro-list li { font-size: 15px; padding-left: 42px; }
}

.site-footer-info { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); text-align:center; }
.site-footer-info .sfi-company { color:#fff; font-size:15px; font-weight:700; margin:0 0 10px; }
.site-footer-info .sfi-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; font-size:13px; color:var(--text-muted); margin:0; line-height:1.6; }
.site-footer-info .sfi-meta span { white-space:nowrap; }
@media (max-width:600px){ .site-footer-info .sfi-meta{ flex-direction:column; gap:4px; } }

/* ===== 五大数字经营板块 A–E 视觉优化（与小程序/H5 统一） ===== */
.plate-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px; margin-top:8px }
.plate-card {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(0,180,216,.06), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px 24px 28px; transition:transform .3s, border-color .3s, box-shadow .3s;
}
.plate-card:hover { transform:translateY(-6px); border-color:rgba(0,180,216,.35); box-shadow:0 12px 36px rgba(0,0,0,.45) }
.plate-badge {
  width:48px; height:48px; border-radius:14px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:900; color:#fff;
  background:linear-gradient(135deg,var(--accent),#0077b6);
  box-shadow:0 6px 18px var(--accent-glow);
}
.plate-title { font-size:19px; font-weight:700; color:#fff; margin-bottom:10px; line-height:1.4 }
.plate-text { font-size:14px; color:var(--text-muted); line-height:1.7 }
.plate-card::after {
  content:''; position:absolute; top:-40px; right:-40px; width:120px; height:120px;
  background:radial-gradient(circle, var(--accent-glow), transparent 70%); opacity:.5; pointer-events:none;
}
/* 图片展示区：统一图片比例，避免高低不齐 */
.showcase-item img { width:100%; height:340px; object-fit:cover; display:block; transition:transform .4s ease; }
@media (max-width:768px){
  .plate-grid { grid-template-columns:1fr; }
  .showcase-item img { height:240px; }
}