body.elementor-page-15802{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-6c2ecb4 *//* ===== TOSUNLUX EV Charging Page - CSS v3 =====
   全宽布局 | 电脑端左右8% | 手机端左右5%
   所有样式限定在 .tsn-page 作用域内
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

@keyframes tsnFadeUp    { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes tsnSlideRight{ from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes tsnPulse     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes tsnFloat     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ================================================================
   根容器 — 隔离主题污染
   ================================================================ */
.tsn-page {
  --tsn-teal:        #00b4d8;
  --tsn-teal-dark:   #0097b2;
  --tsn-teal-light:  #e0f7fa;
  --tsn-dark:        #1a1a2e;
  --tsn-gray-600:    #555555;
  --tsn-gray-200:    #e5e7eb;
  --tsn-gray-100:    #f5f7fa;
  --tsn-white:       #ffffff;
  --tsn-radius:      12px;
  --tsn-shadow:      0 4px 24px rgba(0,0,0,.06);
  --tsn-shadow-lg:   0 12px 40px rgba(0,0,0,.1);

  /* 全宽，左右8% */
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;

  font-family: 'DM Sans', sans-serif !important;
  color: #1a1a2e !important;
  line-height: 1.7 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* 全局 box-sizing */
.tsn-page *, .tsn-page *::before, .tsn-page *::after {
  box-sizing: border-box !important;
}

/* ── 强力重置：消灭主题绿色污染 ── */
.tsn-page h1,.tsn-page h2,.tsn-page h3,
.tsn-page h4,.tsn-page h5,.tsn-page h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.25 !important;
  color: #1a1a2e !important;
  margin: 0 !important; padding: 0 !important;
  background: none !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.tsn-page p  { margin: 0 !important; padding: 0 !important; color: inherit !important; background: none !important; }
.tsn-page ul,.tsn-page ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.tsn-page a  { text-decoration: none !important; color: inherit !important; transition: all .3s; background: none !important; }
.tsn-page img{ max-width: 100% !important; display: block !important; }

/* section 重置：消灭主题给 section 加的背景/边距 */
.tsn-page section {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
}

/* svg 颜色不被主题篡改 */
.tsn-page svg { flex-shrink: 0; }

/* ================================================================
   容器：全宽 section，内容区左右 8%，居中对齐
   ================================================================ */
.tsn-page .tsn-inner {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 8% !important;
  padding-right: 8% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* section 内间距 */
.tsn-page .tsn-section      { padding-top: 80px !important; padding-bottom: 80px !important; }
.tsn-page .tsn-section-gray { background: #f5f7fa !important; }
.tsn-page .tsn-section-teal { background: linear-gradient(135deg,#006d77,#00b4d8,#48cae4) !important; color: #fff !important; }
.tsn-page .tsn-section-dark { background: #1a1a2e !important; color: #fff !important; }

/* ── Section 标题组 ── */
.tsn-page .tsn-section-label {
  display: inline-block; font-size: .8rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: #00b4d8 !important; margin-bottom: 12px;
  background: none !important;
}
.tsn-page .tsn-section-label-white { color: rgba(255,255,255,.75) !important; }
.tsn-page .tsn-section-title {
  font-size: clamp(1.75rem,4vw,2.5rem) !important;
  font-weight: 800 !important; margin-bottom: 16px !important;
}
.tsn-page .tsn-section-subtitle {
  font-size: 1.05rem !important; color: #555 !important;
  max-width: 700px; line-height: 1.8 !important;
}
.tsn-page .tsn-text-center { text-align: center !important; }
.tsn-page .tsn-mx-auto     { margin-left: auto !important; margin-right: auto !important; }

/* ================================================================
   按钮
   ================================================================ */
.tsn-page .tsn-btn {
  display: inline-flex !important; align-items: center !important; gap: 8px;
  padding: 14px 32px; border-radius: 50px; font-weight: 600;
  font-size: .95rem; transition: all .35s; cursor: pointer;
  border: none; font-family: 'Plus Jakarta Sans',sans-serif; line-height: 1;
  text-decoration: none !important;
}
.tsn-page .tsn-btn svg { width: 18px; height: 18px; }
.tsn-page .tsn-btn-primary         { background: #00b4d8 !important; color: #fff !important; }
.tsn-page .tsn-btn-primary:hover   { background: #0097b2 !important; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,180,216,.35); color: #fff !important; }
.tsn-page .tsn-btn-outline         { background: transparent !important; color: #00b4d8 !important; border: 2px solid #00b4d8 !important; }
.tsn-page .tsn-btn-outline:hover   { background: #00b4d8 !important; color: #fff !important; transform: translateY(-2px); }
.tsn-page .tsn-btn-white           { background: #fff !important; color: #00b4d8 !important; }
.tsn-page .tsn-btn-white:hover     { background: #e0f7fa !important; transform: translateY(-2px); color: #00b4d8 !important; }
.tsn-page .tsn-btn-outline-white   { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.5) !important; }
.tsn-page .tsn-btn-outline-white:hover { background: #fff !important; color: #00b4d8 !important; border-color: #fff !important; }
.tsn-page .tsn-btn-link {
  font-size: .82rem; font-weight: 700; color: #00b4d8 !important;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: auto; text-decoration: none !important;
  background: none !important;
}
.tsn-page .tsn-btn-link:hover { gap: 8px; }
.tsn-page .tsn-btn-link svg { width: 14px; height: 14px; }

/* ================================================================
   HERO
   ================================================================ */
.tsn-page .tsn-hero {
  position: relative !important;
  min-height: 600px;
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(135deg,#f0fdfa 0%,#e0f7fa 40%,#fff 100%) !important;
  overflow: hidden;
  padding-top: 100px !important;
  padding-bottom: 80px !important;
  width: 100% !important;
}
.tsn-page .tsn-hero::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle,rgba(0,180,216,.12),transparent 70%);
  pointer-events: none; z-index: 0;
}
.tsn-page .tsn-hero::after {
  content: ''; position: absolute; bottom: -80px; left: 20%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle,rgba(0,180,216,.08),transparent 70%);
  pointer-events: none; z-index: 0;
}
.tsn-page .tsn-hero .tsn-inner {
  display: grid;
  /* 左栏45% 右栏55%，右侧更大更充实 */
  grid-template-columns: 45fr 55fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100% !important;
}
.tsn-page .tsn-hero-content { animation: tsnSlideRight .8s ease both; }

.tsn-page .tsn-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff !important; border: 1px solid #e5e7eb !important;
  border-radius: 50px; padding: 6px 16px; font-size: .8rem;
  font-weight: 600; color: #00b4d8 !important; margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.tsn-page .tsn-hero-badge span {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #00b4d8 !important; animation: tsnPulse 2s infinite;
}
.tsn-page .tsn-hero h1 {
  font-size: clamp(2rem,4.5vw,3rem) !important; font-weight: 800 !important;
  color: #1a1a2e !important; line-height: 1.15 !important; margin-bottom: 20px !important;
}
.tsn-page .tsn-hero h1 em { font-style: normal !important; color: #00b4d8 !important; }
.tsn-page .tsn-hero > .tsn-inner > .tsn-hero-content > p {
  font-size: 1.1rem !important; color: #555 !important;
  margin-bottom: 32px !important; max-width: 520px; line-height: 1.8 !important;
}
.tsn-page .tsn-hero-ctas  { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.tsn-page .tsn-hero-trust { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.tsn-page .tsn-hero-trust-item { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: #555 !important; font-weight: 500; }
.tsn-page .tsn-hero-trust-item svg { width: 16px; height: 16px; color: #00b4d8; flex-shrink: 0; }

.tsn-page .tsn-hero-visual { display: flex; justify-content: center; align-items: center; animation: tsnFadeUp 1s ease both; animation-delay: .3s; }
.tsn-page .tsn-hero-visual-box {
  width: 100%;
  /* 取消 aspect-ratio 限制，改用 padding 撑开，让右侧更饱满 */
  background: linear-gradient(135deg,rgba(0,180,216,.1),rgba(0,180,216,.03)) !important;
  border-radius: 24px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 20px;
  padding: 36px 32px 40px;
  border: 1px solid rgba(0,180,216,.18);
  box-shadow: 0 8px 40px rgba(0,180,216,.08);
}
.tsn-page .tsn-hero-icon-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; width: 100%;
}
/* 图标卡片更大 */
.tsn-page .tsn-hero-icon-card {
  background: #fff !important; border-radius: 14px; padding: 24px 12px 20px;
  text-align: center; box-shadow: 0 2px 16px rgba(0,0,0,.06);
  transition: all .3s; border: 1px solid #e5e7eb !important;
  display: block !important; color: #1a1a2e !important; text-decoration: none !important;
}
.tsn-page .tsn-hero-icon-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,180,216,.15); border-color: #00b4d8 !important; }
.tsn-page .tsn-hero-icon-card svg  { width: 40px; height: 40px; color: #00b4d8; margin: 0 auto 10px; display: block; }
.tsn-page .tsn-hero-icon-card span { font-size: .78rem; font-weight: 700; color: #1a1a2e !important; display: block; line-height: 1.3; }

/* ================================================================
   PAIN POINTS
   ================================================================ */
.tsn-page .tsn-pain-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; }
.tsn-page .tsn-pain-card {
  background: #fff !important; border-radius: 12px; padding: 32px 28px;
  border: 1px solid #e5e7eb !important; transition: all .35s;
  position: relative; overflow: hidden; box-shadow: none !important;
}
.tsn-page .tsn-pain-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: #00b4d8 !important; transform: scaleY(0); transform-origin: top; transition: transform .35s;
}
.tsn-page .tsn-pain-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.1) !important; border-color: #00b4d8 !important; }
.tsn-page .tsn-pain-card:hover::before { transform: scaleY(1); }
.tsn-page .tsn-pain-num  { font-size: 2.5rem; font-weight: 800; color: #00b4d8 !important; opacity: .15; position: absolute; top: 16px; right: 20px; line-height: 1; }
.tsn-page .tsn-pain-icon { width: 48px; height: 48px; border-radius: 12px; background: #e0f7fa !important; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.tsn-page .tsn-pain-icon svg { width: 24px; height: 24px; color: #00b4d8 !important; }
.tsn-page .tsn-pain-card h3 { font-size: 1.05rem !important; font-weight: 700 !important; margin-bottom: 10px !important; color: #1a1a2e !important; }
.tsn-page .tsn-pain-card p  { font-size: .9rem !important; color: #555 !important; line-height: 1.7 !important; }

/* ================================================================
   SOLUTION
   ================================================================ */
.tsn-page .tsn-solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 48px; }
.tsn-page .tsn-solution-props { display: flex; flex-direction: column; gap: 20px; }
.tsn-page .tsn-solution-prop { display: flex; gap: 16px; align-items: flex-start; }
.tsn-page .tsn-solution-prop-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 10px; background: #e0f7fa !important; display: flex; align-items: center; justify-content: center; }
.tsn-page .tsn-solution-prop-icon svg { width: 22px; height: 22px; color: #00b4d8 !important; }
.tsn-page .tsn-solution-prop h4 { font-size: .95rem !important; font-weight: 700 !important; margin-bottom: 4px !important; color: #1a1a2e !important; }
.tsn-page .tsn-solution-prop p  { font-size: .88rem !important; color: #555 !important; line-height: 1.65 !important; }
.tsn-page .tsn-solution-stats  { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.tsn-page .tsn-stat-card { background: #fff !important; border-radius: 12px; padding: 28px 24px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,.06); border: 1px solid #e5e7eb !important; transition: all .3s; }
.tsn-page .tsn-stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.1) !important; }
.tsn-page .tsn-stat-num   { font-size: 2.2rem; font-weight: 800; color: #00b4d8 !important; display: block; margin-bottom: 4px; }
.tsn-page .tsn-stat-label { font-size: .82rem; color: #555 !important; font-weight: 500; }

/* ================================================================
   ARCHITECTURE
   ================================================================ */
.tsn-page .tsn-arch-flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 48px; position: relative; }
.tsn-page .tsn-arch-flow::before { content: ''; position: absolute; top: 24px; left: 5%; right: 5%; height: 3px; background: linear-gradient(90deg,#00b4d8,#48cae4) !important; z-index: 0; }
.tsn-page .tsn-arch-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; }
.tsn-page .tsn-arch-stage-num { width: 48px; height: 48px; border-radius: 50%; background: #00b4d8 !important; color: #fff !important; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; margin-bottom: 14px; box-shadow: 0 4px 16px rgba(0,180,216,.3); }
.tsn-page .tsn-arch-stage h4 { font-size: .95rem !important; font-weight: 700 !important; margin-bottom: 10px !important; min-height: 44px; display: flex; align-items: center; color: #1a1a2e !important; }
.tsn-page .tsn-arch-products { background: #fff !important; border-radius: 8px; padding: 16px 14px; width: 100%; box-shadow: 0 4px 24px rgba(0,0,0,.06); border: 1px solid #e5e7eb !important; }
.tsn-page .tsn-arch-products a { display: block !important; font-size: .8rem; color: #00b4d8 !important; font-weight: 600; padding: 5px 0; border-bottom: 1px solid #e5e7eb !important; transition: all .2s; text-decoration: none !important; background: none !important; }
.tsn-page .tsn-arch-products a:last-child { border-bottom: none !important; }
.tsn-page .tsn-arch-products a:hover { color: #0097b2 !important; padding-left: 6px; }

/* ================================================================
   PRODUCTS
   ================================================================ */
.tsn-page .tsn-products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 48px; }
.tsn-page .tsn-product-card { background: #fff !important; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.06); border: 1px solid #e5e7eb !important; transition: all .35s; display: flex; flex-direction: column; text-decoration: none !important; color: #1a1a2e !important; }
.tsn-page .tsn-product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.1) !important; border-color: #00b4d8 !important; }
.tsn-page .tsn-product-card-img { height: 180px; background: #f5f7fa !important; display: flex; align-items: center; justify-content: center; padding: 16px; position: relative; overflow: hidden; }
.tsn-page .tsn-product-card-img img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform .4s; }
.tsn-page .tsn-product-card:hover .tsn-product-card-img img { transform: scale(1.08); }
.tsn-page .tsn-product-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; background: #fff !important; }
.tsn-page .tsn-product-card-cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #00b4d8 !important; margin-bottom: 6px; }
.tsn-page .tsn-product-card h4 { font-size: .92rem !important; font-weight: 700 !important; margin-bottom: 8px !important; line-height: 1.3 !important; color: #1a1a2e !important; }
.tsn-page .tsn-product-card p  { font-size: .78rem !important; color: #555 !important; line-height: 1.6 !important; margin-bottom: 14px !important; flex: 1; }

/* ================================================================
   SCENARIOS
   ================================================================ */
.tsn-page .tsn-scenarios-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; }
.tsn-page .tsn-scenario-card { border-radius: 12px; overflow: hidden; background: #fff !important; box-shadow: 0 4px 24px rgba(0,0,0,.06); border: 1px solid #e5e7eb !important; transition: all .35s; }
.tsn-page .tsn-scenario-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,.1) !important; }
.tsn-page .tsn-scenario-header { height: 200px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background-size: cover !important; background-position: center !important; }
.tsn-page .tsn-scenario-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.45)) !important; z-index: 1; }
.tsn-page .tsn-sc1 { background-image: url('https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=600&q=80') !important; }
.tsn-page .tsn-sc2 { background-image: url('https://images.unsplash.com/photo-1570125909232-eb263c188f7e?w=600&q=80') !important; }
.tsn-page .tsn-sc3 { background-image: url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=600&q=80') !important; }
.tsn-page .tsn-sc4 { background-image: url('https://images.unsplash.com/photo-1647166545674-ce28ce93bdca?w=600&q=80') !important; }
.tsn-page .tsn-sc5 { background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=600&q=80') !important; }
.tsn-page .tsn-sc6 { background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80') !important; }
.tsn-page .tsn-scenario-header svg { width: 64px; height: 64px; color: rgba(255,255,255,.85) !important; position: relative; z-index: 2; filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.tsn-page .tsn-scenario-tag { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,.2) !important; backdrop-filter: blur(8px); border-radius: 50px; padding: 4px 14px; font-size: .72rem; font-weight: 700; color: #fff !important; letter-spacing: .5px; z-index: 2; }
.tsn-page .tsn-scenario-body { padding: 24px; background: #fff !important; }
.tsn-page .tsn-scenario-body h3 { font-size: 1.05rem !important; font-weight: 700 !important; margin-bottom: 6px !important; color: #1a1a2e !important; }
.tsn-page .tsn-scenario-sub   { font-size: .8rem; color: #00b4d8 !important; font-weight: 600; margin-bottom: 12px; display: block; }
.tsn-page .tsn-scenario-body p { font-size: .85rem !important; color: #555 !important; line-height: 1.65 !important; margin-bottom: 16px !important; }
.tsn-page .tsn-scenario-products { display: flex; flex-wrap: wrap; gap: 6px; }
.tsn-page .tsn-scenario-products a { display: inline-block !important; font-size: .72rem; background: #e0f7fa !important; color: #0097b2 !important; padding: 4px 10px; border-radius: 50px; font-weight: 600; transition: all .2s; text-decoration: none !important; }
.tsn-page .tsn-scenario-products a:hover { background: #00b4d8 !important; color: #fff !important; }

/* ================================================================
   WHY CHOOSE
   ================================================================ */
.tsn-page .tsn-why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; }
.tsn-page .tsn-why-card { background: rgba(255,255,255,.08) !important; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15) !important; border-radius: 12px; padding: 32px 28px; transition: all .35s; }
.tsn-page .tsn-why-card:hover { background: rgba(255,255,255,.16) !important; transform: translateY(-4px); }
.tsn-page .tsn-why-card-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.15) !important; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.tsn-page .tsn-why-card-icon svg { width: 26px; height: 26px; color: #fff !important; }
.tsn-page .tsn-why-card h3 { font-size: 1.05rem !important; font-weight: 700 !important; margin-bottom: 10px !important; color: #fff !important; }
.tsn-page .tsn-why-card p  { font-size: .88rem !important; color: rgba(255,255,255,.8) !important; line-height: 1.7 !important; }

/* ================================================================
   SUPPORT
   ================================================================ */
.tsn-page .tsn-support-timeline { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 48px; position: relative; }
.tsn-page .tsn-support-timeline::before { content: ''; position: absolute; top: 36px; left: 15%; right: 15%; height: 3px; background: #e5e7eb !important; }
.tsn-page .tsn-support-phase { text-align: center; position: relative; }
.tsn-page .tsn-support-phase-icon { width: 72px; height: 72px; border-radius: 50%; background: #e0f7fa !important; border: 3px solid #00b4d8 !important; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; position: relative; z-index: 1; }
.tsn-page .tsn-support-phase-icon svg { width: 32px; height: 32px; color: #00b4d8 !important; }
.tsn-page .tsn-support-phase h3 { font-size: 1.1rem !important; font-weight: 700 !important; margin-bottom: 16px !important; color: #1a1a2e !important; }
.tsn-page .tsn-support-items { text-align: left; }
.tsn-page .tsn-support-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.tsn-page .tsn-support-item svg { width: 18px; height: 18px; color: #00b4d8 !important; flex-shrink: 0; margin-top: 2px; }
.tsn-page .tsn-support-item p { font-size: .88rem !important; color: #555 !important; line-height: 1.6 !important; }
.tsn-page .tsn-support-item strong { color: #1a1a2e !important; }

/* ================================================================
   FAQ
   ================================================================ */
.tsn-page .tsn-faq-list { max-width: 900px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 12px; }
.tsn-page .tsn-faq-item { background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 12px; overflow: hidden; transition: all .3s; box-shadow: none !important; }
.tsn-page .tsn-faq-item.active { border-color: #00b4d8 !important; box-shadow: 0 4px 16px rgba(0,180,216,.1) !important; }
.tsn-page .tsn-faq-q { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 16px; background: #fff !important; }
.tsn-page .tsn-faq-q h3 { font-size: .95rem !important; font-weight: 700 !important; flex: 1; color: #1a1a2e !important; }
.tsn-page .tsn-faq-toggle { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: #e0f7fa !important; display: flex; align-items: center; justify-content: center; transition: all .3s; }
.tsn-page .tsn-faq-item.active .tsn-faq-toggle { background: #00b4d8 !important; transform: rotate(45deg); }
.tsn-page .tsn-faq-toggle svg { width: 16px; height: 16px; color: #00b4d8 !important; transition: color .3s; }
.tsn-page .tsn-faq-item.active .tsn-faq-toggle svg { color: #fff !important; }
.tsn-page .tsn-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.tsn-page .tsn-faq-item.active .tsn-faq-a { max-height: 500px; }
.tsn-page .tsn-faq-a-inner { padding: 0 24px 20px; font-size: .9rem !important; color: #555 !important; line-height: 1.8 !important; background: #fff !important; }
.tsn-page .tsn-faq-a-inner a { color: #00b4d8 !important; font-weight: 600; text-decoration: none !important; }

/* ================================================================
   CTA
   ================================================================ */
.tsn-page .tsn-cta-section { padding-top: 80px !important; padding-bottom: 80px !important; position: relative; overflow: hidden; }
.tsn-page .tsn-cta-section::before { content: ''; position: absolute; top: -60%; right: -20%; width: 600px; height: 600px; border-radius: 50%; background: rgba(255,255,255,.05) !important; pointer-events: none; }
.tsn-page .tsn-cta-section::after  { content: ''; position: absolute; bottom: -40%; left: -10%; width: 500px; height: 500px; border-radius: 50%; background: rgba(255,255,255,.04) !important; pointer-events: none; }
.tsn-page .tsn-cta-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; }
.tsn-page .tsn-cta-inner h2 { font-size: clamp(1.6rem,4vw,2.4rem) !important; font-weight: 800 !important; margin-bottom: 16px !important; color: #fff !important; }
.tsn-page .tsn-cta-inner > p  { font-size: 1.05rem !important; color: rgba(255,255,255,.82) !important; margin-bottom: 36px !important; line-height: 1.8 !important; }
.tsn-page .tsn-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.tsn-page .tsn-cta-trust  { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.tsn-page .tsn-cta-trust-item { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: rgba(255,255,255,.78) !important; font-weight: 500; }
.tsn-page .tsn-cta-trust-item svg { width: 18px; height: 18px; color: #e0f7fa !important; }
.tsn-page .tsn-cta-contact { display: flex; gap: 32px; justify-content: center; margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.15) !important; flex-wrap: wrap; }
.tsn-page .tsn-cta-contact a { display: flex !important; align-items: center; gap: 8px; color: rgba(255,255,255,.82) !important; font-size: .9rem; font-weight: 500; transition: color .3s; text-decoration: none !important; background: none !important; }
.tsn-page .tsn-cta-contact a:hover { color: #fff !important; }
.tsn-page .tsn-cta-contact a svg { width: 18px; height: 18px; }

/* ================================================================
   RESPONSIVE — 平板 ≤1024px
   ================================================================ */
@media (max-width: 1024px) {
  .tsn-page .tsn-inner { padding-left: 6% !important; padding-right: 6% !important; }

  .tsn-page .tsn-hero .tsn-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .tsn-page .tsn-hero > .tsn-inner > .tsn-hero-content > p { margin-left: auto !important; margin-right: auto !important; }
  .tsn-page .tsn-hero-ctas  { justify-content: center; }
  .tsn-page .tsn-hero-trust { justify-content: center; }
  .tsn-page .tsn-hero-visual { max-width: 560px; margin: 0 auto; }

  .tsn-page .tsn-pain-grid,
  .tsn-page .tsn-scenarios-grid,
  .tsn-page .tsn-why-grid     { grid-template-columns: repeat(2,1fr); }
  .tsn-page .tsn-products-grid { grid-template-columns: repeat(2,1fr); }
  .tsn-page .tsn-solution-grid { grid-template-columns: 1fr; }
  .tsn-page .tsn-arch-flow     { grid-template-columns: repeat(2,1fr); gap: 24px; }
  .tsn-page .tsn-arch-flow::before { display: none; }
}

/* ================================================================
   RESPONSIVE — 手机 ≤640px
   ================================================================ */
@media (max-width: 640px) {
  .tsn-page .tsn-inner { padding-left: 5% !important; padding-right: 5% !important; }

  .tsn-page .tsn-section { padding-top: 56px !important; padding-bottom: 56px !important; }

  .tsn-page .tsn-pain-grid,
  .tsn-page .tsn-scenarios-grid,
  .tsn-page .tsn-why-grid,
  .tsn-page .tsn-support-timeline,
  .tsn-page .tsn-products-grid { grid-template-columns: 1fr; }

  .tsn-page .tsn-arch-flow     { grid-template-columns: 1fr; }
  .tsn-page .tsn-solution-stats { grid-template-columns: repeat(2,1fr); }
  .tsn-page .tsn-cta-trust { flex-direction: column; align-items: center; }
  .tsn-page .tsn-cta-contact { flex-direction: column; align-items: center; gap: 16px; }

  .tsn-page .tsn-hero { padding-top: 60px !important; padding-bottom: 60px !important; }
  .tsn-page .tsn-hero h1 { font-size: clamp(1.8rem,8vw,2.4rem) !important; }
  .tsn-page .tsn-hero-icon-card { padding: 16px 8px 14px; }
  .tsn-page .tsn-hero-icon-card svg { width: 32px; height: 32px; }
  .tsn-page .tsn-products-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 400px) {
  .tsn-page .tsn-products-grid { grid-template-columns: 1fr; }
  .tsn-page .tsn-hero-icon-grid { gap: 8px; }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-e59b8be */<style>
/* 修正了原代码第一行的语法错误，并增加了 ID 前缀防止样式冲突 */
#tosun-custom-page *, 
#tosun-custom-page *::before, 
#tosun-custom-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#tosun-custom-page {
  --teal: #00b4d8;
  --teal-dark: #0097b2;
  --teal-light: #e0f7fa;
  --teal-50: #f0fdfa;
  --dark: #1a1a2e;
  --dark-2: #2d2d44;
  --gray-600: #555;
  --gray-400: #999;
  --gray-200: #e5e7eb;
  --gray-100: #f5f7fa;
  --white: #fff;
  --green: #2e8b57;
  --orange: #e8712b;
  --red-soft: #ff6b6b;
  --section-pad: 80px 0;
  --container: 1200px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.1);
  font-family: 'DM Sans', sans-serif;
  color: var(--dark);
  line-height: 1.7;
}

#tosun-custom-page h1, #tosun-custom-page h2, #tosun-custom-page h3, 
#tosun-custom-page h4, #tosun-custom-page h5 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1.25;
}

#tosun-custom-page a { text-decoration: none; color: inherit; transition: all .3s; }
#tosun-custom-page img { max-width: 100%; display: block; }
#tosun-custom-page .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* 动画定义 */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideRight{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

#tosun-custom-page .fade-up{animation:fadeUp .7s ease both}
#tosun-custom-page .fade-in{animation:fadeIn .6s ease both}
#tosun-custom-page .slide-right{animation:slideRight .7s ease both}

/* 按钮、卡片及所有原样式逻辑 (已增加 ID 限制) */
#tosun-custom-page .btn { display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:50px;font-weight:600;font-size:.95rem;transition:all .35s;cursor:pointer;border:none;font-family:'Plus Jakarta Sans',sans-serif }
#tosun-custom-page .btn-primary { background:var(--teal);color:var(--white); }
#tosun-custom-page .btn-outline { background:transparent;color:var(--teal);border:2px solid var(--teal); }
#tosun-custom-page .section { padding:var(--section-pad); }
#tosun-custom-page .section-gray { background:var(--gray-100); }
#tosun-custom-page .section-teal { background:linear-gradient(135deg,#006d77,var(--teal),#48cae4); color:var(--white); }
#tosun-custom-page .section-dark { background:var(--dark); color:var(--white); }

/* 原生布局网格 */
#tosun-custom-page .hero { position:relative;min-height:600px;display:flex;align-items:center;background:linear-gradient(135deg,#f0fdfa 0%,#e0f7fa 40%,#fff 100%);overflow:hidden;padding:100px 0 80px }
#tosun-custom-page .pain-grid, #tosun-custom-page .scenarios-grid, #tosun-custom-page .why-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px }
#tosun-custom-page .products-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px }
#tosun-custom-page .arch-flow { display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;position:relative }

/* 保持产品、卡片等所有细节样式... */
#tosun-custom-page .product-card { background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--gray-200);transition:all .35s;display:flex;flex-direction:column;text-decoration:none; }
#tosun-custom-page .faq-item.active .faq-a { max-height:400px; }
#tosun-custom-page .faq-a { max-height:0;overflow:hidden;transition:max-height .4s ease; }

/* 响应式媒体查询 */
@media(max-width:1024px){
  #tosun-custom-page .hero .container{grid-template-columns:1fr;text-align:center}
  #tosun-custom-page .pain-grid, #tosun-custom-page .scenarios-grid, #tosun-custom-page .why-grid, #tosun-custom-page .products-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  #tosun-custom-page .pain-grid, #tosun-custom-page .scenarios-grid, #tosun-custom-page .why-grid, #tosun-custom-page .products-grid{grid-template-columns:1fr}
}
</style>/* End custom CSS */
/* Start custom CSS *//* ===== TOSUNLUX EV Charging Page - Custom CSS =====
   粘贴到: WordPress 外观 → 自定义CSS 或 Elementor 页面设置 → 自定义CSS
   ================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#00b4d8;
  --teal-dark:#0097b2;
  --teal-light:#e0f7fa;
  --teal-50:#f0fdfa;
  --dark:#1a1a2e;
  --dark-2:#2d2d44;
  --gray-600:#555;
  --gray-400:#999;
  --gray-200:#e5e7eb;
  --gray-100:#f5f7fa;
  --white:#fff;
  --green:#2e8b57;
  --orange:#e8712b;
  --red-soft:#ff6b6b;
  --section-pad:80px 0;
  --container:1200px;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 4px 24px rgba(0,0,0,.06);
  --shadow-lg:0 12px 40px rgba(0,0,0,.1);
}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideRight{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.tsn-fade-up{animation:fadeUp .7s ease both}
.tsn-fade-in{animation:fadeIn .6s ease both}
.tsn-slide-right{animation:slideRight .7s ease both}

.tsn-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:50px;font-weight:600;font-size:.95rem;transition:all .35s;cursor:pointer;border:none;font-family:'Plus Jakarta Sans',sans-serif}
.tsn-btn-primary{background:var(--teal);color:var(--white)}
.tsn-btn-primary:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,180,216,.35)}
.tsn-btn-outline{background:transparent;color:var(--teal);border:2px solid var(--teal)}
.tsn-btn-outline:hover{background:var(--teal);color:var(--white);transform:translateY(-2px)}
.tsn-btn-white{background:var(--white);color:var(--teal)}
.tsn-btn-white:hover{background:var(--teal-light);transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,255,255,.25)}
.tsn-btn-outline-white{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.5)}
.tsn-btn-outline-white:hover{background:var(--white);color:var(--teal);border-color:var(--white)}
.tsn-btn svg{width:18px;height:18px}

.tsn-section{padding:var(--section-pad)}
.tsn-section-gray{background:var(--gray-100)}
.tsn-section-teal{background:linear-gradient(135deg,#006d77,var(--teal),#48cae4);color:var(--white)}
.tsn-section-dark{background:var(--dark);color:var(--white)}
.tsn-section-label{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.tsn-section-label-white{color:rgba(255,255,255,.75)}
.tsn-section-title{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;margin-bottom:16px}
.tsn-section-subtitle{font-size:1.05rem;color:var(--gray-600);max-width:700px;line-height:1.8}
.tsn-section-subtitle-white{color:rgba(255,255,255,.85)}
.tsn-text-center{text-align:center}
.tsn-mx-auto{margin-left:auto;margin-right:auto}

/* HERO */
.tsn-hero{position:relative;min-height:600px;display:flex;align-items:center;background:linear-gradient(135deg,#f0fdfa 0%,#e0f7fa 40%,#fff 100%);overflow:hidden;padding:100px 0 80px}
.tsn-hero::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(0,180,216,.12),transparent 70%);pointer-events:none}
.tsn-hero::after{content:'';position:absolute;bottom:-80px;left:20%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(0,180,216,.08),transparent 70%);pointer-events:none}
.tsn-hero .tsn-container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.tsn-hero-content{animation:slideRight .8s ease both}
.tsn-hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1px solid var(--gray-200);border-radius:50px;padding:6px 16px;font-size:.8rem;font-weight:600;color:var(--teal);margin-bottom:24px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.tsn-hero-badge span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite}
.tsn-hero h1{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;color:var(--dark);line-height:1.15;margin-bottom:20px}
.tsn-hero h1 em{font-style:normal;color:var(--teal)}
.tsn-hero p{font-size:1.1rem;color:var(--gray-600);margin-bottom:32px;max-width:520px;line-height:1.8}
.tsn-hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.tsn-hero-trust{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.tsn-hero-trust-item{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--gray-600);font-weight:500}
.tsn-hero-trust-item svg{width:16px;height:16px;color:var(--teal);flex-shrink:0}
.tsn-hero-visual{position:relative;display:flex;justify-content:center;align-items:center;animation:fadeUp 1s ease both;animation-delay:.3s}
.tsn-hero-visual-box{width:100%;max-width:480px;aspect-ratio:1;background:linear-gradient(135deg,rgba(0,180,216,.08),rgba(0,180,216,.02));border-radius:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:40px;border:1px solid rgba(0,180,216,.15)}
.tsn-hero-icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}
.tsn-hero-icon-card{background:var(--white);border-radius:var(--radius-sm);padding:20px 12px;text-align:center;box-shadow:var(--shadow);transition:all .3s;border:1px solid var(--gray-200);display:block;color:inherit;text-decoration:none}
.tsn-hero-icon-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--teal)}
.tsn-hero-icon-card svg{width:32px;height:32px;color:var(--teal);margin:0 auto 8px;display:block}
.tsn-hero-icon-card span{font-size:.72rem;font-weight:600;color:var(--dark);display:block;line-height:1.3}

/* PAIN POINTS */
.tsn-pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.tsn-pain-card{background:var(--white);border-radius:var(--radius);padding:32px 28px;border:1px solid var(--gray-200);transition:all .35s;position:relative;overflow:hidden}
.tsn-pain-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--teal);transform:scaleY(0);transform-origin:top;transition:transform .35s}
.tsn-pain-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--teal)}
.tsn-pain-card:hover::before{transform:scaleY(1)}
.tsn-pain-num{font-size:2.5rem;font-weight:800;color:var(--teal);opacity:.15;position:absolute;top:16px;right:20px;line-height:1}
.tsn-pain-icon{width:48px;height:48px;border-radius:12px;background:var(--teal-light);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tsn-pain-icon svg{width:24px;height:24px;color:var(--teal)}
.tsn-pain-card h3{font-size:1.05rem;font-weight:700;margin-bottom:10px}
.tsn-pain-card p{font-size:.9rem;color:var(--gray-600);line-height:1.7}

/* SOLUTION */
.tsn-solution-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:48px}
.tsn-solution-props{display:flex;flex-direction:column;gap:20px}
.tsn-solution-prop{display:flex;gap:16px;align-items:flex-start}
.tsn-solution-prop-icon{width:44px;height:44px;min-width:44px;border-radius:10px;background:var(--teal-light);display:flex;align-items:center;justify-content:center}
.tsn-solution-prop-icon svg{width:22px;height:22px;color:var(--teal)}
.tsn-solution-prop h4{font-size:.95rem;font-weight:700;margin-bottom:4px}
.tsn-solution-prop p{font-size:.88rem;color:var(--gray-600);line-height:1.65}
.tsn-solution-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tsn-stat-card{background:var(--white);border-radius:var(--radius);padding:28px 24px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--gray-200);transition:all .3s}
.tsn-stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tsn-stat-num{font-size:2.2rem;font-weight:800;color:var(--teal);display:block;margin-bottom:4px}
.tsn-stat-label{font-size:.82rem;color:var(--gray-600);font-weight:500}

/* ARCHITECTURE */
.tsn-arch-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;position:relative}
.tsn-arch-flow::before{content:'';position:absolute;top:24px;left:5%;right:5%;height:3px;background:linear-gradient(90deg,var(--teal),#48cae4);z-index:0}
.tsn-arch-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px}
.tsn-arch-stage-num{width:48px;height:48px;border-radius:50%;background:var(--teal);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;margin-bottom:14px;box-shadow:0 4px 16px rgba(0,180,216,.3)}
.tsn-arch-stage h4{font-size:.95rem;font-weight:700;margin-bottom:10px;min-height:44px;display:flex;align-items:center}
.tsn-arch-products{background:var(--white);border-radius:var(--radius-sm);padding:16px 14px;width:100%;box-shadow:var(--shadow);border:1px solid var(--gray-200)}
.tsn-arch-products a{display:block;font-size:.8rem;color:var(--teal);font-weight:600;padding:5px 0;border-bottom:1px solid var(--gray-200);transition:all .2s;text-decoration:none}
.tsn-arch-products a:last-child{border:none}
.tsn-arch-products a:hover{color:var(--teal-dark);padding-left:6px}

/* PRODUCTS */
.tsn-products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.tsn-product-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--gray-200);transition:all .35s;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tsn-product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--teal)}
.tsn-product-card-img{height:180px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;padding:16px;position:relative;overflow:hidden}
.tsn-product-card-img img{max-height:100%;max-width:100%;object-fit:contain;transition:transform .4s}
.tsn-product-card:hover .tsn-product-card-img img{transform:scale(1.08)}
.tsn-product-card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.tsn-product-card-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--teal);margin-bottom:6px}
.tsn-product-card h4{font-size:.92rem;font-weight:700;margin-bottom:8px;line-height:1.3}
.tsn-product-card p{font-size:.78rem;color:var(--gray-600);line-height:1.6;margin-bottom:14px;flex:1}
.tsn-btn-link{font-size:.82rem;font-weight:700;color:var(--teal);display:inline-flex;align-items:center;gap:4px;margin-top:auto;text-decoration:none}
.tsn-btn-link:hover{gap:8px}
.tsn-btn-link svg{width:14px;height:14px}

/* SCENARIOS */
.tsn-scenarios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.tsn-scenario-card{border-radius:var(--radius);overflow:hidden;background:var(--white);box-shadow:var(--shadow);border:1px solid var(--gray-200);transition:all .35s}
.tsn-scenario-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.tsn-scenario-header{height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-size:cover;background-position:center}
.tsn-scenario-header::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.45));z-index:1}
.tsn-sc1{background-image:url('https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=600&q=80');background-color:#006d77}
.tsn-sc2{background-image:url('https://images.unsplash.com/photo-1570125909232-eb263c188f7e?w=600&q=80');background-color:#1a535c}
.tsn-sc3{background-image:url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=600&q=80');background-color:#2d6a4f}
.tsn-sc4{background-image:url('https://images.unsplash.com/photo-1647166545674-ce28ce93bdca?w=600&q=80');background-color:#e76f51}
.tsn-sc5{background-image:url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=600&q=80');background-color:#457b9d}
.tsn-sc6{background-image:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80');background-color:#6d597a}
.tsn-scenario-header svg{width:64px;height:64px;color:rgba(255,255,255,.85);position:relative;z-index:2;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}
.tsn-scenario-tag{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);border-radius:50px;padding:4px 14px;font-size:.72rem;font-weight:700;color:var(--white);letter-spacing:.5px;z-index:2}
.tsn-scenario-body{padding:24px}
.tsn-scenario-body h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.tsn-scenario-sub{font-size:.8rem;color:var(--teal);font-weight:600;margin-bottom:12px}
.tsn-scenario-body p{font-size:.85rem;color:var(--gray-600);line-height:1.65;margin-bottom:16px}
.tsn-scenario-products{display:flex;flex-wrap:wrap;gap:6px}
.tsn-scenario-products a{display:inline-block;font-size:.72rem;background:var(--teal-light);color:var(--teal-dark);padding:4px 10px;border-radius:50px;font-weight:600;transition:all .2s;text-decoration:none}
.tsn-scenario-products a:hover{background:var(--teal);color:var(--white)}

/* WHY CHOOSE */
.tsn-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.tsn-why-card{background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:32px 28px;transition:all .35s}
.tsn-why-card:hover{background:rgba(255,255,255,.14);transform:translateY(-4px)}
.tsn-why-card-icon{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.tsn-why-card-icon svg{width:26px;height:26px;color:var(--white)}
.tsn-why-card h3{font-size:1.05rem;font-weight:700;margin-bottom:10px;color:var(--white)}
.tsn-why-card p{font-size:.88rem;color:rgba(255,255,255,.75);line-height:1.7}

/* SUPPORT */
.tsn-support-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px;position:relative}
.tsn-support-timeline::before{content:'';position:absolute;top:36px;left:15%;right:15%;height:3px;background:var(--gray-200)}
.tsn-support-phase{text-align:center;position:relative}
.tsn-support-phase-icon{width:72px;height:72px;border-radius:50%;background:var(--teal-light);border:3px solid var(--teal);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;position:relative;z-index:1}
.tsn-support-phase-icon svg{width:32px;height:32px;color:var(--teal)}
.tsn-support-phase h3{font-size:1.1rem;font-weight:700;margin-bottom:16px}
.tsn-support-items{text-align:left}
.tsn-support-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.tsn-support-item svg{width:18px;height:18px;color:var(--teal);flex-shrink:0;margin-top:2px}
.tsn-support-item p{font-size:.88rem;color:var(--gray-600);line-height:1.6}

/* FAQ */
.tsn-faq-list{max-width:800px;margin:48px auto 0;display:flex;flex-direction:column;gap:12px}
.tsn-faq-item{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;transition:all .3s}
.tsn-faq-item.active{border-color:var(--teal);box-shadow:0 4px 16px rgba(0,180,216,.1)}
.tsn-faq-q{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:16px}
.tsn-faq-q h3{font-size:.95rem;font-weight:700;flex:1}
.tsn-faq-toggle{width:32px;height:32px;min-width:32px;border-radius:50%;background:var(--teal-light);display:flex;align-items:center;justify-content:center;transition:all .3s}
.tsn-faq-item.active .tsn-faq-toggle{background:var(--teal);transform:rotate(45deg)}
.tsn-faq-toggle svg{width:16px;height:16px;color:var(--teal);transition:color .3s}
.tsn-faq-item.active .tsn-faq-toggle svg{color:var(--white)}
.tsn-faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.tsn-faq-item.active .tsn-faq-a{max-height:400px}
.tsn-faq-a-inner{padding:0 24px 20px;font-size:.9rem;color:var(--gray-600);line-height:1.8}

/* CTA */
.tsn-cta-section{padding:80px 0;position:relative;overflow:hidden}
.tsn-cta-section::before{content:'';position:absolute;top:-60%;right:-20%;width:600px;height:600px;border-radius:50%;background:rgba(255,255,255,.05)}
.tsn-cta-section::after{content:'';position:absolute;bottom:-40%;left:-10%;width:500px;height:500px;border-radius:50%;background:rgba(255,255,255,.04)}
.tsn-cta-inner{position:relative;z-index:1;text-align:center;max-width:700px;margin:0 auto}
.tsn-cta-inner h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;margin-bottom:16px}
.tsn-cta-inner p{font-size:1.05rem;color:rgba(255,255,255,.8);margin-bottom:36px;line-height:1.8}
.tsn-cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.tsn-cta-trust{display:flex;gap:32px;justify-content:center;flex-wrap:wrap}
.tsn-cta-trust-item{display:flex;align-items:center;gap:8px;font-size:.85rem;color:rgba(255,255,255,.75);font-weight:500}
.tsn-cta-trust-item svg{width:18px;height:18px;color:var(--teal-light)}
.tsn-cta-contact{display:flex;gap:32px;justify-content:center;margin-top:32px;padding-top:32px;border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.tsn-cta-contact a{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:.9rem;font-weight:500;transition:color .3s;text-decoration:none}
.tsn-cta-contact a:hover{color:var(--white)}
.tsn-cta-contact a svg{width:18px;height:18px}

/* CONTAINER */
.tsn-container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* RESPONSIVE */
@media(max-width:1024px){
  .tsn-hero .tsn-container{grid-template-columns:1fr;text-align:center}
  .tsn-hero p{margin-left:auto;margin-right:auto}
  .tsn-hero-ctas{justify-content:center}
  .tsn-hero-trust{justify-content:center}
  .tsn-hero-visual{display:none}
  .tsn-pain-grid,.tsn-scenarios-grid,.tsn-why-grid{grid-template-columns:repeat(2,1fr)}
  .tsn-products-grid{grid-template-columns:repeat(2,1fr)}
  .tsn-solution-grid{grid-template-columns:1fr}
  .tsn-arch-flow{grid-template-columns:repeat(2,1fr);gap:24px}
  .tsn-arch-flow::before{display:none}
}
@media(max-width:640px){
  .tsn-pain-grid,.tsn-scenarios-grid,.tsn-why-grid,.tsn-support-timeline,.tsn-products-grid{grid-template-columns:1fr}
  .tsn-arch-flow{grid-template-columns:1fr}
  .tsn-solution-stats{grid-template-columns:repeat(2,1fr)}
  .tsn-section{padding:56px 0}
  .tsn-cta-trust{flex-direction:column;align-items:center}
}/* End custom CSS */