/* ============================================================






   QianNuo Agency - Home Page Specific Styles (简约大气版)






   ============================================================ */













/* ──────────────────────────────────────────────────────────






   GLOBAL MAP SECTION






   ────────────────────────────────────────────────────────── */






.global-section {






  position: relative;






  background: var(--c-bg);






  padding: var(--section-py) 0;






  overflow: hidden;






}













.global-section::before {






  content: '';






  position: absolute;






  top: 0;






  right: 0;






  width: 600px;






  height: 600px;






  background: radial-gradient(circle, rgba(59, 130, 246, 0.03) 0%, transparent 60%);






  pointer-events: none;






}













.map-wrapper {






  position: relative;






  margin-top: 48px;






}













.map-city-cards {






  display: grid;






  grid-template-columns: repeat(5, 1fr);






  gap: 16px;






}













.city-info-card {






  background: #fff;






  border: 1px solid var(--c-border);






  border-radius: 16px;






  padding: 28px;






  transition: all var(--t-base);






  position: relative;






  overflow: hidden;






}













.city-info-card::after {






  content: '';






  position: absolute;






  top: 0;






  left: 0;






  right: 0;






  height: 3px;






  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-light));






  transform: scaleX(0);






  transition: transform var(--t-base);






}













.city-info-card:hover {






  border-color: transparent;






  transform: translateY(-6px);






  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);






}













.city-info-card:hover::after {






  transform: scaleX(1);






}













.city-info-card.cic-hq {






  background: linear-gradient(180deg, rgba(59, 130, 246, 0.03) 0%, #fff 100%);






  border-color: var(--c-accent);






}













.city-info-card.cic-hq::after {






  transform: scaleX(1);






}













.cic-badge {






  font-family: var(--font-en);






  font-size: 10px;






  font-weight: 600;






  color: var(--c-accent);






  text-transform: uppercase;






  letter-spacing: 1px;






  margin-bottom: 8px;






}













.cic-name {






  font-family: var(--font-en);






  font-size: 18px;






  font-weight: 700;






  color: var(--c-text);






  margin-bottom: 4px;






}













.cic-role {






  font-size: 13px;






  color: var(--c-text-2);






  margin-bottom: 12px;






}













.cic-line {






  width: 32px;






  height: 2px;






  background: var(--c-accent);






  margin-bottom: 12px;






}













.cic-addr {






  font-size: 12px;






  color: var(--c-text-3);






}













/* Office stats */






.office-stats-row {






  display: flex;






  align-items: center;






  justify-content: center;






  gap: 0;






  margin-top: 48px;






  padding: 32px;






  background: var(--c-surface);






  border-radius: 16px;






}













.osr-item {






  display: flex;






  align-items: baseline;






  gap: 4px;






  padding: 8px 56px;






  position: relative;






}













.osr-div {






  width: 1px;






  height: 40px;






  background: var(--c-border);






}













.osr-num {






  font-family: var(--font-en);






  font-size: 36px;






  font-weight: 700;






  color: var(--c-text);






  line-height: 1;






}













.osr-unit {






  font-size: 18px;






  font-weight: 600;






  color: var(--c-text-2);






}













.osr-label {






  position: absolute;






  bottom: -8px;






  left: 50%;






  transform: translateX(-50%);






  font-family: var(--font-en);






  font-size: 11px;






  color: var(--c-text-3);






  font-weight: 500;






  text-transform: uppercase;






  letter-spacing: 1px;






  white-space: nowrap;






}













/* ──────────────────────────────────────────────────────────






   SERVICES SECTION






   ────────────────────────────────────────────────────────── */






.services-section {






  position: relative;






  background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%);






  padding: var(--section-py) 0;






  overflow: hidden;






}













.services-section::before {






  content: '';






  position: absolute;






  bottom: 0;






  left: 0;






  width: 100%;






  height: 200px;






  background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.02) 100%);






  pointer-events: none;






}













.services-grid {






  display: grid;






  grid-template-columns: repeat(3, 1fr);






  gap: 24px;






}













.service-card {






  position: relative;






  background: #fff;






  border: 1px solid var(--c-border);






  border-radius: 16px;






  padding: 32px;






  transition: all var(--t-base);






}













.service-card:hover {






  border-color: var(--c-accent);






  transform: translateY(-4px);






  box-shadow: 0 20px 40px rgba(0,0,0,0.06);






}













.service-card.featured {






  border-color: var(--c-accent);






  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);






}













.sc-badge {






  position: absolute;






  top: 20px;






  right: 20px;






  font-family: var(--font-en);






  font-size: 10px;






  font-weight: 600;






  color: #fff;






  background: var(--c-accent);






  padding: 4px 12px;






  border-radius: 4px;






  letter-spacing: 0.5px;






}













.sc-badge-inline {






  font-size: 11px;






  font-weight: 600;






  color: #fff;






  background: var(--c-accent);






  padding: 4px 10px;






  border-radius: 4px;






  letter-spacing: 0.5px;






  vertical-align: middle;






  margin-left: 12px;






}













