:root {
  --qing-50: #f0f9f6;
  --qing-100: #d9f0e8;
  --qing-200: #b3e0d0;
  --qing-300: #7ec9b0;
  --qing-400: #4aad8e;
  --qing-500: #2d9172;
  --qing-600: #1f7359;
  --qing-700: #1a5c48;
  --qing-800: #174a3c;
  --qing-900: #143d33;
  --lv-50: #f2fcf5;
  --lv-100: #e1f8e8;
  --lv-200: #c3eed2;
  --lv-300: #94deb3;
  --lv-400: #5cc58e;
  --lv-500: #34a86e;
  --lv-600: #258756;
  --lv-700: #206c47;
  --gold: #c9a96e;
  --gold-light: #e8d5a3;
  --ink: #1a1a1a;
  --ink-light: #3d3d3d;
  --paper: #faf8f3;
  --paper-warm: #f5f0e8;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC',
    sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  overflow-x: hidden;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 48px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250, 248, 243, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(45, 145, 114, 0.08);
  transition: all 0.4s ease;
}
.header.scrolled {
  background: rgba(250, 248, 243, 0.95);
  box-shadow: 0 1px 20px rgba(26, 92, 72, 0.06);
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-mark {
  width: 36px;
  height: 36px;
  border: 2px solid var(--qing-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-mark::after {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--qing-500);
  border-radius: 50%;
}
.logo-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--qing-800);
}
.nav {
  display: flex;
  gap: 40px;
}
.nav a {
  text-decoration: none;
  color: var(--ink-light);
  font-size: 15px;
  position: relative;
  padding: 4px 0;
  transition: color 0.3s;
}
.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--qing-500);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav a:hover {
  color: var(--qing-700);
}
.nav a:hover::after {
  width: 100%;
}
.header-cta {
  padding: 10px 28px;
  background: var(--qing-700);
  color: white;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s;
}
.header-cta:hover {
  background: var(--qing-800);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(26, 92, 72, 0.2);
}

/* Hero */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 48px 80px;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(126, 201, 176, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(148, 222, 179, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  z-index: 0;
}
.hero-mountains {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%232d9172' fill-opacity='0.06' d='M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,208C1248,192,1344,192,1392,192L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'/%3E%3Cpath fill='%231a5c48' fill-opacity='0.04' d='M0,288L48,272C96,256,192,224,288,213.3C384,203,480,213,576,234.7C672,256,768,288,864,288C960,288,1056,256,1152,240C1248,224,1344,224,1392,224L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'/%3E%3C/svg%3E")
    no-repeat bottom;
  background-size: cover;
  z-index: 1;
  pointer-events: none;
}
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(45, 145, 114, 0.08);
  border: 1px solid rgba(45, 145, 114, 0.15);
  border-radius: 100px;
  font-size: 13px;
  color: var(--qing-600);
  margin-bottom: 32px;
  letter-spacing: 1px;
}
.hero-badge .dot {
  width: 6px;
  height: 6px;
  background: var(--lv-400);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.hero-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--qing-900);
  margin-bottom: 24px;
  letter-spacing: 2px;
}
.hero-title .highlight {
  background: linear-gradient(135deg, var(--qing-600), var(--lv-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-desc {
  font-size: 18px;
  color: var(--ink-light);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 480px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
}
.btn-primary {
  padding: 14px 36px;
  background: var(--qing-700);
  color: white;
  border: none;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover {
  background: var(--qing-800);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26, 92, 72, 0.25);
}
.btn-secondary {
  padding: 14px 36px;
  background: transparent;
  color: var(--qing-700);
  border: 1.5px solid var(--qing-300);
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-secondary:hover {
  background: rgba(45, 145, 114, 0.05);
  border-color: var(--qing-500);
  transform: translateY(-2px);
}
.hero-stats {
  display: flex;
  gap: 48px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--qing-700);
}
.stat-label {
  font-size: 13px;
  color: #888;
  letter-spacing: 1px;
}
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-image-frame {
  width: 520px;
  height: 420px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 32px 64px rgba(26, 92, 72, 0.12),
    0 0 0 1px rgba(45, 145, 114, 0.08);
  background: linear-gradient(135deg, #e8f5f0, #d4ede3, #c5e5d8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-image-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px;
}
.hero-image-content h3 {
  font-size: 24px;
  color: var(--qing-700);
  margin-bottom: 8px;
}
.hero-image-content p {
  font-size: 14px;
  color: var(--qing-600);
}
.marker {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--gold);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 12px rgba(201, 169, 110, 0.5);
  z-index: 3;
  animation: markerPulse 2s infinite;
}
@keyframes markerPulse {
  0%,
  100% {
    box-shadow: 0 2px 12px rgba(201, 169, 110, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 2px 20px rgba(201, 169, 110, 0.8);
    transform: scale(1.1);
  }
}
.marker-1 {
  top: 25%;
  left: 30%;
}
.marker-2 {
  top: 55%;
  left: 65%;
}
.marker-3 {
  top: 70%;
  left: 40%;
}

/* Section Common */
.section {
  padding: 120px 48px;
  position: relative;
}
.section-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.section-header {
  text-align: center;
  margin-bottom: 80px;
}
.section-eyebrow {
  font-size: 13px;
  color: var(--qing-500);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 500;
}
.section-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--qing-900);
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.section-desc {
  font-size: 17px;
  color: #666;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.8;
}

/* Features */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.feature-card {
  padding: 40px 32px;
  background: white;
  border-radius: 20px;
  border: 1px solid rgba(45, 145, 114, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--qing-400), var(--lv-400));
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(26, 92, 72, 0.08);
  border-color: rgba(45, 145, 114, 0.15);
}
.feature-card:hover::before {
  transform: scaleX(1);
}
.feature-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--qing-50), var(--lv-50));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
  border: 1px solid rgba(45, 145, 114, 0.1);
}
.feature-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--qing-900);
  margin-bottom: 12px;
}
.feature-desc {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
}

