/* ========== Reset & Base ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333;
  background: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
a { text-decoration: none; color: inherit; }

/* Section Header */
.section-header { text-align: center; margin-bottom: 56px; }
.section-header h2 { font-size: 32px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; }
.section-header p { font-size: 16px; color: #666; }
.section-header.light h2 { color: #fff; }
.section-header.light p { color: rgba(255,255,255,0.8); }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #ea580c, #f97316);
  color: #fff; padding: 14px 36px; border-radius: 10px;
  font-size: 16px; font-weight: 600; border: none; cursor: pointer;
  transition: all 0.3s; box-shadow: 0 4px 16px rgba(249,115,22,0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(249,115,22,0.4); }
.btn-primary.btn-sm { padding: 10px 24px; font-size: 14px; }
.btn-primary.btn-lg { padding: 16px 44px; font-size: 18px; }

.btn-link { color: rgba(255,255,255,0.85); font-size: 15px; font-weight: 500; transition: color 0.3s; }
.btn-link:hover { color: #fff; }

.btn-outline-orange {
  display: inline-flex; align-items: center;
  border: 2px solid #f97316; color: #f97316;
  padding: 14px 36px; border-radius: 10px; font-size: 16px; font-weight: 600;
  transition: all 0.3s; background: transparent;
}
.btn-outline-orange:hover { background: #f97316; color: #fff; }

/* ========== Hero ========== */
.hero-section {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4338ca 60%, #6366f1 100%);
  padding: 100px 0 80px;
  position: relative; overflow: hidden;
}

.hero-particles { position: absolute; inset: 0; pointer-events: none; }

.particle {
  position: absolute; border-radius: 50%; opacity: 0.06;
}
.p1 { width: 500px; height: 500px; background: #f97316; top: -150px; right: -100px; filter: blur(80px); }
.p2 { width: 400px; height: 400px; background: #818cf8; bottom: -100px; left: -80px; filter: blur(60px); }
.p3 { width: 300px; height: 300px; background: #fbbf24; top: 60%; left: 40%; filter: blur(90px); }
.p4 { width: 200px; height: 200px; background: #f97316; bottom: 20%; right: 10%; filter: blur(70px); }

.hero-content { display: flex; align-items: center; gap: 60px; position: relative; z-index: 1; }
.hero-text { flex: 1; }

.hero-badge {
  display: inline-block;
  background: rgba(249,115,22,0.2); color: #fdba74;
  padding: 6px 18px; border-radius: 24px; font-size: 14px; font-weight: 500;
  margin-bottom: 20px; border: 1px solid rgba(249,115,22,0.3);
}

.hero-title {
  font-size: 52px; font-weight: 800; color: #fff;
  margin-bottom: 18px; line-height: 1.15; letter-spacing: -1px;
}

.hero-subtitle {
  font-size: 17px; color: rgba(255,255,255,0.8);
  margin-bottom: 28px; line-height: 1.8; max-width: 520px;
}

.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }

.hero-tags span {
  background: rgba(255,255,255,0.1); color: #fff;
  padding: 6px 16px; border-radius: 20px; font-size: 13px;
  border: 1px solid rgba(255,255,255,0.08);
}

.hero-actions { display: flex; align-items: center; gap: 24px; }

/* Hero Illustration */
.hero-visual { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 380px; }

.hero-illustration { position: relative; width: 340px; height: 340px; }

.center-hex {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}

.hex-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px dashed rgba(249,115,22,0.4);
  animation: spinSlow 20s linear infinite;
}

@keyframes spinSlow { to { transform: rotate(360deg); } }

.hex-icon { font-size: 44px; z-index: 1; }

.orbit-card {
  position: absolute;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 14px;
  padding: 10px 14px; display: flex; align-items: center; gap: 8px;
  color: #fff; font-size: 13px; font-weight: 500;
  transition: all 0.3s; animation: floatOrbit 3s ease-in-out infinite;
}

.orbit-card:hover { background: rgba(255,255,255,0.2); transform: scale(1.05); }

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

.oc-sf { top: 10px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.oc-jd { top: 80px; right: 10px; animation-delay: 0.5s; }
.oc-yt { bottom: 80px; right: 10px; animation-delay: 1s; }
.oc-zto { bottom: 10px; left: 50%; transform: translateX(-50%); animation-delay: 1.5s; }
.oc-sto { bottom: 80px; left: 10px; animation-delay: 2s; }
.oc-yd { top: 80px; left: 10px; animation-delay: 2.5s; }

.oc-logo {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
}

.oc-sf .oc-logo { background: #dc2626; }
.oc-jd .oc-logo { background: #dc2626; }
.oc-yt .oc-logo { background: #2563eb; }
.oc-zto .oc-logo { background: #16a34a; }
.oc-sto .oc-logo { background: #2563eb; }
.oc-yd .oc-logo { background: #ea580c; }

/* ========== Stats ========== */
.stats-section {
  padding: 48px 0; background: #fff; border-bottom: 1px solid #f0f0f0;
}

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.stat-item {
  display: flex; align-items: center; gap: 16px;
  padding: 20px; background: #fff7ed; border-radius: 14px;
  border: 1px solid #fed7aa; transition: all 0.3s;
}

.stat-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(249,115,22,0.08); }

.stat-icon { font-size: 32px; flex-shrink: 0; }
.stat-info { display: flex; flex-direction: column; }
.stat-num { font-size: 28px; font-weight: 800; color: #ea580c; line-height: 1.2; }
.stat-label { font-size: 13px; color: #666; margin-top: 2px; }

/* ========== Advantages ========== */
.adv-section { padding: 80px 0; background: #fff; }

.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.adv-card {
  background: #fff; border-radius: 16px; padding: 32px 24px;
  border: 1px solid #e5e7eb; transition: all 0.3s;
  position: relative; overflow: hidden;
}

.adv-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #ea580c, #f97316); opacity: 0; transition: opacity 0.3s;
}

.adv-card:hover {
  transform: translateY(-4px); box-shadow: 0 12px 40px rgba(249,115,22,0.1);
  border-color: #fdba74;
}

.adv-card:hover::after { opacity: 1; }

.adv-icon {
  width: 56px; height: 56px; border-radius: 14px;
  margin-bottom: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}

.icon-aggregate { background: linear-gradient(135deg, #fee2e2, #fecaca); }
.icon-aggregate::after { content: '🔗'; }
.icon-discount { background: linear-gradient(135deg, #fff7ed, #fed7aa); }
.icon-discount::after { content: '🏷️'; }
.icon-commission { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.icon-commission::after { content: '💰'; }
.icon-api { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.icon-api::after { content: '⚙️'; }
.icon-settle { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
.icon-settle::after { content: '💳'; }
.icon-service { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); }
.icon-service::after { content: '🎧'; }

.adv-card h3 { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
.adv-card p { font-size: 14px; color: #888; line-height: 1.7; }

/* ========== Partner Section ========== */
.partner-section { padding: 80px 0; background: #f9fafb; }

.partner-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; }

.partner-tab {
  padding: 10px 28px; border: none; background: #fff;
  border-radius: 24px; font-size: 15px; font-weight: 500;
  color: #666; cursor: pointer; transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.partner-tab:hover { color: #ea580c; }
.partner-tab.active {
  background: #ea580c; color: #fff;
  box-shadow: 0 4px 16px rgba(234,88,12,0.3);
}

.partner-panel { display: none; animation: fadeUp 0.4s ease; }
.partner-panel.active { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.partner-card {
  background: #fff; border-radius: 16px; padding: 24px 20px;
  border: 1px solid #e5e7eb; text-align: center; transition: all 0.3s;
  position: relative;
}

.partner-card:hover {
  transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  border-color: #fdba74;
}

.pc-logo {
  width: 56px; height: 56px; border-radius: 14px;
  margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff;
}

.pc-logo.sf { background: linear-gradient(135deg, #dc2626, #ef4444); }
.pc-logo.jd { background: linear-gradient(135deg, #dc2626, #f87171); }
.pc-logo.yt { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.pc-logo.zto { background: linear-gradient(135deg, #16a34a, #22c55e); }
.pc-logo.sto { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.pc-logo.yd { background: linear-gradient(135deg, #ea580c, #f97316); }
.pc-logo.ems { background: linear-gradient(135deg, #059669, #10b981); }
.pc-logo.db { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.pc-logo.jt { background: linear-gradient(135deg, #dc2626, #f87171); }
.pc-logo.ky { background: linear-gradient(135deg, #0891b2, #06b6d4); }

.partner-card h4 { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }

.pc-discount { font-size: 14px; color: #888; margin-bottom: 8px; }
.pc-discount strong { color: #ea580c; font-size: 20px; font-weight: 800; }

.partner-card p { font-size: 12px; color: #999; line-height: 1.6; margin-bottom: 12px; }

.pc-tag {
  display: inline-block; padding: 3px 12px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
}

.partner-card.premium .pc-tag { background: #fef3c7; color: #92400e; }
.partner-card.standard .pc-tag { background: #dcfce7; color: #166534; }
.partner-card.specialty .pc-tag { background: #e0f2fe; color: #1e40af; }

/* ========== Price Section ========== */
.price-section { padding: 80px 0; background: #fff; }

.price-table-wrap { overflow-x: auto; }

.price-table {
  width: 100%; border-collapse: collapse;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.price-table thead { background: #1e1b4b; }

.price-table th {
  padding: 16px 20px; color: #fff; font-size: 14px;
  font-weight: 600; text-align: center;
}

.price-table td {
  padding: 16px 20px; text-align: center; font-size: 14px;
  border-bottom: 1px solid #f3f4f6;
}

.price-table tbody tr:hover { background: #fff7ed; }

.pt-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  font-size: 11px; font-weight: 800; color: #fff; margin-right: 8px;
  vertical-align: middle;
}

.pt-logo.sf { background: #dc2626; }
.pt-logo.jd { background: #dc2626; }
.pt-logo.yt { background: #2563eb; }
.pt-logo.zto { background: #16a34a; }
.pt-logo.sto { background: #2563eb; }
.pt-logo.yd { background: #ea580c; }

.pt-official { color: #999; text-decoration: line-through; }
.pt-cps { color: #ea580c; font-weight: 700; font-size: 16px; }
.pt-save { color: #16a34a; font-weight: 600; }
.pt-commission { color: #7c3aed; font-weight: 600; }

/* ========== Scene Section ========== */
.scene-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #1e1b4b, #312e81, #4338ca);
}

.scene-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; }

.scene-tab {
  padding: 10px 28px; border: none;
  background: rgba(255,255,255,0.08); border-radius: 24px;
  font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.6);
  cursor: pointer; transition: all 0.3s;
}

.scene-tab:hover { color: #fff; background: rgba(255,255,255,0.15); }

.scene-tab.active {
  background: #f97316; color: #fff;
  box-shadow: 0 4px 16px rgba(249,115,22,0.4);
}

.scene-panel { display: none; animation: fadeUp 0.4s ease; }
.scene-panel.active { display: block; }

.scene-layout { display: flex; gap: 48px; align-items: center; }
.scene-info { flex: 1; }

.scene-info h3 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 24px; }

.scene-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }

.scene-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: rgba(255,255,255,0.85);
}

.sl-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: #f97316; color: #fff;
  border-radius: 50%; font-size: 12px; flex-shrink: 0;
}

.scene-income {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px; padding: 14px 20px;
  background: rgba(249,115,22,0.15); border-radius: 12px;
  border: 1px solid rgba(249,115,22,0.3);
}

.si-label { font-size: 14px; color: rgba(255,255,255,0.7); }
.si-value { font-size: 22px; font-weight: 800; color: #fdba74; }

.scene-demo { flex: 0 0 300px; }

/* Phone Mockup */
.phone-mockup {
  width: 280px; background: #0f0f23; border-radius: 24px;
  padding: 12px; margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  border: 2px solid rgba(255,255,255,0.1);
}

.pm-status {
  display: flex; justify-content: space-between; padding: 4px 12px;
  font-size: 11px; color: rgba(255,255,255,0.5);
}

.pm-header {
  text-align: center; padding: 10px;
  background: linear-gradient(135deg, #ea580c, #f97316);
  border-radius: 12px 12px 0 0; color: #fff;
  font-size: 14px; font-weight: 700;
}

.pm-body { background: #1a1a2e; border-radius: 0 0 12px 12px; padding: 12px; }

.pm-input {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
  color: rgba(255,255,255,0.5); font-size: 12px;
}

.pm-weight {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
  color: rgba(255,255,255,0.5); font-size: 12px; text-align: center;
}

.pm-result { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.pm-express {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; color: rgba(255,255,255,0.7);
}

.pm-elogo {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
}

.pm-elogo.sf { background: #dc2626; }
.pm-elogo.zto { background: #16a34a; }

.pm-save { margin-left: auto; color: #22c55e; font-weight: 600; font-size: 11px; }

.pm-btn {
  text-align: center; padding: 10px;
  background: linear-gradient(135deg, #ea580c, #f97316);
  border-radius: 8px; color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}

.pm-btn:hover { opacity: 0.9; }

/* Stats in phone */
.pm-stat-row { display: flex; gap: 8px; margin-bottom: 8px; }

.pm-stat-box {
  flex: 1; background: rgba(255,255,255,0.06);
  border-radius: 8px; padding: 10px; text-align: center;
}

.pm-stat-box strong { display: block; font-size: 16px; color: #fdba74; font-weight: 700; }
.pm-stat-box span { font-size: 11px; color: rgba(255,255,255,0.5); }

.pm-chart-placeholder {
  display: flex; align-items: flex-end; gap: 6px;
  height: 80px; padding: 8px; background: rgba(255,255,255,0.04);
  border-radius: 8px; margin-bottom: 10px;
}

.chart-bar {
  flex: 1; background: linear-gradient(to top, #ea580c, #fdba74);
  border-radius: 4px 4px 0 0; min-height: 8px; transition: height 0.5s;
}

/* Orders in phone */
.pm-order {
  background: rgba(255,255,255,0.06); border-radius: 8px;
  padding: 10px; margin-bottom: 8px;
}

.pm-order-id { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.pm-order-info { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 4px; }

.pm-order-price { display: flex; align-items: center; gap: 8px; }
.pm-old { font-size: 11px; color: rgba(255,255,255,0.3); text-decoration: line-through; }
.pm-new { font-size: 14px; color: #fdba74; font-weight: 700; }
.pm-save-tag { font-size: 10px; background: #16a34a; color: #fff; padding: 1px 6px; border-radius: 4px; font-weight: 600; }

/* Code Mockup */
.code-mockup {
  background: #0f0f23; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  border: 2px solid rgba(255,255,255,0.1);
}

.cm-header {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: rgba(255,255,255,0.05);
}

.cm-dot { width: 10px; height: 10px; border-radius: 50%; }
.cm-dot.red { background: #ef4444; }
.cm-dot.yellow { background: #fbbf24; }
.cm-dot.green { background: #22c55e; }

.cm-filename { margin-left: 8px; font-size: 12px; color: rgba(255,255,255,0.5); }

.cm-body { padding: 16px; }

.cm-code {
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 12px; line-height: 1.8; color: #e2e8f0;
  white-space: pre-wrap; tab-size: 2;
}

.cc-keyword { color: #c084fc; }
.cc-string { color: #86efac; }
.cc-comment { color: #64748b; }
.cc-num { color: #fdba74; }

/* ========== Commission Section ========== */
.commission-section { padding: 80px 0; background: #fff; }

.commission-flow { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 48px; }

.comm-node {
  text-align: center; padding: 28px 24px;
  background: #fff; border-radius: 16px; border: 1px solid #e5e7eb;
  flex: 1; max-width: 260px; transition: all 0.3s;
}

.comm-node:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(249,115,22,0.1); border-color: #fdba74; }

.comm-level {
  display: inline-block; background: #1e1b4b; color: #fff;
  width: 40px; height: 40px; line-height: 40px; border-radius: 10px;
  font-size: 14px; font-weight: 800; margin-bottom: 10px;
}

.comm-node h3 { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }

.comm-rate { font-size: 36px; font-weight: 800; color: #ea580c; margin-bottom: 8px; }

.comm-node p { font-size: 13px; color: #888; line-height: 1.6; }

.comm-arrow { font-size: 24px; color: #ea580c; flex-shrink: 0; font-weight: 700; }

.comm-example {
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 16px;
  padding: 28px 32px; max-width: 700px; margin: 0 auto;
}

.ce-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
.ce-desc { font-size: 14px; color: #666; margin-bottom: 20px; line-height: 1.6; }

.ce-calc { display: flex; flex-direction: column; gap: 10px; }

.ce-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: #fff; border-radius: 10px;
  font-size: 14px;
}

.ce-item span { color: #666; }
.ce-item strong { color: #ea580c; font-weight: 700; }

.ce-item.ce-total { background: #1e1b4b; }
.ce-item.ce-total span { color: rgba(255,255,255,0.8); }
.ce-item.ce-total strong { color: #fdba74; font-size: 18px; }

/* ========== Flow Section ========== */
.flow-section { padding: 80px 0; background: #f9fafb; }

.flow-steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; }

.flow-step {
  text-align: center; padding: 28px 24px; width: 200px; position: relative;
}

.fs-num {
  position: absolute; top: 8px; left: 16px;
  font-size: 13px; font-weight: 700; color: #fdba74;
}

.fs-icon { font-size: 36px; margin-bottom: 12px; }

.flow-step h3 { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
.flow-step p { font-size: 13px; color: #888; line-height: 1.6; }

.flow-connector {
  width: 40px; height: 2px; background: linear-gradient(90deg, #fdba74, #ea580c);
  margin-top: 50px; flex-shrink: 0;
}

/* ========== CTA Section ========== */
.cta-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #1e1b4b, #4338ca);
}

.cta-content { text-align: center; }

.cta-content h2 { font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.cta-content p { font-size: 17px; color: rgba(255,255,255,0.8); margin-bottom: 32px; }

.cta-actions { display: flex; justify-content: center; gap: 16px; margin-bottom: 24px; }
.cta-trust { display: flex; justify-content: center; gap: 24px; }
.cta-trust span { font-size: 14px; color: rgba(255,255,255,0.6); }

/* ========== Floating Bar ========== */
.floating-bar {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 999;
}

.float-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border-radius: 12px; padding: 12px 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1); cursor: pointer;
  transition: all 0.3s; min-width: 64px;
}

.float-item:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.15); }
.fi-icon { font-size: 20px; }
.float-item span { font-size: 11px; color: #555; white-space: nowrap; font-weight: 500; }

/* ========== Responsive ========== */
@media (max-width: 1024px) {
  .hero-content { flex-direction: column; text-align: center; }
  .hero-subtitle { max-width: 100%; }
  .hero-tags { justify-content: center; }
  .hero-actions { justify-content: center; flex-wrap: wrap; }
  .hero-visual { width: 100%; min-height: 300px; }
  .hero-illustration { width: 280px; height: 280px; }
  .adv-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .scene-layout { flex-direction: column; }
  .scene-demo { flex: 0 0 auto; width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .commission-flow { flex-wrap: wrap; }
  .comm-arrow { display: none; }
  .comm-node { max-width: 100%; flex-basis: calc(33% - 16px); }
  .flow-steps { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .flow-connector { display: none; }
}

@media (max-width: 768px) {
  .hero-title { font-size: 36px; }
  .adv-grid { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .comm-node { flex-basis: 100%; }
  .partner-tabs, .scene-tabs { flex-wrap: wrap; justify-content: center; }
  .floating-bar { right: 8px; }
  .float-item span { font-size: 10px; }
  .price-table { font-size: 12px; }
  .price-table th, .price-table td { padding: 10px 12px; }
}