.sc-header {






  display: flex;






  align-items: flex-start;






  justify-content: space-between;






  margin-bottom: 16px;






}













.sc-icon {






  width: 48px;






  height: 48px;






  background: var(--c-surface);






  border-radius: 12px;






  display: flex;






  align-items: center;






  justify-content: center;






}













.sc-num {






  font-family: var(--font-en);






  font-size: 14px;






  font-weight: 600;






  color: var(--c-text-3);






}













.sc-title {






  font-family: var(--font-en);






  font-size: 18px;






  font-weight: 600;






  color: var(--c-text);






  margin-bottom: 12px;






}













.sc-desc {






  font-size: 14px;






  color: var(--c-text-2);






  line-height: 1.7;






  margin-bottom: 20px;






}













.sc-features {






  display: flex;






  flex-direction: column;






  gap: 8px;






  margin-bottom: 20px;






}













.sc-features li {






  font-size: 13px;






  color: var(--c-text-2);






}













.sc-bar {






  height: 3px;






  background: var(--c-border);






  border-radius: 2px;






  overflow: hidden;






}













.sc-bar-fill {






  height: 100%;






  background: var(--c-accent);






  border-radius: 2px;






}













.sc-bar-label {






  font-family: var(--font-en);






  font-size: 11px;






  font-weight: 500;






  color: var(--c-text-3);






  margin-top: 8px;






}













/* ──────────────────────────────────────────────────────────






   PROCESS TIMELINE






   ────────────────────────────────────────────────────────── */






.process-section {






  background: var(--c-bg);






  padding: var(--section-py) 0;






}













.process-timeline {






  display: grid;






  grid-template-columns: repeat(4, 1fr);






  gap: 32px;






  margin-top: 64px;






}













.process-step {






  text-align: center;






  position: relative;






  display: flex;






  flex-direction: column;






  align-items: center;






  background: var(--c-surface);






  border: 1px solid var(--c-border);






  border-radius: 16px;






  padding: 32px 24px;






  min-height: 280px;






}













.ps-num {






  width: 48px;






  height: 48px;






  border-radius: 50%;






  background: var(--c-text);






  color: #fff;






  font-family: var(--font-en);






  font-size: 16px;






  font-weight: 600;






  display: flex;






  align-items: center;






  justify-content: center;






  margin-bottom: 16px;






}













.ps-icon {






  font-size: 36px;






  margin-bottom: 12px;






}













.process-step h3 {






  font-family: var(--font-en);






  font-size: 18px;






  font-weight: 600;






  color: var(--c-text);






  margin-bottom: 12px;






}













.process-step p {






  font-size: 14px;






  color: var(--c-text-2);






  line-height: 1.7;






  margin-bottom: 16px;






  flex-grow: 1;






}













.ps-time {






  display: inline-block;






  font-family: var(--font-en);






  font-size: 12px;






  font-weight: 500;






  color: var(--c-accent);






  background: rgba(99, 102, 241, 0.08);






  padding: 6px 16px;






  border-radius: 20px;






}













/* ──────────────────────────────────────────────────────────






   ADVANTAGES






   ────────────────────────────────────────────────────────── */






.advantages-section {






  position: relative;






  background: var(--c-bg);






  padding: var(--section-py) 0;






  overflow: hidden;






}













.advantages-section::before {






  content: '';






  position: absolute;






  top: 50%;






  left: -200px;






  transform: translateY(-50%);






  width: 500px;






  height: 500px;






  background: radial-gradient(circle, rgba(59, 130, 246, 0.04) 0%, transparent 60%);






  pointer-events: none;






}













.advantages-section::after {






  content: '';






  position: absolute;






  bottom: 10%;






  right: -100px;






  width: 400px;






  height: 400px;






  background: radial-gradient(circle, rgba(96, 165, 250, 0.03) 0%, transparent 60%);






  pointer-events: none;






}













.advantages-grid {






  display: grid;






  grid-template-columns: repeat(4, 1fr);






  gap: 24px;






}













.advantage-card {






  background: #fff;






  border: 1px solid var(--c-border);






  border-radius: 16px;






  padding: 32px;






  transition: all var(--t-base);






}













.advantage-card:hover {






  border-color: var(--c-accent);






  transform: translateY(-4px);






}













.adv-icon {






  font-size: 36px;






  margin-bottom: 16px;






}













.adv-num {






  font-family: var(--font-en);






  font-size: 48px;






  font-weight: 700;






  color: var(--c-border);






  line-height: 1;






  margin-bottom: 8px;






}













.advantage-card h3 {






  font-family: var(--font-en);






  font-size: 17px;






  font-weight: 600;






  color: var(--c-text);






  margin-bottom: 12px;






}













.advantage-card p {






  font-size: 14px;






  color: var(--c-text-2);






  line-height: 1.7;






  margin-bottom: 16px;






}













.adv-tags {






  display: flex;






  flex-wrap: wrap;






  gap: 8px;






}













.adv-tags span {






  font-family: var(--font-en);






  font-size: 11px;






  font-weight: 500;






  color: var(--c-text-2);






  background: var(--c-surface);






  padding: 4px 12px;






  border-radius: 4px;






}