/* Use Cases */
.use-cases {
  background: var(--paper-warm);
}
.case-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 100px;
}
.case-row:last-child {
  margin-bottom: 0;
}
.case-row.reverse {
  direction: rtl;
}
.case-row.reverse > * {
  direction: ltr;
}
.case-image {
  position: relative;
}
.case-image-inner {
  width: 100%;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 48px rgba(26, 92, 72, 0.1);
  background: linear-gradient(135deg, #e8f5f0, #d4ede3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
}
.case-image-frame {
  position: absolute;
  inset: -12px;
  border: 1px solid var(--qing-200);
  border-radius: 28px;
  z-index: -1;
}
.case-tag {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(45, 145, 114, 0.08);
  color: var(--qing-600);
  border-radius: 100px;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.case-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--qing-900);
  margin-bottom: 16px;
  letter-spacing: 1px;
}
.case-desc {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 32px;
}
.case-stats {
  display: flex;
  gap: 40px;
}
.case-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--qing-600);
}
.case-stat-label {
  font-size: 13px;
  color: #888;
}

/* Demo */
.demo-frame {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(26, 92, 72, 0.1);
  border: 1px solid rgba(45, 145, 114, 0.1);
}
.demo-frame-header {
  padding: 16px 24px;
  background: var(--qing-50);
  border-bottom: 1px solid rgba(45, 145, 114, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}
.demo-dots {
  display: flex;
  gap: 8px;
}
.demo-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--qing-200);
}
.demo-dot.active {
  background: var(--qing-500);
}
.demo-frame-body {
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f9f6, #e1f8e8);
}
.demo-placeholder {
  text-align: center;
  padding: 40px;
}
.demo-placeholder h3 {
  font-size: 24px;
  color: var(--qing-700);
  margin-bottom: 8px;
}
.demo-placeholder p {
  color: var(--qing-600);
  font-size: 15px;
}
.demo-steps {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.demo-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #555;
}
.demo-step-num {
  width: 28px;
  height: 28px;
  background: var(--qing-100);
  color: var(--qing-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Tech */
.tech-section {
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(126, 201, 176, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(148, 222, 179, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.tech-section::before {
  content: '';
  position: absolute;
  top: 10%;
  right: 5%;
  width: 400px;
  height: 400px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%232d9172;stop-opacity:0.08' /%3E%3Cstop offset='100%25' style='stop-color:%2334a86e;stop-opacity:0.04' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='200' cy='200' r='150' fill='none' stroke='url(%23grad1)' stroke-width='1' opacity='0.6'/%3E%3Ccircle cx='200' cy='200' r='120' fill='none' stroke='url(%23grad1)' stroke-width='0.8' opacity='0.5'/%3E%3Ccircle cx='200' cy='200' r='90' fill='none' stroke='url(%23grad1)' stroke-width='0.6' opacity='0.4'/%3E%3Ccircle cx='200' cy='200' r='60' fill='none' stroke='url(%23grad1)' stroke-width='0.5' opacity='0.3'/%3E%3Ccircle cx='200' cy='200' r='30' fill='url(%23grad1)' opacity='0.2'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: contain;
  animation: gentleFloat1 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.tech-section::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 8%;
  width: 350px;
  height: 350px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3ClinearGradient id='grad2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%231a5c48;stop-opacity:0.06' /%3E%3Cstop offset='100%25' style='stop-color:%232d9172;stop-opacity:0.03' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M200 80 L280 160 L280 240 L200 320 L120 240 L120 160 Z' fill='none' stroke='url(%23grad2)' stroke-width='1' opacity='0.5'/%3E%3Cpath d='M200 110 L260 170 L260 230 L200 290 L140 230 L140 170 Z' fill='none' stroke='url(%23grad2)' stroke-width='0.8' opacity='0.4'/%3E%3Cpath d='M200 140 L240 180 L240 220 L200 260 L160 220 L160 180 Z' fill='url(%23grad2)' opacity='0.15'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: contain;
  animation: gentleFloat2 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes gentleFloat1 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.7;
  }
  25% {
    transform: translate(-15px, -10px) rotate(3deg) scale(1.02);
    opacity: 0.8;
  }
  50% {
    transform: translate(-25px, 5px) rotate(5deg) scale(1.05);
    opacity: 0.9;
  }
  75% {
    transform: translate(-10px, 15px) rotate(2deg) scale(1.02);
    opacity: 0.8;
  }
}
@keyframes gentleFloat2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  33% {
    transform: translate(12px, -8px) rotate(-2deg) scale(1.03);
    opacity: 0.7;
  }
  66% {
    transform: translate(20px, 8px) rotate(-4deg) scale(1.06);
    opacity: 0.8;
  }
}
.tech-decoration {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.tech-decoration-1 {
  top: 50%;
  left: 15%;
  width: 200px;
  height: 200px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='dotGrad' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' style='stop-color:%232d9172;stop-opacity:0.15' /%3E%3Cstop offset='100%25' style='stop-color:%232d9172;stop-opacity:0' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='3' fill='url(%23dotGrad)'/%3E%3Ccircle cx='150' cy='50' r='2.5' fill='url(%23dotGrad)'/%3E%3Ccircle cx='100' cy='100' r='3.5' fill='url(%23dotGrad)'/%3E%3Ccircle cx='50' cy='150' r='2' fill='url(%23dotGrad)'/%3E%3Ccircle cx='150' cy='150' r='3' fill='url(%23dotGrad)'/%3E%3Ccircle cx='100' cy='30' r='2' fill='url(%23dotGrad)'/%3E%3Ccircle cx='30' cy='100' r='2.5' fill='url(%23dotGrad)'/%3E%3Ccircle cx='170' cy='100' r='2' fill='url(%23dotGrad)'/%3E%3Ccircle cx='100' cy='170' r='3' fill='url(%23dotGrad)'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: contain;
  animation: subtleFloat1 12s ease-in-out infinite;
}
.tech-decoration-2 {
  top: 20%;
  right: 20%;
  width: 180px;
  height: 180px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http3://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='lineGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%231a5c48;stop-opacity:0.1' /%3E%3Cstop offset='100%25' style='stop-color:%2334a86e;stop-opacity:0.05' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M40 100 Q100 40 160 100 Q100 160 40 100' fill='none' stroke='url(%23lineGrad)' stroke-width='1' opacity='0.4'/%3E%3Cpath d='M60 100 Q100 60 140 100 Q100 140 60 100' fill='none' stroke='url(%23lineGrad)' stroke-width='0.8' opacity='0.3'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: contain;
  animation: subtleFloat2 14s ease-in-out infinite;
}
.tech-decoration-3 {
  bottom: 25%;
  right: 12%;
  width: 160px;
  height: 160px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='triGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%232d9172;stop-opacity:0.08' /%3E%3Cstop offset='100%25' style='stop-color:%231f7359;stop-opacity:0.04' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='100,40 140,120 60,120' fill='none' stroke='url(%23triGrad)' stroke-width='0.8' opacity='0.35'/%3E%3Cpolygon points='100,60 130,110 70,110' fill='url(%23triGrad)' opacity='0.12'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: contain;
  animation: subtleFloat3 16s ease-in-out infinite;
}
@keyframes subtleFloat1 {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.5;
  }
  50% {
    transform: translate(8px, -12px);
    opacity: 0.65;
  }
}
@keyframes subtleFloat2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.4;
  }
  50% {
    transform: translate(-10px, 10px) rotate(8deg);
    opacity: 0.55;
  }
}
@keyframes subtleFloat3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.45;
  }
  50% {
    transform: translate(6px, 8px) scale(1.08);
    opacity: 0.6;
  }
}
.tech-section .section-title {
  color: var(--qing-900);
}
.tech-section .section-desc {
  color: var(--ink-light);
}
.tech-section .section-eyebrow {
  color: var(--qing-600);
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 64px;
}
.tech-item {
  text-align: center;
  padding: 40px 24px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(45, 145, 114, 0.1);
  border-radius: 20px;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
}
.tech-item:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26, 92, 72, 0.1);
  border-color: rgba(45, 145, 114, 0.2);
}
.tech-item .tech-item-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(45, 145, 114, 0.1), rgba(52, 168, 110, 0.08));
  border-radius: 16px;
  transition: all 0.3s;
}
.tech-item:hover .tech-item-icon {
  background: linear-gradient(135deg, rgba(45, 145, 114, 0.15), rgba(52, 168, 110, 0.12));
  transform: scale(1.05);
}
.tech-item .tech-item-icon svg {
  stroke: var(--qing-600);
  transition: all 0.3s;
}
.tech-item:hover .tech-item-icon svg {
  stroke: var(--qing-700);
}
.tech-item h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--qing-800);
}
.tech-item p {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.7;
}
.tech-logos {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.tech-logo {
  padding: 12px 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
}

/* Free Banner */
.free-banner {
  padding: 100px 48px;
  background: linear-gradient(135deg, var(--qing-700), var(--lv-700));
  position: relative;
  overflow: hidden;
}
.free-banner-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.free-banner h2 {
  font-size: 40px;
  color: white;
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.free-banner p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 40px;
  line-height: 1.8;
}
.free-features {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.free-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}
.free-feature .check {
  width: 20px;
  height: 20px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--qing-900);
  flex-shrink: 0;
}
.btn-white {
  padding: 14px 40px;
  background: white;
  color: var(--qing-700);
  border: none;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* FAQ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(45, 145, 114, 0.08);
  overflow: hidden;
  transition: all 0.3s;
}
.faq-item:hover {
  border-color: rgba(45, 145, 114, 0.15);
}
.faq-question {
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--qing-900);
  user-select: none;
  transition: background 0.3s;
}
.faq-question:hover {
  background: var(--qing-50);
}
.faq-icon {
  font-size: 12px;
  color: var(--qing-400);
  transition: transform 0.3s;
}
.faq-item.open .faq-icon {
  transform: rotate(180deg);
}
.faq-answer {
  padding: 0 32px 24px;
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  display: none;
}
.faq-item.open .faq-answer {
  display: block;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CTA */
.cta-section {
  padding: 120px 48px;
  text-align: center;
  background: var(--paper-warm);
  position: relative;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--qing-200), transparent);
}
.cta-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--qing-900);
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.cta-desc {
  font-size: 17px;
  color: #666;
  margin-bottom: 40px;
}
.cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}
.trust-badges {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #888;
}

