/* ============================================================
   COMPONENTS — Shared UI: Navbar, Footer, Buttons, Cards, etc.
   拓跋云 V4
   ============================================================ */

/* NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 0;background:var(--bg-white);border-bottom:1px solid var(--border-light);transition:background 400ms var(--ease-out),box-shadow 400ms var(--ease-out)}
.navbar.scrolled{box-shadow:var(--shadow-card)}
.navbar .container{display:flex;align-items:center;justify-content:space-between}
.nav-brand{display:flex;align-items:center}
.nav-brand .logo-img{height:52px;width:auto;display:block;max-width:100%}
.nav-menu{display:flex;align-items:center;gap:0;list-style:none}
.nav-menu a{display:block;padding:8px 20px;color:var(--text-secondary);font-size:14px;font-weight:500;transition:var(--transition-fast);position:relative}
.nav-menu a:hover{color:var(--red-500)}
.nav-menu li a.active{color:var(--red-500)!important}
.nav-menu li a.active::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:18px;height:3px;background:var(--red-500);border-radius:2px}
.nav-phone{color:var(--text-tertiary);font-size:14px}
.nav-phone strong{color:var(--red-500)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--text-primary);padding:6px;z-index:1001}
.nav-toggle .icon-x{display:none}
.nav-toggle.open .icon-hamburger{display:none}
.nav-toggle.open .icon-x{display:block}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 32px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;border:none;cursor:pointer;transition:var(--transition-base);white-space:nowrap;font-family:var(--font-sans);letter-spacing:1px;text-decoration:none}
.btn-sm{padding:8px 20px;font-size:13px}
.btn-lg{padding:14px 40px;font-size:15px;letter-spacing:1.5px}
.btn-primary{background:var(--red-500);color:var(--text-on-brand)}
.btn-primary:hover{background:var(--red-600);box-shadow:var(--shadow-red);transform:translateY(-1px)}
.btn-gold{background:var(--gold-500);color:#fff}
.btn-gold:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 4px 16px rgba(201,149,30,.2)}
.btn-outline{background:transparent;color:var(--red-500);border:1px solid var(--red-500)}
.btn-outline:hover{background:var(--red-500);color:#fff}
.btn-white{background:#fff;color:var(--red-500)}
.btn-white:hover{background:var(--red-50)}

/* BREADCRUMB */
.breadcrumb{padding-top:100px;font-size:13px;color:var(--text-tertiary);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb a{color:var(--text-tertiary);transition:var(--transition-fast)}
.breadcrumb a:hover{color:var(--red-500)}
.breadcrumb .sep{color:var(--gray-300)}
.breadcrumb .current{color:var(--text-primary);font-weight:500}

/* PAGE HERO — Unified inner banner system */
.page-hero,.service-hero,.about-hero,.case-hero,.news-hero,.training-hero,.contact-hero{
  padding:80px 0 80px;
  min-height:360px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  display:grid;
  align-items:center
}
.page-hero::before,.service-hero::before,.about-hero::before,.case-hero::before,.news-hero::before,.training-hero::before,.contact-hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 50%,rgba(255,255,255,.45) 100%);
  z-index:0
}
.page-hero .container,.service-hero .container,.about-hero .container,.case-hero .container,.news-hero .container,.training-hero .container,.contact-hero .container{
  position:relative;z-index:1;width:100%
}
/* Unified badge */
.hero-badge,.sh-badge,.nh-badge{
  display:inline-block;
  background:var(--red-50);
  color:var(--red-500);
  font-size:13px;
  font-weight:600;
  padding:6px 18px;
  border-radius:20px;
  margin-bottom:18px;
  letter-spacing:2px;
  white-space:nowrap
}
/* Unified heading */
.page-hero h1,.service-hero h1,.about-hero h1,.case-hero h1,.news-hero h1,.training-hero h1,.contact-hero h1{
  font-size:clamp(28px,4vw,44px);
  font-weight:700;
  line-height:1.25;
  margin-bottom:14px
}
.page-hero h1 .red,.service-hero h1 .red,.about-hero h1 .red,.case-hero h1 .red,.news-hero h1 .red,.training-hero h1 .red,.contact-hero h1 .red{
  color:var(--red-500)
}
/* Unified description */
.hero-desc,.sh-desc,.nh-desc{
  font-size:16px;
  color:var(--text-secondary);
  line-height:1.9;
  max-width:600px
}
/* Unified CTA row */
.sh-cta{
  margin-top:24px;
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.sh-meta{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:20px;
  font-size:14px;
  color:var(--text-secondary)
}

/* FEATURE CARDS */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:32px 28px;transition:var(--transition-base);position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--red-500),var(--gold-500));transform:scaleX(0);transform-origin:left;transition:transform var(--transition-base)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.feature-card:hover::before{transform:scaleX(1)}
.feature-card .fc-icon{width:52px;height:52px;border-radius:var(--radius-md);background:var(--red-50);display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:24px;color:var(--red-500)}
.feature-card .fc-icon svg{width:28px;height:28px;flex-shrink:0}
.feature-card h4{font-size:17px;margin-bottom:8px;color:var(--text-primary)}
.feature-card p{font-size:14px;color:var(--text-secondary);line-height:1.7}