/* ──────────────────────────────────────────────────────────






   PLATFORMS






   ────────────────────────────────────────────────────────── */






.platforms-section {






  background: var(--c-bg);






  padding: var(--section-py) 0;






}













.platforms-grid {






  display: grid;






  grid-template-columns: 1.2fr 1fr;






  gap: 24px;






  margin-top: 64px;






}













.platform-main {






  background: var(--c-surface);






  border: 1px solid var(--c-border);






  border-radius: 16px;






  padding: 40px;






}













.pm-header {






  display: flex;






  align-items: center;






  gap: 20px;






  margin-bottom: 32px;






}













.pm-logo {






  width: 64px;






  height: 64px;






  background: #fff;






  border-radius: 16px;






  display: flex;






  align-items: center;






  justify-content: center;






  border: 1px solid var(--c-border);






}













.pm-name {






  font-family: var(--font-en);






  font-size: 32px;






  font-weight: 700;






  color: var(--c-text);






  line-height: 1;






}













.pm-sub {






  font-size: 13px;






  color: var(--c-text-3);






  margin-top: 4px;






}













.pm-stats {






  display: grid;






  grid-template-columns: repeat(3, 1fr);






  gap: 16px;






  margin-bottom: 24px;






}













.pm-stat {






  text-align: center;






  padding: 20px;






  background: #fff;






  border-radius: 12px;






  border: 1px solid var(--c-border);






}













.pm-num {






  display: block;






  font-family: var(--font-en);






  font-size: 24px;






  font-weight: 700;






  color: var(--c-text);






  line-height: 1;






  margin-bottom: 4px;






}













.pm-label {






  display: block;






  font-size: 12px;






  color: var(--c-text-3);






}













.pm-tags {






  display: flex;






  flex-wrap: wrap;






  gap: 8px;






}













.ptag {






  padding: 8px 16px;






  background: var(--c-text);






  color: #fff;






  border-radius: 6px;






  font-family: var(--font-en);






  font-size: 12px;






  font-weight: 500;






}













.platforms-side {






  display: flex;






  flex-direction: column;






  gap: 16px;






}













.ps-card {






  background: var(--c-surface);






  border: 1px solid var(--c-border);






  border-radius: 16px;






  padding: 24px;






}













.ps-card h4 {






  font-family: var(--font-en);






  font-size: 14px;






  font-weight: 600;






  color: var(--c-text);






  margin-bottom: 16px;






}













.ps-logos {






  display: flex;






  gap: 24px;






  flex-wrap: wrap;






}













.ps-logo-item {






  display: flex;






  flex-direction: column;






  align-items: center;






  gap: 6px;






}













.ps-logo-item span {






  font-family: var(--font-en);






  font-size: 11px;






  font-weight: 500;






  color: var(--c-text-3);






}













.ps-cat-sub {






  font-size: 12px;






  color: var(--c-text-3);






  margin-bottom: 12px;






}













.ps-cat-chips {






  display: flex;






  flex-wrap: wrap;






  gap: 8px;






}













.ps-chip {






  padding: 6px 14px;






  background: #fff;






  border: 1px solid var(--c-border);






  border-radius: 6px;






  font-family: var(--font-en);






  font-size: 12px;






  font-weight: 500;






  color: var(--c-text-2);






  cursor: pointer;






  transition: all var(--t-base);






}













.ps-chip:hover {






  border-color: var(--c-accent);






  color: var(--c-accent);






}













/* ──────────────────────────────────────────────────────────






   TEAM






   ────────────────────────────────────────────────────────── */






.team-section {






  position: relative;






  background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%);






  padding: var(--section-py) 0;






  overflow: hidden;






}













.team-section::before {






  content: '';






  position: absolute;






  top: 0;






  right: 0;






  width: 50%;






  height: 100%;






  background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.02) 100%);






  pointer-events: none;






}













.team-grid {






  display: grid;






  grid-template-columns: repeat(4, 1fr);






  gap: 24px;






}













.team-card {






  background: #fff;






  border: 1px solid var(--c-border);






  border-radius: 16px;






  padding: 28px;






  transition: all var(--t-base);






}













.team-card:hover {






  border-color: var(--c-accent);






  transform: translateY(-4px);






}













.tc-icon-area {






  display: flex;






  align-items: flex-end;






  justify-content: space-between;






  margin-bottom: 20px;






}













.tc-icon {






  width: 56px;






  height: 56px;






  border-radius: 12px;






  background: var(--c-text);






  color: #fff;






  font-family: var(--font-en);






  font-size: 20px;






  font-weight: 700;






  display: flex;






  align-items: center;






  justify-content: center;






}