/* Footer */
.footer {
  background: rgba(250, 248, 243, 0.95);
  backdrop-filter: blur(20px);
  color: var(--ink);
  padding: 80px 48px 40px;
  border-top: 1px solid rgba(45, 145, 114, 0.08);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 64px;
  margin-bottom: 64px;
}
.footer-brand {
  max-width: 280px;
}
.footer-brand p {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.8;
}
.footer-col h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--qing-800);
  letter-spacing: 1px;
}
.footer-col a {
  display: block;
  color: var(--ink-light);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 0;
  transition: all 0.3s;
  position: relative;
}
.footer-col a:hover {
  color: var(--qing-700);
}
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(45, 145, 114, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-copyright {
  font-size: 13px;
  color: var(--ink-light);
  opacity: 0.6;
}
.footer-beian {
  font-size: 13px;
  color: var(--ink-light);
  opacity: 0.6;
}
.footer-beian a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}
.footer-beian a:hover {
  color: var(--qing-700);
  opacity: 1;
}
.footer-social {
  display: flex;
  gap: 16px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  background: rgba(45, 145, 114, 0.08);
  border: 1px solid rgba(45, 145, 114, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qing-600);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;
}
.footer-social a:hover {
  background: var(--qing-700);
  border-color: var(--qing-700);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 92, 72, 0.2);
}

/* Scroll Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 {
  transition-delay: 0.1s;
}
.reveal-delay-2 {
  transition-delay: 0.2s;
}
.reveal-delay-3 {
  transition-delay: 0.3s;
}
.reveal-delay-4 {
  transition-delay: 0.4s;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-desc {
    margin: 0 auto 40px;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-stats {
    justify-content: center;
  }
  .hero-visual {
    order: -1;
  }
  .hero-image-frame {
    width: 100%;
    max-width: 480px;
    height: 320px;
    margin: 0 auto;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .case-row.reverse {
    direction: ltr;
  }
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .header {
    padding: 0 24px;
  }
  .nav {
    display: none;
  }
  .hero {
    padding: 100px 24px 60px;
  }
  .hero-title {
    font-size: 36px;
  }
  .section {
    padding: 80px 24px;
  }
  .section-title {
    font-size: 28px;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .tech-grid {
    grid-template-columns: 1fr;
  }
  .free-features {
    flex-direction: column;
    align-items: center;
  }
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}