/* CTA SECTION */
.cta-section{background:linear-gradient(135deg,var(--red-700),var(--red-500));color:var(--text-on-brand);padding:60px 0;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-50%;right:-20%;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.05)}
.cta-section h2{font-size:clamp(24px,3vw,36px);margin-bottom:12px;color:#fff}
.cta-section p{font-size:15px;opacity:.9;max-width:560px;margin:0 auto 28px;line-height:1.8}
.cta-section .btn{position:relative;z-index:1}

/* STATS BAR */
.stats-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.stat-item{text-align:center;padding:32px 16px;border-right:1px solid var(--border-light)}
.stat-item:last-child{border-right:none}
.stat-item .stat-num{font-size:clamp(28px,4vw,42px);font-weight:700;color:var(--red-500);font-family:var(--font-en);line-height:1;margin-bottom:8px}
.stat-item .stat-label{font-size:14px;color:var(--text-secondary)}

/* PROCESS STEPS */
.process-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
@media(min-width:768px){.process-steps{grid-template-columns:repeat(4,1fr)}}
.process-step{text-align:center;padding:28px 16px;position:relative}
.process-step .step-num{width:44px;height:44px;border-radius:50%;background:var(--red-500);color:#fff;font-size:18px;font-weight:700;font-family:var(--font-en);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.process-step h4{font-size:15px;margin-bottom:6px}
.process-step p{font-size:13px;color:var(--text-secondary);line-height:1.6}

/* FOOTER */
.footer{background:linear-gradient(135deg,var(--red-800),var(--red-600));color:rgba(255,255,255,.85);padding:64px 0 0;border-top:4px solid var(--gold-500)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px}
.footer-col h4{font-size:16px;color:#fff;margin-bottom:20px;font-weight:600}
.footer-col p,.footer-col a{font-size:13px;color:rgba(255,255,255,.7);line-height:2;display:block;transition:var(--transition-fast)}
.footer-col p svg{width:16px;height:16px;vertical-align:middle;margin-right:4px;flex-shrink:0}
.footer-col a:hover{color:var(--gold-300)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.5)}

/* FLOATING BAR */
.floating-bar{display:inline-flex;flex-direction:row;gap:6px;align-items:center}
.floating-bar a{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.7);transition:var(--transition-fast);text-decoration:none}
.floating-bar a:hover{background:rgba(255,255,255,0.25);color:#fff}
.floating-bar svg{width:16px;height:16px}

/* SERVICE CARD */
.service-card{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:36px 28px;transition:var(--transition-base);display:flex;flex-direction:column;gap:12px}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--red-200)}
.service-card .sc-icon{width:56px;height:56px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:4px;color:var(--red-500);font-size:28px}
.service-card .sc-icon svg{width:32px;height:32px;flex-shrink:0}
.service-card h4{font-size:18px;color:var(--text-primary)}
.service-card p{font-size:14px;color:var(--text-secondary);line-height:1.7;flex:1}
.service-card .sc-link{font-size:13px;font-weight:600;color:var(--red-500);display:inline-flex;align-items:center;gap:4px}

/* CASE CARD */
.case-card{background:var(--bg-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:var(--transition-base)}
.case-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.case-card .cc-image{width:100%;height:200px;object-fit:cover}
.case-card .cc-body{padding:24px}
.case-card .cc-tag{font-size:12px;color:var(--red-500);font-weight:600;display:inline-block;margin-bottom:8px}
.case-card h4{font-size:18px;margin-bottom:8px}
.case-card p{font-size:14px;color:var(--text-secondary);line-height:1.6}

/* NEWS CARD */
.news-card-h{display:flex;gap:24px;padding:20px;background:var(--bg-white);border-radius:var(--radius-lg);border:1px solid var(--border-light);transition:var(--transition-fast)}
.news-card-h:hover{box-shadow:var(--shadow-card);border-color:var(--red-200)}
.news-card-h .nc-image{width:180px;height:120px;border-radius:var(--radius-md);object-fit:cover;flex-shrink:0}
.news-card-h .nc-body{display:flex;flex-direction:column;justify-content:center;gap:6px}
.news-card-h .nc-tag{font-size:12px;color:var(--red-500);font-weight:600}
.news-card-h .nc-date{font-size:12px;color:var(--text-tertiary)}
.news-card-h h4{font-size:16px}
.news-card-h p{font-size:13px;color:var(--text-secondary);line-height:1.6}

/* FAQ */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border-light);padding:0}
.faq-question{width:100%;background:none;border:none;text-align:left;font-size:16px;font-weight:500;color:var(--text-primary);padding:20px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-sans);gap:16px}
.faq-question:hover{color:var(--red-500)}
.faq-question .faq-icon{font-size:20px;color:var(--red-500);transition:transform var(--transition-fast);flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--transition-base),padding var(--transition-base)}
.faq-item.open .faq-answer{max-height:300px;padding-bottom:20px}
.faq-answer p{font-size:14px;color:var(--text-secondary);line-height:1.8}