.tc-i2 { background: #6366f1; }






.tc-i3 { background: #f97316; }






.tc-i4 { background: #0891b2; }













.tc-count {






  font-family: var(--font-en);






  font-size: 28px;






  font-weight: 700;






  color: var(--c-text);






  line-height: 1;






}













.tc-count span {






  font-size: 14px;






  font-weight: 500;






  color: var(--c-text-3);






}













.team-card h3 {






  font-family: var(--font-en);






  font-size: 16px;






  font-weight: 600;






  color: var(--c-text);






  margin-bottom: 8px;






}













.team-card p {






  font-size: 13px;






  color: var(--c-text-2);






  line-height: 1.7;






  margin-bottom: 16px;






}













.tc-tags {






  display: flex;






  flex-wrap: wrap;






  gap: 6px;






  margin-bottom: 16px;






}













.tc-tags span {






  font-family: var(--font-en);






  font-size: 11px;






  font-weight: 500;






  color: var(--c-text-2);






  background: var(--c-surface);






  padding: 4px 10px;






  border-radius: 4px;






}













.tc-bar {






  height: 3px;






  background: var(--c-border);






  border-radius: 2px;






  overflow: hidden;






}













.tc-bar-fill {






  height: 100%;






  background: var(--c-accent);






  width: 0;






  transition: width 1.4s cubic-bezier(.22,1,.36,1);






}













/* ──────────────────────────────────────────────────────────






   STATS BANNER






   ────────────────────────────────────────────────────────── */






.stats-banner {






  background: linear-gradient(135deg, #f0f2ff 0%, #f5f7ff 50%, #eef1ff 100%);






  border-top: 1px solid rgba(99, 102, 241, 0.1);






  border-bottom: 1px solid rgba(99, 102, 241, 0.1);






  padding: 72px 0;






  position: relative;






  overflow: hidden;






}













.stats-banner::before {






  content: '';






  position: absolute;






  top: 0;






  left: 0;






  right: 0;






  bottom: 0;






  background:






    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),






    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(168, 85, 247, 0.04) 0%, transparent 50%);






  pointer-events: none;






}













.stats-banner-inner {






  max-width: var(--container-max);






  margin: 0 auto;






  padding: 0 40px;






  display: flex;






  align-items: center;






  justify-content: center;






  flex-wrap: wrap;






  position: relative;






  z-index: 1;






}













.sb-item {






  display: flex;






  flex-direction: column;






  align-items: center;






  padding: 16px 64px;






}













.sb-div {






  width: 1px;






  height: 64px;






  background: rgba(99, 102, 241, 0.15);






}













.sb-num {






  font-family: var(--font-en);






  font-size: clamp(32px, 5vw, 48px);






  font-weight: 700;






  color: var(--c-text);






  line-height: 1;






  letter-spacing: -1px;






}













.sb-unit {






  font-size: 20px;






  font-weight: 600;






  color: var(--c-accent);






  margin-left: 4px;






}













.sb-label {






  font-family: var(--font-en);






  font-size: 12px;






  color: var(--c-text-2);






  font-weight: 500;






  text-transform: uppercase;






  letter-spacing: 1px;






  margin-top: 8px;






}













/* ──────────────────────────────────────────────────────────






   CASES






   ────────────────────────────────────────────────────────── */






.cases-section {






  position: relative;






  background: var(--c-bg);






  padding: var(--section-py) 0;






  overflow: hidden;






}













.cases-section::before {






  content: '';






  position: absolute;






  top: 20%;






  left: -150px;






  width: 400px;






  height: 400px;






  background: radial-gradient(circle, rgba(99, 102, 241, 0.04) 0%, transparent 60%);






  pointer-events: none;






}













.cases-grid {






  display: grid;






  grid-template-columns: 1.4fr 1fr 1fr;






  gap: 24px;






  margin-top: 64px;






}













.case-card {






  position: relative;






  border-radius: 16px;






  overflow: hidden;






  min-height: 320px;






  background: linear-gradient(135deg, #1e293b, #0f172a);






  cursor: pointer;






}













.case-lg { min-height: 400px; }













.case-overlay {






  position: absolute;






  inset: 0;






  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);






}













.case-overlay.co2 { background: linear-gradient(180deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.8) 100%); }






.case-overlay.co3 { background: linear-gradient(180deg, rgba(249,115,22,0.1) 0%, rgba(249,115,22,0.8) 100%); }













.case-content {






  position: relative;






  z-index: 1;






  padding: 32px;






  height: 100%;






  display: flex;






  flex-direction: column;






  justify-content: flex-end;






  color: #fff;






}













.case-cat {






  display: inline-block;






  font-family: var(--font-en);






  font-size: 11px;






  font-weight: 600;






  letter-spacing: 1.5px;






  text-transform: uppercase;






  color: rgba(255,255,255,0.8);






  margin-bottom: 12px;






}













.case-card h3 {






  font-family: var(--font-en);






  font-size: 20px;






  font-weight: 600;






  color: #fff;






  margin-bottom: 8px;






}













.case-card p {






  font-size: 14px;






  color: rgba(255,255,255,0.7);






  line-height: 1.6;






  margin-bottom: 20px;






}













.case-metrics {






  display: flex;






  gap: 24px;






}













.case-metrics > div {






  display: flex;






  flex-direction: column;






  gap: 4px;






}













.cm {






  font-family: var(--font-en);






  font-size: 20px;






  font-weight: 700;






  color: #fff;






  line-height: 1;






}













.case-metrics span:last-child {






  font-family: var(--font-en);






  font-size: 11px;






  color: rgba(255,255,255,0.6);






  font-weight: 500;






  text-transform: uppercase;






  letter-spacing: 0.5px;






}













/* ──────────────────────────────────────────────────────────






   CONTACT






   ────────────────────────────────────────────────────────── */






.contact-section {






  position: relative;






  background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%);






  padding: var(--section-py) 0;






  overflow: hidden;






}













.contact-section::before {






  content: '';






  position: absolute;






  bottom: 0;






  right: 0;






  width: 600px;






  height: 600px;






  background: radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.04) 0%, transparent 60%);






  pointer-events: none;






}













.contact-grid {






  display: grid;






  grid-template-columns: 1fr 1.2fr;






  gap: 64px;






  align-items: start;






}













.contact-title {






  font-size: clamp(28px, 4vw, 40px);






  font-weight: 700;






  color: var(--c-text);






  margin-bottom: 16px;






  margin-top: 12px;






}













.contact-desc {






  font-size: 16px;






  color: var(--c-text-2);






  line-height: 1.8;






  margin-bottom: 56px;






}























































.cm-title {






  font-family: var(--font-en);






  font-size: 11px;






  font-weight: 600;






  color: var(--c-text-3);






  text-transform: uppercase;






  letter-spacing: 1px;






  margin-bottom: 4px;






}













.cm-val {






  font-size: 14px;






  color: var(--c-text);






  font-weight: 500;






}














/* ──────────────────────────────────────────────────────────
   CONTACT RIGHT COLUMN
   ────────────────────────────────────────────────────────── */
.contact-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  height: 100%;
}



















/* Stats card */












/* Service features */










/* Mobile responsive */
@media (max-width: 960px) {
  .contact-right { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .contact-right { flex-direction: column; }
}



/* Contact form */






.contact-form {






  background: #fff;






  border: 1px solid var(--c-border);






  border-radius: 20px;






  padding: 40px;






}













.contact-form h3 {






  font-family: var(--font-en);






  font-size: 22px;






  font-weight: 600;






  color: var(--c-text);






  margin-bottom: 8px;






}













.cf-sub {






  font-size: 14px;






  color: var(--c-text-3);






  margin-bottom: 32px;






}













.cf-fields { display: flex; flex-direction: column; gap: 20px; }













.cf-row { display: flex; gap: 16px; }













.cf-field {






  flex: 1;






  display: flex;






  flex-direction: column;






  gap: 8px;






}













.cf-field.full { width: 100%; }













.cf-field label {






  font-family: var(--font-en);






  font-size: 12px;






  font-weight: 500;






  color: var(--c-text-2);






  text-transform: uppercase;






  letter-spacing: 0.5px;






}













.cf-field input,






.cf-field select,






.cf-field textarea {






  width: 100%;






  padding: 14px 18px;






  border: 1px solid var(--c-border);






  border-radius: 10px;






  font-family: var(--font-zh);






  font-size: 15px;






  color: var(--c-text);






  background: var(--c-surface);






  transition: all var(--t-base);






  outline: none;






}













.cf-field input:focus,






.cf-field select:focus,






.cf-field textarea:focus {






  border-color: var(--c-accent);






  background: #fff;






}













.cf-field input::placeholder,






.cf-field textarea::placeholder { color: var(--c-text-3); }













.cf-submit {






  width: 100%;






  padding: 16px;






  background: var(--c-text);






  color: #fff;






  border: none;






  border-radius: 10px;






  font-family: var(--font-en);






  font-size: 15px;






  font-weight: 600;






  cursor: pointer;






  transition: all var(--t-base);






  display: flex;






  align-items: center;






  justify-content: center;






  gap: 8px;






}













.cf-submit:hover {






  background: var(--c-accent);






}













.cf-success {






  text-align: center;






  padding: 20px;






  background: #f0fdf4;






  border: 1px solid #bbf7d0;






  border-radius: 12px;






  color: #166534;






  font-size: 14px;






  font-weight: 500;






}













/* ──────────────────────────────────────────────────────────






   Responsive






   ────────────────────────────────────────────────────────── */






@media (max-width: 1100px) {






  .advantages-grid { grid-template-columns: repeat(2, 1fr); }






  .team-grid { grid-template-columns: repeat(2, 1fr); }






}













@media (max-width: 900px) {






  .map-city-cards { grid-template-columns: repeat(3, 1fr); }






  .services-grid { grid-template-columns: repeat(2, 1fr); }






  .process-timeline { grid-template-columns: repeat(2, 1fr); gap: 24px; }






  .platforms-grid { grid-template-columns: 1fr; }






  .pm-stats { grid-template-columns: repeat(3, 1fr); }






  .cases-grid { grid-template-columns: 1fr 1fr; }






  .contact-grid { grid-template-columns: 1fr; gap: 40px; }






  .sb-item { padding: 16px 32px; }






}













@media (max-width: 600px) {






  .map-city-cards { grid-template-columns: 1fr 1fr; }






  .services-grid { grid-template-columns: 1fr; }






  .process-timeline { grid-template-columns: 1fr; }






  .advantages-grid { grid-template-columns: 1fr; }






  .team-grid { grid-template-columns: 1fr; }






  .cases-grid { grid-template-columns: 1fr; }






  .contact-form { padding: 28px; }






  .cf-row { flex-direction: column; }






  .osr-item { padding: 8px 32px; }






  .sb-div { display: none; }






  .sb-item { padding: 16px 24px; width: 50%; }






  .footer-grid { gap: 32px; }






}















/* ──────────────────────────────────────────────────────────


   WECHAT SERVICE CARD


   ────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────

   WECHAT INLINE (Compact)

   ────────────────────────────────────────────────────────── */

.wechat-inline {

  display: flex;

  align-items: center;

  gap: 24px;

  margin-top: 32px;

  padding: 20px 24px;

  background: #f0f4ff;

  border: 1.5px solid #dde5ff;

  border-radius: 14px;

}

/* Wechat QR section */
.wi-qr-box {
  flex-shrink: 0;
  cursor: zoom-in;
}

.wi-qr {
  width: 120px;
  height: 120px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 1px solid #e0e7ff;
}

.wi-text {
  flex: 1;
}

.wi-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #0052dc;
  background: #eef2ff;
  border: 1px solid #c7d7ff;
  border-radius: 50px;
  padding: 2px 10px;
  margin-bottom: 6px;
  letter-spacing: .5px;
}