/* FORM */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1px solid var(--border-mid);border-radius:var(--radius-md);font-size:14px;font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-white);transition:var(--transition-fast);outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--red-500);box-shadow:0 0 0 3px rgba(192,0,0,.08)}
.form-group textarea{resize:vertical;min-height:100px}

/* GEO CONTENT — service area information */
.geo-content{max-width:var(--container-max);margin:0 auto;padding:40px 20px;border-top:1px solid var(--border-color,#eee)}
@media(min-width:768px){.geo-content{padding:40px 32px}}
.geo-content .geo-qa h3{font-size:15px;font-weight:600;margin-top:20px;margin-bottom:6px;color:var(--text-primary,#333)}
.geo-content .geo-qa p{font-size:14px;line-height:1.8;color:var(--text-secondary,#666);margin-bottom:12px}
.geo-content .geo-summary{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:24px;padding:16px;background:var(--bg-secondary,#f8f8f8);border-radius:8px;font-size:13px;color:var(--text-tertiary,#999)}

/* TAB SYSTEM */
.tab-nav{display:flex;gap:0;border-bottom:2px solid var(--border-light);margin-bottom:32px}
.tab-btn{padding:14px 32px;border:none;background:none;font-size:16px;font-weight:500;color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);position:relative;transition:var(--transition-fast)}
.tab-btn:hover{color:var(--red-500)}
.tab-btn.active{color:var(--red-500);font-weight:600}
.tab-btn.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;background:var(--red-500);border-radius:2px 2px 0 0}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeIn .4s var(--ease-out)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* REVEAL ANIMATION */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* MOBILE NAV → unified in responsive-mobile.css */

/* ============================================================
   PROCESS FLOW — 服务流程 7 steps (flat 1-3, curve up 4-7)
   ============================================================ */
.process-flow {
  margin-top: var(--space-10);
  padding: 0 var(--space-4);
}
.pf-steps-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  gap: 0;
}
.pf-step {
  flex: 1;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
.pf-step[data-step="1"] { padding-bottom: 0; }
.pf-step[data-step="2"] { padding-bottom: 0; }
.pf-step[data-step="3"] { padding-bottom: 0; }
.pf-step[data-step="4"] { padding-bottom: 60px; }
.pf-step[data-step="5"] { padding-bottom: 140px; }
.pf-step[data-step="6"] { padding-bottom: 220px; }
.pf-step[data-step="7"] { padding-bottom: 290px; }

/* SVG connector animation */
.pf-lines-svg .pf-main-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}
.process-flow .pf-lines-svg .pf-main-line {
  animation: pfDraw 1.5s ease-out 0.5s forwards;
}
@keyframes pfDraw { to { stroke-dashoffset: 0; } }

.pf-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--red-500);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(220,38,38,0.2);
}
.pf-step[data-step="7"] .pf-circle {
  background: linear-gradient(135deg, var(--red-500), #b91c1c);
  box-shadow: 0 4px 16px rgba(220,38,38,0.35);
}
.pf-body {
  margin-top: 10px;
  text-align: center;
  padding: 0 2px;
}
.pf-body h4 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
}
.pf-step[data-step="7"] .pf-body h4 {
  color: var(--red-600);
  font-weight: 700;
}
.pf-body p {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin: 0;
}

/* INLINE SVG ICONS (in headings, paragraphs) */
.inline-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  color: var(--red-500);
}

/* COLORED DOT INDICATORS (for audit report, severity levels) */
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.dot-red { background: #ef4444; }
.dot-blue { background: #3b82f6; }
.dot-yellow { background: #eab308; }
.dot-orange { background: #f97316; }

/* SVG ICON SUPPORT — ensure proper display in all contexts */
/* Headings with inline SVG */
h1 svg, h2 svg, h3 svg, h4 svg, h5 svg, h6 svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

/* training page tf-icon */
.tf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tf-icon svg {
  width: 36px;
  height: 36px;
  color: var(--red-500);
}

/* ai-step-icon svg size */
.ai-step-icon svg {
  width: 32px;
  height: 32px;
  color: var(--red-500);
}

/* ensure svg use elements inherit color */
svg use {
  color: inherit;
}