.wi-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
  line-height: 1.3;
}

.wi-sub {
  font-size: 12.5px;
  color: #666;
  line-height: 1.4;
}














.wi-actions {

  display: flex;

  gap: 8px;

  margin-top: 4px;

}

.wi-btn {

  font-size: 12px;

  font-weight: 600;

  color: #0052dc;

  background: #eef2ff;

  border: 1px solid #c7d7ff;

  border-radius: 50px;

  padding: 4px 12px;

}

@media (max-width: 600px) {

  .wechat-inline { flex-direction: column; text-align: center; padding: 16px; gap: 14px; }

  .wi-actions { justify-content: center; }

}






.crsf-item svg path:first-child { stroke: #0052dc; }
.crsf-item svg circle { stroke: #0052dc; }
.crsf-item svg rect { stroke: #0052dc; }

 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--c-text-2);
  font-weight: 500;
}


/* ── Contact Right: Phone Mockup + Testimonials ── */
.contact-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* TikTok Phone Mockup */
.cr-phone-wrap {
  position: relative;
  display: flex;
  justify-content: flex-start;
  padding: 28px 20px 20px 20px;
  flex: 1;
  min-height: 0;
  margin-left: 152px;
}

.cr-phone-mockup {
  width: 290px;
  background: #0a0a0a;
  border-radius: 32px;
  padding: 10px;
  box-shadow:
    0 24px 64px rgba(0,0,0,.30),
    0 4px 16px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.06);
  position: relative;
  z-index: 2;
}

.cr-phone-notch {
  width: 72px;
  height: 22px;
  background: #0a0a0a;
  border-radius: 0 0 14px 14px;
  margin: 0 auto 6px;
  position: relative;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.04);
  border-top: none;
}

.cr-phone-screen {
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
  border-radius: 22px;
  overflow: hidden;
  padding: 14px;
  min-height: 420px;
  position: relative;
}

.cp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cp-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #fe2c55, #00f2ea);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.cp-info { flex: 1; }
.cp-name { display: block; font-size: 12px; font-weight: 700; color: #fff; }
.cp-sub { display: block; font-size: 10px; color: rgba(255,255,255,.5); }

.cp-follow {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #fe2c55;
  border-radius: 4px;
  padding: 4px 9px;
}

.cp-video-area {
  height: 200px;
  background:
    linear-gradient(135deg, #1a0533 0%, #0a2540 60%, #1a0533 100%),
    radial-gradient(ellipse at 30% 40%, rgba(254,44,85,.2) 0%, transparent 60%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.cp-video-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 7px, rgba(255,255,255,.025) 7px, rgba(255,255,255,.025) 8px
  );
}

.cp-play-icon {
  font-size: 28px;
  color: rgba(255,255,255,.12);
  z-index: 1;
}

.cp-stats-row {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 10px;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.cp-caption {
  font-size: 11px;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
}

/* Floating badges */
.cp-float-badge {
  position: absolute;
  background: #fff;
  border-radius: 50px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,.06);
}

.cp-badge-1 {
  bottom: 14px;
  left: 0;
  animation: floatLeft 3s ease-in-out infinite;
}

.cp-badge-2 {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation: floatRight 3s ease-in-out infinite;
  animation-delay: 1s;
}

.cp-badge-3 {
  top: 16px;
  right: 0;
  animation: floatRight 3s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes floatLeft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes floatRight {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 5px)); }
}

/* Testimonial Cards */
.cr-testimonials {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cr-test-card {
  background: #fff;
  border: 1px solid rgba(0,82,220,.08);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  transition: box-shadow .2s, transform .2s;
}

.cr-test-card:hover {
  box-shadow: 0 6px 24px rgba(0,82,220,.10);
  transform: translateY(-2px);
}

.ctc-stars {
  color: #fbbf24;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.ctc-text {
  font-size: 13.5px;
  color: var(--c-text-2);
  line-height: 1.7;
  margin-bottom: 12px;
  font-style: italic;
}

.ctc-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ctca-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #eef2ff, #dde5ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.ctca-name { font-size: 13px; font-weight: 700; color: var(--c-text); }
.ctca-company { font-size: 11px; color: var(--c-text-3); }

/* Mobile responsive - contact right */
@media (max-width: 900px) {
  .cr-phone-mockup { width: 180px; border-radius: 28px; }
  .cr-phone-notch { width: 64px; height: 20px; }
  .cr-phone-screen { min-height: 260px; border-radius: 18px; padding: 12px; }
  .cp-video-area { height: 140px; }
  .cp-float-badge { font-size: 10px; padding: 6px 10px; }
  .cp-badge-3 { top: 12px; }
}

@media (max-width: 768px) {
  .cr-phone-wrap { padding: 20px 12px 12px; }
  .cr-phone-mockup { width: 160px; border-radius: 24px; padding: 8px; }
  .cr-phone-screen { min-height: 230px; border-radius: 16px; padding: 10px; }
  .cp-header { gap: 6px; }
  .cp-avatar { width: 28px; height: 28px; font-size: 14px; }
  .cp-info { flex: 1; }
  .cp-name { font-size: 11px; }
  .cp-sub { font-size: 9px; }
  .cp-follow { font-size: 9px; padding: 3px 7px; }
  .cp-video-area { height: 120px; border-radius: 12px; }
  .cp-play-icon { font-size: 22px; }
  .cp-stats-row { font-size: 9px; gap: 6px; right: 8px; bottom: 8px; }
  .cp-caption { font-size: 10px; }
  .cp-float-badge { font-size: 9px; padding: 5px 8px; gap: 4px; border-radius: 40px; }
  .cp-badge-1 { bottom: 8px; left: -4px; }
  .cp-badge-2 { right: -4px; }
  .cp-badge-3 { top: 8px; right: -4px; }
  .cr-test-card { padding: 14px 16px; }
  .ctc-stars { font-size: 12px; margin-bottom: 6px; }
  .ctc-text { font-size: 12.5px; margin-bottom: 10px; }
  .ctca-avatar { width: 28px; height: 28px; font-size: 13px; }
  .ctca-name { font-size: 12px; }
  .ctca-company { font-size: 10px; }
}

@media (max-width: 480px) {
  .cr-phone-mockup { width: 140px; border-radius: 20px; padding: 6px; }
  .cr-phone-notch { width: 56px; height: 18px; border-radius: 0 0 10px 10px; }
  .cr-phone-screen { min-height: 200px; border-radius: 14px; padding: 8px; }
  .cp-video-area { height: 100px; border-radius: 10px; }
  .cr-phone-wrap { padding: 16px 8px 8px; }
  .cp-float-badge { font-size: 8px; padding: 4px 7px; }
}


/* Wechat QR Lightbox Modal */
.wqr-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75);
  z-index: 99999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(4px);
}

.wqr-close {
  position: absolute;
  top: 18px; right: 24px;
  color: #fff;
  font-size: 36px;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  transition: opacity .2s;
}
.wqr-close:hover { opacity: .6; }

.wqr-img {
  width: 300px;
  height: 300px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  border: 3px solid #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.wqr-tip {
  color: rgba(255,255,255,.75);
  font-size: 14px;
  margin: 0;
}


/* Phone reviews scrolling */
.cp-reviews-wrap {
  height: 280px;
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}

.cp-reviews-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: scrollReviews 18s linear infinite;
  animation-delay: 2s;
}

.cp-reviews-inner:hover {
  animation-play-state: paused;
}

@keyframes scrollReviews {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-600px); }
}

.cp-review-item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
  flex-shrink: 0;
}

.cpr-stars {
  color: #ffd60a;
  font-size: 10px;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.cpr-text {
  font-size: 11.5px;
  color: rgba(255,255,255,.92);
  line-height: 1.5;
  margin-bottom: 5px;
}

.cpr-author {
  font-size: 10px;
  color: rgba(255,255,255,.5);
}

/* Hide original cr-testimonials (now empty) */
.cr-testimonials {
  display: none;
}

/* ──────────────────────────────────────────────────────────
   ABOUT COMPANY
   ────────────────────────────────────────────────────────── */
.about-section {
  position: relative;
  background: var(--c-bg);
  padding: var(--section-py) 0;
  overflow: hidden;
}
.about-section::before {
  content: '';
  position: absolute;
  top: 20%;
  left: -150px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* 核心数据网格 */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 72px;
}
.ast-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  transition: all var(--t-base);
}
.ast-card:hover {
  border-color: var(--c-accent);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.12);
}
.ast-card.ast-highlight {
  background: linear-gradient(135deg, var(--c-accent) 0%, #818cf8 100%);
  border-color: transparent;
  color: #fff;
}
.ast-card.ast-highlight .ast-icon {
  color: rgba(255,255,255,0.9);
}
.ast-card.ast-highlight .ast-num,
.ast-card.ast-highlight .ast-label,
.ast-card.ast-highlight .ast-desc {
  color: #fff;
}
.ast-card.ast-highlight .ast-desc {
  color: rgba(255,255,255,0.8);
}
.ast-icon {
  color: var(--c-accent);
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}
.ast-num {
  font-family: var(--font-en);
  font-size: 40px;
  font-weight: 800;
  color: var(--c-text);
  line-height: 1;
  letter-spacing: -1px;
}
.ast-unit {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-accent);
}
.ast-card.ast-highlight .ast-unit {
  color: #fff;
}
.ast-label {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.ast-desc {
  font-size: 12px;
  color: var(--c-text-3);
  line-height: 1.5;
}

/* 发展历程时间线 */
.about-timeline {
  margin-bottom: 72px;
}
.at-title {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 40px;
  text-align: center;
}
.at-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 40px;
}
.at-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
}
.at-dot {
  width: 16px;
  height: 16px;
  background: var(--c-accent);
  border-radius: 50%;
  margin-bottom: 12px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}
.at-item.at-start .at-dot,
.at-item.at-end .at-dot {
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.3);
}
.at-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.at-year {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: 4px;
}
.at-event {
  font-size: 13px;
  color: var(--c-text-2);
  line-height: 1.5;
  max-width: 160px;
}
.at-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--c-accent), rgba(59, 130, 246, 0.3));
  margin: 0 16px;
  margin-bottom: 40px;
  max-width: 120px;
}

/* 全球布局 */
.about-locations {
  margin-bottom: 72px;
}
.al-title, .as-title {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 24px;
  text-align: center;
}
.al-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.al-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  transition: all var(--t-base);
}
.al-card:hover {
  border-color: var(--c-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}
.al-card.al-hq {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, #fff 100%);
  border-color: var(--c-accent);
}
.al-icon {
  color: var(--c-accent);
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
}
.al-card.al-hq .al-icon {
  color: var(--c-accent);
}
.al-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--c-accent);
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.al-city {
  display: block;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 4px;
}
.al-role {
  display: block;
  font-size: 12px;
  color: var(--c-text-3);
}

/* 业务范围 */
.about-services {
  margin-bottom: 72px;
}
.as-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.as-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 24px 16px;
  transition: all var(--t-base);
}
.as-card:hover {
  border-color: var(--c-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}
.as-icon {
  color: var(--c-accent);
  display: flex;
  justify-content: center;
}
.as-card span {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
}

/* 愿景区块 */
.about-vision {
  background: linear-gradient(135deg, #f0f2ff 0%, #f5f7ff 50%, #eef1ff 100%);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: 24px;
  padding: 48px;
}
.av-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.av-icon {
  color: var(--c-accent);
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
.av-title {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 16px;
}
.av-text {
  font-size: 16px;
  color: var(--c-text-2);
  line-height: 1.9;
}
.av-text strong {
  color: var(--c-accent);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 1100px) {
  .about-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .al-grid { grid-template-columns: repeat(3, 1fr); }
  .as-grid { grid-template-columns: repeat(3, 1fr); }
  .at-track { flex-direction: column; gap: 16px; padding: 0; }
  .at-line { display: none; }
  .at-item { min-width: auto; }
}
@media (max-width: 900px) {
  .al-grid { grid-template-columns: repeat(2, 1fr); }
  .as-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .about-stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ast-card { padding: 20px 12px; }
  .ast-num { font-size: 32px; }
  .ast-label { font-size: 11px; }
  .ast-desc { font-size: 11px; }
  .al-grid { grid-template-columns: 1fr 1fr; }
  .as-grid { grid-template-columns: repeat(2, 1fr); }
  .as-card { padding: 20px 12px; }
  .about-vision { padding: 32px 24px; }
  .av-title { font-size: 20px; }
  .av-text { font-size: 14px; }
}

/* 手机端适配 (480px以下) */
@media (max-width: 480px) {
  .about-stats-grid { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 12px; 
  }
  .ast-card { 
    padding: 16px 10px; 
    text-align: center;
  }
  .ast-icon { margin-bottom: 10px; }
  .ast-icon svg { width: 24px; height: 24px; }
  .ast-num { font-size: 24px; }
  .ast-label { font-size: 10px; }
  .ast-desc { font-size: 10px; line-height: 1.4; }
  .ast-unit { font-size: 12px; }
  
  .at-title { font-size: 18px; }
  .at-item { padding-left: 24px; }
  .at-dot { left: 0; width: 12px; height: 12px; }
  .at-year { font-size: 16px; }
  .at-event { font-size: 13px; }
  
  .about-timeline { padding: 0 16px; }
}